/* Fonts consolidated into HTML for performance */

:root {
  /* ==========================================================================
     COLOR MANAGEMENT SYSTEM
     ========================================================================== */

  /* --- Text Colors (High Contrast) --- */
  --text-main: #1A1A1E;       /* Dark Charcoal - Soft Light Theme compliant */
  --text-heading: #000000;    /* Pure Black */
  --text-muted: #4B5563;      /* Muted - Softer than before */
  --text-on-primary: #ffffff; /* Text on primary buttons/backgrounds */
  --text-on-dark: #ffffff;    /* Text on dark mode backgrounds */
  --text-link: #2563eb;       /* Link text color */

  /* --- Brand Colors --- */
  --primary: #2563eb;         /* Blue 600 - Main Brand Color (Buttons, Links, Highlights) */
  --primary-hover: #1d4ed8;   /* Blue 700 - Hover state for primary actions */
  --secondary: #0f172a;       /* Slate 900 - Secondary actions, Dark backgrounds */
  --accent: #0ea5e9;          /* Sky 500 - Accents, distinct from primary */

  /* --- Background Colors --- */
  --bg-page: #F9F9FB;         /* Soft Off-White - Soft Light Theme compliant */
  --bg-surface: #ffffff;      /* Cards, Modals, Dropdowns */
  --bg-surface-alt: #e2e5e9;  /* Slate 100 - Alternating sections */
  --bg-overlay: rgba(15, 23, 42, 0.95); /* Modal/Menu backdrops */

  /* --- Navigation Backgrounds --- */
  --nav-bg-initial: rgba(255, 255, 255, 0.7);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.98);

  /* --- Status Colors --- */
  --status-success: #10b981;  /* Emerald 500 - Success Toasts/Badges */
  --status-error: #ef4444;    /* Red 500 - Error Toasts */
  --status-info: #3b82f6;     /* Blue 500 - Info Toasts */
  --status-warning: #f59e0b;  /* Amber 500 - Warnings */

  /* --- Borders & Effects --- */
  --border-light: #e2e8f0;    /* Slate 200 - Card borders, dividers */
  --shadow-color: rgba(0, 0, 0, 0.1);
  
  /* --- Perimeter Highlight Tokens --- */
  --highlight-ring: rgba(37, 99, 235, 0.8); /* Blue 600 - Focus rings, hover glows */
  --highlight-glow: rgba(37, 99, 235, 0.3); /* Blue 600 (Soft) - Glow effects */
  
  /* --- Interactive --- */
  --spotlight-color: rgba(37, 99, 235, 0.15); /* Mouse tracking spotlight */
  
  /* --- Animation Timing Functions --- */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  
  /* --- Animation Durations --- */
  --duration-fast: 0.2s;
  --duration-normal: 0.35s;
  --duration-slow: 0.5s;
  --duration-slower: 0.8s;
}

/* --- Marquee Animation --- */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: scroll 20s linear infinite;
}

.mask-linear-fade {
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* --- Staggered Reveal Animation --- */
@keyframes fadeInUpStagger {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.stagger-item {
    opacity: 0;
    animation: fadeInUpStagger 0.6s var(--ease-out-expo) forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }


/* --- Project Card Animations --- */
.project-card, .modern-card {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* will-change: transform; - Moved to global GPU acceleration block line 243 */
}

.project-card:hover, .modern-card:hover {
  transform: translateY(-6px); /* Reduced movement for snappier feel */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Ensure no conflict with other hover states */
.project-card:active, .modern-card:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}


/* --- Holographic Sweep (Shimmer) --- */
@keyframes shimmer {
    /* Swipe across in 30% of the time, then wait */
    0% { transform: translateX(-150%) skewX(-20deg); }
    35% { transform: translateX(250%) skewX(-20deg); }
    100% { transform: translateX(250%) skewX(-20deg); }
}

.holographic-card {
    position: relative;
    overflow: hidden;
}

.holographic-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%; /* Wider beam for smoothness */
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 50%, /* Slightly brighter */
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-150%) skewX(-20deg);
    animation: shimmer 6s infinite ease-in-out; 
    animation-delay: var(--shimmer-delay, 0s);
    pointer-events: none;
}

/* --- Color Cycle Animation (Auto-Play Branding) --- */
@keyframes colorCycle {
    0%, 20%, 100% { filter: grayscale(1); opacity: 0.7; transform: scale(1); }
    10% { filter: grayscale(0); opacity: 1; transform: scale(1.1); }
}

.color-cycle-anim {
    animation: colorCycle 10s infinite ease-in-out; /* 10s loop allows spacing */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border-radius: 12px;
    padding: 12px 16px;
    position: relative;
}

/* Technology Partners - Premium Hover Effect */
.color-cycle-anim:hover {
    animation-play-state: paused !important;
    filter: grayscale(0) !important;
    opacity: 1 !important;
    /* Removed scale/translate for smoother effect, just enhanced visibility */
    transform: scale(1.05) !important; 
    background: rgba(59, 130, 246, 0.05); /* Softer background */
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1);
}

/* Technology Partners - Click/Active Effect */
.color-cycle-anim:active {
    transform: scale(0.98) !important;
    transition-duration: 0.1s;
    background: rgba(59, 130, 246, 0.1);
}

/* Dark mode hover enhancement */
.dark-mode .color-cycle-anim:hover {
    background: rgba(96, 165, 250, 0.08); /* Softer dark mode background */
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.15);
}

/* --- BREATHING NEON GLOW (Dim → Bright → Dim) --- */
@keyframes breathing-glow {
    0%, 100% {
        /* DIM state */
        box-shadow: 
            0 0 10px rgba(59, 130, 246, 0.5),
            0 0 20px rgba(59, 130, 246, 0.3),
            0 0 30px rgba(59, 130, 246, 0.1);
        transform: scale(1);
    }
    50% {
        /* BRIGHT state */
        box-shadow: 
            0 0 40px rgba(59, 130, 246, 1),
            0 0 80px rgba(59, 130, 246, 1),
            0 0 120px rgba(59, 130, 246, 0.8),
            0 0 160px rgba(96, 165, 250, 0.5),
            inset 0 0 30px rgba(147, 197, 253, 0.4);
        transform: scale(1.03);
    }
}

/* Animation only for desktop/tablet to save mobile battery/performance */
@media (min-width: 640px) {
    .glow-pulse {
        animation: breathing-glow 2s ease-in-out infinite;
        position: relative;
        z-index: 10;
        border: 2px solid rgba(147, 197, 253, 0.6) !important;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    }
}

/* Static fallback for mobile */
@media (max-width: 639px) {
    .glow-pulse {
        position: relative;
        z-index: 10;
        border: 2px solid rgba(147, 197, 253, 0.6) !important;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
        box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.5); /* static shadow */
    }
}

/* Even brighter on hover */
.glow-pulse:hover {
    animation: none;
    box-shadow: 
        0 0 50px rgba(59, 130, 246, 1),
        0 0 100px rgba(59, 130, 246, 1),
        0 0 150px rgba(96, 165, 250, 0.9),
        0 0 200px rgba(147, 197, 253, 0.5),
        inset 0 0 50px rgba(147, 197, 253, 0.5) !important;
    transform: scale(1.08) translateY(-3px);
    border-color: #bfdbfe !important;
}

/* --- Global Animation Optimizations --- */
*, *::before, *::after {
    /* Smooth font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* GPU acceleration for animated elements */
.btn-premium, .modern-card, .feature-card, .nav-link, nav, .browser-card, .scroll-fade-up, 
.icon-box-3d, .toast, .admin-panel, #top-banner, #center-modal, footer a, footer i, .project-card {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

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

/* --- Accessibility Focus Styles --- */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Dark Mode Variable Overrides for Contrast */
body.dark-mode {
    --text-muted: #94a3b8; /* Slate 400 - Better contrast on dark backgrounds */
    --border-light: #334155; /* Slate 700 - Better visibility */
    --bg-surface-alt: #1e293b; /* Slate 800 */
}

/* ============================================
   FLATPICKR - Clean Professional Dark Theme
   ============================================ */

/* Main calendar container */
.flatpickr-calendar {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    border-radius: 16px !important;
    padding: 20px !important;
    width: 340px !important;
}

/* Arrow pointer */
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    border-bottom-color: #0f172a !important;
}

/* Month header area */
/* Month header area */
.flatpickr-months {
    margin-bottom: 24px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #1e293b !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* Space between arrows and center */
    background: transparent !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.flatpickr-months .flatpickr-month {
    background: transparent !important;
    height: 48px !important;
    overflow: visible !important;
    fill: #f8fafc !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* Space between Month and Year */
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #f8fafc !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    position: static !important; /* Allow flex gap to work */
    left: auto !important;
    transform: none !important;
}

/* Month Dropdown - Static Text Style */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: default !important; /* Non-interactive */
    pointer-events: none !important; /* Disable interaction */
    text-transform: capitalize !important;
    border-radius: 0 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: transparent !important;
    border-color: transparent !important;
}

/* Year Input - Static Text Style */
.flatpickr-current-month input.cur-year {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #f8fafc !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 4ch !important;
    cursor: default !important; /* Non-interactive */
    pointer-events: none !important; /* Disable interaction */
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
}

.flatpickr-current-month input.cur-year:hover,
.flatpickr-current-month input.cur-year:focus {
    background: transparent !important;
    border: none !important;
    color: #f8fafc !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Navigation arrows */
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: #3b82f6 !important; /* Blue on hover */
}

/* Shared Arrow Styles */
.flatpickr-prev-month, .flatpickr-next-month {
    text-decoration: none !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 32px !important;
    width: 32px !important;
    line-height: 16px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    transition: all 0.2s ease !important;
}

.flatpickr-prev-month { left: 10px !important; }
.flatpickr-next-month { right: 10px !important; }

.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
    background: #1e293b !important;
}

.flatpickr-prev-month svg, .flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
    fill: #94a3b8 !important;
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
}

/* Weekday labels */
.flatpickr-weekdays {
    background: transparent !important;
    margin-bottom: 8px !important;
}

.flatpickr-weekday {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* Day grid container */
.dayContainer {
    padding: 4px 0 !important;
    min-width: 280px !important;
    max-width: 340px !important;
}

/* Individual day cells - DON'T change width/margin to preserve grid */
.flatpickr-day {
    color: #e2e8f0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    transition: all 0.15s ease !important;
    /* Keep default Flatpickr sizing for proper grid */
}

.flatpickr-day:hover {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* Today indicator */
.flatpickr-day.today {
    border-color: #3b82f6 !important;
    background: transparent !important;
    color: #3b82f6 !important;
    font-weight: 600 !important;
}

.flatpickr-day.today:hover {
    background: rgba(59, 130, 246, 0.1) !important;
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Disabled / other month days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #334155 !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* In-range days (for date ranges) */
.flatpickr-day.inRange {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: transparent !important;
}

/* ============================================
   TIME PICKER - Clean & Modern
   ============================================ */

/* Container */
.flatpickr-time {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    margin-top: 16px !important;
    padding: 10px 20px 25px 20px !important; /* Increased bottom padding */
    border-top: none !important;
    background: transparent !important;
    height: auto !important;
    overflow: visible !important; /* Ensure no clipping */
    max-height: none !important;
}

/* Input wrappers */
.flatpickr-time .numInputWrapper {
    position: relative !important;
    width: 72px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
}

/* First input (hour) - left rounded */
.flatpickr-time .numInputWrapper:first-child input {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-right: none !important;
}

/* Second input (minute) - right rounded */  
.flatpickr-time .numInputWrapper:nth-child(3) input {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    border-left: none !important;
}

/* Time inputs */
.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
    /* Reset */
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
    
    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    
    /* Typography */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    color: #f8fafc !important;
    letter-spacing: -0.02em !important;
    
    /* Visual */
    background: #1e293b !important;
    border: 2px solid #334155 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    
    /* Interaction */
    cursor: text !important;
    transition: all 0.2s ease !important;
}

/* Remove number spinners */
.flatpickr-time input::-webkit-outer-spin-button,
.flatpickr-time input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* Hover */
.flatpickr-time input:hover {
    background: #283548 !important;
}

/* Focus */
.flatpickr-time input:focus {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    outline: none !important;
    z-index: 1 !important;
    position: relative !important;
}

/* Colon separator */
.flatpickr-time .flatpickr-time-separator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    
    font-family: 'Inter', sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #3b82f6 !important;
    
    background: #1e293b !important;
    border: 2px solid #334155 !important;
    border-left: none !important;
    border-right: none !important;
}

/* AM/PM button */
.flatpickr-time .flatpickr-am-pm {
    /* Reset */
    -webkit-appearance: none !important;
    appearance: none !important;
    
    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 68px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    margin-left: 12px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    
    /* Typography */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    
    /* Visual */
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    
    /* Interaction */
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* AM/PM Hover */
.flatpickr-time .flatpickr-am-pm:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 6px 20px rgba(59, 130, 246, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* AM/PM Active */
.flatpickr-time .flatpickr-am-pm:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(59, 130, 246, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* AM/PM Focus */
.flatpickr-time .flatpickr-am-pm:focus {
    outline: none !important;
    box-shadow: 
        0 0 0 3px rgba(59, 130, 246, 0.3),
        0 4px 12px rgba(59, 130, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Hide spinner arrows */
.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown {
    display: none !important;
}



@tailwind base;

.font-signature {
  font-family: 'Great Vibes', cursive;
}

.font-heading {
  font-family: "Outfit", sans-serif;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: var(--bg-page);
  color: var(--text-main);
  overflow-x: hidden;
  font-size: 18px; /* Upgraded from default 16px */
  line-height: 1.8; /* Relaxed breathing room */
}

/* --- Dark Mode Variables & Overrides --- */
body.dark-mode {
  /* Re-assign variables for Dark Mode */
  --text-main: #f8fafc;      /* Slate 50 - Almost White for max visibility */
  --text-heading: #ffffff;   /* White */
  --text-muted: #cbd5e1;     /* Slate 300 - Much brighter for readability */
  
  --primary: #3b82f6;        /* Blue 500 - Slightly lighter for dark mode */
  --primary-hover: #2563eb;  /* Blue 600 */
  
  --bg-page: #020617;        /* Slate 950 */
  --bg-surface: #1e293b;     /* Slate 800 */
  --bg-surface-alt: #0f172a; /* Slate 900 */
  
  --border-light: #334155;   /* Slate 700 */
  
  --highlight-ring: rgba(96, 165, 250, 0.9); /* Blue 400 */
  --highlight-glow: rgba(56, 189, 248, 0.4); /* Sky 400 */
  
  --spotlight-color: rgba(56, 189, 248, 0.12); /* Sky 400 spotlight */
  --shadow-color: rgba(0, 0, 0, 0.3);
}

/* --- Glassmorphism Sections --- */
.section-glass {
    position: relative;
    z-index: 10;
    background: rgba(249, 249, 251, 0.85); /* Light: Soft Off-White 85% opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

body.dark-mode .section-glass {
    background: rgba(2, 6, 23, 0.75); /* Dark: Slate 950 75% opacity */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Global Smooth Theme Transition */
body, div, nav, footer, input, button, a, span, p, h1, h2, h3, h4, h5, h6 {
    transition-property: background-color, color, border-color;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
}

/* Exclude transitions that should be instant or specific */
.no-transition {
    transition: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Outfit", sans-serif;
  line-height: 1.1; 
  letter-spacing: -0.025em; 
  font-weight: 800 !important; 
  color: var(--text-heading);
}

/* --- Smooth Scrolling --- */
html {
  scroll-behavior: smooth;
}

/* --- Animations --- */
.fade-in-up {
  animation: fadeInUp var(--duration-slower) var(--ease-out-expo) forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* [Legacy .project-card styles removed for redundancy cleanup] */

/* ==========================================================================
   ULTRA-SMOOTH CARD HOVER ANIMATIONS (Services & Projects)
   ========================================================================== */

/* --- Feature Cards (Services Section) --- */
.feature-card {
  transform: translate3d(0, 0, 0);
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.feature-card:hover {
  transform: translate3d(0, -12px, 0);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15),
              0 12px 24px -8px rgba(0, 0, 0, 0.1);
}

/* Feature card icon animation */
.feature-card .icon-box-3d {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card:hover .icon-box-3d {
  transform: translate3d(0, -6px, 0) scale(1.05);
}

/* --- Modern Cards (Projects Section) --- */
.modern-card {
  transform: translate3d(0, 0, 0);
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.modern-card:hover {
  transform: translate3d(0, -10px, 0) scale(1.02);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2),
              0 15px 30px -10px rgba(0, 0, 0, 0.1);
}

/* Modern card inner icon animation */
.modern-card .modern-card-image i {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modern-card:hover .modern-card-image i {
  transform: scale(1.15);
}

/* Arrow icon on cards */
.modern-card .ph-arrow-up-right {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s ease;
}

.modern-card:hover .ph-arrow-up-right {
  transform: translate3d(3px, -3px, 0);
}

.project-overlay {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent);
}

/* --- Editing Interface --- */
.editable-highlight {
  border: 2px dashed var(--status-warning);
  background: rgba(253, 230, 138, 0.2);
  border-radius: 4px;
  cursor: text;
  padding: 2px;
  min-width: 20px;
  display: inline-block;
}

.editable-highlight:focus {
  outline: none;
  background: var(--bg-surface);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
  border-style: solid;
  color: var(--secondary) !important; /* Force dark text color for readability */
}

/* --- Control Panel (Floating) --- */

/* Admin Toggle Button - Hidden by default, revealed via JS */
.admin-toggle-btn {
    display: none !important; /* Hidden until 10-click easter egg */
}

.admin-toggle-btn.revealed {
    display: flex !important;
}

/* Delete Project Button */
.delete-project-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    border: none;
    font-size: 14px;
}

.delete-project-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
    transition: all var(--duration-fast) var(--ease-bounce);
}

body.is-editing .delete-project-btn {
    display: flex;
}

.admin-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--bg-overlay);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 12px;
  box-shadow:
    0 20px 25px -5px var(--shadow-color),
    0 10px 10px -5px var(--shadow-color);
  z-index: 9999;
  border: 1px solid var(--border-light);
  width: 280px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-minimized {
  transform: translateY(120%);
}

.admin-toggle-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px var(--shadow-color);
  transition: transform 0.2s;
}

.admin-toggle-btn:hover {
  transform: scale(1.1);
}

/* --- Popups --- */
.popup-overlay {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

/* Banner Slide Animation */
#top-banner {
  transition: transform var(--duration-slow) var(--ease-out-expo),
              opacity var(--duration-slow) var(--ease-out-expo);
}
.banner-hidden {
  transform: translateY(-100%);
  opacity: 0;
}
.banner-visible {
  transform: translateY(0);
  opacity: 1;
}

/* --- Toast Notifications --- */
@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* --- Premium Buttons (Refined) --- */
.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  font-weight: 600;
  border-radius: 12px;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              box-shadow var(--duration-normal) var(--ease-out-expo),
              background-color var(--duration-normal) var(--ease-smooth),
              border-color var(--duration-normal) var(--ease-smooth);
  position: relative;
  overflow: hidden;
  z-index: 10;
}

/* Primary Button */
.btn-premium-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: var(--text-on-primary);
  box-shadow: 0 4px 6px var(--shadow-color);
}

.btn-premium-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px var(--highlight-ring), 0 0 20px var(--highlight-glow);
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}

/* Navigation Styles */
.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    /* backdrop-filter: blur(12px); <-- Performance Killer on Low-End GPUs */
}

/* Secondary/White Button */
.btn-premium-light {
  background: var(--bg-surface);
  color: var(--secondary);
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 6px var(--shadow-color);
}

.dark-mode .btn-premium-light {
  background: var(--bg-surface);
  color: var(--text-main);
  border-color: var(--border-light);
}

.btn-premium-light:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
  background: #f0f9ff;
  border-color: var(--primary);
  color: var(--primary);
}

.dark-mode .btn-premium-light:hover {
  background: var(--bg-surface);
  border-color: var(--primary); 
  color: var(--primary);
  box-shadow: 0 0 15px var(--highlight-glow);
}

.btn-premium i {
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.btn-premium:hover i {
  transform: translateX(4px);
}

/* --- Dynamic Floating Capsule Navigation --- */
/* PERFORMANCE: Using transform-only animations for 60fps */
nav {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translate3d(-50%, 0, 0) scale(1);
  max-width: 95%;
  width: 1200px;
  height: 90px;
  /* Glassmorphism */
  background-color: rgba(255, 255, 255, 0.65) !important; 
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  /* PREMIUM: Ultra-fast GPU-only transitions */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.4s ease,
              box-shadow 0.4s ease;
  z-index: 60;
  padding: 0 40px;
  overflow: hidden;
  /* Force GPU layer and prevent sub-pixel rendering */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  transform-origin: center top;
}

.dark-mode nav {
    background-color: rgba(15, 23, 42, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Mobile Navigation Adjustments */
@media (max-width: 640px) {
    /* Adjust top nav to only show Logo */
    nav {
        padding: 0 20px;
        height: 70px;
        top: 10px;
        max-width: calc(100% - 30px);
        transform: translate3d(-50%, 0, 0) !important; /* Lock centering */
        justify-content: center; /* Center the logo */
    }
    
    /* Hide old controls, we use bottom bar now */
    #nav-actions, 
    #nav-links {
        display: none !important;
    }
    
    /* Ensure Logo is centered */
    #nav-logo {
        margin: 0 auto;
    }
    
    /* Bottom Navigation Bar - Thumb Friendly */
    #mobile-bottom-nav {
        display: flex !important;
    }
}

/* Bottom Navigation Bar (Hidden on Desktop) */
#mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 70px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: 0 8px;
    padding: 0 24px; /* More side padding */
    padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone notch support */
    align-items: center;
    justify-content: space-between; /* Better spread */
}

.dark-mode #mobile-bottom-nav {
    background: rgba(15, 23, 42, 0.95);
    border-top-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

/* Bottom Nav Items */
#mobile-bottom-nav a,
#mobile-bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 12px;
    color: #64748b;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    min-width: 60px;
}

#mobile-bottom-nav a i,
#mobile-bottom-nav button i {
    font-size: 22px;
    transition: transform 0.2s ease;
}

#mobile-bottom-nav a:hover,
#mobile-bottom-nav button:hover,
#mobile-bottom-nav a:active,
#mobile-bottom-nav button:active {
    color: var(--primary);
    background: rgba(37, 99, 235, 0.1);
}

#mobile-bottom-nav a:active i,
#mobile-bottom-nav button:active i {
    transform: scale(1.15);
}

.dark-mode #mobile-bottom-nav a,
.dark-mode #mobile-bottom-nav button {
    color: #94a3b8;
}

.dark-mode #mobile-bottom-nav a:hover,
.dark-mode #mobile-bottom-nav button:hover {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

/* CTA Button in Bottom Nav */
#mobile-bottom-nav .mobile-cta {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: white !important;
    padding: 12px 20px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    flex-direction: row;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

#mobile-bottom-nav .mobile-cta:hover,
#mobile-bottom-nav .mobile-cta:active {
    background: linear-gradient(135deg, #3b82f6, var(--primary));
    transform: scale(1.05);
}

/* Add padding to body so content isn't hidden behind bottom nav */
@media (max-width: 640px) {
    body {
        padding-bottom: 80px;
    }
    
    /* Adjust footer margin */
    footer {
        margin-bottom: 70px;
    }
    
    /* Adjust admin panel position */
    .admin-panel {
        bottom: 90px !important;
    }
    
    /* Adjust toast position */
    #toast-container {
        bottom: 85px !important;
    }

    /* HIDE ADMIN PANEL ON MOBILE */
    .admin-panel,
    #admin-trigger,
    .admin-toggle-btn {
        display: none !important;
    }
}


/* --- Premium Link Hover Effects --- */
.nav-link {
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--primary) !important;
}

/* --- Scrolled State (GPU-Only Animation) --- */
/* Uses scale() instead of width/height changes */
nav.nav-scrolled {
    transform: translate3d(-50%, -10px, 0) scale(0.9) !important;
    background-color: rgba(240, 240, 245, 0.9) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12) !important;
    opacity: 1 !important;
}

.dark-mode nav.nav-scrolled {
    background-color: rgba(10, 15, 30, 0.9) !important;
}

/* Element Scaling in Scrolled State - transform only */
/* --- Logo Depth & 3D Effect --- */
.logo-depth {
    /* RAW LOGO - Removed Filter Effects */
    transition: transform 0.3s var(--ease-bounce);
    cursor: pointer;
}

.logo-depth:hover {
    transform: scale(1.1); /* Subtle scale only, no rotation or shadow */
}

#nav-logo {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left center;
    will-change: transform;
    backface-visibility: hidden;
}

nav.nav-scrolled #nav-logo {
    transform: scale3d(0.65, 0.65, 1); /* GPU-accelerated scale */
}

/* 2. Button Shrink */
.btn-premium {
    /* PREMIUM: Ultra-fast, synced transitions - NO LAYOUT ANIMATION (padding/font) */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.2s;
    backface-visibility: hidden;
}

nav.nav-scrolled .btn-premium {
    /* Use Scale instead of Layout Triggers */
    transform: scale(0.9);
}

/* 3. Helper for Button Switch (if needed later, but keeping simple shrink for now) */
/* Ensuring 'Schedule' button is handled if it's there, but user asked for "Start project also be shrinking" */
/* So we apply to all buttons inside nav */

/* --- Glowing Pulse Animation (Refined) --- */
@keyframes pulse-glow-subtle {
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.glow-pulse {
    animation: pulse-glow-subtle 3s infinite ease-out; /* Slower, subtle */
}

/* --- Nav Hidden State (Smooth hide on scroll down, reveal on scroll up) --- */

/* Nav Hidden - Slides up with smooth animation */
nav.nav-hidden {
  transform: translate3d(-50%, -100%, 0) scale(0.95) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  /* Same transition curve for both hide and reveal for consistency */
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease-out !important;
}

/* Ensure nav reveal uses the same animation */
nav:not(.nav-hidden) {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease-out,
              background-color 0.4s ease,
              box-shadow 0.4s ease !important;
}

/* ===== PERFORMANCE OPTIMIZATIONS FOR LOW-END DEVICES ===== */

/* 1. Respect User's Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  nav,
  #nav-logo,
  .btn-premium {
    transition: none !important;
    animation: none !important;
  }
  
  nav.nav-scrolled {
    transform: translate3d(-50%, 0, 0) scale(0.95) !important;
  }
  
  nav.nav-hidden {
    transform: translate3d(-50%, -50px, 0) !important;
    transition: opacity 0.15s ease, visibility 0s 0.15s !important;
  }
}

/* 2. Mobile Optimizations - Reduce Heavy Effects */
@media (max-width: 768px) {
  nav {
    /* Lighter blur for better mobile performance */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Faster transitions on mobile */
    transition: transform 0.15s ease-out,
                opacity 0.15s ease-out;
  }
  
  nav.nav-scrolled {
    transform: translate3d(-50%, -5px, 0) scale(0.95) !important;
  }
  
  nav.nav-hidden {
    /* Simpler hide on mobile */
    transform: translate3d(-50%, -80px, 0) !important;
    transition: transform 0.3s ease-out, 
                opacity 0.3s ease-out, 
                visibility 0s 0.3s !important;
  }

/* Admin Panel Visibility Control */
.admin-panel-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}
  
  #nav-logo,
  .btn-premium {
    transition: transform 0.15s ease-out;
  }
}

/* 3. Low-End Device Detection - Disable Heavy Effects */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* For devices with low GPU, remove blur entirely if needed */
  @supports not (backdrop-filter: blur(10px)) {
    nav {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background-color: rgba(255, 255, 255, 0.95) !important;
    }
    
    .dark-mode nav {
      background-color: rgba(15, 23, 42, 0.95) !important;
    }
  }
}

.toast {
  min-width: 300px;
  max-width: 400px;
  padding: 16px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px var(--shadow-color);
  animation: slideInRight var(--duration-normal) var(--ease-out-expo);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: opacity var(--duration-normal) var(--ease-smooth),
              transform var(--duration-normal) var(--ease-smooth);
}

.toast:hover {
  transform: translateX(-4px);
}

.toast-success { background-color: var(--status-success); }
.toast-error { background-color: var(--status-error); }
.toast-info { background-color: var(--status-info); }

/* --- Enhanced Interactive Elements --- */

/* Force Tailwind classes to adapt using CSS Variables */

.dark-mode .bg-white {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-light) !important;
}

.dark-mode .bg-slate-50 {
  background-color: var(--bg-page) !important;
}

/* Text overrides using variables */
.text-slate-900 { color: var(--text-heading) !important; }
.text-slate-800 { color: var(--text-main) !important; }
.text-slate-700 { color: var(--text-main) !important; }
.text-slate-600 { color: var(--text-main) !important; }
.text-slate-500 { color: var(--text-muted) !important; }
.text-slate-400 { color: var(--text-muted) !important; }

/* Dark mode auto-adjusts because variables change */
.dark-mode .text-slate-900 { color: var(--text-heading) !important; }
.dark-mode .text-slate-800 { color: var(--text-main) !important; }
.dark-mode .text-slate-700 { color: var(--text-main) !important; }
.dark-mode .text-slate-500 { color: var(--text-muted) !important; }

.border-slate-100 { border-color: var(--border-light) !important; }
.dark-mode .border-slate-100 { border-color: var(--border-light) !important; }

.dark-mode input, .dark-mode textarea {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-light) !important;
  color: var(--text-main) !important;
}

/* Fix for Footer Contrast */
footer .text-slate-500, footer .text-slate-400 {
    color: #94a3b8 !important; /* Fixed color for dark footer even in light mode if footer is dark */
}
/* Wait, footer is .bg-slate-900 (dark) in light mode too? 
   Yes, line 315 in index.html says class="bg-slate-900".
   So footer text must always be light. 
*/
footer {
    background-color: var(--secondary) !important; 
    color: var(--text-on-dark);
}
footer .text-slate-400 {
    color: #94a3b8 !important; /* Ensure legible on dark footer */
}
footer a:hover {
    color: var(--text-on-dark);
}

/* Admin Panel - always dark */
.admin-panel .text-slate-400,
.admin-panel .text-slate-500,
.admin-panel .text-slate-600 {
    color: #cbd5e1 !important;
}


/* Hero Text Contrast */
h1 span.bg-clip-text {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}


/* --- Nav & Footer Hover Effects --- */
/* UNIFIED HOVER SYSTEM - Consistent across all interactive elements */

/* Base transition for all interactive elements */
a, button, .nav-link {
    transition: color var(--duration-normal) var(--ease-out-expo),
                transform var(--duration-normal) var(--ease-out-expo);
}

.modern-card, .feature-card {
    transition: transform var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-out-expo);
}

/* Nav Links - Premium hover with animated underline */
.nav-link {
    position: relative;
    color: var(--text-main);
    font-weight: 500;
    padding: 8px 4px;
}

/* Animated underline from center */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), #8b5cf6);
    border-radius: 2px;
    transition: width var(--duration-normal) var(--ease-out-expo);
    transform: translateX(-50%);
}

.nav-link:hover {
    color: var(--primary);
    transform: translateY(-2px);
}

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

/* Footer Links - Consistent with nav */
footer a:not(.btn-premium) {
    position: relative;
}

footer a:not(.btn-premium):hover {
    color: var(--primary) !important;
    transform: translateY(-2px);
}

/* Social Icons - Scale + Color */
footer a i,
footer a .fa-brands,
footer a .ph-fill {
    transition: color var(--duration-normal) var(--ease-out-expo),
                transform var(--duration-normal) var(--ease-bounce);
}

footer a:hover i,
footer a:hover .fa-brands,
footer a:hover .ph-fill {
    color: var(--primary) !important;
    transform: scale(1.2);
}

/* --- Unified Button System --- */
/* All buttons get the same lift + glow pattern */
.btn-premium:hover,
.btn-unified:hover {
    transform: translateY(-3px);
}

/* Active state - consistent press effect */
a:active, button:active, .btn-premium:active {
    transform: translateY(0) scale(0.98);
}

/* --- Staggered Scroll Animations --- */
/* LIQUID REVEAL: Fast, snappy, modern appearance */
.scroll-fade-up {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(0.98);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1200px;
  transform-style: preserve-3d;
  /* Faster, snappier reveal animation */
  transition: 
      opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-fade-up.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Staggered delays for project cards */
.scroll-fade-up:nth-child(1) { transition-delay: 0s; }
.scroll-fade-up:nth-child(2) { transition-delay: 0.1s; }
.scroll-fade-up:nth-child(3) { transition-delay: 0.2s; }
.scroll-fade-up:nth-child(4) { transition-delay: 0.3s; }

#background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--bg-page);
}

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.blur-sm { filter: blur(1px); }
.blur-md { filter: blur(2px); }
.blur-lg { filter: blur(4px); }

/* --- Ambient Glow (Lightweight, No JS) --- */
body::before {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 0;
  pointer-events: none;
  background: 
    radial-gradient(ellipse 600px 400px at 20% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 500px 300px at 80% 70%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
  animation: ambientDrift 20s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ambientDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(2%, -3%) scale(1.05); }
  100% { transform: translate(-2%, 2%) scale(0.98); }
}

/* --- Premium 3D Icons --- */
.icon-3d {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(37, 99, 235, 0.3));
  transition: transform var(--duration-normal) var(--ease-bounce);
  display: inline-block;
}

.dark-mode .icon-3d {
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(56, 189, 248, 0.4));
}

.feature-card:hover .icon-3d {
  transform: scale(1.1) rotate(5deg) translateY(-2px);
}

/* --- Edit Mode Utilities --- */
.edit-mode-only {
    display: none !important;
}

body.is-editing .edit-mode-only {
    display: flex !important; /* Default to flex, can override if needed */
    animation: fadeIn 0.3s ease;
}

/* Add Project Ghost Card */
.add-project-card {
    border: 2px dashed rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.05);
    border-radius: 1rem;
    height: 100%; /* Fill available space */
    min-height: 300px;
    cursor: pointer;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                border-color var(--duration-normal) var(--ease-smooth),
                background-color var(--duration-normal) var(--ease-smooth);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.add-project-card:hover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
    transform: translateY(-5px);
}

/* --- Modern Minimalist Cards (User Request) --- */
.modern-card {
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    background: #ffffff; /* Clean white card */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0,0,0,0.04); /* Even stronger shadow + ring */
    transition: transform var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-out-expo);
    border: 1px solid rgba(0,0,0,0.1); /* Visible border */
}

.dark-mode .modern-card {
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
}

.modern-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.modern-card-image {
    height: 220px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Mesh Gradients */
.mesh-raasta {
    background: radial-gradient(at 100% 100%, #1e3a8a 0px, transparent 50%),
                radial-gradient(at 0% 0%, #3b82f6 0px, transparent 50%),
                #eff6ff;
}
.dark-mode .mesh-raasta {
     background: radial-gradient(at 100% 100%, #1e3a8a 0px, transparent 50%),
                radial-gradient(at 0% 0%, #3b82f6 0px, transparent 50%),
                #0f172a;
}

.mesh-timespace {
    background: radial-gradient(at 0% 100%, #7e22ce 0px, transparent 50%),
                radial-gradient(at 100% 0%, #d8b4fe 0px, transparent 50%),
                #faf5ff;
}
.dark-mode .mesh-timespace {
     background: radial-gradient(at 0% 100%, #581c87 0px, transparent 50%),
                radial-gradient(at 100% 0%, #a855f7 0px, transparent 50%),
                #0f172a;
}

.mesh-paystation {
    background: radial-gradient(at 50% 100%, #ea580c 0px, transparent 50%),
                radial-gradient(at 50% 0%, #fed7aa 0px, transparent 50%),
                #fff7ed;
}
.dark-mode .mesh-paystation {
    background: radial-gradient(at 50% 100%, #c2410c 0px, transparent 50%),
                radial-gradient(at 50% 0%, #fdba74 0px, transparent 50%),
                #0f172a;
}

/* Abstract Shape Overlays */
.abstract-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.6;
}

/* Typography refinement for cards */
.modern-card-content {
    padding: 24px;
}

/* --- Scroll Revelations --- */
.scroll-hidden, .scroll-hidden-right {
  opacity: 0;
  transform: translate3d(-50px, 0, 0);
  transition: opacity var(--duration-slower) var(--ease-out-expo),
              transform var(--duration-slower) var(--ease-out-expo);
}

.scroll-hidden-right {
  transform: translate3d(50px, 0, 0);
}

.scroll-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* --- Premium 3D Glass Icons (Reference Style) --- */
.icon-box-3d {
    width: 80px;
    height: 80px;
    background: linear-gradient(145deg, #1e293b, #0f172a); /* Dark Slate Gradient */
    border-radius: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 20px 40px -5px rgba(0, 0, 0, 0.4), /* Deep Drop Shadow */
        inset 0 1px 0 rgba(255, 255, 255, 0.1), /* Top Highlight */
        inset 0 0 20px rgba(0, 0, 0, 0.5); /* Inner Depth */
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform var(--duration-normal) var(--ease-bounce),
                box-shadow var(--duration-normal) var(--ease-out-expo);
}

.icon-box-3d::before {
    /* Glossy Sheen Overlay */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent);
    border-radius: 20px 20px 100% 100% / 20px 20px 10% 10%;
    pointer-events: none;
}

.icon-box-3d:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 30px 50px -10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.icon-3d-inner {
    font-size: 2.5rem;
    background: linear-gradient(to bottom, #f8fafc, #94a3b8); /* Metallic Silver */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); /* 3D Shadow for Icon */
}

/* Optional: Window Dots for 'Code' icon specifically if desired, but applied generally for style match */
.icon-box-3d.window-style::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444; /* Red dot */
    box-shadow: 10px 0 0 #fbbf24, 20px 0 0 #22c55e; /* Yellow & Green dots */
    opacity: 0.6;
}
/* --- Premium Form Inputs --- */
.form-input-premium {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-input-premium:focus {
    border-color: #3b82f6 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.dark-mode .form-input-premium:focus {
    background-color: #0f172a !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Custom Calendar Picker Icon Style */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

/* Add a visual indicator for date picking */
.relative:has(input[type="datetime-local"])::after {
    content: '\ebcc'; /* Ph-calendar phosphor icon code */
    font-family: "Phosphor-Bold";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #3b82f6;
    font-size: 1.25rem;
}

.dark-mode .relative:has(input[type="datetime-local"])::after {
    color: #60a5fa;
}

/* ==========================================================================
   MODERN DATE/TIME PICKER STYLING
   ========================================================================== */

/* Modern datetime-local input styling */
input[type="datetime-local"] {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Style the date/time picker popup (Webkit browsers) */
::-webkit-datetime-edit {
    padding: 0;
}

::-webkit-datetime-edit-fields-wrapper {
    background: transparent;
    padding: 0;
}

::-webkit-datetime-edit-text,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-ampm-field {
    color: inherit;
    padding: 2px 4px;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

::-webkit-datetime-edit-month-field:focus,
::-webkit-datetime-edit-day-field:focus,
::-webkit-datetime-edit-year-field:focus,
::-webkit-datetime-edit-hour-field:focus,
::-webkit-datetime-edit-minute-field:focus,
::-webkit-datetime-edit-ampm-field:focus {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    outline: none;
}

/* Modern calendar datepicker styling (Chrome/Edge) */
::-webkit-calendar-picker-indicator:hover {
    cursor: pointer;
}

/* Inner spin button for time */
::-webkit-inner-spin-button {
    display: none;
}

/* Clear button */
::-webkit-clear-button {
    display: none;
}

/* Date input container styling */
input[type="datetime-local"]:focus {
    outline: none;
}

/* Custom date field separators */
::-webkit-datetime-edit-text {
    color: #94a3b8;
    padding: 0 2px;
}

.dark-mode ::-webkit-datetime-edit-text {
    color: #64748b;
}

/* Enhancing date field appearance on focus */
input[type="datetime-local"]:focus::-webkit-datetime-edit-month-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-day-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-year-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-hour-field,
input[type="datetime-local"]:focus::-webkit-datetime-edit-minute-field {
    background: rgba(59, 130, 246, 0.1);
    border-radius: 4px;
}

.form-input-premium::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

/* --- Phosphor Icon Shadow Fix --- */
.ph-duotone {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
}

/* --- Project Icon Glow & Hover --- */
.icon-glow {
    transition: all 0.7s var(--ease-premium);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
}

.modern-card:hover .icon-glow {
    transform: scale(1.5);
    opacity: 0.8 !important;
}

.modern-card:hover .ph-duotone {
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.4));
}

/* Color accents for specific meshes */
.mesh-raasta i { color: #3b82f6; }
.mesh-timespace i { color: #a855f7; }
.mesh-paystation i { color: #f97316; }

/* --- Day Toggles --- */
.day-toggle {
    cursor: pointer;
}

.day-toggle span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1e293b;
    color: #94a3b8;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #334155;
    transition: all 0.2s;
    user-select: none;
}

.day-toggle input:checked + span {
    background: #2563eb;
    color: white;
    border-color: #3b82f6;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}

.day-toggle:hover span {
    border-color: #475569;
}

/* Compact Day Toggle for Admin Panel */
.day-toggle-mini {
    cursor: pointer;
}

.day-toggle-mini span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #0f172a;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid #334155;
    transition: all 0.15s ease;
    user-select: none;
}

.day-toggle-mini input:checked + span {
    background: #2563eb;
    color: white;
    border-color: #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.day-toggle-mini:hover span {
    border-color: #60a5fa;
    transform: scale(1.05);
}

/* ==========================================================================
   MOBILE RESPONSIVE STYLES
   ========================================================================== */

/* --- Mobile Navigation --- */
@media (max-width: 768px) {
    nav {
        width: calc(100% - 24px);
        max-width: none;
        height: 64px;
        top: 12px;
        left: 12px;
        right: 12px;
        transform: translateX(0) !important; /* Override centering for mobile */
        padding: 0 12px 0 8px;
        border-radius: 16px;
        justify-content: space-between;
    }
    
    /* Position nav from left on mobile */
    nav > div {
        justify-content: space-between;
        width: 100%;
    }
    
    /* Hide desktop nav links on mobile */
    #nav-links {
        display: none !important;
    }
    
    /* BIGGER LOGO in top left on mobile */
    #nav-logo {
        min-width: auto;
        margin-right: auto;
        padding-left: 4px;
    }
    
    #nav-logo img {
        height: 52px !important; /* Bigger logo on mobile */
        width: auto;
    }
    
    /* Hide CTA on mobile header - use bottom nav instead */
    nav .btn-premium.hidden.sm\\:flex {
        display: none !important;
    }
    
    /* Theme toggle styling for mobile */
    #theme-toggle-btn {
        width: 44px;
        height: 26px;
    }
    
    #toggle-circle {
        width: 20px;
        height: 20px;
    }
    
    .dark #toggle-circle {
        transform: translateX(18px);
    }
    
    /* Mobile nav actions */
    #nav-actions {
        min-width: auto !important;
        gap: 8px;
    }
    
    /* Adjust scrolled state for mobile - keep simple */
    nav.nav-scrolled {
        transform: translateX(0) translateY(0) scale(1) !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
    }
    
    .dark-mode nav.nav-scrolled {
        background-color: rgba(15, 23, 42, 0.95) !important;
    }
    
    /* Mobile hidden state */
    nav.nav-hidden {
        transform: translateX(0) translateY(-100%) !important;
    }
    
    nav.nav-scrolled #nav-logo {
        transform: scale(1); /* Don't shrink logo on mobile */
    }
}

/* --- Mobile Hero Section --- */
@media (max-width: 768px) {
    #hero-section {
        padding-top: 110px; /* Account for smaller nav */
        padding-bottom: 60px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    #hero-section h1 {
        font-size: 2rem !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em;
    }
    
    #hero-section h1 span {
        font-size: inherit !important;
    }
    
    #hero-section p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        padding: 0 8px;
        margin-top: 16px !important;
        color: var(--text-muted);
    }
    
    /* Stack hero buttons on mobile */
    #hero-section .flex.gap-4,
    #hero-section .flex.gap-6 {
        flex-direction: column;
        gap: 10px;
        padding: 0 8px;
        margin-top: 24px !important;
    }
    
    #hero-section .btn-premium {
        width: 100%;
        justify-content: center;
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    /* Technology Partners section on mobile */
    #hero-section .mt-20,
    #hero-section .mt-32 {
        margin-top: 48px !important;
    }
    
    /* Partner logos smaller on mobile */
    .stagger-container {
        gap: 16px !important;
        padding: 0 16px;
    }
    
    .color-cycle-anim {
        padding: 8px 10px;
    }
    
    .color-cycle-anim img {
        height: 24px !important;
    }
    
    /* Reduce blob size */
    #hero-section .absolute {
        width: 250px;
        height: 250px;
        opacity: 0.3;
    }
}

/* --- Mobile Service Cards --- */
@media (max-width: 768px) {
    #services {
        padding: 40px 16px;
    }
    
    #services h2 {
        font-size: 1.5rem !important;
        margin-bottom: 8px;
    }
    
    #services p {
        font-size: 0.9rem !important;
        line-height: 1.5;
    }
    
    #services .grid {
        gap: 12px;
        padding: 0 4px;
    }
    
    .feature-card {
        padding: 20px;
        border-radius: 16px;
    }
    
    .feature-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 8px;
    }
    
    .feature-card p {
        font-size: 0.875rem !important;
        line-height: 1.5;
    }
    
    .icon-box-3d {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        margin-bottom: 16px;
    }
    
    .icon-3d-inner {
        font-size: 1.5rem;
    }
}

/* --- Mobile Project Cards --- */
@media (max-width: 768px) {
    #projects {
        padding: 40px 16px;
    }
    
    #projects .text-center {
        margin-bottom: 24px !important;
    }
    
    #projects h2,
    #projects .text-3xl {
        font-size: 1.5rem !important;
    }
    
    #projects .text-sm,
    #projects .text-base,
    #projects p {
        font-size: 0.875rem !important;
        line-height: 1.5;
    }
    
    #projects .grid {
        gap: 16px;
        padding: 0 4px;
    }
    
    /* Project card improvements */
    .project-card {
        border-radius: 20px;
        min-height: auto !important;
    }
    
    .project-card > div {
        padding: 20px !important;
        min-height: 380px !important;
    }
    
    .project-card h3 {
        font-size: 1.25rem !important;
    }
    
    .project-card p {
        font-size: 0.8rem !important;
        line-height: 1.4;
    }
    
    .modern-card-image {
        height: 140px;
    }
    
    .modern-card-image i {
        font-size: 2.5rem !important;
    }
    
    .modern-card-content {
        padding: 16px;
    }
    
    /* Tech stack pills on mobile */
    .project-card .flex-wrap {
        gap: 4px !important;
    }
    
    .project-card span[class*="px-2"] {
        padding: 4px 8px;
        font-size: 9px !important;
    }
}

/* --- Mobile Leadership Section --- */
@media (max-width: 1024px) {
    .lg\\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    /* Center image on tablet/mobile */
    #ceo-pic {
        max-width: 350px;
        margin: 0 auto 24px auto;
    }
}

@media (max-width: 768px) {
    /* Leadership section */
    .section-glass.overflow-hidden {
        padding: 40px 16px !important;
    }
    
    /* About section text */
    .lg\\:pl-10 {
        padding-left: 0 !important;
        text-align: center;
    }
    
    .lg\\:text-left {
        text-align: center !important;
    }
    
    /* CEO text improvements */
    [data-id="ldr-title"] {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }
    
    [data-id="ldr-desc"] {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        padding: 0 8px;
    }
    
    /* Reduce floating badge */
    .absolute.bottom-6.left-6 {
        bottom: 8px;
        left: 8px;
        padding: 10px;
    }
    
    .absolute.bottom-6.left-6 p {
        font-size: 0.75rem !important;
    }
    
    /* Smaller signature text */
    .font-signature {
        font-size: 1.5rem !important;
    }
    
    /* Social icons row */
    .flex.space-x-4 {
        justify-content: center;
    }
}

/* --- Mobile Contact Section --- */
@media (max-width: 768px) {
    #contact {
        padding: 40px 12px;
    }
    
    #contact h2 {
        font-size: 1.5rem !important;
    }
    
    #contact .text-2xl,
    #contact p {
        font-size: 0.9rem !important;
        line-height: 1.5;
    }
    
    /* Smaller tab buttons */
    #tab-btn-meeting,
    #tab-btn-message {
        padding: 10px 6px;
        font-size: 0.8rem;
        gap: 4px !important;
    }
    
    #tab-btn-meeting i,
    #tab-btn-message i {
        font-size: 1.1rem;
    }
    
    /* Form padding */
    #tab-content-meeting,
    #tab-content-message {
        padding: 20px 14px;
    }
    
    /* Form labels */
    #contact label {
        font-size: 0.75rem !important;
        margin-bottom: 4px;
    }
    
    /* Form inputs */
    #contact input,
    #contact textarea {
        padding: 14px 16px !important;
        font-size: 0.95rem !important;
        border-radius: 14px !important;
    }
    
    /* Info banner */
    #contact .bg-blue-50 {
        padding: 12px !important;
        margin-bottom: 20px !important;
    }
    
    #contact .bg-blue-50 p {
        font-size: 0.8rem !important;
    }
    
    /* Stack form grid on mobile */
    .grid.grid-cols-1.md\\:grid-cols-2 {
        gap: 14px;
    }
    
    /* Smaller submit buttons */
    #contact button[type="submit"] {
        font-size: 0.95rem;
        padding: 14px;
        letter-spacing: 0.05em;
    }
    
    /* Form container */
    #contact .bg-white,
    #contact .dark\\:bg-slate-800 {
        border-radius: 20px !important;
    }
}

/* --- Mobile Footer --- */
@media (max-width: 640px) {
    footer .flex.justify-between {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    footer .flex.space-x-6 {
        justify-content: center;
    }
}

/* --- Mobile Admin Panel --- */
@media (max-width: 768px) {
    .admin-panel {
        width: calc(100% - 32px);
        right: 16px;
        left: 16px;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .admin-toggle-btn {
        width: 44px;
        height: 44px;
    }
}

/* --- Mobile Toast Notifications --- */
@media (max-width: 640px) {
    .toast {
        min-width: auto;
        max-width: calc(100% - 32px);
        left: 16px;
        right: 16px;
    }
}

/* ==========================================================================
   MOBILE ANIMATION REDUCTION (Performance)
   ========================================================================== */
@media (max-width: 768px) {
    /* Hide particle background on mobile for performance */
    #background-container canvas {
        display: none !important;
    }
    
    /* Disable mouse spotlight on mobile */
    body::before {
        display: none;
    }
    
    /* Simplify scroll animations - instant reveal */
    .scroll-fade-up {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        transition: none !important;
    }
    
    /* Reduce card hover effects */
    .feature-card:hover {
        transform: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .modern-card:hover {
        transform: translateY(-4px);
    }
    
    /* Disable icon box hover animations */
    .feature-card:hover .icon-box-3d {
        transform: none;
    }
    
    /* Simplify all transitions */
    .btn-premium,
    .feature-card,
    .modern-card,
    .nav-link,
    footer a {
        transition-duration: 0.15s !important;
    }
    
    /* Disable logo hover effect on mobile */
    /* Disable logo hover effect on mobile */
    .logo-depth:hover {
        transform: none;
        /* Redundant filter removed */
    }
}

/* ==========================================================================
   TABLET BREAKPOINT (768px - 1024px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    nav {
        width: calc(100% - 48px);
        max-width: 900px;
        height: 80px;
        padding: 0 24px;
    }
    
    #nav-links {
        gap: 24px;
    }
    
    .nav-link {
        font-size: 0.95rem;
    }
    
    #hero-section h1 {
        font-size: 3rem !important;
    }
}

/* ==========================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .feature-card:hover,
    .modern-card:hover,
    .btn-premium:hover,
    .nav-link:hover {
        transform: none;
    }
    
    /* Keep tap feedback for buttons */
    .btn-premium:active {
        transform: scale(0.98);
    }
    
    /* Disable nav link underline animation */
    .nav-link::after {
        display: none;
    }
}

/* ==========================================================================
   MOBILE PERFORMANCE OPTIMIZATION (Max-Width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Disable Hover Effects (Sticky on Touch) */
    .feature-card:hover,
    .modern-card:hover,
    .btn-premium:hover,
    .nav-link:hover,
    .icon-box-3d:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* 2. Simplified Scroll Reveals (No 3D translation) */
    .scroll-fade-up {
        transform: none !important;
        opacity: 1 !important; /* Force visible immediately or use simple fade */
        transition: opacity 0.5s ease !important;
    }

    /* 3. Disable Pulsing Animations (Battery Saver) */
    .glow-pulse, 
    .animate-pulse {
        animation: none !important;
        box-shadow: none !important;
    }

    /* 4. Disable Marquee (Performance) */
    .animate-marquee {
        animation-play-state: paused !important;
    }

    /* 6. Tighter Mobile Typography */
    h1 {
        line-height: 1.1 !important;
    }
}

/* --- Utility Classes for Banner Visibility --- */
.banner-hidden {
    display: none !important;
}

.banner-visible {
    display: block !important;
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Admin Panel Visibility Control */
.admin-panel-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}