html {
    scroll-behavior: smooth; /* Enables smooth scrolling for anchor links */
}

body { 
    font-family: 'Inter', sans-serif; 
    background: #020614;
    /* Subtle radial glow matching the electric blue logo background */
    background-image: 
        radial-gradient(circle at 50% -20%, rgba(0, 102, 255, 0.18), transparent 50%),
        radial-gradient(circle at 80% 60%, rgba(0, 70, 200, 0.08), transparent 40%);
    background-attachment: fixed;
    color: #ffffff; 
    overflow-x: hidden;
}

/* Brand Logo Styling */
.brand-logo {
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    box-shadow: 0 0 10px rgba(0, 102, 255, 0.3);
}

.brand-logo:hover {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(0, 136, 255, 0.6);
}

/* Premium Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.nav-blur {
    backdrop-filter: blur(12px);
    background: rgba(2, 6, 20, 0.75);
    border-bottom: 1px solid rgba(0, 102, 255, 0.15);
}

.service-card {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:hover {
    background: linear-gradient(90deg, rgba(0, 102, 255, 0.08), transparent);
    border-top-color: rgba(0, 136, 255, 0.5);
    padding-left: 1.5rem; /* Slightly deeper push on hover */
}

.plan-card {
    background: rgba(6, 14, 32, 0.6);
    border: 1px solid rgba(0, 102, 255, 0.2);
    backdrop-filter: blur(12px);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.plan-card:hover {
    border-color: #0088ff;
    box-shadow: 0 10px 30px -10px rgba(0, 102, 255, 0.3);
    transform: scale(1.03) translateY(-10px);
}

input, textarea, select {
    background: rgba(8, 18, 40, 0.7) !important;
    border: 1px solid rgba(0, 102, 255, 0.25) !important;
    color: white !important;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
input:focus, textarea:focus, select:focus {
    border-color: #0088ff !important;
    box-shadow: 0 0 20px rgba(0, 136, 255, 0.3);
}

/* Updated Text Gradient matching the Swells Logo */
.text-gradient {
    background: linear-gradient(135deg, #ffffff 30%, #4da6ff 70%, #0055ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

::-webkit-scrollbar { 
    width: 6px; 
}
::-webkit-scrollbar-track { 
    background: #020614; 
}
::-webkit-scrollbar-thumb { 
    background: #0044cc; 
    border-radius: 3px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: #0066ff; 
}

/* Premium Menu Link Stagger */
.menu-link {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
#sideMenu:not(.translate-x-full) .menu-link {
    opacity: 1;
    transform: translateX(0);
}
#sideMenu:not(.translate-x-full) .menu-link:nth-child(1) { transition-delay: 0.1s; }
#sideMenu:not(.translate-x-full) .menu-link:nth-child(2) { transition-delay: 0.15s; }
#sideMenu:not(.translate-x-full) .menu-link:nth-child(3) { transition-delay: 0.2s; }
#sideMenu:not(.translate-x-full) .menu-link:nth-child(4) { transition-delay: 0.25s; }
#sideMenu:not(.translate-x-full) .menu-link:nth-child(5) { transition-delay: 0.3s; }

/* Ultra-Smooth FAQ Animations */
.faq-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.active .faq-content {
    max-height: 250px; 
    padding-top: 1rem; 
    opacity: 1;
    transform: translateY(0);
}

.faq-item .icon {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
    transform-origin: center;
}

.faq-item:hover .icon {
    color: #4da6ff;
}

.faq-item.active .icon {
    transform: rotate(135deg); /* Flawlessly rotates '+' into 'x' */
    color: #0088ff;
}