/* ============================================
   BRANDEN BAUER PORTFOLIO
   Shared Styles
   ============================================ */

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    /* Dark palette */
    --color-dark-950: #050505;
    --color-dark-900: #0a0a0a;
    --color-dark-800: #111111;
    --color-dark-700: #1a1a1a;
    --color-dark-600: #2a2a2a;
    
    /* Accent colors */
    --color-accent-purple: #8b5cf6;
    --color-accent-cyan: #06b6d4;
    --color-accent-pink: #ec4899;
    
    /* Gold */
    --color-gold: #d4af37;
}

/* ============================================
   Custom Color Utilities (Tailwind-compatible)
   ============================================ */

/* Background colors - Dark */
.bg-dark-950 { background-color: var(--color-dark-950); }
.bg-dark-900 { background-color: var(--color-dark-900); }
.bg-dark-800 { background-color: var(--color-dark-800); }
.bg-dark-700 { background-color: var(--color-dark-700); }
.bg-dark-600 { background-color: var(--color-dark-600); }

/* Background colors - Dark with opacity */
.bg-dark-950\/80 { background-color: rgba(5, 5, 5, 0.8); }
.bg-dark-950\/90 { background-color: rgba(5, 5, 5, 0.9); }
.bg-dark-950\/98 { background-color: rgba(5, 5, 5, 0.98); }
.bg-dark-900\/30 { background-color: rgba(10, 10, 10, 0.3); }
.bg-dark-900\/50 { background-color: rgba(10, 10, 10, 0.5); }
.bg-dark-800\/50 { background-color: rgba(17, 17, 17, 0.5); }

/* Background colors - Accent */
.bg-accent-purple { background-color: var(--color-accent-purple); }
.bg-accent-cyan { background-color: var(--color-accent-cyan); }
.bg-accent-pink { background-color: var(--color-accent-pink); }
.bg-accent-purple\/20 { background-color: rgba(139, 92, 246, 0.2); }
.bg-accent-cyan\/20 { background-color: rgba(6, 182, 212, 0.2); }
.bg-accent-pink\/20 { background-color: rgba(236, 72, 153, 0.2); }

/* Background colors - Gold */
.bg-gold { background-color: var(--color-gold); }
.bg-gold\/10 { background-color: rgba(212, 175, 55, 0.1); }

/* Text colors - Dark */
.text-dark-950 { color: var(--color-dark-950); }
.text-dark-900 { color: var(--color-dark-900); }
.text-dark-800 { color: var(--color-dark-800); }
.text-dark-700 { color: var(--color-dark-700); }
.text-dark-600 { color: var(--color-dark-600); }

/* Text colors - Accent */
.text-accent-purple { color: var(--color-accent-purple); }
.text-accent-cyan { color: var(--color-accent-cyan); }
.text-accent-pink { color: var(--color-accent-pink); }
.text-accent-purple\/20 { color: rgba(139, 92, 246, 0.2); }
.text-accent-cyan\/20 { color: rgba(6, 182, 212, 0.2); }
.text-accent-pink\/20 { color: rgba(236, 72, 153, 0.2); }

/* Text colors - Gold */
.text-gold { color: var(--color-gold); }
.text-gold\/40 { color: rgba(212, 175, 55, 0.4); }
.text-gold\/50 { color: rgba(212, 175, 55, 0.5); }
.text-gold\/60 { color: rgba(212, 175, 55, 0.6); }
.text-gold\/80 { color: rgba(212, 175, 55, 0.8); }

/* Border colors - Dark */
.border-dark-950 { border-color: var(--color-dark-950); }
.border-dark-900 { border-color: var(--color-dark-900); }
.border-dark-800 { border-color: var(--color-dark-800); }
.border-dark-700 { border-color: var(--color-dark-700); }
.border-dark-600 { border-color: var(--color-dark-600); }

/* Border colors - Accent */
.border-accent-purple { border-color: var(--color-accent-purple); }
.border-accent-cyan { border-color: var(--color-accent-cyan); }
.border-accent-pink { border-color: var(--color-accent-pink); }
.border-accent-purple\/30 { border-color: rgba(139, 92, 246, 0.3); }
.border-accent-cyan\/30 { border-color: rgba(6, 182, 212, 0.3); }
.border-accent-pink\/30 { border-color: rgba(236, 72, 153, 0.3); }

/* Border colors - Gold */
.border-gold { border-color: var(--color-gold); }
.border-gold\/20 { border-color: rgba(212, 175, 55, 0.2); }

/* Hover states - Background */
.hover\:bg-dark-800:hover { background-color: var(--color-dark-800); }
.hover\:bg-dark-700:hover { background-color: var(--color-dark-700); }

/* Hover states - Text */
.hover\:text-accent-purple:hover { color: var(--color-accent-purple); }
.hover\:text-accent-cyan:hover { color: var(--color-accent-cyan); }
.hover\:text-accent-pink:hover { color: var(--color-accent-pink); }
.hover\:text-gold:hover { color: var(--color-gold); }

/* Hover states - Border */
.hover\:border-accent-purple:hover { border-color: var(--color-accent-purple); }
.hover\:border-accent-cyan:hover { border-color: var(--color-accent-cyan); }
.hover\:border-accent-pink:hover { border-color: var(--color-accent-pink); }
.hover\:border-accent-purple\/50:hover { border-color: rgba(139, 92, 246, 0.5); }
.hover\:border-accent-cyan\/50:hover { border-color: rgba(6, 182, 212, 0.5); }
.hover\:border-accent-pink\/50:hover { border-color: rgba(236, 72, 153, 0.5); }

/* Focus states */
.focus\:border-accent-purple:focus { border-color: var(--color-accent-purple); }
.focus\:border-accent-cyan:focus { border-color: var(--color-accent-cyan); }
.focus\:border-accent-pink:focus { border-color: var(--color-accent-pink); }

/* Font families */
.font-display { font-family: 'Oswald', sans-serif; }
.font-body { font-family: 'Inter', sans-serif; }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8b5cf6;
}

/* Noise Overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navigation Link Underline */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #8b5cf6, #06b6d4);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Active nav link - white (default for standard pages) */
.nav-link.active {
    color: white;
    font-weight: 500;
}

.nav-link.active::after {
    width: 100%;
}

/* Active nav link - gold (for memorial page only) */
.nav-link.active-gold {
    color: #d4af37;
    font-weight: 500;
}

.nav-link.active-gold::after {
    background: linear-gradient(90deg, #d4af37, #f5d485);
    width: 100%;
}

/* Dropdown nav link active states */
.nav-link-dropdown.active {
    color: white !important;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.05);
}

.nav-link-dropdown.active-gold {
    color: #d4af37;
    font-weight: 500;
    background-color: rgba(212, 175, 55, 0.1);
}

/* Active-gold hover - animate gold → white → gold */
.nav-link-dropdown.active-gold:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    animation: goldWhiteGold 0.6s ease forwards;
}

/* Gold hover for memorial dropdown link - animated like footer */
.nav-link-dropdown.hover-gold {
    transition: background-color 0.2s ease;
}

.nav-link-dropdown.hover-gold:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    animation: dropdownGrayWhiteGold 0.6s ease forwards;
}

/* Keyframes: gray → white → gold for non-active dropdown */
@keyframes dropdownGrayWhiteGold {
    0% { color: #9ca3af; }
    40% { color: white; }
    100% { color: #d4af37; }
}

/* Keyframes: gold → white → gold for active dropdown */
@keyframes goldWhiteGold {
    0% { color: #d4af37; }
    40% { color: white; }
    100% { color: #d4af37; }
}

/* Mobile Menu - Hidden by default */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.mobile-menu.flex {
    display: flex;
}

/* Always hide mobile menu on desktop */
@media (min-width: 768px) {
    .mobile-menu {
        display: none !important;
    }
}

/* Mobile Menu Links */
.mobile-link {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 
                 0 4px 16px rgba(0, 0, 0, 0.6),
                 0 0 40px rgba(0, 0, 0, 0.4);
    position: relative;
}

.mobile-link::before {
    content: '';
    position: absolute;
    inset: -8px -24px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
    z-index: -1;
    border-radius: 8px;
}

/* Glass Button */
.glass-btn {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.glass-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4, #8b5cf6);
    background-size: 200% 200%;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    filter: blur(12px);
}

.glass-btn:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow:
        0 0 20px rgba(139, 92, 246, 0.4),
        0 0 40px rgba(139, 92, 246, 0.2),
        0 0 60px rgba(139, 92, 246, 0.1);
}

.glass-btn:hover::before {
    opacity: 0.6;
    animation: neonPulse 2s ease-in-out infinite;
}

/* Active state for booking button when on booking page - matches social icon hover */
.glass-btn.active-booking {
    background: rgba(139, 92, 246, 0.5) !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3) !important;
    color: #fff !important;
}

.glass-btn.active-booking:hover {
    background: rgba(139, 92, 246, 0.15) !important;
    box-shadow: 
        0 0 20px rgba(139, 92, 246, 0.4),
        0 0 40px rgba(139, 92, 246, 0.2),
        0 0 60px rgba(139, 92, 246, 0.1) !important;
}

.glass-btn.active-booking:hover::before {
    opacity: 0.6 !important;
    animation: neonPulse 2s ease-in-out infinite !important;
}

/* Active state for contact button when on contact page - matches social icon hover */
.glass-btn.active-contact {
    background: rgba(139, 92, 246, 0.5) !important;
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3) !important;
    color: #fff !important;
}

.glass-btn.active-contact:hover {
    background: rgba(139, 92, 246, 0.15) !important;
    box-shadow: 
        0 0 20px rgba(139, 92, 246, 0.4),
        0 0 40px rgba(139, 92, 246, 0.2),
        0 0 60px rgba(139, 92, 246, 0.1) !important;
}

.glass-btn.active-contact:hover::before {
    opacity: 0.6 !important;
    animation: neonPulse 2s ease-in-out infinite !important;
}

/* Fade Up Animation */
.fade-up {
    animation: fadeUp 1s ease-out forwards;
    opacity: 0;
}

.fade-up-delay-1 { animation-delay: 0.2s; }
.fade-up-delay-2 { animation-delay: 0.4s; }
.fade-up-delay-3 { animation-delay: 0.6s; }

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rotating Text */
.rotating-text {
    display: inline-block;
    animation: rotateText 16s infinite;
}

.rotating-text span {
    display: block;
    height: 2.5rem;
    line-height: 2.5rem;
}

@keyframes rotateText {
    0%, 9% { transform: translateY(0); }
    10%, 19% { transform: translateY(-2.5rem); }
    20%, 29% { transform: translateY(-5rem); }
    30%, 39% { transform: translateY(-7.5rem); }
    40%, 49% { transform: translateY(-10rem); }
    50%, 59% { transform: translateY(-12.5rem); }
    60%, 69% { transform: translateY(-15rem); }
    70%, 79% { transform: translateY(-17.5rem); }
    80%, 89% { transform: translateY(-20rem); }
    90%, 99% { transform: translateY(-22.5rem); }
    100% { transform: translateY(0); }
}

/* Scroll Indicator */
.scroll-indicator {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-10px) translateX(-50%); }
    60% { transform: translateY(-5px) translateX(-50%); }
}

/* Ticker / Marquee */
.ticker-wrapper {
    overflow: hidden;
    white-space: nowrap;
}

.ticker-content {
    display: inline-flex;
    animation: ticker 60s linear infinite;
}

.ticker-content:hover {
    animation-play-state: paused;
}

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-item {
    color: #404040;
    transition: color 0.3s ease;
}

.ticker-item:hover {
    color: #ffffff;
}

/* Bento Card */
.bento-card {
    background: linear-gradient(135deg, #111111 0%, #0a0a0a 100%);
    border: 1px solid #1a1a1a;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.bento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bento-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 50%, #ec4899 100%);
    background-size: 300% 300%;
    opacity: 0;
    z-index: -1;
    filter: blur(15px);
    transition: opacity 0.4s ease;
}

.bento-card:hover {
    transform: scale(1.02) translateY(-4px);
    border-color: #8b5cf6;
    box-shadow: 
        0 0 30px rgba(139, 92, 246, 0.3),
        0 0 60px rgba(139, 92, 246, 0.15),
        inset 0 0 30px rgba(139, 92, 246, 0.05);
}

.bento-card:hover::before {
    opacity: 1;
}

.bento-card:hover::after {
    opacity: 0.5;
    animation: neonShift 3s ease-in-out infinite;
}

.bento-card .icon {
    transition: all 0.4s ease;
}

.bento-card:hover .icon {
    color: #8b5cf6;
    transform: scale(1.1);
}

/* Image Container */
.image-container {
    position: relative;
    overflow: hidden;
}

.image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, transparent 50%, rgba(6, 182, 212, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.image-container:hover::after {
    opacity: 1;
}

.image-container img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-container:hover img {
    transform: scale(1.05);
}

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Page Header */
.page-header {
    background: linear-gradient(180deg, #0a0a0a 0%, #050505 100%);
    position: relative;
    overflow: hidden;
    padding-top: 5.5rem !important; /* Override pt-32 - reduce top space above subheadings */
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
}

/* Form Styles */
.form-input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.15);
    transition: all 0.3s ease;
    position: relative;
}

.form-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 
        0 0 20px rgba(139, 92, 246, 0.3),
        0 0 40px rgba(139, 92, 246, 0.1),
        inset 0 0 20px rgba(139, 92, 246, 0.05);
    animation: neonInputGlow 2s ease-in-out infinite;
}

@keyframes neonInputGlow {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(139, 92, 246, 0.3),
            0 0 40px rgba(139, 92, 246, 0.1),
            inset 0 0 20px rgba(139, 92, 246, 0.05);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(139, 92, 246, 0.4),
            0 0 50px rgba(139, 92, 246, 0.15),
            inset 0 0 25px rgba(139, 92, 246, 0.08);
    }
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.form-input::placeholder {
    color: #4a4a4a;
}

/* Dropdown default option contrast */
.form-input option[value=""] {
    color: #9ca3af;
}
.form-input select,
select.form-input {
    color: #e5e7eb;
}

/* Contact booking button - outlined CTA */
.contact-booking-btn {
    border: 1px solid rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.08);
    backdrop-filter: blur(8px);
}
.contact-booking-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.7);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

/* Portfolio Grid */
.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
}

.portfolio-item img {
    transition: transform 0.6s ease;
}

.portfolio-item:hover img {
    transform: scale(1.1);
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 5, 5, 0.9) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

/* Product Card */
.product-card {
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.4s ease;
}

.product-card:hover {
    border-color: #8b5cf6;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Timeline */
.timeline-item {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid #1a1a1a;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    background: #8b5cf6;
    border-radius: 50%;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .rotating-text {
        animation: none;
    }

    .rotating-text span:not(:first-child) {
        display: none;
    }

    .ticker-content {
        animation: none;
    }

    .scroll-indicator {
        animation: none;
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .rotating-text span {
        height: 2rem;
        line-height: 2rem;
    }

    @keyframes rotateText {
        0%, 9% { transform: translateY(0); }
        10%, 19% { transform: translateY(-2rem); }
        20%, 29% { transform: translateY(-4rem); }
        30%, 39% { transform: translateY(-6rem); }
        40%, 49% { transform: translateY(-8rem); }
        50%, 59% { transform: translateY(-10rem); }
        60%, 69% { transform: translateY(-12rem); }
        70%, 79% { transform: translateY(-14rem); }
        80%, 89% { transform: translateY(-16rem); }
        90%, 99% { transform: translateY(-18rem); }
        100% { transform: translateY(0); }
    }
}

/* ============================================
   Portfolio Group Buttons
   ============================================ */

/* Active group button styling */
.group-btn.active {
    border-color: #06b6d4;
    color: white;
    background: rgba(6, 182, 212, 0.1);
    box-shadow: 
        0 0 15px rgba(6, 182, 212, 0.3),
        0 0 30px rgba(6, 182, 212, 0.1);
    animation: neonPulseCyan 2s ease-in-out infinite;
}

/* Close X icon in active group button - only visible when active */
.group-btn .close-x {
    display: none;
}

.group-btn.active .close-x {
    display: inline-block;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.group-btn.active:hover .close-x {
    opacity: 1;
}

/* Category button active state */
.category-btn.active {
    border-color: #8b5cf6;
    color: white;
    background: rgba(139, 92, 246, 0.1);
    box-shadow: 
        0 0 15px rgba(139, 92, 246, 0.3),
        0 0 30px rgba(139, 92, 246, 0.1);
    animation: neonPulsePurple 2s ease-in-out infinite;
}

/* Category button hover */
.category-btn:hover:not(.active):not(.inactive) {
    border-color: #8b5cf6;
    box-shadow: 
        0 0 20px rgba(139, 92, 246, 0.3),
        0 0 40px rgba(139, 92, 246, 0.1);
}

/* Group button hover */
.group-btn:hover:not(.active):not(.inactive) {
    border-color: #06b6d4;
    box-shadow: 
        0 0 20px rgba(6, 182, 212, 0.3),
        0 0 40px rgba(6, 182, 212, 0.1);
}

/* ============================================
   Neon Glow Keyframe Animations
   ============================================ */

/* Primary purple neon pulse */
@keyframes neonPulse {
    0%, 100% {
        opacity: 0.5;
        background-position: 0% 50%;
    }
    50% {
        opacity: 0.8;
        background-position: 100% 50%;
    }
}

/* Purple glow pulse for buttons */
@keyframes neonPulsePurple {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(139, 92, 246, 0.3),
            0 0 30px rgba(139, 92, 246, 0.1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(139, 92, 246, 0.5),
            0 0 40px rgba(139, 92, 246, 0.2),
            0 0 60px rgba(139, 92, 246, 0.1);
    }
}

/* Cyan glow pulse for buttons */
@keyframes neonPulseCyan {
    0%, 100% {
        box-shadow: 
            0 0 15px rgba(6, 182, 212, 0.3),
            0 0 30px rgba(6, 182, 212, 0.1);
    }
    50% {
        box-shadow: 
            0 0 20px rgba(6, 182, 212, 0.5),
            0 0 40px rgba(6, 182, 212, 0.2),
            0 0 60px rgba(6, 182, 212, 0.1);
    }
}

/* Gradient shift for card backgrounds */
@keyframes neonShift {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.4;
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.6;
    }
}

/* ============================================
   Social Icons Neon Glow
   ============================================ */

footer a[aria-label],
.social-link {
    position: relative;
    transition: all 0.3s ease;
}

footer a[aria-label]::before,
.social-link::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.6) 0%, transparent 70%);
    opacity: 0;
    z-index: -1;
    filter: blur(10px);
    transition: opacity 0.3s ease;
}

footer a[aria-label]:hover::before,
.social-link:hover::before {
    opacity: 1;
    animation: neonPulsePurple 1.5s ease-in-out infinite;
}

/* ============================================
   Portfolio Item Neon Glow
   ============================================ */

.portfolio-item {
    position: relative;
}

.portfolio-item::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 1rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 50%, #ec4899 100%);
    background-size: 200% 200%;
    opacity: 0;
    z-index: -1;
    filter: blur(15px);
    transition: opacity 0.4s ease;
}

.portfolio-item:hover::before {
    opacity: 0.5;
    animation: neonShift 2s ease-in-out infinite;
}

/* ============================================
   Service Cards - Shared Glow Effect
   Used by both services page (.service-card) and 
   index page (.service-card-link)
   ============================================ */

.service-card,
.service-card-link {
    position: relative;
    z-index: 1;
    background-color: #121212;
    overflow: visible;
    transition: all 0.3s ease;
}

.service-card { cursor: pointer; }

.service-card::before,
.service-card-link::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    filter: blur(12px);
    transition: opacity 0.3s ease;
}

/* Color variants */
.service-card[data-color="purple"]::before,
.service-card-link[data-color="purple"]::before { background: #8b5cf6; }

.service-card[data-color="cyan"]::before,
.service-card-link[data-color="cyan"]::before { background: #06b6d4; }

.service-card[data-color="pink"]::before,
.service-card-link[data-color="pink"]::before { background: #ec4899; }

/* Hover states */
.service-card:hover::before,
.service-card-link:hover::before { opacity: 0.5; }

.service-card[data-color="purple"]:hover,
.service-card-link[data-color="purple"]:hover { border-color: #8b5cf6 !important; }

.service-card[data-color="cyan"]:hover,
.service-card-link[data-color="cyan"]:hover { border-color: #06b6d4 !important; }

.service-card[data-color="pink"]:hover,
.service-card-link[data-color="pink"]:hover { border-color: #ec4899 !important; }

/* ============================================
   Service Card Visual Portals
   Hover-reveal background images/videos
   ============================================ */

.service-card-portal {
    position: relative;
    overflow: hidden;
    padding: 1.25rem;
    min-height: 120px;
    background-color: #121212;
}

/* Icon transition for smooth hover */
.service-card-portal .icon {
    transition: all 0.3s ease;
}
.service-card-portal .icon svg {
    transition: all 0.3s ease;
}

/* Background media container */
.service-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.service-card-video,
.service-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark overlay for text readability */
.service-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Content container */
.service-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Text shadow for readability over media */
.service-card-portal:hover .service-card-content h3,
.service-card-portal.active .service-card-content h3 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* Ensure text stays crisp - no blur inheritance */
.service-card-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.service-card-content h3 {
    font-weight: 500;
    letter-spacing: 0.025em;
}

/* Icon background becomes semi-transparent on hover */
.service-card-portal:hover .icon,
.service-card-portal.active .icon {
    background-color: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(4px);
}

/* Icon color changes on hover based on card color */
.service-card-portal[data-color="purple"]:hover .icon,
.service-card-portal[data-color="purple"].active .icon {
    background-color: rgba(139, 92, 246, 0.3);
    border: 1px solid rgba(139, 92, 246, 0.5);
}
.service-card-portal[data-color="purple"]:hover .icon svg,
.service-card-portal[data-color="purple"].active .icon svg {
    color: #a78bfa;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.8));
}

.service-card-portal[data-color="cyan"]:hover .icon,
.service-card-portal[data-color="cyan"].active .icon {
    background-color: rgba(6, 182, 212, 0.3);
    border: 1px solid rgba(6, 182, 212, 0.5);
}
.service-card-portal[data-color="cyan"]:hover .icon svg,
.service-card-portal[data-color="cyan"].active .icon svg {
    color: #22d3ee;
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.8));
}

.service-card-portal[data-color="pink"]:hover .icon,
.service-card-portal[data-color="pink"].active .icon {
    background-color: rgba(236, 72, 153, 0.3);
    border: 1px solid rgba(236, 72, 153, 0.5);
}
.service-card-portal[data-color="pink"]:hover .icon svg,
.service-card-portal[data-color="pink"].active .icon svg {
    color: #f472b6;
    filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.8));
}

/* Hover state - reveal background */
.service-card-portal:hover .service-card-bg,
.service-card-portal.active .service-card-bg {
    opacity: 1;
}

.service-card-portal:hover .service-card-overlay,
.service-card-portal.active .service-card-overlay {
    opacity: 1;
}

/* Scale effect on hover for premium feel */
.service-card-portal:hover .service-card-video,
.service-card-portal:hover .service-card-img,
.service-card-portal.active .service-card-video,
.service-card-portal.active .service-card-img {
    transform: scale(1.05);
    transition: transform 0.6s ease;
}

/* Ensure videos don't show controls */
.service-card-video::-webkit-media-controls {
    display: none !important;
}

.service-card-video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* Mobile/Tablet responsive adjustments */
@media (max-width: 767px) {
    .service-card-portal {
        min-height: 85px;
        padding: 0.75rem;
    }
    
    .service-card-portal .icon {
        width: 1.75rem;
        height: 1.75rem;
        margin-bottom: 0.5rem;
    }
    
    .service-card-portal .icon svg {
        width: 0.875rem;
        height: 0.875rem;
    }
    
    .service-card-content h3 {
        font-size: 0.65rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .service-card-portal {
        min-height: 110px;
    }
}

/* ============================================
   Navigation Link Neon Underline
   ============================================ */

.nav-link::after {
    background: linear-gradient(90deg, #8b5cf6, #06b6d4);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.nav-link:hover {
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

/* ============================================
   Logo Neon Glow on Hover
   ============================================ */

a[href="index.html"] .gradient-text {
    transition: text-shadow 0.3s ease;
}

header a[href="index.html"]:hover .gradient-text {
    text-shadow: 
        0 0 20px rgba(139, 92, 246, 0.6),
        0 0 40px rgba(6, 182, 212, 0.4);
}

/* ============================================
   Reduced Motion Preference
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .glass-btn:hover::before,
    .bento-card:hover::after,
    .form-input:focus,
    .group-btn.active,
    .category-btn.active,
    footer a[aria-label]:hover::before,
    .portfolio-item:hover::before,
    .service-card:hover::before,
    .service-card-link:hover::before {
        animation: none;
    }
}

/* ============================================
   Skills & Tools Neon Tags (Grid Layout)
   ============================================ */

.skills-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    gap: 15px; /* Space between buttons */
    margin-top: 2rem;
    max-width: 1200px; /* Limits width to keep it neat */
    margin-left: auto;
    margin-right: auto;
}

/* Tablet: 4 Columns */
@media (min-width: 768px) {
    .skills-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Desktop: 6 Columns */
@media (min-width: 1024px) {
    .skills-container {
        grid-template-columns: repeat(6, 1fr);
    }
}

.skill-tag {
    position: relative;
    z-index: 1;
    /* Flexbox centers the text perfectly inside the grid cell */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; 
    padding: 12px 10px;
    border-radius: 8px; 
    text-decoration: none; /* Removes underline */
    
    /* Base Button Style */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e5e5e5;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
}

/* The Glow Element (Hidden by default, reveals on hover) */
.skill-tag::before {
    content: '';
    position: absolute;
    inset: -2px; 
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    filter: blur(8px);
    transition: opacity 0.3s ease;
    pointer-events: none;
    will-change: opacity;
    transform: translateZ(0); /* Force GPU layer for clean rendering */
}

/* Ensure clean hide state */
.skill-tag:not(:hover)::before {
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

/* Show glow on hover with visibility */
.skill-tag:hover::before {
    opacity: 0.6;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
}

/* --- Color Variants --- */

/* Purple */
.skill-tag[data-color="purple"]::before { background: #8b5cf6; }
.skill-tag[data-color="purple"]:hover { border-color: #8b5cf6; }

/* Cyan */
.skill-tag[data-color="cyan"]::before { background: #06b6d4; }
.skill-tag[data-color="cyan"]:hover { border-color: #06b6d4; }

/* Pink */
.skill-tag[data-color="pink"]::before { background: #ec4899; }
.skill-tag[data-color="pink"]:hover { border-color: #ec4899; }

/* --- Hover Actions --- */

.skill-tag {
    /* ... existing styles ... */
    display: inline-flex;  /* Keeps icon and text side-by-side */
    align-items: center;   /* Centers them vertically */
    gap: 12px;             /* Space between icon and text */
    /* ... existing styles ... */
}

.skill-tag:hover {
    color: #ffffff;
    transform: translateY(-3px); /* Slightly stronger lift */
    background: rgba(255, 255, 255, 0.08);
}

/* Opacity is handled in the ::before rules above for clean transitions */
/* ============================================
   Skill Icon Sizing
   ============================================ */
.skill-icon {
    width: 24px;       /* Perfect icon size */
    height: 24px;
    object-fit: contain; /* Ensures the logo doesn't get squished */
    display: block;    /* Fixes alignment issues */
}
/* Force Footer to Bottom */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer, .site-footer {
    margin-top: auto;
}
/* ============================================
   Cart Link in Header
   ============================================ */

.cart-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #9ca3af;
    transition: all 0.3s ease;
}

.cart-link:hover {
    color: white;
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

/* Footer Social Icons - Clean floating style */
/* ============================================
   Social Icons - Neon Brand Color Hover Effects
   Icon center is lighter but still saturated (neon tube effect)
   ============================================ */
.footer-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease-out;
}

.footer-social-icon svg {
    transition: all 0.3s ease-out;
}

/* Purple theme - Instagram, Facebook */
.footer-social-icon.purple:hover,
.footer-social-icon.purple:focus {
    color: #a78bfa; /* Bright purple center (violet-400) */
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.15);
    box-shadow: 
        0 0 15px rgba(139, 92, 246, 0.5),
        0 0 30px rgba(139, 92, 246, 0.3);
    outline: none;
}

.footer-social-icon.purple:hover svg {
    fill: #a78bfa; /* Bright purple center */
}

/* Cyan theme - LinkedIn, Discord */
.footer-social-icon.cyan:hover,
.footer-social-icon.cyan:focus {
    color: #22d3ee; /* Bright cyan center (cyan-400) */
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.15);
    box-shadow: 
        0 0 15px rgba(6, 182, 212, 0.5),
        0 0 30px rgba(6, 182, 212, 0.3);
    outline: none;
}

.footer-social-icon.cyan:hover svg {
    fill: #22d3ee; /* Bright cyan center */
}

/* Pink theme - X/Twitter */
.footer-social-icon.pink:hover,
.footer-social-icon.pink:focus {
    color: #f472b6; /* Bright pink center (pink-400) */
    border-color: #ec4899;
    background: rgba(236, 72, 153, 0.15);
    box-shadow: 
        0 0 15px rgba(236, 72, 153, 0.5),
        0 0 30px rgba(236, 72, 153, 0.3);
    outline: none;
}

.footer-social-icon.pink:hover svg {
    fill: #f472b6; /* Bright pink center */
}

/* Contact Page Social Icons - Square with rounded corners, footer-style hover */
.contact-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #9ca3af;
    transition: all 0.3s ease;
}

.contact-social-icon:hover {
    color: white;
}

/* Purple theme */
.contact-social-icon.purple:hover {
    background: rgba(139, 92, 246, 0.5);
    border-color: #8b5cf6;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* Cyan theme */
.contact-social-icon.cyan:hover {
    background: rgba(6, 182, 212, 0.5);
    border-color: #06b6d4;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}

/* Pink theme */
.contact-social-icon.pink:hover {
    background: rgba(236, 72, 153, 0.5);
    border-color: #ec4899;
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.4);
}

/* Footer Navigation Columns - 2 column on mobile, flows into parent on desktop */
.footer-nav-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .footer-nav-columns {
        display: contents;
    }
}

/* Footer Navigation Links - matches header nav-link style */
.footer-nav-link {
    position: relative;
    color: #b5bbc4; /* Improved contrast for small text accessibility */
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.footer-nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #8b5cf6, #06b6d4);
    transition: width 0.3s ease;
}

.footer-nav-link:hover {
    color: white;
}

.footer-nav-link:hover::after {
    width: 100%;
}

/* Active footer nav link - white (default for standard pages) */
.footer-nav-link.active {
    color: white;
    font-weight: 500;
}

.footer-nav-link.active::after {
    width: 100%;
}

/* Active footer nav link - gold (for memorial page only) */
.footer-nav-link.active-gold {
    color: #d4af37;
    font-weight: 500;
}

.footer-nav-link.active-gold::after {
    background: linear-gradient(90deg, #8b5cf6, #06b6d4); /* Same as other links */
    width: 100%;
}

/* Active-gold hover - animate gold → white → gold */
.footer-nav-link.active-gold:hover {
    animation: footerGoldWhiteGold 0.8s ease forwards;
}

/* Gold hover for memorial links - standard underline, only text turns gold */
.footer-nav-link.hover-gold {
    transition: color 0.3s ease;
}

.footer-nav-link.hover-gold::after {
    background: linear-gradient(90deg, #8b5cf6, #06b6d4); /* Same as other links */
    transition: width 0.3s ease;
}

.footer-nav-link.hover-gold:hover {
    animation: grayWhiteGold 0.8s ease forwards;
}

.footer-nav-link.hover-gold:hover::after {
    width: 100%;
}

/* Keyframes: gray → white → gold (for non-active) */
@keyframes grayWhiteGold {
    0% { color: #9ca3af; }
    35% { color: white; }
    100% { color: #d4af37; }
}

/* Keyframes: gold → white → gold (for active) */
@keyframes footerGoldWhiteGold {
    0% { color: #d4af37; }
    35% { color: white; }
    100% { color: #d4af37; }
}

/* ============================================
   Featured Project Cards (Index Page)
   ============================================ */

.featured-project-card {
    position: relative;
    border: 1px solid #1a1a1a;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, transparent 50%, rgba(6, 182, 212, 0.1) 100%);
    opacity: 0;
    z-index: 5;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.featured-project-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 
        0 0 30px rgba(139, 92, 246, 0.2),
        0 0 60px rgba(139, 92, 246, 0.1);
}

.featured-project-card:hover::before {
    opacity: 1;
}

/* ============================================
   Project Template Styles
   ============================================ */

.glass-panel {
    background: rgba(17, 17, 17, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Colored Glass Panel Variants - Service Card Style Glow */
.glass-panel-purple,
.glass-panel-cyan,
.glass-panel-pink {
    position: relative;
    z-index: 1;
    overflow: visible;
    background: rgba(18, 18, 18, 0.95);
    transition: all 0.4s ease;
}

.glass-panel-purple {
    border: 2px solid rgba(139, 92, 246, 0.7);
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.5),
                0 0 50px rgba(139, 92, 246, 0.3),
                0 0 80px rgba(139, 92, 246, 0.2),
                0 0 120px rgba(139, 92, 246, 0.1);
}
.glass-panel-purple:hover {
    border-color: #8b5cf6;
    box-shadow: 0 0 35px rgba(139, 92, 246, 0.7),
                0 0 70px rgba(139, 92, 246, 0.45),
                0 0 110px rgba(139, 92, 246, 0.25),
                0 0 150px rgba(139, 92, 246, 0.1);
}

.glass-panel-cyan {
    border: 2px solid rgba(6, 182, 212, 0.7);
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.5),
                0 0 50px rgba(6, 182, 212, 0.3),
                0 0 80px rgba(6, 182, 212, 0.2),
                0 0 120px rgba(6, 182, 212, 0.1);
}
.glass-panel-cyan:hover {
    border-color: #06b6d4;
    box-shadow: 0 0 35px rgba(6, 182, 212, 0.7),
                0 0 70px rgba(6, 182, 212, 0.45),
                0 0 110px rgba(6, 182, 212, 0.25),
                0 0 150px rgba(6, 182, 212, 0.1);
}

.glass-panel-pink {
    border: 2px solid rgba(236, 72, 153, 0.7);
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.5),
                0 0 50px rgba(236, 72, 153, 0.3),
                0 0 80px rgba(236, 72, 153, 0.2),
                0 0 120px rgba(236, 72, 153, 0.1);
}
.glass-panel-pink:hover {
    border-color: #ec4899;
    box-shadow: 0 0 35px rgba(236, 72, 153, 0.7),
                0 0 70px rgba(236, 72, 153, 0.45),
                0 0 110px rgba(236, 72, 153, 0.25),
                0 0 150px rgba(236, 72, 153, 0.1);
}

/* BTS Card with Color Variants - Persistent Edge Glow */
.bts-card {
    position: relative;
    z-index: 1;
    border: 1px solid #2a2a2a;
    transition: all 0.4s ease;
    overflow: visible;
}

.bts-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    opacity: 0.2;
    z-index: -1;
    filter: blur(8px);
    transition: all 0.3s ease;
}

.bts-card:hover::before {
    opacity: 0.6;
    filter: blur(12px);
}

.bts-card-purple::before { background: #8b5cf6; }
.bts-card-purple { border-color: rgba(139, 92, 246, 0.3) !important; }
.bts-card-purple:hover { border-color: #8b5cf6 !important; }

.bts-card-cyan::before { background: #06b6d4; }
.bts-card-cyan { border-color: rgba(6, 182, 212, 0.3) !important; }
.bts-card-cyan:hover { border-color: #06b6d4 !important; }

.bts-card-pink::before { background: #ec4899; }
.bts-card-pink { border-color: rgba(236, 72, 153, 0.3) !important; }
.bts-card-pink:hover { border-color: #ec4899 !important; }

/* Result Card with Color Variants - Persistent Edge Glow */
.result-card {
    position: relative;
    z-index: 1;
    overflow: visible;
    transition: all 0.4s ease;
    border: 1px solid #2a2a2a;
}

.result-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    opacity: 0.2;
    z-index: -1;
    filter: blur(8px);
    transition: all 0.3s ease;
}

.result-card:hover::before {
    opacity: 0.6;
    filter: blur(12px);
}

.result-card-purple::before { background: #8b5cf6; }
.result-card-purple { border-color: rgba(139, 92, 246, 0.3) !important; }
.result-card-purple:hover { border-color: #8b5cf6 !important; }

.result-card-cyan::before { background: #06b6d4; }
.result-card-cyan { border-color: rgba(6, 182, 212, 0.3) !important; }
.result-card-cyan:hover { border-color: #06b6d4 !important; }

.result-card-pink::before { background: #ec4899; }
.result-card-pink { border-color: rgba(236, 72, 153, 0.3) !important; }
.result-card-pink:hover { border-color: #ec4899 !important; }

/* Next Project Card with Color Variants - Outward Rim Light */
.next-project-card {
    position: relative;
    z-index: 1;
    overflow: hidden; /* Clip inner content to rounded shape */
    transition: all 0.4s ease;
    margin: 20px; /* Space for glow to render without clipping */
}

/* Box-shadow renders outside the element, so glow still works with overflow:hidden */
.next-project-card-purple { 
    border: 2px solid rgba(139, 92, 246, 0.7) !important;
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.5),
                0 0 50px rgba(139, 92, 246, 0.3),
                0 0 80px rgba(139, 92, 246, 0.2),
                0 0 120px rgba(139, 92, 246, 0.1);
}
.next-project-card-purple:hover { 
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 35px rgba(139, 92, 246, 0.7),
                0 0 70px rgba(139, 92, 246, 0.45),
                0 0 110px rgba(139, 92, 246, 0.25),
                0 0 150px rgba(139, 92, 246, 0.1);
}

.next-project-card-cyan { 
    border: 2px solid rgba(6, 182, 212, 0.7) !important;
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.5),
                0 0 50px rgba(6, 182, 212, 0.3),
                0 0 80px rgba(6, 182, 212, 0.2),
                0 0 120px rgba(6, 182, 212, 0.1);
}
.next-project-card-cyan:hover { 
    border-color: #06b6d4 !important;
    box-shadow: 0 0 35px rgba(6, 182, 212, 0.7),
                0 0 70px rgba(6, 182, 212, 0.45),
                0 0 110px rgba(6, 182, 212, 0.25),
                0 0 150px rgba(6, 182, 212, 0.1);
}

.next-project-card-pink { 
    border: 2px solid rgba(236, 72, 153, 0.7) !important;
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.5),
                0 0 50px rgba(236, 72, 153, 0.3),
                0 0 80px rgba(236, 72, 153, 0.2),
                0 0 120px rgba(236, 72, 153, 0.1);
}
.next-project-card-pink:hover { 
    border-color: #ec4899 !important;
    box-shadow: 0 0 35px rgba(236, 72, 153, 0.7),
                0 0 70px rgba(236, 72, 153, 0.45),
                0 0 110px rgba(236, 72, 153, 0.25),
                0 0 150px rgba(236, 72, 153, 0.1);
}

/* Improve gray text visibility on next-project-card */
.next-project-card .text-gray-500,
.next-project-card .text-gray-400 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.project-data-card {
    box-shadow: 
        0 0 40px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(139, 92, 246, 0.1);
}

/* ============================================
   Process Timeline (About Page)
   ============================================ */

.process-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .process-timeline {
        flex-direction: row;
        max-width: none;
        gap: 0;
    }
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    text-align: center;
    padding: 0 1rem;
}

.process-icon {
    width: 60px;
    height: 60px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

.process-step:hover .process-icon {
    transform: scale(1.1);
    box-shadow: 0 0 20px currentColor;
}

.process-connector {
    display: none;
}

@media (min-width: 768px) {
    .process-connector {
        display: block;
        position: absolute;
        top: 30px;
        left: calc(50% + 35px);
        width: calc(100% - 70px);
        height: 2px;
        background: linear-gradient(90deg, 
            rgba(139, 92, 246, 0.3) 0%, 
            rgba(6, 182, 212, 0.3) 50%,
            rgba(236, 72, 153, 0.3) 100%
        );
    }

    .process-step:last-child .process-connector {
        display: none;
    }
}

.process-content {
    margin-top: 1.5rem;
    padding-bottom: 2rem;
}

@media (min-width: 768px) {
    .process-content {
        padding-bottom: 0;
    }
}

.process-number {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    opacity: 0.5;
    display: block;
    margin-bottom: 0.5rem;
}

/* Mobile process connector (vertical) */
@media (max-width: 767px) {
    .process-step:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 2px;
        height: 2rem;
        background: linear-gradient(180deg, 
            rgba(139, 92, 246, 0.3) 0%, 
            rgba(6, 182, 212, 0.3) 100%
        );
        transform: translateX(-50%);
    }
}

/* ============================================
   Discord Button Styles
   ============================================ */

.discord-join-btn {
    transition: all 0.3s ease;
}

.discord-join-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(88, 101, 242, 0.4);
}

/* ============================================
   Center Stage Carousel
   ============================================ */

.center-stage-carousel {
    position: relative;
    padding: 2rem 0;
}

.carousel-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    perspective: 1200px;
    min-height: 450px;
}

/* Carousel Item Base - Desktop uses absolute positioning */
.carousel-item {
    position: absolute;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Position States - Desktop only */
@media (min-width: 769px) {
    .carousel-item[data-position="left"] {
        transform: translateX(-110%) scale(0.7);
        opacity: 0.5;
        filter: blur(4px);
        z-index: 1;
    }
    
    .carousel-item[data-position="center"] {
        transform: translateX(0) scale(1);
        opacity: 1;
        filter: blur(0);
        z-index: 10;
    }
    
    .carousel-item[data-position="right"] {
        transform: translateX(110%) scale(0.7);
        opacity: 0.5;
        filter: blur(4px);
        z-index: 1;
    }
    
    /* Hidden items (for more than 3 projects) */
    .carousel-item[data-position="hidden"] {
        transform: translateX(0) scale(0.5);
        opacity: 0;
        filter: blur(8px);
        z-index: 0;
        pointer-events: none;
    }
}

/* Mobile: Peeking carousel pattern - overrides everything above */
@media (max-width: 768px) {
    .center-stage-carousel {
        padding: 0.5rem 0;
    }
    
    .carousel-track {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 12px;
        padding: 0.5rem 10%;
        scroll-padding: 0 10%;
        min-height: auto;
        perspective: none;
        justify-content: flex-start;
    }
    
    .carousel-track::-webkit-scrollbar {
        display: none;
    }
    
    .carousel-item {
        position: relative;
        flex: 0 0 80%;
        scroll-snap-align: center;
        transform: none;
        opacity: 1;
        filter: none;
    }
    
    .carousel-item[data-position="left"],
    .carousel-item[data-position="center"],
    .carousel-item[data-position="right"],
    .carousel-item[data-position="hidden"] {
        position: relative;
        transform: none;
        opacity: 1;
        filter: none;
        z-index: 1;
        pointer-events: auto;
    }
    
    .carousel-card {
        width: 100%;
    }
    
    .carousel-indicators {
        margin-top: 0.75rem;
    }
}

/* Carousel Card */
.carousel-card {
    display: block;
    position: relative;
    width: 700px;
    aspect-ratio: 16 / 10;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

@media (max-width: 1280px) {
    .carousel-card {
        width: 600px;
    }
}

@media (max-width: 1024px) {
    .carousel-card {
        width: 500px;
    }
}

@media (max-width: 768px) {
    .carousel-card {
        width: 280px;
    }
}

@media (max-width: 480px) {
    .carousel-card {
        width: 260px;
    }
}

/* Card Image */
.carousel-card .card-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.carousel-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

/* Card Overlay Gradient */
.carousel-card .card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(5, 5, 5, 0.95) 0%,
        rgba(5, 5, 5, 0.6) 40%,
        rgba(5, 5, 5, 0.2) 70%,
        transparent 100%
    );
    z-index: 2;
}

/* Card Content */
.carousel-card .card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    z-index: 3;
    transition: all 0.4s ease;
}

@media (max-width: 768px) {
    .carousel-card .card-content {
        padding: 1.25rem;
    }
}

.carousel-card .card-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    border: 1px solid;
}

.carousel-card .tag-purple {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

.carousel-card .tag-cyan {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
    border-color: rgba(6, 182, 212, 0.3);
}

.carousel-card .tag-pink {
    background: rgba(236, 72, 153, 0.2);
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.3);
}

.carousel-card .card-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.75rem;
    color: white;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .carousel-card .card-title {
        font-size: 1.25rem;
    }
}

.carousel-card .card-description {
    font-size: 0.875rem;
    color: #9ca3af;
    line-height: 1.5;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

/* Card Glow Effect - Uses --card-color variable */
.carousel-card .card-glow {
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: var(--card-color, #8b5cf6);
    opacity: 0;
    z-index: -1;
    filter: blur(20px);
    transition: opacity 0.4s ease;
}

/* Center Item Enhancements */
.carousel-item[data-position="center"] .carousel-card {
    border-color: color-mix(in srgb, var(--card-color, #8b5cf6) 30%, transparent);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 40px color-mix(in srgb, var(--card-color, #8b5cf6) 15%, transparent);
}

.carousel-item[data-position="center"] .card-description {
    opacity: 1;
    max-height: 100px;
    margin-top: 0.5rem;
}

.carousel-item[data-position="center"] .card-glow {
    opacity: 0.4;
}

.carousel-item[data-position="center"] .carousel-card:hover .card-image img {
    transform: scale(1.05);
}

.carousel-item[data-position="center"] .carousel-card:hover .card-glow {
    opacity: 0.6;
}

.carousel-item[data-position="center"] .carousel-card:hover {
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px color-mix(in srgb, var(--card-color, #8b5cf6) 25%, transparent),
        0 0 100px color-mix(in srgb, var(--card-color, #8b5cf6) 15%, transparent);
}

/* Side Items - Clickable but no hover effects */
.carousel-item[data-position="left"],
.carousel-item[data-position="right"] {
    cursor: pointer;
}

.carousel-item[data-position="left"] .carousel-card,
.carousel-item[data-position="right"] .carousel-card {
    pointer-events: none;
}

.carousel-item[data-position="left"] .card-content,
.carousel-item[data-position="right"] .card-content {
    opacity: 0.7;
}

/* Carousel Indicators */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.carousel-indicators .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.carousel-indicators .indicator::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.carousel-indicators .indicator:hover {
    background: rgba(255, 255, 255, 0.4);
}

.carousel-indicators .indicator.active {
    background: #8b5cf6;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

.carousel-indicators .indicator.active::before {
    border-color: rgba(139, 92, 246, 0.3);
}

/* Pause indicator (optional visual feedback) */
.center-stage-carousel.paused .carousel-indicators::after {
    content: 'PAUSED';
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.center-stage-carousel.paused:hover .carousel-indicators::after {
    opacity: 1;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .carousel-item {
        transition: none;
    }
    
    .carousel-card,
    .carousel-card .card-image img,
    .carousel-card .card-glow,
    .carousel-card .card-content,
    .carousel-card .card-description {
        transition: none;
    }
}

/* Newsletter Success State */
.newsletter-form-wrapper {
    position: relative;
}

.newsletter-form-wrapper .success-check {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: #10b981;
    display: none;
    pointer-events: none;
}

.newsletter-form-wrapper.success .success-check {
    display: block !important;
}

.newsletter-form-wrapper.success input[type="email"] {
    border-color: #10b981;
    padding-left: 2.75rem;
    color: #10b981;
}

.newsletter-form-wrapper.success input[type="email"]::placeholder {
    color: #10b981;
    opacity: 1;
}

/* ============================================
   Footer Base Visibility - Prevent scroll bug
   ============================================ */
footer {
    opacity: 1 !important;
    visibility: visible !important;
}

footer * {
    opacity: inherit;
}

/* ============================================
   Footer Newsletter - Triple-Nested Design (Global)
   3 shapes: Outer wrapper > Frosted pill > Input + Join button
   ============================================ */

/* Outermost wrapper - subtle container */
.newsletter-outer-wrapper {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 5px; /* Increased for more visible centering */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
}

/* ============================================
   Footer Button Styles - Glass-btn Animation
   ============================================ */

/* Primary Button - Solid Fill (Book a Time) - Mutes on hover */
.footer-btn-primary {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0a0a0a !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    font-weight: 600 !important;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: visible !important;
}

.footer-btn-primary::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4, #8b5cf6);
    background-size: 200% 200%;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    filter: blur(12px);
}

.footer-btn-primary svg {
    stroke: #0a0a0a !important;
    transition: stroke 0.3s ease !important;
}

/* Match glass-btn (Send Message) hover animation */
.footer-btn-primary:hover {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.6) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 20px rgba(139, 92, 246, 0.4),
        0 0 40px rgba(139, 92, 246, 0.2),
        0 0 60px rgba(139, 92, 246, 0.1) !important;
}

.footer-btn-primary:hover svg {
    stroke: #ffffff !important;
}

.footer-btn-primary:hover::before {
    opacity: 0.6;
    animation: neonPulse 2s ease-in-out infinite;
}

/* Secondary Button - Outline (Get in Touch) - Match glass-btn hover */
.footer-btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-weight: 500 !important;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: visible !important;
}

.footer-btn-secondary::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4, #8b5cf6);
    background-size: 200% 200%;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    filter: blur(12px);
}

.footer-btn-secondary svg {
    stroke: rgba(255, 255, 255, 0.7) !important;
    transition: stroke 0.3s ease !important;
}

/* Match glass-btn (Send Message) hover animation */
.footer-btn-secondary:hover {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.6) !important;
    color: #ffffff !important;
    box-shadow:
        0 0 20px rgba(139, 92, 246, 0.4),
        0 0 40px rgba(139, 92, 246, 0.2),
        0 0 60px rgba(139, 92, 246, 0.1) !important;
}

.footer-btn-secondary:hover svg {
    stroke: #ffffff !important;
}

.footer-btn-secondary:hover::before {
    opacity: 0.6;
    animation: neonPulse 2s ease-in-out infinite;
}

/* ============================================
   Accessibility - Lightened Text (Fix #4)
   ============================================ */

/* Bio text - passes WCAG contrast */
.footer-bio-text {
    color: #D1D5DB !important;
}

/* Email link */
.footer-email-link {
    color: #D1D5DB !important;
}

/* Newsletter label */
.footer-newsletter-label {
    color: #D1D5DB !important;
}

/* Nav links - already styled */

/* Copyright text */
.footer-copyright {
    color: #b5bbc4 !important;
}

/* Legal links */
.footer-legal-link {
    color: #b5bbc4 !important;
}

.footer-legal-link:hover {
    color: #D1D5DB !important;
}

/* ============================================
   Newsletter Form - Strict Vertical Centering
   ============================================ */

/* Outer Pill (border container) */
.footer-newsletter-form {
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    padding: 6px 6px; /* Equal top/bottom padding */
    gap: 6px;
    box-sizing: border-box;
    line-height: 0; /* Kill text-induced height expansion */
    margin: 0 !important;
}

/* Middle Pill (input wrapper) - kill all ghost margins */
.footer-newsletter-form .newsletter-form-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal;
}

/* Input field - kill all ghost margins */
.footer-newsletter-form .newsletter-input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    padding: 8px 12px;
    font-size: 0.8125rem;
    color: white;
    text-align: left;
    margin: 0 !important;
    box-sizing: border-box;
    line-height: normal;
}

.footer-newsletter-form .newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.footer-newsletter-form .newsletter-input:focus {
    outline: none;
}

/* Newsletter Submit Button - kill all ghost margins */
/* Override WooCommerce generic button[type="submit"] styles */
.newsletter-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 10px 20px !important;
    border-radius: 9999px;
    font-size: 0.75rem !important;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
    margin: 0 !important;
    box-sizing: border-box;
    line-height: normal;
}

.newsletter-submit-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #8b5cf6, #06b6d4, #8b5cf6);
    background-size: 200% 200%;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    filter: blur(12px);
}

/* Join button hover - match glass-btn (Send Message) animation */
.newsletter-submit-btn:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.6);
    color: #ffffff;
    box-shadow:
        0 0 20px rgba(139, 92, 246, 0.4),
        0 0 40px rgba(139, 92, 246, 0.2),
        0 0 60px rgba(139, 92, 246, 0.1);
}

.newsletter-submit-btn:hover::before {
    opacity: 0.6;
    animation: neonPulse 2s ease-in-out infinite;
}

.newsletter-submit-btn .btn-text {
    display: inline;
    color: inherit;
    transition: color 0.3s ease;
}

.newsletter-submit-btn .btn-arrow {
    width: 0.875rem;
    height: 0.875rem;
    display: inline-block;
    flex-shrink: 0;
    stroke: currentColor;
    transition: stroke 0.3s ease;
}

.newsletter-submit-btn:hover .btn-text,
.newsletter-submit-btn:hover .btn-arrow {
    color: #ffffff;
    stroke: #ffffff;
}

/* #14: Footer Utility Label Typography (Global) */
footer h4.font-display {
    font-size: 0.625rem;
    letter-spacing: 0.25em; /* Luxury wide tracking */
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 0.875rem;
    font-weight: 500;
}

/* #12: ACCESSIBILITY - Improve grey text contrast */
footer .text-gray-400,
footer .text-gray-500 {
    color: #9CA3AF; /* Lighter grey for readability */
}

footer .footer-nav-link {
    color: #9ca3af; /* Match header nav-link color */
}

footer .footer-nav-link:hover {
    color: #FFFFFF;
}

/* #11: Active link underline - increased offset, thinner */
footer .footer-nav-link.active {
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

/* Social icons base - neon brand colors defined above take precedence */
footer .footer-social-icon {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-out;
}

/* ============================================
   Desktop Footer Styles - Agency-Level Alignment
   5-column grid layout
   ============================================ */
@media (min-width: 768px) {
    /* Reduce footer padding on desktop - override md:pt-16 */
    footer {
        padding-top: 1rem !important;
    }

    /* Reduce space between content grid and copyright bar */
    footer .grid.mb-6 {
        margin-bottom: 0.5rem;
    }

    /* 5-column grid: Brand, Navigation, Explore, Get Started, Follow */
    /* Target footer grid directly - more robust than escaped Tailwind class */
    footer > div > .grid,
    footer .footer-main-grid {
        display: grid !important;
        grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr 1fr !important;
        gap: 32px !important;
        align-items: start !important;
    }
    
    /* Reset order properties on desktop */
    footer > div > .grid > div,
    footer .footer-main-grid > div {
        order: unset !important;
    }
    
    /* Hide email - redundant with button */
    footer .order-2 a[href^="mailto"]:not(.glass-btn) {
        display: none;
    }
    
    /* #3 & #4: First content row alignment - buttons align with nav links */
    footer .order-2 .footer-cta-grid {
        display: flex;
        flex-direction: column;
        gap: 0.75rem; /* Increased gap between buttons */
        width: 100%;
        margin-top: 0; /* Ensure no extra top margin */
    }
    
    /* #7: CTA Buttons - exact width match with newsletter */
    footer .order-2 .footer-cta-grid .footer-btn-primary,
    footer .order-2 .footer-cta-grid .footer-btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 0.5rem 1rem;
        min-height: 38px;
    }
    
    /* #4: Header alignment - consistent margin below ALL headers */
    footer h4.font-display {
        margin-bottom: 0.875rem; /* Slightly tighter */
    }
    
    /* Show newsletter label on desktop (Fix #1) */
    footer .footer-newsletter-label {
        display: block;
        color: #D1D5DB;
        margin-bottom: 0.5rem;
    }
    
    /* #7: Newsletter outer wrapper - match social icons width, keep pill styling */
    footer .newsletter-outer-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* #7: Newsletter form sizing to match buttons */
    footer .footer-newsletter-form {
        margin-bottom: 0.75rem; /* Match button gap */
        min-height: 38px;
    }
    
    /* #8 & #9: Social icons - SPAN FULL WIDTH */
    footer .footer-social-row {
        margin-top: 0.5rem !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0;
        gap: 0;
    }
    
    /* #8: Ensure social icons container fills column */
    footer .order-4 {
        width: 100%;
    }
    
    /* #13: Bio text - controlled line breaks */
    footer .order-1 p.text-gray-500 {
        line-height: 1.65;
        max-width: 240px; /* Tighter for elegant 3-line break */
    }
    
    /* Left column alignment */
    footer .order-1 {
        padding-left: 0;
    }
    
    /* #11: Active link underline - more offset, thinner */
    footer a.active,
    footer .footer-nav-link.active {
        text-underline-offset: 6px;
        text-decoration-thickness: 1px;
    }
}

/* #15 & #16: Copyright bar - minimal padding, no border (match main site) */
footer .py-4.border-t {
    border-top: none !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.35rem !important;
    margin-top: 0.15rem;
}

/* #16: Ensure copyright text and legal links baseline align */
@media (min-width: 769px) {
    footer .py-4.border-t.flex {
        align-items: baseline;
    }
}

/* ============================================
   Mobile Footer - Agency Level Design
   ============================================ */
@media (max-width: 768px) {
    /* Lighter footer background on mobile */
    footer.py-8,
    footer.border-t,
    footer.bg-dark-900 {
        background-color: #111111 !important;
    }
    
    /* Footer padding */
    footer.py-8 {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }
    
    /* Main grid - remove gap, use section padding instead */
    footer .grid {
        gap: 0;
    }
    
    footer .grid.mb-6 {
        margin-bottom: 1.25rem;
    }
    
    /* ----------------------------------------
       Brand Section (order-1)
       ---------------------------------------- */
    footer .order-1 {
        padding-bottom: 1.25rem;
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    
    footer .order-1 .mb-2 {
        margin-bottom: 0;
    }
    
    /* ----------------------------------------
       Get Started / CTA Buttons (order-2)
       Now shows heading and email on mobile
       ---------------------------------------- */
    footer .order-2 {
        padding-top: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: none;
    }
    
    /* Show the Get Started heading on mobile */
    footer .order-2 h4.mb-4 {
        display: block;
        margin-bottom: 0.5rem;
        text-align: center;
    }
    
    /* Show email on mobile - centered below heading */
    footer .order-2 .flex.flex-col.gap-3 > a[href^="mailto"] {
        display: block;
        text-align: center;
        margin-bottom: 0.75rem;
    }
    
    footer .order-2 .flex.flex-col.gap-3 {
        gap: 0;
    }
    
    /* CTA Buttons Grid - Full width 50/50 split, aligned with nav columns */
    footer .order-2 .footer-cta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 0.75rem;
    }
    
    /* CTA Button pills - substantial and centered */
    footer .order-2 .footer-cta-grid .glass-btn {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1rem;
        font-size: 0.8125rem;
        font-weight: 500;
        border-radius: 9999px;
    }
    
    /* ----------------------------------------
       Navigation Section (order-3)
       No bottom border - whitespace defines sections
       ---------------------------------------- */
    footer .order-3 {
        padding-top: 0.875rem;
        padding-bottom: 0.25rem; /* Reduced from 0.5rem */
        border-bottom: none;
    }
    
    /* Navigation heading - tighter spacing */
    footer .order-3 h4.mb-4 {
        margin-bottom: 0.625rem;
    }
    
    /* Navigation grid - 50/50 aligned with CTA buttons */
    footer .order-3 .footer-nav-grid,
    footer .order-3 .inline-grid.grid-cols-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 0 0.75rem;
    }
    
    /* Center nav links in each column */
    footer .order-3 .footer-nav-grid ul,
    footer .order-3 .inline-grid.grid-cols-2 ul {
        text-align: center;
    }
    
    footer .order-3 .footer-nav-grid ul li,
    footer .order-3 .inline-grid.grid-cols-2 ul li {
        margin-bottom: 0.625rem;
    }
    
    footer .order-3 .footer-nav-link {
        font-size: 0.875rem;
    }
    
    /* ----------------------------------------
       Follow / Newsletter Section (order-4)
       Reduced top spacing (was too much gap after Store)
       ---------------------------------------- */
    footer .order-4 {
        padding-top: 0.25rem; /* Reduced from 0.625rem - cuts spacing in half */
    }
    
    /* Follow heading - reduced spacing */
    footer .order-4 h4.mb-4 {
        margin-bottom: 0.375rem;
    }
    
    /* Newsletter label - reduced padding above */
    footer .order-4 .footer-newsletter-label {
        font-size: 0.6875rem;
        color: #b5bbc4; /* Explicit color for contrast (no opacity reduction) */
        margin-bottom: 0.5rem;
        letter-spacing: 0.02em;
    }
    
    /* Newsletter form - balanced spacing */
    footer .order-4 .footer-newsletter-form {
        margin-bottom: 0.875rem;
    }
    
    /* Mobile newsletter button - slightly smaller */
    .newsletter-submit-btn {
        padding: 0.4375rem 0.875rem;
        font-size: 0.6875rem;
    }
    
    .newsletter-submit-btn .btn-arrow {
        width: 0.75rem;
        height: 0.75rem;
    }
    
    /* Social Icons Row - match main site alignment */
    footer .order-4 .footer-social-row {
        margin-top: 0.75rem;
        padding-top: 0;
        justify-content: space-between;
        gap: 0;
    }
    
    /* ----------------------------------------
       Copyright Section
       ---------------------------------------- */
    footer .pt-4.border-t {
        padding-top: 1.25rem;
        margin-top: 0.25rem;
    }
}

/* ============================================
   Portfolio Modal Styles
   ============================================ */
.portfolio-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.portfolio-modal.active {
    opacity: 1;
    visibility: visible;
}
.portfolio-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.portfolio-modal-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    max-height: calc(90vh - 10px);
    background: #0f0f0f;
    border: 2px solid var(--modal-color);
    border-radius: 1.5rem;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.3s ease-out;
    z-index: 1;
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 30px color-mix(in srgb, var(--modal-color) 40%, transparent),
        0 0 60px color-mix(in srgb, var(--modal-color) 20%, transparent);
}
/* Remove colored overlay - keep modal dark */
.portfolio-modal-content::before {
    display: none;
}
/* Outer glow effect */
.portfolio-modal-content::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: calc(1.5rem + 4px);
    background: var(--modal-color);
    opacity: 0.5;
    z-index: -1;
    filter: blur(20px);
}
.portfolio-modal.active .portfolio-modal-content {
    transform: scale(1) translateY(0);
}
/* Modal color variants - must have one */
.portfolio-modal.modal-purple { --modal-color: #8b5cf6; }
.portfolio-modal.modal-cyan { --modal-color: #06b6d4; }
.portfolio-modal.modal-pink { --modal-color: #ec4899; }

/* Modal gray text visibility - comprehensive fix */
.portfolio-modal.modal-cyan .text-gray-500,
.portfolio-modal.modal-cyan .text-gray-400,
.portfolio-modal.modal-cyan #modal-description,
.portfolio-modal.modal-cyan #featured-modal-description,
.portfolio-modal.modal-cyan .modal-tool-tag {
    color: rgba(255, 255, 255, 0.85) !important;
}

.portfolio-modal.modal-purple .text-gray-500,
.portfolio-modal.modal-purple .text-gray-400,
.portfolio-modal.modal-purple #modal-description,
.portfolio-modal.modal-purple #featured-modal-description,
.portfolio-modal.modal-purple .modal-tool-tag {
    color: rgba(255, 255, 255, 0.8) !important;
}

.portfolio-modal.modal-pink .text-gray-500,
.portfolio-modal.modal-pink .text-gray-400,
.portfolio-modal.modal-pink #modal-description,
.portfolio-modal.modal-pink #featured-modal-description,
.portfolio-modal.modal-pink .modal-tool-tag {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Category labels - muted gray for hierarchy - MUST override variant colors */
.portfolio-modal #modal-category,
.portfolio-modal #featured-modal-category,
.portfolio-modal.modal-cyan #modal-category,
.portfolio-modal.modal-purple #modal-category,
.portfolio-modal.modal-pink #modal-category,
.portfolio-modal.modal-cyan #featured-modal-category,
.portfolio-modal.modal-purple #featured-modal-category,
.portfolio-modal.modal-pink #featured-modal-category {
    color: rgba(156, 163, 175, 0.85) !important;
    font-weight: 400;
}

.portfolio-modal-scroll {
    position: relative;
    z-index: 2;
    max-height: calc(90vh - 10px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--modal-color) #1a1a1a;
}
.portfolio-modal-scroll::-webkit-scrollbar {
    width: 8px;
}
.portfolio-modal-scroll::-webkit-scrollbar-track {
    background: #1a1a1a;
}
.portfolio-modal-scroll::-webkit-scrollbar-thumb {
    background: var(--modal-color);
    border-radius: 4px;
}
.modal-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--modal-color);
    border-radius: 50%;
    color: var(--modal-color);
    cursor: pointer;
    transition: all 0.3s ease;
}
.modal-close-btn:hover {
    background: var(--modal-color);
    border-color: var(--modal-color);
    color: white;
    transform: rotate(90deg);
    box-shadow: 0 0 20px color-mix(in srgb, var(--modal-color) 50%, transparent);
}
.modal-media {
    aspect-ratio: 1.85/1;
    background: #000;
    overflow: hidden;
    position: relative;
    margin-top: 0;
    padding: 0;
    box-sizing: border-box;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
}
.modal-media::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 50%, #0a1a1f 100%);
    pointer-events: none;
    z-index: 1;
}
.modal-media .modal-hero {
    background: #000 !important;
    height: 100%;
    width: 100%;
}
.modal-media img,
.modal-media video,
.modal-media iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.modal-body {
    padding: 1.75rem 1.75rem 2.25rem 1.75rem;
    position: relative;
    z-index: 2;
    margin-top: 0;
    transition: height 0.3s ease-out;
    min-height: 280px;
    background: 
        /* Spotlight - brightest at center, fades outward */
        radial-gradient(ellipse 80% 70% at 50% 30%, 
            color-mix(in srgb, var(--modal-color) 55%, transparent) 0%, 
            color-mix(in srgb, var(--modal-color) 35%, transparent) 40%, 
            transparent 100%),
        /* Corner vignetting - dark shadows in corners */
        radial-gradient(ellipse 150% 150% at 0% 100%, 
            transparent 0%, 
            rgba(0, 0, 0, 0.4) 70%, 
            rgba(0, 0, 0, 0.6) 100%),
        radial-gradient(ellipse 150% 150% at 100% 100%, 
            transparent 0%, 
            rgba(0, 0, 0, 0.4) 70%, 
            rgba(0, 0, 0, 0.6) 100%),
        /* Base gradient for depth */
        linear-gradient(180deg, 
            color-mix(in srgb, var(--modal-color) 30%, rgba(12, 12, 12, 0.98)) 0%,
            rgba(10, 10, 10, 0.99) 60%,
            #0a0a0a 100%);
}

/* Agency-level typography and spacing */
.modal-body #modal-title,
.modal-body #featured-modal-title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

.modal-body #modal-description,
.modal-body #featured-modal-description {
    line-height: 1.7;
    margin-bottom: 1.5rem;
    min-height: 4.5rem;
}

.modal-body .prose {
    margin-bottom: 1.75rem;
    min-height: 6rem;
}

.tools-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 1.75rem;
    padding-top: 0;
}

.tools-divider h4,
.tools-divider .font-display {
    margin-top: 1.75rem;
    padding-top: 0;
    margin-bottom: 1.5rem;
}

/* Modal body text visibility baseline */
.modal-body .text-gray-500,
.modal-body .text-gray-400 {
    color: rgba(255, 255, 255, 0.75);
}

.modal-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    background: color-mix(in srgb, var(--modal-color, #06b6d4) 15%, transparent);
    border: none;
    border-radius: 9999px;
    font-size: 0.65rem;
    color: var(--modal-color, #06b6d4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    height: 1.5rem;
}

/* Category label - muted gray for hierarchy */
.modal-category {
    color: #9ca3af !important;
    font-size: 0.75rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
}
.modal-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.modal-tool-tag {
    padding: 0.375rem 0.75rem;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.2s ease;
}
.modal-tool-tag:hover {
    border-color: var(--modal-color, #06b6d4);
    color: var(--modal-color, #06b6d4);
}

/* Modal Navigation Arrows - positioned at center edges of modal */
.modal-nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 102;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid var(--modal-color, #8b5cf6);
    border-radius: 50%;
    color: var(--modal-color, #8b5cf6);
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.modal-nav-arrow:hover {
    background: var(--modal-color, #8b5cf6);
    border-color: var(--modal-color, #8b5cf6);
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px color-mix(in srgb, var(--modal-color, #8b5cf6) 50%, transparent);
}

/* Position arrows at edges of modal content (max-width: 1000px, 90% width) */
.modal-nav-prev {
    left: calc(50% - min(500px, 45%) - 60px);
}
.modal-nav-prev:hover {
    transform: translateY(-50%) scale(1.1) translateX(-3px);
}
.modal-nav-next {
    right: calc(50% - min(500px, 45%) - 60px);
}
.modal-nav-next:hover {
    transform: translateY(-50%) scale(1.1) translateX(3px);
}

@media (max-width: 1200px) {
    .modal-nav-prev {
        left: calc(5% - 24px);
    }
    .modal-nav-next {
        right: calc(5% - 24px);
    }
}

@media (max-width: 768px) {
    .modal-nav-arrow {
        display: none !important; /* Hide desktop arrows on mobile */
    }
}

/* Mobile Image Navigation Arrows - positioned relative to hero image */
.modal-image-nav {
    display: none;
}

@media (max-width: 768px) {
    .modal-image-nav {
        display: none !important; /* Remove broken arrows, use carousel instead */
    }
}

/* Mobile Peeking Carousel for Modal */
.modal-carousel-container {
    display: none;
}

@media (max-width: 768px) {
    .modal-carousel-container {
        display: flex;
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .modal-carousel-container::-webkit-scrollbar {
        display: none;
    }
    .modal-carousel-slide {
        flex: 0 0 85%;
        scroll-snap-align: center;
        height: 100%;
        position: relative;
        border-radius: 0.5rem;
        overflow: hidden;
        margin: 0 2.5%;
    }
    .modal-carousel-slide:first-child {
        margin-left: 7.5%;
    }
    .modal-carousel-slide:last-child {
        margin-right: 7.5%;
    }
    .modal-carousel-slide-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .modal-carousel-slide-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    }
    /* Hide regular hero on mobile when carousel is present */
    .modal-media .modal-hero {
        display: none;
    }
    /* Pagination dots */
    .modal-carousel-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 12px 0 8px;
        background: transparent;
    }
    .modal-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .modal-carousel-dot.active {
        background: var(--modal-color, #8b5cf6);
        transform: scale(1.2);
    }
}

/* ============================================
   Gray Text Visibility on Colored Elements
   ============================================ */

/* Improve gray text visibility on cyan-themed elements */
.glass-panel-cyan .text-gray-500,
.glass-panel-cyan .text-gray-400,
.glass-panel-cyan .text-gray-600,
.bts-card-cyan .text-gray-500,
.bts-card-cyan .text-gray-400,
.result-card-cyan .text-gray-500,
.result-card-cyan .text-gray-400 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Improve gray text visibility on purple-themed elements */
.glass-panel-purple .text-gray-500,
.glass-panel-purple .text-gray-400,
.glass-panel-purple .text-gray-600,
.bts-card-purple .text-gray-500,
.bts-card-purple .text-gray-400,
.result-card-purple .text-gray-500,
.result-card-purple .text-gray-400 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Improve gray text visibility on pink-themed elements */
.glass-panel-pink .text-gray-500,
.glass-panel-pink .text-gray-400,
.glass-panel-pink .text-gray-600,
.bts-card-pink .text-gray-500,
.bts-card-pink .text-gray-400,
.result-card-pink .text-gray-500,
.result-card-pink .text-gray-400 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Services page - Featured service panel gray text visibility */
.featured-service[data-color="cyan"] .text-gray-500,
.featured-service[data-color="cyan"] .text-gray-400,
.featured-service[data-color="cyan"] .text-gray-300 {
    color: rgba(255, 255, 255, 0.8) !important;
}

.featured-service[data-color="purple"] .text-gray-500,
.featured-service[data-color="purple"] .text-gray-400,
.featured-service[data-color="purple"] .text-gray-300 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.featured-service[data-color="pink"] .text-gray-500,
.featured-service[data-color="pink"] .text-gray-400,
.featured-service[data-color="pink"] .text-gray-300 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Services page - Service card gray text visibility */
.service-card[data-color="cyan"] .text-gray-500,
.service-card[data-color="cyan"] .text-gray-400 {
    color: rgba(255, 255, 255, 0.8) !important;
}

.service-card[data-color="purple"] .text-gray-500,
.service-card[data-color="purple"] .text-gray-400 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.service-card[data-color="pink"] .text-gray-500,
.service-card[data-color="pink"] .text-gray-400 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ==============================================
   MOBILE FOOTER BACKGROUND - FINAL OVERRIDE
   Must be at end of file for maximum specificity
   ============================================== */
@media (max-width: 768px) {
    footer {
        background-color: #111111 !important;
    }
}

/* ============================================
   Case Study Group Pills - Neon Glow
   ============================================ */
.group-pill {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    letter-spacing: 0.025em;
    transition: all 0.3s ease;
}

.group-pill-purple {
    background: rgba(18, 18, 18, 0.95);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3),
                0 0 30px rgba(139, 92, 246, 0.15);
}

.group-pill-purple:hover {
    border-color: #8b5cf6;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5),
                0 0 40px rgba(139, 92, 246, 0.25),
                0 0 60px rgba(139, 92, 246, 0.1);
}

.group-pill-cyan {
    background: rgba(18, 18, 18, 0.95);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3),
                0 0 30px rgba(6, 182, 212, 0.15);
}

.group-pill-cyan:hover {
    border-color: #06b6d4;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5),
                0 0 40px rgba(6, 182, 212, 0.25),
                0 0 60px rgba(6, 182, 212, 0.1);
}

.group-pill-pink {
    background: rgba(18, 18, 18, 0.95);
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.5);
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.3),
                0 0 30px rgba(236, 72, 153, 0.15);
}

.group-pill-pink:hover {
    border-color: #ec4899;
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.5),
                0 0 40px rgba(236, 72, 153, 0.25),
                0 0 60px rgba(236, 72, 153, 0.1);
}

/* ============================================
   Enhanced Modal - Hero Section with Blurred BG
   ============================================ */
.modal-hero {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #000 !important;
    z-index: 1;
}

.modal-hero-bg {
    position: absolute;
    inset: 0;
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.85) saturate(0.9);
    transform: scale(1);
    opacity: 1;
}

.modal-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.6) 25%,
        rgba(0, 0, 0, 0.3) 50%,
        transparent 75%
    );
    pointer-events: none;
    z-index: 1;
}

/* Dark separator between hero and body */
.modal-hero::after {
    display: none;
}

.modal-hero-content {
    display: none;  /* Remove duplicate title - body already has it */
}

.modal-hero-title {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 600;
    color: #fff;
    text-shadow: none;
    letter-spacing: 0.01em;
    margin: 0;
}

@media (min-width: 768px) {
    .modal-hero-title {
        font-size: 3.5rem;
    }
}

/* ============================================
   Enhanced Tool Tags - Master Standard Style
   Dark semi-transparent capsules with isolated colored icons
   ============================================ */
.tool-tag-enhanced {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.tool-tag-enhanced:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
}

.tool-tag-enhanced .tool-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    border-radius: 4px;
    flex-shrink: 0;
    overflow: hidden;
}

.tool-tag-enhanced .tool-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tool-tag-enhanced .tool-icon-text {
    font-size: 0.45rem;
    font-weight: 700;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.02em;
}

/* Premiere Pro - Purple icon box */
/* Tool-specific icon backgrounds only - border stays consistent white */
.tool-tag-premiere .tool-icon {
    background: linear-gradient(135deg, #9999FF 0%, #7B68EE 100%);
}
.tool-tag-premiere .tool-icon-text {
    color: #1a0a30;
}

/* DaVinci Resolve */
.tool-tag-resolve .tool-icon {
    background: linear-gradient(135deg, #FF7F50 0%, #E85D3B 100%);
}
.tool-tag-resolve .tool-icon-text {
    color: #1a0800;
}

/* After Effects */
.tool-tag-ae .tool-icon {
    background: linear-gradient(135deg, #9999FF 0%, #7B68EE 100%);
}
.tool-tag-ae .tool-icon-text {
    color: #1a0a30;
}

/* Audition */
.tool-tag-audition .tool-icon {
    background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
}
.tool-tag-audition .tool-icon-text {
    color: #003D32;
}

/* Nuke */
.tool-tag-nuke .tool-icon {
    background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
}
.tool-tag-nuke .tool-icon-text {
    color: #3a2f00;
}

/* Photoshop */
.tool-tag-photoshop .tool-icon {
    background: linear-gradient(135deg, #31A8FF 0%, #2B9AEB 100%);
}
.tool-tag-photoshop .tool-icon-text {
    color: #001E36;
}

/* Illustrator */
.tool-tag-illustrator .tool-icon {
    background: linear-gradient(135deg, #FF9A00 0%, #E68A00 100%);
}
.tool-tag-illustrator .tool-icon-text {
    color: #2a1500;
}

/* Cinema 4D */
.tool-tag-cinema4d .tool-icon {
    background: linear-gradient(135deg, #5BB5E8 0%, #4BA2D2 100%);
}
.tool-tag-cinema4d .tool-icon-text {
    color: #011A3A;
}

/* Maya */
.tool-tag-maya .tool-icon {
    background: linear-gradient(135deg, #0DB3A6 0%, #0A9E93 100%);
}
.tool-tag-maya .tool-icon-text {
    color: #0a2420;
}

/* Mocha Pro */
.tool-tag-mocha .tool-icon {
    background: linear-gradient(135deg, #E63946 0%, #D32F3D 100%);
}
.tool-tag-mocha .tool-icon-text {
    color: #fff;
}

/* Figma */
.tool-tag-figma .tool-icon {
    background: linear-gradient(135deg, #A259FF 0%, #8B3FE8 100%);
}
.tool-tag-figma .tool-icon-text {
    color: #fff;
}

/* Default/Generic */
.tool-tag-default .tool-icon {
    background: linear-gradient(135deg, #6B7280 0%, #5B6370 100%);
}
.tool-tag-default .tool-icon-text {
    color: #fff;
}

/* ============================================
   Enhanced CTA Button with Pulsing Animation
   ============================================ */
.modal-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0e7490 100%);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 
        0 0 20px rgba(6, 182, 212, 0.5),
        0 0 40px rgba(6, 182, 212, 0.3);
    animation: ctaPulse 2s ease-in-out infinite;
}

.modal-cta-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #06b6d4, #22d3ee, #06b6d4);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-cta-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 0 30px rgba(6, 182, 212, 0.7),
        0 0 60px rgba(6, 182, 212, 0.5),
        0 0 90px rgba(6, 182, 212, 0.3);
    animation: none;
}

.modal-cta-btn:hover::before {
    opacity: 1;
}

.modal-cta-btn svg {
    transition: transform 0.3s ease;
}

.modal-cta-btn:hover svg {
    transform: translateX(4px);
}

@keyframes ctaPulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(6, 182, 212, 0.5),
            0 0 40px rgba(6, 182, 212, 0.3);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(6, 182, 212, 0.7),
            0 0 60px rgba(6, 182, 212, 0.4),
            0 0 80px rgba(6, 182, 212, 0.2);
    }
}

/* Hide duplicate title when hero section is present */
.modal-title-hidden {
    display: none !important;
}

/* Color-matched hero backgrounds when no image loads */
.portfolio-modal.modal-purple .modal-hero {
    background: #000;
}
.portfolio-modal.modal-cyan .modal-hero {
    background: #000;
}
.portfolio-modal.modal-pink .modal-hero {
    background: #000;
}

/* Override WooCommerce generic button styles for newsletter button */
button.newsletter-submit-btn,
.newsletter-submit-btn[type="submit"] {
    padding: 10px 20px !important;
    font-size: 0.75rem !important;
}

/* Fix social icon spacing to match main site */
footer .footer-social-row {
    justify-content: flex-start !important;
    gap: 33px !important;
}