*{font-family:'Cairo',sans-serif}
html{overflow-x:hidden}
body{background-color:#050505;color:#f5f5f5;overflow-x:hidden}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#0a0a0a}
::-webkit-scrollbar-thumb{background:#6430e7;border-radius:4px}
.grain-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")}
[data-aos]{opacity:0;transition:opacity .8s ease,transform .8s ease}
[data-aos].aos-animate{opacity:1;transform:none!important}
[data-aos=fade-up]{transform:translateY(40px)}
[data-aos=fade-left]{transform:translateX(-40px)}
[data-aos=fade-right]{transform:translateX(40px)}
.hero-gradient{background:linear-gradient(135deg,#050505 0%,#0a0a0a 50%,#1a1a1a 100%);position:relative}
.hero-gradient::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(100,48,231,.15) 0%,transparent 70%);pointer-events:none;animation:pulse 8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:.8}}
.text-shimmer{background:linear-gradient(90deg,#6430e7 0%,#ef5a6e 50%,#6430e7 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.glass{background:rgba(26,26,26,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(100,48,231,.1)}
.hover-glow{transition:all .3s ease}
.hover-glow:hover{box-shadow:0 0 30px rgba(100,48,231,.3);transform:translateY(-5px)}
.cinematic-text{text-shadow:0 0 40px rgba(100,48,231,.3)}
.line-reveal{position:relative;overflow:hidden}
.line-reveal::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:#6430e7;transition:width .6s ease}
.line-reveal:hover::after{width:100%}
.nav-blur{background:rgba(5,5,5,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.custom-cursor{width:32px;height:32px;position:fixed;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s ease}
.custom-cursor .corner{position:absolute;width:10px;height:10px}
.custom-cursor .corner.tl{top:0;left:0;border-top:1px solid #6430e7;border-left:1px solid #6430e7;border-top-left-radius:1px}
.custom-cursor .corner.tr{top:0;right:0;border-top:1px solid #6430e7;border-right:1px solid #6430e7;border-top-right-radius:1px}
.custom-cursor .corner.bl{bottom:0;left:0;border-bottom:1px solid #6430e7;border-left:1px solid #6430e7;border-bottom-left-radius:1px}
.custom-cursor .corner.br{bottom:0;right:0;border-bottom:1px solid #6430e7;border-right:1px solid #6430e7;border-bottom-right-radius:1px}
.custom-cursor::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3px;height:3px;background:#6430e7;border-radius:50%;transition:all .2s ease}
.custom-cursor::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border:1px solid rgba(100,48,231,.15);border-radius:50%;animation:cursor-pulse 2s ease-out infinite}
@keyframes cursor-pulse{0%{transform:translate(-50%,-50%) scale(.85);opacity:.8}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0}}
.custom-cursor.hover{width:40px;height:40px}
.custom-cursor.hover .corner{width:14px;height:14px;border-color:rgba(100,48,231,.8)}
.custom-cursor.hover::before{width:4px;height:4px;background:#ef5a6e;box-shadow:0 0 8px rgba(100,48,231,.6)}
.custom-cursor.click .corner{border-color:#ef5a6e}
.custom-cursor.click::before{background:#ef5a6e;box-shadow:0 0 20px rgba(100,48,231,.9);width:5px;height:5px}
@media(min-width:768px){body,a,button,input,textarea,select{cursor:none!important}.custom-cursor{opacity:1!important}}
.loader{position:fixed;top:0;left:0;width:100%;height:100%;background:#050505;z-index:999999;display:flex;justify-content:center;align-items:center;transition:opacity .5s ease}
.loader-content{text-align:center}
.loader-bar{width:200px;height:2px;background:#1a1a1a;margin-top:20px;position:relative;overflow:hidden}
.loader-progress{position:absolute;top:0;right:0;height:100%;background:#6430e7;animation:loading 2s ease-in-out infinite}
@keyframes loading{0%{width:0}100%{width:100%}}
@keyframes gradient-move-1{0%,100%{transform:translate(0%,0%) scale(1)}33%{transform:translate(11%,-6%) scale(1.05)}66%{transform:translate(-7%,8%) scale(.98)}}
@keyframes gradient-move-2{0%,100%{transform:translate(0%,0%) scale(1)}33%{transform:translate(-9%,7%) scale(.95)}66%{transform:translate(8%,-4%) scale(1.03)}}
@keyframes gradient-move-3{0%,100%{transform:translate(0%,0%) scale(1)}33%{transform:translate(7%,11%) scale(1.02)}66%{transform:translate(-7%,-6%) scale(.97)}}
.floating-video{position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:0;transition:transform .3s ease-out,opacity .3s ease-out,filter .3s ease-out;will-change:transform,opacity,filter;pointer-events:none}
.floating-video video{box-shadow:0 20px 60px rgba(0,0,0,.5);display:block}
.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}
.scrollbar-hide::-webkit-scrollbar{display:none}
.perspective-container{perspective:2000px;perspective-origin:50% 50%}
.work-tab-btn{flex-shrink:0;white-space:nowrap;height:40px;padding:0 24px;font-size:16px;font-weight:500;letter-spacing:.02em;border-radius:9999px;border:1px solid transparent;background:transparent;color:#fff;transition:all .3s ease;cursor:pointer}@media(max-width:767px){.work-tab-btn{height:32px;padding:0 14px;font-size:13px}}
.work-tab-btn:hover{background:rgba(255,255,255,.1)}
.work-tab-btn.active{border-color:#6430e7;background:#6430e7;color:#050505;pointer-events:none}
.work-item{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
@keyframes rotate-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.work-item.active{animation:rotate-pulse 3s ease-in-out infinite}
@media(max-width:767px){.floating-video:nth-child(n+5){display:none!important}}
.skeleton,.skeleton-card{background:linear-gradient(90deg,#1a1a1a 25%,#2a2a2a 50%,#1a1a1a 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:4px}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}