/* Homepage-only, native CSS 3D. Static by default: JavaScript opts into motion. */
.page-home .hero--immersive {
    --hero-text: #e0e7f6;
    --hero-edge: rgb(180 199 239 / 22%);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(3.5rem, 5.7vw, 6rem) 0 6rem;
    color: #fff;
    background: radial-gradient(ellipse at 85% 35%, rgb(17 43 117 / 72%), transparent 58%),
        radial-gradient(ellipse at 45% 100%, rgb(17 43 117 / 30%), transparent 55%), #050b1a;
    border-bottom: 1px solid rgb(212 184 16 / 20%);
}
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-atmosphere__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgb(121 157 238 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(121 157 238 / 5%) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: linear-gradient(90deg, transparent 28%, #000);
}
.hero-atmosphere__arc { position: absolute; width: 1100px; height: 1100px; left: 56%; top: -650px; border: 1px solid rgb(212 184 16 / 13%); border-radius: 50%; }
.page-home .hero--immersive .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 4.5rem);
    row-gap: 2rem;
    align-items: center;
    min-height: 0;
}
.page-home .hero--immersive .hero-copy { display: block; grid-column: 1; grid-row: 1; min-width: 0; padding: 0; max-width: none; }
.page-home .hero--immersive .hero-copy > .eyebrow { color: #e2cc5f; margin: 0 0 1.9rem; font-size: .74rem; line-height: 1.7; }
.page-home .hero--immersive .gold-dot { display: inline-block; width: 7px; height: 7px; margin-right: .65rem; border-radius: 50%; background: #d4b810; box-shadow: 0 0 0 5px rgb(212 184 16 / 9%); }
.page-home .hero--immersive .eyebrow::before { display: none; }
.page-home .hero--immersive h1 {
    max-width: 13ch;
    margin: 0;
    color: #fff;
    font-size: clamp(3.25rem, 5.1vw, 6rem);
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: 1.055;
    overflow-wrap: anywhere;
}
.page-home .hero--immersive h1 em { display: block; color: #e2cc5f; font-style: normal; }
.page-home .hero--immersive .hero-intro { max-width: 34rem; margin-top: 1.7rem; padding: 0; border-radius: 0; background: transparent; }
.page-home .hero--immersive .hero-subtitle { color: #f3f5fc; font-size: 1.1rem; line-height: 1.6; margin: 0 0 .7rem; }
.page-home .hero--immersive .lead { color: var(--hero-text); max-width: 32rem; font-size: clamp(1rem, 1.08vw, 1.18rem); line-height: 1.75; margin: 0 0 1.8rem; }
.page-home .hero--immersive .button-group { display: flex; flex-wrap: wrap; gap: .8rem; }
.page-home .hero--immersive .button { white-space: normal; text-align: center; font-size: .88rem; }
.page-home .hero--immersive .button-gold { color: #07163f; background: #d4b810; border-color: #d4b810; box-shadow: 0 8px 30px rgb(212 184 16 / 16%); }
.page-home .hero--immersive .button-gold:hover { background: #e2cc5f; border-color: #e2cc5f; box-shadow: 0 12px 36px rgb(212 184 16 / 23%); }
.page-home .hero--immersive .button-outline { color: #fff; border-color: rgb(224 231 246 / 48%); background: rgb(255 255 255 / 3%); }
.page-home .hero--immersive .button-outline:hover { color: #fff; background: rgb(255 255 255 / 10%); border-color: #e2cc5f; }
.page-home .hero--immersive :is(a, button):focus-visible { outline: 3px solid #e2cc5f; outline-offset: 5px; }
.page-home .hero--immersive .hero-art { grid-column: 2; grid-row: 1; width: 100%; max-width: none; margin: 0; padding: 0; min-width: 0; z-index: 1; }
.page-home .hero--immersive .hero-art::before { display: none; }
.page-home .hero--immersive .hero-scroll { grid-column: 1 / -1; grid-row: 2; justify-self: start; align-self: auto; margin: 0; color: #d2dcf1; font-size: .68rem; letter-spacing: .12em; }
.page-home .hero--immersive .hero-scroll span { border-color: rgb(224 231 246 / 38%); color: #e2cc5f; }
.page-home .hero--immersive .hero-scroll:hover span { border-color: #e2cc5f; background: rgb(212 184 16 / 10%); }

/* Perspective is inside hero-art: no conflict with the existing GSAP reveal. */
.hero-scene {
    --cube-size: 166px;
    --cube-half: 83px;
    position: relative;
    width: 100%;
    height: clamp(370px, 31vw, 490px);
    perspective: 1100px;
    perspective-origin: 50% 40%;
    pointer-events: none;
}
.hero-scene__light { position: absolute; inset: 0 -20% -10%; background: radial-gradient(ellipse at 50% 40%, rgb(48 86 184 / 28%), transparent 60%); }
.hero-scene__floor {
    position: absolute;
    left: 10%; right: 10%; bottom: 5%; height: 42%;
    transform: rotateX(65deg);
    border: 1px solid rgb(167 192 247 / 15%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgb(3 8 21 / 85%) 15%, rgb(47 80 158 / 28%) 45%, transparent 69%);
    box-shadow: 0 0 60px rgb(35 75 174 / 14%), inset 0 0 35px rgb(105 143 228 / 10%);
}
.hero-scene__floor::after { content: ""; position: absolute; inset: -12%; border: 1px dashed rgb(212 184 16 / 25%); border-radius: inherit; }
.hero-scene__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--hero-tilt-x, 0deg)) rotateY(var(--hero-tilt-y, 0deg)); transition: transform .45s ease-out; }
.hero-scene__orbit {
    position: absolute;
    top: 50%; left: 50%;
    width: 340px; height: 340px;
    margin: -170px 0 0 -170px;
    border: 3px solid #d4b810;
    border-radius: 50%;
    transform-style: preserve-3d;
    transform: rotateX(64deg) rotateY(-15deg) rotateZ(-20deg);
    box-shadow: 0 0 18px rgb(212 184 16 / 12%), inset 0 0 0 1px #f7e68c, 0 3px 0 #776306;
}
.hero-scene__orbit--blue { width: 320px; height: 320px; margin: -160px 0 0 -160px; border: 2px solid #436ccc; box-shadow: 0 0 20px rgb(67 108 204 / 25%), 0 3px 0 #152c62; transform: rotateX(-30deg) rotateY(60deg) rotateZ(24deg); }
.hero-scene__orbit--fine { width: 390px; height: 390px; margin: -195px 0 0 -195px; border: 1px solid rgb(185 204 245 / 21%); box-shadow: none; transform: rotateX(13deg) rotateY(-24deg) rotateZ(-20deg); }
.hero-scene__orbit i { position: absolute; top: 11%; left: 12%; width: 12px; height: 12px; border-radius: 50%; background: #fae779; box-shadow: 0 0 18px rgb(250 231 121 / 45%); }
.hero-scene__orbit--blue i { width: 9px; height: 9px; background: #8eaaf1; box-shadow: 0 0 15px rgb(142 170 241 / 40%); }
.hero-scene__core { position: absolute; left: 50%; top: 50%; width: var(--cube-size); height: var(--cube-size); margin: calc(var(--cube-half) * -1) 0 0 calc(var(--cube-half) * -1); transform-style: preserve-3d; transform: translateY(-6px); }
.hero-scene__cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(-28deg) rotateZ(-8deg); }
.hero-scene__face { position: absolute; inset: 0; border: 1px solid rgb(228 204 87 / 75%); background: linear-gradient(145deg, #18397e, #091632); backface-visibility: hidden; }
.hero-scene__face--front { display: grid; place-items: center; transform: translateZ(var(--cube-half)); background: linear-gradient(145deg, #1b3e8b, #0b1c43 72%); box-shadow: inset 0 0 32px rgb(83 125 220 / 12%); }
.hero-scene__face--front::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgb(228 204 87 / 19%); }
.hero-scene__face--front img { width: 72px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 9px rgb(0 0 0 / 25%)); }
.hero-scene__face--back { transform: rotateY(180deg) translateZ(var(--cube-half)); }
.hero-scene__face--right { transform: rotateY(90deg) translateZ(var(--cube-half)); background: linear-gradient(110deg, #183b86, #112b75 70%, #0c1f50); display: grid; place-items: center; }
.hero-scene__face--right span { width: 46%; height: 46%; border: 1px solid rgb(225 203 95 / 50%); transform: rotate(45deg); box-shadow: 0 0 0 13px rgb(225 203 95 / 6%); }
.hero-scene__face--left { transform: rotateY(-90deg) translateZ(var(--cube-half)); background: linear-gradient(145deg, #0a1839, #071026); }
.hero-scene__face--top { transform: rotateX(90deg) translateZ(var(--cube-half)); background: linear-gradient(120deg, #f1dc80, #d4b810 55%, #8d7510); }
.hero-scene__face--bottom { transform: rotateX(-90deg) translateZ(var(--cube-half)); background: #061028; }
.hero-scene__satellite { position: absolute; width: 27px; height: 27px; border: 1px solid #dcc75d; background: linear-gradient(135deg, #ead77d, #94780f); transform: rotateX(-20deg) rotateY(35deg) rotateZ(35deg) translateZ(30px); box-shadow: 6px 6px 0 #776109, 0 15px 25px rgb(0 0 0 / 25%); }
.hero-scene__satellite--one { left: 13%; top: 29%; }
.hero-scene__satellite--two { right: 10%; bottom: 19%; width: 19px; height: 19px; }
.hero-scene__label { position: absolute; display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border: 1px solid var(--hero-edge); border-radius: .7rem; background: #0c1833; color: #e0e7f6; font-size: .72rem; font-weight: 600; box-shadow: 0 12px 35px rgb(0 0 0 / 26%); }
.hero-scene__label span { color: #a8badd; font-size: .59rem; font-weight: 400; }
.hero-scene__label b { color: #e2cc5f; font-size: 1rem; font-weight: 400; }
.hero-scene__label--digital { left: 1%; top: 13%; }
.hero-scene__label--identity { right: 0; top: 35%; }
.hero-scene__label--business { left: 9%; bottom: 13%; }

/* The administrator's image is still visible, with its original alt/caption. */
.hero-photo { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 1rem; max-width: 480px; margin: -.1rem auto 0; padding: .65rem; border: 1px solid var(--hero-edge); border-radius: 1.05rem; background: #0b1630; box-shadow: 0 22px 50px rgb(0 0 0 / 24%); }
.page-home .hero--immersive .hero-image { position: relative; aspect-ratio: 1.5; width: 100%; min-height: 0; border: 0; border-radius: .65rem; background: #112b75; box-shadow: none; overflow: hidden; }
.page-home .hero--immersive .hero-image img { position: static; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: 52% center; }
.page-home .hero--immersive .hero-image::after { display: none; }
.page-home .hero--immersive .art-caption { color: #d2dcf1; text-align: left; font-size: .73rem; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.hero-art-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; margin: 1.1rem auto 0; max-width: 480px; }
.hero-art-signature { color: #b2c2e2; font-size: .64rem; letter-spacing: .02em; }
.hero-motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .5rem .6rem; border: 1px solid rgb(180 199 239 / 30%); border-radius: .6rem; color: #e0e7f6; background: #0c1833; font: inherit; font-size: .65rem; cursor: pointer; }
.hero-motion-toggle[hidden] { display: none; }
.hero-motion-toggle:hover { background: #182c55; border-color: #e2cc5f; }
.hero-motion-toggle[aria-pressed="true"] { border-color: #e2cc5f; }
.hero-motion-toggle:disabled { color: #c3d1ed; cursor: default; background: #0c1833; }

/* Only transforms move; lighting, gradients and shadows remain static. */
@keyframes hero-core-float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(-20px); } }
@keyframes hero-cube-turn { 0%, 100% { transform: rotateX(-14deg) rotateY(-28deg) rotateZ(-8deg); } 50% { transform: rotateX(-6deg) rotateY(-12deg) rotateZ(-3deg); } }
@keyframes hero-orbit-gold { from { transform: rotateX(64deg) rotateY(-15deg) rotateZ(-20deg); } to { transform: rotateX(64deg) rotateY(-15deg) rotateZ(340deg); } }
@keyframes hero-orbit-blue { from { transform: rotateX(-30deg) rotateY(60deg) rotateZ(24deg); } to { transform: rotateX(-30deg) rotateY(60deg) rotateZ(-336deg); } }
@keyframes hero-label-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero--immersive:not([data-motion-state="static"]) .hero-scene__core { animation: hero-core-float 7s ease-in-out infinite paused; }
.hero--immersive:not([data-motion-state="static"]) .hero-scene__cube { animation: hero-cube-turn 13s ease-in-out infinite paused; }
.hero--immersive:not([data-motion-state="static"]) .hero-scene__orbit--gold { animation: hero-orbit-gold 34s linear infinite paused; }
.hero--immersive:not([data-motion-state="static"]) .hero-scene__orbit--blue { animation: hero-orbit-blue 44s linear infinite paused; }
.hero--immersive:not([data-motion-state="static"]) .hero-scene__label { animation: hero-label-float 8s ease-in-out infinite paused; }
.hero-scene__label--identity { animation-delay: -3s !important; }
.hero-scene__label--business { animation-delay: -5s !important; }
.hero--immersive[data-motion-state="running"] .hero-scene :is(.hero-scene__core, .hero-scene__cube, .hero-scene__orbit, .hero-scene__label) { animation-play-state: running; }
.hero--immersive:not([data-motion-state="running"]) .hero-scene__tilt { transition: none; }

@media (min-width: 1600px) { .hero-scene { --cube-size: 190px; --cube-half: 95px; } }
@media (max-width: 1100px) and (min-width: 761px) {
    .page-home .hero--immersive .hero-grid { column-gap: 1.5rem; }
    .page-home .hero--immersive h1 { font-size: clamp(3rem, 5.2vw, 4.1rem); }
    .hero-scene { --cube-size: 135px; --cube-half: 67.5px; height: 370px; }
    .hero-scene__orbit { width: 270px; height: 270px; margin: -135px 0 0 -135px; }
    .hero-scene__orbit--blue { width: 255px; height: 255px; margin: -127.5px 0 0 -127.5px; }
    .hero-scene__orbit--fine { width: 290px; height: 290px; margin: -145px 0 0 -145px; }
    .hero-scene__face--front img { width: 57px; height: 77px; }
    .hero-photo { grid-template-columns: 100px minmax(0, 1fr); gap: .7rem; }
    .hero-art-footer { justify-content: center; }
}
@media (max-width: 760px) {
    .page-home .hero--immersive { padding: 2.6rem 0 5.2rem; }
    .page-home .hero--immersive .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
    .page-home .hero--immersive .hero-copy { grid-column: 1; grid-row: 1; }
    .page-home .hero--immersive .hero-copy > .eyebrow { margin-bottom: 1.3rem; font-size: .67rem; }
    .page-home .hero--immersive h1 { font-size: clamp(2.85rem, 8.5vw, 4.9rem); max-width: 15ch; letter-spacing: -.055em; }
    .page-home .hero--immersive .hero-intro { max-width: 36rem; margin-top: 1.4rem; }
    .page-home .hero--immersive .hero-art { grid-column: 1; grid-row: 2; margin: 0 auto; max-width: 480px; }
    .page-home .hero--immersive .hero-scroll { grid-row: 3; margin-top: .8rem; }
    .hero-scene { height: 360px; --cube-size: 140px; --cube-half: 70px; }
    .hero-scene__orbit { width: 285px; height: 285px; margin: -142.5px 0 0 -142.5px; }
    .hero-scene__orbit--blue { width: 270px; height: 270px; margin: -135px 0 0 -135px; }
    .hero-scene__orbit--fine { width: 310px; height: 310px; margin: -155px 0 0 -155px; }
    .hero-scene__face--front img { width: 62px; height: 83px; }
    .hero-atmosphere__grid { background-size: 60px 60px; mask-image: linear-gradient(180deg, transparent, #000); }
    .hero-art-footer { justify-content: center; }
}
@media (max-width: 540px) {
    .page-home .hero--immersive .button-group { display: grid; grid-template-columns: minmax(0, 1fr); }
    .page-home .hero--immersive .button { width: 100%; }
    .hero-photo { grid-template-columns: 105px minmax(0, 1fr); gap: .75rem; }
    .page-home .hero--immersive .art-caption { font-size: .7rem; }
}
@media (max-width: 360px) {
    .page-home .hero--immersive h1 { font-size: 2.65rem; }
    .hero-scene { height: 310px; --cube-size: 120px; --cube-half: 60px; }
    .hero-scene__orbit { width: 250px; height: 250px; margin: -125px 0 0 -125px; }
    .hero-scene__orbit--blue { width: 230px; height: 230px; margin: -115px 0 0 -115px; }
    .hero-scene__orbit--fine { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
    .hero-scene__face--front img { width: 53px; height: 72px; }
    .hero-scene__label { font-size: .66rem; padding: .5rem .6rem; gap: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hero--immersive .hero-scene * { animation: none !important; transition: none !important; }
    .hero--immersive .hero-scene__tilt { transform: none; }
}
@supports not (transform-style: preserve-3d) {
    .hero-scene__face:not(.hero-scene__face--front) { display: none; }
    .hero-scene__face--front, .hero-scene__cube { transform: none; }
}
@media print {
    .page-home .hero--immersive { color: #112b75; background: #fff; padding: 1rem 0; }
    .page-home .hero--immersive :is(h1, h1 em, .eyebrow, .hero-subtitle, .lead, .button-outline, .hero-scroll) { color: #112b75; }
    .hero-atmosphere, .hero-scene, .hero-motion-toggle, .hero-art-signature { display: none; }
    .hero-photo { background: white; box-shadow: none; }
    .page-home .hero--immersive .art-caption { color: #132343; }
    .page-home .hero--immersive .button-outline,
    .page-home .hero--immersive .button-outline:hover,
    .page-home .hero--immersive .button-outline:focus-visible { color: #112b75; border-color: #112b75; background: #fff; }
    .page-home .hero--immersive .hero-scroll span { color: #112b75; border-color: #112b75; }
    .page-home .hero--immersive * { box-shadow: none !important; transition: none !important; animation: none !important; }
}