.cx-page{background:radial-gradient(ellipse at 50% 20%,#0d1a3a 0%,#060b1f 45%,#03050f 100%) fixed}
#cx-stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.cx-page main{position:relative;z-index:1}
.cx-hero{text-align:center;padding:1rem 0 2rem}
.cx-title{font-family:Cinzel,serif;font-weight:700;color:#D4AF37;letter-spacing:.35em;text-indent:.35em;font-size:clamp(1.8rem,5vw,3.4rem);margin:.5rem 0 1rem;text-shadow:0 0 18px rgba(212,175,55,.45)}
.cx-tag{color:#5fe3ff;font-family:Cinzel,serif;letter-spacing:.12em;font-size:1.15rem;margin:1rem 0 .3rem;text-shadow:0 0 12px rgba(95,227,255,.5)}
.cx-motto{color:#bfe9f5;margin:0}
.cx-stage{position:relative;width:min(760px,92vw);aspect-ratio:1;margin:0 auto}
.cx-orb{position:absolute;inset:13%;border-radius:50%}
.cx-cube{width:100%;height:100%;display:block;animation:cxSpin 120s linear infinite}
.cx-glow{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(95,227,255,.35),rgba(212,175,55,.15) 45%,transparent 70%);animation:cxBreathe 6s ease-in-out infinite;filter:blur(8px)}
.cx-bolt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(1.6rem,4vw,2.6rem);animation:cxPulse 3s ease-in-out infinite;filter:drop-shadow(0 0 10px #ffe680)}
.cx-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cx-trace polygon{fill:none;stroke:rgba(212,175,55,.55);stroke-width:.25;stroke-dasharray:400;stroke-dashoffset:400;animation:cxTrace 3.2s ease-out .4s forwards}
.cx-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:.5rem;color:#e8f7ff;text-decoration:none;opacity:0;animation:cxIn .6s ease-out forwards;animation-delay:calc(.5s + var(--i)*.3s)}
.cx-dot{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(10,20,50,.7);border:1px solid rgba(212,175,55,.7);box-shadow:0 0 10px rgba(95,227,255,.35);font-size:1.1rem;transition:box-shadow .3s,transform .3s}
.cx-lbl{position:absolute;top:50%;white-space:nowrap;display:flex;flex-direction:column;text-align:left;font-size:.85rem;transform:translateY(-50%)}
.cx-r .cx-lbl{left:56px}.cx-l .cx-lbl{right:56px;text-align:right}
.cx-lbl small{color:#9fd8ea;max-width:0;overflow:hidden;opacity:0;transition:max-width .5s,opacity .4s}
.cx-lbl::before{content:"";position:absolute;top:50%;height:1px;width:0;background:linear-gradient(90deg,#D4AF37,#5fe3ff);transition:width .35s}
.cx-r .cx-lbl::before{right:100%}.cx-l .cx-lbl::before{left:100%}
.cx-node:hover .cx-dot,.cx-node:focus-visible .cx-dot{transform:scale(1.18);box-shadow:0 0 22px #5fe3ff,0 0 40px rgba(212,175,55,.7)}
.cx-node:hover .cx-lbl::before,.cx-node:focus-visible .cx-lbl::before{width:12px}
.cx-node:hover small,.cx-node:focus-visible small{max-width:260px;opacity:1}
.cx-node::after{display:none!important}
.cx-sub{font-family:Cinzel,serif;color:#D4AF37;letter-spacing:.2em;text-align:center}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.cx-card{position:relative;padding:1.1rem 1.2rem;border-radius:16px;background:linear-gradient(135deg,rgba(95,227,255,.08),rgba(140,90,255,.07) 50%,rgba(212,175,55,.06));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.55);overflow:hidden;transition:box-shadow .3s}
.cx-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(110deg,transparent 30%,#fff3b0 50%,transparent 70%) 200% 0/250% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0}
.cx-card:hover{box-shadow:0 0 24px rgba(212,175,55,.3)}
.cx-card:hover::before{opacity:1;animation:cxShimmer 1.4s linear infinite}
.cx-card h3{margin:0 0 .4rem;font-family:Cinzel,serif;font-size:1.05rem}
.cx-card h3 a{color:#f3d67a}
.cx-card p{margin:0;color:#cfe6f2;font-size:.92rem}
.cx-back{text-align:center;margin:2rem 0}
@keyframes cxSpin{to{transform:rotate(360deg)}}
@keyframes cxBreathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes cxPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@keyframes cxTrace{to{stroke-dashoffset:0}}
@keyframes cxIn{to{opacity:1}}
@keyframes cxShimmer{from{background-position:200% 0}to{background-position:-50% 0}}
@media (max-width:760px){
.cx-stage{width:auto;aspect-ratio:auto}
.cx-orb{position:relative;inset:auto;width:min(78vw,380px);aspect-ratio:1;margin:0 auto 1rem}
.cx-trace{display:none}
.cx-nodes{display:grid;grid-template-columns:1fr;gap:.6rem}
.cx-node{position:relative;left:auto;top:auto;transform:none;padding:.7rem .9rem;border-radius:14px;background:rgba(15,28,64,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.5)}
.cx-lbl,.cx-l .cx-lbl,.cx-r .cx-lbl{position:static;transform:none;text-align:left;white-space:normal}
.cx-lbl::before{display:none}
.cx-lbl small{max-width:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){
.cx-cube,.cx-glow,.cx-bolt{animation:none!important}
.cx-glow{opacity:.8}
.cx-trace polygon{animation:none;stroke-dashoffset:0}
.cx-node{animation:none;opacity:1}
.cx-card:hover::before{animation:none}
}
@media (min-width:761px){.cx-nodes{position:absolute;inset:0;margin:0;padding:0;display:block}}
.cx-page .cx-title{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#D4AF37;color:#D4AF37}
.cx-page .cx-nodes a.cx-node{position:absolute}
@media (max-width:760px){.cx-page .cx-nodes a.cx-node{position:relative}}
.cx-page .cx-sub{background:none;-webkit-text-fill-color:#D4AF37;color:#D4AF37;padding-left:0}