/* Custom Styles */
body {
    background-color: #0F172A; /* brand-dark */
    overflow-x: hidden;
}

/* Glassmorphism Navbar */
.glass-nav {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-nav.scrolled {
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hide scrollbar for carousel */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Base states for Motion JS animations */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 0;
    will-change: transform, opacity;
}

/* 3D Glassmorphism Premium Effect */
.mockup-premium-3d {
    transform: perspective(1200px) rotateY(-12deg) rotateX(5deg) scale(1);
    box-shadow: 
        -20px 20px 60px rgba(0, 176, 255, 0.25), 
        10px -10px 40px rgba(0, 200, 83, 0.15);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    border-radius: 3rem;
}

.mockup-premium-3d:hover {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg) scale(1.03);
    box-shadow: 
        0 30px 60px rgba(0, 176, 255, 0.35), 
        0 0 40px rgba(0, 200, 83, 0.2);
}

/* CSS Phone Frame */
.phone-frame {
    border: 14px solid #1E293B; /* Slate 800 - Bezel */
    border-radius: 3rem;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1), 0 0 0 2px #334155;
    background-color: #0F172A;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* The iPhone Notch */
.phone-frame::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background-color: #1E293B;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    z-index: 20;
    box-shadow: inset 0 -2px 4px rgba(255,255,255,0.05);
}

/* Glass reflection over the screen */
.phone-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 40%);
    pointer-events: none;
    z-index: 10;
}