/* SAP SuccessFactors page styles: page-specific layout, cards, hero visual, and responsive rules. */
.technology-page {
  background: #f7f9ff;
  color: #09124a;
}

.technology-page .site-header .nav-shell {
  max-width: 1360px;
}

.sap-successfactors-page {
  --sap-hero-image: url("../images/technology-pages/sap-successfactors/sap-successfactors-ai-hero-background.png");
}

.technology-page main .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: var(--section-badge-height);
  margin: 0 0 18px;
  
  padding: 8px 18px;

      border: 1px solid var(--qode-logo-blue) !important;
    border-radius: var(--qode-pill) !important;
    background: var(--qode-logo-blue) !important;
    color: #fff ;
  box-shadow: 0 10px 24px rgba(22, 65, 125, .18);
  font-size: var(--section-badge-font);
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}

/* Shared technology hero: reusable banner frame for all technology service pages. */
.tech-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: 118px 0 58px;
  background:
    radial-gradient(circle at 78% 22%, rgba(134, 79, 254, .16), transparent 28%),
    radial-gradient(circle at 22% 72%, rgba(47, 128, 255, .12), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(238, 245, 255, .96)),
    url("../images/banner/hero-light-wave-bg.png") center bottom / cover no-repeat;
}

.tech-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(47, 104, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 104, 255, .055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .78), transparent 82%);
}

.sap-hero {
  box-sizing: border-box;
  min-height: 100vh;
  height: 100vh;
  padding: clamp(104px, 9vh, 122px) 0 clamp(22px, 3vh, 36px);
  background:
    radial-gradient(circle at 82% 16%, rgba(134, 79, 254, .14), transparent 28%),
    radial-gradient(circle at 18% 72%, rgba(87, 184, 224, .12), transparent 30%),
    linear-gradient(180deg, #f8fbff, #edf5ff);
}

.sap-hero__container {
  position: relative;
  z-index: 1;
  width: min(100% - (clamp(28px, 3.2vw, 72px) * 2), 1660px);
  height: 100%;
}

.sap-hero__panel {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.sap-hero__panel::before {
  content: none;
}

.sap-hero__copy {
  position: relative;
  z-index: 3;
  width: min(56vw, 980px);
  padding: clamp(54px, 5.1vw, 88px) 0 0 clamp(28px, 3.4vw, 58px);
}

.sap-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin: 0 0 14px;
  border-radius: var(--qode-pill);
  background: var(--qode-logo-blue);
  box-shadow: 0 10px 24px rgba(22, 65, 125, .18);
  color: #fff;
  padding: 6px 17px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sap-hero__badge span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.sap-hero__badge svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sap-hero .sap-hero__copy h1 {
  max-width: 900px;
  margin: 0;
  color: #07114b;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 3.6vw, 4.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  text-wrap: balance;
  white-space: nowrap;
}

.sap-hero .sap-hero__copy h1 span {
  display: block;
  margin-right: 0;
  color: #1269ff;
  background: linear-gradient(135deg, #1269ff 0%, #216fff 52%, #754dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sap-hero__accent {
  display: block;
  width: 82px;
  height: 3px;
  margin-top: clamp(16px, 1.7vw, 24px);
  border-radius: 999px;
  background: linear-gradient(90deg, #1269ff, #864ffe);
}

.sap-hero__tagline {
  max-width: 760px;
  margin: clamp(20px, 2vw, 30px) 0 0;
  color: rgba(8, 13, 63, .68);
  font-size: clamp(23px, 1.85vw, 34px);
  font-weight: 500;
  line-height: 1.35;
}

.sap-hero__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  max-width: 790px;
  min-height: clamp(66px, 5.1vw, 86px);
  margin-top: clamp(34px, 3.6vw, 54px);
  border: 1px solid rgba(209, 219, 241, .7);
  border-radius: 14px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 16px 36px rgba(22, 65, 125, .08);
  backdrop-filter: blur(14px);
}

.sap-hero__pillars article {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 11px;
  height: 100%;
  min-width: 0;
  padding: 10px clamp(10px, 1.2vw, 22px);
  text-align: left;
}

.sap-hero__pillars article + article::before {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(18, 105, 255, 0), rgba(18, 105, 255, .2), rgba(18, 105, 255, 0));
}

.sap-hero__pillars strong {
  color: #07114b;
  font-family: var(--font-body);
  font-size: clamp(.8rem, .86vw, .94rem);
  font-weight: 600;
  line-height: 1.25;
}

.sap-hero__benefits strong {
  color: #07114b;
  font-family: var(--font-body);
  font-size: clamp(.8rem, .9vw, 1rem);
  font-weight: 600;
  line-height: 1.25;
}

.sap-hero__benefits {
  position: absolute;
  right: clamp(22px, 2vw, 42px);
  bottom: clamp(22px, 2.8vw, 42px);
  left: clamp(22px, 2vw, 42px);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  min-height: clamp(78px, 6vw, 104px);
}

.sap-hero__benefits article {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  align-content: center;
  gap: clamp(10px, 1.15vw, 16px);
  height: 100%;
  min-height: clamp(78px, 6vw, 104px);
  border: 1px solid rgba(209, 219, 241, .68);
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  box-shadow:
    0 16px 38px rgba(22, 65, 125, .08),
    inset 0 1px 0 rgba(255, 255, 255, .86);
  padding: 12px clamp(10px, 1.3vw, 22px);
  backdrop-filter: blur(14px);
}

.sap-hero__benefits article + article::before {
  display: none;
}

.sap-hero-icon {
  --sap-icon-color: #1269ff;
  --sap-icon-bg: rgba(18, 105, 255, .1);
  display: inline-grid;
  place-items: center;
  width: clamp(44px, 3.7vw, 66px);
  height: clamp(44px, 3.7vw, 66px);
  border-radius: 50%;
  background: var(--sap-icon-bg);
  color: var(--sap-icon-color);
}

.sap-hero-icon::before {
  content: "";
  width: 52%;
  height: 52%;
  background: currentColor;
  -webkit-mask: var(--sap-icon) center / contain no-repeat;
  mask: var(--sap-icon) center / contain no-repeat;
}

.sap-hero-icon--people {
  --sap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M25 30a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm18-2a8 8 0 1 1 0-16 8 8 0 0 1 0 16ZM7 52c2-10 9-16 18-16s16 6 18 16H7Zm32-2c2-7 7-11 14-11 6 0 11 4 13 11H39Z'/%3E%3C/svg%3E");
}

.sap-hero-icon--growth {
  --sap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 52h44v6H10v-6Zm5-18h8v16h-8V34Zm13-10h8v26h-8V24Zm13 8h8v18h-8V32Zm-4-21h17v17h-6V21L32 37l-9-9-12 12-4-4 16-16 9 9 12-12h-7v-6Z'/%3E%3C/svg%3E");
}

.sap-hero-icon--shield {
  --sap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 6 54 15v15c0 15-9 25-22 32C19 55 10 45 10 30V15l22-9Zm-4 34 16-16-5-5-11 11-5-5-5 5 10 10Z'/%3E%3C/svg%3E");
}

.sap-hero-icon--brain {
  --sap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M25 8a10 10 0 0 0-9 14 11 11 0 0 0-6 10c0 5 3 9 7 10a10 10 0 0 0 18 6V15A10 10 0 0 0 25 8Zm14 7v33a10 10 0 0 0 18-6c4-1 7-5 7-10a11 11 0 0 0-6-10A10 10 0 0 0 39 15ZM20 26h8v5h-8v-5Zm16 8h8v5h-8v-5Z'/%3E%3C/svg%3E");
}

.sap-hero-icon--lock {
  --sap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 4 56 14v17c0 15-9 25-24 31C17 56 8 46 8 31V14L32 4Zm-9 27h2v-6a7 7 0 0 1 14 0v6h2a4 4 0 0 1 4 4v13a4 4 0 0 1-4 4H23a4 4 0 0 1-4-4V35a4 4 0 0 1 4-4Zm10 12 2 4h-6l2-4a4 4 0 1 1 2 0Zm-4-12h8v-6a4 4 0 0 0-8 0v6Z'/%3E%3C/svg%3E");
}

.sap-hero-icon--cost {
  --sap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M29 6h6v7c6 1 11 5 13 11l-7 3c-2-5-5-8-11-8-5 0-8 2-8 6 0 5 5 6 11 8 8 2 17 5 17 16 0 8-6 14-15 15v7h-6v-7c-8-1-15-5-18-13l8-3c2 6 7 9 14 9 6 0 10-3 10-7 0-5-5-6-12-8-8-2-16-5-16-15 0-8 6-14 14-15V6Z'/%3E%3C/svg%3E");
}

.sap-hero-icon--heart {
  --sap-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 56C18 46 8 37 8 25A13 13 0 0 1 31 17l1 2 1-2a13 13 0 0 1 23 8c0 12-10 21-24 31Zm-9-25h6l3-8 5 16 3-8h7v-6h-3l-4 11-8-24-7 19h-2v6Z'/%3E%3C/svg%3E");
}

.sap-hero-icon--purple {
  --sap-icon-color: #864ffe;
  --sap-icon-bg: rgba(134, 79, 254, .12);
}

.sap-hero-icon--cyan {
  --sap-icon-color: #12b8c7;
  --sap-icon-bg: rgba(87, 184, 224, .14);
}

.tech-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(520px, .72fr) minmax(720px, 1fr);
  gap: clamp(38px, 4.5vw, 68px);
  align-items: center;
}

.tech-hero h1,
.tech-section h2 {
  margin: 0;
  color: #07114b;
  font-size: var(--section-title-size);
  font-weight: var(--section-title-weight);
  line-height: var(--section-title-line);
  letter-spacing: 0;
}

.tech-hero h1 span,
.tech-section h2 span {
  background: var(--qode-deon-fill-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.tech-hero h1 {
  max-width: 760px;
  font-size: clamp(2rem, 2.25vw, 2.85rem);
}

.tech-hero__copy > p:not(.eyebrow),
.tech-section__intro p,
.tech-copy p {
  max-width: 620px;
  margin: 18px 0 0;
  color: rgba(18, 27, 72, .72);
  font-size: var(--section-copy-size);
  font-weight: 400;
  line-height: var(--section-copy-line);
}

.tech-hero__copy > p:not(.eyebrow)::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 0 0 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f80ff, #864ffe);
}

.tech-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.tech-proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 680px;
  margin-top: 28px;
}

.tech-proof-row span {
  min-height: 82px;
  border: 1px solid rgba(209, 219, 241, .76);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(247, 251, 255, .76));
  box-shadow: 0 18px 42px rgba(22, 65, 125, .1);
  padding: 14px;
  backdrop-filter: blur(16px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.tech-proof-row span:hover {
  transform: translateY(-5px);
  border-color: rgba(47, 128, 255, .34);
  box-shadow: 0 24px 52px rgba(22, 65, 125, .16);
}

.tech-proof-row strong {
  display: block;
  color: #07114b;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.tech-proof-row small {
  display: block;
  margin-top: 8px;
  color: rgba(18, 27, 72, .66);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

/* Hero visual: temporary technology dashboard with page-specific background image support. */
.tech-hero__visual {
  position: relative;
  min-width: 0;
}

.tech-visual-card {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  border: 1px solid rgba(209, 219, 241, .8);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .2)),
    var(--tech-hero-image) right center / cover no-repeat;
  box-shadow: 0 30px 90px rgba(22, 65, 125, .16);
}

.tech-visual-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(47, 104, 255, .34);
  border-radius: 24px;
  pointer-events: none;
}

.tech-visual-card--banner {
  aspect-ratio: 1693 / 929;
  min-height: 0;
  background: var(--tech-hero-image) center / cover no-repeat;
}

.tech-visual-card--banner::before {
  inset: 14px;
  border-color: rgba(255, 255, 255, .58);
  opacity: .62;
}

.tech-visual-card--banner .tech-dashboard,
.tech-visual-card--banner .tech-floating-card {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sap-hero__panel {
    animation: sapHeroBannerIn .72s var(--ease) both;
    will-change: transform;
  }

  .sap-hero__badge,
  .sap-hero .sap-hero__copy h1,
  .sap-hero__accent,
  .sap-hero__tagline,
  .sap-hero__pillars article,
  .sap-hero__benefits {
    animation: sapHeroFadeUp .68s var(--ease) both;
    will-change: opacity, transform;
  }

  .sap-hero__badge { animation-delay: .12s; }
  .sap-hero .sap-hero__copy h1 { animation-delay: .2s; }
  .sap-hero__accent { animation-delay: .3s; transform-origin: left center; }
  .sap-hero__tagline { animation-delay: .38s; }
  .sap-hero__pillars article:nth-child(1) { animation-delay: .5s; }
  .sap-hero__pillars article:nth-child(2) { animation-delay: .58s; }
  .sap-hero__pillars article:nth-child(3) { animation-delay: .66s; }
  .sap-hero__benefits { animation-delay: .82s; }

  .sap-hero-icon {
    animation: sapHeroIconPulse 5.5s ease-in-out infinite;
  }

  .sap-hero__pillars article:nth-child(2) .sap-hero-icon,
  .sap-hero__benefits article:nth-child(2) .sap-hero-icon {
    animation-delay: .7s;
  }

  .sap-hero__pillars article:nth-child(3) .sap-hero-icon,
  .sap-hero__benefits article:nth-child(3) .sap-hero-icon {
    animation-delay: 1.2s;
  }

  .sap-hero__benefits article {
    transition: transform .3s var(--ease), background .3s var(--ease);
  }

  .sap-hero__benefits article:hover {
    transform: translateY(-4px);
  }
}

@keyframes sapHeroBannerIn {
  from {
    transform: translateY(24px) scale(.985);
  }

  to {
    transform: translateY(0) scale(1);
  }
}

@keyframes sapHeroFadeUp {
  from {
    opacity: .72;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sapHeroIconPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: none;
  }

  45% {
    transform: translateY(-3px) scale(1.035);
    box-shadow: 0 12px 24px rgba(47, 104, 255, .12);
  }
}

.tech-dashboard,
.tech-floating-card {
  border: 1px solid rgba(209, 219, 241, .86);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 22px 58px rgba(22, 65, 125, .14);
  backdrop-filter: blur(18px);
}

.tech-dashboard {
  position: absolute;
  left: 28px;
  bottom: 26px;
  width: min(68%, 430px);
  border-radius: 18px;
  padding: 18px;
}

.tech-dashboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.tech-dashboard__head strong {
  color: #07114b;
  font-size: 15px;
  line-height: 1.1;
}

.tech-dashboard__head span {
  color: #0aa36e;
  font-size: 12px;
  font-weight: 800;
}

.tech-dashboard__bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 8px;
  height: 92px;
  margin-top: 18px;
}

.tech-dashboard__bars i {
  display: block;
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, #2f80ff, #864ffe);
}

.tech-dashboard__bars i:nth-child(1) { height: 38%; }
.tech-dashboard__bars i:nth-child(2) { height: 58%; }
.tech-dashboard__bars i:nth-child(3) { height: 48%; }
.tech-dashboard__bars i:nth-child(4) { height: 76%; }
.tech-dashboard__bars i:nth-child(5) { height: 92%; }

.tech-floating-card {
  position: absolute;
  right: 24px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
  width: min(46%, 270px);
  border-radius: 18px;
  padding: 14px;
}

.tech-floating-card--top { top: 28px; }
.tech-floating-card--middle { top: 142px; right: 64px; }
.tech-floating-card--bottom { right: 38px; bottom: 30px; }

.tech-floating-card strong {
  display: block;
  color: #07114b;
  font-size: 13px;
  line-height: 1.18;
}

.tech-floating-card small {
  display: block;
  margin-top: 4px;
  color: rgba(18, 27, 72, .6);
  font-size: 11px;
  font-weight: 700;
}

.tech-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background:
    var(--tech-icon-url) center / 25px 25px no-repeat,
    linear-gradient(135deg, rgba(47, 128, 255, .14), rgba(134, 79, 254, .12));
}

.tech-icon--cloud { --tech-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='%232f68ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H7a5 5 0 1 1 1.1-9.88A7 7 0 0 1 21 12a3.5 3.5 0 0 1-3.5 7Z'/%3E%3C/svg%3E"); }
.tech-icon--flow { --tech-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='%232f68ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='12' cy='18' r='3'/%3E%3Cpath d='M8.6 7.6 10.8 15'/%3E%3Cpath d='M15.4 7.6 13.2 15'/%3E%3C/svg%3E"); }
.tech-icon--agent { --tech-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='%232f68ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='8' width='14' height='10' rx='3'/%3E%3Cpath d='M12 4v4'/%3E%3Ccircle cx='9' cy='13' r='1'/%3E%3Ccircle cx='15' cy='13' r='1'/%3E%3Cpath d='M9.5 17h5'/%3E%3C/svg%3E"); }
.tech-icon--shield { --tech-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='%232f68ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E"); }
.tech-icon--chart { --tech-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='%232f68ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18'/%3E%3Cpath d='M6 16v-4'/%3E%3Cpath d='M11 16V8'/%3E%3Cpath d='M16 16v-6'/%3E%3Cpath d='m5 10 5-5 4 4 5-7'/%3E%3Cpath d='M19 2v5h-5'/%3E%3C/svg%3E"); }
.tech-icon--settings { --tech-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='%232f68ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21a2 2 0 0 1-4 0v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3a2 2 0 0 1 0-4h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06A2 2 0 1 1 7.03 3.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3a2 2 0 0 1 4 0v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.38.1.72.3 1 .6.3.3.5.65.6 1H21a2 2 0 0 1 0 4h-.09A1.7 1.7 0 0 0 19.4 15Z'/%3E%3C/svg%3E"); }
.tech-icon--people { --tech-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='%232f68ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='10' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.tech-icon--target { --tech-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='none' stroke='%232f68ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Cpath d='M20 4 14 10'/%3E%3Cpath d='M16 4h4v4'/%3E%3C/svg%3E"); }

/* Content sections: compact cards and split layouts shared across technology pages. */
.tech-section {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 5vw, 78px) 0;
}

.tech-section--white { background: #fff; }

.tech-section--soft {
  background:
    radial-gradient(circle at 84% 16%, rgba(47, 128, 255, .1), transparent 26%),
    linear-gradient(180deg, #f5f8ff, #eef5ff);
}

.tech-section--dark {
  background:
    radial-gradient(circle at 84% 14%, rgba(47, 128, 255, .18), transparent 32%),
    linear-gradient(180deg, #071e45, #041634);
  color: #fff;
}

.tech-section--dark .eyebrow {
  border-color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .12);
}

.tech-section--dark h2,
.tech-section--dark .tech-card h3,
.tech-section--dark .tech-step strong {
  color: #fff;
}

.tech-section--dark .tech-section__intro p,
.tech-section--dark .tech-card p,
.tech-section--dark .tech-step p {
  color: rgba(255, 255, 255, .76);
}

.tech-section__intro {
  max-width: 100%;
  margin-bottom: 28px;
}

.tech-section__intro > p:not(.eyebrow) {
  max-width: 100%;
}

.tech-split {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(520px, 1.2fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.tech-media-panel {
  overflow: hidden;
  justify-self: center;
  width: min(100%, 500px);
  border: 1px solid rgba(209, 219, 241, .8);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(22, 65, 125, .12);
}

.tech-media-panel img {
  display: block;
  width: 100%;
  height: clamp(240px, 26vw, 330px);
  object-fit: contain;
  background: #fff;
}

.tech-media-panel--logo {
  background: #fff;
}

.tech-media-panel--logo img {
  height: clamp(220px, 24vw, 300px);
  object-fit: contain;
  padding: 24px;
}

.sap-overview-section {
    padding: clamp(22px, 3vw, 108px) 0;
  background:
    radial-gradient(circle at 86% 18%, rgba(47, 128, 255, .1), transparent 28%),
    radial-gradient(circle at 16% 84%, rgba(134, 79, 254, .07), transparent 30%),
    linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.sap-overview-section__grid {
  display: grid;
  grid-template-columns: minmax(420px, .9fr) minmax(500px, 1.1fr);
  gap: clamp(36px, 5vw, 82px);
  align-items: center;
}

.sap-overview-section .eyebrow {
  border-color: rgba(22, 65, 125, .14);
  background: #16417d;
  color: #fff;
  box-shadow: 0 14px 30px rgba(22, 65, 125, .18);
  padding-inline: 22px;
  font-weight: 700;
}

.sap-overview-section__copy h2 {
  max-width: 760px;
  color: #07114b;
  font-family: var(--font-heading);
  font-size: clamp(2.55rem, 4.15vw, 4.45rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}

.sap-overview-section__copy h2 span {
  background: linear-gradient(135deg, #346cff 0%, #5f52ff 56%, #8a63ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.sap-overview-section__copy p:not(.eyebrow) {
  max-width: 740px;
  color: rgba(17, 25, 78, .78);
  font-size: clamp(1.05rem, 1.2vw, 1.28rem);
  font-weight: 500;
  line-height: 1.6;
}

.sap-overview-section__media {
  position: relative;
  justify-self: end;
  width: min(100%, 690px);
}

.sap-overview-section__media img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 28px 42px rgba(47, 104, 255, .14));
}

.sap-why-section {
  padding: clamp(22px, 3vw, 108px) 0;
  background:
    radial-gradient(circle at 82% 20%, rgba(47, 128, 255, .1), transparent 28%),
    radial-gradient(circle at 14% 84%, rgba(134, 79, 254, .08), transparent 30%),
    linear-gradient(180deg, #fff 0%, #f7faff 100%);
}

.sap-why-section__grid {
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(520px, 1.08fr);
  gap: clamp(36px, 5vw, 82px);
  align-items: center;
  margin-bottom: clamp(34px, 4vw, 58px);
}

.sap-why-section .eyebrow {
  border-color: rgba(22, 65, 125, .14);
  background: #16417d;
  color: #fff;
  box-shadow: 0 14px 30px rgba(22, 65, 125, .18);
  padding-inline: 22px;
  font-weight: 700;
}

.sap-why-section__copy h2 {
  max-width: 760px;
  color: #07114b;
  font-family: var(--font-heading);
  font-size: clamp(2.55rem, 4.15vw, 4.45rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.sap-why-section__copy h2 span {
  background: linear-gradient(135deg, #346cff 0%, #5f52ff 56%, #8a63ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.sap-why-section__copy p:not(.eyebrow) {
  max-width: 720px;
  color: rgba(17, 25, 78, .78);
  font-size: clamp(1.05rem, 1.2vw, 1.28rem);
  font-weight: 500;
  line-height: 1.6;
}

.sap-why-section__media {
  width: min(100%, 690px);
  justify-self: end;
}

.sap-why-section__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 28px 42px rgba(47, 104, 255, .14));
}

.sap-why-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 0.5vw, 22px);
}

.sap-why-card {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 18px;
  min-height: 240px;
  border: 1px solid rgba(209, 219, 241, .82);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 44px rgba(22, 65, 125, .08);
  padding: clamp(18px, 0.4vw, 28px);
}

.sap-why-card__icon,
.sap-why-cta__icon,
.sap-hero-feature-icon {
  --sap-card-icon: none;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 20px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .95), transparent 38%),
    linear-gradient(135deg, rgba(91, 54, 244, .16), rgba(47, 104, 255, .12));
  color: #5f52ff;
}

.sap-why-card__icon {
  width: 72px;
  height: 72px;
}

.sap-why-card__icon::before,
.sap-why-cta__icon::before,
.sap-hero-feature-icon::before {
  content: "";
  width: 48%;
  height: 48%;
  background: currentColor;
  -webkit-mask: var(--sap-card-icon) center / contain no-repeat;
  mask: var(--sap-card-icon) center / contain no-repeat;
}

.sap-why-card h3 {
  margin: 0;
  color: #07114b;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.08vw, 1.2rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.sap-why-card p {
  margin: 14px 0 0;
  color: rgba(17, 25, 78, .76);
  font-size: clamp(.88rem, .9vw, .98rem);
  font-weight: 500;
  line-height: 1.55;
}

.sap-why-card__icon--data,
.sap-hero__benefits article:nth-child(1) .sap-hero-feature-icon {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C7 3 4 4.6 4 7v10c0 2.4 3 4 8 4s8-1.6 8-4V7c0-2.4-3-4-8-4Zm0 3c3.6 0 5.5.9 5.5 1S15.6 8 12 8s-5.5-.9-5.5-1S8.4 6 12 6Zm0 12c-3.6 0-5.5-.9-5.5-1v-2.6C8 15.1 9.9 15.5 12 15.5s4-.4 5.5-1.1V17c0 .1-1.9 1-5.5 1Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--workflow {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.8 2h2.4l.6 3a7.8 7.8 0 0 1 1.7.7l2.5-1.7 1.7 1.7-1.7 2.5c.3.5.6 1.1.7 1.7l3 .6v2.4l-3 .6a7.8 7.8 0 0 1-.7 1.7l1.7 2.5-1.7 1.7-2.5-1.7c-.5.3-1.1.6-1.7.7l-.6 3h-2.4l-.6-3a7.8 7.8 0 0 1-1.7-.7L6 20l-1.7-1.7L6 15.8a7.8 7.8 0 0 1-.7-1.7l-3-.6v-2.4l3-.6c.2-.6.4-1.2.7-1.7L4.3 6.3 6 4.6l2.5 1.7c.5-.3 1.1-.6 1.7-.7l.6-3ZM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--recruiting,
.sap-hero__benefits article:nth-child(2) .sap-hero-feature-icon {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.4 0-7 2.3-7 6h10.2A6 6 0 0 1 10 14Zm8-1a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm1 4h2v2h-2v2h-2v-2h-2v-2h2v-2h2v2Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--target,
.sap-hero__benefits article:nth-child(3) .sap-hero-feature-icon {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10h-3a7 7 0 1 1-7-7V2Zm0 5a5 5 0 1 0 5 5h-3a2 2 0 1 1-2-2V7Zm9-5-6 6v3l7-7V2h-1Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--learning,
.sap-hero__benefits article:nth-child(4) .sap-hero-feature-icon {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 10 5-10 5L2 8l10-5Zm-6 9.2V17c4 2.7 8 2.7 12 0v-4.8l-6 3-6-3ZM20 10v7h2v-8l-2 1Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--compensation,
.sap-hero__benefits article:nth-child(5) .sap-hero-feature-icon {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v3c3 .4 5 2.2 5.8 4.8l-3 1.1C15.2 9 14 8 12 8c-1.7 0-2.8.7-2.8 1.8 0 1.5 1.6 1.9 3.8 2.5 3 .8 6 1.9 6 5.5 0 2.9-2.2 5-6 5.4V24h-2v-.8c-3.4-.5-5.7-2.3-6.8-5.1l3-1.2c.8 2 2.4 3 4.9 3 2 0 3.4-.8 3.4-2.1 0-1.5-1.6-1.9-4-2.5-3-.8-5.8-1.9-5.8-5.4 0-2.7 2.1-4.7 5.3-5.1V2Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--analytics,
.sap-hero__benefits article:nth-child(6) .sap-hero-feature-icon {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16v2H4v-2Zm1-7h4v6H5v-6Zm5-5h4v11h-4V8Zm5-5h4v16h-4V3Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--experience {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C6.5 17.1 3 13.8 3 9.5A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9 4.5c0 4.3-3.5 7.6-9 11.5Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--consulting {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm10 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8ZM2 21c.5-4.2 2.8-7 7-7s6.5 2.8 7 7H2Zm13-4.7c.9-1.5 2.4-2.3 4.4-2.3 2.8 0 4.4 1.8 4.6 5h-5.8a9.5 9.5 0 0 0-3.2-2.7Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--implementation {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.8 2h2.4l.6 3a7.8 7.8 0 0 1 1.7.7l2.5-1.7 1.7 1.7-1.7 2.5c.3.5.6 1.1.7 1.7l3 .6v2.4l-3 .6a7.8 7.8 0 0 1-.7 1.7l1.7 2.5-1.7 1.7-2.5-1.7c-.5.3-1.1.6-1.7.7l-.6 3h-2.4l-.6-3a7.8 7.8 0 0 1-1.7-.7L6 20l-1.7-1.7L6 15.8a7.8 7.8 0 0 1-.7-1.7l-3-.6v-2.4l3-.6c.2-.6.4-1.2.7-1.7L4.3 6.3 6 4.6l2.5 1.7c.5-.3 1.1-.6 1.7-.7l.6-3ZM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--employee-central {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16v18H4V3Zm4 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm6 1h4v2h-4V8Zm0 4h4v2h-4v-2Zm-8 6h12v-1c-.4-2-2-3-5-3H11c-3 0-4.6 1-5 3v1Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--onboarding {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.4 0-7 2.3-7 6h10.2A6 6 0 0 1 10 14Zm8-1v4h4v2h-4v4h-2v-4h-4v-2h4v-4h2Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--integration {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5a3 3 0 1 1 3 3 3 3 0 0 1-3-3Zm7 14a3 3 0 1 1 3 3 3 3 0 0 1-3-3ZM2 15a3 3 0 1 1 3 3 3 3 0 0 1-3-3Zm6-1 6-7 2 2-6 7-2-2Zm1 2 5 2-.7 2-5-2 .7-2Z'/%3E%3C/svg%3E");
}

.sap-why-card__icon--support {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13a8 8 0 0 1 16 0v4a4 4 0 0 1-4 4h-3v-2h3a2 2 0 0 0 2-2v-4a6 6 0 0 0-12 0v5H4v-5Zm1 1h4v6H5v-6Zm10 0h4v6h-4v-6Z'/%3E%3C/svg%3E");
}

.sap-why-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(209, 219, 241, .82);
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 44px rgba(22, 65, 125, .08);
  padding: 16px 26px;
}

.sap-why-cta__icon {
  --sap-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 2.2 5.8L20 10l-5.8 2.2L12 18l-2.2-5.8L4 10l5.8-2.2L12 2Zm6 12 1 2.5 2.5 1-2.5 1-1 2.5-1-2.5-2.5-1 2.5-1 1-2.5Z'/%3E%3C/svg%3E");
  width: 56px;
  height: 56px;
}

.sap-why-cta p {
  margin: 0;
  color: #07114b;
  font-size: clamp(1rem, 1.05vw, 1.12rem);
  font-weight: 500;
  line-height: 1.45;
}

.sap-why-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2f68ff 0%, #5c32f5 100%);
  color: #fff;
  padding: 0 28px;
  box-shadow: 0 16px 30px rgba(92, 50, 245, .22);
  font-size: .98rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.sap-why-cta__button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1180px) {
  .sap-overview-section__grid {
    grid-template-columns: 1fr;
  }

  .sap-overview-section__media {
    justify-self: center;
    width: min(100%, 620px);
  }

  .sap-why-section__grid {
    grid-template-columns: 1fr;
  }

  .sap-why-section__media {
    justify-self: center;
    width: min(100%, 620px);
  }

  .sap-why-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sap-why-cta {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sap-why-cta__button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .sap-overview-section {
    padding: 58px 0;
  }

  .sap-overview-section__copy h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .sap-why-section {
    padding: 58px 0;
  }

  .sap-why-section__copy h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .sap-why-card-grid,
  .sap-why-cta {
    grid-template-columns: 1fr;
  }

  .sap-why-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .sap-why-cta {
    padding: 20px;
  }

  .sap-why-cta__button {
    width: 100%;
    padding-inline: 18px;
    white-space: normal;
  }
}

.sap-services-section {
  padding: clamp(72px, 7vw, 108px) 0;
  background:
    radial-gradient(circle at 82% 6%, rgba(134, 79, 254, .18), transparent 30%),
    radial-gradient(circle at 18% 88%, rgba(47, 128, 255, .1), transparent 30%),
    linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
  overflow: hidden;
}

.sap-services-section__hero {
  display: grid;
  grid-template-columns: minmax(420px, .84fr) minmax(560px, 1.16fr);
  gap: clamp(34px, 5vw, 86px);
  align-items: center;
  margin-bottom: clamp(38px, 5vw, 70px);
}

.sap-services-section .eyebrow {
  border-color: rgba(22, 65, 125, .14);
  background: #16417d;
  color: #fff;
  box-shadow: 0 14px 30px rgba(22, 65, 125, .18);
  padding-inline: 22px;
  font-weight: 700;
}

.sap-services-section__copy h2 {
  max-width: 760px;
  margin: 0;
  color: #07114b;
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 4.45vw, 4.8rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.05em;
}

.sap-services-section__copy h2 span {
  display: block;
  background: linear-gradient(135deg, #5b36f4 0%, #644cff 52%, #866fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.sap-services-section__line {
  display: block;
  width: 72px;
  height: 4px;
  margin: clamp(18px, 2vw, 26px) 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #5c32f5, #8b6bff);
}

.sap-services-section__copy p:not(.eyebrow) {
  max-width: 650px;
  margin: 0;
  color: rgba(17, 25, 78, .78);
  font-size: clamp(1.02rem, 1.16vw, 1.24rem);
  font-weight: 500;
  line-height: 1.65;
}

.sap-services-section__media {
  justify-self: end;
  width: min(100%, 820px);
}

.sap-services-section__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 48px rgba(47, 104, 255, .15));
}

.sap-services-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 22px);
}

.sap-service-card {
  position: relative;
  min-height: 220px;
  border: 1px solid rgba(209, 219, 241, .82);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 44px rgba(22, 65, 125, .08);
  padding: clamp(20px, 1.7vw, 26px);
}



.sap-service-card__number {
  position: absolute;
  top: -18px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f80ff, #864ffe);
  color: #fff;
  box-shadow: 0 8px 18px rgba(92, 50, 245, .26);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  transform: translateX(-50%);
}

.sap-service-card__icon {
  width: 62px;
  height: 62px;
  margin-bottom: 16px;
}

.sap-service-card h3 {
  margin: 0;
  color: #07114b;
  font-family: var(--font-heading);
  font-size: clamp(.96rem, 1vw, 1.1rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.012em;
}

.sap-service-card p {
  margin: 12px 0 0;
  color: rgba(17, 25, 78, .76);
  font-size: clamp(.84rem, .86vw, .95rem);
  font-weight: 500;
  line-height: 1.55;
}

.sap-services-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-top: clamp(20px, 2.2vw, 30px);
  border: 1px solid rgba(134, 79, 254, .32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 110%, rgba(134, 79, 254, .18), transparent 34%),
    rgba(255, 255, 255, .9);
  box-shadow: 0 18px 44px rgba(22, 65, 125, .08);
  padding: 18px 28px;
}

.sap-services-cta p {
  margin: 0;
  color: #07114b;
  font-size: clamp(1rem, 1.08vw, 1.18rem);
  font-weight: 800;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .sap-services-section__hero {
    grid-template-columns: 1fr;
  }

  .sap-services-section__media {
    justify-self: center;
    width: min(100%, 760px);
  }

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

  .sap-services-cta {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sap-services-cta .sap-why-cta__button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 700px) {
  .sap-services-section {
    padding: 58px 0;
  }

  .sap-services-section__copy h2 {
    font-size: clamp(2.1rem, 11vw, 3.15rem);
  }

  .sap-services-grid,
  .sap-services-cta {
    grid-template-columns: 1fr;
  }

  .sap-service-card {
    min-height: 0;
  }

  .sap-service-card__number {
    left: 28px;
    transform: none;
  }

  .sap-services-cta {
    padding: 20px;
  }
}

.tech-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tech-module-card {
  border: 1px solid rgba(209, 219, 241, .78);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 48px rgba(22, 65, 125, .08);
  padding: 22px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.tech-module-card:hover {
  transform: translateY(-6px);
  border-color: rgba(47, 104, 255, .22);
  box-shadow: 0 26px 70px rgba(22, 65, 125, .14);
}

.tech-module-card h3 {
  margin: 16px 0 0;
  color: #07114b;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
}

.tech-module-card h3::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f80ff, #864ffe);
}

.tech-module-card p {
  margin: 14px 0 0;
  color: rgba(18, 27, 72, .7);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.tech-feature-list {
  display: grid;
  gap: 9px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.tech-feature-list li {
  position: relative;
  padding-left: 18px;
  color: rgba(18, 27, 72, .66);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
}

.tech-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f80ff, #864ffe);
}

.tech-support-panel {
  max-width: 880px;
}

.tech-support-panel p:not(.eyebrow) {
  max-width: 740px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .76);
  font-size: var(--section-copy-size);
  font-weight: 400;
  line-height: var(--section-copy-line);
}

.tech-mini-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.tech-mini-points span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid rgba(209, 219, 241, .84);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #07114b;
  padding: 9px 14px;
  box-shadow: 0 12px 28px rgba(22, 65, 125, .08);
  font-size: 13px;
  font-weight: 700;
}

.tech-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tech-card-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tech-card {
  min-height: 210px;
  border: 1px solid rgba(209, 219, 241, .78);
  border-radius: 16px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 48px rgba(22, 65, 125, .08);
  padding: 20px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.tech-card:hover {
  transform: translateY(-6px);
  border-color: rgba(47, 104, 255, .22);
  box-shadow: 0 26px 70px rgba(22, 65, 125, .14);
}

.tech-card h3 {
  margin: 16px 0 0;
  color: #07114b;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.18;
}

.tech-card h3::after {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f80ff, #864ffe);
}

.tech-card p,
.tech-step p {
  margin: 14px 0 0;
  color: rgba(18, 27, 72, .68);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.tech-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.tech-step {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  padding: 20px;
}

.tech-step span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.tech-step strong {
  display: block;
  margin-top: 18px;
  color: #07114b;
  font-size: 16px;
  line-height: 1.2;
}

.tech-cta {
  padding: 42px 0;
}

@media (max-width: 1180px) {
  .tech-hero__grid,
  .tech-split {
    grid-template-columns: 1fr;
  }

  .tech-card-grid,
  .tech-card-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tech-module-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1380px) and (min-width: 1181px) {
  .tech-hero__grid {
    grid-template-columns: minmax(440px, .78fr) minmax(560px, 1fr);
    gap: 36px;
  }

  .tech-hero h1 {
    font-size: clamp(2rem, 2.1vw, 2.6rem);
  }
}

@media (max-height: 820px) and (min-width: 821px) {
  .tech-hero {
    padding: 98px 0 22px;
  }

  .sap-hero__panel {
    height: 100%;
  }

  .sap-hero__copy {
    padding-top: clamp(14px, 1.7vw, 24px);
    transform: scale(.84);
    transform-origin: left top;
  }

  .sap-hero__benefits {
    min-height: 70px;
  }

  .sap-hero-icon {
    width: 48px;
    height: 48px;
  }

  .tech-visual-card {
    min-height: 360px;
  }

  .tech-proof-row span {
    min-height: 72px;
    padding: 12px;
  }
}

@media (max-width: 820px) {
  .tech-hero {
    min-height: 100vh;
    padding: 104px 0 34px;
  }

  .sap-hero {
    height: auto;
  }

  .sap-hero__panel {
    height: auto;
    min-height: 640px;
    background-size: 920px auto;
    background-position: 76% 690px;
  }

  .sap-hero__panel::before {
    content: none;
  }

  .sap-hero__copy {
    width: min(100%, 520px);
    padding: 22px 12px 0;
  }

  .sap-hero .sap-hero__copy h1 {
    font-size: clamp(32px, 8vw, 42px);
    white-space: normal;
  }

  .sap-hero__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 360px;
    gap: 12px;
  }

  .sap-hero__pillars article {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
  }

  .sap-hero__pillars article + article::before {
    display: none;
  }

  .sap-hero__benefits {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    grid-template-columns: 1fr;
    margin: 480px 20px 0;
  }

  .sap-hero__benefits article {
    min-height: 68px;
  }

  .sap-hero__benefits article + article::before {
    top: 0;
    right: 20px;
    bottom: auto;
    left: 20px;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(18, 105, 255, 0), rgba(18, 105, 255, .18), rgba(18, 105, 255, 0));
  }

  .tech-hero h1,
  .tech-section h2 {
    font-size: 30px;
  }

  .tech-proof-row,
  .tech-card-grid,
  .tech-card-grid--four,
  .tech-module-grid,
  .tech-step-grid {
    grid-template-columns: 1fr;
  }

  .tech-visual-card {
    min-height: 420px;
  }

  .tech-dashboard {
    left: 16px;
    right: 16px;
    width: auto;
  }

  .tech-floating-card {
    right: 16px;
    width: min(72%, 250px);
  }

  .tech-floating-card--middle {
    right: 16px;
  }
}

@media (max-width: 560px) {
  .sap-hero {
    padding-top: 96px;
  }

  .sap-hero__panel {
    min-height: 610px;
    background-size: 760px auto;
    background-position: 78% 700px;
  }

  .sap-hero__badge {
    min-height: 28px;
    padding: 6px 14px;
    font-size: 12px;
  }

  .sap-hero__tagline {
    max-width: 280px;
  }

  .sap-hero__benefits {
    margin-top: 430px;
  }

  .sap-hero__pillars {
    grid-template-columns: 1fr;
  }

  .sap-hero-icon {
    width: 42px;
    height: 42px;
  }

  .tech-hero__actions {
    flex-direction: column;
  }

  .tech-hero__actions .btn {
    width: 100%;
  }

  .tech-visual-card {
    min-height: 470px;
    border-radius: 20px;
  }

  .tech-dashboard {
    bottom: 16px;
    padding: 14px;
  }

  .tech-floating-card {
    grid-template-columns: 40px 1fr;
    padding: 12px;
  }
}

.technology-page .site-header {
  background: transparent;
}

.technology-page .tech-hero {
  display: grid;
  align-items: center;
  min-height: 100vh;
  padding: 118px 0 38px;
  background:
    radial-gradient(circle at 52% 26%, rgba(117, 153, 255, .16), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(134, 79, 254, .12), transparent 25%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(240, 246, 255, .96)),
    url("../images/banner/hero-light-wave-bg.png") center top / cover no-repeat;
}

.technology-page .tech-hero__grid {
  min-height: calc(100vh - 156px);
}

@media (max-width: 820px) {
  .technology-page .tech-hero {
    min-height: 100vh;
    padding-top: 104px;
    padding-bottom: 34px;
  }
}

/* First viewport parity with the index banner. */
.technology-page .tech-hero,
.sap-successfactors-page .sap-hero {
  box-sizing: border-box;
  min-height: 100vh !important;
  height: 100vh !important;
  overflow: hidden;
}

.technology-page .tech-hero__grid,
.sap-hero__container {
  min-height: calc(100vh - 156px) !important;
}

@media (max-width: 900px) {
  .technology-page .tech-hero,
  .sap-successfactors-page .sap-hero {
    min-height: 100svh !important;
    height: 100svh !important;
  }

  .technology-page .tech-hero__grid,
  .sap-hero__container {
    min-height: calc(100svh - 138px) !important;
  }
}

/* SAP SuccessFactors AI banner: reference-led layout using SAPbanner.png. */
.sap-successfactors-page .sap-hero {
  box-sizing: border-box;
  height: 100vh !important;
  min-height: 760px !important;
  padding: clamp(116px, 10vh, 136px) 0 clamp(18px, 2.2vh, 28px) !important;
  background:
    radial-gradient(circle at 84% 14%, rgba(47, 128, 255, .18), transparent 24%),
    radial-gradient(circle at 18% 82%, rgba(126, 170, 255, .18), transparent 30%),
    linear-gradient(135deg, #f8fbff 0%, #edf6ff 46%, #b9d6ff 100%) !important;
  color: #07114b;
  font-family: var(--font-body);
  overflow: hidden;
}

.sap-successfactors-page .sap-hero__container {
  width: min(100% - clamp(32px, 4vw, 92px), 1300px);
  height: 100%;
  max-width: 1300px;
  min-height: 0 !important;
}

.sap-successfactors-page .sap-hero__panel {
  display: grid;
  grid-template-columns: minmax(440px, .78fr) minmax(640px, 1.22fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(24px, 3vw, 56px);
  align-items: center;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.sap-successfactors-page .sap-hero__panel::after {
  content: none;
}

.sap-successfactors-page .sap-hero__copy {
  position: relative;
  z-index: 3;
  width: auto;
  max-width: 880px;
  padding: clamp(36px, 4vw, 64px) 0 clamp(24px, 3vw, 54px) clamp(30px, 4.3vw, 74px);
}

.sap-successfactors-page .sap-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--section-badge-height);
  margin: 0 0 clamp(24px, 3vh, 36px);
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px;
  background: #16417d;
  box-shadow: 0 14px 30px rgba(22, 65, 125, .22);
  color: #fff;
  padding: 9px 26px;
  font-family: var(--font-body) !important;
  font-size: var(--section-badge-font) !important;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.sap-successfactors-page .sap-hero .sap-hero__copy h1 {
  max-width: 900px;
  margin: 0;
  color: #07114b;
  font-family: var(--font-heading) !important;
  font-size: clamp(30px, 2.65vw, 40px) !important;
  /* font-size: clamp(3.5rem, 5.25vw, 5.75rem); */
  font-style: normal;
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.045em;
  white-space: normal;
  text-wrap: balance;
}

.sap-successfactors-page .sap-hero .sap-hero__copy h1 span {
  display: block;
  color: #1269ff;
  background: linear-gradient(135deg, #5b36f4 0%, #644cff 52%, #866fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sap-successfactors-page .sap-hero__accent {
  display: block;
  width: 116px;
  height: 4px;
  margin-top: clamp(22px, 2.4vh, 32px);
  border-radius: 999px;
  background: #1269ff;
}

.sap-successfactors-page .sap-hero__tagline {
  max-width: 700px;
  margin: clamp(18px, 2.3vh, 30px) 0 0;
  color: #5549e8;
  font-family: var(--font-heading) !important;
  font-size: clamp(1.75rem, 2.35vw, 2.7rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.035em;
}

.sap-successfactors-page .sap-hero__description {
  max-width: 690px;
  margin: clamp(18px, 2vh, 24px) 0 0;
  color: #11194e;
  font-family: var(--font-body) !important;
  font-size: clamp(1rem, 1.18vw, 1.28rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
}

.sap-successfactors-page .sap-hero__promise {
  max-width: 690px;
  margin: clamp(16px, 2vh, 24px) 0 0;
  color: #07114b;
  font-family: var(--font-body) !important;
  font-size: clamp(.98rem, 1.08vw, 1.18rem);
  font-weight: 800;
  line-height: 1.42;
}

.sap-successfactors-page .sap-hero__pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
  max-width: 720px;
  min-height: 0;
  margin-top: clamp(26px, 3.4vh, 46px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.sap-successfactors-page .sap-hero__pillars article {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 12px;
  height: auto;
  padding: 0;
  text-align: center;
}

.sap-successfactors-page .sap-hero__pillars article + article::before {
  content: none;
}

.sap-successfactors-page .sap-hero__pillars strong,
.sap-successfactors-page .sap-hero__benefits strong {
  color: #07114b;
  font-family: var(--font-heading) !important;
  font-size: var(--card-title-size);
  font-style: normal;
  font-weight: 600;
  line-height: var(--feature-title-line);
  letter-spacing: 0;
}

.sap-successfactors-page .sap-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 56px;
  margin-top: clamp(24px, 3vh, 38px);
  border-radius: 999px;
  background: linear-gradient(135deg, #0759e8, #1f9cff);
  box-shadow: 0 16px 32px rgba(18, 105, 255, .24);
  color: #fff;
  padding: 0 28px;
  font-family: var(--font-body) !important;
  font-size: var(--section-copy-size);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.sap-successfactors-page .sap-hero__cta svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sap-successfactors-page .sap-hero__visual {
  position: relative;
  z-index: 2;
  align-self: stretch;
  min-width: 0;
}

.sap-successfactors-page .sap-hero__visual img {
  position: absolute;
  top: 50%;
  right: clamp(8px, 1.8vw, 34px);
  display: block;
  width: min(105%, 920px);
  height: auto;
  transform: translateY(-50%);
}

.sap-successfactors-page .sap-hero__benefits {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 4;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  align-items: center;
  min-height: 86px;
  margin: -79px clamp(28px, 4vw, 70px) clamp(16px, 2vh, 26px);
  border: 1px solid rgba(204, 219, 244, .82);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 42px rgba(16, 78, 166, .12);
  overflow: hidden;
}

.sap-successfactors-page .sap-hero__benefits article {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  height: 100%;
  min-height: 86px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 10px clamp(10px, 1.2vw, 18px);
  backdrop-filter: none;
}

.sap-successfactors-page .sap-hero__benefits strong {
  font-size: clamp(.76rem, .82vw, .92rem);
  line-height: 1.12;
}

.sap-successfactors-page .sap-hero__benefits article + article::before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(18, 105, 255, .16);
}

.sap-successfactors-page .sap-hero__benefits small {
  display: block;
  margin-top: 3px;
  color: rgba(17, 25, 78, .72);
  font-size: clamp(.68rem, .72vw, .78rem);
  font-weight: 500;
  line-height: 1.2;
}

.sap-successfactors-page .sap-hero-feature-icon {
  width: clamp(42px, 3.1vw, 56px);
  height: clamp(42px, 3.1vw, 56px);
  border-radius: 16px;
}

.sap-successfactors-page .sap-hero-feature-icon svg {
  display: none;
}

.sap-successfactors-page .sap-hero-icon {
  width: clamp(48px, 4vw, 66px);
  height: clamp(48px, 4vw, 66px);
  background: var(--sap-icon-bg);
}

@media (max-width: 1180px) {
  .sap-successfactors-page .sap-hero {
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible;
  }

  .sap-successfactors-page .sap-hero__panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: start;
    height: auto;
    min-height: calc(100svh - 130px);
  }

  .sap-successfactors-page .sap-hero__copy {
    max-width: 760px;
    padding: 42px 28px 0;
  }

  .sap-successfactors-page .sap-hero__visual {
    min-height: clamp(360px, 56vw, 540px);
  }

  .sap-successfactors-page .sap-hero__visual img {
    left: 50%;
    right: auto;
    width: min(96%, 820px);
    transform: translate(-50%, -50%);
  }

  .sap-successfactors-page .sap-hero__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .sap-successfactors-page .sap-hero {
    padding-top: 108px !important;
  }

  .sap-successfactors-page .sap-hero__container {
    width: min(100% - 28px, 560px);
  }

  .sap-successfactors-page .sap-hero__copy {
    padding: 28px 18px 0;
  }

  .sap-successfactors-page .sap-hero .sap-hero__copy h1 {
    font-size: clamp(2rem, 11.5vw, 3rem);
    line-height: 1.04;
  }

  .sap-successfactors-page .sap-hero__tagline {
    margin-top: 14px;
    font-size: clamp(1.25rem, 6.3vw, 1.75rem);
    line-height: 1.25;
  }

  .sap-successfactors-page .sap-hero__pillars,
  .sap-successfactors-page .sap-hero__benefits {
    /* grid-template-columns: 1fr; */
  }

  .sap-successfactors-page .sap-hero__pillars article {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
  }

  .sap-successfactors-page .sap-hero__visual {
    min-height: 0;
    padding: 10px 12px 0;
  }

  .sap-successfactors-page .sap-hero__visual img {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: min(100%, 460px);
    transform: none;
    margin: 0 auto;
  }

  .sap-successfactors-page .sap-hero__benefits {
    margin: 14px auto 22px;
    width: min(100% - 36px, 420px);
  }

  .sap-successfactors-page .sap-hero__benefits article {
    display: flex;
    /* justify-content: center;
    align-items: center; */
    gap: 12px;
    text-align: left;
  }

  .sap-successfactors-page .sap-hero__benefits article + article::before {
    top: 0;
    right: 24px;
    bottom: auto;
    left: 24px;
    width: auto;
    height: 1px;
  }
}

/* FAQ accordion — premium-band styles (ported from salesforce.css, unscoped) */
.sap-successfactors-page .premium-band {
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 6vw, 96px) 0;
}

.sap-successfactors-page .premium-band > .main-container {
  position: relative;
  z-index: 1;
}

.sap-successfactors-page .premium-band-salesforce {
  background:
    radial-gradient(circle at 84% 16%, rgba(47, 128, 255, .1), transparent 26%),
    linear-gradient(180deg, #f5f8ff, #eef5ff);
}

@media (max-width: 767px) {
  .sap-successfactors-page .premium-band {
    padding-block: 48px;
  }
}