/* 3D Tilt Effect for Cards */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    will-change: transform;
}

.tilt-card:hover {
    transform: perspective(1000px) scale(1.03);
}

.tilt-card-inner {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
}

.tilt-card-shadow {
    transition: box-shadow 0.15s ease-out, transform 0.15s ease-out;
}

/* Disable tilt on mobile devices */
@media (max-width: 768px) {
    .tilt-card {
        transform: none !important;
    }
    
    .tilt-card:hover {
        transform: none !important;
    }
    
    .tilt-card-inner {
        transform: none !important;
    }
}

/* Smooth transitions for all theme changes */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

.glass-card {
    /* Tier 2: surface_container_lowest @ 70% opacity + backdrop-blur */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* Ghost Border Fallback: outline-variant @ 15% */
    border: 1px solid rgba(195, 197, 217, 0.15);
    
    /* Subtle inner glow to simulate light hitting a lens */
    box-shadow: inset 0 1px 0 rgba(221, 225, 255, 0.5); /* primary_fixed tint */
}

.hero-mesh {
    background-color: #f7f9fb;
    background-image: 
        radial-gradient(at 10% 20%, rgba(0, 76, 237, 0.12) 0px, transparent 50%),
        radial-gradient(at 90% 10%, rgba(0, 85, 105, 0.1) 0px, transparent 50%),
        radial-gradient(at 80% 90%, rgba(0, 62, 199, 0.15) 0px, transparent 50%),
        radial-gradient(at 20% 80%, rgba(0, 82, 255, 0.08) 0px, transparent 50%);
}


.navbar-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 31, 100, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.nav-link {
    position: relative;
    padding-bottom: 4px;
    color: #434656;
    transition: color 0.3s ease;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background: linear-gradient(90deg, #003ec7, #0052ff);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}
.nav-link:hover, .nav-link.active {
    color: #003ec7;
}
.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}
.card-hover {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 62, 199, 0.2);
}

.gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #003ec7, #0052ff, #005569);
}


/* ─── Mobile Menu Panel ─────────────────────────────────────────── */

/*
 * Fixed positioning so the panel always renders directly below the
 * sticky pill navbar (top-6 nav ≈ 24px + ~68px nav height = ~92px).
 * Hidden by default via pointer-events/opacity; shown via .open class.
 * lg:hidden in HTML prevents it appearing on desktop at all.
 */
.mobile-menu-panel {
    position: fixed;
    top: 84px;                          /* just below the pill nav       */
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    width: 92%;
    max-width: 80rem;                   /* matches max-w-7xl              */
    z-index: 45;

    /* Glass card styling matching the nav pill */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(195, 197, 217, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border-radius: 1.25rem;             /* rounded-2xl                   */
    overflow: hidden;

    /* Slide-down animation — hidden by default */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.mobile-menu-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Individual menu links */
.mobile-menu-item {
    display: block;
    padding: 1rem 1.5rem;
    color: #434656;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.mobile-menu-item:hover,
.mobile-menu-item:focus {
    background-color: rgba(236, 238, 240, 0.7);  /* surface-container */
    color: #003ec7;                               /* primary           */
    outline: none;
}

@media (max-width: 1023px) {
    #desktop-nav-links {
        display: none !important;
    }

    .mobile-menu-panel {
        top: 78px;
        width: 95%;
    }
}

@media (min-width: 1024px) {
    #desktop-nav-links {
        display: flex !important;
    }
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ─── Scroll Animations ─────────────────────────────────── */

.scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.scroll-animate.fade-up {
    transform: translateY(30px);
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate.fade-in {
    transform: translateY(0);
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Smart Navbar Styles */
nav {
    /* Ensure proper fixed positioning */
    position: fixed !important;
    top: 1rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 50 !important;
}

@media (min-width: 768px) {
    nav {
        top: 1.5rem !important;
    }
}

.navbar-scrolled {
    /* Shrink effect */
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-scrolled .text-lg,
.navbar-scrolled .text-xl,
.navbar-scrolled .text-2xl {
    font-size: 1rem !important;
}

.navbar-scrolled .material-symbols-outlined {
    font-size: 1.5rem !important;
}

.navbar-glass-scrolled {
    /* Enhanced glass effect on scroll */
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(0, 62, 199, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 62, 199, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.nav-link-active {
    color: #003ec7 !important;
    font-weight: 600 !important;
}

.nav-link-active::after {
    width: 100% !important;
    background: linear-gradient(90deg, #003ec7, #0052ff) !important;
    height: 2px !important;
    bottom: -2px !important;
}

/* Mobile menu active state */
.mobile-menu-item-active {
    background-color: rgba(0, 62, 199, 0.1) !important;
    color: #003ec7 !important;
    font-weight: 600 !important;
}

/* Responsive adjustments for scrolled navbar */
@media (max-width: 640px) {
    .navbar-scrolled {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    .navbar-scrolled .text-lg {
        font-size: 1.125rem !important;
    }
    
    .navbar-scrolled .material-symbols-outlined {
        font-size: 1.75rem !important;
    }
}

/* Add top padding to body to account for fixed navbar */
body {
    padding-top: 80px !important;
}

@media (max-width: 767px) {
    body {
        padding-top: 70px !important;
    }
}

img {
    display: block;
    max-width: 100%;
}

@media (max-width: 767px) {
    .card-hover:hover {
        transform: none;
    }

    header#home,
    section,
    footer,
    .container,
    .glass-card {
        max-width: 100%;
    }

    header#home h1,
    header#home h2,
    section h2,
    section h3,
    section h4,
    footer h4,
    footer h5,
    p,
    span,
    a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}