/* ============================================================
   ELEXO — deep space layer
   CRM-matched background, dense star sky, procedural Milky Way,
   and the six chapter scenes (no raster images anywhere).
   ============================================================ */

/* ---------- background (same recipe as EvoCRM) ---------- */
body {
    background-color: #0A0512;
    background-image:
        radial-gradient(ellipse 55% 35% at 85% -5%, rgba(139, 92, 246, 0.17), transparent),
        radial-gradient(ellipse 45% 30% at 8% 108%, rgba(217, 70, 239, 0.11), transparent),
        radial-gradient(ellipse 40% 32% at 50% 45%, rgba(99, 102, 241, 0.07), transparent);
    background-attachment: fixed;
}

.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.backdrop__aurora {
    position: absolute;
    inset: -22%;
    background:
        radial-gradient(ellipse 40% 30% at 68% 8%, rgba(139, 92, 246, 0.16), transparent 62%),
        radial-gradient(ellipse 34% 26% at 18% 82%, rgba(217, 70, 239, 0.1), transparent 64%),
        radial-gradient(ellipse 30% 24% at 52% 46%, rgba(99, 102, 241, 0.09), transparent 66%);
    animation: auroraDrift 32s ease-in-out infinite alternate;
}
.backdrop__nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    mix-blend-mode: screen;
    opacity: 0.55;
    will-change: transform;
}
.backdrop__nebula--1 {
    width: 46vw;
    height: 46vw;
    left: -14vw;
    top: 2vh;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 66%);
    animation: nebulaDrift 36s ease-in-out infinite alternate;
}
.backdrop__nebula--2 {
    width: 38vw;
    height: 38vw;
    right: -12vw;
    top: 34vh;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.14), transparent 66%);
    animation: nebulaDrift 44s ease-in-out infinite alternate-reverse;
}
.backdrop__nebula--3 {
    width: 34vw;
    height: 34vw;
    left: 26vw;
    bottom: -16vh;
    background: radial-gradient(circle, rgba(64, 210, 255, 0.09), transparent 68%);
    animation: nebulaDrift 52s ease-in-out infinite alternate;
}

.starfield {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.meteors {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}
.meteor {
    position: absolute;
    left: var(--x, 70%);
    top: var(--y, 8%);
    width: clamp(110px, 13vw, 190px);
    height: 1.4px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(196, 181, 253, 0.55) 55%, #fff 100%);
    box-shadow: 0 0 10px rgba(196, 181, 253, 0.55);
    opacity: 0;
    transform: rotate(var(--rot, 156deg));
    animation: meteorFly var(--dur, 12s) linear var(--delay, 0s) infinite;
    will-change: transform, opacity;
}

.spotlight {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(620px circle at var(--sx, 50%) var(--sy, 18%), rgba(139, 92, 246, 0.11), transparent 62%);
    mix-blend-mode: screen;
}

.vignette {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 90% at 50% 42%, transparent 42%, rgba(5, 3, 10, 0.5) 100%),
        linear-gradient(180deg, rgba(5, 3, 10, 0.35), transparent 18%, transparent 82%, rgba(5, 3, 10, 0.45));
}

/* ============================================================
   Cover — CRM solar system + procedural Milky Way
   ============================================================ */
.galaxy {
    position: absolute;
    left: 50%;
    top: 49%;
    width: 128%;
    height: 128%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    animation: galaxyIn 2s 0.4s ease forwards;
}
.cover__halo {
    position: absolute;
    left: 50%;
    top: 49%;
    width: min(98%, 640px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.18), rgba(64, 210, 255, 0.045) 48%, transparent 72%);
    filter: blur(28px);
    animation: haloPulse 8s ease-in-out infinite;
    pointer-events: none;
}
.solar-system {
    --tilt: 63deg;
    --spin: -17deg;
    position: relative;
    z-index: 2;
    width: min(680px, 51vw, 66vh);
    aspect-ratio: 1 / 0.78;
    perspective: 1150px;
    perspective-origin: 50% 46%;
    container-type: inline-size;
    animation: solarIn 1.6s 0.45s var(--ease) both;
}
.solar-system::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 104%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 20deg, rgba(139,92,246,0) 0%, rgba(139,92,246,.26) 12%, rgba(236,72,153,.16) 24%, rgba(56,189,248,.18) 36%, rgba(139,92,246,0) 52%, rgba(167,139,250,.24) 68%, rgba(244,114,182,.14) 84%, rgba(139,92,246,0) 100%);
    -webkit-mask: radial-gradient(closest-side, transparent 14%, #000 32%, #000 58%, transparent 100%);
    mask: radial-gradient(closest-side, transparent 14%, #000 32%, #000 58%, transparent 100%);
    filter: blur(12px);
    transform: translate(-50%, -50%) rotate(var(--spin)) scaleY(.42) rotate(0deg);
    animation: loginDisc 140s linear infinite;
    pointer-events: none;
}
.solar-shadow {
    position: absolute;
    left: 50%;
    bottom: .5%;
    width: 74%;
    height: 20%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(139,92,246,.36), rgba(88,28,135,.14) 54%, transparent 76%);
    filter: blur(20px);
    transform: translateX(-50%);
    pointer-events: none;
}
.solar-tilt {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotateZ(var(--spin)) rotateX(var(--tilt));
    transform-style: preserve-3d;
}
.solar-system::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,241,190,.55), rgba(251,191,36,.24) 28%, rgba(245,158,11,.09) 50%, transparent 72%);
    transform: translate(-50%, -50%);
    animation: loginSunBreath 6.5s ease-in-out infinite;
    pointer-events: none;
}
.sun-wave {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16%;
    height: 16%;
    border-radius: 50%;
    background: radial-gradient(closest-side, transparent 90%, rgba(253,224,71,.45) 96%, rgba(255,247,214,.7) 98.5%, transparent 100%);
    opacity: 0;
    animation: loginWave 8s cubic-bezier(.16,.6,.36,1) infinite;
    animation-delay: var(--wave-delay, 0s);
    pointer-events: none;
}
.solar-flare {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 82%;
    height: 2px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,.16) 22%, rgba(255,244,214,.9) 50%, rgba(251,191,36,.16) 78%, transparent);
    box-shadow: 0 0 10px rgba(253,224,71,.35);
    mix-blend-mode: screen;
    transform: translate(-50%, -50%);
    animation: loginFlare 6.5s ease-in-out infinite;
    pointer-events: none;
}
.solar-flare::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.5px;
    height: 9cqi;
    background: linear-gradient(180deg, transparent, rgba(255,244,214,.75), transparent);
    transform: translate(-50%, -50%);
}
.sun {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 36%;
    height: 36%;
    transform: translateZ(2px) rotateX(calc(var(--tilt) * -1)) rotateZ(calc(var(--spin) * -1));
}
.sun-corona, .sun-corona::after {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.sun-corona {
    inset: 0;
    background: repeating-conic-gradient(from 0deg, rgba(254,240,138,.55) 0deg 1.3deg, transparent 1.3deg 7.5deg), repeating-conic-gradient(from 3deg, rgba(251,146,60,.4) 0deg .8deg, transparent .8deg 4.6deg), radial-gradient(closest-side, rgba(253,224,71,.85) 40%, rgba(251,146,60,.42) 54%, rgba(245,158,11,.14) 74%, transparent 100%);
    -webkit-mask: radial-gradient(closest-side, transparent 38%, #000 42%, rgba(0,0,0,.32) 64%, transparent 100%);
    mask: radial-gradient(closest-side, transparent 38%, #000 42%, rgba(0,0,0,.32) 64%, transparent 100%);
    filter: blur(1.2px);
    animation: loginOrbit 90s linear infinite;
}
.sun-corona::after {
    content: '';
    inset: 8%;
    background: repeating-conic-gradient(from 1deg, rgba(255,251,235,.5) 0deg .9deg, transparent .9deg 11deg);
    -webkit-mask: radial-gradient(closest-side, transparent 44%, #000 48%, transparent 92%);
    mask: radial-gradient(closest-side, transparent 44%, #000 48%, transparent 92%);
    animation: loginOrbit 55s linear infinite reverse;
}
.sun-core {
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #FFFBEB 0, #FEF08A 22%, #FBBF24 50%, #F59E0B 72%, #EA580C 92%, #B9370B 100%);
}
.sun-core::before, .sun-core::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-mask: radial-gradient(closest-side, #000 96%, transparent 100%);
    mask: radial-gradient(closest-side, #000 96%, transparent 100%);
}
.sun-core::before {
    background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.38) 8%, transparent 18%, rgba(154,52,18,.32) 30%, transparent 40%, rgba(255,247,200,.34) 55%, transparent 66%, rgba(194,65,12,.3) 80%, transparent 90%);
    filter: blur(3px);
    animation: loginOrbit 16s linear infinite;
}
.sun-core::after {
    background: radial-gradient(circle at 30% 34%, rgba(255,255,255,.5), transparent 24%), radial-gradient(circle at 70% 62%, rgba(154,52,18,.34), transparent 26%), radial-gradient(circle at 42% 76%, rgba(255,237,180,.42), transparent 20%), radial-gradient(circle at 74% 26%, rgba(194,65,12,.28), transparent 18%), radial-gradient(circle at 50% 50%, transparent 62%, rgba(154,52,18,.35) 100%);
    filter: blur(2px);
    animation: loginOrbit 24s linear infinite reverse;
}
.orbit {
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    border: 1px solid rgba(167,139,250,.14);
    animation: loginOrbit var(--dur,32s) linear infinite;
    animation-delay: var(--delay,0s);
    transform-style: preserve-3d;
}
.orbit::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 72%, var(--trail,rgba(196,181,253,.85)) 100%);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px), transparent 100%);
    mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px), transparent 100%);
    pointer-events: none;
}
.orbit-mercury { width:26%;height:26%;border-color:rgba(203,213,225,.16);--trail:rgba(226,232,240,.75) }
.orbit-venus { width:36%;height:36%;border-color:rgba(251,191,36,.15);--trail:rgba(252,211,77,.8) }
.orbit-earth { width:47%;height:47%;border-color:rgba(96,165,250,.22);--trail:rgba(96,165,250,.95) }
.orbit-mars { width:57%;height:57%;border-color:rgba(251,146,60,.18);border-style:dashed;--trail:rgba(251,113,75,.85) }
.orbit-jupiter { width:70%;height:70%;border-color:rgba(245,158,11,.13);--trail:rgba(253,186,116,.8) }
.orbit-saturn { width:84%;height:84%;border-color:rgba(196,181,253,.2);--trail:rgba(216,180,254,.85) }
.orbit-uranus { width:97%;height:97%;border-color:rgba(103,232,249,.16);--trail:rgba(103,232,249,.85) }
.asteroid-belt {
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226,214,255,.95) 0 .9px, transparent 1.5px) 0 0/19px 17px, radial-gradient(circle, rgba(253,186,116,.8) 0 .7px, transparent 1.3px) 9px 5px/23px 21px, radial-gradient(circle, rgba(255,255,255,.7) 0 .6px, transparent 1.1px) 4px 11px/13px 29px;
    -webkit-mask: radial-gradient(closest-side, transparent 0 86%, #000 89% 92%, transparent 95%);
    mask: radial-gradient(closest-side, transparent 0 86%, #000 89% 92%, transparent 95%);
    opacity: .55;
    animation: loginOrbit 110s linear infinite;
    pointer-events: none;
}
.planet-slot {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}
.planet {
    position: relative;
    display: block;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    animation: loginCounterOrbit var(--dur,32s) linear infinite;
    animation-delay: var(--delay,0s);
    transform-style: preserve-3d;
}
.planet::before {
    content: '';
    position: absolute;
    inset: -.5px;
    border-radius: 50%;
    background: radial-gradient(110% 80% at 50% 104%, rgba(255,248,225,.42), transparent 46%), linear-gradient(180deg, rgba(5,2,18,.92) 0%, rgba(5,2,18,.66) 32%, rgba(5,2,18,0) 62%);
    animation: loginShade var(--dur,32s) linear infinite;
    animation-delay: var(--delay,0s);
    pointer-events: none;
}
.p-mercury { --size:calc(2.4px + 1.7cqi);background:radial-gradient(circle at 50% 50%,#F3EFFB,#A79FC0 55%,#4B4560);box-shadow:0 0 10px rgba(203,213,225,.35) }
.p-venus { --size:calc(3.4px + 2.2cqi);background:radial-gradient(ellipse at 40% 40%,rgba(255,255,255,.35),transparent 40%),radial-gradient(circle at 50% 50%,#FFF1CE,#E0A34D 58%,#7C4D18);box-shadow:0 0 14px rgba(251,191,36,.4) }
.p-earth { --size:calc(3.8px + 2.93cqi);background:radial-gradient(circle at 34% 40%,rgba(74,222,128,.75),transparent 22%),radial-gradient(circle at 66% 62%,rgba(74,222,128,.6),transparent 26%),radial-gradient(ellipse 60% 18% at 46% 22%,rgba(255,255,255,.6),transparent 70%),radial-gradient(circle at 50% 50%,#B8F0FF,#3B82F6 55%,#1D3F8F);box-shadow:0 0 0 1px rgba(147,197,253,.32),0 0 22px rgba(59,130,246,.6) }
.p-mars { --size:calc(2.4px + 2.2cqi);background:radial-gradient(ellipse 50% 16% at 50% 8%,rgba(255,255,255,.7),transparent 80%),radial-gradient(circle at 50% 50%,#FFC9BA,#E05D44 60%,#6E2410);box-shadow:0 0 13px rgba(224,93,68,.45) }
.p-jupiter { --size:calc(4.3px + 3.66cqi);background:radial-gradient(ellipse 22% 13% at 64% 64%,rgba(190,70,40,.9),transparent 80%),radial-gradient(circle at 50% 50%,transparent 55%,rgba(80,45,20,.55)),repeating-linear-gradient(7deg,#C98E5A 0 9%,#EBC79B 9% 19%,#B98252 19% 26%,#F3DDBB 26% 32%);box-shadow:0 0 20px rgba(217,160,102,.45) }
.p-saturn { --size:calc(3.8px + 2.93cqi);background:repeating-linear-gradient(-4deg,transparent 0 14%,rgba(154,106,47,.25) 14% 20%),radial-gradient(circle at 50% 50%,#FBF0D9,#E8C88A 52%,#9A6A2F);box-shadow:0 0 18px rgba(232,200,138,.45) }
.p-saturn::after { content:'';position:absolute;left:50%;top:50%;width:235%;height:74%;border-radius:50%;background:radial-gradient(closest-side,transparent 58%,rgba(236,220,180,.35) 62%,rgba(255,240,205,.85) 72%,rgba(196,160,110,.45) 80%,rgba(236,220,180,.7) 88%,transparent 96%);box-shadow:0 0 12px rgba(232,200,138,.3);transform:translate(-50%,-50%) rotate(-20deg) }
.p-uranus { --size:calc(2.4px + 2.2cqi);background:radial-gradient(circle at 50% 50%,#E4FDFF,#67E8F9 55%,#0E7490);box-shadow:0 0 14px rgba(103,232,249,.45) }
.p-uranus::after { content:'';position:absolute;left:50%;top:50%;width:165%;height:44%;border-radius:50%;border:1px solid rgba(165,243,252,.6);transform:translate(-50%,-50%) rotate(76deg) }
.moon-orbit { position:absolute;inset:calc(-3.4px - 1.7cqi);border-radius:50%;border:1px solid rgba(255,255,255,.12);animation:loginOrbit 7s linear infinite }
.moon { position:absolute;top:0;left:50%;width:calc(1.5px + .73cqi);height:calc(1.5px + .73cqi);border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF,#C7C2D8 72%);box-shadow:0 0 8px rgba(255,255,255,.55);transform:translate(-50%,-50%) }
.comet-track { display:none;position:absolute;inset:6% 2%;z-index:2;transform:rotate(-26deg);pointer-events:none }
@supports (offset-path:ellipse(10px 10px at 50% 50%)) { .comet-track { display:block } }
.comet { position:absolute;top:0;left:0;width:17%;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(125,211,252,.22) 40%,rgba(186,230,253,.6) 80%,rgba(255,255,255,.95));filter:drop-shadow(0 0 4px rgba(125,211,252,.85));offset-path:ellipse(44% 34% at 56% 50%);offset-anchor:100% 50%;offset-rotate:auto;transform-origin:100% 50%;animation:loginComet 24s cubic-bezier(.45,.05,.55,.95) infinite,loginCometTail 24s ease-in-out infinite }
.comet::after { content:'';position:absolute;top:50%;right:-2px;width:calc(2px + .8cqi);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#FFF 0 35%,rgba(186,230,253,.8) 60%,transparent 72%);box-shadow:0 0 10px 2px rgba(125,211,252,.75);transform:translateY(-50%) }

.cover__chips { position: absolute; inset: 0; pointer-events: none; }
.cover__chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.68rem;
    color: #E5DFF5;
    background: rgba(15, 9, 30, 0.58);
    border: 1px solid rgba(167, 139, 250, 0.22);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgba(3, 1, 10, 0.4);
    white-space: nowrap;
    animation: chipFloat 7.5s ease-in-out infinite;
}
.cover__chip i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-a);
    box-shadow: 0 0 8px var(--brand-a);
}
.cover__chip--1 { top: 10%; right: 1%; }
.cover__chip--2 { top: 25%; left: -1%; animation-delay: 1.1s; }
.cover__chip--3 { bottom: 27%; right: -2%; animation-delay: 2.2s; }
.cover__chip--3 i { background: var(--brand-c); box-shadow: 0 0 8px var(--brand-c); }
.cover__chip--4 { bottom: 11%; left: 4%; animation-delay: 3.1s; }
.cover__chip--4 i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* ============================================================
   Scene chips
   ============================================================ */
.scene__chip {
    position: absolute;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.67rem;
    color: #DCD5EE;
    background: rgba(15, 9, 30, 0.62);
    border: 1px solid rgba(167, 139, 250, 0.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 28px rgba(3, 1, 10, 0.35);
    white-space: nowrap;
    pointer-events: none;
    animation: chipFloat 8s ease-in-out infinite;
}
.scene__chip::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-b);
    box-shadow: 0 0 8px var(--brand-b);
}
.scene__chip--b { animation-delay: 1.3s; }
.scene__chip--c { animation-delay: 2.6s; }

.scene--spark .scene__chip--a { top: 4%; right: 2%; }
.scene--spark .scene__chip--b { bottom: 15%; left: 0; }
.scene--spark .scene__chip--c { bottom: 4%; right: 12%; }
.scene--root .scene__chip--a { top: 2%; right: 3%; }
.scene--root .scene__chip--b { top: 40%; left: -2%; }
.scene--root .scene__chip--c { bottom: 4%; right: 2%; }
.scene--face .scene__chip--a { top: 4%; right: 0; }
.scene--face .scene__chip--b { bottom: 10%; left: 0; }
.scene--face .scene__chip--c { top: 50%; left: -3%; }
.scene--brain .scene__chip--a { top: 0; right: 2%; }
.scene--brain .scene__chip--b { bottom: 4%; left: 2%; }
.scene--brain .scene__chip--c { top: 42%; left: -3%; }
.scene--growth .scene__chip--a { top: 0; right: 5%; }
.scene--growth .scene__chip--b { bottom: 2%; left: 5%; }
.scene--growth .scene__chip--c { top: 36%; left: -1%; }
.scene--flight .scene__chip--a { top: 8%; right: 0; }
.scene--flight .scene__chip--b { bottom: 10%; left: 1%; }

/* ============================================================
   Scene I — the spark
   ============================================================ */
.orb {
    position: relative;
    width: clamp(225px, 30vw, 340px);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transform: rotateX(10deg);
    animation: orbSpin 46s linear infinite;
}
.orb__halo {
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(64, 210, 255, 0.16), rgba(139, 92, 246, 0.12) 46%, transparent 68%);
    filter: blur(18px);
    animation: auraPulse 7s ease-in-out infinite;
}
.orb__ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, 0.32);
    transform-style: preserve-3d;
}
.orb__ring--1 {
    inset: 0;
    transform: rotateX(72deg) rotateZ(18deg);
    border-color: rgba(64, 210, 255, 0.32);
    box-shadow: 0 0 44px rgba(64, 210, 255, 0.1);
}
.orb__ring--2 {
    inset: 12%;
    transform: rotateX(66deg) rotateZ(-40deg);
    border-color: rgba(167, 139, 250, 0.34);
}
.orb__ring--3 {
    inset: 24%;
    transform: rotateX(78deg) rotateZ(70deg);
    border-color: rgba(217, 70, 239, 0.26);
}
.orb__ring::after {
    content: '';
    position: absolute;
    top: -2.5px;
    left: calc(50% - 2.5px);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px #40D2FF;
}
.orb__core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff 0%, #B7EBFF 15%, #7C6BFF 46%, #4C1D95 78%, #2A1050 100%);
    box-shadow:
        0 0 48px rgba(99, 102, 241, 0.6),
        0 0 110px rgba(139, 92, 246, 0.32),
        inset -12px -16px 30px rgba(5, 3, 10, 0.55);
    animation: corePulse 6s ease-in-out infinite;
}
.orb__core i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 68% 74%, transparent 40%, rgba(217, 70, 239, 0.35) 72%, transparent 74%);
    mix-blend-mode: screen;
}
.orb__dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9EE8FF;
    box-shadow: 0 0 14px #40D2FF;
}
.orb__dot--1 { top: 6%; left: 24%; animation: sparkFloat 6s ease-in-out infinite; }
.orb__dot--2 { top: 62%; left: 2%; width: 5px; height: 5px; background: #E9D5FF; box-shadow: 0 0 12px #C467FF; animation: sparkFloat 7.5s 0.8s ease-in-out infinite; }
.orb__dot--3 { top: 30%; right: 0; width: 4px; height: 4px; background: #fff; animation: sparkFloat 5.4s 1.6s ease-in-out infinite; }

/* ============================================================
   Scene II — root / infrastructure
   ============================================================ */
.iso {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(58deg) rotateZ(-38deg);
}
.iso--stack {
    width: clamp(220px, 28vw, 320px);
    height: clamp(190px, 26vh, 250px);
    animation: isoBreath 15s ease-in-out infinite;
}
.iso__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 128%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) translateZ(-46px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.28), transparent 66%);
    filter: blur(14px);
}
.iso__base {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 118%;
    height: 118%;
    transform: translate(-50%, -50%) translateZ(-34px);
    border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, 0.16);
    box-shadow: 0 0 60px rgba(139, 92, 246, 0.12), inset 0 0 50px rgba(139, 92, 246, 0.08);
}
.iso__beam {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72%;
    height: 1px;
    transform: translate(-50%, -50%) translateZ(158px);
    background: linear-gradient(90deg, transparent, rgba(64, 210, 255, 0.65), transparent);
    box-shadow: 0 0 18px rgba(64, 210, 255, 0.5);
}
.slab {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) translateZ(var(--z, 0px));
    border-radius: 18px;
    border: 1px solid rgba(167, 139, 250, 0.42);
    border-bottom-color: rgba(196, 181, 253, 0.6);
    background: linear-gradient(150deg, rgba(34, 24, 64, 0.95), rgba(12, 7, 26, 0.97));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -20px 34px -20px rgba(64, 210, 255, 0.4),
        0 0 34px rgba(139, 92, 246, 0.14);
    transform-style: preserve-3d;
}
.slab:nth-child(4) { width: 100%; opacity: 1; }
.slab:nth-child(5) { width: 93%; opacity: 0.92; }
.slab:nth-child(6) { width: 86%; opacity: 0.84; }
.slab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 24%);
    pointer-events: none;
}
.slab::after {
    content: '';
    position: absolute;
    right: 16px;
    bottom: 13px;
    width: 46%;
    height: 6px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, rgba(167, 139, 250, 0.5) 0 6px, transparent 6px 14px);
    opacity: 0.75;
}
.slab__grid {
    position: absolute;
    inset: 12px;
    border-radius: 10px;
    background-image:
        linear-gradient(rgba(167, 139, 250, 0.17) 1px, transparent 1px),
        linear-gradient(90deg, rgba(167, 139, 250, 0.17) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.8;
}
.slab__leds {
    position: absolute;
    bottom: 14px;
    left: 16px;
    display: flex;
    gap: 6px;
}
.slab__leds i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #67E8F9;
    box-shadow: 0 0 8px #67E8F9;
}
.slab__leds i:nth-child(2) { background: #A78BFA; box-shadow: 0 0 8px #A78BFA; }
.slab__leds i:nth-child(3) { background: #34D399; box-shadow: 0 0 8px #34D399; }
.slab__label {
    position: absolute;
    top: 14px;
    left: 16px;
    font-family: var(--latin);
    font-size: 6.5px;
    letter-spacing: 0.22em;
    color: rgba(196, 181, 253, 0.5);
}

/* ============================================================
   Scene III — face / design & build
   ============================================================ */
.build {
    position: relative;
    width: clamp(290px, 37vw, 450px);
    aspect-ratio: 1.12;
    transform-style: preserve-3d;
    animation: buildFloat 11s ease-in-out infinite;
}
.build__glow {
    position: absolute;
    inset: 4% -2%;
    background: radial-gradient(circle at 50% 56%, rgba(139, 92, 246, 0.3), transparent 62%);
    filter: blur(26px);
}
.pane {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    height: 60%;
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-radius: 15px;
    border: 1px solid rgba(167, 139, 250, 0.28);
    background: linear-gradient(160deg, rgba(26, 17, 50, 0.94), rgba(9, 5, 20, 0.96));
    box-shadow: 0 30px 60px rgba(3, 1, 10, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    overflow: hidden;
    transform-style: preserve-3d;
}
.pane--back {
    transform: translate(-64%, -62%) rotateY(-22deg) rotateX(8deg) translateZ(-74px) scale(0.86);
    opacity: 0.42;
}
.pane--mid {
    transform: translate(-57%, -56%) rotateY(-18deg) rotateX(5deg) translateZ(-38px) scale(0.93);
    opacity: 0.68;
}
.pane--front {
    transform: translate(-48%, -48%) rotateY(-11deg) rotateX(3deg) translateZ(10px);
}
.pane__bar { display: flex; align-items: center; gap: 4px; height: 8px; }
.pane__bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(167, 139, 250, 0.45); }
.pane__bar i:nth-child(1) { background: rgba(248, 113, 113, 0.65); }
.pane__bar i:nth-child(2) { background: rgba(251, 191, 36, 0.65); }
.pane__bar i:nth-child(3) { background: rgba(52, 211, 153, 0.65); }
.pane__bar b {
    flex: 1;
    height: 6px;
    margin-inline-start: 6px;
    border-radius: 3px;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.12);
}
.pane__hero {
    position: relative;
    flex: 1 1 40%;
    min-height: 34%;
    border-radius: 8px;
    background:
        radial-gradient(circle at 74% 30%, rgba(255, 255, 255, 0.22), transparent 42%),
        linear-gradient(120deg, rgba(64, 210, 255, 0.4), rgba(139, 92, 246, 0.45) 55%, rgba(196, 103, 255, 0.32));
    box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.1);
}
.pane__hero em {
    position: absolute;
    left: 9px;
    bottom: 8px;
    width: 34px;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
}
.pane__block { height: 5px; border-radius: 3px; background: rgba(167, 139, 250, 0.22); }
.pane__block--short { width: 58%; }
.pane__row { height: 5px; border-radius: 3px; background: rgba(167, 139, 250, 0.18); }
.pane__row--short { width: 64%; }
.pane__cta {
    width: 38%;
    height: 12px;
    margin-top: auto;
    border-radius: 4px;
    background: linear-gradient(120deg, rgba(167, 139, 250, 0.8), rgba(217, 70, 239, 0.7));
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.35);
}
.pane__tiles { display: flex; gap: 6px; height: 16%; }
.pane__tiles i {
    flex: 1;
    border-radius: 4px;
    border: 1px solid rgba(167, 139, 250, 0.18);
    background: rgba(139, 92, 246, 0.1);
}
.build__ring {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 96%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotateX(72deg) rotateZ(-12deg);
    border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, 0.14);
    box-shadow: 0 0 60px rgba(139, 92, 246, 0.1);
}

/* ============================================================
   Scene IV — brain / CRM core
   ============================================================ */
.core {
    position: relative;
    width: clamp(300px, 38vw, 450px);
    height: clamp(290px, 42vh, 400px);
    transform-style: preserve-3d;
}
.core__aura {
    position: absolute;
    left: 24%;
    top: 50%;
    width: 74%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 70, 239, 0.24), rgba(139, 92, 246, 0.15) 46%, transparent 70%);
    filter: blur(26px);
    animation: auraPulse 7s ease-in-out infinite;
}
.core__ring {
    position: absolute;
    left: 24%;
    top: 50%;
    width: 82%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(167, 139, 250, 0.26);
    transform-style: preserve-3d;
    animation: coreRing 28s linear infinite;
}
.core__ring--2 {
    width: 64%;
    border-color: rgba(64, 210, 255, 0.22);
    animation-duration: 20s;
    animation-direction: reverse;
}
.core__ring--3 {
    width: 46%;
    border-color: rgba(217, 70, 239, 0.22);
    animation-duration: 15s;
}
.core__ring i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.core__ring i::after {
    content: '';
    position: absolute;
    top: -3px;
    left: calc(50% - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px #8D94FF;
}
.core__ring--2 i::after { background: #9EE8FF; box-shadow: 0 0 12px #40D2FF; }
.core__ring--3 i::after { background: #FBCFE8; box-shadow: 0 0 12px #D946EF; }
.core__sphere {
    position: absolute;
    left: 24%;
    top: 50%;
    width: 22%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fff, #C4B5FD 18%, #8B5CF6 48%, #4C1D95 82%);
    box-shadow: 0 0 42px rgba(139, 92, 246, 0.6), 0 0 100px rgba(217, 70, 239, 0.28);
    animation: corePulse 5.5s ease-in-out infinite;
}
.core__sphere i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 70% 76%, transparent 44%, rgba(217, 70, 239, 0.42) 74%, transparent 76%);
    mix-blend-mode: screen;
}
.core__node {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9EE8FF;
    box-shadow: 0 0 10px #40D2FF;
    animation: sparkFloat 6s ease-in-out infinite;
}
.core__node--1 { left: 52%; top: 15%; }
.core__node--2 { left: 13%; top: 70%; animation-delay: 1.4s; background: #FBCFE8; box-shadow: 0 0 10px #D946EF; }

.core__panel {
    position: absolute;
    right: -2%;
    top: 50%;
    width: min(60%, 264px);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 16px;
    border: 1px solid rgba(167, 139, 250, 0.3);
    background: linear-gradient(160deg, rgba(26, 17, 50, 0.95), rgba(9, 5, 20, 0.97));
    box-shadow: 0 28px 60px rgba(3, 1, 10, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    transform: translateY(-50%) rotateY(-16deg) rotateX(5deg) translateZ(50px);
    animation: panelFloat 9s ease-in-out infinite;
    transform-style: preserve-3d;
}
.core__phead { display: flex; align-items: center; gap: 7px; }
.core__pmark {
    width: 24px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(167, 139, 250, 0.22);
}
.core__pmark svg { width: 15px; height: 12px; }
.core__ptitle { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.core__ptitle i { height: 4px; border-radius: 2px; background: rgba(167, 139, 250, 0.28); }
.core__ptitle i:first-child { width: 46%; }
.core__ptitle i:last-child { width: 30%; background: rgba(167, 139, 250, 0.16); }
.core__pdot { width: 6px; height: 6px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px #34D399; }
.core__pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.core__pstats i {
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(167, 139, 250, 0.16);
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.03));
}
.core__pbars { display: flex; align-items: flex-end; gap: 5px; height: 42px; }
.core__pbars i {
    flex: 1;
    height: var(--h);
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, rgba(141, 148, 255, 0.85), rgba(139, 92, 246, 0.18));
    box-shadow: 0 0 12px rgba(141, 148, 255, 0.2);
}
.core__pfoot { display: flex; gap: 5px; }
.core__pfoot i {
    height: 9px;
    flex: 1;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(167, 139, 250, 0.14);
}
.core__pfoot i:last-child { flex: 0 0 34%; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.2); }

/* ============================================================
   Scene V — growth chart
   ============================================================ */
.chart {
    position: relative;
    width: clamp(300px, 38vw, 440px);
}
.chart__glow {
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle at 50% 42%, rgba(64, 210, 255, 0.16), rgba(139, 92, 246, 0.18) 45%, transparent 70%);
    filter: blur(26px);
}
.chart__card {
    position: relative;
    padding: 16px 16px 12px;
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.3);
    background: linear-gradient(160deg, rgba(26, 17, 50, 0.94), rgba(9, 5, 20, 0.96));
    box-shadow: 0 30px 70px rgba(3, 1, 10, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: perspective(900px) rotateY(-12deg) rotateX(6deg);
    animation: chartFloat 12s ease-in-out infinite;
}
.chart__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chart__title { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: rgba(243, 240, 250, 0.86); }
.chart__title i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-a);
    box-shadow: 0 0 8px var(--brand-a);
}
.chart__legend { display: inline-flex; align-items: center; gap: 4px; }
.chart__legend i { width: 5px; height: 5px; border-radius: 50%; background: #40D2FF; }
.chart__legend i:last-of-type { background: #D946EF; margin-inline-start: 5px; }
.chart__legend b { width: 14px; height: 3px; border-radius: 2px; background: rgba(167, 139, 250, 0.28); }
.chart__svg { display: block; width: 100%; height: auto; margin: 8px 0 4px; overflow: visible; }
.chart__line { filter: drop-shadow(0 0 6px rgba(141, 148, 255, 0.6)); }
.chapter.is-drawn .chart__line {
    stroke-dasharray: 560;
    stroke-dashoffset: 560;
    animation: drawLine 2.2s 0.15s ease forwards;
}
.chart__point { filter: drop-shadow(0 0 8px rgba(196, 103, 255, 0.9)); }
.chart__foot { display: flex; gap: 5px; }
.chart__foot i {
    height: 8px;
    flex: 1;
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.14);
}
.chart__foot i:first-child { flex: 0 0 30%; background: rgba(64, 210, 255, 0.12); border-color: rgba(64, 210, 255, 0.22); }

/* ============================================================
   Scene VI — spiral galaxy / flight
   ============================================================ */
.gx {
    position: relative;
    width: clamp(350px, 43vw, 610px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.scene--flight { z-index: 1; }
.gx::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%) rotate(-16deg) scaleY(0.52);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 252, 240, 0.95), rgba(255, 220, 160, 0.5) 9%, rgba(226, 150, 110, 0.3) 24%, rgba(120, 170, 235, 0.16) 52%, transparent 74%);
    filter: blur(6px);
    animation: gxSpin 44s linear infinite;
}
.gx.is-live::before { display: none; }
.gx__canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 134%;
    height: 134%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.1s ease;
}
.gx.is-live .gx__canvas { opacity: 1; }
.gx__glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 86%;
    height: 86%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 214, 150, 0.2), rgba(139, 92, 246, 0.14) 44%, transparent 70%);
    filter: blur(26px);
    pointer-events: none;
    animation: auraPulse 7.5s ease-in-out infinite;
}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes auroraDrift {
    0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    100% { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
}
@keyframes nebulaDrift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(4vw, -3vh, 0) scale(1.12); }
}
@keyframes meteorFly {
    0%, 3% { opacity: 0; transform: rotate(var(--rot)) translate3d(0, 0, 0) scaleX(0.25); }
    5% { opacity: 0.9; }
    12% { opacity: 0; transform: rotate(var(--rot)) translate3d(var(--dx), var(--dy), 0) scaleX(1); }
    100% { opacity: 0; transform: rotate(var(--rot)) translate3d(var(--dx), var(--dy), 0) scaleX(1); }
}
@keyframes orbitSpin {
    to { transform: rotate(360deg); }
}
@keyframes haloPulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes auraPulse {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}
@keyframes galaxyIn {
    to { opacity: 1; }
}
@keyframes solarIn {
    from { opacity: 0; transform: translateY(28px) scale(.88); filter: blur(8px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes loginDisc {
    to { transform: translate(-50%,-50%) rotate(var(--spin)) scaleY(.42) rotate(360deg); }
}
@keyframes loginWave {
    0% { transform: scale(1); opacity: 0; }
    6% { opacity: .8; }
    100% { transform: scale(6.2); opacity: 0; }
}
@keyframes loginFlare {
    0%,100% { opacity:.4;transform:translate(-50%,-50%) scaleX(.82) }
    50% { opacity:1;transform:translate(-50%,-50%) scaleX(1.06) }
}
@keyframes loginSunBreath {
    0%,100% { opacity:.55;transform:translate(-50%,-50%) scale(.94) }
    50% { opacity:1;transform:translate(-50%,-50%) scale(1.08) }
}
@keyframes loginOrbit { to { transform:rotate(360deg) } }
@keyframes loginCounterOrbit {
    from { transform:rotate(0deg) rotateX(calc(var(--tilt) * -1)) rotateZ(calc(var(--spin) * -1)) }
    to { transform:rotate(-360deg) rotateX(calc(var(--tilt) * -1)) rotateZ(calc(var(--spin) * -1)) }
}
@keyframes loginShade {
    from { transform:rotate(var(--spin)) }
    to { transform:rotate(calc(var(--spin) + 360deg)) }
}
@keyframes loginComet { from { offset-distance:0% } to { offset-distance:100% } }
@keyframes loginCometTail {
    0%,100% { opacity:.35;transform:scaleX(.35) }
    50% { opacity:1;transform:scaleX(1.15) }
}
@keyframes chipFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
@keyframes orbSpin {
    from { transform: rotateX(10deg) rotateZ(0deg); }
    to { transform: rotateX(10deg) rotateZ(360deg); }
}
@keyframes corePulse {
    0%, 100% { box-shadow: 0 0 42px rgba(139, 92, 246, 0.55), 0 0 90px rgba(217, 70, 239, 0.24), inset -12px -16px 30px rgba(5, 3, 10, 0.55); }
    50% { box-shadow: 0 0 60px rgba(139, 92, 246, 0.75), 0 0 130px rgba(217, 70, 239, 0.34), inset -12px -16px 30px rgba(5, 3, 10, 0.55); }
}
@keyframes sparkFloat {
    0%, 100% { transform: translateY(0); opacity: 0.75; }
    50% { transform: translateY(-9px); opacity: 1; }
}
@keyframes isoBreath {
    0%, 100% { transform: rotateX(58deg) rotateZ(-38deg) translate3d(0, 0, 0); }
    50% { transform: rotateX(56deg) rotateZ(-34deg) translate3d(0, -8px, 0); }
}
@keyframes buildFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg); }
    50% { transform: translate3d(0, -9px, 0) rotateZ(0.6deg); }
}
@keyframes coreRing {
    from { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(0deg); }
    to { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); }
}
@keyframes panelFloat {
    0%, 100% { transform: translateY(-50%) rotateY(-16deg) rotateX(5deg) translateZ(50px); }
    50% { transform: translateY(calc(-50% - 8px)) rotateY(-13deg) rotateX(5deg) translateZ(54px); }
}
@keyframes chartFloat {
    0%, 100% { transform: perspective(900px) rotateY(-12deg) rotateX(6deg) translateY(0); }
    50% { transform: perspective(900px) rotateY(-9deg) rotateX(6deg) translateY(-8px); }
}
@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}
@keyframes gxSpin {
    from { transform: translate(-50%, -50%) rotate(-16deg) scaleY(0.52); }
    to { transform: translate(-50%, -50%) rotate(344deg) scaleY(0.52); }
}

/* ============================================================
   Responsive scene tuning
   ============================================================ */
@media (max-width: 1180px) {
    .cover__chip { font-size: 0.63rem; padding: 6px 10px; }
    .solar-system { width: min(600px, 50vw, 62vh); }
}

@media (max-width: 1020px) {
    .solar-system { width: min(570px, 64vw, 58vh); }
    .orb { width: clamp(225px, 42vw, 330px); }
    .iso--stack { width: clamp(220px, 38vw, 320px); height: clamp(190px, 34vw, 250px); }
    .build { width: clamp(290px, 54vw, 450px); }
    .core { width: clamp(300px, 56vw, 450px); }
    .chart { width: clamp(300px, 54vw, 440px); }
    .gx { width: min(50vw, 400px); }
    .gx__canvas { width: 104%; height: 104%; }
}

@media (max-width: 720px) {
    .backdrop__nebula { filter: blur(50px); opacity: 0.45; }
    .cover__chips { display: none; }
    .solar-system { width: min(86vw, 430px, 46vh); }
    .galaxy { width: 150%; height: 150%; }
    .scene__chip { font-size: 0.61rem; padding: 5px 9px; }
    .build { width: min(88%, 400px); }
    .core { width: min(94%, 380px); height: clamp(280px, 74vw, 360px); }
    .chart { width: min(94%, 380px); }
    .orb { width: min(78%, 320px); }
    .iso--stack { width: min(78%, 300px); height: min(58vw, 220px); }
    /* the whole disc must stay inside the scene box on phones */
    .gx { width: min(78vw, 340px); }
    .gx__canvas { width: 100%; height: 100%; }
    .gx__glow { width: 100%; height: 100%; }
}

@media (max-width: 480px) {
    .scene__chip--c { display: none; }
    .core__panel { width: 64%; right: -1%; padding: 10px; gap: 6px; }
    .core__pstats i { height: 20px; }
    .core__pbars { height: 34px; }
    .gx { width: min(80vw, 320px); }
    .solar-system { width: min(88vw, 380px, 44vh); }
}

@media (prefers-reduced-motion: reduce) {
    .meteors { display: none; }
    .backdrop__nebula, .backdrop__aurora { animation: none; }
    .gx::before, .gx__glow { animation: none; }
}