* { -webkit-tap-highlight-color: transparent; outline: none !important; }
button:focus, a:focus { outline: none !important; box-shadow: none !important; }

html { scroll-behavior: smooth; }
body {
    background-color: #000000;
    color: #e5e5e5;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    perspective: 1500px;
}

body::after {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
    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.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
}

.font-changa { font-family: 'Changa', sans-serif; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #ffffff; }

.bg-grid-pattern {
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    will-change: transform;
}
.tilt-content {
    transform: translateZ(40px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (hover: hover) and (pointer: fine) {
    .tilt-card:hover .tilt-content { transform: translateZ(60px); }
    .tilt-card:hover .glare { opacity: 1; }
}

.glare {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15), transparent 60%);
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease; mix-blend-mode: overlay; z-index: 50;
}

.glass-nav {
    background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-panel {
    background: linear-gradient(145deg, rgba(15,15,15,0.9), rgba(0,0,0,1));
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
}
@media (hover: hover) and (pointer: fine) {
    .glass-panel:hover { border-color: rgba(255,255,255,0.15); }
}

.bw-filter { filter: grayscale(100%) contrast(1.1) brightness(0.7); transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.group:hover .bw-filter { filter: grayscale(0%) contrast(1.05) brightness(1); transform: scale(1.1) translateZ(10px); }

.nav-btn { color: #737373; transition: all 0.3s ease; position: relative; }
.nav-btn::after {
    content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px;
    background-color: #ffffff; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-btn:hover { color: #ffffff; text-shadow: 0 0 15px rgba(255,255,255,0.6); }
.nav-btn:hover::after, .nav-btn.active::after { width: 100%; box-shadow: 0 0 10px #ffffff; }
.nav-btn.active { color: #ffffff; text-shadow: 0 0 15px rgba(255,255,255,0.8); }

.btn-shine-effect { position: relative; overflow: hidden; }
.btn-shine-effect::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-25deg); animation: shine 4s infinite;
}

.reveal-element { opacity: 0; transform: translateY(50px) scale(0.95) rotateX(-5deg); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; transform-style: preserve-3d; }
.reveal-element.active { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); }