.islamic-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.islamic-pattern{position:absolute;inset:0;opacity:.05;background-image:repeating-linear-gradient(45deg,transparent,transparent 24px,rgba(128,43,85,.25) 24px,rgba(128,43,85,.25) 25px)}
.float-orb{position:absolute;border-radius:50%;filter:blur(40px);animation:orb-float 10s ease-in-out infinite}
.orb-1{width:220px;height:220px;background:rgba(128,43,85,.14);top:5%;left:8%}
.orb-2{width:180px;height:180px;background:rgba(92,31,61,.1);bottom:10%;right:10%;animation-delay:3s}
@keyframes orb-float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14px,-20px) scale(1.05)}}

/* 3D Hero Scene */
.hero-3d-scene{position:absolute;inset:0;perspective:900px;transform-style:preserve-3d}
.cube-3d{position:absolute;width:90px;height:90px;top:18%;left:12%;transform-style:preserve-3d;animation:cube-spin 18s linear infinite}
.cube-face{position:absolute;width:90px;height:90px;border:2px solid rgba(128,43,85,.35);background:rgba(128,43,85,.06);border-radius:12px;backdrop-filter:blur(2px)}
.cube-front{transform:rotateY(0deg) translateZ(45px)}
.cube-back{transform:rotateY(180deg) translateZ(45px)}
.cube-right{transform:rotateY(90deg) translateZ(45px)}
.cube-left{transform:rotateY(-90deg) translateZ(45px)}
.cube-top{transform:rotateX(90deg) translateZ(45px)}
.cube-bottom{transform:rotateX(-90deg) translateZ(45px)}
@keyframes cube-spin{0%{transform:rotateX(-18deg) rotateY(0deg)}100%{transform:rotateX(-18deg) rotateY(360deg)}}

.ring-3d{position:absolute;border-radius:50%;border:2px solid rgba(128,43,85,.2);transform-style:preserve-3d}
.ring-3d-1{width:200px;height:200px;top:8%;right:14%;animation:ring-tilt 12s ease-in-out infinite}
.ring-3d-2{width:140px;height:140px;bottom:12%;left:20%;animation:ring-tilt 14s ease-in-out infinite reverse}
@keyframes ring-tilt{0%,100%{transform:rotateX(65deg) rotateZ(0deg)}50%{transform:rotateX(65deg) rotateZ(180deg)}}

.float-3d{position:absolute;font-size:2rem;color:rgba(128,43,85,.25);animation:float-3d 8s ease-in-out infinite;transform-style:preserve-3d}
.float-3d-1{top:25%;right:28%;animation-delay:0s}
.float-3d-2{bottom:28%;right:22%;font-size:1.6rem;animation-delay:2s}
.float-3d-3{top:40%;left:28%;font-size:1.4rem;animation-delay:4s}
@keyframes float-3d{0%,100%{transform:translateY(0) translateZ(0) rotateY(0deg);opacity:.2}50%{transform:translateY(-18px) translateZ(40px) rotateY(180deg);opacity:.45}}

.hero-card-3d{transform-style:preserve-3d;transition:transform .15s ease-out;animation:hero-card-float 6s ease-in-out infinite}
@keyframes hero-card-float{0%,100%{transform:translateY(0) rotateX(0deg)}50%{transform:translateY(-6px) rotateX(2deg)}}

@media(max-width:768px){
  .cube-3d{width:60px;height:60px;top:10%;left:5%}
  .cube-face{width:60px;height:60px}
  .cube-front,.cube-back,.cube-right,.cube-left,.cube-top,.cube-bottom{transform-origin:center}
  .cube-front{transform:rotateY(0deg) translateZ(30px)}
  .cube-back{transform:rotateY(180deg) translateZ(30px)}
  .cube-right{transform:rotateY(90deg) translateZ(30px)}
  .cube-left{transform:rotateY(-90deg) translateZ(30px)}
  .cube-top{transform:rotateX(90deg) translateZ(30px)}
  .cube-bottom{transform:rotateX(-90deg) translateZ(30px)}
  .ring-3d-1{width:120px;height:120px;right:5%}
  .float-3d{display:none}
}