/* =========================================
   home.css — Homepage Authority File
   OWNS:    Hero visual overrides (shade, glow, image filter, grid rail on .page-home),
            dashboard-opening homepage suppression and spacing,
            systems-preview layout and typography,
            all mid-page section widths, spacing and token overrides for .page-home.
   MAY OVERRIDE: hero.css, dashboard-opening.css, command-bridge.css, panels.css
                 where the homepage context requires it.
   MUST NOT DEFINE: base component styles, glass panel base rules, typography base,
                    or any rule intended to apply outside .page-home context.
   ========================================= */

/* =========================================
   HERO — HOMEPAGE OVERRIDES
   Structural foundation (position, flex, background color) lives in hero.css.
   hero-enhanced.css owns the cinematic FX layer (grain, panel shimmer).
   ========================================= */
.hero-home {
  position: relative;
  min-height: calc(92svh - 1rem);
  display: flex;
  align-items: center;
  overflow: clip;
  padding-top: 1.5rem;
  isolation: isolate;

}

/* 🚀 Hero viewport guard pass
   Fixes the mobile/tablet hero clipping by giving the hero its own safe rail.
   This deliberately overrides older hero.css/home.css max-width and padding rules.
*/
.page-home .hero-home {
  min-height: min(860px, calc(100svh - 0.5rem));
  padding-top: clamp(1.25rem, 3vw, 2.25rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* .page-home specificity (0,2,0) beats all competing hero.css rules (0,1,0) — !important not needed */
.page-home .hero-home__grid {
  box-sizing: border-box;
  width: var(--nexus-hero-rail);
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: 0;
  padding-top: clamp(4.5rem, 8vw, 6.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.page-home .hero-home__copy {
  min-width: 0;
  max-width: 43rem;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-home .hero-home__copy h1,
.page-home .hero-home__title {
  max-width: 11ch !important;
  font-size: clamp(3.2rem, 6vw, 5.2rem) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.055em !important;
  margin-top: 0.4rem !important;
  overflow-wrap: normal;
}

.page-home .hero-home__lede {
  max-width: 35rem;
  letter-spacing: 0.01em;
}

.page-home .hero-home__subtag {
  max-width: 35rem;
}

@media (min-width: 980px) {
  .page-home .hero-home__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(21rem, 25rem);
    gap: clamp(2rem, 4vw, 3.75rem);
  }
}

@media (max-width: 979px) {
  :root {
    --nexus-hero-rail: min(100% - clamp(2rem, 5.5vw, 3rem), 74rem);
  }

  .page-home .hero-home {
    min-height: auto;
    align-items: start;
    padding-top: clamp(1.25rem, 4vw, 2rem);
    padding-bottom: clamp(2rem, 6vw, 3.25rem);
  }

  .page-home .hero-home__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.25rem);
    padding-top: clamp(5.75rem, 12vw, 7.5rem);
    padding-bottom: clamp(2rem, 6vw, 3rem);
  }

  .page-home .hero-home__copy h1,
  .page-home .hero-home__title {
    max-width: 10.8ch !important;
    font-size: clamp(3.2rem, 10vw, 5rem) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --nexus-hero-rail: min(100% - 2.25rem, 74rem);
  }

  .page-home .hero-home__grid {
    padding-top: clamp(5.5rem, 18vw, 7rem);
  }

  .page-home .hero-home__copy h1,
  .page-home .hero-home__title {
    max-width: 9.6ch !important;
    font-size: clamp(3rem, 14vw, 4.45rem) !important;
    line-height: 0.95 !important;
  }

  .page-home .hero-home__lede {
    font-size: clamp(1.02rem, 4vw, 1.16rem) !important;
    line-height: 1.68 !important;
  }

  .page-home .hero-home__actions {
    gap: 1rem !important;
    margin-top: clamp(1.2rem, 3vw, 1.8rem);
  }
}

@media (max-width: 390px) {
  :root {
    --nexus-hero-rail: min(100% - 2rem, 74rem);
  }

  .page-home .hero-home__copy h1,
  .page-home .hero-home__title {
    max-width: 9.3ch !important;
    font-size: clamp(2.72rem, 13.2vw, 3.35rem) !important;
    letter-spacing: -0.052em !important;
  }

  .page-home .hero-home__lede {
    max-width: 100% !important;
  }

  .page-home .hero-home__subtag {
    max-width: 100% !important;
  }
}

/* =========================================
   DASHBOARD-OPENING — HOMEPAGE SUPPRESSION
   This block intentionally overrides dashboard-opening.css on the homepage.
   dashboard-opening.css defines the section's base appearance (background gradient,
   grid line texture via ::before, ambient glow ball via ::after). Those values do NOT
   render here — home.css loads after dashboard-opening.css and wins the cascade.

   What this block does:
   - Kills .dashboard-opening::before (the repeating grid line texture)
   - Kills .dashboard-opening::after (the large blurred glow ellipse)
   - Removes border-bottom and box-shadow to prevent a visible seam at the section edge
   - Replaces dashboard-opening__text::after with one controlled editorial underline

   DO NOT remove the display: none !important / content: none !important rules below.
   Removing them immediately re-enables dashboard-opening.css's grid texture and glow
   ball — both of which were deliberately excluded from the homepage visual design.
   ========================================= */

.dashboard-opening__text {
  position: relative;
  padding-bottom: 0;
}

.dashboard-opening__text::before {
  content: none !important;
  display: none !important;
}

.dashboard-opening__text::after {
  content: "";
  display: block;
  width: min(100%, 18rem);
  height: 1px;
  margin-top: clamp(0.95rem, 1.25vw, 1.2rem);
  background: linear-gradient(
    90deg,
    rgba(125, 211, 252, 0.52),
    rgba(125, 211, 252, 0.2) 72%,
    transparent
  );
}

.dashboard-opening,
.dashboard-opening--compact {
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

.dashboard-opening::before,
.dashboard-opening::after,
.dashboard-opening--compact::before,
.dashboard-opening--compact::after,
.dashboard-opening hr,
.dashboard-opening .section-divider,
.dashboard-opening .dashboard-divider,
.dashboard-opening .dashboard-opening__divider {
  display: none !important;
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* First-section rail alignment pass
   Aligns the dashboard heading block to the exact outer edges of the three feature panels.
*/
.dashboard-opening__inner,
.dashboard-opening--compact .dashboard-opening__inner,
.intro-strip__grid {
  width: min(100% - 2rem, 72rem) !important;
  max-width: 72rem !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.dashboard-opening__copy,
.dashboard-opening--compact .dashboard-opening__copy {
  max-width: 62rem !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.dashboard-opening--compact {
  padding-bottom: clamp(0.95rem, 1.6vw, 1.35rem) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.dashboard-opening--compact + .intro-strip {
  padding-top: clamp(0.45rem, 0.9vw, 0.75rem) !important;
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 979px) {
  .dashboard-opening__inner,
  .dashboard-opening--compact .dashboard-opening__inner,
  .intro-strip__grid {
    width: min(100% - 1.5rem, 70rem) !important;
  }
}

@media (max-width: 640px) {
  .dashboard-opening__inner,
  .dashboard-opening--compact .dashboard-opening__inner,
  .intro-strip__grid {
    width: min(100% - 1.25rem, 70rem) !important;
  }
}

/* position: absolute; inset: 0 is declared in hero.css — not repeated here */
.hero-home__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.01);
  filter: brightness(1.04) contrast(1.04) saturate(1.04);
}

.hero-home__shade {
  background:
    linear-gradient(94deg, rgba(2, 6, 23, 0.30) 0%, rgba(2, 6, 23, 0.14) 26%, rgba(2, 6, 23, 0.03) 50%, rgba(2, 6, 23, 0.08) 72%, rgba(2, 6, 23, 0.15) 100%),
    radial-gradient(circle at 20% 48%, rgba(5, 10, 28, 0.02) 0%, rgba(5, 10, 28, 0.08) 42%, rgba(2, 6, 23, 0.12) 100%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.02) 0%, rgba(2, 6, 23, 0.06) 58%, rgba(2, 6, 23, 0.38) 82%, rgba(2, 6, 23, 0.62) 100%);
}

.hero-home__glow {
  background:
    radial-gradient(circle at 18% 38%, rgba(34, 211, 238, 0.08), transparent 30%),
    radial-gradient(circle at 78% 34%, rgba(99, 102, 241, 0.06), transparent 26%),
    radial-gradient(circle at 82% 74%, rgba(99, 102, 241, 0.04), transparent 30%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-home__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 18%, transparent 74%, rgba(2,6,23,0.06));
  pointer-events: none;
}

.hero-home__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.75rem;
  align-items: center;
  width: 100%;
}

.hero-home__copy {
  max-width: 42rem;
}

.hero-home__copy .eyebrow {
  margin-bottom: 1.15rem;
  color: rgba(125, 211, 252, 0.92);
  letter-spacing: 0.24em;
}

.hero-home__copy h1 {
  max-width: 10.2ch;
  margin: 0;
  font-size: clamp(3.35rem, 5.7vw, 5rem);
  line-height: 0.93;
  letter-spacing: -0.05em;
  text-wrap: balance;
  text-shadow: 0 2px 10px rgba(2, 6, 23, 0.55), 0 10px 32px rgba(2, 6, 23, 0.36);
}

.hero-home__lede {
  max-width: 34rem;
  margin-top: 1.2rem;
  font-size: 1.12rem;
  line-height: 1.7;
  color: rgba(232, 238, 255, 0.82);
  text-shadow: 0 2px 8px rgba(2, 6, 23, 0.48), 0 6px 20px rgba(2, 6, 23, 0.28);
}

.hero-home__subtag {
  max-width: 34rem;
  margin-top: 0.85rem;
  margin-bottom: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(224, 232, 255, 0.66);
  text-shadow: 0 2px 8px rgba(2, 6, 23, 0.38);
}

.hero-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.6rem;
}

.hero-home__panel {
  position: relative;
  padding: 1.8rem 1.6rem;
  max-width: 25.5rem;
}

.dashboard-opening {
  position: relative;
  overflow: hidden;
  padding: clamp(4.75rem, 8vw, 7.5rem) 0 clamp(4.5rem, 7vw, 6.75rem);
  background:
    radial-gradient(circle at 12% 18%, rgba(82, 184, 255, 0.16), transparent 30%),
    radial-gradient(circle at 72% 14%, rgba(133, 108, 255, 0.13), transparent 34%),
    linear-gradient(112deg, rgba(3, 14, 31, 0.98) 0%, rgba(5, 13, 34, 0.98) 55%, rgba(8, 9, 34, 0.98) 100%);
  border-top: 1px solid rgba(148, 190, 255, 0.1);
  border-bottom: 1px solid rgba(148, 190, 255, 0.1);
  isolation: isolate;
}

.dashboard-opening::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(148, 190, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 190, 255, 0.055) 1px, transparent 1px),
    linear-gradient(rgba(148, 190, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 190, 255, 0.028) 1px, transparent 1px);
  background-size: 58px 58px, 58px 58px, 14px 14px, 14px 14px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.72) 58%, rgba(0,0,0,0.28));
}

.dashboard-opening::after {
  content: "";
  position: absolute;
  inset: auto -12% -46% 8%;
  z-index: -1;
  height: 68%;
  background: radial-gradient(ellipse at center, rgba(83, 184, 255, 0.12), transparent 66%);
  filter: blur(18px);
  opacity: 0.84;
}

.dashboard-opening__inner {
  max-width: 72rem;
}

.dashboard-opening__inner::after {
  content: none;
  display: none;
}

.dashboard-opening__eyebrow {
  margin: 0 0 clamp(1rem, 1.8vw, 1.45rem);
  color: #90d8ff;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.34em;
  line-height: 1.3;
  text-transform: uppercase;
}

.dashboard-opening__title {
  max-width: 11.5ch;
  margin: 0;
  color: #f7fbff;
  font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(3.35rem, 8.6vw, 7.1rem);
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.91;
  text-wrap: balance;
}

.dashboard-opening__title span {
  display: block;
  color: transparent;
  background: linear-gradient(100deg, #84d3ff 0%, #95baff 48%, #c7a9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 42px rgba(126, 184, 255, 0.18);
}

.dashboard-opening__text {
  max-width: 62rem;
  margin: clamp(1.55rem, 2.5vw, 2.15rem) 0 0;
  color: rgba(226, 236, 255, 0.78);
  font-size: clamp(1.05rem, 1.5vw, 1.42rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.03em;
}

.intro-strip__grid {
  display: grid;
  gap: 1rem;
}

/* Feature card h2 and p sizing is owned by layout-overrides.css (.intro-strip .feature-card h2/p).
   Do not redeclare here — that file loads after home.css and wins cascade with !important. */

@media (min-width: 980px) {
  .hero-home {
    min-height: min(820px, calc(94svh - 1rem));
    padding-top: 0.55rem;
  }

  .hero-home__grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(360px, 410px);
    gap: 2.15rem;
  }

  .hero-home__copy {
    padding-left: 0.2rem;
    transform: translateY(-0.2rem);
  }

  .hero-home__copy h1 {
    font-size: clamp(3.35rem, 5.55vw, 5.1rem);
  }

  .hero-home__panel {
    justify-self: end;
    align-self: center;
    width: 100%;
    transform: translateY(0.65rem);
  }

  .intro-strip__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 979px) {
  .hero-home {
    min-height: auto;
    padding-top: 1rem;
  }

  .dashboard-opening {
    padding: 4rem 0 4.5rem;
  }

  .dashboard-opening__eyebrow {
    letter-spacing: 0.28em;
  }

  .dashboard-opening__title {
    font-size: clamp(3rem, 15vw, 5.15rem);
  }
}


.dashboard-opening .value-matrix {
  padding-top: clamp(2.5rem, 4.5vw, 3.75rem);
}

.dashboard-opening .value-matrix__header {
  max-width: 58rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.35rem);
}

.dashboard-opening .value-matrix__eyebrow {
  margin-bottom: 0.9rem;
  font-size: clamp(0.6rem, 0.72vw, 0.74rem);
  letter-spacing: 0.34em;
}

.dashboard-opening .value-matrix__title {
  max-width: 17ch;
  font-size: clamp(2.45rem, 4.25vw, 4.15rem);
  line-height: 0.95;
  letter-spacing: -0.058em;
}

.dashboard-opening .value-matrix__lede {
  max-width: 50rem;
  margin-top: clamp(0.9rem, 1.45vw, 1.15rem);
  font-size: clamp(0.94rem, 1vw, 1.05rem);
  line-height: 1.62;
}

.dashboard-opening .value-matrix__cards {
  gap: clamp(0.85rem, 1.35vw, 1.05rem);
}

.dashboard-opening .value-card {
  min-height: clamp(23rem, 29vw, 28rem);
  border-color: rgba(96, 165, 250, 0.19);
}

.dashboard-opening .value-card__image {
  object-position: center center;
  opacity: 0.78;
}

.dashboard-opening .value-card:nth-child(1) .value-card__image {
  object-position: 48% 50%;
}

.dashboard-opening .value-card:nth-child(2) .value-card__image {
  object-position: 52% 50%;
}

.dashboard-opening .value-card:nth-child(3) .value-card__image {
  object-position: 54% 50%;
}

.dashboard-opening .value-card__topline {
  inset: 0.85rem 0.85rem auto;
}

.dashboard-opening .value-card__number {
  width: 2.35rem;
  height: 2.35rem;
  font-size: 0.72rem;
}

.dashboard-opening .value-card__status {
  padding: 0.42rem 0.58rem;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
}

.dashboard-opening .value-card__body {
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.85rem;
  padding: 0.88rem;
  border-radius: 1rem;
}

.dashboard-opening .value-card__kicker {
  font-size: 0.54rem;
  letter-spacing: 0.2em;
}

.dashboard-opening .value-card__body h3 {
  margin-top: 0.48rem;
  font-size: clamp(1.05rem, 1.42vw, 1.34rem);
  line-height: 1.04;
}

.dashboard-opening .value-card__body p:not(.value-card__kicker) {
  margin-top: 0.58rem;
  font-size: 0.78rem;
  line-height: 1.48;
}

.dashboard-opening .value-card__metrics {
  gap: 0.45rem;
  margin-top: 0.78rem;
}

.dashboard-opening .value-card__metrics span {
  padding: 0.55rem 0.6rem;
  border-radius: 0.72rem;
  font-size: 0.72rem;
}

.dashboard-opening .value-matrix__principle {
  margin-top: clamp(1.05rem, 2vw, 1.45rem);
  padding: 0.9rem 1rem;
  border-radius: 1rem;
}

.dashboard-opening .value-matrix__principle p {
  font-size: 0.84rem;
  line-height: 1.48;
}

.dashboard-opening .value-matrix__pill {
  padding: 0.62rem 0.78rem;
  font-size: 0.56rem;
}

@media (max-width: 979px) {
  .dashboard-opening .value-card {
    min-height: 27rem;
  }
}

@media (max-width: 560px) {
  .dashboard-opening .value-matrix {
    padding-top: 2.4rem;
  }

  .dashboard-opening .value-matrix__title {
    font-size: clamp(2.05rem, 12vw, 3.25rem);
  }

  .dashboard-opening .value-card {
    min-height: 25rem;
  }
}

/* Value Matrix micro-scale adjustment
   Slightly enlarges the smaller card UI elements for better legibility.
*/

.dashboard-opening .value-card__number {
  width: 2.55rem;
  height: 2.55rem;
  font-size: 0.82rem;
}

.dashboard-opening .value-card__status {
  padding: 0.5rem 0.72rem;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
}

.dashboard-opening .value-card__status::before {
  width: 0.5rem;
  height: 0.5rem;
}

.dashboard-opening .value-card__kicker {
  font-size: 0.64rem;
  letter-spacing: 0.22em;
}

.dashboard-opening .value-card__body h3 {
  font-size: clamp(1.18rem, 1.55vw, 1.46rem);
  line-height: 1.05;
}

.dashboard-opening .value-card__body p:not(.value-card__kicker) {
  font-size: 0.88rem;
  line-height: 1.56;
}

.dashboard-opening .value-card__metrics span {
  font-size: 0.78rem;
  padding: 0.62rem 0.7rem;
}

/* Value Matrix text consistency pass
   Matches the value section lede and principle text to the stronger dashboard-opening body copy.
*/

.dashboard-opening .value-matrix__lede {
  font-size: clamp(1.05rem, 1.16vw, 1.16rem);
  line-height: 1.68;
  color: rgba(226, 236, 255, 0.78);
  letter-spacing: -0.012em;
}

.dashboard-opening .value-matrix__principle p {
  font-size: 1rem;
  line-height: 1.64;
  color: rgba(226, 236, 255, 0.74);
}

.dashboard-opening .value-matrix__principle strong {
  font-weight: 700;
}

.dashboard-opening .value-card__body p:not(.value-card__kicker) {
  font-size: 1rem;
  line-height: 1.64;
}

.dashboard-opening .value-card__body h3 {
  font-size: clamp(1.24rem, 1.62vw, 1.52rem);
  line-height: 1.08;
}

.dashboard-opening .value-card__kicker {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
}

@media (max-width: 560px) {
  .dashboard-opening .value-matrix__lede,
  .dashboard-opening .value-matrix__principle p,
  .dashboard-opening .value-card__body p:not(.value-card__kicker) {
    font-size: 0.96rem;
  }
}

/* Value card glass-panel test pass
   Lightens the inner card body so it matches the hero snapshot glass style.
*/

.dashboard-opening .value-card__body {
  border: 1px solid rgba(148, 190, 255, 0.17);
  background:
    radial-gradient(circle at 82% 18%, rgba(129, 140, 248, 0.115), transparent 40%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.024)),
    rgba(14, 24, 46, 0.6);
  box-shadow:
    0 18px 44px rgba(2, 8, 23, 0.34),
    0 0 20px rgba(96, 165, 250, 0.028),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -14px 28px rgba(2, 6, 23, 0.16);
  backdrop-filter: blur(var(--blur-low)) saturate(var(--sat-low));
  -webkit-backdrop-filter: blur(var(--blur-low)) saturate(var(--sat-low));
}

.dashboard-opening .value-card__body:hover {
  background:
    radial-gradient(circle at 82% 18%, rgba(129, 140, 248, 0.11), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,0.058), rgba(255,255,255,0.022)),
    rgba(16, 28, 52, 0.58);
}

.dashboard-opening .value-card__body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 32%),
    radial-gradient(circle at 14% 8%, rgba(125, 211, 252, 0.05), transparent 34%);
  opacity: 0.34;
}

.dashboard-opening .value-card__kicker,
.dashboard-opening .value-card__body h3,
.dashboard-opening .value-card__body p,
.dashboard-opening .value-card__metrics {
  position: relative;
  z-index: 1;
}

.dashboard-opening .value-card__body p:not(.value-card__kicker) {
  color: rgba(232, 238, 255, 0.76);
}

/* Value card image lift pass */

.dashboard-opening .value-card__image {
  opacity: 1;
  filter: brightness(1.14) contrast(1.06) saturate(1.1);
}

.dashboard-opening .value-card:hover .value-card__image {
  opacity: 0.88;
  filter: brightness(1.04) contrast(1.08) saturate(1.02);
}

.dashboard-opening .value-card__shade {
  background:
    linear-gradient(
      180deg,
      rgba(2, 6, 23, 0.04),
      rgba(2, 6, 23, 0.18) 44%,
      rgba(2, 6, 23, 0.48)
    ),
    radial-gradient(
      circle at 50% 16%,
      rgba(56, 189, 248, 0.1),
      transparent 34%
    );
}

.dashboard-opening .value-card:hover .value-card__shade {
  background:
    linear-gradient(
      180deg,
      rgba(2, 6, 23, 0.18),
      rgba(2, 6, 23, 0.42) 44%,
      rgba(2, 6, 23, 0.72)
    ),
    radial-gradient(
      circle at 50% 16%,
      rgba(56, 189, 248, 0.08),
      transparent 34%
    );
}


/* Systems Preview section
   Homepage post-value systems map. Kept here instead of inline HTML so the section is easier to refine.
*/

/* ─── Nexus chip indicator tokens — global resize point ────────────────────
   Change --nexus-chip-dot or --nexus-chip-gap here to rescale ALL
   chip/tag indicators site-wide. Component scopes may override these
   locally for size-proportionate chips (see automation-scenes__system).
   ─────────────────────────────────────────────────────────────────────── */
:root {
  --nexus-chip-dot: 8px;
  --nexus-chip-gap: 0.42rem;
}

.systems-preview {
  position: relative;
  z-index: 1;
  padding: clamp(3.4rem, 6vw, 5.25rem) 0 clamp(3rem, 5vw, 4.5rem);
  background: transparent !important;
}

.systems-preview__inner {
  width: var(--nexus-card-rail);
  max-width: 72rem;
  margin-inline: auto;
}

.systems-preview__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.38fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: end;
  margin-bottom: clamp(1.35rem, 2.8vw, 2.2rem);
}

.systems-preview__eyebrow {
  margin: 0 0 0.9rem;
  color: #90d8ff;
  font-size: clamp(0.64rem, 0.76vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.34em;
  line-height: 1.3;
  text-transform: uppercase;
}

.systems-preview__title {
  max-width: 15ch;
  margin: 0;
  color: #f7fbff;
  font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.5rem, 4.7vw, 4.6rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.064em;
  text-wrap: balance;
}

.systems-preview__title span {
  display: block;
  padding-bottom: 0.1em;
  color: transparent;
  background: linear-gradient(100deg, #84d3ff 0%, #95baff 48%, #c7a9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.systems-preview__text {
  margin: 0;
  max-width: 30ch;
  color: rgba(226, 236, 255, 0.76);
  font-size: clamp(1rem, 1.14vw, 1.14rem);
  line-height: 1.74;
  letter-spacing: -0.015em;
}

.systems-preview__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1rem, 2vw, 1.25rem);
  align-items: stretch;
}

.systems-preview__navigator,
.systems-preview__stage,
.systems-preview__dock {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 190, 255, 0.16);
  border-radius: clamp(1.25rem, 2vw, 1.65rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.012)),
    linear-gradient(135deg, rgba(16, 28, 52, 0.78), rgba(8, 15, 30, 0.68));
  box-shadow:
    0 24px 58px rgba(2, 8, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.068);
  backdrop-filter: blur(var(--blur-mid)) saturate(var(--sat-base));
  -webkit-backdrop-filter: blur(var(--blur-mid)) saturate(var(--sat-base));
}

.systems-preview__navigator::before,
.systems-preview__stage::before,
.systems-preview__dock::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.09), transparent 46%),
    radial-gradient(circle at 88% 100%, rgba(115, 125, 248, 0.13), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 42%);
  opacity: 0.86;
}

.systems-preview__navigator > *,
.systems-preview__stage > *,
.systems-preview__dock > * {
  position: relative;
  z-index: 1;
}

.systems-preview__navigator {
  padding: clamp(1rem, 2vw, 1.25rem);
  min-height: 29rem;
}

.systems-preview__navigator h3,
.systems-preview__stage h3 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.systems-preview__navigator p,
.systems-preview__stage p {
  margin: 0.7rem 0 0;
  color: rgba(203, 213, 225, 0.74);
  font-size: 0.94rem;
  line-height: 1.62;
}

.systems-preview__list {
  display: grid;
  gap: 0.36rem;
  margin-top: 1.15rem;
}

.systems-preview__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.82rem;
  align-items: center;
  min-height: 4.5rem;
  padding: 0.56rem 0.72rem 0.56rem 0.6rem;
  border: 1px solid rgba(148, 190, 255, 0.07);
  border-radius: 0.88rem;
  background: rgba(2, 6, 23, 0.28);
  cursor: pointer;
  transition:
    border-color 200ms var(--ease-base),
    background   200ms var(--ease-base),
    box-shadow   200ms var(--ease-base);
}

.systems-preview__item:hover {
  border-color: rgba(125, 211, 252, 0.22);
  background: rgba(4, 10, 32, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(125, 211, 252, 0.08),
    0 0 0 1px rgba(125, 211, 252, 0.08),
    0 3px 18px rgba(56, 189, 248, 0.08);
}

.systems-preview__item:hover .systems-preview__index {
  border-color: rgba(125, 211, 252, 0.32);
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.18), 0 0 4px rgba(56, 189, 248, 0.10);
  transform: translateY(-1px);
}

.systems-preview__item:hover .systems-preview__state {
  transform: translateX(2px);
}

/* Active / selected row */
.systems-preview__item--active {
  border-color: rgba(125, 211, 252, 0.38);
  background: rgba(4, 12, 42, 0.74);
  box-shadow:
    inset 3px 0 0 rgba(125, 211, 252, 0.58),   /* left-edge indicator rail */
    inset 0 1px 0 rgba(125, 211, 252, 0.12),    /* top shimmer */
    0 0 0 1px rgba(125, 211, 252, 0.14),        /* outer border glow */
    0 4px 28px rgba(56, 189, 248, 0.13),        /* outer glow */
    0 0 52px rgba(56, 189, 248, 0.06);          /* wide ambient bloom */
}

.systems-preview__item--active .systems-preview__index {
  border-color: rgba(125, 211, 252, 0.54);
  color: rgba(190, 232, 255, 1);
  background: rgba(10, 28, 60, 0.78);
  box-shadow:
    0 0 0 5px rgba(56, 189, 248, 0.08),
    0 0 26px rgba(56, 189, 248, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.systems-preview__item--active strong {
  color: rgba(240, 250, 255, 1);
}

.systems-preview__item--active .systems-preview__state {
  transform: translateX(2px);
}

/* Prevent hover overriding active when both apply */
.systems-preview__item--active:hover {
  border-color: rgba(125, 211, 252, 0.44);
  background: rgba(4, 12, 44, 0.80);
}

.systems-preview__index {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.14);
  background: rgba(8, 18, 44, 0.56);
  color: rgba(147, 210, 247, 0.78);
  transition: border-color 200ms var(--ease-base), box-shadow 200ms var(--ease-base), transform 200ms var(--ease-base);
}

.systems-preview__index svg {
  width: 1.18rem;
  height: 1.18rem;
  stroke-width: 1.65;
  flex-shrink: 0;
}

/* Optical centering — geometric center ≠ visual mass center for these three icons */
.systems-preview__item:nth-child(1) .systems-preview__index svg { transform: translateY(0.5px); }  /* lightbulb: base detail at bottom lifts visual mass */
.systems-preview__item:nth-child(4) .systems-preview__index svg { transform: translateY(0.5px); }  /* shield: wide crown, narrow base */
.systems-preview__item:nth-child(6) .systems-preview__index svg { transform: translateY(-0.5px); } /* bot: antenna pulls geometric center high */

.systems-preview__item strong {
  display: block;
  color: #f8fbff;
  font-size: 0.96rem;
  letter-spacing: -0.018em;
}

.systems-preview__item span:not(.systems-preview__index):not(.systems-preview__state) {
  display: block;
  margin-top: 0.12rem;
  color: rgba(203, 213, 225, 0.66);
  font-size: 0.78rem;
}

.systems-preview__state {
  color: rgba(125, 211, 252, 0.88);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 200ms var(--ease-base), opacity 110ms ease;
}

/* Inactive rows: muted neutral; JS overrides during type animation via style.opacity */
.systems-preview__item:not(.systems-preview__item--active) .systems-preview__state {
  color: rgba(148, 190, 255, 0.42);
}

.systems-preview__state--active      { color: rgba(103, 232, 249, 0.80); }
.systems-preview__state--running     { color: rgba(82,  162, 255, 0.88); }
.systems-preview__state--online      { color: rgba(198, 234, 255, 0.90); }
.systems-preview__state--armed       { color: rgba(186, 224, 252, 0.68); }
/* Per-system semantic status colours — apply on active rows via higher-specificity inactive override */
.systems-preview__state--scene-ready { color: rgba(251, 191, 36,  0.84); }
.systems-preview__state--balanced    { color: rgba(52,  211, 153, 0.82); }
.systems-preview__state--immersive   { color: rgba(139, 92,  246, 0.88); }
.systems-preview__state--streaming   { color: rgba(96,  165, 250, 0.86); }
.systems-preview__state--sequencing  { color: rgba(34,  211, 238, 0.90); }

.systems-preview__stage {
  min-height: 29rem;
  display: grid;
  grid-template-rows: 1fr auto;
}

.systems-preview__visual {
  position: relative;
  min-height: 20rem;
  overflow: hidden;
}

.systems-preview__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.06) contrast(1.04) saturate(1.08);
  transform: scale(1.045);
}

/* Image slots — front fades via CSS transition; back wipes in via animation */
.systems-preview__visual .sp-stage-img {
  opacity: 0;
}

.systems-preview__visual .sp-stage-img--front {
  z-index: 1;
  transition: opacity 680ms cubic-bezier(0.4, 0, 0.2, 1);
}

.systems-preview__visual .sp-stage-img--back {
  z-index: 0;
  transition: none;
}

.systems-preview__visual .sp-stage-img.is-active {
  opacity: 1;
}

/* Diagonal wipe — back rises to z:2 and is revealed by clip-path sweep (~45°) */
.systems-preview__visual .sp-stage-img--back.is-wiping {
  z-index: 2;
  animation: sp-wipe-in 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.systems-preview__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(56, 189, 248, 0.045) 44%,
    rgba(56, 189, 248, 0.055) 50%,
    rgba(56, 189, 248, 0.045) 56%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: 0;
  animation: sp-scan 14s ease-in-out infinite;
}

.systems-preview__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(2, 6, 23, 0.72), rgba(2, 6, 23, 0.12) 52%, rgba(2, 6, 23, 0.68)),
    radial-gradient(circle at 72% 18%, rgba(56, 189, 248, 0.09), transparent 36%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.04), rgba(2, 6, 23, 0.56));
}

@keyframes sp-scan {
  0%          { transform: translateY(-110%); opacity: 0; }
  10%         { opacity: 1; }
  90%         { opacity: 1; }
  100%        { transform: translateY(110%); opacity: 0; }
}

/* Diagonal wipe — clip-path parallelogram sweeps left→right at ≈45°.
   Top-right corner travels from -20% → 110%, bottom-right from -100% → 30%:
   that 80% horizontal offset over 100% height ≈ 46° at a 4:3 stage aspect ratio. */
@keyframes sp-wipe-in {
  0%   {
    clip-path: polygon(0% 0%, -20% 0%, -100% 100%, 0% 100%);
    opacity: 1;
  }
  100% {
    clip-path: polygon(0% 0%,  110% 0%,    30% 100%, 0% 100%);
    opacity: 1;
  }
}

@keyframes sp-node-breathe {
  0%, 100%    { opacity: 0.76; }
  50%         { opacity: 1; }
}

@keyframes sp-dot-pulse {
  0%, 100%    { box-shadow: 0 0 6px rgba(125, 211, 252, 0.24); }
  50%         { box-shadow: 0 0 10px rgba(125, 211, 252, 0.42); }
}

@media (prefers-reduced-motion: reduce) {
  .systems-preview__visual::before,
  .systems-preview__node,
  .systems-preview__node::before,
  .systems-preview__chip::before,
  .automation-scenes__system::before,
  .value-card__metrics span::before {
    animation: none !important;
  }

  .systems-preview__item:hover .systems-preview__index,
  .systems-preview__item:hover .systems-preview__state {
    transform: none;
  }

  /* Skip wipe — JS handles instant swap for reduced-motion */
  .systems-preview__visual .sp-stage-img--back.is-wiping {
    animation: none !important;
  }

  .systems-preview__visual .sp-stage-img--front {
    transition: opacity 80ms linear;
  }
}

.systems-preview__nodes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.systems-preview__node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid rgba(148, 190, 255, 0.18);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.56);
  padding: 0.48rem 0.62rem;
  color: rgba(232, 238, 255, 0.9);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(var(--blur-card));
  -webkit-backdrop-filter: blur(var(--blur-card));
}

.systems-preview__node {
  animation: sp-node-breathe 5s ease-in-out infinite;
}
.systems-preview__node--two   { animation-delay: 1.25s; }
.systems-preview__node--three { animation-delay: 2.5s; }
.systems-preview__node--four  { animation-delay: 3.75s; }

.systems-preview__node::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #7dd3fc;
  box-shadow: 0 0 7px rgba(125, 211, 252, 0.28);
  animation: sp-dot-pulse 5s ease-in-out infinite;
}
.systems-preview__node--two::before   { animation-delay: 1.25s; }
.systems-preview__node--three::before { animation-delay: 2.5s; }
.systems-preview__node--four::before  { animation-delay: 3.75s; }

.systems-preview__node--one { left: 8%; top: 16%; }
.systems-preview__node--two { right: 10%; top: 22%; }
.systems-preview__node--three { left: 14%; bottom: 26%; }
.systems-preview__node--four { right: 13%; bottom: 18%; }

.systems-preview__stage-copy {
  padding: clamp(1rem, 2vw, 1.25rem);
  border-top: 1px solid rgba(148, 190, 255, 0.13);
  background: rgba(2, 6, 23, 0.18);
}

.systems-preview__stage-copy h3 {
  max-width: 16ch;
}

.systems-preview__stage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.systems-preview__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--nexus-chip-gap);
  border: 1px solid rgba(148, 190, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  padding: 0.5rem 0.68rem 0.5rem 0.54rem;
  color: rgba(226, 236, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 700;
}

.systems-preview__chip::before {
  content: "";
  display: block;
  flex-shrink: 0;
}

/* Bespoke design — precision diamond, icy white-blue, measured breathe */
.systems-preview__chip--bespoke::before {
  width: var(--nexus-chip-dot);
  height: var(--nexus-chip-dot);
  background: rgba(198, 234, 255, 0.92);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter: drop-shadow(0 0 4px rgba(198, 234, 255, 0.65));
  animation: sp-chip-breathe 3.4s ease-in-out infinite;
}

/* Fully integrated — orbit ring, violet, enclosed hub glow (+1px for optical mass parity) */
.systems-preview__chip--integrated::before {
  width: calc(var(--nexus-chip-dot) + 1px);
  height: calc(var(--nexus-chip-dot) + 1px);
  border: 1.5px solid rgba(129, 140, 248, 0.82);
  border-radius: 50%;
  background: rgba(129, 140, 248, 0.20);
  box-shadow: 0 0 9px rgba(129, 140, 248, 0.40);
  animation: sp-chip-breathe 4.2s ease-in-out infinite 0.7s;
}

/* Remote access — cyan sonar dot, expanding ring pulse */
.systems-preview__chip--remote::before {
  width: var(--nexus-chip-dot);
  height: var(--nexus-chip-dot);
  background: rgba(56, 189, 248, 0.92);
  border-radius: 50%;
  animation: sp-chip-signal 2.6s ease-out infinite 0.3s;
}

/* Lifetime support — filled teal dot with double halo, slowest breathe */
.systems-preview__chip--support::before {
  width: var(--nexus-chip-dot);
  height: var(--nexus-chip-dot);
  background: rgba(103, 232, 249, 0.76);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.20), 0 0 10px rgba(103, 232, 249, 0.28);
  animation: sp-chip-breathe 5.6s ease-in-out infinite 1.5s;
}

@keyframes sp-chip-breathe {
  0%, 100% { opacity: 0.82; }
  50%       { opacity: 1; }
}

@keyframes sp-chip-signal {
  0%   { box-shadow: 0 0 0 0   rgba(56, 189, 248, 0.50); }
  65%  { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); }
  100% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); }
}

.systems-preview__dock {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.72rem 0.85rem;
}

.systems-preview__dock-item {
  display: flex;
  flex-direction: column;
  min-height: 4.2rem;
  border: 1px solid rgba(148, 190, 255, 0.11);
  border-radius: 0.95rem;
  background: rgba(2, 6, 23, 0.3);
  padding: 0.6rem 0.72rem;
}

.systems-preview__dock-item > svg {
  width: 0.78rem;
  height: 0.78rem;
  stroke-width: 1.5;
  color: rgba(125, 211, 252, 0.42);
  flex-shrink: 0;
  margin-bottom: auto;
}

.systems-preview__dock-item span {
  display: block;
  color: rgba(143, 179, 217, 0.86);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
}

.systems-preview__dock-item strong {
  display: block;
  color: #f8fbff;
  font-size: 0.98rem;
  letter-spacing: -0.025em;
}

@media (max-width: 980px) {
  .systems-preview__head,
  .systems-preview__grid {
    grid-template-columns: 1fr;
  }

  .systems-preview__navigator,
  .systems-preview__stage {
    min-height: auto;
  }

  .systems-preview__dock {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .systems-preview__title {
    font-size: clamp(2.2rem, 12vw, 3.4rem);
  }

  .systems-preview__item {
    grid-template-columns: auto 1fr;
  }

  .systems-preview__state {
    grid-column: 2;
  }

  .systems-preview__dock {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================
   Automation Scenes — Daily Intelligence
   nth-of-type(5): inherits the purple/cyan/orange atmospheric
   glow pre-defined in background.css (same rule tier as value-matrix).
   ========================================= */

.automation-scenes {
  position: relative;
  z-index: 1;
  padding: clamp(3.4rem, 5.5vw, 5rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.automation-scenes__inner {
  width: var(--nexus-card-rail);
  max-width: 72rem;
  margin-inline: auto;
}

.automation-scenes__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.42fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: end;
  margin-bottom: clamp(1.75rem, 3.2vw, 2.5rem);
}

.automation-scenes__eyebrow {
  margin: 0 0 0.9rem;
  color: #90d8ff;
  font-size: clamp(0.64rem, 0.76vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.34em;
  line-height: 1.3;
  text-transform: uppercase;
}

.automation-scenes__title {
  max-width: 20ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.98);
  font-size: clamp(2.2rem, 3.8vw, 3.8rem);
  font-weight: 850;
  line-height: 0.96;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.automation-scenes__lede {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  line-height: 1.66;
}

.automation-scenes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

.automation-scenes__card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 190, 255, 0.12);
  border-radius: var(--radius-l);
  background:
    linear-gradient(180deg, rgba(10, 17, 38, 0.78), rgba(6, 12, 30, 0.74)),
    linear-gradient(90deg, rgba(99, 102, 241, 0.04), rgba(34, 211, 238, 0.03));
  box-shadow:
    0 16px 44px rgba(2, 8, 23, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(var(--blur-panel)) saturate(var(--sat-panel));
  -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(var(--sat-panel));
  padding: clamp(1.55rem, 2.2vw, 2rem);
  transition:
    box-shadow var(--duration-slow) var(--ease-in-base),
    border-color var(--duration-base) var(--ease-base),
    transform var(--duration-base) var(--ease-base);
}

/* Glass surface sheen — mirrors panels.css feature-card::before pattern */
.automation-scenes__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.06), transparent 80%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 45%);
  pointer-events: none;
}

.automation-scenes__card:hover {
  transform: var(--hover-lift-base);
  border-color: rgba(148, 190, 255, 0.22);
  box-shadow:
    0 22px 56px rgba(2, 8, 23, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.automation-scenes__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: clamp(1.15rem, 1.8vw, 1.55rem);
}

.automation-scenes__num,
.automation-scenes__time {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0 0.7rem;
  border: 1px solid rgba(148, 190, 255, 0.11);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.42);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.automation-scenes__num {
  color: rgba(226, 232, 240, 0.76);
}

.automation-scenes__time {
  color: rgba(137, 222, 255, 0.82);
}

.automation-scenes__name {
  margin: 0 0 clamp(0.55rem, 0.9vw, 0.85rem);
  font-size: clamp(1.45rem, 2.1vw, 2.05rem);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.044em;
  color: rgba(255, 255, 255, 0.98);
}

.automation-scenes__desc {
  margin: 0 0 clamp(1.1rem, 1.75vw, 1.55rem);
  max-width: 30rem;
  font-size: clamp(0.92rem, 1.02vw, 1rem);
  line-height: 1.6;
  color: rgba(226, 232, 240, 0.66);
}

.automation-scenes__systems {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.automation-scenes__system {
  /* component-level token overrides — smaller chip, proportionate indicator */
  --nexus-chip-dot: 6px;
  --nexus-chip-gap: 0.36rem;

  display: inline-flex;
  align-items: center;
  gap: var(--nexus-chip-gap);
  height: 1.65rem;
  padding: 0 0.65rem 0 0.5rem;
  border: 1px solid rgba(148, 190, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.038);
  color: rgba(226, 232, 240, 0.62);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.automation-scenes__system::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: var(--nexus-chip-dot);
  height: var(--nexus-chip-dot);
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.78);
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.26);
  animation: sp-chip-breathe 3.8s ease-in-out infinite;
}

/* shape variation — 4-shape rotation gives each card row visual rhythm without markup changes */
.automation-scenes__system:nth-child(1)::before {
  border-radius: 2px;
  background: rgba(198, 234, 255, 0.86);
  box-shadow: 0 0 5px rgba(198, 234, 255, 0.26);
}
.automation-scenes__system:nth-child(2)::before {
  border-radius: 50%;
  background: rgba(129, 140, 248, 0.14);
  border: 1.5px solid rgba(129, 140, 248, 0.82);
  box-shadow: 0 0 6px rgba(129, 140, 248, 0.28);
  animation-delay: 0.95s;
}
.automation-scenes__system:nth-child(3)::before {
  border-radius: 0;
  background: rgba(56, 189, 248, 0.90);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: none;
  filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.46));
  animation-delay: 1.90s;
}
.automation-scenes__system:nth-child(4)::before {
  border-radius: 50%;
  background: rgba(103, 232, 249, 0.78);
  box-shadow: 0 0 0 1.5px rgba(103, 232, 249, 0.18), 0 0 6px rgba(103, 232, 249, 0.22);
  animation-delay: 2.85s;
}

@media (max-width: 900px) {
  .automation-scenes__head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .automation-scenes__grid {
    grid-template-columns: 1fr;
  }

  .automation-scenes__card:hover {
    transform: none;
  }
}

/* ===== Migrated from index.html inline page styles ===== */
    .page-home,
    .page-home .site-shell,
    .page-home .site-main {
      background:
        radial-gradient(circle at 12% 10%, rgba(82,184,255,.13), transparent 30%),
        radial-gradient(circle at 74% 26%, rgba(133,108,255,.11), transparent 38%),
        radial-gradient(ellipse at 50% 72%, rgba(83,184,255,.07), transparent 64%),
        linear-gradient(112deg,#030e1f 0%,#050d22 54%,#080922 100%) !important;
    }

    .page-home .site-main {
      position: relative;
      isolation: isolate;
      overflow-x: clip;
      overflow-y: visible;
    }

    .page-home .site-main::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(148,190,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,190,255,.04) 1px, transparent 1px),
        linear-gradient(rgba(148,190,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,190,255,.018) 1px, transparent 1px);
      background-size: 58px 58px, 58px 58px, 14px 14px, 14px 14px;
      mask-image: linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.76) 58%, rgba(0,0,0,.36));
      opacity: .9;
    }

    .page-home .site-main > section,
    .page-home .site-main > section > section {
      position: relative;
      z-index: 1;
    }

    .page-home .site-main > .intro-strip,
    .page-home .site-main > .section.intro-strip {
      border-top: 0 !important;
      box-shadow: none !important;
    }

    .page-home .site-main > .intro-strip::before,
    .page-home .site-main > .intro-strip::after,
    .page-home .site-main > .section.intro-strip::before,
    .page-home .site-main > .section.intro-strip::after {
      content: none !important;
      display: none !important;
    }

    .hero-home {
      background: transparent !important;
    }

    .dashboard-opening,
    .dashboard-panels,
    .dashboard-opening .dashboard-panels,
    .ops-preview,
    .intro-strip,
    .section.intro-strip {
      background: transparent;
      box-shadow: none;
    }

    .dashboard-opening::before,
    .dashboard-opening::after,
    .dashboard-panels::before,
    .dashboard-panels::after,
    .dashboard-panels__veil,
    .dashboard-opening .dashboard-panels__veil,
    .intro-strip::before,
    .intro-strip::after {
      content: none !important;
      display: none !important;
    }

    .dashboard-opening {
      margin: 0;
      padding-top: clamp(3.25rem, 5.4vw, 5rem);
      padding-bottom: clamp(3.25rem, 5vw, 4.25rem);
      isolation: auto;
      border-top: 0;
      border-bottom: 0;
    }

    .dashboard-opening .dashboard-panels {
      margin: 0;
      padding-top: clamp(1.25rem, 2.6vw, 2rem);
    }


    .intro-strip {
      margin-top: 0;
      padding-top: clamp(2.65rem, 4.2vw, 3.65rem);
    }



/* Dashboard opening luxury spacing pass
   Reduces the empty void, keeps the heading and three-card row visually connected,
   and aligns the section to the same brochure-width rail.
*/

.dashboard-opening__inner,
.dashboard-opening .dashboard-panels__inner,
.intro-strip__inner {
  width: min(100% - 2rem, 72rem);
  max-width: 72rem;
  margin-inline: auto;
}

.dashboard-opening__inner {
  display: block;
}

.dashboard-opening__text {
  max-width: 58rem;
  margin-top: clamp(1.25rem, 1.95vw, 1.65rem);
}


.dashboard-opening .intro-strip__grid {
  gap: clamp(1rem, 1.6vw, 1.25rem);
  border-top: 0 !important;
}

.dashboard-opening + .intro-strip,
.dashboard-opening .value-matrix + .intro-strip {
  margin-top: 0;
}

@media (min-width: 980px) {
  .dashboard-opening {
    padding-top: clamp(3.5rem, 5vw, 4.8rem);
  }
}

@media (max-width: 979px) {
  .dashboard-opening__inner,
  .dashboard-opening .dashboard-panels__inner,
  .intro-strip__inner {
    width: min(100% - 1.5rem, 74rem);
  }
}



/* Remove borders and dividers from intro/value-matrix sections inside dashboard-opening */

/* Dashboard opening divider final correction
   Keeps only the single underline under the intro copy and removes the faint rail above cards.
*/
.dashboard-opening .intro-strip,
.dashboard-opening .intro-strip__inner,
.dashboard-opening .intro-strip__grid,
.dashboard-opening .dashboard-panels,
.dashboard-opening .dashboard-panels__inner {
  border-top: 0 !important;
  box-shadow: none !important;
}

.dashboard-opening .intro-strip::before,
.dashboard-opening .intro-strip::after,
.dashboard-opening .intro-strip__inner::before,
.dashboard-opening .intro-strip__inner::after,
.dashboard-opening .intro-strip__grid::before,
.dashboard-opening .intro-strip__grid::after,
.dashboard-opening .dashboard-panels::before,
.dashboard-opening .dashboard-panels::after,
.dashboard-opening .dashboard-panels__inner::before,
.dashboard-opening .dashboard-panels__inner::after {
  content: none !important;
  display: none !important;
}



/* Dashboard opening line cleanup
   Keeps one editorial underline below the opening paragraph only.
   Removes the accidental divider directly above the three feature panels.
*/
.page-home .site-main > .intro-strip,
.page-home .site-main > .section.intro-strip,
.dashboard-opening--compact + .intro-strip,
.dashboard-opening--compact + .section.intro-strip {
  border-top: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.page-home .site-main > .intro-strip::before,
.page-home .site-main > .intro-strip::after,
.page-home .site-main > .section.intro-strip::before,
.page-home .site-main > .section.intro-strip::after,
.dashboard-opening--compact + .intro-strip::before,
.dashboard-opening--compact + .intro-strip::after,
.dashboard-opening--compact + .section.intro-strip::before,
.dashboard-opening--compact + .section.intro-strip::after {
  content: none !important;
  display: none !important;
}

.dashboard-opening__inner::before,
.dashboard-opening__inner::after,
.dashboard-opening__copy::before,
.dashboard-opening__copy::after {
  content: none !important;
  display: none !important;
}

.dashboard-opening__text::before {
  content: none !important;
  display: none !important;
}

/* Final lower-rail suppression
   This catches the remaining faint line above the three feature panels,
   including rules coming from command-bridge.css or migrated inline styles.
*/
.page-home .dashboard-opening--compact,
.page-home .dashboard-opening,
.page-home .dashboard-opening + .intro-strip,
.page-home .site-main > .intro-strip,
.page-home .site-main > .section.intro-strip {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.page-home .dashboard-opening--compact::before,
.page-home .dashboard-opening--compact::after,
.page-home .dashboard-opening::before,
.page-home .dashboard-opening::after,
.page-home .dashboard-opening + .intro-strip::before,
.page-home .dashboard-opening + .intro-strip::after,
.page-home .site-main > .intro-strip::before,
.page-home .site-main > .intro-strip::after,
.page-home .site-main > .section.intro-strip::before,
.page-home .site-main > .section.intro-strip::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}


.page-home .dashboard-opening__text::after {
  margin-top: clamp(0.95rem, 1.25vw, 1.2rem) !important;
}

.page-home .value-matrix__inner,
.page-home .command-bridge--homepage .command-bridge__inner,
.page-home .dashboard-panels__inner,
.page-home .ops-preview__inner,
.page-home .intro-strip__grid {
  box-sizing: border-box !important;
  width: var(--nexus-wide-rail) !important;
  max-width: 72rem !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

.page-home .value-matrix {
  padding-top: clamp(3rem, 4.5vw, 4.5rem) !important;
  padding-bottom: clamp(2rem, 3vw, 3rem) !important;
}

.page-home .value-matrix + .command-bridge--homepage {
  margin-top: clamp(0.45rem, 0.9vw, 0.9rem) !important;
}

.page-home .command-bridge--homepage {
  padding-top: clamp(0.45rem, 0.9vw, 0.9rem) !important;
  padding-bottom: clamp(0.55rem, 1vw, 1rem) !important;
}

.page-home .command-bridge--homepage .command-bridge__panel {
  width: 100% !important;
  margin-inline: 0 !important;
  margin-top: clamp(0.35rem, 0.7vw, 0.75rem) !important;
}

.page-home .command-bridge--homepage + .dashboard-panels {
  margin-top: clamp(0.45rem, 0.9vw, 0.95rem) !important;
}

.page-home .dashboard-panels {
  padding-top: clamp(0.25rem, 0.65vw, 0.7rem) !important;
  padding-bottom: clamp(0.4rem, 0.9vw, 0.95rem) !important;
  overflow: visible !important;
}

.page-home .dashboard-panels__inner {
  display: grid !important;
  justify-items: center !important;
  align-items: start !important;
  gap: clamp(0.55rem, 1vw, 1rem) !important;
}

.page-home .dashboard-panels .dashboard-panel--primary,
.page-home .dashboard-panels .nexus-climate-panel,
.page-home .nexus-climate-controls-intro,
.page-home .nexus-climate-controls {
  width: var(--nexus-climate-rail) !important;
  max-width: 62rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

.page-home .dashboard-panels .nexus-climate-panel {
  min-height: clamp(22rem, 28vw, 27rem) !important;
  border-radius: clamp(1.3rem, 1.9vw, 1.9rem) !important;
  box-shadow:
    0 2.8rem 6rem rgba(0, 0, 0, 0.32),
    0 0 62px rgba(56, 189, 248, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.page-home .nexus-climate-panel__copy {
  padding-left: 0 !important;
}

.page-home .nexus-climate-panel__text {
  max-width: 21rem !important;
}

.page-home .nexus-climate-controls-intro {
  margin-top: clamp(0.45rem, 0.9vw, 0.85rem) !important;
  padding-inline: 0 !important;
}

.page-home .nexus-climate-controls-intro + .nexus-climate-controls,
.page-home .nexus-climate-controls {
  margin-top: clamp(0.65rem, 1.1vw, 1rem) !important;
  padding-inline: 0 !important;
}

.page-home .dashboard-panels + .ops-preview {
  margin-top: clamp(1.5rem, 2.6vw, 2.8rem) !important;
}

.page-home .ops-preview {
  padding-top: clamp(2rem, 3vw, 3.25rem) !important;
  padding-bottom: clamp(2.5rem, 4vw, 3.75rem) !important;
}

.page-home .ops-preview__head {
  margin-bottom: clamp(1.35rem, 2vw, 1.85rem) !important;
}

.page-home .ops-preview__title {
  max-width: 13.5ch !important;
  font-size: clamp(2.35rem, 3.85vw, 4.15rem) !important;
  line-height: 0.92 !important;
}

.page-home .ops-preview__visual,
.page-home .ops-preview__console {
  min-height: clamp(18.5rem, 23vw, 22.5rem) !important;
}

/* --nexus-wide-rail SOLE MOBILE OVERRIDE
   This is the only place --nexus-wide-rail receives a mobile value.
   The base declaration lives in tokens.css (desktop default: clamp 7vw gutter, 72rem max).
   This override narrows the gutter to a flat 2rem on viewports ≤ 900px, affecting:
   value matrix, command bridge inner, dashboard panels, ops preview, and intro strip.

   DO NOT remove this :root block as "dead code." It resembles the dead :root blocks
   that were cleaned up in Phase 2, but unlike those, no later-loading file overrides
   this value at ≤900px with !important. Remove it and all those sections go full-width
   on mobile with no controlled gutter. */
@media (max-width: 900px) {
  :root {
    --nexus-wide-rail: min(100% - 2rem, 72rem);
  }

  .page-home .value-matrix__inner,
  .page-home .command-bridge--homepage .command-bridge__inner,
  .page-home .dashboard-panels__inner,
  .page-home .ops-preview__inner,
  .page-home .intro-strip__grid,
  .page-home .dashboard-panels .dashboard-panel--primary,
  .page-home .dashboard-panels .nexus-climate-panel,
  .page-home .nexus-climate-controls-intro,
  .page-home .nexus-climate-controls {
    width: min(100% - 2rem, 72rem) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  .page-home .command-bridge--homepage .command-bridge__header,
  .page-home .ops-preview__head,
  .page-home .ops-preview__layout {
    grid-template-columns: 1fr !important;
  }

  .page-home .dashboard-panels + .ops-preview {
    margin-top: clamp(1rem, 4vw, 1.8rem) !important;
  }
}

/* =========================================
   FEATURED SYSTEM — Installation showcase
   Split grid: editorial copy left, cinematic visual column right.
   Visual column: hero media card with status badges + 3-up mini strip.
   nth-of-type(5) in <main>: inherits purple/cyan/orange atmospheric
   glow from background.css (same rule as value-matrix).
   Breakpoint mirrors systems-preview at 980px.
   ========================================= */

.featured-system {
  position: relative;
  z-index: 1;
  padding: clamp(3.4rem, 6vw, 5.25rem) 0 clamp(3rem, 5vw, 4.5rem);
}

/* Colour-temperature deepening layer — scoped to this section only.
   Navy ellipse suppresses global cyan wash on the left (copy column).
   Warm anchors at <5% opacity are imperceptible as hue but register
   as spectral depth, lifting the section out of flat electric-blue. */
.featured-system::after {
  content: '';
  position: absolute;
  inset: -6% -3%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 76% at 14% 50%, rgba(2, 5, 22, 0.58), transparent 100%),
    radial-gradient(circle at 17% 78%, rgba(144, 60, 14, 0.044), transparent 34%),
    radial-gradient(circle at 44% 84%, rgba(108, 44, 10, 0.030), transparent 28%),
    radial-gradient(ellipse 56% 46% at 52% 60%, rgba(2, 4, 18, 0.32), transparent 100%);
  filter: blur(52px);
}

.featured-system__inner {
  width: var(--nexus-card-rail);
  max-width: 72rem;
  margin-inline: auto;
}

.featured-system__grid {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 1.75rem);
  align-items: start;
}

/* ─── Copy column ─── */

.featured-system__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-system__eyebrow {
  margin: 0 0 0.9rem;
  color: #90d8ff;
  font-size: clamp(0.64rem, 0.76vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.34em;
  line-height: 1.3;
  text-transform: uppercase;
}

.featured-system__title {
  max-width: 17ch;
  margin: 0 0 1rem;
  color: #f7fbff;
  font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.15rem, 3.7vw, 3.55rem);
  font-weight: 700;
  line-height: 1.01;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.featured-system__lede {
  margin: 0 0 1.45rem;
  max-width: 38rem;
  color: rgba(226, 236, 255, 0.76);
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  line-height: 1.68;
  letter-spacing: -0.012em;
}

/* Numbered point list — mirrors systems-preview__item pattern */

.featured-system__points {
  display: grid;
  gap: 0;
  margin: 0 0 1.65rem;
  padding: 0;
  list-style: none;
  max-width: 31rem;
}

.featured-system__point {
  display: grid;
  grid-template-columns: 2.35rem 1fr;
  gap: 0.82rem;
  align-items: start;
  position: relative;
  padding: 0.88rem 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.13);
  transition: background 0.3s ease;
}

.featured-system__point:last-child {
  border-bottom: none;
}

.featured-system__point::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  height: 72%;
  width: 1.5px;
  border-radius: 1px;
  background: linear-gradient(180deg, transparent, rgba(125, 211, 252, 0.48), transparent);
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}

.featured-system__point:hover::before {
  opacity: 1;
}

.featured-system__point:hover {
  background: rgba(56, 189, 248, 0.022);
}

.featured-system__point-icon {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.22);
  background: rgba(56, 189, 248, 0.07);
  color: rgba(186, 230, 253, 0.92);
  box-shadow:
    0 0 0 4px rgba(56, 189, 248, 0.032),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Per-discipline icon colour — warm amber / sky blue / soft violet */
.featured-system__point:nth-child(1) .featured-system__point-icon {
  color: rgba(253, 230, 138, 0.88);
  border-color: rgba(250, 204, 21, 0.22);
  background: rgba(234, 179, 8, 0.055);
}
.featured-system__point:nth-child(1) .featured-system__point-icon svg {
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.40));
}
.featured-system__point:nth-child(2) .featured-system__point-icon {
  color: rgba(125, 211, 252, 0.92);
  border-color: rgba(125, 211, 252, 0.26);
  background: rgba(56, 189, 248, 0.07);
}
.featured-system__point:nth-child(2) .featured-system__point-icon svg {
  filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.40));
}
.featured-system__point:nth-child(3) .featured-system__point-icon {
  color: rgba(167, 139, 250, 0.88);
  border-color: rgba(139, 92, 246, 0.24);
  background: rgba(139, 92, 246, 0.055);
}
.featured-system__point:nth-child(3) .featured-system__point-icon svg {
  filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.36));
}

/* Icon glow lift on row hover */
.featured-system__point:hover .featured-system__point-icon {
  box-shadow:
    0 0 0 5px rgba(56, 189, 248, 0.055),
    0 0 14px rgba(56, 189, 248, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  border-color: rgba(125, 211, 252, 0.40);
}
.featured-system__point:nth-child(1):hover .featured-system__point-icon {
  box-shadow:
    0 0 0 5px rgba(250, 204, 21, 0.055),
    0 0 14px rgba(250, 204, 21, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  border-color: rgba(250, 204, 21, 0.38);
}
.featured-system__point:nth-child(3):hover .featured-system__point-icon {
  box-shadow:
    0 0 0 5px rgba(139, 92, 246, 0.055),
    0 0 14px rgba(139, 92, 246, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  border-color: rgba(139, 92, 246, 0.40);
}

.featured-system__point h3 {
  margin: 0 0 0.26rem;
  color: #f8fbff;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.018em;
}

.featured-system__point p {
  margin: 0;
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.86rem;
  line-height: 1.68;
}

.featured-system__point-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.48rem;
  color: rgba(125, 211, 252, 0.40);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.featured-system__point-status::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.78;
}

.featured-system__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* Secondary button: scoped elevation — brighter border, arrow motion */
.featured-system__actions .button--secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
  border-color: rgba(148, 190, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(148, 190, 255, 0.07),
    0 8px 20px rgba(3, 8, 24, 0.35);
}
.featured-system__actions .button--secondary svg {
  flex-shrink: 0;
  transition: transform 0.24s var(--ease-base, ease);
}
.featured-system__actions .button--secondary:hover {
  border-color: rgba(148, 190, 255, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(148, 190, 255, 0.10),
    0 12px 28px rgba(3, 8, 24, 0.45);
}
.featured-system__actions .button--secondary:hover svg {
  transform: translateX(3px);
}

/* ─── Visual column ─── */

.featured-system__visual {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.5vw, 1.1rem);
}

/* Ambient light bleed — magenta pool glow + cyan atmospheric pool reflection */
.featured-system__visual::before {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: -3.5rem -2.5rem;
  background:
    radial-gradient(ellipse 78% 52% at 52% 28%, rgba(236, 72, 153, 0.046), transparent 65%),
    radial-gradient(ellipse 58% 40% at 18% 86%, rgba(34, 211, 238, 0.032), transparent 58%);
}

/* Hero media card — glass treatment mirrors systems-preview stage */

.featured-system__media {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  border-radius: clamp(1.25rem, 2vw, 1.65rem);
  border: 1px solid rgba(148, 190, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.012)),
    linear-gradient(135deg, rgba(16, 28, 52, 0.78), rgba(8, 15, 30, 0.68));
  box-shadow:
    0 24px 58px rgba(2, 8, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.052);
  backdrop-filter: blur(var(--blur-mid)) saturate(var(--sat-base));
  -webkit-backdrop-filter: blur(var(--blur-mid)) saturate(var(--sat-base));
  transition:
    border-color var(--duration-base) var(--ease-base),
    box-shadow var(--duration-slow) var(--ease-in-base);
}

.featured-system__media:hover {
  border-color: rgba(148, 190, 255, 0.22);
  box-shadow:
    0 32px 72px rgba(2, 8, 23, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

.featured-system__media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
  object-position: center center;
  filter: brightness(1.12) contrast(1.06) saturate(1.12);
  transform: scale(1.02);
}

.featured-system__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.06), rgba(2, 6, 23, 0.52)),
    radial-gradient(circle at 70% 24%, rgba(56, 189, 248, 0.10), transparent 40%),
    radial-gradient(circle at 24% 82%, rgba(236, 72, 153, 0.054), transparent 40%);
}

/* Floating status badges — glass pill treatment matching systems-preview__node */

.featured-system__badge {
  position: absolute;
  z-index: 2;
  min-width: 180px;
  max-width: 220px;
  padding: 0.75rem 0.88rem;
  border-radius: var(--radius-m);
  border: 1px solid rgba(148, 190, 255, 0.18);
  background: rgba(2, 6, 23, 0.58);
  backdrop-filter: blur(var(--blur-card));
  -webkit-backdrop-filter: blur(var(--blur-card));
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.featured-system__badge--top {
  top: 1.25rem;
  right: 1.25rem;
}

.featured-system__badge--bottom {
  left: 1.25rem;
  bottom: 1.25rem;
}

.featured-system__badge-kicker {
  display: block;
  margin-bottom: 0.28rem;
  color: rgba(125, 211, 252, 0.72);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.featured-system__badge strong {
  display: block;
  margin-bottom: 0.22rem;
  color: #f8fbff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
}

.featured-system__badge small {
  display: block;
  color: rgba(203, 213, 225, 0.68);
  font-size: 0.78rem;
  line-height: 1.48;
}

/* ─── Mini card grid ─── */

.featured-system__mini-grid {
  display: grid;
  gap: clamp(0.75rem, 1.4vw, 1rem);
}

/* Mini cards — .feature-card glass treatment from panels.css */

.featured-system__mini {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  border: 1px solid rgba(148, 190, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(10, 17, 38, 0.78), rgba(6, 12, 30, 0.74)),
    linear-gradient(90deg, rgba(99, 102, 241, 0.04), rgba(34, 211, 238, 0.03));
  box-shadow:
    0 16px 44px rgba(2, 8, 23, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(var(--blur-panel)) saturate(var(--sat-panel));
  -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(var(--sat-panel));
  transition:
    transform var(--duration-base) var(--ease-base),
    border-color var(--duration-base) var(--ease-base),
    box-shadow var(--duration-slow) var(--ease-in-base);
}

/* Top-edge sheen — matches panels.css ::before pattern */
.featured-system__mini::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.06), transparent 80%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 45%);
  pointer-events: none;
}

.featured-system__mini > * {
  position: relative;
  z-index: 1;
}

.featured-system__mini:hover {
  transform: var(--hover-lift-base);
  border-color: rgba(148, 190, 255, 0.22);
  box-shadow:
    0 22px 56px rgba(2, 8, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.featured-system__mini img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center center;
  filter: brightness(1.12) contrast(1.06) saturate(1.12);
}

.featured-system__mini-body {
  padding: 0.82rem 0.9rem 0.95rem;
}

.featured-system__mini-label {
  display: block;
  margin-bottom: 0.38rem;
  color: rgba(125, 211, 252, 0.72);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.featured-system__mini h3 {
  margin: 0 0 0.28rem;
  color: #f8fbff;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.featured-system__mini p {
  margin: 0;
  color: rgba(203, 213, 225, 0.68);
  font-size: 0.82rem;
  line-height: 1.56;
}

/* Telemetry micro-status badge — absolute, top-right of each mini card */
.featured-system__mini-status {
  position: absolute;
  top: 0.62rem;
  right: 0.62rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  padding: 0.2rem 0.44rem 0.2rem 0.32rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 190, 255, 0.17);
  background: rgba(2, 6, 23, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(125, 211, 252, 0.80);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.featured-system__mini-status::before {
  content: '';
  display: block;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: rgba(125, 211, 252, 0.82);
  flex-shrink: 0;
}

/* ─── Responsive ─── */

@media (min-width: 981px) {
  .featured-system__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: stretch;
  }

  .featured-system__copy {
    padding-right: clamp(0rem, 1vw, 0.75rem);
  }

  .featured-system__mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .featured-system__copy {
    max-width: 42rem;
  }

  .featured-system__mini-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .featured-system {
    padding: clamp(3rem, 8vw, 4rem) 0 clamp(2.5rem, 6vw, 3.5rem);
  }

  .featured-system__media,
  .featured-system__media img {
    min-height: 280px;
  }

  .featured-system__badge {
    min-width: 148px;
    max-width: 172px;
    padding: 0.68rem 0.75rem;
  }

  .featured-system__badge--top  { top: 0.85rem; right: 0.85rem; }
  .featured-system__badge--bottom { left: 0.85rem; bottom: 0.85rem; }

  .featured-system__mini-grid {
    grid-template-columns: 1fr;
  }

  .featured-system__mini:hover {
    transform: none;
  }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  .featured-system__title {
    font-size: clamp(2rem, 2.9vw, 3.2rem);
  }

  .featured-system__media,
  .featured-system__media img {
    min-height: 360px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-system__media,
  .featured-system__mini {
    transition: none !important;
  }

  .featured-system__media:hover,
  .featured-system__mini:hover {
    transform: none;
  }
}

/* =========================================
   VALUE MATRIX — HOMEPAGE CONTEXT OVERRIDES
   These rules apply to the standalone value-matrix on the homepage only.
   Base rules in layout-overrides.css use muted opacity/no filter designed
   for interior page contexts. These overrides lift the section to cinematic
   homepage quality.
   ========================================= */

/* Lift image presence — base is opacity: 0.76 with no filter */
.page-home .value-card__image {
  opacity: 0.92;
  filter: brightness(1.10) contrast(1.05) saturate(1.08);
}

/* Lighten bottom shade — base ends at rgba(2,6,23,0.92) which crushes highlights */
.page-home .value-card__shade {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.08) 0%, rgba(2, 6, 23, 0.24) 42%, rgba(2, 6, 23, 0.70) 100%),
    radial-gradient(circle at 18% 8%, rgba(56, 189, 248, 0.14), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(168, 85, 247, 0.11), transparent 35%);
}

/* Standardise eyebrow to match all other sections — base uses 0.74 opacity + 0.28em tracking */
.page-home .value-matrix__eyebrow {
  color: #90d8ff;
  letter-spacing: 0.34em;
}

/* Constrain hover — base layout-overrides.css uses scale(1.045) + opacity 0.72 (too aggressive).
   Restrain to scale(1.02) + opacity 0.80 for a breath, not a shutdown. */
.page-home .value-card:hover .value-card__image {
  transform: scale(1.02);
  opacity: 0.80;
}

/* =========================================
   INTRO-STRIP — CARD TEXTURE LAYER
   Abstract misc/UI textures layered beneath the glass surface.
   Stacking: texture (z:0) → shade (z:1) → text content (z:2).
   isolation:isolate prevents mix-blend-mode: screen from bleeding
   across the section boundary or into adjacent cards.

   Opacity ceiling: 0.15 — textures read as embedded intelligence,
   not visible wallpaper. mix-blend-mode: screen makes the dark
   background of each texture transparent so only the light/line
   elements ghost through the glass.
   ========================================= */

.page-home .intro-strip .feature-card {
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

/* ── Shared base: all three texture images ── */
.page-home .intro-strip .feature-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  opacity: 0.10;
  mix-blend-mode: screen;
  /* grayscale(0.35) prevents the textures from introducing their own hue
     and competing with the card's purple/cyan palette */
  filter: grayscale(0.35) brightness(1.1) contrast(1.15);
  transition: opacity 0.55s ease;
}

/* ── Card 1: Waveform interface — layered light waves, atmospheric, cinematic.
   Waveforms are horizontal structures; object-position: center 44% places
   the wave crest/trough rhythm across the card face rather than at the base.
   Less grayscale than cards 2/3 — let the waveform's natural luminous tones
   bleed into the cyan/purple palette. hue-rotate(175deg) keeps it in the
   warm-cyan register without pushing fully cold-blue.
   Slightly higher contrast (1.18) — waveform lines need presence at low opacity
   or they will appear as faint haze rather than deliberate structure. ── */
.page-home .intro-strip .feature-card:nth-child(1) .feature-card__image {
  object-position: center 44%;
  opacity: 0.12;
  filter: grayscale(0.15) brightness(1.14) contrast(1.18) hue-rotate(175deg);
}

/* ── Card 2: Energy network — node map, integration infrastructure
   Offset position creates an asymmetric depth that suggests the
   network extends beyond the card edge. Slightly higher opacity
   makes fine network lines legible at this treatment level. ── */
.page-home .intro-strip .feature-card:nth-child(2) .feature-card__image {
  object-position: 58% 42%;
  opacity: 0.12;
  filter: grayscale(0.45) brightness(1.0) contrast(1.25) hue-rotate(210deg);
}

/* ── Card 3: Command bridge hologram — right-weighted, suggests the
   interface panel extending off-screen. Violet hue-rotation matches
   the dashboard/control register without clashing with purple palette. ── */
.page-home .intro-strip .feature-card:nth-child(3) .feature-card__image {
  object-position: 68% 50%;
  opacity: 0.11;
  filter: grayscale(0.30) brightness(1.08) contrast(1.12) hue-rotate(240deg);
}

/* ── Per-card shade: gradient + accent glow varied per card
   to prevent all three cards looking identical.
   Card 1: cyan glow (lighting/ambient)
   Card 2: indigo glow (infrastructure/network)
   Card 3: violet glow (dashboard/control) ── */
.page-home .intro-strip .feature-card__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.10) 0%, rgba(2, 6, 23, 0.38) 100%);
  pointer-events: none;
}

.page-home .intro-strip .feature-card:nth-child(1) .feature-card__shade {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.10) 0%, rgba(2, 6, 23, 0.38) 100%),
    radial-gradient(circle at 50% 72%, rgba(34, 211, 238, 0.055), transparent 52%);
}

.page-home .intro-strip .feature-card:nth-child(2) .feature-card__shade {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.10) 0%, rgba(2, 6, 23, 0.38) 100%),
    radial-gradient(circle at 68% 24%, rgba(99, 102, 241, 0.048), transparent 50%);
}

.page-home .intro-strip .feature-card:nth-child(3) .feature-card__shade {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.10) 0%, rgba(2, 6, 23, 0.38) 100%),
    radial-gradient(circle at 72% 52%, rgba(168, 85, 247, 0.042), transparent 52%);
}

/* ── Text stacking ── */
.page-home .intro-strip .feature-card__kicker,
.page-home .intro-strip .feature-card h2,
.page-home .intro-strip .feature-card p {
  position: relative;
  z-index: 2;
}

/* ── Hover: texture brightens slightly — reads as the interface
   activating, not as a photographic zoom ── */
.page-home .intro-strip .feature-card:hover .feature-card__image {
  opacity: 0.15;
}

/* =========================================
   CINEMATIC HOVER — IMAGE SCALE + LIGHTING SHIFT
   Consistent scale(1.02) breath across all image card types.
   Gives depth without feeling like a UI trick.
   ========================================= */

/* Featured system — main hero card */
.featured-system__media img {
  transition:
    transform 650ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 650ms ease;
}

.featured-system__media:hover img {
  transform: scale(1.04);
  filter: brightness(1.15) contrast(1.07) saturate(1.14);
}

/* Featured system — mini cards */
.featured-system__mini img {
  transition:
    transform 550ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter 550ms ease;
}

.featured-system__mini:hover img {
  transform: scale(1.02);
  filter: brightness(1.16) contrast(1.07) saturate(1.14);
}

/* Systems preview — stage image */
.systems-preview__visual .sp-stage-img {
  transition:
    transform 650ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 400ms ease;
}

.systems-preview__visual:hover .sp-stage-img--front {
  transform: scale(1.02);
}

/* =========================================
   AUTOMATION SCENES — CINEMATIC CARD IMAGERY
   Stacking order: bg-image (1) → shade (2) → text (3) → glass sheen (4).
   Card already has position: relative + overflow: hidden — only isolation added here.
   ========================================= */

.automation-scenes__card { isolation: isolate; }

.automation-scenes__card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  opacity: 0.09;
  mix-blend-mode: screen;
  filter: grayscale(0.40) brightness(1.10) contrast(1.18);
  transition: opacity 0.55s ease;
}

.automation-scenes__card-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.06) 0%, rgba(2, 6, 23, 0.38) 100%);
}

/* Lift all text content above image layers — position: relative required for z-index to take effect */
.automation-scenes__topline,
.automation-scenes__name,
.automation-scenes__desc,
.automation-scenes__systems {
  position: relative;
  z-index: 3;
}

/* Glass sheen sits above image and text */
.automation-scenes__card::before { z-index: 4; }

/* ── Card 01: Morning Routine — sensory-room-01 (warm-cyan dawn light) ── */
.automation-scenes__card:nth-child(1) .automation-scenes__card-bg {
  object-position: center 36%;
  opacity: 0.10;
  filter: grayscale(0.30) brightness(1.12) contrast(1.18) hue-rotate(162deg);
}
.automation-scenes__card:nth-child(1) .automation-scenes__card-shade {
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, rgba(34, 211, 238, 0.07) 0%, transparent 70%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.06) 0%, rgba(2, 6, 23, 0.38) 100%);
}

/* ── Card 02: Focus Mode — space-age-room-03 (cool indigo precision) ── */
.automation-scenes__card:nth-child(2) .automation-scenes__card-bg {
  object-position: center center;
  opacity: 0.10;
  filter: grayscale(0.35) brightness(1.08) contrast(1.20) hue-rotate(218deg);
}
.automation-scenes__card:nth-child(2) .automation-scenes__card-shade {
  background:
    radial-gradient(ellipse 65% 45% at 65% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.06) 0%, rgba(2, 6, 23, 0.38) 100%);
}

/* ── Card 03: Evening Unwind — snug-room-02 (amber/violet warmth) ── */
.automation-scenes__card:nth-child(3) .automation-scenes__card-bg {
  object-position: center 55%;
  opacity: 0.11;
  filter: grayscale(0.20) brightness(1.06) contrast(1.12) hue-rotate(22deg);
}
.automation-scenes__card:nth-child(3) .automation-scenes__card-shade {
  background:
    radial-gradient(ellipse 60% 50% at 40% 100%, rgba(168, 85, 247, 0.07) 0%, transparent 70%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.06) 0%, rgba(2, 6, 23, 0.38) 100%);
}

/* ── Card 04: Night Mode — radar-rings-02 (deep indigo authority) ── */
.automation-scenes__card:nth-child(4) .automation-scenes__card-bg {
  object-position: center center;
  opacity: 0.08;
  filter: grayscale(0.45) brightness(1.04) contrast(1.22) hue-rotate(238deg);
}
.automation-scenes__card:nth-child(4) .automation-scenes__card-shade {
  background:
    radial-gradient(ellipse 55% 40% at 50% 50%, rgba(67, 56, 202, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.06) 0%, rgba(2, 6, 23, 0.42) 100%);
}

/* Hover: subtle image brightening — reads as the scene activating */
.automation-scenes__card:hover .automation-scenes__card-bg { opacity: 0.13; }