.integrated-platform {
  display: block;
  max-width: none;
  padding: 2.2rem max(1.2rem, calc((100vw - var(--max)) / 2)) 3rem;
  background:
    radial-gradient(circle at 8% 4%, rgba(39, 151, 204, .15), transparent 28%),
    linear-gradient(145deg, #04151d, #082733 54%, #061a22);
}

.engineering-explorer {
  max-width: var(--max);
  margin: auto;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(13, 51, 66, .94), rgba(5, 25, 34, .97));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

.engineering-explorer-head {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 1.5rem;
  align-items: end;
  padding: .15rem .2rem 1rem;
}

.engineering-explorer-head small {
  color: #efc957;
  font: 800 .73rem "Manrope", sans-serif;
  letter-spacing: .12em;
}

.engineering-explorer-head h3 {
  margin: .3rem 0 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1.35;
}

.engineering-explorer-head p {
  margin: 0;
  color: #c7d7da;
  font-size: 1rem;
  line-height: 1.8;
}

.explorer-group {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: .85rem;
  align-items: stretch;
  padding: .58rem 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.explorer-group-title {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .55rem .25rem;
}

.explorer-group-title > span {
  flex: 0 0 auto;
  color: #65d8ed;
  font: 800 .68rem "Manrope", sans-serif;
}

.explorer-group-title div { display: grid; gap: .18rem; }
.explorer-group-title b { color: #fff; font-size: .96rem; line-height: 1.45; }
.explorer-group-title small { color: #8faab0; font-size: .78rem; line-height: 1.5; }

.workflow-stage-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: .42rem;
}

.workflow-stage {
  min-width: 0;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: .62rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
  color: #fff;
  text-align: inherit;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s;
}

.workflow-stage:hover,
.workflow-stage:focus-visible,
.workflow-stage.is-active {
  transform: translateY(-2px);
  border-color: rgba(101, 216, 237, .72);
  background: #0d4658;
  outline: none;
}

.workflow-stage.is-active { box-shadow: inset 0 3px 0 #65d8ed; }
.workflow-stage > span { color: #65d8ed; font: 800 .72rem "Manrope", sans-serif; }
.workflow-stage > b { margin: .3rem 0 .2rem; color: #fff; font-size: .88rem; line-height: 1.4; }
.workflow-stage > small { margin-top: auto; color: #aec2c6; font-size: .78rem; line-height: 1.4; }

.integrated-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}

.integrated-module-grid .explorer-module-card {
  min-height: 114px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: .7rem;
  align-items: start;
  padding: .58rem;
  overflow: hidden;
}

.integrated-module-grid .explorer-module-card[aria-pressed="true"] {
  border-color: var(--accent);
  background: linear-gradient(145deg, #154655, #092a35);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

.explorer-module-thumb {
  grid-row: 1 / 4;
  width: 72px;
  height: 100%;
  min-height: 90px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 7px;
  background: #020d12;
}

.explorer-module-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .3s;
}

.explorer-module-card:hover .explorer-module-thumb img,
.explorer-module-card:focus-visible .explorer-module-thumb img { transform: scale(1.045); }
.integrated-module-grid .module-card > small { font-size: .72rem; color: #7fd9e8; }
.integrated-module-grid .module-card > strong { margin: .2rem 0; font-size: .95rem; line-height: 1.45; }
.integrated-module-grid .module-card > em { margin-top: 0; color: #b1c6ca; font-size: .8rem; line-height: 1.45; }

.explorer-showcase-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .42rem;
}

.explorer-showcase-tabs button {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .48rem;
  align-items: center;
  padding: .55rem .62rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
  color: #fff;
  text-align: inherit;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s;
}

.explorer-showcase-tabs button:hover,
.explorer-showcase-tabs button:focus-visible,
.explorer-showcase-tabs button.is-active {
  transform: translateY(-2px);
  border-color: rgba(239, 201, 87, .75);
  background: #123f4c;
  outline: none;
}

.explorer-showcase-tabs button.is-active { box-shadow: inset 0 3px 0 #efc957; }
.explorer-showcase-tabs span { color: #efc957; font: 800 .72rem "Manrope", sans-serif; }
.explorer-showcase-tabs b { min-width: 0; color: #fff; font-size: .86rem; line-height: 1.4; }

.engineering-explorer-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .5rem;
}

.engineering-explorer-subtabs[hidden] { display: none; }

.engineering-explorer-subtabs button {
  min-height: 36px;
  padding: .45rem .7rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: #061c25;
  color: #c8d9dc;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

.engineering-explorer-subtabs button:hover,
.engineering-explorer-subtabs button:focus-visible,
.engineering-explorer-subtabs button.is-active {
  border-color: #65d8ed;
  background: #0d4658;
  color: #fff;
  outline: none;
}

.engineering-explorer-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  gap: 1rem;
  margin-top: .85rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.engineering-explorer-detail figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 11px;
  background: #020d12;
}

.engineering-explorer-detail figure > div {
  height: 220px;
  overflow: hidden;
  background: #020d12;
}

.engineering-explorer-detail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.engineering-explorer-detail figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .68rem .8rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #8fa9af;
  font-size: .76rem;
}

.engineering-explorer-detail figcaption span { color: #71d8ea; font: 800 .68rem "Manrope", sans-serif; letter-spacing: .08em; }
.engineering-explorer-copy { display: flex; flex-direction: column; padding: .35rem .25rem; }
.engineering-explorer-copy > small { color: #efc957; font: 800 .68rem "Manrope", sans-serif; letter-spacing: .11em; }
.engineering-explorer-copy h3 { margin: .35rem 0 .45rem; color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.35; }
.engineering-explorer-copy > p { margin: 0; color: #d3e0e2; font-size: 1rem; line-height: 1.78; }

.engineering-explorer-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .42rem;
  margin: .8rem 0;
}

.engineering-explorer-facts > div {
  display: grid;
  gap: .2rem;
  padding: .58rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
}

.engineering-explorer-facts b { color: #75dcec; font-size: .8rem; }
.engineering-explorer-facts span { color: #d0dee1; font-size: .84rem; line-height: 1.55; }

.engineering-explorer-action {
  min-height: 44px;
  margin-top: auto;
  padding: .65rem .9rem;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #e7b42a, #f1d06a);
  color: #0c2530;
  font-size: .9rem;
  font-weight: 900;
  cursor: pointer;
}

.engineering-explorer-action:hover,
.engineering-explorer-action:focus-visible { filter: brightness(1.06); outline: 3px solid rgba(239, 189, 56, .22); outline-offset: 2px; }

.module-subprogram-card { position: relative; overflow: hidden; }
.module-subprogram-thumb { width: 100%; height: 84px; display: block; margin-bottom: .6rem; overflow: hidden; border-radius: 7px; background: #061923; }
.module-subprogram-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }

.video-stage { background: #01070a url("media/programs/platform-command-center.webp") center / cover no-repeat; }
.video-fallback { position: absolute; inset: 0; z-index: 0; display: grid; overflow: hidden; background: #01070a; transition: opacity .3s; }
.video-fallback img { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.video-fallback span { position: absolute; inset-inline-start: 1rem; bottom: 1rem; color: #fff; font: 800 .68rem "Manrope", sans-serif; letter-spacing: .1em; }
.video-stage .energy-film { z-index: 1; }
.video-stage .video-shade { z-index: 2; }
.video-stage .video-badge,
.video-stage .video-control { z-index: 3; }
.video-stage.video-ready .video-fallback { opacity: 0; }
.video-stage.video-failed .energy-film { opacity: 0; }

@media (max-width: 1080px) {
  .explorer-group { grid-template-columns: 1fr; gap: .35rem; }
  .workflow-stage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .integrated-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explorer-showcase-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .integrated-platform { padding: 2rem .8rem 3rem; }
  .engineering-explorer { padding: .9rem; }
  .engineering-explorer-head { grid-template-columns: 1fr; gap: .5rem; }
  .workflow-stage-grid,
  .integrated-module-grid,
  .explorer-showcase-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .45rem; }
  .workflow-stage { flex: 0 0 142px; scroll-snap-align: start; }
  .integrated-module-grid .explorer-module-card { flex: 0 0 235px; scroll-snap-align: start; }
  .explorer-showcase-tabs button { flex: 0 0 155px; scroll-snap-align: start; }
  .engineering-explorer-detail { grid-template-columns: 1fr; }
  .engineering-explorer-detail figure > div { height: auto; aspect-ratio: 16 / 9; }
  .engineering-explorer-facts { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .engineering-explorer-head p,
  .engineering-explorer-copy > p { font-size: .96rem; }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-stage,
  .explorer-module-thumb img { transition: none; }
}