/* CloudTV homepage platform visual system */
.home-page-body {
  --home-width: var(--site-width);
  --home-ink: var(--site-ink);
  --home-muted: var(--site-ink-soft);
  --home-canvas: var(--site-canvas);
  --home-surface: var(--site-surface);
  --home-surface-soft: var(--site-surface-soft);
  --home-line: var(--site-line);
  --home-line-strong: var(--site-line-strong);
  --home-night: var(--site-night);
  --home-night-soft: var(--site-night-soft);
  --home-blue: var(--site-blue);
  --home-cyan: var(--site-cyan);
  --home-green: var(--site-green);
  --home-radius: var(--site-radius);
  --home-section: clamp(3.5rem, 4.5vw, 4rem);
  background: var(--home-canvas);
  color: var(--home-ink);
  font-size: 0.95rem;
  line-height: 1.58;
}

.home-page-body .container {
  width: min(100% - 2.5rem, var(--home-width));
  max-width: var(--home-width);
}

.site-main-home {
  overflow: hidden;
  background: var(--home-canvas);
}

.site-main-home section[id],
.site-main-home article[id] {
  scroll-margin-top: calc(var(--site-nav-height) + 1rem);
}

.home-page-body h1,
.home-page-body h2,
.home-page-body h3,
.home-page-body p {
  margin-top: 0;
}

.home-page-body h2 {
  color: var(--home-ink);
  font-size: clamp(1.85rem, 2.45vw, 2.25rem);
  line-height: 1.05;
}

.home-page-body h3 {
  color: var(--home-ink);
  font-size: clamp(1.35rem, 1.8vw, 1.72rem);
  line-height: 1.12;
}

.section-heading-block {
  max-width: 54rem;
  margin-bottom: clamp(1.5rem, 2.2vw, 2rem);
}

.section-heading-block h2 {
  max-width: 21ch;
  margin-bottom: 0.8rem;
}

.section-heading-block p {
  max-width: 67ch;
  margin-bottom: 0;
  color: var(--home-muted);
  font-size: 1rem;
}

/* Hero */
.platform-hero {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 38%, rgba(30, 122, 255, 0.2), transparent 31rem),
    linear-gradient(145deg, #04111a 0%, #061923 58%, #071c28 100%);
  color: #f8fbff;
}

.platform-hero::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(117, 202, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 202, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
  content: "";
}

.platform-hero::after {
  position: absolute;
  right: -10rem;
  bottom: -22rem;
  width: 48rem;
  height: 48rem;
  border: 1px solid rgba(34, 217, 236, 0.09);
  border-radius: 50%;
  box-shadow: 0 0 0 7rem rgba(34, 217, 236, 0.018), 0 0 0 14rem rgba(34, 217, 236, 0.012);
  content: "";
}

.hero-shell {
  position: relative;
  z-index: 1;
  padding-top: 3.25rem;
  padding-bottom: 1.25rem;
}

.hero-layout {
  display: grid;
  min-height: 465px;
  grid-template-columns: minmax(22rem, 0.88fr) minmax(0, 1.32fr);
  gap: clamp(2.25rem, 4vw, 4rem);
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 4;
  padding-bottom: 0.5rem;
}

.hero-kicker {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin: 0 0 1.2rem;
  color: #7eeefa;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-kicker::before {
  width: 1.8rem;
  height: 1px;
  background: currentColor;
  content: "";
}

.platform-hero h1 {
  max-width: 15ch;
  margin-bottom: 1.15rem;
  color: #fff;
  font-size: clamp(2.65rem, 3.6vw, 3.45rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hero-lead {
  max-width: 45ch;
  margin-bottom: 1.6rem;
  color: #b8c8d2;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.64;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1.55rem;
}

.hero-actions .btn,
.home-cta .btn {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.1rem;
  font-size: 0.86rem;
}

.btn-quiet-light {
  border: 1px solid rgba(214, 231, 239, 0.38);
  border-radius: 7px;
  color: #eff8fc;
  font-weight: 650;
}

.btn-quiet-light:hover,
.btn-quiet-light:focus {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.hero-proof {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin: 0;
  color: #8fa5b1;
  font-size: 0.75rem;
}

.hero-proof span {
  width: 0.47rem;
  height: 0.47rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--home-green);
  box-shadow: 0 0 0 4px rgba(66, 211, 146, 0.1);
}

.hero-platform {
  position: relative;
  min-height: 405px;
  overflow: hidden;
  border: 1px solid rgba(141, 183, 207, 0.22);
  border-radius: 12px;
  background: rgba(5, 22, 32, 0.68);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  isolation: isolate;
}

.hero-network-fallback,
.hero-platform canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-network-fallback {
  z-index: -2;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(0.9) contrast(1.08);
}

.hero-platform::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 17, 26, 0.94), rgba(4, 17, 26, 0.34) 48%, rgba(4, 17, 26, 0.84));
  content: "";
}

.hero-platform canvas {
  z-index: 0;
  pointer-events: none;
}

.hero-control-plane {
  position: absolute;
  z-index: 3;
  top: 1rem;
  right: 1rem;
  left: 1rem;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(76, 151, 255, 0.48);
  border-radius: 7px;
  background: rgba(7, 28, 42, 0.86);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.hero-control-plane div,
.hero-control-plane li,
.hero-route-status,
.hero-endpoint,
.hero-module {
  backdrop-filter: blur(9px);
}

.hero-control-plane div span,
.hero-control-plane div strong {
  display: block;
}

.hero-control-plane div span {
  color: #75e9f6;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-control-plane div strong {
  color: #eff8fc;
  font-size: 0.8rem;
}

.hero-control-plane ul {
  display: flex;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-control-plane li {
  padding: 0.28rem 0.42rem;
  border-left: 1px solid rgba(130, 174, 198, 0.2);
  color: #9db2bd;
  font-size: 0.58rem;
}

.hero-route-stage {
  position: absolute;
  z-index: 2;
  top: 5.55rem;
  right: 1rem;
  left: 1rem;
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.72fr) minmax(13rem, 1.5fr) minmax(6.5rem, 0.72fr);
  gap: 1rem;
  align-items: center;
  min-height: 245px;
}

.hero-route-stage::before,
.hero-route-stage::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(34, 217, 236, 0.1), var(--home-cyan), rgba(34, 217, 236, 0.1));
  content: "";
}

.hero-route-stage::before {
  right: 66%;
  left: 11%;
}

.hero-route-stage::after {
  right: 11%;
  left: 66%;
}

.hero-endpoint {
  position: relative;
  padding: 0.8rem;
  border: 1px solid rgba(147, 186, 207, 0.32);
  border-radius: 8px;
  background: rgba(8, 31, 43, 0.88);
  text-align: center;
}

.hero-endpoint::after {
  position: absolute;
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--home-cyan);
  box-shadow: 0 0 12px var(--home-cyan);
  content: "";
}

.hero-source::after {
  right: -1.25rem;
}

.hero-destination::after {
  left: -1.25rem;
}

.hero-endpoint small,
.hero-endpoint strong,
.hero-endpoint span {
  display: block;
}

.hero-endpoint small {
  margin-bottom: 0.35rem;
  color: #64e5f4;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-endpoint strong {
  color: #f7fbfd;
  font-size: 0.75rem;
  line-height: 1.3;
}

.hero-endpoint span {
  margin-top: 0.3rem;
  color: #8da6b2;
  font-size: 0.58rem;
  line-height: 1.35;
}

.hero-product-rack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem;
  padding: 0.75rem;
  border: 1px solid rgba(93, 147, 176, 0.35);
  border-radius: 10px;
  background: rgba(3, 16, 25, 0.83);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 18px 40px rgba(0, 0, 0, 0.3);
}

.hero-module {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.45rem;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(117, 158, 179, 0.15);
  border-radius: 6px;
  background: rgba(11, 38, 52, 0.68);
  color: #78909b;
  transition: border-color 240ms ease, background-color 240ms ease, color 240ms ease, transform 240ms ease;
}

.hero-module span {
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.48rem;
}

.hero-module strong {
  font-size: 0.63rem;
  font-weight: 600;
  line-height: 1.25;
}

.hero-module.is-active {
  border-color: rgba(66, 204, 255, 0.72);
  background: rgba(22, 97, 184, 0.3);
  color: #e9fbff;
  box-shadow: 0 0 24px rgba(36, 104, 255, 0.12);
  transform: translateY(-1px);
}

.hero-module.is-active span {
  color: #63e9f7;
}

.hero-route-status {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-top: 1px solid rgba(141, 183, 207, 0.2);
  background: rgba(4, 18, 27, 0.76);
}

.hero-route-status span {
  flex: 0 0 auto;
  color: #60e6f3;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero-route-status strong {
  color: #b9cbd4;
  font-size: 0.67rem;
  font-weight: 550;
}

.hero-route-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  min-height: 88px;
  border-top: 1px solid rgba(156, 193, 211, 0.18);
}

.hero-route-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: stretch;
}

.hero-route-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 0.55rem;
  align-items: center;
  min-height: 68px;
  padding: 0.55rem 1rem;
  border: 0;
  border-right: 1px solid rgba(156, 193, 211, 0.14);
  background: transparent;
  color: #8299a5;
  text-align: left;
}

.hero-route-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--home-cyan);
  content: "";
  opacity: 0;
  transform: scaleX(0.2);
  transition: opacity 200ms ease, transform 250ms ease;
}

.hero-route-tabs button span {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid #49616d;
  border-radius: 50%;
  font-size: 0.6rem;
}

.hero-route-tabs button strong {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
}

.hero-route-tabs button.is-active {
  color: #f3fbfe;
}

.hero-route-tabs button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.hero-route-tabs button.is-active span {
  border-color: var(--home-cyan);
  color: var(--home-cyan);
}

.hero-route-bar > p {
  max-width: 15rem;
  margin: 0;
  color: #78909c;
  font-size: 0.68rem;
  text-align: right;
}

/* Scenarios */
.workflow-section {
  padding: 2.25rem 0;
  background: var(--home-surface);
}

.scenario-layout {
  display: grid;
  grid-template-columns: minmax(13.5rem, 0.25fr) minmax(0, 0.75fr);
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background: var(--home-surface);
  box-shadow: 0 18px 50px rgba(17, 42, 58, 0.055);
}

.scenario-tabs {
  display: flex;
  flex-direction: column;
  padding: 0.55rem;
  border-right: 1px solid var(--home-line);
  background: #f4f7fa;
}

.scenario-tab {
  position: relative;
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 0.65rem;
  min-height: 70px;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-bottom: 1px solid #e2e9ee;
  border-radius: 6px;
  background: transparent;
  color: #526670;
  text-align: left;
}

.scenario-tab:last-child {
  border-bottom-color: transparent;
}

.scenario-tab span {
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  border: 1px solid #a9bac6;
  border-radius: 50%;
  font-size: 0.58rem;
  font-weight: 700;
}

.scenario-tab strong {
  font-size: 0.75rem;
  font-weight: 620;
  line-height: 1.25;
}

.scenario-tab:hover {
  background: #eaf0f5;
  color: var(--home-ink);
}

.scenario-tab.active {
  background: var(--home-blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(36, 104, 255, 0.18);
}

.scenario-tab.active span {
  border-color: rgba(255, 255, 255, 0.72);
}

.scenario-content {
  min-width: 0;
}

.scenario-panel {
  min-height: 100%;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}

.scenario-panel.active {
  display: grid;
  grid-template-columns: minmax(13rem, 0.36fr) minmax(0, 0.64fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.scenario-copy {
  max-width: 24rem;
}

.scenario-label,
.foundation-copy > span,
.product-copy > span,
.advantage-panel-copy > span {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--home-blue);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scenario-copy h3 {
  margin-bottom: 0.85rem;
  font-size: clamp(1.4rem, 1.9vw, 1.78rem);
}

.scenario-copy p {
  margin-bottom: 1rem;
  color: var(--home-muted);
  font-size: 0.9rem;
}

.scenario-copy small {
  display: block;
  padding-top: 0.85rem;
  border-top: 1px solid var(--home-line);
  color: #617782;
  font-size: 0.72rem;
  line-height: 1.55;
}

.scenario-diagram {
  position: relative;
  min-width: 0;
  min-height: 285px;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid #d4e0e8;
  border-radius: 9px;
  background:
    linear-gradient(rgba(83, 117, 137, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 117, 137, 0.045) 1px, transparent 1px),
    #f8fafc;
  background-size: 26px 26px;
}

.scenario-control-lane {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  min-height: 50px;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(36, 104, 255, 0.28);
  border-radius: 7px;
  background: rgba(36, 104, 255, 0.055);
}

.scenario-control-lane strong {
  margin-right: auto;
  color: #194eb4;
  font-size: 0.68rem;
}

.scenario-control-lane span {
  padding-left: 0.45rem;
  border-left: 1px solid rgba(36, 104, 255, 0.16);
  color: #65798a;
  font-size: 0.58rem;
}

.scenario-media-lane {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
  margin: 3.8rem 0 0;
  padding: 0;
  list-style: none;
}

.scenario-media-lane::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 5%;
  left: 5%;
  height: 2px;
  background: linear-gradient(90deg, #a9beca, var(--home-blue), var(--home-cyan));
  content: "";
}

.scenario-media-lane::after {
  position: absolute;
  top: -3.2rem;
  left: 50%;
  width: 1px;
  height: 3rem;
  border-left: 1px dashed #94b3c5;
  content: "";
}

.scenario-media-lane li {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 120px;
  flex-direction: column;
  justify-content: center;
  padding: 0.8rem;
  border: 1px solid #ccdae3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 7px 18px rgba(17, 45, 62, 0.055);
}

.scenario-media-lane li::before {
  width: 0.5rem;
  height: 0.5rem;
  margin-bottom: 0.65rem;
  border: 2px solid var(--home-blue);
  border-radius: 50%;
  background: #fff;
  content: "";
}

.scenario-media-lane li > span,
.scenario-media-lane li > strong,
.scenario-media-lane li > small {
  display: block;
}

.scenario-media-lane li > span {
  margin-bottom: 0.25rem;
  color: #526b77;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.scenario-media-lane li > strong {
  color: #162934;
  font-size: 0.74rem;
  line-height: 1.35;
}

.scenario-media-lane li > small {
  margin-top: 0.32rem;
  color: #526873;
  font-size: 0.62rem;
  line-height: 1.35;
}

.scenario-media-lane li.is-accent,
.scenario-media-lane li.is-watermarked {
  border-color: rgba(36, 104, 255, 0.52);
  background: #edf4ff;
}

.scenario-media-lane li.is-branch::after {
  position: absolute;
  inset: 0.35rem;
  border: 1px dashed rgba(36, 104, 255, 0.28);
  border-radius: 5px;
  content: "";
  pointer-events: none;
}

.scenario-media-lane.is-customer-owned::before {
  background: #9baab2;
}

.scenario-media-lane.is-customer-owned li::before {
  border-color: #778994;
}

/* Shared SaaS platform and products */
.platform-section {
  position: relative;
  padding: 1.25rem 0;
  background: var(--home-canvas);
}

.platform-heading {
  max-width: 58rem;
}

.saas-foundation {
  display: grid;
  grid-template-columns: minmax(18rem, 0.34fr) minmax(0, 0.66fr);
  column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
  row-gap: 1rem;
  padding: clamp(1.05rem, 1.7vw, 1.4rem);
  border: 1px solid #ccd9e2;
  border-radius: var(--home-radius);
  background: #fff;
  box-shadow: 0 20px 58px rgba(21, 54, 72, 0.065);
}

.foundation-copy h3 {
  margin-bottom: 0.8rem;
  font-size: clamp(1.65rem, 2vw, 2rem);
}

.foundation-copy p {
  margin-bottom: 1.15rem;
  color: var(--home-muted);
  font-size: 0.88rem;
}

.foundation-copy ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.38rem 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foundation-copy li {
  position: relative;
  padding-left: 0.78rem;
  color: #40545f;
  font-size: 0.66rem;
}

.foundation-copy li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid var(--home-blue);
  border-radius: 50%;
  content: "";
}

.saas-console {
  display: grid;
  min-width: 0;
  min-height: 195px;
  grid-template-columns: 8.25rem minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #bfcdd7;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 15px 30px rgba(20, 47, 64, 0.1);
}

.saas-console > nav {
  display: flex;
  flex-direction: column;
  padding: 0.95rem 0.75rem;
  background: #081b27;
  color: #91a8b4;
}

.saas-console > nav strong {
  margin-bottom: 1.2rem;
  color: #fff;
  font-size: 0.82rem;
}

.saas-console > nav span {
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  font-size: 0.58rem;
}

.saas-console > nav span.is-current {
  background: rgba(36, 104, 255, 0.25);
  color: #eef8ff;
}

.saas-console-main {
  min-width: 0;
  padding: 0.9rem;
}

.saas-console-main > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #dce5eb;
}

.saas-console-main > header small,
.saas-console-main > header strong {
  display: block;
}

.saas-console-main > header small {
  color: #5f737d;
  font-size: 0.58rem;
}

.saas-console-main > header strong {
  color: #1d303b;
  font-size: 0.78rem;
}

.saas-console-main > header > span {
  padding: 0.3rem 0.5rem;
  border: 1px solid #b9caea;
  border-radius: 4px;
  color: #2b5aad;
  font-size: 0.55rem;
}

.console-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.8rem 0;
}

.console-status-grid div {
  min-width: 0;
  padding: 0.55rem;
  border: 1px solid #dce5eb;
  border-radius: 5px;
  background: #fff;
}

.console-status-grid small,
.console-status-grid strong {
  display: block;
}

.console-status-grid small {
  color: #5c707a;
  font-size: 0.54rem;
}

.console-status-grid strong {
  overflow: hidden;
  color: #253b47;
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-workflow {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.65rem;
  border: 1px solid #dce5eb;
  border-radius: 5px;
  background: #fff;
}

.console-workflow span {
  flex: 0 0 auto;
  color: #405761;
  font-size: 0.52rem;
  font-weight: 650;
}

.console-workflow i {
  position: relative;
  min-width: 0.5rem;
  flex: 1 1 auto;
  height: 1px;
  background: #7ba2e8;
}

.console-workflow i::after {
  position: absolute;
  top: -2px;
  right: 0;
  border-top: 2.5px solid transparent;
  border-bottom: 2.5px solid transparent;
  border-left: 4px solid #5789e1;
  content: "";
}

.console-chart {
  display: flex;
  height: 55px;
  gap: 0.42rem;
  align-items: end;
  margin-top: 0.75rem;
  padding: 0.55rem 0.6rem 0;
  border-bottom: 1px solid #bdcddd;
  background: linear-gradient(180deg, rgba(36, 104, 255, 0.025), transparent);
}

.console-chart i {
  width: 9%;
  height: 25%;
  border-radius: 2px 2px 0 0;
  background: #9bbaf2;
}

.console-chart i:nth-child(2) { height: 48%; }
.console-chart i:nth-child(3) { height: 38%; }
.console-chart i:nth-child(4) { height: 72%; }
.console-chart i:nth-child(5) { height: 58%; }
.console-chart i:nth-child(6) { height: 86%; background: var(--home-blue); }
.console-chart i:nth-child(7) { height: 68%; }

.saas-boundary {
  grid-column: 1 / -1;
  margin: -0.5rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--home-line);
  color: #617681;
  font-size: 0.72rem;
}

.saas-boundary strong {
  color: var(--home-blue);
}

.product-system {
  position: relative;
  margin-top: 1.35rem;
  padding-left: 2.6rem;
}

.platform-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.75rem;
  width: 1px;
  background: linear-gradient(var(--home-blue), var(--home-cyan), #91a9b8);
}

.platform-spine::before,
.platform-spine::after {
  position: absolute;
  left: -4px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--home-blue);
  border-radius: 50%;
  background: var(--home-canvas);
  content: "";
}

.platform-spine::before { top: 0; }
.platform-spine::after { bottom: 0; border-color: var(--home-cyan); }

.platform-spine span {
  position: sticky;
  top: calc(var(--site-nav-height) + 1rem);
  display: block;
  width: max-content;
  padding: 0.22rem 0.45rem;
  border: 1px solid #bdd0e7;
  border-radius: 4px;
  background: #edf4ff;
  color: #2558b3;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transform: translate(-0.72rem, 1.25rem) rotate(-90deg) translateX(-100%);
  transform-origin: left top;
}

.product-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(17rem, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
  min-height: 235px;
  padding: clamp(0.95rem, 1.4vw, 1.15rem);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background: #fff;
}

.product-row + .product-row {
  margin-top: 0.65rem;
}

.product-row::before {
  position: absolute;
  top: 2rem;
  left: -2rem;
  width: 2rem;
  height: 1px;
  background: #9db7d1;
  content: "";
}

.product-row::after {
  position: absolute;
  top: calc(2rem - 3px);
  left: -2.05rem;
  width: 7px;
  height: 7px;
  border: 2px solid var(--home-blue);
  border-radius: 50%;
  background: var(--home-canvas);
  content: "";
}

.product-copy {
  align-self: center;
}

.product-copy h3 {
  margin-bottom: 0.8rem;
  font-size: clamp(1.45rem, 1.8vw, 1.7rem);
}

.product-copy p {
  margin-bottom: 0.9rem;
  color: var(--home-muted);
  font-size: 0.86rem;
}

.product-copy > strong {
  display: block;
  padding-top: 0.85rem;
  border-top: 1px solid var(--home-line);
  color: #304955;
  font-size: 0.7rem;
  line-height: 1.55;
}

.product-copy > a {
  display: inline-flex;
  margin-top: 0.25rem;
  color: #1f5cdd;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
}

.product-copy > a::after {
  margin-left: 0.4rem;
  content: "→";
}

.product-copy ul {
  display: grid;
  gap: 0.32rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.product-copy li {
  position: relative;
  padding-left: 0.85rem;
  color: #4b616d;
  font-size: 0.69rem;
}

.product-copy li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--home-blue);
  content: "";
}

/* Live Media Core */
.media-core-visual {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(8.2rem, 0.22fr) minmax(18rem, 0.5fr) minmax(8.2rem, 0.28fr);
  grid-template-rows: 1fr auto;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #153747;
  border-radius: 9px;
  background:
    radial-gradient(circle at 48% 42%, rgba(36, 104, 255, 0.22), transparent 17rem),
    #071b26;
  color: #f4fbff;
}

.protocol-bank {
  align-self: stretch;
  padding: 0.85rem;
  border: 1px solid rgba(150, 190, 209, 0.2);
  border-radius: 7px;
  background: rgba(12, 43, 57, 0.76);
}

.protocol-bank small,
.protocol-bank p {
  display: block;
}

.protocol-bank small {
  margin: 0.55rem 0 0.22rem;
  color: #77929f;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.protocol-bank small:first-child { margin-top: 0; }

.protocol-bank p {
  margin: 0;
  color: #d9e7ed;
  font-size: 0.58rem;
  line-height: 1.45;
}

.protocol-bank p.is-highlight {
  padding: 0.3rem 0.4rem;
  border-left: 2px solid var(--home-cyan);
  background: rgba(34, 217, 236, 0.08);
  color: #9ff6ff;
  font-weight: 700;
}

.media-core-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-core-process::before {
  position: absolute;
  top: 50%;
  right: 4%;
  left: 4%;
  height: 2px;
  background: linear-gradient(90deg, #296eff, #37ddf0);
  content: "";
}

.media-core-process li {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 96px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  border: 1px solid rgba(103, 174, 208, 0.36);
  border-radius: 7px;
  background: rgba(8, 35, 49, 0.94);
  text-align: center;
}

.media-core-process li span {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: 0.55rem;
  place-items: center;
  border: 1px solid #4be5f5;
  border-radius: 6px;
  color: #75f0fc;
  font-size: 0.5rem;
}

.media-core-process li strong {
  color: #eff9fd;
  font-size: 0.57rem;
  line-height: 1.25;
}

.protocol-output-bank p {
  line-height: 1.65;
}

.ai-route {
  grid-column: 2 / 4;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.62rem 0.75rem;
  border: 1px solid rgba(121, 151, 255, 0.3);
  border-radius: 7px;
  background: rgba(36, 104, 255, 0.09);
}

.ai-route span {
  flex: 0 0 auto;
  color: #bed2fa;
  font-size: 0.53rem;
  font-weight: 650;
}

.ai-route i {
  min-width: 0.5rem;
  flex: 1 1 auto;
  height: 1px;
  background: rgba(83, 140, 255, 0.64);
}

/* Resilient Transport */
.transport-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.transport-visual section {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1rem;
  overflow: hidden;
  border: 1px solid #cbd9e3;
  border-radius: 8px;
  background: #f7fafc;
}

.transport-visual section:last-child {
  border-color: #a9c9f5;
  background: #f3f7ff;
}

.transport-visual section::after {
  position: absolute;
  right: -4rem;
  bottom: -4rem;
  width: 10rem;
  height: 10rem;
  border: 1px solid rgba(36, 104, 255, 0.12);
  border-radius: 50%;
  content: "";
}

.transport-visual header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #d7e2e9;
}

.transport-visual header span,
.transport-visual header strong {
  display: block;
}

.transport-visual header span {
  color: #6d818c;
  font-size: 0.56rem;
}

.transport-visual header strong {
  color: #1647a3;
  font-size: 0.88rem;
}

.transport-visual p {
  margin: 0.8rem 0 1rem;
  color: #526873;
  font-size: 0.68rem;
}

.transport-visual ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.transport-visual ol::before {
  position: absolute;
  top: 0.63rem;
  right: 9%;
  left: 9%;
  height: 1px;
  background: var(--home-blue);
  content: "";
}

.transport-visual li {
  position: relative;
  padding-top: 1.55rem;
  color: #334b58;
  font-size: 0.54rem;
  font-weight: 650;
  text-align: center;
}

.transport-visual li::before {
  position: absolute;
  z-index: 1;
  top: 0.36rem;
  left: calc(50% - 0.28rem);
  width: 0.56rem;
  height: 0.56rem;
  border: 2px solid var(--home-blue);
  border-radius: 50%;
  background: #fff;
  content: "";
}

.transport-visual section > small {
  display: block;
  margin-top: 0.85rem;
  padding: 0.42rem;
  border-radius: 4px;
  background: #eaf0f5;
  color: #536b78;
  font-size: 0.55rem;
  font-weight: 700;
  text-align: center;
}

.transport-visual section:last-child > small {
  background: #dfeaff;
  color: #2856ae;
}

/* Global Edge CDN */
.edge-visual {
  position: relative;
  min-width: 0;
  min-height: 205px;
  overflow: hidden;
  border: 1px solid #173645;
  border-radius: 9px;
  background: #071923;
  color: #fff;
}

.edge-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.74;
  filter: saturate(0.9) contrast(1.08);
}

.edge-visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 21, 31, 0.08) 40%, rgba(5, 21, 31, 0.88));
  content: "";
  pointer-events: none;
}

.edge-node {
  position: absolute;
  z-index: 2;
  display: flex;
  gap: 0.3rem;
  align-items: center;
  color: #ccebf3;
  font-size: 0.48rem;
}

.edge-node span {
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--home-green);
  box-shadow: 0 0 0 5px rgba(66, 211, 146, 0.1), 0 0 15px rgba(66, 211, 146, 0.9);
  animation: home-edge-pulse 2.8s ease-in-out infinite;
}

.edge-node strong { font-weight: 600; }
.node-na { top: 27%; left: 15%; }
.node-sa { top: 61%; left: 28%; }
.node-eu { top: 27%; left: 46%; }
.node-af { top: 52%; left: 48%; }
.node-as { top: 34%; left: 65%; }
.node-oc { top: 68%; left: 73%; }

.edge-decision {
  position: absolute;
  z-index: 3;
  top: 1rem;
  right: 1rem;
  display: grid;
  width: 12.5rem;
  grid-template-columns: 1fr auto;
  gap: 0.28rem 0.45rem;
  padding: 0.75rem;
  border: 1px solid rgba(133, 187, 213, 0.32);
  border-radius: 7px;
  background: rgba(5, 24, 35, 0.88);
  backdrop-filter: blur(8px);
}

.edge-decision span {
  color: #a4bac4;
  font-size: 0.54rem;
}

.edge-decision i {
  align-self: center;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--home-green);
}

.edge-decision strong {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(142, 182, 201, 0.18);
  color: #ecfaff;
  font-size: 0.65rem;
}

.edge-transport {
  position: absolute;
  z-index: 3;
  right: 1rem;
  bottom: 3.3rem;
  display: grid;
  gap: 0.35rem;
  width: 12.5rem;
}

.edge-transport span {
  padding: 0.38rem 0.48rem;
  border: 1px solid rgba(87, 159, 255, 0.35);
  border-radius: 4px;
  background: rgba(10, 35, 49, 0.86);
  color: #b8d3df;
  font-size: 0.5rem;
}

.edge-visual > p {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-top: 1px solid rgba(126, 173, 194, 0.2);
  background: rgba(4, 19, 28, 0.88);
  color: #9fc0cd;
  font-size: 0.53rem;
  text-align: center;
}

/* Native SDK and applications */
.client-visual {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(16rem, 0.54fr) minmax(13rem, 0.46fr);
  grid-template-rows: auto 1fr;
  gap: 0.75rem;
}

.client-art {
  position: relative;
  grid-row: 1 / 3;
  min-height: 205px;
  overflow: hidden;
  border: 1px solid #173545;
  border-radius: 9px;
  background: #071923;
}

.client-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 18, 28, 0.5));
  content: "";
}

.client-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-adoption,
.client-delivery-modes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.client-adoption {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #ccd9e2;
  border-radius: 7px;
  background: #f8fafc;
}

.client-adoption li {
  min-width: 0;
  padding: 0.65rem;
  border-right: 1px solid #dce5eb;
}

.client-adoption li:last-child { border-right: 0; }

.client-adoption span,
.client-adoption strong,
.client-adoption small {
  display: block;
}

.client-adoption span {
  margin-bottom: 0.25rem;
  color: var(--home-blue);
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
}

.client-adoption strong {
  color: #243943;
  font-size: 0.62rem;
  line-height: 1.3;
}

.client-adoption small {
  margin-top: 0.25rem;
  color: #778b95;
  font-size: 0.5rem;
}

.client-delivery-modes {
  display: grid;
  gap: 0.42rem;
}

.client-delivery-modes li {
  position: relative;
  padding: 0.58rem 0.65rem 0.58rem 2.15rem;
  border: 1px solid #d4dfe6;
  border-radius: 6px;
  background: #fff;
}

.client-delivery-modes li::before {
  position: absolute;
  top: calc(50% - 0.53rem);
  left: 0.65rem;
  display: grid;
  width: 1.06rem;
  height: 1.06rem;
  place-items: center;
  border: 1px solid #75a0f3;
  border-radius: 50%;
  color: var(--home-blue);
  content: "↗";
  font-size: 0.52rem;
}

.client-delivery-modes strong,
.client-delivery-modes span {
  display: block;
}

.client-delivery-modes strong {
  color: #23416b;
  font-size: 0.63rem;
}

.client-delivery-modes span {
  color: #657983;
  font-size: 0.51rem;
  line-height: 1.35;
}

/* Rights protection */
.rights-visual {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 1px solid #cedae3;
  border-radius: 9px;
  background: #f8fafc;
  list-style: none;
}

.rights-visual li {
  position: relative;
  min-width: 0;
  min-height: 210px;
  padding: 1.15rem;
  border-right: 1px solid #d7e1e8;
}

.rights-visual li:last-child { border-right: 0; }

.rights-visual li > span,
.rights-visual li > strong,
.rights-visual li > p {
  display: block;
}

.rights-visual li > span {
  margin-bottom: 0.65rem;
  color: var(--home-blue);
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rights-visual li > strong {
  min-height: 2.4rem;
  color: #203844;
  font-size: 0.78rem;
  line-height: 1.35;
}

.rights-visual li > p {
  margin: 0.65rem 0 0;
  color: #617580;
  font-size: 0.62rem;
  line-height: 1.5;
}

.rights-visual li > i {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid #adc5f3;
  border-radius: 50%;
  background: #edf4ff;
}

.rights-visual li > i::before,
.rights-visual li > i::after {
  position: absolute;
  content: "";
}

.rights-visual li > i::before {
  width: 0.8rem;
  height: 0.95rem;
  border: 2px solid var(--home-blue);
  border-radius: 3px;
}

.rights-visual li > i::after {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--home-cyan);
}

.rights-visual li:nth-child(2) > i {
  border-color: #a4dec3;
  background: #edf9f3;
}

.rights-visual li:nth-child(2) > i::before { border-color: #259968; }

.rights-visual li:nth-child(3) > i {
  border-color: #cebafa;
  background: #f6f1ff;
}

.rights-visual li:nth-child(3) > i::before {
  width: 1rem;
  height: 1rem;
  border-color: #805be0;
  border-radius: 50%;
}

/* Core advantages */
.advantage-section {
  padding: 1.5rem 0;
  background:
    radial-gradient(circle at 77% 45%, rgba(36, 104, 255, 0.15), transparent 30rem),
    var(--home-night);
  color: #eaf4f8;
}

.section-heading-dark h2 {
  color: #fff;
}

.section-heading-dark p {
  color: #9eb3bd;
}

.advantage-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.5rem;
  border: 1px solid rgba(136, 179, 199, 0.28);
  border-radius: 7px;
  background: rgba(7, 29, 41, 0.72);
}

.advantage-tab {
  min-height: 38px;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-right: 1px solid rgba(136, 179, 199, 0.2);
  background: transparent;
  color: #8ba1ac;
  font-size: 0.66rem;
  font-weight: 650;
}

.advantage-tab:last-child { border-right: 0; }

.advantage-tab.active {
  background: var(--home-blue);
  color: #fff;
  box-shadow: 0 0 24px rgba(36, 104, 255, 0.22);
}

.advantage-content {
  min-height: 225px;
}

.advantage-panel {
  min-height: 225px;
  padding: 0.9rem;
  border: 1px solid rgba(136, 179, 199, 0.22);
  border-radius: 9px;
  background: rgba(5, 23, 33, 0.82);
}

.advantage-panel.active {
  display: grid;
  grid-template-columns: minmax(13rem, 0.24fr) minmax(0, 0.76fr);
  gap: clamp(1.5rem, 3vw, 2.8rem);
  align-items: center;
}

.advantage-panel-copy > span {
  color: var(--home-cyan);
}

.advantage-panel-copy h3 {
  margin-bottom: 0.8rem;
  color: #fff;
  font-size: clamp(1.4rem, 1.8vw, 1.7rem);
}

.advantage-panel-copy p {
  margin: 0;
  color: #9fb2bc;
  font-size: 0.78rem;
}

.benchmark-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.benchmark-card {
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid rgba(136, 179, 199, 0.25);
  border-radius: 7px;
  background: rgba(8, 33, 46, 0.78);
}

.benchmark-card > header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(139, 179, 198, 0.17);
}

.benchmark-card header small,
.benchmark-card header strong {
  display: block;
}

.benchmark-card header small {
  margin-bottom: 0.25rem;
  color: #72e9f5;
  font-size: 0.58rem;
}

.benchmark-card header strong {
  color: #edf8fb;
  font-size: 0.72rem;
  line-height: 1.35;
}

.benchmark-card > header > span {
  flex: 0 0 auto;
  padding: 0.25rem 0.4rem;
  border: 1px solid rgba(111, 168, 198, 0.32);
  border-radius: 4px;
  color: #8fa8b4;
  font-size: 0.52rem;
}

.benchmark-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0.5rem 0;
}

.benchmark-card dl div {
  min-width: 0;
}

.benchmark-card dt {
  margin-bottom: 0.2rem;
  color: #9bb0ba;
  font-size: 0.56rem;
}

.benchmark-card dd {
  margin: 0;
  color: #c4d3da;
  font-size: 0.68rem;
  line-height: 1.45;
}

.throughput-chart {
  display: flex;
  height: 82px;
  gap: 1rem;
  align-items: flex-end;
  justify-content: center;
  padding: 0.75rem 0.75rem 0;
  border-bottom: 1px solid #4b6572;
  background: linear-gradient(180deg, rgba(36, 104, 255, 0.04), transparent);
}

.throughput-chart > div {
  position: relative;
  display: flex;
  width: 5.5rem;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.throughput-chart .bar {
  display: block;
  width: 2.7rem;
  height: var(--bar-value);
  border-radius: 3px 3px 0 0;
  background: #59798a;
}

.throughput-chart .bar.is-boost {
  background: linear-gradient(180deg, #3a8aff, #1d5ee8);
  box-shadow: 0 0 25px rgba(36, 104, 255, 0.25);
}

.throughput-chart strong {
  position: absolute;
  top: calc(100% - var(--bar-value) - 1.15rem);
  color: #f0f9fc;
  font-size: 0.6rem;
}

.throughput-chart small {
  position: absolute;
  bottom: -1.1rem;
  color: #9fb2bc;
  font-size: 0.54rem;
}

.rxt-results {
  display: grid;
  min-height: 82px;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid rgba(123, 170, 193, 0.16);
  border-radius: 6px;
  background: rgba(3, 18, 27, 0.36);
}

.rxt-results div {
  text-align: center;
}

.rxt-results small,
.rxt-results strong,
.rxt-results span {
  display: block;
}

.rxt-results small {
  color: #9cb2bc;
  font-size: 0.56rem;
}

.rxt-results strong {
  margin: 0.35rem 0;
  color: #70eaf6;
  font-size: 1.2rem;
}

.rxt-results span {
  color: #a2b5be;
  font-size: 0.54rem;
}

.rxt-results i {
  width: 1px;
  height: 4rem;
  background: rgba(138, 180, 199, 0.23);
}

.evidence-note,
.advantage-detail {
  grid-column: 2;
  margin: -0.3rem 0 0;
  color: #9fb3bd;
  font-size: 0.62rem;
}

.ai-advantage-visual,
.watermark-advantage-visual {
  min-width: 0;
}

.ai-advantage-visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: 1rem;
  align-items: stretch;
}

.ai-advantage-visual ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-advantage-visual ol::before {
  position: absolute;
  top: 50%;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, var(--home-cyan), var(--home-blue));
  content: "";
}

.ai-advantage-visual li {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 165px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  border: 1px solid rgba(122, 174, 199, 0.25);
  border-radius: 7px;
  background: rgba(8, 34, 47, 0.94);
  text-align: center;
}

.ai-advantage-visual li i {
  display: block;
  width: 2rem;
  height: 1.4rem;
  margin-bottom: 0.65rem;
  background: repeating-linear-gradient(90deg, #44dce9 0 2px, transparent 2px 5px);
  clip-path: polygon(0 45%, 10% 35%, 20% 70%, 30% 15%, 40% 82%, 50% 30%, 60% 67%, 70% 5%, 80% 76%, 90% 38%, 100% 50%, 100% 65%, 90% 53%, 80% 88%, 70% 22%, 60% 79%, 50% 45%, 40% 95%, 30% 28%, 20% 83%, 10% 48%, 0 60%);
}

.ai-advantage-visual li strong {
  color: #dbe9ee;
  font-size: 0.62rem;
}

.ai-advantage-visual > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  border: 1px solid rgba(84, 143, 255, 0.42);
  border-radius: 7px;
  background: rgba(36, 104, 255, 0.13);
}

.ai-advantage-visual > div small,
.ai-advantage-visual > div strong {
  display: block;
}

.ai-advantage-visual > div small {
  color: #9eb7c3;
  font-size: 0.58rem;
  line-height: 1.45;
}

.ai-advantage-visual > div strong {
  margin-top: 0.55rem;
  color: #72ecf7;
  font-size: 1.5rem;
}

.watermark-advantage-visual {
  display: grid;
  grid-template-columns: 1fr 2.5rem 1.25fr 2.5rem 1fr;
  gap: 0.6rem;
  align-items: center;
}

.watermark-advantage-visual > div {
  position: relative;
  display: flex;
  min-height: 150px;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  border: 1px solid rgba(127, 174, 195, 0.27);
  border-radius: 7px;
  background: rgba(8, 34, 47, 0.86);
}

.watermark-advantage-visual > i {
  height: 1px;
  background: linear-gradient(90deg, #678c9d, var(--home-cyan));
}

.watermark-advantage-visual small,
.watermark-advantage-visual strong {
  display: block;
}

.watermark-advantage-visual small {
  margin-bottom: 0.4rem;
  color: #74909d;
  font-size: 0.55rem;
}

.watermark-advantage-visual strong {
  color: #e5f1f5;
  font-size: 0.72rem;
}

.watermark-core {
  border-color: rgba(126, 97, 238, 0.55) !important;
  background: rgba(75, 45, 160, 0.16) !important;
}

.watermark-core > span {
  position: absolute;
  right: 0.75rem;
  bottom: 0.5rem;
  color: rgba(168, 143, 255, 0.1);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  transform: rotate(-14deg);
}

.client-advantage-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.client-advantage-modes li {
  min-height: 165px;
  padding: 1rem;
  border: 1px solid rgba(126, 171, 193, 0.25);
  border-radius: 7px;
  background: rgba(8, 34, 47, 0.88);
}

.client-advantage-modes small,
.client-advantage-modes strong,
.client-advantage-modes p {
  display: block;
}

.client-advantage-modes small {
  margin-bottom: 0.5rem;
  color: #6de7f3;
  font-size: 0.52rem;
}

.client-advantage-modes strong {
  color: #f2f9fc;
  font-size: 0.82rem;
}

.client-advantage-modes p {
  margin: 0.65rem 0 0;
  color: #95aab4;
  font-size: 0.62rem;
}

/* Integration */
.architecture-section {
  padding: 1.5rem 0;
  background: var(--home-surface);
}

.integration-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 52rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--home-line-strong);
  border-radius: 7px;
  background: #f6f8fa;
}

.integration-tab {
  min-height: 42px;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-right: 1px solid var(--home-line);
  background: transparent;
  color: #536974;
  font-size: 0.65rem;
  font-weight: 650;
}

.integration-tab:last-child { border-right: 0; }

.integration-tab.active {
  background: var(--home-blue);
  color: #fff;
}

.integration-frame {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(15rem, 0.24fr);
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  background: #fff;
  box-shadow: 0 18px 45px rgba(17, 45, 62, 0.05);
}

.integration-content {
  min-width: 0;
}

.integration-panel {
  min-height: 230px;
  padding: 1rem;
}

.integration-panel > header {
  display: grid;
  grid-template-columns: minmax(14rem, 0.36fr) minmax(0, 0.64fr);
  gap: 2rem;
  align-items: start;
  margin-bottom: 0.85rem;
}

.integration-panel > header h3 {
  margin: 0;
  font-size: clamp(1.35rem, 1.75vw, 1.65rem);
}

.integration-panel > header p {
  margin: 0;
  color: var(--home-muted);
  font-size: 0.78rem;
}

.integration-media-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.integration-media-route::before {
  position: absolute;
  top: 50%;
  right: 4%;
  left: 4%;
  height: 2px;
  background: linear-gradient(90deg, #93a8b4, var(--home-blue), var(--home-cyan));
  content: "";
}

.integration-media-route li {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  padding: 0.65rem;
  border: 1px solid #cad7df;
  border-radius: 7px;
  background: #f8fafc;
  color: #324955;
  font-size: 0.64rem;
  font-weight: 650;
  text-align: center;
}

.integration-media-route li.is-cloudtv {
  border-color: #9dbeff;
  background: #edf4ff;
  color: #1c51b5;
}

.integration-media-route.is-customer-owned::before {
  background: #9baab2;
}

.integration-control-plane {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 48px;
  padding: 0.55rem 0.7rem;
  border: 1px solid #91b3f5;
  border-radius: 6px;
  background: #f2f6ff;
}

.integration-control-plane strong {
  margin-right: auto;
  color: #194dab;
  font-size: 0.68rem;
}

.integration-control-plane span {
  padding-left: 0.55rem;
  border-left: 1px solid #cbdaf5;
  color: #536b7a;
  font-size: 0.55rem;
}

.integration-boundary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.35rem, 2.4vw, 2rem);
  border-left: 1px solid #1d3a49;
  background: #0a2431;
  color: #fff;
}

.integration-boundary strong {
  margin-bottom: 0.8rem;
  color: #f0f9fc;
  font-size: 0.92rem;
  line-height: 1.35;
}

.integration-boundary p {
  margin: 0;
  color: #9db2bc;
  font-size: 0.68rem;
}

/* CTA */
.home-cta {
  padding: 0.75rem 0;
  border-top: 1px solid #d6e1e8;
  background: #eef4fb;
}

.cta-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
}

.home-cta h2 {
  max-width: none;
  margin-bottom: 0.45rem;
  font-size: clamp(1.55rem, 2.3vw, 2.1rem);
}

.home-cta p {
  max-width: 65rem;
  margin: 0;
  color: var(--home-muted);
  font-size: 0.82rem;
}

@media (min-width: 992px) {
  .advantage-section .section-heading-block,
  .architecture-section .section-heading-block {
    display: grid;
    max-width: none;
    grid-template-columns: minmax(20rem, 0.38fr) minmax(0, 0.62fr);
    gap: 3rem;
    align-items: end;
  }

  .workflow-section .section-heading-block,
  .platform-section .section-heading-block,
  .advantage-section .section-heading-block,
  .architecture-section .section-heading-block {
    margin-bottom: 1.25rem;
  }

  .advantage-section .section-heading-block h2,
  .architecture-section .section-heading-block h2 {
    margin-bottom: 0;
  }

  .edge-product .product-copy > strong {
    padding-top: 0.55rem;
    font-size: 0.64rem;
    line-height: 1.4;
  }

  .edge-product .product-copy ul {
    gap: 0.18rem;
    margin-top: 0.6rem;
  }
}

/* Motion */
@keyframes home-edge-pulse {
  50% {
    box-shadow: 0 0 0 8px rgba(66, 211, 146, 0), 0 0 18px rgba(66, 211, 146, 0.75);
  }
}

@media (max-width: 1199.98px) {
  .hero-layout {
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
    gap: 2rem;
  }

  .hero-control-plane ul li:nth-last-child(-n + 2) {
    display: none;
  }

  .scenario-panel.active {
    grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 0.68fr);
    gap: 1.5rem;
  }

  .scenario-media-lane {
    gap: 0.45rem;
  }

  .scenario-media-lane li {
    padding: 0.65rem;
  }

  .product-row {
    grid-template-columns: minmax(15rem, 0.3fr) minmax(0, 0.7fr);
    gap: 1.5rem;
  }

  .media-core-visual {
    grid-template-columns: minmax(7.3rem, 0.22fr) minmax(14rem, 0.5fr) minmax(7.3rem, 0.28fr);
  }

  .media-core-process {
    gap: 0.28rem;
  }

  .media-core-process li {
    min-height: 86px;
    padding: 0.3rem;
  }
}

@media (max-width: 991.98px) {
  .home-page-body {
    --home-section: 4.25rem;
  }

  .home-page-body .site-nav .nav-link {
    font-size: 0.88rem;
  }

  .platform-hero {
    min-height: auto;
  }

  .hero-shell {
    padding-top: 3.5rem;
    padding-bottom: 1.25rem;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero-copy {
    max-width: 40rem;
  }

  .platform-hero h1 {
    max-width: 13ch;
  }

  .hero-platform {
    min-height: 410px;
  }

  .hero-route-bar {
    margin-top: 1.25rem;
  }

  .scenario-layout {
    grid-template-columns: 1fr;
  }

  .scenario-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--home-line);
  }

  .scenario-tab {
    min-height: 62px;
    border-right: 1px solid #e2e9ee;
  }

  .scenario-panel.active {
    min-height: 440px;
  }

  .saas-foundation,
  .product-row {
    grid-template-columns: 1fr;
  }

  .foundation-copy {
    max-width: 44rem;
  }

  .product-row {
    min-height: auto;
  }

  .product-copy {
    max-width: 46rem;
  }

  .advantage-panel.active {
    grid-template-columns: 1fr;
  }

  .advantage-panel-copy {
    max-width: 40rem;
  }

  .evidence-note,
  .advantage-detail {
    grid-column: 1;
  }

  .integration-frame {
    grid-template-columns: 1fr;
  }

  .integration-boundary {
    min-height: 150px;
    border-top: 1px solid #1d3a49;
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .home-page-body {
    --site-nav-height: 64px;
    --home-section: 3.75rem;
    font-size: 0.92rem;
  }

  .home-page-body .container {
    width: min(100% - 1.5rem, var(--home-width));
  }

  .section-heading-block {
    margin-bottom: 1.75rem;
  }

  .scenario-copy small,
  .saas-boundary,
  .product-copy p,
  .product-copy > strong,
  .product-copy > a,
  .product-copy li,
  .integration-boundary p {
    font-size: 0.875rem;
  }

  .platform-hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.25rem);
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-platform {
    min-height: 500px;
  }

  .hero-control-plane {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .hero-control-plane ul {
    overflow: hidden;
  }

  .hero-control-plane li {
    flex: 1 1 auto;
    text-align: center;
  }

  .hero-control-plane ul li:nth-last-child(-n + 2) {
    display: block;
  }

  .hero-route-stage {
    top: 7.4rem;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .hero-product-rack {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .hero-endpoint {
    align-self: end;
  }

  .hero-route-stage::before,
  .hero-route-stage::after,
  .hero-endpoint::after {
    display: none;
  }

  .hero-route-status {
    bottom: 0.75rem;
  }

  .hero-route-bar {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-route-tabs {
    overflow-x: auto;
    grid-template-columns: repeat(3, minmax(10.5rem, 1fr));
    scrollbar-width: thin;
  }

  .hero-route-bar > p {
    max-width: none;
    padding: 0.7rem 0;
    text-align: left;
  }

  .scenario-tabs {
    display: flex;
    overflow-x: auto;
    flex-direction: row;
    scroll-snap-type: x proximity;
  }

  .scenario-tab {
    min-width: 12rem;
    border-bottom: 0;
    scroll-snap-align: start;
  }

  .scenario-panel.active {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 1.25rem;
  }

  .scenario-copy {
    max-width: none;
  }

  .scenario-diagram {
    min-height: 430px;
  }

  .scenario-control-lane {
    flex-wrap: wrap;
  }

  .scenario-control-lane strong {
    width: 100%;
  }

  .scenario-media-lane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2.5rem;
  }

  .scenario-media-lane::before {
    top: 8%;
    bottom: 8%;
    left: 50%;
    width: 1px;
    height: auto;
  }

  .scenario-media-lane::after {
    top: -1.6rem;
    height: 1.5rem;
  }

  .scenario-media-lane li {
    min-height: 118px;
  }

  .saas-foundation {
    padding: 1.25rem;
  }

  .foundation-copy ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saas-console {
    grid-template-columns: 5.6rem minmax(0, 1fr);
  }

  .saas-console > nav {
    padding: 0.75rem 0.45rem;
  }

  .saas-console > nav span {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }

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

  .console-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .console-workflow i {
    display: none;
  }

  .product-system {
    padding-left: 1.25rem;
  }

  .platform-spine {
    left: 0.2rem;
  }

  .platform-spine span {
    display: none;
  }

  .product-row {
    padding: 1.25rem;
  }

  .product-row::before {
    left: -1.05rem;
    width: 1.05rem;
  }

  .product-row::after {
    left: -1.12rem;
  }

  .media-core-visual {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .media-core-process {
    grid-template-columns: repeat(5, minmax(4.5rem, 1fr));
    overflow-x: auto;
    padding-bottom: 0.35rem;
  }

  .protocol-output-bank,
  .ai-route {
    grid-column: 1;
  }

  .ai-route {
    overflow-x: auto;
  }

  .transport-visual,
  .client-visual,
  .benchmark-grid,
  .ai-advantage-visual {
    grid-template-columns: 1fr;
  }

  .transport-visual section {
    min-height: 245px;
  }

  .edge-visual {
    min-height: 400px;
  }

  .edge-visual::after {
    background: linear-gradient(180deg, rgba(5, 21, 31, 0.06) 28%, rgba(5, 21, 31, 0.88));
  }

  .edge-node strong {
    display: none;
  }

  .edge-decision {
    top: auto;
    right: 0.75rem;
    bottom: 7.2rem;
    left: 0.75rem;
    width: auto;
  }

  .edge-transport {
    right: 0.75rem;
    bottom: 3.1rem;
    left: 0.75rem;
    width: auto;
    grid-template-columns: 1fr 1fr;
  }

  .client-art {
    grid-row: auto;
    min-height: 240px;
  }

  .rights-visual,
  .client-advantage-modes {
    grid-template-columns: 1fr;
  }

  .rights-visual li {
    min-height: 170px;
    border-right: 0;
    border-bottom: 1px solid #d7e1e8;
  }

  .rights-visual li:last-child { border-bottom: 0; }

  .advantage-tabs,
  .integration-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .advantage-tab,
  .integration-tab {
    min-width: 12rem;
    min-height: 44px;
    scroll-snap-align: start;
  }

  .benchmark-card dt {
    font-size: 0.7rem;
  }

  .benchmark-card dd,
  .evidence-note,
  .advantage-detail {
    font-size: 0.875rem;
  }

  .advantage-panel {
    min-height: 0;
    padding: 1.25rem;
  }

  .throughput-chart {
    margin-bottom: 1rem;
  }

  .ai-advantage-visual > div {
    min-height: 130px;
  }

  .watermark-advantage-visual {
    grid-template-columns: 1fr;
  }

  .watermark-advantage-visual > i {
    width: 1px;
    height: 1.5rem;
    justify-self: center;
  }

  .watermark-advantage-visual > div {
    min-height: 110px;
  }

  .client-advantage-modes li {
    min-height: 125px;
  }

  .integration-panel {
    padding: 1.25rem;
  }

  .integration-panel > header {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .integration-media-route {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .integration-media-route::before {
    display: none;
  }

  .integration-control-plane {
    flex-wrap: wrap;
  }

  .integration-control-plane strong {
    width: 100%;
  }

  .cta-layout {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .home-cta .btn {
    width: 100%;
  }
}

@media (max-width: 419.98px) {
  .hero-platform {
    min-height: 530px;
  }

  .hero-module {
    min-height: 2.55rem;
    padding: 0.38rem;
  }

  .hero-module strong {
    font-size: 0.56rem;
  }

  .hero-route-stage {
    right: 0.65rem;
    left: 0.65rem;
  }

  .hero-control-plane,
  .hero-route-status {
    right: 0.65rem;
    left: 0.65rem;
  }

  .hero-control-plane li:nth-last-child(-n + 2) {
    display: none;
  }

  .scenario-media-lane {
    grid-template-columns: 1fr;
  }

  .scenario-media-lane::before {
    display: none;
  }

  .scenario-diagram {
    min-height: 650px;
  }

  .client-adoption {
    grid-template-columns: 1fr;
  }

  .client-adoption li {
    border-right: 0;
    border-bottom: 1px solid #dce5eb;
  }

  .client-adoption li:last-child { border-bottom: 0; }

  .edge-transport {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page-body .edge-node span {
    animation: none;
  }

  .home-page-body [data-hero-canvas] {
    display: none;
  }
}

@media (forced-colors: active) {
  .home-page-body .hero-platform,
  .home-page-body .hero-control-plane,
  .home-page-body .hero-module,
  .home-page-body .scenario-layout,
  .home-page-body .scenario-media-lane li,
  .home-page-body .saas-foundation,
  .home-page-body .saas-console,
  .home-page-body .product-row,
  .home-page-body .advantage-panel,
  .home-page-body .integration-frame {
    border: 1px solid CanvasText;
  }

  .home-page-body .scenario-media-lane::before,
  .home-page-body .media-core-process::before,
  .home-page-body .integration-media-route::before {
    background: CanvasText;
  }

  .home-page-body .hero-route-tabs button.is-active,
  .home-page-body .hero-module.is-active,
  .home-page-body .scenario-tab.active,
  .home-page-body .advantage-tab.active,
  .home-page-body .integration-tab.active {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }
}

@media print {
  .home-page-body .platform-hero,
  .home-page-body .advantage-section {
    background: #fff !important;
    color: #000 !important;
  }

  .home-page-body [data-hero-canvas],
  .home-page-body .hero-route-bar,
  .home-page-body .scenario-tabs,
  .home-page-body .advantage-tabs,
  .home-page-body .integration-tabs,
  .home-page-body .platform-spine {
    display: none !important;
  }

  .home-page-body .tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    break-inside: avoid-page;
  }

  .home-page-body .product-row,
  .home-page-body .saas-foundation {
    break-inside: avoid-page;
  }
}