/* V8.9 — V8.6 s3's frameless content language applied to every page without
   reusing its community artwork or changing the V6 copy/structure. */

:root {
  --v89-cyan: #7cf1ff;
  --v89-white: #ffffff;
  --v89-near-white: #effdff;
  --v89-deep-shadow: rgba(0, 3, 12, .98);
}

/* Neutralize older page-specific minimum heights/insets before applying the
   V8.9 artboard contract. Without this, the old long-scroll rules win on s3. */
.home-stage .scroll-scene,
.content-stage[data-layout] .scroll-scene {
  min-height: 0 !important;
}

.content-stage[data-layout] .layout-host {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The background remains the primary visual surface. Copy gets only a local,
   feathered contrast field—never a visible panel or card. */
.home-copy {
  background: transparent;
  box-shadow: none;
}

.home-copy::before {
  left: -12%;
  top: -16%;
  width: 124%;
  height: 132%;
  border: 0;
  background: radial-gradient(ellipse at 31% 48%, rgba(0, 8, 21, .68), rgba(1, 19, 38, .40) 44%, rgba(5, 47, 68, .13) 68%, transparent 82%);
  filter: blur(12px);
}

.home-copy h1,
.home-copy .positioning,
.home-trio span {
  text-shadow: 0 2px 6px var(--v89-deep-shadow), 0 0 9px rgba(55, 211, 235, .12);
}

.content-stage[data-layout] .module-trigger {
  grid-template-columns: clamp(43px, 3.7vw, 58px) minmax(0, 1fr) 22px;
  grid-template-rows: auto auto 1fr;
  align-content: center;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  animation: none !important;
  transition: transform .22s ease, filter .22s ease;
}

.content-stage[data-layout] .module-trigger::before {
  inset: -12% -7%;
  border: 0;
  border-radius: 46%;
  background: radial-gradient(ellipse at 42% 49%, rgba(0, 8, 21, .70), rgba(1, 20, 39, .42) 43%, rgba(13, 77, 101, .15) 64%, transparent 80%);
  box-shadow: none;
  filter: blur(9px);
}

.content-stage[data-layout] .module-trigger::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 18%;
  right: 14%;
  top: auto;
  bottom: 7px;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(112, 239, 255, .92), transparent);
  box-shadow: 0 0 12px rgba(70, 222, 244, .55);
  transform-origin: center;
  animation: v89SignalSweep 5.2s ease-in-out var(--v88-delay, 0s) infinite;
}

.content-stage[data-layout] .module-trigger:hover,
.content-stage[data-layout] .module-trigger:focus-visible {
  transform: translateY(-2px) scale(1.012);
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(73, 223, 245, .2));
}

.content-stage[data-layout] .module-trigger:focus-visible {
  outline: 1px solid rgba(183, 248, 255, .88);
  outline-offset: 4px;
}

.content-stage[data-layout] .module-trigger:focus-visible::before {
  border: 0;
  box-shadow: none;
}

.content-stage[data-layout] .node-ring {
  display: block;
  border-color: rgba(116, 239, 255, .56);
  background: radial-gradient(circle, rgba(76, 219, 239, .10), transparent 64%);
  box-shadow: inset 0 0 12px rgba(200, 252, 255, .07), 0 0 15px rgba(62, 222, 244, .18);
  animation: v89RingPulse 4.8s ease-out var(--v88-delay, 0s) infinite;
}

.content-stage[data-layout] .node-ring::before {
  inset: 7px;
  border-color: rgba(145, 243, 255, .52);
  animation: v88Spin 13s linear infinite;
}

.content-stage[data-layout] .node-ring::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 3px, #f1feff 0 2px, #65eaff 2.5px 4px, transparent 5px);
  filter: drop-shadow(0 0 6px #65eaff);
  animation: v89CursorOrbit 5.6s linear var(--v88-delay, 0s) infinite;
  pointer-events: none;
}

.content-stage[data-layout] .node-icon {
  grid-column: 1;
  grid-row: 1 / 4;
  color: #d8fbff;
  filter: drop-shadow(0 0 5px rgba(81, 226, 247, .34));
}

.content-stage[data-layout] .module-index {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  display: block;
  margin: 0 0 3px;
  color: #88effc;
  font-size: clamp(10px, .72vw, 12px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: .14em;
  text-shadow: 0 2px 5px rgba(0, 4, 13, 1);
}

.content-stage[data-layout] .module-index::before { content: "MODULE "; }

.content-stage[data-layout] .module-title {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  color: var(--v89-white);
  font-size: clamp(18px, 1.38vw, 23px);
  font-weight: 900;
  line-height: 1.18;
  text-shadow: 0 2px 5px var(--v89-deep-shadow), 0 0 7px rgba(62, 217, 239, .14);
}

.content-stage[data-layout] .module-summary {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  margin-top: 6px;
  color: var(--v89-near-white);
  font-size: clamp(12px, .88vw, 14.5px);
  font-weight: 770;
  line-height: 1.42;
  text-shadow: 0 2px 5px var(--v89-deep-shadow);
}

.content-stage[data-layout] .module-action {
  grid-column: 3;
  grid-row: 1 / 4;
  border-color: rgba(125, 239, 252, .56);
  color: #dcfbff;
  background: rgba(20, 126, 153, .15);
}

/* Keep the heading readable with a small text-local shadow, not a large panel. */
.content-stage[data-layout] .screen-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14% -8%;
  border-radius: 44%;
  background: radial-gradient(ellipse at 35% 48%, rgba(0, 7, 19, .62), rgba(1, 18, 36, .30) 50%, transparent 78%);
  filter: blur(10px);
}

.content-stage[data-layout] .screen-heading h2 {
  text-shadow: 0 2px 6px rgba(0, 3, 12, 1), 0 0 9px rgba(71, 223, 246, .12);
}

.content-stage[data-layout] .screen-heading .section-desc {
  text-shadow: 0 2px 5px rgba(0, 3, 12, 1);
}

/* Data and contact strips are information terminals, not content cards. */
.data-strip {
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 15, 31, .38) 18%, rgba(0, 15, 31, .38) 82%, transparent);
  box-shadow: none;
}

.data-point {
  border-top: 1px solid rgba(113, 239, 255, .46);
  background: linear-gradient(180deg, rgba(32, 159, 191, .10), transparent 78%);
}

.contact-terminal {
  isolation: isolate;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  overflow: hidden;
  padding: 9px 11px 9px 13px;
  border: 1px solid rgba(119, 238, 252, .34);
  border-radius: 18px;
  color: #effdff;
  background:
    linear-gradient(102deg, rgba(3, 20, 38, .82), rgba(3, 39, 62, .56) 66%, rgba(4, 52, 75, .42)),
    radial-gradient(circle at 8% 50%, rgba(78, 220, 245, .14), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(197, 250, 255, .12), 0 12px 34px rgba(0, 4, 15, .28), 0 0 24px rgba(63, 218, 243, .08);
  backdrop-filter: blur(9px);
}

.contact-terminal::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(129, 241, 255, .10) 48%, transparent 72%);
  transform: translateX(-72%);
  animation: v89ContactSweep 6.8s ease-in-out infinite;
}

.contact-terminal::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 0;
  left: 13px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(104, 235, 252, .62), transparent);
}

.contact-signal {
  position: relative;
  grid-column: 1;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(120, 238, 252, .58);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(86, 224, 246, .26) 0 10%, rgba(25, 133, 165, .12) 12% 37%, transparent 39%);
  box-shadow: inset 0 0 14px rgba(74, 224, 247, .13), 0 0 16px rgba(65, 218, 242, .14);
}

.contact-signal::before,
.contact-signal::after,
.contact-signal i {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.contact-signal::before {
  inset: 7px;
  border: 1px dashed rgba(147, 245, 255, .44);
  animation: v89ContactSpin 9s linear infinite;
}

.contact-signal::after {
  width: 8px;
  height: 8px;
  background: #9bf5ff;
  box-shadow: 0 0 12px rgba(107, 238, 253, .92);
  animation: v89ContactBeacon 2.8s ease-in-out infinite;
}

.contact-signal i {
  inset: -5px;
  border: 1px solid rgba(105, 235, 252, .18);
}

.contact-copy {
  display: grid;
  grid-column: 2;
  min-width: 0;
  align-content: center;
  gap: 4px;
}

.contact-terminal .contact-eyebrow {
  color: #91edf9;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .16em;
  line-height: 1;
}

.contact-identity {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}

.contact-terminal .contact-name {
  color: #fff;
  font-size: clamp(16px, 1.08vw, 19px);
  font-weight: 860;
  line-height: 1.14;
  text-shadow: 0 2px 9px rgba(0, 4, 14, .88);
}

.contact-terminal .contact-separator {
  color: rgba(151, 239, 251, .62);
  font-size: 13px;
  line-height: 1;
}

.contact-terminal .contact-phone {
  color: #c7f5fb;
  font-size: clamp(13px, .82vw, 15px);
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: .03em;
  line-height: 1.15;
}

.contact-terminal .contact-cta {
  display: inline-flex;
  grid-row: 1;
  grid-column: 3;
  width: 108px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(158, 247, 255, .64);
  border-radius: 12px;
  color: #f8feff;
  background: linear-gradient(135deg, rgba(28, 174, 202, .94), rgba(20, 115, 160, .96));
  box-shadow: inset 0 1px 0 rgba(227, 254, 255, .34), 0 7px 19px rgba(0, 72, 118, .28), 0 0 16px rgba(64, 222, 246, .18);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  margin: 0;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.contact-terminal .contact-cta i {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid rgba(223, 253, 255, .6);
  border-radius: 50%;
  font-size: 9px;
  font-style: normal;
}

.contact-terminal .contact-cta:hover,
.contact-terminal .contact-cta:focus-visible {
  filter: brightness(1.12);
  box-shadow: inset 0 1px 0 rgba(227, 254, 255, .42), 0 9px 24px rgba(0, 72, 118, .34), 0 0 24px rgba(64, 222, 246, .28);
  transform: translateY(-1px);
}

@media (max-width: 899px), (orientation: portrait) {
  /* Preserve the original mobile artwork scale and remove only the unneeded tail. */
  .scene-media img {
    top: 0;
    bottom: auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .content-stage[data-layout] .module-trigger {
    grid-template-columns: 40px minmax(0, 1fr) 19px;
    grid-template-rows: auto auto 1fr;
    column-gap: 8px;
    padding: 8px 7px;
  }

  .content-stage[data-layout] .module-trigger::before {
    inset: -10% -5%;
    background: radial-gradient(ellipse at 43% 49%, rgba(0, 8, 21, .70), rgba(1, 20, 39, .40) 43%, rgba(13, 77, 101, .14) 64%, transparent 80%);
    filter: blur(8px);
  }

  .content-stage[data-layout] .module-index {
    margin-bottom: 3px;
    font-size: clamp(9.5px, 2.55vw, 11px);
  }

  .content-stage[data-layout] .module-title {
    font-size: clamp(17px, 4.85vw, 20px);
    line-height: 1.18;
  }

  .content-stage[data-layout] .module-summary {
    margin-top: 4px;
    font-size: clamp(12px, 3.35vw, 14px);
    line-height: 1.38;
  }

  .node-ring { left: 4px; width: 43px; height: 43px; }
  .content-stage[data-layout] .node-icon { width: 31px; height: 31px; }
  .content-stage[data-layout] .module-action { width: 18px; height: 18px; font-size: 9px; }

  .home-copy::before {
    left: -8%;
    top: -12%;
    width: 116%;
    height: 124%;
    background: radial-gradient(ellipse at 40% 38%, rgba(0, 8, 21, .67), rgba(1, 20, 39, .34) 48%, transparent 80%);
    filter: blur(9px);
  }

  .data-point strong { font-size: clamp(15px, 4.7vw, 20px); }
  .data-point span { font-size: clamp(9px, 2.45vw, 10.5px); }
  .contact-terminal {
    grid-template-columns: 34px minmax(0, 1fr) 88px;
    gap: 8px;
    padding: 8px 9px;
    border-radius: 15px;
  }

  .contact-signal { width: 32px; height: 32px; }
  .contact-signal::before { inset: 5px; }
  .contact-signal::after { width: 7px; height: 7px; }
  .contact-copy { gap: 3px; }
  .contact-terminal .contact-eyebrow { font-size: 8.5px; letter-spacing: .13em; }
  .contact-identity { display: grid; gap: 2px; }
  .contact-terminal .contact-separator { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .contact-terminal .contact-name { font-size: 15px; line-height: 1.05; }
  .contact-terminal .contact-phone { font-size: 12px; line-height: 1.05; }
  .contact-terminal .contact-cta {
    width: 88px;
    min-height: 44px;
    gap: 5px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 12px;
  }
  .contact-terminal .contact-cta i { width: 15px; height: 15px; font-size: 8px; }
}

@media (max-width: 390px) {
  .content-stage[data-layout] .module-title { font-size: 17px; }
  .content-stage[data-layout] .module-summary { font-size: 12px; }
}

@keyframes v89RingPulse {
  0%, 56%, 100% { opacity: .46; transform: translateY(-50%) scale(.96); }
  72% { opacity: .9; transform: translateY(-50%) scale(1.08); }
  88% { opacity: .54; transform: translateY(-50%) scale(1.01); }
}

@keyframes v89CursorOrbit { to { transform: rotate(360deg); } }

@keyframes v89SignalSweep {
  0%, 62%, 100% { opacity: .12; transform: translateX(-22%) scaleX(.55); }
  76% { opacity: .74; transform: translateX(0) scaleX(1); }
  90% { opacity: .07; transform: translateX(22%) scaleX(.55); }
}

@keyframes v89ContactSweep {
  0%, 64%, 100% { opacity: 0; transform: translateX(-72%); }
  73% { opacity: .75; }
  88% { opacity: .08; transform: translateX(72%); }
}

@keyframes v89ContactSpin { to { transform: rotate(360deg); } }

@keyframes v89ContactBeacon {
  0%, 100% { opacity: .68; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .node-ring,
  .node-ring::before,
  .node-ring::after,
  .content-stage[data-layout] .module-trigger::after,
  .contact-terminal::before,
  .contact-signal::before,
  .contact-signal::after,
  .chain-rail::after,
  .convergence-core,
  .community-core,
  .value-origin,
  .convergence-core i,
  .community-core i,
  .value-origin i {
    animation: none !important;
  }

  .node-ring { opacity: .68; transform: translateY(-50%); }
}