.hero-clock{position:relative;width:min(310px,72vw);height:min(310px,72vw);margin:0 auto -100px;opacity:.9;transform-style:preserve-3d;perspective:900px;pointer-events:none}.clock-ring{position:absolute;inset:10%;border:1px solid rgba(120,210,255,.2);border-radius:50%;box-shadow:0 0 45px rgba(34,211,238,.08),inset 0 0 35px rgba(124,92,255,.06)}.ring-1{transform:rotateX(68deg) rotateZ(12deg);animation:spin 18s linear infinite}.ring-2{inset:4%;transform:rotateY(67deg) rotateZ(-22deg);animation:spinReverse 24s linear infinite}.ring-3{inset:18%;border-color:rgba(124,92,255,.3);transform:rotateX(70deg);animation:spin 13s linear infinite}.clock-face{position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.12),rgba(10,14,34,.9) 60%);border:1px solid rgba(255,255,255,.16);box-shadow:0 0 70px rgba(124,92,255,.2),inset 0 0 30px rgba(34,211,238,.1);transform:translateZ(30px)}.tick{position:absolute;left:50%;top:8%;width:2px;height:10%;background:#91e9f7;transform-origin:50% 420%}.t1{transform:rotate(0)}.t2{transform:rotate(90deg)}.t3{transform:rotate(180deg)}.t4{transform:rotate(270deg)}.hand{position:absolute;left:50%;bottom:50%;width:2px;border-radius:4px;transform-origin:bottom;background:#fff}.hour{height:28%;transform:rotate(40deg)}.minute{height:36%;transform:rotate(125deg);background:#9b8cff}.second{height:40%;transform:rotate(220deg);background:#55e8ff;box-shadow:0 0 10px #22d3ee}.clock-dot{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff;box-shadow:0 0 16px #22d3ee}.orb{position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none}.o1{width:100px;height:100px;right:-40px;top:-40px;background:radial-gradient(circle at 30% 30%,#b7a7ff,#4c1d95);box-shadow:0 0 70px #7c5cff}.o2{width:60px;height:60px;left:-28px;bottom:25px;background:radial-gradient(circle at 30% 30%,#8af4ff,#155e75);box-shadow:0 0 50px #22d3ee}@keyframes spin{to{transform:rotateX(68deg) rotateZ(372deg)}}@keyframes spinReverse{to{transform:rotateY(67deg) rotateZ(-382deg)}}@media(max-width:620px){.hero-clock{margin-bottom:-75px;transform:scale(.82)}}@media(prefers-reduced-motion:reduce){.clock-ring{animation:none!important}}