/* The hero's connected-system illustration.
   The SVG draws the artwork; the four named C# states select a perspective. */
.hero .constellation-scene {
    position: relative;
    width: 110%;
    margin: -15px 0 0 -6%;
    aspect-ratio: auto;
    z-index: 1;
    /* 1.3 means 30% faster, only within this globe illustration. */
    --connection-motion-boost: 1.3;
    --connection-speed: calc(1.2 * var(--motion-speed) * var(--connection-motion-boost));
    --connection-transition-speed: calc(var(--transition-speed) * var(--connection-motion-boost));
    animation: enter-right calc(1.3s / var(--motion-speed) / var(--connection-motion-boost)) cubic-bezier(.2,.7,.2,1) both;
}

.constellation-visual { position: relative; width: 100%; aspect-ratio: 760 / 680; }
.scene-parallax {
    width: 100%;
    height: 100%;
    transform: perspective(1100px) rotateX(var(--scene-rx, 0deg)) rotateY(var(--scene-ry, 0deg)) translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0);
    transition: transform calc(.65s / var(--connection-transition-speed)) cubic-bezier(.2,.7,.2,1);
}
.connection-art { width: 100%; height: 100%; overflow: visible; }
.constellation-overline { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; color: #82add6; font-size: 7px; letter-spacing: .18em; white-space: nowrap; }
.constellation-overline > span { width: 25px; height: 1px; background: linear-gradient(90deg, transparent, #34c8ff); }

/* Slow independent paths create depth without rotating the labels. */
.orbital-turn { transform-origin: 380px 340px; animation: orbit-turn calc(90s / var(--connection-speed)) linear infinite; }
.orbital-flow { stroke: #65edff; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 72 928; opacity: .85; animation: orbital-travel calc(18s / var(--connection-speed)) linear infinite; }
.orbit-flow-two { stroke: #36a8ff; stroke-width: 1.5; stroke-dasharray: 42 958; animation-duration: calc(24s / var(--connection-speed)); animation-delay: calc(-6s / var(--connection-speed)); }
.orbital-particle { transform-origin: 380px 340px; animation: orbit-turn calc(54s / var(--connection-speed)) linear infinite; }
.particle-one { animation-delay: calc(-8s / var(--connection-speed)); }
.particle-two { animation-direction: reverse; animation-duration: calc(73s / var(--connection-speed)); animation-delay: calc(-19s / var(--connection-speed)); }
.core-wave { transform-box: fill-box; transform-origin: center; animation: core-breathe calc(6s / var(--connection-speed)) ease-out infinite; }
@keyframes orbit-turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbital-travel { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes core-breathe { 0% { transform: scale(.8); opacity: .6; } 90%, 100% { transform: scale(2.6); opacity: 0; } }

/* A selection brightens one connection and its node, keeping the whole readable. */
.domain-route { opacity: .2; transition: opacity calc(.4s / var(--connection-transition-speed)), stroke-width calc(.4s / var(--connection-transition-speed)); }
.node-halo { fill: #18cfee; opacity: .05; transition: opacity calc(.4s / var(--connection-transition-speed)); }
.node-ring { fill: none; stroke: #45d5f3; stroke-width: .8; opacity: .3; transition: opacity calc(.4s / var(--connection-transition-speed)); }
.node-light { fill: #2bd8f3; transition: fill calc(.4s / var(--connection-transition-speed)); }
.constellation-scene[data-active-domain='science'] .domain-route-science,
.constellation-scene[data-active-domain='nature'] .domain-route-nature,
.constellation-scene[data-active-domain='people'] .domain-route-people,
.constellation-scene[data-active-domain='technology'] .domain-route-technology {
    opacity: .9;
    stroke-width: 1.5;
    animation: connection-travel calc(15s / var(--connection-speed)) linear infinite;
}
.constellation-scene[data-active-domain='science'] .domain-marker-science .node-halo,
.constellation-scene[data-active-domain='nature'] .domain-marker-nature .node-halo,
.constellation-scene[data-active-domain='people'] .domain-marker-people .node-halo,
.constellation-scene[data-active-domain='technology'] .domain-marker-technology .node-halo { opacity: .19; }
.constellation-scene[data-active-domain='science'] .domain-marker-science .node-ring,
.constellation-scene[data-active-domain='nature'] .domain-marker-nature .node-ring,
.constellation-scene[data-active-domain='people'] .domain-marker-people .node-ring,
.constellation-scene[data-active-domain='technology'] .domain-marker-technology .node-ring { opacity: .95; }
.constellation-scene[data-active-domain='science'] .domain-marker-science .node-light,
.constellation-scene[data-active-domain='nature'] .domain-marker-nature .node-light,
.constellation-scene[data-active-domain='people'] .domain-marker-people .node-light,
.constellation-scene[data-active-domain='technology'] .domain-marker-technology .node-light { fill: #c6fbff; filter: url(#orb-point-glow); }
.constellation-scene:has(.domain-button[data-domain='science']:hover) .domain-route-science,
.constellation-scene:has(.domain-button[data-domain='nature']:hover) .domain-route-nature,
.constellation-scene:has(.domain-button[data-domain='people']:hover) .domain-route-people,
.constellation-scene:has(.domain-button[data-domain='technology']:hover) .domain-route-technology { opacity: .8; }
@keyframes connection-travel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }

/* Real HTML buttons remain stable and keyboard accessible while SVG moves. */
.domain-button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid #3584c444;
    border-radius: 5px;
    background: #061b3cd9;
    color: #a8c9e9;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .09em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    transition: border-color calc(.25s / var(--connection-transition-speed)), background calc(.25s / var(--connection-transition-speed)), color calc(.25s / var(--connection-transition-speed)), box-shadow calc(.25s / var(--connection-transition-speed));
}
.domain-button:hover, .domain-button:focus-visible { color: #e6fbff; border-color: #55c9e0; background: #0a3057; }
.domain-button[aria-pressed='true'] { color: #b4f7ff; border-color: #39d0ec9c; background: #083658e8; box-shadow: 0 0 24px #00cfff0a; }
.domain-button-dot { width: 4px; height: 4px; flex-shrink: 0; border-radius: 50%; background: #4388c4; transition: background calc(.25s / var(--connection-transition-speed)), box-shadow calc(.25s / var(--connection-transition-speed)); }
.domain-button[aria-pressed='true'] .domain-button-dot { background: #7ff3ff; box-shadow: 0 0 9px #18d9f5; }
.domain-button-arrow { width: 11px; height: 11px; color: #4ca6d5; }
.domain-button[aria-pressed='true'] .domain-button-arrow { color: #8eebf5; }
.domain-control-science { top: 15%; right: 2%; }
.domain-control-nature { top: 29%; left: 0; }
.domain-control-people { top: 75%; left: 6%; }
.domain-control-technology { top: 61%; right: 0; }

/* One reserved description area prevents layout jumps as the state changes. */
.domain-description {
    position: relative;
    width: 82%;
    min-height: 120px;
    margin: -34px auto 0;
    padding: 14px 18px;
    border: 1px solid #3d7ca047;
    border-left: 2px solid #28bbdf;
    border-radius: 5px;
    background: linear-gradient(115deg, #0b284acc, #071a3799);
}
.domain-description-heading { display: flex; align-items: center; justify-content: space-between; color: #84b2d8; font-size: 7px; letter-spacing: .12em; line-height: 1.5; }
.perspective-code { color: #79dff1; font-family: var(--display); font-size: 8px; letter-spacing: .14em; }
.domain-description h2 { color: #e2f6ff; font-size: 19px; letter-spacing: -.025em; font-weight: 500; line-height: 1.3; margin-top: 8px; }
.domain-description p { color: #9bb9d6; font-size: 12px; line-height: 1.8; margin-top: 6px; }
.hero .constellation-caption { display: flex; position: static; width: 82%; margin: 13px auto 0; justify-content: space-between; align-items: center; gap: 14px; color: #83a1c6; font-size: 7px; line-height: 1.7; letter-spacing: .025em; }
.constellation-caption > span { color: #9ec8e3; }
.constellation-caption > span > span { color: var(--cyan); padding-left: 3px; }

/* The hero now has more fine detail: give it a calm, broad pool of light. */
.hero:has(.constellation-scene) { background: radial-gradient(ellipse at 75% 43%, #0a39766b, transparent 52%), linear-gradient(120deg, #030b20, #041335 70%, #03102b); }

@media (max-width: 1200px) {
    .hero .constellation-scene { width: 112%; margin-left: -6%; }
    .domain-button { font-size: 9px; gap: 7px; padding-inline: 10px; }
    .domain-description { width: 87%; padding-inline: 15px; }
    .hero .constellation-caption { width: 87%; font-size: 6px; }
}
@media (max-width: 960px) {
    .hero .constellation-scene { width: 116%; margin-left: -8%; margin-top: -8px; }
    .domain-button { gap: 5px; padding-inline: 8px; font-size: 8px; letter-spacing: .07em; }
    .domain-button-arrow { width: 9px; height: 9px; }
    .constellation-overline { font-size: 5.5px; letter-spacing: .1em; }
    .domain-description { width: 90%; margin-top: -18px; min-height: 132px; padding: 13px; }
    .domain-description h2 { font-size: 17px; }
    .domain-description p { font-size: 11px; }
    .domain-description-heading { font-size: 6px; }
    .hero .constellation-caption { width: 90%; justify-content: center; font-size: 6px; margin-top: 10px; }
    .constellation-caption > span { display: none; }
}
@media (max-width: 780px) and (min-width: 641px) {
    /* A wider single-column composition keeps the explorer comfortable on tablets. */
    .hero-main { display: flex; flex-direction: column; align-items: stretch; height: auto; min-height: 0; padding-top: 137px; padding-bottom: 24px; gap: 4px; }
    .hero-copy { max-width: 610px; padding-bottom: 0; }
    .hero h1 { font-size: clamp(64px, 9.6vw, 74px); margin-top: 24px; }
    .hero-tagline { font-size: 26px; margin-top: 18px; }
    .hero-description { max-width: 420px; font-size: 14px; margin-top: 20px; }
    .hero-actions { margin-top: 27px; }
    .hero-actions .button { min-height: 54px; font-size: 12px; padding: 16px 24px; gap: 24px; }
    .eyebrow { max-width: none; font-size: 8px; }
    .hero .constellation-scene { width: min(100%, 620px); margin: 4px auto 0; }
    .domain-button { font-size: 10px; padding-inline: 12px; gap: 8px; }
    .domain-button-arrow { width: 11px; height: 11px; }
    .constellation-overline { font-size: 7px; }
    .domain-description { width: 86%; min-height: 120px; padding: 14px 18px; margin-top: -28px; }
    .domain-description h2 { font-size: 19px; }
    .domain-description p { font-size: 12px; }
    .domain-description-heading { font-size: 7px; }
    .hero .constellation-caption { font-size: 7px; }
}
@media (max-width: 640px) {
    .hero .constellation-scene { width: 111%; max-width: 590px; margin: -9px 0 0 -5.5%; align-self: center; }
    .domain-button { min-height: 44px; padding: 9px 7px; gap: 6px; font-size: 9px; letter-spacing: .08em; }
    .domain-button-arrow { width: 10px; height: 10px; }
    .constellation-overline { font-size: 6px; top: 6%; }
    .domain-control-nature { left: 6%; top: 24%; }
    .domain-control-people { left: 4%; }
    .domain-control-science { top: 14%; right: 1%; }
    .domain-description { width: 88%; margin-top: -24px; padding: 13px 14px; min-height: 127px; }
    .domain-description h2 { font-size: 18px; }
    .domain-description p { font-size: 10.5px; line-height: 1.8; }
    .domain-description-heading { font-size: 6.5px; }
    .hero .constellation-caption { width: 88%; margin-top: 11px; margin-bottom: 20px; font-size: 7px; }
}
@media (max-width: 360px) {
    .domain-button { font-size: 8px; gap: 5px; padding-inline: 6px; }
    .domain-button-arrow { width: 8px; height: 8px; }
    .domain-description { min-height: 139px; }
    .domain-description h2 { font-size: 17px; }
    .constellation-overline { font-size: 5px; }
    .domain-control-nature { top: 20%; }
}
@media (prefers-reduced-motion: reduce) {
    .scene-parallax { transform: none; transition: none; }
    .orbital-turn, .orbital-particle, .orbital-flow, .core-wave, .domain-route { animation: none !important; }
    .domain-button, .domain-route, .node-halo, .node-ring { transition: none; }
}


/* A stacked hero grows with its artwork instead of inheriting the desktop cap. */
@media (max-width: 780px) {
    .hero-main { max-height: none; }
}
@media (max-width: 960px) {
    .hero .constellation-caption > .caption-instruction { display: inline; }
}