/* Connected Systems only: reuse shared tokens, navigation, buttons and particles. */
.connected-page .connected-hero {
  min-height: 0;
  padding: 160px 0 88px;
}

.connected-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 48px;
  align-items: center;
}

.connected-hero__copy h1 {
  color: var(--text-heading);
  font-size: clamp(2.2rem, 4.5vw, 4.3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin-bottom: 24px;
}

.connected-hero__copy h1 span { color: var(--accent-light); }

.connected-eyebrow {
  color: var(--accent-light);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.connected-lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 24px;
}

.connected-detail {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 28px;
}

.connected-page .hero__cta-group { justify-content: flex-start; }

.connected-hero__visual {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid rgba(99, 221, 255, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 80px rgba(36, 91, 255, 0.12);
}

.connected-hero__visual img { width: 100%; height: auto; display: block; }

.connected-hero__visual figcaption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 22px;
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

.connected-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hero-neon-mid);
  box-shadow: 0 0 12px var(--hero-neon-strong);
}

.connected-caption-detail { color: var(--text-muted); }
.connected-section { padding: 80px 0; }

.connected-page .connected-section .section-title,
.connected-page .connected-section .section-subtitle { text-align: left; margin-left: 0; }

.connected-flow-section,
.connected-integration {
  border-block: 1px solid var(--border);
  background: linear-gradient(120deg, #06101e, var(--bg));
}

.connected-flow {
  list-style: none;
  display: grid;
  gap: 28px;
  padding: 0;
  margin: 40px 0 0;
}

.connected-flow li { border-top: 1px solid rgba(99, 221, 255, 0.35); padding-top: 24px; }
.connected-flow__number { color: var(--hero-neon-mid); font-size: 0.8rem; letter-spacing: 0.15em; }
.connected-flow h3 { color: var(--text-heading); font-size: 1.2rem; margin: 12px 0; }
.connected-flow p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.75; }

.connected-platforms,
.connected-split,
.connected-project { display: grid; gap: 32px; }

.connected-platforms { margin-top: 40px; }
.connected-split, .connected-project { align-items: center; }

.connected-platform {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(184, 134, 11, 0.24);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}

.connected-platform__image { display: block; padding: 20px; background: #07101b; }
.connected-platform__image img { display: block; width: 100%; height: auto; }
.connected-platform__body { display: flex; flex-direction: column; flex: 1; padding: 28px; }
.connected-platform__body h3 { color: var(--text-heading); font-size: 1.45rem; line-height: 1.3; margin-bottom: 16px; }
.connected-platform__body > p:not(.connected-eyebrow) { color: var(--text-muted); line-height: 1.8; }
.connected-platform__body .feature-card__list { margin-bottom: 28px; }
.connected-platform__body .btn { align-self: flex-start; margin-top: auto; }

.connected-crosslink { margin-top: 32px; color: var(--text-muted); }
.connected-crosslink a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 4px; }
.connected-project > img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.connected-page [id] { scroll-margin-top: 100px; }
.connected-page a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 4px; }
.connected-platform__image:focus-visible { outline-offset: -4px; }

.connected-sensor-visual { margin: 0; min-width: 0; }
.connected-sensor-visual img { display: block; width: 100%; height: auto; }
.connected-sensor-visual figcaption {
  padding: 12px 20px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
  background: var(--bg-card);
}
.connected-project > .connected-sensor-visual { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.connected-platform__body .connected-development {
  padding: 18px;
  margin: 24px 0;
  border-left: 2px solid var(--accent-light);
  background: rgba(184, 134, 11, 0.06);
  font-size: 0.9rem;
}
.connected-development strong { display: block; color: var(--accent-light); margin-bottom: 6px; }

@media (min-width: 640px) {
  .connected-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .connected-hero__layout { grid-template-columns: 1fr 1fr; }
  .connected-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .connected-platforms, .connected-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connected-project { grid-template-columns: 0.85fr 1.15fr; gap: 56px; }
}

@media (max-width: 639px) {
  .connected-page .container { padding-inline: 20px; }
  .connected-page .connected-hero { padding: 120px 0 56px; }
  .connected-section { padding: 56px 0; }
  .connected-page .btn { white-space: normal; text-align: center; }
  .connected-platform__body { padding: 22px; }
  .connected-hero__visual figcaption { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.connected-page) { scroll-behavior: auto; }
  .connected-page *, .connected-page *::before, .connected-page *::after {
    animation: none !important;
    transition: none !important;
  }
  .connected-page .hero__particles { display: none; }
  .connected-page .fade-in { opacity: 1; transform: none; }
}