/* V8.5 adaptive holographic composition.
   V6 copy and the six approved page logics are preserved; only layout and material are refined. */

:root {
  --v85-home-copy-alpha: .38;
  --v85-s2-depth: rgba(21, 133, 181, .58);
  --v85-s5-depth: rgba(19, 145, 190, .60);
  --v85-s6-depth: rgba(26, 156, 196, .62);
  --v85-ink: #032f4d;
  --v85-ink-soft: #0a4965;
  --v85-line: rgba(36, 187, 218, .84);
}

/* Home: let the generated scene pass through the information layer. */
.home-shade {
  background:
    linear-gradient(90deg, rgba(7,49,84,.18), rgba(10,85,126,.06) 42%, transparent 68%),
    linear-gradient(0deg, rgba(17,109,145,.08), transparent 46%);
}

.home-copy {
  border-color: rgba(117,215,237,.58);
  background:
    linear-gradient(128deg, rgba(188,232,244,var(--v85-home-copy-alpha)), rgba(54,157,196,.16));
  box-shadow: inset 0 0 26px rgba(235,252,255,.24), 0 18px 58px rgba(1,45,83,.18);
  backdrop-filter: blur(8px) saturate(1.18);
}

.stat-card {
  border-color: rgba(112, 211, 233, .68);
  background:
    radial-gradient(circle at 34% 24%, rgba(228,249,253,.54), rgba(104,198,222,.34) 58%, rgba(26,132,174,.24));
  box-shadow: inset 0 0 20px rgba(239,253,255,.34), 0 16px 44px rgba(1,62,102,.18), 0 0 24px rgba(43,194,222,.20);
  backdrop-filter: blur(8px) saturate(1.18);
}

.stat-card strong,
.stat-card span,
.home-copy h1,
.positioning { text-shadow: none; }

/* S2 / S5 / S6: retain the reference background color after compositing. */
[data-layout="convergence"] .scene-media img {
  filter: saturate(1.20) contrast(1.09) brightness(.96);
}

[data-layout="value-streams"] .scene-media img {
  filter: saturate(1.22) contrast(1.08) brightness(.95);
}

[data-layout="participation"] .scene-media img {
  filter: saturate(1.18) contrast(1.08) brightness(.96);
}

[data-layout="convergence"] .scene-shade,
[data-layout="value-streams"] .scene-shade,
[data-layout="participation"] .scene-shade {
  background:
    linear-gradient(180deg, rgba(5,74,113,.03), rgba(15,128,164,.08) 58%, rgba(4,83,126,.13)),
    radial-gradient(circle at 52% 50%, transparent 20%, rgba(7,77,116,.08) 100%);
}

[data-layout="convergence"] .holo-surface {
  border-color: rgba(84, 213, 237, .88);
  background: radial-gradient(circle at 28% 16%, rgba(221,250,254,.76), rgba(92,199,224,.62) 46%, var(--v85-s2-depth));
}

[data-layout="value-streams"] .holo-surface {
  border-color: rgba(80, 217, 238, .90);
  background: radial-gradient(circle at 28% 16%, rgba(222,251,254,.74), rgba(79,203,226,.60) 46%, var(--v85-s5-depth));
}

[data-layout="participation"] .holo-surface {
  border-color: rgba(91, 224, 241, .92);
  background: radial-gradient(circle at 28% 16%, rgba(225,251,254,.76), rgba(90,210,230,.62) 46%, var(--v85-s6-depth));
}

[data-layout="convergence"] .module-title,
[data-layout="value-streams"] .module-title,
[data-layout="participation"] .module-title { color: #022f4d; }

[data-layout="convergence"] .module-summary,
[data-layout="value-streams"] .module-summary,
[data-layout="participation"] .module-summary { color: #073f5a; }

[data-layout="convergence"] .convergence-core {
  background: radial-gradient(circle at 34% 22%, rgba(225,252,255,.88), rgba(78,196,221,.74) 48%, var(--v85-s2-depth) 73%, transparent 74%);
  box-shadow: inset 0 0 24px rgba(236,254,255,.58), 0 0 48px rgba(15,136,183,.55);
}

[data-layout="value-streams"] .value-origin {
  background: radial-gradient(circle at 34% 22%, rgba(226,252,255,.86), rgba(74,202,224,.72) 48%, var(--v85-s5-depth) 73%, transparent 74%);
  box-shadow: inset 0 0 24px rgba(237,254,255,.56), 0 0 48px rgba(11,148,188,.54);
}

[data-layout="participation"] .step-rail span,
[data-layout="participation"] .contact-terminal {
  border-color: rgba(73, 205, 230, .82);
  background: linear-gradient(180deg, rgba(172,231,242,.70), var(--v85-s6-depth));
  color: #053c58;
}

@media (max-width: 767px) {
  .home-frame { min-height: var(--app-height); }

  .home-copy {
    background: linear-gradient(128deg, rgba(188,232,244,var(--v85-home-copy-alpha)), rgba(54,157,196,.16));
    backdrop-filter: blur(7px) saturate(1.2);
  }

  .source-panel {
    border: 1px solid rgba(102, 205, 228, .48);
    background: rgba(151, 218, 234, .32);
    backdrop-filter: blur(7px) saturate(1.16);
  }

  .layout-host { padding: 12px 10px 112px; }

  .chain-path { min-height: 680px; }
  .convergence-field { min-height: 840px; }
  .community-orbit { min-height: 1040px; }
  .network-map { min-height: 690px; }
  .value-routes { min-height: 880px; }
  .participation-path { min-height: 960px; }

  .holo-surface {
    color: var(--v85-ink);
    box-shadow:
      inset 0 0 20px rgba(235,253,255,.54),
      inset 0 -16px 34px rgba(20,127,169,.16),
      0 15px 38px rgba(2,65,105,.22),
      0 0 26px rgba(37,187,219,.34);
  }

  .screen-heading-copy {
    background: linear-gradient(90deg, rgba(153,224,240,.62), rgba(35,151,190,.32) 72%, transparent);
    box-shadow: 0 10px 28px rgba(2,64,105,.16);
  }

  /* 01: compact diagonal chain, fully visible without turning into a list. */
  .chain-rail {
    left: 50%;
    top: 70px;
    width: 3px;
    height: 500px;
    transform: translateX(-50%) rotate(-8deg);
    background: linear-gradient(180deg, transparent, var(--v85-line) 10%, #eaffff 50%, var(--v85-line) 90%, transparent);
  }

  .chain-path .chain-node { width: min(43%, 190px); }
  .chain-node-1 { left: 0; top: 0; }
  .chain-node-2 { right: 0; top: 140px; }
  .chain-node-3 { left: 2%; top: 315px; }
  .chain-node-4 { right: 0; top: 470px; }
  .chain-path .logic-caption { bottom: 0; }

  /* 02: staggered drivers visibly converge into the landing window. */
  .convergence-field .driver-node { width: min(38%, 176px); }
  .driver-node-1 { left: 0; top: 0; }
  .driver-node-2 { left: auto; right: 0; top: 165px; }
  .driver-node-3 { left: 2%; right: auto; top: 325px; }
  .convergence-core {
    left: 50%;
    top: 480px;
    width: 142px;
    transform: translateX(-50%) translateZ(36px);
  }
  .beam { left: 50%; top: 548px; width: 52%; }
  .beam-a { transform: rotate(218deg); }
  .beam-b { transform: rotate(255deg); }
  .beam-c { transform: rotate(300deg); }
  .convergence-field .pain-node {
    left: 5%;
    right: 5%;
    bottom: 22px;
    min-height: 116px;
  }

  /* 03: one complete operating orbit; result strip is separated by a real gap. */
  .orbit-line {
    left: 50%;
    top: 110px;
    width: 80%;
    height: 670px;
    transform: translateX(-50%) rotate(-4deg);
  }
  .community-core {
    left: 50%;
    top: 370px;
    transform: translateX(-50%) translateZ(34px);
  }
  .community-orbit .orbit-node { width: min(40%, 184px); }
  .orbit-node-1 { left: 0; top: 15px; }
  .orbit-node-2 { right: 0; top: 200px; }
  .orbit-node-3 { left: 0; right: auto; top: 540px; }
  .orbit-node-4 { right: 0; left: auto; top: 696px; }
  .data-strip { bottom: 24px; }

  /* 04: central Chengdu hub with three independent outward nodes. */
  .network-lines { inset: 20px 0 34px; height: calc(100% - 54px); }
  .satellite-node { right: 0; top: 0; width: min(48%, 220px); }
  .hub-node { left: 26%; top: 190px; width: min(48%, 220px); }
  .access-node { left: 0; top: 430px; width: min(47%, 215px); }
  .expansion-node { right: 0; top: 450px; width: min(47%, 215px); }
  .satellite-labels { bottom: 8px; }

  /* 05: one source sends four readable beams to four value outcomes. */
  .value-origin { left: 0; top: 340px; width: min(38%, 176px); }
  .route-line { left: 31%; width: 38%; }
  .route-1 .route-line { top: 400px; transform: rotate(-59deg); }
  .route-2 .route-line { top: 414px; transform: rotate(-25deg); }
  .route-3 .route-line { top: 432px; transform: rotate(24deg); }
  .route-4 .route-line { top: 448px; transform: rotate(56deg); }
  .value-node { width: min(57%, 286px); min-height: 118px; }
  .route-1 .value-node { top: 0; }
  .route-2 .value-node { top: 180px; right: 2%; }
  .route-3 .value-node { top: 545px; right: 2%; }
  .route-4 .value-node { top: 715px; }

  /* 06: steps on the left, participation portals on the right, route and contact below. */
  .steps-node { left: 0; top: 0; width: min(54%, 236px); }
  .step-rail { left: 0; top: 138px; width: 48%; height: 248px; }
  .role-entry { position: static; width: auto; height: auto; }
  .entry-node { left: auto; right: 0; top: 130px; width: min(49%, 226px); }
  .roles-node { left: auto; right: 0; top: 312px; width: min(49%, 226px); }
  .route-node { left: 7%; right: 7%; top: 570px; width: auto; }
  .contact-terminal { left: 0; right: 0; bottom: 24px; }
}

@media (max-width: 390px) {
  .layout-host { padding-left: 8px; padding-right: 8px; }
  .chain-path .chain-node,
  .convergence-field .driver-node,
  .community-orbit .orbit-node { width: 42%; }
  .chain-node-4 { top: 462px; }
  .route-4 .value-node { top: 710px; }
}

@media (min-width: 768px) and (max-width: 1179px) {
  .home-frame {
    grid-template-columns: minmax(0, 1.08fr) minmax(250px, .72fr);
    gap: clamp(16px, 3vw, 30px);
    padding: calc(var(--topbar-height) + 34px) clamp(22px, 4vw, 46px) calc(var(--control-height) + 34px);
  }

  .home-copy {
    min-width: 0;
    padding: clamp(22px, 3vw, 32px);
  }

  .home-copy h1 { font-size: clamp(36px, 5.6vw, 52px); }
  .home-stats { width: min(310px, 100%); gap: 10px; }
  .stat-card { min-height: 108px; padding: 12px; }

  .layout-host { padding-inline: clamp(20px, 3.4vw, 42px); }

  .chain-path,
  .convergence-field,
  .community-orbit,
  .network-map,
  .value-routes,
  .participation-path {
    min-height: 0;
    height: 100%;
  }

  [data-layout="convergence"] .convergence-core,
  [data-layout="value-streams"] .value-origin { width: clamp(148px, 18vw, 170px); }

  [data-layout="convergence"] .convergence-core { top: 49%; }
  [data-layout="convergence"] .beam { top: 49%; }

  .community-orbit .orbit-node {
    width: clamp(136px, 18vw, 158px);
    height: clamp(146px, 18vw, 158px);
    min-height: 0;
    padding: 13px 11px;
  }
  .community-orbit .orbit-node .module-summary { -webkit-line-clamp: 1; }
  .community-orbit .orbit-node .module-tags i:nth-child(n+2) { display: none; }
  .data-strip { bottom: 0; }

  .hub-node { width: clamp(174px, 23vw, 210px); }
  .satellite-node,
  .access-node,
  .expansion-node { width: min(31%, 286px); }

  .contact-terminal { bottom: 0; }
}

@media (min-width: 1180px) {
  .home-copy { max-width: 640px; }

  [data-layout="convergence"] .convergence-core {
    width: clamp(154px, 12vw, 170px);
  }

  [data-layout="community-loop"] .data-strip { bottom: 0; }
  [data-layout="community-loop"] .orbit-node-4 { bottom: calc(18% - 6px); }

  [data-layout="network"] .hub-node {
    left: 38%;
    top: 26%;
    width: clamp(176px, 15vw, 212px);
  }

  [data-layout="value-streams"] .route-line {
    background: linear-gradient(90deg, var(--v85-line), rgba(231,254,255,.94), var(--v85-line));
    box-shadow: 0 0 18px rgba(24,180,213,.66);
  }

  [data-layout="participation"] .step-rail { top: 12%; height: 54%; }
  [data-layout="participation"] .role-entry { top: 8%; }
  [data-layout="participation"] .route-node { bottom: 13%; }
  [data-layout="participation"] .contact-terminal { bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stage { scroll-behavior: auto; }
}