/* Replace the black-and-white slab with an abstract 3D stage object. */
.hero{perspective:1400px;perspective-origin:72% 48%}
.hero:after{display:none!important}
.hero>*:not(.kinetic-orbit){position:relative;z-index:1}
.kinetic-orbit{position:absolute;right:4%;bottom:8%;z-index:0;width:clamp(118px,17vw,240px);aspect-ratio:3/4;transform-style:preserve-3d;will-change:transform;animation:orbitTurn 10s cubic-bezier(.55,.02,.24,1) infinite}
.kinetic-orbit:before{content:"";position:absolute;inset:9% -24%;border:2px solid rgba(17,17,17,.75);border-radius:50%;transform:rotateX(68deg) rotateZ(-22deg) translateZ(14px);box-shadow:0 0 0 8px rgba(243,240,233,.15)}
.kinetic-orbit:after{content:"";position:absolute;inset:10% 11%;background:linear-gradient(145deg,#f3f0e9 0 18%,var(--ochre) 18% 49%,var(--terra) 49% 78%,#111 78%);clip-path:polygon(50% 0,100% 19%,81% 100%,16% 83%,0 27%);box-shadow:25px 25px 0 rgba(17,17,17,.23),-12px 15px 0 rgba(243,240,233,.48);transform:translateZ(36px) rotateZ(12deg)}
.kinetic-orbit span{position:absolute;left:26%;top:28%;width:49%;aspect-ratio:1;background:rgba(17,17,17,.9);border-radius:50%;box-shadow:0 0 0 9px var(--paper,#f3f0e9),0 0 0 11px rgba(17,17,17,.3);transform:translateZ(69px)}
.kinetic-orbit i{position:absolute;left:45%;top:43%;width:2px;height:98px;background:var(--paper,#f3f0e9);transform:translateZ(78px) rotate(28deg);transform-origin:top}
@keyframes orbitTurn{0%,13%{transform:rotateY(0) rotateX(0) rotateZ(-4deg)}33%{transform:rotateY(78deg) rotateX(13deg) rotateZ(9deg)}54%{transform:rotateY(182deg) rotateX(-8deg) rotateZ(-7deg)}78%{transform:rotateY(286deg) rotateX(11deg) rotateZ(8deg)}100%{transform:rotateY(360deg) rotateX(0) rotateZ(-4deg)}}

/* A small directional system: arrows move, then breathe, without competing with copy. */
.index:after{content:"↔";display:inline-block;margin-left:13px;color:var(--terra);font:20px/.6 Arial,sans-serif;animation:arrowDrift 1.7s ease-in-out infinite}
.kicker:before{content:"↗";display:inline-block;margin-right:8px;color:var(--ink);animation:arrowLift 1.45s ease-in-out infinite}
.section:nth-of-type(even) .kicker:before{content:"↙";animation-direction:reverse}
.button:after{content:"↔";display:inline-block;margin-left:9px;font:16px/.5 Arial,sans-serif;animation:arrowDrift 1.35s ease-in-out infinite}
.card:before{content:"↗";position:absolute;right:17px;top:17px;z-index:2;font:18px/.8 Arial,sans-serif;opacity:.7;animation:arrowLift 1.6s ease-in-out infinite}
@keyframes arrowDrift{0%,100%{transform:translateX(-2px)}50%{transform:translateX(5px)}}
@keyframes arrowLift{0%,100%{transform:translate(-1px,2px)}50%{transform:translate(4px,-4px)}}

@media(max-width:720px){
  .hero{perspective:900px;perspective-origin:80% 47%}
  .kinetic-orbit{width:34vw;right:3%;bottom:14%;animation-duration:8.2s}
  .index:after{margin-left:8px;font-size:16px}
  .card:before{right:14px;top:14px}
}
@media(prefers-reduced-motion:reduce){.hero:after,.index:after,.kicker:before,.button:after,.card:before{animation:none!important}}