:root { --stack-card: #13171c; }

.main-nav { align-items: center; }

.nav-products { position: relative; }

.nav-products::after {
  content: "";
  position: absolute;
  z-index: 29;
  top: 100%;
  left: -18px;
  width: calc(100% + 36px);
  height: 20px;
}

.nav-products summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  cursor: pointer;
  transition: color .2s ease;
}

.nav-products summary::-webkit-details-marker { display: none; }
.nav-products summary:hover,
.nav-products summary:focus-visible { color: var(--white); }

.nav-products summary svg {
  width: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform .2s ease;
}

.nav-products[open] summary svg { transform: rotate(180deg); }

.nav-products-menu {
  display: block;
  position: absolute;
  z-index: 30;
  top: calc(100% + 20px);
  left: 50%;
  width: 250px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(14,17,21,.97);
  box-shadow: 0 24px 58px rgba(0,0,0,.38);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.nav-products[open] .nav-products-menu,
.nav-products:hover .nav-products-menu,
.nav-products:focus-within .nav-products-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.main-nav .nav-products-menu a {
  display: grid;
  grid-template-columns: 1fr;
  padding: 11px 10px;
  border-radius: 6px;
  color: #d7dbe0;
}

.main-nav .nav-products-menu a:hover,
.main-nav .nav-products-menu a:focus-visible { background: #1e2329; }

.nav-products-menu strong {
  color: var(--white);
  font-size: .84rem;
  font-weight: 720;
}

.nav-products-menu small {
  margin-top: 2px;
  color: #777f89;
  font-size: .64rem;
  letter-spacing: .03em;
}

.stack-width {
  width: min(calc(100% - 48px), var(--max));
  margin-inline: auto;
}

.stack-hero-section {
  padding: 172px 0 92px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 78% 18%, rgba(255,91,95,.11), transparent 31%),
    var(--ink);
}

.stack-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
  align-items: start;
  gap: clamp(48px, 6vw, 84px);
  max-width: 1180px;
  padding-bottom: 0;
}

.stack-eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 30px;
  color: #c4c8ce;
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .18em;
}

.stack-eyebrow span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(89,209,141,.08);
}

.stack-hero-grid h1 {
  margin: 0;
  max-width: 850px;
  font-size: clamp(4.3rem, 7.4vw, 7.6rem);
  font-weight: 760;
  letter-spacing: -.072em;
  line-height: .86;
}

.slogan-initial { color: var(--red); }

.stack-intro {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding-bottom: 0;
}
.stack-intro p {
  margin: 0;
  max-width: 500px;
  color: #b9bec5;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.68;
}

.stack-intro .stack-intro-secondary {
  margin-top: 18px;
  color: #7f8791;
}

.stack-intro a {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 34px;
  margin-top: auto;
  padding: 13px 0 0;
  color: var(--white);
  font-size: .9rem;
  font-weight: 700;
}

.stack-intro a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -13px;
  left: 0;
  height: 1px;
  background: #555b64;
}

.stack-intro a span { color: var(--red); }

.stack-manifesto {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .68fr);
  gap: clamp(48px, 8vw, 118px);
  margin-bottom: 78px;
  padding: clamp(60px, 7vw, 94px) 0;
  border-top: 1px solid #30353d;
  border-bottom: 1px solid #30353d;
}

.stack-manifesto-kicker {
  grid-column: 1 / -1;
  margin: 0 0 -14px;
  color: var(--red);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .17em;
}

.stack-manifesto h2 {
  margin: 0;
  max-width: 780px;
  color: var(--white);
  font-size: clamp(3.2rem, 6vw, 6.4rem);
  font-weight: 760;
  letter-spacing: -.066em;
  line-height: .89;
}

.stack-manifesto-copy {
  align-self: end;
  max-width: 510px;
}

.stack-manifesto-copy p {
  margin: 0;
  color: #b9bec5;
  font-size: clamp(1rem, 1.28vw, 1.18rem);
  line-height: 1.68;
}

.stack-manifesto-copy p + p {
  margin-top: 24px;
  color: #7f8791;
}

.stack-system-head,
.stack-system-foot {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  color: #858c96;
  border-bottom: 1px solid #282d34;
  font-size: .68rem;
  font-weight: 730;
  letter-spacing: .12em;
}

.stack-system-head i {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #8fdcaf;
  font-style: normal;
}

.stack-system-head i::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(89,209,141,.08);
}

.stack-system svg { display: block; width: 100%; height: auto; }
.stack-topology text { font-family: inherit; }
.constellation-grid path { fill: none; stroke: rgba(122,132,144,.08); stroke-width: 1; }
.constellation-orbits ellipse { fill: none; stroke: rgba(117,126,138,.32); stroke-width: 1.1; stroke-dasharray: 3 10; }
.constellation-orbits .orbit-accent { stroke: rgba(255,91,95,.26); stroke-dasharray: 35 10 3 10; }
.constellation-links path { fill: none; stroke: rgba(101,111,122,.28); stroke-width: 1; stroke-dasharray: 2 9; }
.orbit-halo circle { fill: none; stroke: rgba(255,91,95,.13); stroke-width: 1; }
.orbit-halo circle:first-child { stroke-dasharray: 3 11; animation: orbit-ring-spin 24s linear infinite; }
.orbit-halo circle:last-child { stroke: rgba(255,91,95,.25); stroke-dasharray: 22 9; animation: orbit-ring-spin 17s linear infinite reverse; }
.orbit-centre-glow { fill: rgba(255,91,95,.08); filter: url(#topology-glow); }
.orbit-centre-core { fill: url(#orbit-core); stroke: rgba(255,210,211,.55); stroke-width: 1; }
.orbit-centre-pin { fill: #fff; opacity: .9; }
.orbit-centre text { fill: #fff; text-anchor: middle; font-size: 10px; font-weight: 780; letter-spacing: .18em; }
.park-halo { fill: rgba(20,24,29,.86); stroke: rgba(94,104,115,.34); stroke-width: 1; }
.park-stack path { fill: url(#park-stack); stroke: #48505a; stroke-width: 1; }
.park-stack .park-stack-top { fill: #20262c; stroke: rgba(89,209,141,.68); }
.park-node { transform-box: fill-box; transform-origin: center; }
.topology-packets circle { fill: var(--green); }
.topology-packets .packet-red { fill: var(--red); }
.stack-backplane path { fill: none; stroke: #20252b; stroke-width: 1; stroke-dasharray: 4 9; }
.stack-layer-face { fill: url(#stack-slab); stroke: #3b424c; stroke-width: 1.2; }
.stack-layer-shadow { fill: #090b0e; stroke: #242930; stroke-width: 1; }
.stack-layer circle { fill: #747c86; }
.stack-layer-orbit circle { fill: var(--red); }
.stack-layer-connect circle { fill: var(--green); }
.stack-layer text { font-family: inherit; dominant-baseline: middle; }
.stack-layer-index { fill: #656d77; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.stack-layer-name { fill: #f5f6f7; font-size: 17px; font-weight: 760; letter-spacing: .035em; }
.stack-layer-role { fill: #7d858f; text-anchor: end; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.stack-layer-orbit .stack-layer-face { stroke: rgba(255,91,95,.72); }
.stack-layer-connect .stack-layer-face { stroke: rgba(89,209,141,.48); }
.stack-vertical-flow path:first-child { fill: none; stroke: #414851; stroke-width: 2; stroke-dasharray: 3 8; }
.stack-vertical-flow .stack-flow-active { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 18 300; animation: stack-flow-rise 4.2s linear infinite; }
.stack-vertical-flow circle { fill: #171b20; stroke: #59616b; stroke-width: 1.5; }
.stack-flow-packet circle { fill: var(--green); }
.stack-source-labels text { fill: #69717b; font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.stack-source-labels path { stroke: #343a42; stroke-width: 1; }

.stack-system-foot {
  justify-content: flex-start;
  min-height: 48px;
  border-top: 1px solid #282d34;
  border-bottom: 0;
  font-size: .61rem;
}

.stack-system-foot span + span::before {
  content: "/";
  margin-right: 18px;
  color: #3d434b;
}

@keyframes stack-flow-rise {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -318; }
}

@keyframes orbit-ring-spin {
  to { transform: rotate(360deg); }
}

.stack-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #c9cdca;
  border-left: 1px solid #c9cdca;
}

.stack-products-section {
  padding: clamp(76px, 8vw, 118px) 0;
  color: var(--ink);
  background: #f1f2ef;
}

.stack-card {
  position: relative;
  min-height: 610px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 28px;
  padding: clamp(26px, 3vw, 42px);
  overflow: hidden;
  border-right: 1px solid #c9cdca;
  border-bottom: 1px solid #c9cdca;
  background: rgba(255,255,255,.44);
  transition: background .3s ease, transform .3s ease;
}

.stack-card:hover,
.stack-card:focus-visible {
  z-index: 1;
  background: #fff;
  transform: translateY(-4px);
  outline: 1px solid rgba(255,91,95,.48);
  outline-offset: -1px;
}

.stack-card-head,
.stack-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #687078;
  font-size: .69rem;
  font-weight: 760;
  letter-spacing: .13em;
}

.stack-card-head span:last-child {
  color: var(--red);
  font-size: 1.15rem;
  letter-spacing: 0;
}

.stack-product-name {
  margin: 0 0 25px;
  color: #646b72;
  font-size: 1.12rem;
  letter-spacing: .03em;
}

.stack-product-name strong { color: var(--ink); font-weight: 760; }

.stack-card h2 {
  margin: 0 0 20px;
  max-width: 560px;
  font-size: clamp(2.1rem, 3.2vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

@media (min-width: 981px) {
  .stack-card-copy {
    height: 187px;
    min-height: 187px;
    box-sizing: border-box;
  }

  .orbit-card .stack-orbit-preview .preview-layout,
  .vector-card .stack-orbit-preview .preview-layout,
  .scada-card .stack-orbit-preview .preview-layout,
  .connect-card .stack-orbit-preview .preview-layout {
    height: 320px;
    min-height: 320px;
  }
}

.stack-card > div:nth-child(2) > p:last-child {
  margin: 0;
  max-width: 510px;
  color: #9da4ad;
  font-size: .94rem;
  line-height: 1.65;
}

.stack-visual-slot {
  min-height: 292px;
  align-self: stretch;
  border: 1px solid rgba(11,13,16,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.2);
}

.stack-orbit-stage {
  min-height: 292px;
  display: grid;
  place-items: center;
  padding: 14px 20px 24px;
  perspective: 1250px;
}

.stack-graphic {
  width: 100%;
  height: auto;
  overflow: visible;
}

.stack-orbit-preview {
  min-width: 0;
  width: 104%;
  color: #f3f5f7;
  overflow: hidden;
  transform: rotateY(-9deg) rotateX(4deg) rotateZ(-.75deg);
  transform-origin: 50% 50%;
  border-radius: 9px;
  box-shadow: 26px 34px 70px rgba(0,0,0,.32);
}

.orbit-card .stack-orbit-preview {
  transform: rotateY(9deg) rotateX(4deg) rotateZ(.75deg);
  box-shadow: -26px 34px 70px rgba(0,0,0,.32);
}

.scada-card .stack-orbit-preview {
  transform: rotateY(9deg) rotateX(4deg) rotateZ(.75deg);
  box-shadow: -26px 34px 70px rgba(0,0,0,.32);
}
.stack-orbit-preview .preview-brand span,
.stack-orbit-preview .preview-label,
.stack-orbit-preview .preview-heading small,
.stack-orbit-preview .metrics small { color: #949eaa; }
.stack-orbit-preview .preview-heading strong,
.stack-orbit-preview .metrics strong,
.stack-orbit-preview .fleet-list > div:not(.table-head) > span:first-child,
.stack-orbit-preview .fleet-list b { color: #eef2f5; }
.stack-orbit-preview .fleet-list .table-head { color: #87919d; }

.stack-orbit-preview .preview-layout { min-height: 0; grid-template-columns: 38px minmax(0,1fr); }
.stack-orbit-preview .preview-main { min-width: 0; padding: 18px 16px; }
.stack-orbit-preview .preview-topbar { height: 44px; padding-inline: 14px; }
.stack-orbit-preview .preview-sidebar { gap: 16px; padding-top: 20px; }
.stack-orbit-preview .preview-sidebar span { width: 12px; height: 12px; }
.stack-orbit-preview .metrics { margin-top: 15px; }
.stack-orbit-preview .metrics article { min-height: 82px; padding: 12px; }
.stack-orbit-preview .metrics strong { font-size: 1.25rem; }
.stack-orbit-preview .fleet-list { min-height: 0; margin-top: 11px; }
.stack-orbit-preview .fleet-list > div { min-height: 34px; padding-inline: 9px; font-size: .57rem; }
.stack-orbit-preview .fleet-list .table-head { min-height: 36px; }

.stack-vector-card-preview .preview-layout { height: 320px; }
.stack-vector-main { display: grid; grid-template-rows: 32px minmax(0,1fr); gap: 7px; }
.vector-control-tabs { display: flex; justify-content: center; gap: 7px; }
.vector-control-tabs span { min-width: 42px; height: 23px; display: grid; place-items: center; border: 1px solid #343b45; border-radius: 99px; color: #7f8995; font-size: .55rem; font-weight: 800; }
.vector-control-tabs .active { border-color: var(--red); color: #111419; background: var(--red); }
.vector-card-flow { width: 100%; height: 100%; overflow: visible; }
.vector-card-flow text { fill: #eef2f5; font-family: Inter, Arial, sans-serif; font-size: 10px; font-weight: 700; }
.vector-card-flow .vector-svg-small { fill: #7f8995; font-size: 6px; letter-spacing: .7px; }
.vector-card-flow .vector-svg-small.red { fill: var(--red); }
.vector-source rect { fill: #171c22; stroke: #343b45; }
.vector-source-grid circle { fill: var(--red); }
.vector-source-res circle { fill: #f2bb63; }
.vector-line,
.vector-bus,
.vector-arrow { fill: none; stroke-width: 2; }
.grid-line { stroke: var(--red); }
.res-line { stroke: #f2bb63; }
.output-line,
.vector-arrow { stroke: #64d69a; }
.vector-bus { stroke: #59636f; stroke-width: 1.4; }
.vector-plc > rect:first-child { fill: #11151a; stroke: #46505c; stroke-width: 1.5; }
.vector-plc-cpu,
.vector-modules rect { fill: #20262e; stroke: #4a535e; }
.vector-plc circle,
.vector-modules circle,
.vector-units circle { fill: #64d69a; }
.vector-plc circle:nth-of-type(3) { fill: #f2bb63; }
.vector-modules path,
.vector-units path { fill: none; stroke: #68737f; stroke-width: 1.2; }
.vector-units rect { fill: #1b2128; stroke: #3c4651; }

.stack-online-main {
  display: grid;
  grid-template-rows: 38px minmax(0,1fr) 47px;
  gap: 4px;
}

.online-card-line {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
}

.online-card-line text {
  fill: #8e99a5;
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .03em;
}

.online-wire {
  fill: none;
  stroke: #68737f;
  stroke-width: 1.55;
}

.online-flow {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-dasharray: 4 54;
  opacity: .65;
}

.online-inverter rect {
  fill: #171d23;
  stroke: #4a5561;
  stroke-width: 1.4;
}

.online-inverter path {
  fill: none;
  stroke: #a8b2bd;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.online-breaker {
  fill: #1a171a;
  stroke: var(--red);
  stroke-width: 1.8;
}

.online-breaker-contact {
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
}

.online-card-line .online-breaker-label { fill: var(--red); }

.online-card-readings {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 7px;
  text-align: center;
}

.online-card-readings > div {
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid #293039;
}

.online-card-readings small {
  display: block;
  color: #8d97a3;
  font-size: .48rem;
  letter-spacing: .07em;
}

.online-card-readings strong {
  display: block;
  margin-top: 4px;
  color: #eef2f5;
  font-size: .62rem;
}

.online-card-readings strong span {
  color: #8b96a2;
  font-size: .48rem;
}

.stack-connect-main {
  display: grid;
  grid-template-rows: 38px minmax(0,1fr) 18px;
  gap: 10px;
}

.connect-protocol-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-template-rows: repeat(2,minmax(0,1fr));
  gap: 9px;
}

.connect-protocol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px 14px 11px;
  box-sizing: border-box;
  border: 1px solid #2c333c;
  border-radius: 7px;
  background: #171b21;
}

.connect-protocol > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.connect-protocol > div > span {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #eef2f5;
  background: #222832;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: -.03em;
}

.connect-protocol strong {
  min-width: 0;
  color: #eef2f5;
  font-size: .76rem;
  line-height: 1;
  letter-spacing: -.025em;
}

.connect-protocol > small {
  color: #7f8995;
  font-size: .46rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.connect-protocol.modbus > div > span { color: #fff; background: #c83c42; }
.connect-protocol.modbus strong { letter-spacing: .03em; }
.connect-protocol.opc > div > span { color: #dfefff; background: #176fb1; border-radius: 50%; }
.connect-protocol.opc strong { color: #dfefff; }
.connect-protocol.iec > div > span { color: #86d9ff; background: #182d3a; }
.connect-protocol.iec strong { color: #dceef7; }
.connect-protocol.mqtt > div > span { color: #fff; background: #7d3ca5; border-radius: 50%; }
.connect-protocol.mqtt strong { color: #e7d6f1; letter-spacing: .04em; }
.connect-protocol.dnp > div > span { color: #bff2d3; background: #17452e; }
.connect-protocol.dnp strong { color: #dff7e8; letter-spacing: .03em; }

.connect-protocol-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #6f7985;
  font-size: .45rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.connect-protocol-foot span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}

.connect-protocol-foot span:first-child::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

.stack-clear-preview,
.stack-connect-preview {
  overflow: hidden;
  border: 1px solid #303741;
  border-radius: 9px;
  background: linear-gradient(145deg,#151a20,#101318);
  box-shadow: 0 22px 55px rgba(0,0,0,.24);
}
.clear-preview-head,
.connect-preview-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid #2b3139;
  color: #a9b0b9;
  font-size: .58rem;
  font-weight: 740;
  letter-spacing: .1em;
}
.clear-preview-head span,
.connect-preview-head span { display: flex; align-items: center; gap: 8px; }
.clear-preview-head i,
.connect-preview-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(89,209,141,.08); }
.clear-preview-head em,
.connect-preview-head em { color: #69717c; font-size: .5rem; }
.clear-preview-reading { padding: 16px 17px 4px; display: grid; grid-template-columns: 1fr auto; align-items: end; }
.clear-preview-reading > span { grid-column: 1; color: #7f8791; font-size: .55rem; font-weight: 720; letter-spacing: .08em; }
.clear-preview-reading strong { grid-column: 1; margin-top: 4px; color: #fff; font-size: 1.7rem; line-height: 1; }
.clear-preview-reading strong em { color: #89929d; font-size: .75rem; }
.clear-preview-reading small { grid-area: 1 / 2 / 3; align-self: center; color: var(--green); font-size: .5rem; font-weight: 720; letter-spacing: .07em; }
.stack-clear-preview > svg { display: block; width: 100%; height: auto; padding: 0 12px; }
.stack-clear-preview svg text { fill: #7f8995; font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.clear-wire { fill: none; stroke: #7b8794; stroke-width: 1.4; }
.clear-flow { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-dasharray: 6 75; animation: clear-signal 7s linear infinite; }
.clear-units rect { fill: #171c22; stroke: #65717e; }
.clear-dots circle { fill: var(--green); filter: drop-shadow(0 0 5px rgba(89,209,141,.65)); }
.clear-preview-foot { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid #2b3139; }
.clear-preview-foot span { padding: 10px 8px; color: #77808b; border-right: 1px solid #2b3139; text-align: center; font-size: .5rem; }
.clear-preview-foot span:last-child { border-right: 0; }
.clear-preview-foot b { display: block; margin-top: 3px; color: #dce0e4; font-size: .6rem; }
@keyframes clear-signal { to { stroke-dashoffset: -320; } }

.connect-preview-grid { display: grid; grid-template-columns: minmax(0,1fr) 1.15fr minmax(0,1fr); gap: 14px; align-items: center; padding: 20px 16px; }
.connect-endpoints { display: grid; gap: 7px; }
.connect-endpoints small { margin-bottom: 2px; color: #737d88; font-size: .49rem; font-weight: 740; letter-spacing: .09em; }
.connect-endpoints span { position: relative; padding: 7px 8px; border: 1px solid #303844; border-radius: 4px; color: #bcc3cc; background: #181e25; font-size: .53rem; }
.connect-endpoints span::after,
.connect-destinations span::before { content: ""; position: absolute; top: 50%; width: 15px; height: 1px; background: #634047; }
.connect-endpoints span::after { left: 100%; }
.connect-destinations span::before { right: 100%; }
.connect-destinations span::after { display: none; }
.connect-core { position: relative; min-height: 190px; display: grid; place-items: center; }
.connect-core > div { position: relative; z-index: 2; width: 120px; height: 94px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #82454c; border-radius: 10px; background: radial-gradient(ellipse at top,#4a2931,#1e1b21); }
.connect-core small { color: #d79297; font-size: .46rem; letter-spacing: .2em; }
.connect-core strong { color: #fff; font-size: 1.15rem; letter-spacing: -.025em; }
.connect-core em { margin-top: 7px; color: #b78186; font-size: .4rem; letter-spacing: .08em; }
.connect-ring { position: absolute; width: 166px; height: 166px; border: 1px solid #3a323b; border-radius: 50%; animation: connect-rotate 22s linear infinite; }
.connect-ring::after { content: ""; position: absolute; width: 5px; height: 5px; top: 22px; left: 22px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.connect-ring.ring-secondary { width: 142px; height: 142px; animation-direction: reverse; animation-duration: 16s; }
.connect-ring.ring-secondary::after { top: 18px; left: 18px; background: var(--green); box-shadow: 0 0 10px var(--green); }
.connect-preview-foot { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 10px; border-top: 1px solid #2b3139; color: #858e99; font-size: .46rem; letter-spacing: .05em; }
.connect-preview-foot i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.connect-preview-foot b { color: var(--red); }
@keyframes connect-rotate { to { transform: rotate(360deg); } }

.stack-graphic text {
  fill: #777e88;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.stack-grid path,
.stack-grid rect,
.stack-grid circle { fill: none; stroke: #303640; stroke-width: 1; }
.stack-signal { fill: none; stroke: var(--red); stroke-width: 3; }
.orbit-area { fill: rgba(255,91,95,.08); }
.stack-points circle { fill: var(--red); }
.stack-target { fill: none; stroke: #5c626c; stroke-width: 1.4; stroke-dasharray: 7 6; }
.scada-status circle { fill: var(--green); filter: drop-shadow(0 0 6px rgba(89,209,141,.55)); }
.protocol-lines path { fill: none; stroke: #4d555f; stroke-width: 1.4; }
.protocol-core { fill: #1c2228; stroke: var(--red); stroke-width: 1.5; }
.protocol-graphic .core-label { fill: var(--white); text-anchor: middle; font-size: 15px; }
.protocol-graphic .core-sub { fill: #8b929b; text-anchor: middle; font-size: 8px; }
.protocol-packets circle { fill: var(--green); }

.stack-card-foot {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  color: #8b929b;
}

.stack-card-foot span + span::before {
  content: "/";
  margin-right: 12px;
  color: #3d434b;
}

.stack-contact {
  padding: 112px max(24px, calc((100vw - var(--max)) / 2));
  color: var(--white);
  background: #111419;
}

.stack-contact-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr .7fr;
  align-items: end;
  gap: clamp(56px, 9vw, 130px);
}

.stack-contact-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 28px;
  color: #a7adb5;
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .16em;
}

.stack-contact-kicker span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}

.stack-contact h2 {
  margin: 0;
  font-size: clamp(3.6rem, 7vw, 7rem);
  line-height: .88;
  letter-spacing: -.065em;
}

.stack-contact-action p {
  margin: 0 0 32px;
  color: #aeb4bc;
  font-size: 1rem;
  line-height: 1.7;
}

.stack-contact-button {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 22px;
  border: 1px solid var(--red);
  border-radius: 6px;
  color: var(--ink);
  background: var(--red);
  font: inherit;
  font-weight: 760;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.stack-contact-button:hover {
  border-color: var(--red-strong);
  background: var(--red-strong);
  transform: translateY(-2px);
}

.stack-contact-button svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.construction-dialog { width: min(520px, calc(100% - 32px)); }
.construction-dialog .interest-panel { padding-bottom: clamp(34px, 5vw, 52px); }
.construction-dialog .interest-intro { margin-bottom: 0; }

@media (min-width: 981px) and (max-height: 820px) {
  .stack-hero-grid {
    width: min(calc(100% - clamp(96px, 12vw, 180px)), 1100px);
  }
}

@media (max-width: 980px) {
  .stack-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .stack-intro { display: block; align-self: start; max-width: 650px; }
  .stack-intro a { margin-top: 34px; padding: 13px 0; border-bottom: 1px solid #555b64; }
  .stack-intro a::after { display: none; }
  .stack-manifesto { grid-template-columns: 1fr; gap: 32px; }
  .stack-manifesto-kicker { margin-bottom: 2px; }
  .stack-manifesto-copy { max-width: 650px; }
  .stack-products { grid-template-columns: 1fr; }
  .stack-card { min-height: 0; }
  .stack-contact-grid { grid-template-columns: 1fr; align-items: start; gap: 42px; }
  .stack-contact-action { max-width: 620px; }
}

@media (max-width: 760px) {
  .stack-width { width: min(calc(100% - 40px), var(--max)); }
  .stack-hero-section { padding-top: 136px; padding-bottom: 78px; }
  .stack-hero-grid { padding-bottom: 0; }
  .stack-hero-grid h1 { font-size: clamp(3.25rem, 15vw, 5.2rem); }
  .stack-manifesto { margin-bottom: 52px; padding: 50px 0; gap: 26px; }
  .stack-manifesto h2 { font-size: clamp(3rem, 14vw, 4.8rem); }
  .stack-system { margin-bottom: 52px; border-radius: 10px; }
  .stack-system-head { min-height: 46px; padding-inline: 13px; font-size: .55rem; }
  .stack-system-head i { font-size: 0; }
  .stack-system svg { width: 148%; margin-left: -24%; }
  .stack-system-foot { padding-inline: 13px; gap: 8px; font-size: .5rem; }
  .stack-system-foot span + span::before { margin-right: 8px; }
  .stack-system-foot span:nth-child(2),
  .stack-system-foot span:nth-child(3) { display: none; }
  .stack-card { min-height: 0; gap: 27px; padding: 25px 20px; }
  .stack-visual-slot { min-height: 220px; }
  .stack-orbit-stage { min-height: 220px; padding: 8px 7px 18px; }
  .stack-orbit-preview { width: 100%; transform: rotateY(-5deg) rotateX(2.5deg) rotateZ(-.4deg); }
  .orbit-card .stack-orbit-preview { transform: rotateY(5deg) rotateX(2.5deg) rotateZ(.4deg); }
  .scada-card .stack-orbit-preview { transform: rotateY(5deg) rotateX(2.5deg) rotateZ(.4deg); }
  .stack-vector-card-preview .preview-layout { height: 270px; }
  .stack-online-card-preview .preview-layout { height: 270px; min-height: 270px; }
  .stack-connect-card-preview .preview-layout { height: 270px; min-height: 270px; }
  .stack-vector-main { padding: 13px 9px; }
  .stack-online-main { padding: 13px 9px; }
  .stack-connect-main { padding: 13px 9px; }
  .connect-protocol { padding: 10px 8px; }
  .connect-protocol > div { gap: 5px; }
  .connect-protocol > div > span { width: 22px; height: 22px; font-size: .48rem; }
  .connect-protocol strong { font-size: .64rem; }
  .stack-card h2 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .stack-card-foot { gap: 8px; font-size: .6rem; }
  .stack-card-foot span + span::before { margin-right: 8px; }
  .stack-contact { padding: 82px 20px; }
  .stack-contact h2 { font-size: clamp(3.25rem, 16vw, 5rem); }
  .stack-contact-button { min-height: 56px; }
  .stack-orbit-preview .preview-layout { grid-template-columns: 1fr; }
  .stack-orbit-preview .preview-sidebar { display: none; }
  .stack-orbit-preview .preview-main { padding: 14px 11px; }
  .stack-orbit-preview .fleet-list > div { grid-template-columns: minmax(0,1.15fr) minmax(0,.9fr) minmax(0,.8fr); gap: 4px; }
  .clear-preview-reading small { display: none; }
  .connect-preview-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 12px; }
  .connect-core { grid-column: 1 / -1; grid-row: 1; min-height: 168px; }
  .connect-endpoints span::after,
  .connect-destinations span::before { display: none; }
  .connect-preview-foot { font-size: .4rem; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .stack-card { transition: none; }
  .stack-flow-active { animation: none !important; }
  .stack-flow-packet { display: none; }
  .topology-packets { display: none; }
  .orbit-halo circle { animation: none !important; }
  .clear-flow,
  .connect-ring { animation: none !important; }
}