/* Light passes behind selective frosted surfaces. The original palette remains the ground. */
.landing-page {
  --glass-fill: rgba(233, 255, 243, .07);
  --glass-edge: rgba(223, 255, 236, .16);
  --motion-state: running;
  isolation: isolate;
  background: #0b1717;
}

.ambient-field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.ambient-ribbon {
  position: absolute;
  width: 110vw;
  height: 95vh;
  border-radius: 48%;
  background: radial-gradient(ellipse at center, rgba(128, 208, 171, .12), rgba(61, 134, 120, .06) 34%, transparent 65%);
  animation: light-drift 28s ease-in-out infinite alternate;
  animation-play-state: var(--motion-state);
}

.ambient-ribbon-one { left: -55%; top: -35%; }
.ambient-ribbon-two {
  right: -52%; top: 4%;
  background: radial-gradient(ellipse at center, rgba(172, 231, 199, .13), rgba(92, 163, 151, .05) 38%, transparent 66%);
  animation-duration: 34s;
  animation-delay: -18s;
}
.ambient-ribbon-three {
  width: 65vw; height: 100vh; left: 15%; top: 25%;
  background: radial-gradient(ellipse at center, rgba(147, 211, 183, .07), transparent 62%);
  animation-duration: 23s;
  animation-delay: -9s;
}

@keyframes light-drift {
  from { transform: translate3d(-7%, -6%, 0) rotate(-14deg) scale(.9); }
  to { transform: translate3d(12%, 13%, 0) rotate(17deg) scale(1.12); }
}

.landing-page .site-header {
  position: sticky;
  top: 16px;
  width: min(var(--container), calc(100% - 64px));
  margin: 16px auto 0;
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: rgba(38, 57, 51, .86);
}

.landing-page .header-inner { height: 78px; width: calc(100% - 40px); }
.landing-page .header-inner .brand { width: 140px; }
.landing-page .header-inner .brand img { height: 64px; }
.landing-page .hero { padding-top: 18px; }
.landing-page .hero-art {
  bottom: 12px;
  mask-image: linear-gradient(to right, transparent, #000 27%), linear-gradient(to bottom, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 27%), linear-gradient(to bottom, #000 72%, transparent);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.landing-page .hero-art::after {
  content: '';
  position: absolute;
  inset: -15%;
  background: linear-gradient(115deg, transparent 28%, rgba(195, 239, 216, .12) 45%, transparent 61%);
  mix-blend-mode: screen;
  animation: sculpture-light 18s ease-in-out infinite alternate;
  animation-play-state: var(--motion-state);
}
@keyframes sculpture-light {
  from { transform: translate3d(-18%, -3%, 0); opacity: .35; }
  to { transform: translate3d(18%, 4%, 0); opacity: .85; }
}

.motion-toggle {
  margin-left: auto;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  transition: color .2s, background .2s;
}
.motion-toggle:hover { color: var(--ink); background: var(--glass-fill); }
.landing-page .hero-foot > a { margin-left: 0; width: 36px; }

.architecture-section {
  position: relative;
  padding-bottom: 96px;
  border-block: 1px solid rgba(213, 241, 223, .07);
  background: linear-gradient(180deg, rgba(11, 24, 21, .16), rgba(11, 24, 21, .4));
  overflow: clip;
}
.architecture-heading { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 100px; max-width: none; margin-bottom: 54px; }
.architecture-heading > p { margin: 0 0 4px; font-size: 16px; max-width: 410px; }
.architecture-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.orbital-stage { position: relative; min-width: 0; aspect-ratio: 760 / 600; isolation: isolate; }
.orbital-halo { position: absolute; inset: 17% 6% 16%; transform: rotate(-24deg); pointer-events: none; }
.orbital-halo > span { position: absolute; inset: 0; border: 1px solid rgba(180, 228, 200, .15); border-radius: 50%; }
.orbital-halo > span:nth-child(2) { inset: 12% -1%; transform: rotate(58deg); border-color: rgba(180, 228, 200, .08); }
.orbital-halo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid transparent; border-top-color: rgba(183, 237, 206, .32); animation: orbit-revolve 28s linear infinite; animation-play-state: var(--motion-state); }
@keyframes orbit-revolve { to { transform: rotate(360deg); } }
.orbital-routes { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; pointer-events: none; }
.orbit-track { stroke: rgba(176, 216, 189, .16); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .55s; }
.orbit-route.is-active .orbit-track { stroke: rgba(184, 239, 204, .68); }
.orbit-flow { stroke: #d3ffdf; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 97; opacity: 0; vector-effect: non-scaling-stroke; animation: orbit-transmit 7s linear infinite; animation-play-state: var(--motion-state); transition: opacity .5s; }
.orbit-route.is-active .orbit-flow { opacity: .9; }
@keyframes orbit-transmit { to { stroke-dashoffset: -100; } }
.orbital-stage .architecture-art { position: absolute; inset: 19% 23% 18%; width: auto; margin: 0; pointer-events: none; transition: transform .85s var(--ease); }
.orbital-stage[data-selection="supply"] .architecture-art { transform: translate(5px, -3px) rotate(1.5deg); }
.orbital-stage[data-selection="network"] .architecture-art { transform: translate(-4px, 3px) rotate(-1deg); }
.orbital-stage[data-selection="security"] .architecture-art { transform: translate(3px, 4px) rotate(-1.5deg); }
.architecture-image { position: relative; width: 100%; height: 100%; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 80%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 80%, transparent); mask-composite: intersect; -webkit-mask-composite: source-in; }
.architecture-image img { display: block; width: 100%; height: 100%; object-fit: contain; animation: material-float 9s ease-in-out infinite; animation-play-state: var(--motion-state); }
@keyframes material-float { 0%,100% { transform: translateY(3px); } 50% { transform: translateY(-4px); } }
.architecture-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(214, 246, 226, .08) 50%, transparent 70%); mix-blend-mode: screen; animation: sculpture-light 24s ease-in-out infinite alternate; animation-play-state: var(--motion-state); }
.orbital-node { position: absolute; padding: 0; width: 180px; border: 0; border-radius: 14px; background: transparent; color: #c6d5cc; text-align: left; z-index: 2; animation: node-float 7s ease-in-out infinite; animation-play-state: var(--motion-state); }
.node-assets { left: 2%; top: 10%; }
.node-supply { right: 0; top: 13%; animation-delay: -2s; }
.node-network { left: 1%; bottom: 13%; animation-delay: -4s; }
.node-security { right: 0; bottom: 10%; animation-delay: -1s; }
@keyframes node-float { 0%,100% { transform: translateY(2px); } 50% { transform: translateY(-2px); } }
.node-surface { position: relative; display: flex; align-items: center; gap: 13px; min-height: 80px; padding: 16px 18px; border-radius: inherit; border: 1px solid rgba(203, 240, 216, .17); background: linear-gradient(135deg, rgba(232,255,240,.09), rgba(232,255,240,.015)), #142a21; box-shadow: 0 14px 30px -22px rgba(0,12,7,.7); transition: background .4s, border-color .4s, transform .45s var(--ease), box-shadow .45s; }
.node-surface > .icon { width: 25px; height: 25px; color: #9bbda7; flex-shrink: 0; transition: color .3s, transform .5s var(--ease); }
.node-surface > span:not(.node-light) { font-size: 12px; line-height: 1.5; }
.node-surface strong { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.orbital-node:hover .node-surface { transform: translateY(-3px); border-color: rgba(203,240,216,.4); }
.orbital-node:hover .icon { transform: rotate(-5deg); }
.orbital-node[aria-selected="true"] .node-surface { border-color: rgba(195,255,212,.64); background: linear-gradient(135deg,rgba(224,255,232,.15),rgba(210,251,224,.045)), #193629; box-shadow: 0 15px 38px -22px rgba(0,12,7,.9); }
.orbital-node[aria-selected="true"] .icon { color: var(--accent); }
.node-light { position: absolute; right: 10px; top: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(.5); transition: opacity .4s, transform .4s var(--ease); }
.orbital-node[aria-selected="true"] .node-light { opacity: 1; transform: scale(1); }
.orbital-hint { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 12px; color: #abc0b2; }
.orbit-story { min-width: 0; padding-block: 25px; }
.orbit-story-mark { color: var(--accent); margin-bottom: 28px; }
.orbit-story-mark .icon { width: 38px; height: 38px; }
.orbit-panels { display: grid; }
.orbit-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); filter: blur(2px); pointer-events: none; transition: opacity .36s, transform .5s var(--ease), filter .4s, visibility 0s .4s; }
.orbit-panel[aria-hidden="false"] { opacity: 1; visibility: visible; transform: none; filter: none; pointer-events: auto; transition: opacity .45s .06s, transform .6s var(--ease), filter .5s, visibility 0s; }
.orbit-panel h3 { font-size: 32px; line-height: 1.2; letter-spacing: -.03em; }
.orbit-panel p { font-size: 15px; line-height: 1.8; margin-top: 23px; }
.orbit-panel .text-link { margin-top: 24px; color: var(--accent); font-size: 13px; }
.orbit-pagination { display: flex; gap: 8px; margin-top: 34px; }
.orbit-pagination span { width: 20px; height: 2px; background: #3b5547; transform-origin: left; transition: background .45s, width .45s var(--ease); }
.orbit-pagination .is-active { width: 44px; background: var(--accent); }
.orbital-stage[data-visible="false"] *, .orbital-stage[data-visible="false"] *::after { animation-play-state: paused!important; }
.hero[data-visible="false"] .hero-art::after { animation-play-state: paused; }
.architecture-section .section-note { margin-top: 40px; }
@supports (backdrop-filter: blur(1px)) {
  .node-surface { background: linear-gradient(135deg, rgba(232,255,240,.09), rgba(232,255,240,.015)), rgba(17,35,27,.65); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .orbital-node[aria-selected="true"] .node-surface { background: linear-gradient(135deg,rgba(224,255,232,.15),rgba(210,251,224,.045)), rgba(21,45,30,.72); }
}

.landing-page .regional-panel { background: rgba(204, 247, 219, .045); border: 1px solid rgba(216, 255, 230, .12); }
.landing-page .night-panel { background: linear-gradient(135deg, rgba(67, 111, 81, .32), rgba(25, 48, 40, .55)); border: 1px solid rgba(216, 255, 230, .1); }
.landing-page .module { transition: border-color .25s; }
.landing-page .module:hover { border-color: #7fa88d; }
.landing-page .contact-section { border-top: 1px solid var(--line); }

@supports (backdrop-filter: blur(1px)) {
  .landing-page .site-header { background: linear-gradient(120deg, rgba(233, 255, 243, .10), rgba(233, 255, 243, .04)), rgba(12, 25, 21, .62); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
  .landing-page .regional-panel { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
@media (max-width: 1180px) {
  .architecture-heading { gap: 50px; grid-template-columns: 1.25fr 1fr; }
  .architecture-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; }
  .architecture-art { margin-left: -25px; margin-right: -10px; }
}
@media (max-width: 980px) {
  .landing-page .site-header { width: calc(100% - 40px); top: 12px; margin-top: 12px; }
  .landing-page .header-inner { height: 72px; }
  .landing-page .main-nav { top: 80px; border: 1px solid var(--glass-edge); border-radius: 14px; background: rgba(18, 35, 29, .98); }
  .architecture-heading { display: block; max-width: 680px; margin-bottom: 20px; }
  .architecture-heading > p { margin-top: 22px; max-width: 560px; }
  .architecture-layout { grid-template-columns: 1fr; gap: 36px; }
  .architecture-art { width: min(590px, 100%); margin: 0 auto; }
}
@media (max-width: 680px) {
  .landing-page .site-header { width: calc(100% - 24px); top: 10px; margin-top: 10px; }
  .landing-page .header-inner { width: calc(100% - 28px); height: 65px; }
  .landing-page .header-inner .brand { width: 117px; }
  .landing-page .header-inner .brand img { height: 57px; }
  .landing-page .main-nav { top: 73px; }
  .landing-page .hero { padding-top: 0; }
  .landing-page .hero-art { inset: auto; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 75%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 75%, transparent); }
  .landing-page .hero-foot { gap: 8px; }
  .landing-page .hero-foot > p { max-width: 150px; font-size: 12px; line-height: 1.5; }
  .motion-toggle { flex-shrink: 0; padding-inline: 4px; font-size: 12px; }
  .landing-page .hero-foot > a { width: 22px; }
  .architecture-section { padding-bottom: 64px; }
  .architecture-heading { margin-bottom: 17px; }
  .architecture-heading > p { font-size: 14px; margin-top: 20px; }
  .architecture-layout { gap: 26px; }
  .architecture-art { width: calc(100% + 40px); max-width: none; margin: 0 -20px; }
  .architecture-art figcaption { margin-top: -2px; font-size: 12px; }
  .architecture-section .section-note { margin-top: 27px; }
  .ambient-ribbon { width: 160vw; }
  .ambient-ribbon-three { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-ribbon, .landing-page .hero-art::after, .architecture-image::after { animation: none; }
  .motion-toggle { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .landing-page .site-header, .landing-page .regional-panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: #1a3027; }
  .ambient-field { display: none; }
}

@media (max-width: 1180px) {
  .architecture-layout { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 36px; }
  .orbital-node { width: 150px; }
  .node-surface { gap: 10px; padding: 13px; min-height: 76px; }
  .node-surface strong { font-size: 13px; }
  .orbit-panel h3 { font-size: 28px; }
}
@media (max-width: 980px) {
  .architecture-layout { grid-template-columns: 1fr; gap: 34px; }
  .orbital-stage { width: min(700px,100%); margin-inline: auto; }
  .orbital-node { width: 180px; }
  .node-surface { padding: 16px 18px; gap: 13px; }
  .node-surface strong { font-size: 14px; }
  .orbit-story { display: grid; grid-template-columns: 42px minmax(0,1fr); column-gap: 28px; padding-block: 8px; max-width: 650px; margin-inline: auto; width: 100%; }
  .orbit-story-mark { margin-top: 3px; }
  .orbit-pagination { grid-column: 2; margin-top: 22px; }
  .orbit-panel p { margin-top: 16px; }
}
@media (max-width: 680px) {
  .orbital-stage { aspect-ratio: auto; height: 430px; }
  .orbital-stage .architecture-art { inset: 23% 15% 23%; width: auto; margin: 0; }
  .orbital-node { width: 142px; }
  .node-surface { min-height: 70px; padding: 12px; gap: 9px; border-radius: 12px; }
  .node-surface > .icon { width: 22px; height: 22px; }
  .node-surface strong { font-size: 12px; }
  .node-assets { top: 7%; left: 0; }
  .node-supply { top: 11%; right: 0; }
  .node-network { bottom: 15%; left: 0; }
  .node-security { bottom: 11%; right: 0; }
  .orbital-halo { inset: 22% 2% 22%; }
  .architecture-layout { gap: 32px; }
  .orbit-story { display: block; padding: 0; }
  .orbit-story-mark { display: none; }
  .orbit-panel h3 { font-size: 25px; }
  .orbit-panel p { font-size: 14px; margin-top: 16px; }
  .orbit-panel .text-link { margin-top: 18px; }
  .orbit-pagination { margin-top: 23px; }
  .architecture-section .section-note { margin-top: 24px; }
}
@media (max-width: 359px) {
  .orbital-node { width: 131px; }
  .node-surface { padding: 10px; gap: 7px; }
  .node-surface > .icon { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbital-stage *, .orbital-stage *::after { animation: none!important; }
  .orbital-stage .architecture-art, .orbital-node:hover .node-surface, .orbital-node:hover .icon { transform: none!important; }
  .orbit-panel { transform: none; filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .node-surface, .orbital-node[aria-selected="true"] .node-surface { backdrop-filter: none; -webkit-backdrop-filter: none; background: #1e3c2c; }
}