/* ==============================================================
   V2 — PREMIUM 18-SYSTEM OPERATING ARCHITECTURE
   ============================================================== */

/* Widen the opening library to create more editorial breathing room. */
#applications {
  padding-top: 118px !important;
  padding-bottom: 126px !important;
  background:
    radial-gradient(circle at 92% 0,rgba(66,183,240,.16),transparent 29%),
    radial-gradient(circle at 5% 42%,rgba(46,215,164,.065),transparent 24%),
    linear-gradient(155deg,#020a18,#061a35 57%,#082b56) !important;
}

#applications > .shell {
  width: min(1420px,calc(100vw - 64px)) !important;
  max-width: 1420px !important;
}

#applications .v2-section-heading {
  position: relative;
  margin-bottom: 34px !important;
  padding: 0 0 35px !important;
  border-bottom: 1px solid rgba(134,232,255,.14) !important;
}

#applications .v2-section-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 145px;
  height: 2px;
  background: linear-gradient(90deg,#86e8ff,transparent);
}

#applications .v2-section-heading h2 {
  max-width: 760px;
  font-size: clamp(53px,5.4vw,82px) !important;
}

#applications .v2-section-heading p {
  max-width: 590px;
  color: #b7cada !important;
}

/* Architectural overview bar */
.v2-application-architecture {
  position: relative;
}

.v2-architecture-bar {
  display: grid;
  grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1fr);
  align-items: center;
  gap: 17px;
  margin-bottom: 24px;
  padding: 22px 25px;
  border: 1px solid rgba(134,232,255,.16);
  background:
    radial-gradient(circle at 80% 0,rgba(87,192,242,.10),transparent 38%),
    rgba(255,255,255,.035);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
}

.v2-architecture-bar > div {
  min-width: 0;
}

.v2-architecture-bar > span {
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(134,232,255,.42),transparent);
}

.v2-architecture-bar small {
  display: block;
  color: #72d8f4;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .17em;
}

.v2-architecture-bar strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.1;
}

/* Three editorial clusters */
.v2-system-cluster {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid rgba(134,232,255,.13);
  background: rgba(255,255,255,.018);
  box-shadow: 0 28px 72px rgba(0,0,0,.16);
}

.v2-system-cluster-head {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr) auto;
  gap: 21px;
  align-items: center;
  padding: 25px 27px;
  border-bottom: 1px solid rgba(134,232,255,.13);
  background:
    radial-gradient(circle at 100% 0,rgba(70,184,239,.16),transparent 32%),
    linear-gradient(145deg,#071c3a,#0a3768);
}

.v2-cluster-index {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(134,232,255,.35);
  border-radius: 50%;
  background: rgba(134,232,255,.08);
  color: #86e8ff;
  font-family: var(--serif);
  font-size: 23px;
}

.v2-system-cluster-head small {
  color: #86e8ff;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.v2-system-cluster-head h3 {
  margin: 6px 0 0;
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(28px,2.8vw,40px);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.v2-cluster-count {
  min-width: 135px;
  padding-left: 22px;
  border-left: 1px solid rgba(255,255,255,.12);
  text-align: right;
}

.v2-cluster-count strong {
  display: block;
  color: #fff;
  font-family: var(--serif);
  font-size: 33px;
  line-height: .9;
}

.v2-cluster-count span {
  display: block;
  margin-top: 7px;
  color: #8fa8bd;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Premium card grid */
.v2-system-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  background: rgba(134,232,255,.11);
}

.v2-system-card {
  position: relative;
  display: grid;
  grid-template-columns: 49px minmax(0,1fr);
  min-height: 445px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0,rgba(73,184,238,.075),transparent 35%),
    linear-gradient(145deg,#06162f,#071d3c);
  transition:
    background .24s ease,
    transform .24s ease,
    box-shadow .24s ease;
}

.v2-system-card:hover {
  z-index: 2;
  transform: translateY(-3px);
  background:
    radial-gradient(circle at 100% 0,rgba(73,184,238,.15),transparent 37%),
    linear-gradient(145deg,#071b38,#0a315e);
  box-shadow: 0 25px 55px rgba(0,0,0,.20);
}

.v2-system-card::after {
  content: "";
  position: absolute;
  left: 49px;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,#86e8ff,rgba(76,116,255,.5),transparent);
  opacity: .35;
  transition: opacity .24s ease;
}

.v2-system-card:hover::after {
  opacity: 1;
}

.v2-system-card-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 23px 0;
  border-right: 1px solid rgba(134,232,255,.105);
  background: rgba(0,0,0,.10);
}

.v2-system-card-rail span {
  color: rgba(134,232,255,.50);
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.v2-system-card-rail i {
  flex: 1;
  width: 1px;
  margin-top: 17px;
  background: linear-gradient(180deg,rgba(134,232,255,.34),transparent);
}

.v2-system-card-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 27px 25px 23px;
}

.v2-system-card-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 50px;
}

.v2-system-icon {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  flex: 0 0 47px;
  border: 1px solid rgba(134,232,255,.24);
  border-radius: 13px;
  background: rgba(134,232,255,.075);
  color: #86e8ff;
}

.v2-system-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v2-system-card-meta small {
  color: #75d8f3;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .17em;
  line-height: 1.45;
  text-transform: uppercase;
}

.v2-system-card h3 {
  margin: 23px 0 14px;
  color: #fff;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.v2-system-card > .v2-system-card-main > p {
  flex: 1;
  margin: 0;
  color: #a9bdd0;
  font-size: 12.5px;
  line-height: 1.75;
}

.v2-system-card-footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.v2-system-card-footer span {
  color: #738ca3;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.v2-system-card-footer b {
  color: #d6edf8;
  font-size: 8px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Redesigned Common Thread */
.v2-common-thread {
  display: grid;
  grid-template-columns: 145px minmax(0,1fr);
  gap: 29px;
  margin-top: 22px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(134,232,255,.24);
  background:
    radial-gradient(circle at 88% 0,rgba(74,188,241,.18),transparent 36%),
    linear-gradient(145deg,#071a38,#0a3b70);
  box-shadow: 0 30px 80px rgba(0,0,0,.20);
}

.v2-common-thread-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 265px;
  padding: 28px 24px;
  border-right: 1px solid rgba(134,232,255,.14);
  background: rgba(0,0,0,.12);
}

.v2-common-thread-side small {
  color: #86e8ff;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.5;
}

.v2-common-thread-side strong {
  display: block;
  margin-top: 18px;
  color: #fff;
  font-family: var(--serif);
  font-size: 64px;
  line-height: .85;
}

.v2-common-thread-side span {
  margin-top: 10px;
  color: #91a8bd;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.v2-common-thread-copy {
  padding: 34px 32px 19px 0;
}

.v2-common-thread-copy h3 {
  margin: 0 0 12px;
  color: #fff;
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: -.03em;
}

.v2-common-thread-copy p {
  margin: 0;
  color: #b9ccdc;
  font-size: 15px;
  line-height: 1.76;
}

.v2-common-thread-flow {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 26px 1fr 26px 1fr;
  gap: 9px;
  align-items: center;
  margin: 0 32px 32px 0;
}

.v2-common-thread-flow > div {
  min-height: 77px;
  padding: 15px;
  border: 1px solid rgba(134,232,255,.13);
  background: rgba(134,232,255,.05);
}

.v2-common-thread-flow div span {
  display: block;
  color: #69d6f3;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .14em;
}

.v2-common-thread-flow div strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}

.v2-common-thread-flow i {
  color: #86e8ff;
  font-family: var(--serif);
  font-size: 21px;
  font-style: normal;
  text-align: center;
}

/* Explicitly remove old CTA/link treatments from the first 18 systems. */
#applications .v2-system-card a,
#applications .application-card a {
  display: none !important;
}

@media(max-width:1180px) {
  .v2-system-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .v2-architecture-bar {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .v2-architecture-bar > span {
    display: none;
  }
}

@media(max-width:820px) {
  #applications > .shell {
    width: calc(100vw - 32px) !important;
  }

  .v2-system-cluster-head {
    grid-template-columns: 62px 1fr;
  }

  .v2-cluster-count {
    grid-column: 2;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.10);
    text-align: left;
  }

  .v2-system-grid {
    grid-template-columns: 1fr;
  }

  .v2-system-card {
    min-height: 0;
  }

  .v2-common-thread {
    grid-template-columns: 1fr;
  }

  .v2-common-thread-side {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(134,232,255,.14);
  }

  .v2-common-thread-copy {
    padding: 28px 24px 8px;
  }

  .v2-common-thread-flow {
    grid-column: 1;
    grid-template-columns: 1fr;
    margin: 0 24px 25px;
  }

  .v2-common-thread-flow i {
    transform: rotate(90deg);
  }
}

@media(max-width:560px) {
  .v2-system-card {
    grid-template-columns: 39px minmax(0,1fr);
  }

  .v2-system-card::after {
    left: 39px;
  }

  .v2-system-card-main {
    padding: 23px 20px 21px;
  }

  .v2-system-card h3 {
    font-size: 23px;
  }

  .v2-system-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}