/* Systems Integration & Cloud Engineering — technical evidence page. */
.integration-page {
  --int-aqua: #78d7d5;
  --int-cyan: #71c9ef;
  --int-gold: #d9b175;
  --int-red: #f49a86;
  --int-green: #7ed6ad;
}

.integration-page main { overflow: clip; }
.integration-section { position: relative; padding-block: var(--section-space); }
.integration-section[id] { scroll-margin-top: calc(var(--header-height) + 4.25rem); }
.integration-section--surface { background: var(--color-surface-soft); }
.integration-heading-wide { max-width: 64rem; }
.integration-heading-wide > p:not(.eyebrow) { max-width: 58rem; }

/* Hero */
.integration-hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(circle at 7% 12%, rgba(35, 131, 197, .3), transparent 29%),
    radial-gradient(circle at 92% 85%, rgba(15, 122, 128, .28), transparent 31%),
    linear-gradient(145deg, #061b2a, #0b3048 55%, #0f5360);
  isolation: isolate;
}
.integration-hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 10rem;
  z-index: -1;
  content: "";
  background: linear-gradient(to top, rgba(4, 21, 33, .55), transparent);
}
.integration-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(32rem, 1.14fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  min-height: min(58rem, calc(100svh - var(--header-height)));
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}
.integration-hero__copy { position: relative; z-index: 3; }
.integration-hero__copy > * + * { margin-top: 1.05rem; }
.integration-hero h1 {
  color: #fff;
  font-size: clamp(2.65rem, 5.4vw, 5rem);
  line-height: .96;
  letter-spacing: -.052em;
}
.integration-hero__lead {
  max-width: 47rem;
  color: rgba(255, 255, 255, .81);
  font-size: clamp(1.02rem, 1.45vw, 1.2rem);
  line-height: 1.64;
}
.integration-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; padding-top: .45rem; }
.integration-hero__signals {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  padding-top: .3rem;
}
.integration-hero__signals span {
  padding: .45rem .68rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .055);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.integration-hero__media { position: relative; min-height: 34rem; }
.integration-hero__photo {
  position: absolute;
  inset: 0 0 4rem 4rem;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--radius-2xl);
  background: #0a273a;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .32);
}
.integration-hero__photo::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(6, 26, 40, .02), rgba(6, 26, 40, .28)), linear-gradient(90deg, rgba(6, 26, 40, .18), transparent 45%);
}
.integration-hero__photo picture,
.integration-hero__photo img { display: block; width: 100%; height: 100%; }
.integration-hero__photo img { object-fit: cover; object-position: center 42%; }
.integration-hero__photo figcaption {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  max-width: 29rem;
  margin-left: auto;
  padding: .7rem .85rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  color: rgba(255, 255, 255, .74);
  background: rgba(5, 27, 42, .78);
  font-size: .7rem;
  line-height: 1.45;
  backdrop-filter: blur(10px);
}
.integration-hero__system-card {
  left: 0;
  bottom: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-xl);
  background: rgba(5, 28, 43, .94);
  box-shadow: 0 26px 62px rgba(0, 0, 0, .36);
  backdrop-filter: blur(16px);
}
.integration-hero__system-card img { display: block; width: 100%; height: auto; }
.integration-hero__system-card figcaption {
  padding: .9rem 1rem 1rem;
  color: rgba(255, 255, 255, .72);
  font-size: .72rem;
  line-height: 1.5;
}
.integration-hero__system-card strong { color: #fff; }

/* Sticky local navigation */
.integration-subnav {
  position: sticky;
  z-index: 30;
  top: var(--header-height);
  border-bottom: 1px solid rgba(215, 224, 230, .9);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px);
}
.integration-subnav__inner { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.integration-subnav__inner::-webkit-scrollbar { display: none; }
.integration-subnav a {
  position: relative;
  flex: 0 0 auto;
  padding: .86rem .82rem;
  color: var(--color-muted);
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.integration-subnav a::after {
  position: absolute;
  right: .82rem;
  bottom: 0;
  left: .82rem;
  height: 2px;
  content: "";
  background: var(--color-brand-blue);
  transform: scaleX(0);
  transition: transform var(--duration-standard) var(--ease-emphasised);
}
.integration-subnav a:hover,
.integration-subnav a.is-active { color: var(--color-brand-blue-800); }
.integration-subnav a.is-active::after { transform: scaleX(1); }

/* Business hand-off */
.integration-section--intro { background: linear-gradient(180deg, #fff, #fbfdfe); }
.integration-handoff {
  display: grid;
  grid-template-columns: minmax(20rem, .72fr) minmax(0, 1.28fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: start;
}
.integration-handoff .section-heading { position: sticky; top: calc(var(--header-height) + 5.5rem); margin: 0; }
.integration-handoff .section-heading > p:not(.eyebrow) { margin-top: 1rem; }
.integration-handoff__stage { position: relative; display: grid; gap: 1rem; padding-left: 1.2rem; }
.integration-handoff__rail {
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: 2.45rem;
  width: 2px;
  background: linear-gradient(var(--color-brand-blue), var(--color-brand-teal));
  opacity: .28;
}
.integration-handoff__stage article {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 1.2rem 1.2rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-standard) var(--ease-emphasised), border-color var(--duration-standard), box-shadow var(--duration-standard);
}
.integration-handoff__stage article:hover { transform: translateX(.35rem); border-color: rgba(35, 131, 197, .36); box-shadow: var(--shadow-md); }
.integration-handoff__stage article > span {
  position: relative;
  z-index: 2;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--color-brand-blue-800), var(--color-brand-teal));
  font-size: .75rem;
  font-weight: 900;
  box-shadow: 0 0 0 1px rgba(35, 131, 197, .15);
}
.integration-handoff__stage .label { color: var(--color-brand-teal); }
.integration-handoff__stage h3 { margin-top: .2rem; font-size: 1.14rem; }
.integration-handoff__stage p:not(.label) { margin-top: .42rem; color: var(--color-muted); font-size: .9rem; }

/* Pattern selector */
.integration-patterns {
  display: grid;
  grid-template-columns: minmax(18rem, .66fr) minmax(0, 1.34fr);
  gap: 1.35rem;
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
.integration-patterns__tabs { display: grid; gap: .72rem; align-content: start; }
.integration-patterns__tabs button {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: center;
  width: 100%;
  min-height: 5.4rem;
  padding: .92rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  color: var(--color-navy-950);
  background: #fff;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-standard) var(--ease-emphasised), border-color var(--duration-standard), background var(--duration-standard), color var(--duration-standard), box-shadow var(--duration-standard);
}
.integration-patterns__tabs button:hover { transform: translateX(.25rem); border-color: var(--color-brand-blue); box-shadow: var(--shadow-md); }
.integration-patterns__tabs button[aria-selected="true"] { color: #fff; border-color: var(--color-brand-blue-800); background: linear-gradient(135deg, var(--color-brand-blue-800), var(--color-brand-teal)); box-shadow: 0 18px 42px rgba(13, 94, 141, .2); }
.integration-patterns__tabs button > .icon { width: 2rem; height: 2rem; padding: .35rem; border-radius: .65rem; color: var(--color-brand-blue-800); background: var(--color-surface-blue); }
.integration-patterns__tabs button[aria-selected="true"] > .icon { color: var(--color-navy-950); background: rgba(255, 255, 255, .92); }
.integration-patterns__tabs strong,
.integration-patterns__tabs small { display: block; }
.integration-patterns__tabs strong { font-size: .95rem; }
.integration-patterns__tabs small { margin-top: .12rem; color: var(--color-muted); font-size: .74rem; }
.integration-patterns__tabs button[aria-selected="true"] small { color: rgba(255, 255, 255, .74); }
.integration-patterns__panels { position: relative; min-height: 34rem; }
.integration-pattern {
  display: grid;
  min-height: 34rem;
  grid-template-rows: minmax(13rem, .84fr) auto;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.integration-pattern + .integration-pattern { margin-top: 1rem; }
.integration-patterns.is-enhanced .integration-pattern {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.7rem) scale(.993);
  transition: opacity 280ms var(--ease-emphasised), transform 380ms var(--ease-emphasised), visibility 0s linear 380ms;
}
.integration-patterns.is-enhanced .integration-pattern.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.integration-pattern > div:last-child { padding: clamp(1.35rem, 3vw, 2rem); }
.integration-pattern .label { color: var(--color-brand-teal); }
.integration-pattern h3 { margin-top: .5rem; font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
.integration-pattern p:not(.label) { margin-top: .75rem; color: var(--color-muted); }
.integration-pattern ul { display: grid; gap: .45rem; margin-top: .9rem; padding-left: 1.2rem; color: var(--color-ink); font-size: .88rem; }
.integration-pattern__diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: .7rem;
  align-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  color: #fff;
  background: radial-gradient(circle at 82% 18%, rgba(118, 212, 213, .22), transparent 30%), linear-gradient(145deg, #071f31, #0d4058);
}
.integration-pattern__diagram span { display: grid; min-height: 6rem; place-items: center; padding: .8rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-xl); background: rgba(255, 255, 255, .06); text-align: center; font-size: .84rem; font-weight: 800; }
.integration-pattern__diagram i { position: relative; width: 3rem; height: 2px; background: var(--int-aqua); }
.integration-pattern__diagram i::after { position: absolute; right: -1px; top: 50%; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--int-aqua); content: ""; transform: translateY(-50%); }
.integration-pattern__diagram--event { background: radial-gradient(circle at 82% 18%, rgba(114, 201, 239, .22), transparent 30%), linear-gradient(145deg, #0b2a41, #0f5d67); }
.integration-pattern__diagram--file { background: radial-gradient(circle at 82% 18%, rgba(215, 173, 114, .18), transparent 30%), linear-gradient(145deg, #142b3b, #5a3b20); }
.integration-patterns__decision { max-width: 50rem; margin: 1rem 0 0 auto; color: var(--color-muted); font-size: .88rem; }

/* Normal/failure path explorer */
.integration-section--recovery { background: linear-gradient(180deg, #fff, #f6fbfc 50%, #fff); }
.integration-path { margin-top: clamp(2rem, 4vw, 3.4rem); }
.integration-path__controls {
  display: inline-flex;
  gap: .35rem;
  padding: .35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.integration-path__controls button {
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  padding: .68rem 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  background: transparent;
  font-size: .84rem;
  font-weight: 800;
}
.integration-path__controls button[aria-selected="true"] { color: #fff; background: var(--color-navy-950); box-shadow: var(--shadow-sm); }
.integration-path__status { width: .62rem; height: .62rem; border-radius: 50%; box-shadow: 0 0 0 .24rem rgba(255,255,255,.12); }
.integration-path__status--ok { background: var(--int-green); }
.integration-path__status--warn { background: var(--int-red); }
.integration-path__panels { position: relative; min-height: 35rem; margin-top: 1rem; }
.integration-path__panel {
  grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .75fr);
  gap: clamp(1.5rem, 3vw, 2.4rem);
  align-items: stretch;
  min-height: 40rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.integration-path__panel + .integration-path__panel { margin-top: 1rem; }
.integration-path.is-enhanced .integration-path__panel {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.55rem);
  transition: opacity 260ms var(--ease-emphasised), transform 340ms var(--ease-emphasised), visibility 0s linear 340ms;
}
.integration-path.is-enhanced .integration-path__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.integration-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: .55rem;
  align-items: center;
  padding: clamp(1rem, 2.5vw, 1.7rem);
  border-radius: calc(var(--radius-2xl) - .4rem);
  color: #fff;
  background: radial-gradient(circle at 86% 12%, rgba(120, 215, 213, .22), transparent 27%), linear-gradient(145deg, #071f31, #0d4256);
}
.integration-flow > div { display: grid; min-height: 10rem; align-content: start; padding: 1rem; border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--radius-xl); background: rgba(255, 255, 255, .055); }
.integration-flow small { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; color: #062237; background: var(--int-aqua); font-weight: 900; }
.integration-flow strong { margin-top: 1.4rem; color: #fff; font-size: .92rem; }
.integration-flow span { margin-top: .45rem; color: rgba(255, 255, 255, .7); font-size: .75rem; line-height: 1.45; }
.integration-flow > i { position: relative; width: 1.7rem; height: 2px; background: var(--int-aqua); }
.integration-flow > i::after { position: absolute; right: -1px; top: 50%; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid var(--int-aqua); content: ""; transform: translateY(-50%); }
.integration-path__visual { margin: 0; overflow: hidden; border-radius: calc(var(--radius-2xl) - .4rem); }
.integration-path__visual img { display: block; object-fit: contain; }
.integration-path__copy { align-self: center; padding: clamp(.4rem, 1vw, .8rem); }
.integration-path__copy .label { color: var(--color-brand-teal); }
.integration-path__copy h3 { margin-top: .5rem; font-size: clamp(1.45rem, 2.8vw, 2.2rem); }
.integration-path__copy > p:not(.label) { margin-top: .85rem; color: var(--color-muted); }
.integration-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .58rem; margin-top: 1.15rem; padding: 0; list-style: none; }
.integration-checks li { position: relative; padding: .68rem .72rem .68rem 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-soft); font-size: .78rem; font-weight: 750; }
.integration-checks li::before { position: absolute; left: .7rem; top: 50%; width: .7rem; height: .7rem; border-radius: 50%; content: ""; background: var(--color-brand-teal); transform: translateY(-50%); box-shadow: 0 0 0 .22rem var(--color-surface-teal); }

/* Migration explorer */
.integration-section--dark {
  color: #fff;
  background: radial-gradient(circle at 12% 10%, rgba(35, 131, 197, .26), transparent 28%), radial-gradient(circle at 92% 88%, rgba(15, 122, 128, .23), transparent 31%), linear-gradient(145deg, #061d2d, #0a2d43 58%, #103f52);
}
.integration-migration {  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); gap: clamp(1.5rem, 4vw, 3.2rem); align-items: start; }
.integration-migration__heading { grid-column: 1 / -1; max-width: 61rem; }
.integration-migration__heading h2 { margin-top: .6rem; color: #fff; font-size: clamp(2rem, 4vw, 3.35rem); }
.integration-migration__heading > p:not(.eyebrow) { margin-top: 1rem; color: rgba(255, 255, 255, .74); }
.integration-migration__explorer { min-width: 0; }
.integration-migration__steps { display: grid; grid-template-columns: repeat(5, minmax(8.5rem, 1fr)); gap: .5rem; overflow-x: auto; padding-bottom: .55rem; padding-top: .25rem; scrollbar-width: thin; }
.integration-migration__steps button {
  min-width: 8.5rem;
  padding: .8rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-xl);
  color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .045);
  text-align: left;
  transition: transform var(--duration-standard) var(--ease-emphasised), background var(--duration-standard), border-color var(--duration-standard), color var(--duration-standard);
}
.integration-migration__steps button:hover { transform: translateY(-.15rem); border-color: rgba(120, 215, 213, .55); }
.integration-migration__steps button[aria-selected="true"] { color: #fff; border-color: rgba(120, 215, 213, .72); background: linear-gradient(145deg, rgba(35, 131, 197, .36), rgba(15, 122, 128, .28)); box-shadow: 0 14px 34px rgba(0, 0, 0, .18); }
.integration-migration__steps span,
.integration-migration__steps strong,
.integration-migration__steps small { display: block; }
.integration-migration__steps span { color: var(--int-aqua); font-size: .7rem; font-weight: 900; }
.integration-migration__steps strong { margin-top: .42rem; font-size: .9rem; }
.integration-migration__steps small { margin-top: .18rem; color: rgba(255, 255, 255, .55); font-size: .68rem; }
.integration-migration__panels { position: relative; min-height: 10rem; margin-top: .65rem; }
.integration-migration__panel {
  min-height: 10rem;
  padding: clamp(1.3rem, 3vw, 2.15rem);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-2xl);
  background: rgba(255, 255, 255, .055);
  box-shadow: var(--shadow-xl);
}
.integration-migration__panel + .integration-migration__panel { margin-top: 1rem; }
.integration-migration__explorer.is-enhanced .integration-migration__panel {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.55rem);
  transition: opacity 260ms var(--ease-emphasised), transform 340ms var(--ease-emphasised), visibility 0s linear 340ms;
}
.integration-migration__explorer.is-enhanced .integration-migration__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.integration-migration__panel .label { color: var(--int-aqua); }
.integration-migration__panel h3 { margin-top: .55rem; color: #fff; font-size: clamp(1.45rem, 2.8vw, 2.15rem); }
.integration-migration__panel > p:not(.label) { margin-top: .9rem; color: rgba(255, 255, 255, .72); }
.integration-migration__panel dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.35rem; }
.integration-migration__panel dl > div { padding: .9rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .04); }
.integration-migration__panel dt { color: var(--int-aqua); font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.integration-migration__panel dd { margin: .4rem 0 0; color: rgba(255, 255, 255, .78); font-size: .82rem; }
.integration-migration__visual { margin: 10; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-2xl); background: rgba(255, 255, 255, .035); box-shadow: var(--shadow-xl); }
.integration-migration__visual img { display: block; width: 100%; height: auto; }

/* Cloud and operation */
.integration-cloud { display: grid; grid-template-columns: minmax(20rem, .82fr) minmax(0, 1.18fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.integration-cloud__copy h2 { margin-top: .6rem; font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
.integration-cloud__copy > p:not(.eyebrow) { margin-top: 1rem; color: var(--color-muted); }
.integration-owner-note { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; margin-top: 1.3rem; padding: 1rem; border: 1px solid rgba(15, 122, 128, .2); border-radius: var(--radius-xl); background: var(--color-surface-teal); }
.integration-owner-note .icon { color: var(--color-brand-teal); }
.integration-owner-note p { margin: 0; color: var(--color-ink); font-size: .88rem; }
.integration-cloud__visuals { display: grid; gap: 1rem; }
.integration-environments {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: .48rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.integration-environments > div { min-height: 6.2rem; display: grid; align-content: center; justify-items: center; padding: .7rem; border-radius: var(--radius-lg); background: var(--color-surface-blue); text-align: center; }
.integration-environments span { color: var(--color-brand-blue-800); font-size: .84rem; font-weight: 900; }
.integration-environments small { margin-top: .25rem; color: var(--color-muted); font-size: .66rem; }
.integration-environments > i { position: relative; width: 1.5rem; height: 2px; background: var(--color-brand-teal); }
.integration-environments > i::after { position: absolute; right: -1px; top: 50%; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid var(--color-brand-teal); content: ""; transform: translateY(-50%); }
.integration-cloud__observability { margin: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: #fff; box-shadow: var(--shadow-lg); }
.integration-cloud__observability img { display: block; width: 100%; height: auto; }

/* Testing */
.integration-test-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 4vw, 3.2rem); }
.integration-test-grid article { position: relative; min-height: 18rem; padding: 1.4rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: #fff; box-shadow: var(--shadow-sm); }
.integration-test-grid article::after { position: absolute; right: -4rem; bottom: -4rem; width: 11rem; height: 11rem; border: 1px solid rgba(35, 131, 197, .11); border-radius: 50%; content: ""; box-shadow: 0 0 0 2.5rem rgba(35, 131, 197, .025); }
.integration-test-grid article > * { position: relative; z-index: 2; }
.integration-test-grid article > span { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border-radius: 1rem; color: var(--color-brand-blue-800); background: var(--color-surface-blue); }
.integration-test-grid h3 { margin-top: 1.2rem; font-size: 1.22rem; }
.integration-test-grid p { margin-top: .7rem; color: var(--color-muted); }

/* Proof */
.integration-section--proof { background: #fff; }
.integration-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: clamp(2rem, 4vw, 3.2rem); }
.integration-proof article { position: relative; min-height: 25rem; display: grid; align-content: end; overflow: hidden; padding: clamp(1.5rem, 3vw, 2.1rem); border-radius: var(--radius-2xl); color: #fff; background: var(--color-navy-950); box-shadow: var(--shadow-lg); }
.integration-proof article::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 86% 14%, rgba(114, 201, 239, .25), transparent 29%), linear-gradient(145deg, rgba(35, 131, 197, .16), rgba(15, 122, 128, .1)); }
.integration-proof article::after { position: absolute; width: 19rem; height: 19rem; right: -7rem; top: -7rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; content: ""; box-shadow: 0 0 0 3rem rgba(255, 255, 255, .024), 0 0 0 6rem rgba(255, 255, 255, .014); }
.integration-proof article > * { position: relative; z-index: 2; }
.integration-proof__top { position: absolute !important; top: 1.4rem; left: 1.4rem; display: flex; gap: .7rem; align-items: center; }
.integration-proof__number { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; color: var(--int-aqua); font-size: .72rem; font-weight: 900; }
.integration-proof__icon { position: absolute !important; top: 1.4rem; right: 1.4rem; display: grid; width: 7rem; height: 7rem; place-items: center; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: rgba(255, 255, 255, .055); }
.integration-proof__icon .icon { width: 3rem; height: 3rem; color: var(--int-aqua); }
.integration-proof .label { color: var(--int-aqua); }
.integration-proof h3 { margin-top: .55rem; color: #fff; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.integration-proof p { margin-top: .75rem; color: rgba(255, 255, 255, .72); }
.integration-proof .link-arrow { margin-top: 1rem; color: #a6e8e8; }
.integration-proof .link-arrow:hover { color: #fff; }

/* CTA */
.integration-section--cta { padding-top: 0; }
.integration-cta { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .55fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.6rem, 4vw, 3.2rem); overflow: hidden; border-radius: var(--radius-2xl); color: #fff; background: linear-gradient(135deg, var(--color-navy-950), var(--color-brand-blue-800)); box-shadow: var(--shadow-xl); }
.integration-cta h2 { margin-top: .6rem; color: #fff; font-size: clamp(1.9rem, 3.8vw, 3.05rem); }
.integration-cta p:not(.eyebrow):not(.caption) { margin-top: 1rem; color: rgba(255, 255, 255, .76); }
.integration-cta .cluster { margin-top: 1.25rem; }
.integration-cta__link { color: #b8eff0; font-weight: 800; text-decoration: none; }
.integration-cta__link:hover { color: #fff; }
.integration-cta__mark { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .45rem; align-items: center; min-height: 15rem; padding: 1.2rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-2xl); background: rgba(255, 255, 255, .055); }
.integration-cta__mark span { min-height: 4.8rem; display: grid; place-items: center; padding: .7rem; border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--radius-lg); color: rgba(255, 255, 255, .82); text-align: center; font-size: .72rem; font-weight: 800; }
.integration-cta__mark i { position: relative; width: 1.4rem; height: 2px; background: var(--int-aqua); }
.integration-cta__mark i::after { position: absolute; right: -1px; top: 50%; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid var(--int-aqua); content: ""; transform: translateY(-50%); }
.integration-cta__mark strong { grid-column: 1 / -1; align-self: end; color: var(--int-aqua); text-align: center; font-size: .86rem; letter-spacing: .04em; }

@media (max-width: 78rem) {
  .integration-hero__grid { grid-template-columns: minmax(0, .9fr) minmax(28rem, 1.1fr); }
  .integration-hero__photo { left: 2rem; }
  .integration-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .integration-flow > i { display: none; }
}

@media (max-width: 68rem) {
  .integration-hero__grid { grid-template-columns: 1fr; min-height: auto; }
  .integration-hero__media { min-height: 38rem; max-width: 58rem; }
  .integration-hero__photo { inset: 0 0 4rem 3rem; }
  .integration-handoff,
  .integration-cloud { grid-template-columns: 1fr; }
  .integration-handoff .section-heading { position: static; }
  .integration-patterns { grid-template-columns: 1fr; }
  .integration-patterns__tabs { grid-template-columns: repeat(3, minmax(13rem, 1fr)); overflow-x: auto; padding-bottom: .35rem; }
  .integration-path__panel { grid-template-columns: 1fr; min-height: 48rem; }
  .integration-path__panels { min-height: 48rem; }
  .integration-flow { min-height: 20rem; }
  .integration-migration { grid-template-columns: 1fr; }
  .integration-migration__visual { max-width: 46rem; }
  .integration-test-grid { grid-template-columns: 1fr; }
  .integration-test-grid article { min-height: auto; }
  .integration-cta { grid-template-columns: 1fr; }
  .integration-cta__mark { max-width: 38rem; }
}

@media (max-width: 47.99rem) {
  .integration-hero__grid { padding-block: 4rem 3.6rem; }
  .integration-hero h1 { font-size: clamp(2.35rem, 10.8vw, 3.7rem); }
  .integration-hero__media { min-height: 34rem; }
  .integration-hero__photo { inset: 0 0 3.2rem 0; }
  .integration-hero__photo figcaption { display: none; }
  .integration-hero__system-card { width: 84%; }
  .integration-handoff__stage { padding-left: 0; }
  .integration-handoff__rail { left: 1.35rem; }
  .integration-handoff__stage article { grid-template-columns: auto 1fr; padding-left: .7rem; }
  .integration-patterns__panels,
  .integration-pattern { min-height: 50rem; }
  .integration-pattern { grid-template-rows: auto auto; }
  .integration-pattern__diagram { grid-template-columns: 1fr; }
  .integration-pattern__diagram i { width: 2px; height: 2rem; margin: auto; }
  .integration-pattern__diagram i::after { right: auto; top: auto; bottom: -1px; left: 50%; border-top: 8px solid var(--int-aqua); border-right: 5px solid transparent; border-left: 5px solid transparent; transform: translateX(-50%); }
  .integration-path__controls { display: grid; width: 100%; border-radius: var(--radius-xl); }
  .integration-path__controls button { justify-content: center; }
  .integration-path__panels,
  .integration-path__panel { min-height: 74rem; }
  .integration-path__panel { grid-template-rows: auto auto; }
  .integration-flow { grid-template-columns: 1fr; }
  .integration-flow > div { min-height: auto; }
  .integration-checks { grid-template-columns: 1fr; }
  .integration-migration__steps { grid-template-columns: repeat(5, 9rem); }
  .integration-migration__panels,
  .integration-migration__panel { min-height: 30rem; }
  .integration-migration__panel dl { grid-template-columns: 1fr; }
  .integration-environments { grid-template-columns: 1fr; }
  .integration-environments > i { width: 2px; height: 1.2rem; margin: auto; }
  .integration-environments > i::after { right: auto; top: auto; bottom: -1px; left: 50%; border-top: 7px solid var(--color-brand-teal); border-right: 4px solid transparent; border-left: 4px solid transparent; transform: translateX(-50%); }
  .integration-proof { grid-template-columns: 1fr; }
  .integration-cta__mark { grid-template-columns: 1fr; }
  .integration-cta__mark i { width: 2px; height: 1.2rem; margin: auto; }
  .integration-cta__mark i::after { right: auto; top: auto; bottom: -1px; left: 50%; border-top: 7px solid var(--int-aqua); border-right: 4px solid transparent; border-left: 4px solid transparent; transform: translateX(-50%); }
}

@media (max-width: 30rem) {
  .integration-hero__actions { display: grid; }
  .integration-hero__actions .btn { width: 100%; }
  .integration-hero__media { min-height: 31rem; }
  .integration-hero__system-card { width: 94%; }
  .integration-patterns__tabs { grid-template-columns: repeat(3, 12rem); }
  .integration-patterns__panels,
  .integration-pattern { min-height: 52rem; }
  .integration-path__panels,
  .integration-path__panel { min-height: 78rem; }
  .integration-migration__panels,
  .integration-migration__panel { min-height: 33rem; }
}

@media (prefers-reduced-motion: reduce) {
  .integration-handoff__stage article,
  .integration-patterns__tabs button,
  .integration-pattern,
  .integration-path__panel,
  .integration-migration__steps button,
  .integration-migration__panel { transition: none !important; }
}

.integration-handoff__stage { padding-bottom:1rem; }
.integration-pattern__diagram--adapter { background:radial-gradient(circle at 82% 18%,rgba(114,201,239,.2),transparent 30%),linear-gradient(145deg,#122536,#3f5364); }
.integration-flow--failure { background:radial-gradient(circle at 86% 12%,rgba(215,173,114,.2),transparent 27%),linear-gradient(145deg,#162b3b,#5b3e24); }
.integration-migration__steps { grid-template-columns:repeat(8,minmax(8.2rem,1fr)); }
.integration-deploy-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr); gap:1.2rem; margin-top:clamp(2rem,4vw,3rem); align-items:start; }
.integration-deploy-grid figure { margin:0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-2xl); background:#fff; box-shadow:var(--shadow-lg); }
.integration-deploy-grid img { display:block; width:100%; height:auto; }
.integration-product-layout { display:grid; gap:clamp(1.5rem,4vw,3rem); }
.integration-product-layout .section-heading { margin:0; }
.integration-product-layout__visual { margin:0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-2xl); background:#fff; box-shadow:var(--shadow-lg); }
.integration-product-layout__visual img { display:block; width:100%; height:auto; }
.integration-product-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.integration-product-cards article { min-height:15rem; padding:1.3rem; border:1px solid var(--color-border); border-radius:var(--radius-xl); background:#fff; box-shadow:var(--shadow-sm); }
.integration-product-cards h3 { font-size:1.2rem; }
.integration-product-cards p { margin-top:.65rem; color:var(--color-muted); }
.integration-product-cards a { display:inline-flex; margin-top:1rem; gap:.4rem; align-items:center; font-weight:800; text-decoration:none; }
.integration-product-cards .icon { width:1rem; height:1rem; }
.integration-proof-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr); gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.integration-proof-layout__visual { margin:0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-2xl); background:var(--color-navy-950); box-shadow:var(--shadow-xl); }
.integration-proof-layout__visual img { display:block; width:100%; height:auto; }
.integration-proof-card { padding:clamp(1.5rem,3vw,2.2rem); border:1px solid var(--color-border); border-radius:var(--radius-2xl); background:#fff; box-shadow:var(--shadow-lg); }
.integration-proof-card h2 { margin-top:.55rem; font-size:clamp(1.75rem,3.2vw,2.5rem); }
.integration-proof-card p { margin-top:.9rem; color:var(--color-muted); }
.integration-proof-card .link-arrow { display:inline-flex; margin-top:1rem; gap:.4rem; align-items:center; font-weight:800; text-decoration:none; }
.integration-proof-card .icon { width:1rem; height:1rem; }
@media (max-width:78rem) {
  .integration-deploy-grid,
  .integration-proof-layout { grid-template-columns:1fr; }
}
@media (max-width:68rem) {
  .integration-patterns__tabs { grid-template-columns:repeat(4,minmax(12.5rem,1fr)); }
  .integration-product-cards { grid-template-columns:1fr; }
}
@media (max-width:47.99rem) {
  .integration-migration__steps { grid-template-columns:repeat(8,9rem); }
  .integration-deploy-grid { gap:1rem; }
}
@media (max-width:30rem) {
  .integration-patterns__tabs { grid-template-columns:repeat(4,12rem); }
}