/* ========================================
   FONT IMPORTS - Must come first
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ========================================
   RETRO CURSOR STYLES
   ======================================== */
.retro-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 10000;
    transform-origin: center;
    transition: transform 0.1s ease;
}

.cursor-arrow {
    font-size: 20px;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    transform-origin: center;
}

.retro-cursor.clicking {
    animation: cursorJumpRotate 0.4s ease-in-out;
}

@keyframes cursorJumpRotate {
    0% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-15px) rotate(90deg) scale(1.2);
    }
    50% {
        transform: translateY(-20px) rotate(180deg) scale(1.2);
    }
    75% {
        transform: translateY(-10px) rotate(270deg) scale(1.1);
    }
    100% {
        transform: translateY(0px) rotate(360deg) scale(1);
    }
}

/* ========================================
   PERFORMANCE & RESPONSIVE OPTIMIZATIONS
   ======================================== */
/* Critical CSS for above-the-fold content */

/* CSS Custom Properties for consistent theming and easier maintenance */
:root {
    /* Colors */
    --primary-teal: #008080;
    --secondary-teal: #006666;
    --accent-cyan: #00ffff;
    --white: #ffffff;
    --black: #000000;
    --gray-light: #c0c0c0;
    --gray-medium: #808080;
    --gray-dark: #404040;
    --blue-dark: #000080;
    --blue-light: #0000a0;
    --green: #008000;
    --green-light: #00a000;
    --icon-primary: #008080;
    --icon-hover: #006666;
    
    /* Typography */
    --font-retro: 'VT323', 'Share Tech Mono', monospace;
    --font-modern: 'Inter', sans-serif;
    
    /* Spacing - Enhanced responsive spacing */
    --spacing-xs: clamp(4px, 1vw, 8px);
    --spacing-sm: clamp(8px, 2vw, 16px);
    --spacing-md: clamp(12px, 3vw, 24px);
    --spacing-lg: clamp(16px, 4vw, 32px);
    --spacing-xl: clamp(20px, 5vw, 40px);
    
    /* Breakpoints - More granular breakpoints */
    --mobile-xs: 320px;
    --mobile-sm: 375px;
    --mobile: 480px;
    --tablet-sm: 600px;
    --tablet: 768px;
    --tablet-lg: 900px;
    --desktop: 1024px;
    --desktop-lg: 1200px;
    --desktop-xl: 1440px;
    --desktop-2xl: 1920px;
    
    /* Z-index layers */
    --z-background: 1;
    --z-desktop: 10;
    --z-windows: 20;
    --z-overlay: 1000;
    --z-loading: 2000;
    
    /* Transitions - Optimized for performance */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* Touch targets - Ensure accessibility */
    --touch-target-min: 44px;
    --touch-target-ideal: 48px;
}

/* ========================================
   RESPONSIVE MIXINS & UTILITIES
   ======================================== */
/* Container queries for better responsive behavior */
@supports (container-type: inline-size) {
    .container-query {
        container-type: inline-size;
    }
}

/* Enhanced responsive typography scale */
.text-responsive {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.4;
    font-weight: 400;
}

.text-responsive-lg {
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.3;
    font-weight: 500;
}

.text-responsive-xl {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.2;
    font-weight: 600;
}

.text-responsive-2xl {
    font-size: clamp(32px, 8vw, 48px);
    line-height: 1.1;
    font-weight: 700;
}

.text-responsive-3xl {
    font-size: clamp(48px, 10vw, 64px);
    line-height: 1.1;
    font-weight: 800;
}

/* Responsive spacing utilities */
.padding-responsive {
    padding: var(--spacing-md);
}

.padding-responsive-sm {
    padding: var(--spacing-sm);
}

.padding-responsive-lg {
    padding: var(--spacing-lg);
}

/* Responsive margin utilities */
.margin-responsive {
    margin: var(--spacing-md);
}

.margin-responsive-sm {
    margin: var(--spacing-sm);
}

.margin-responsive-lg {
    margin: var(--spacing-lg);
}

/* Touch-friendly utilities */
.touch-friendly {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
}

.touch-friendly-lg {
    min-height: var(--touch-target-ideal);
    min-width: var(--touch-target-ideal);
}

/* Responsive breakpoint utilities */
@media (max-width: 480px) {
    .padding-responsive {
        padding: var(--spacing-xs);
    }
    
    .margin-responsive {
        margin: var(--spacing-xs);
    }
}

@media (max-width: 768px) {
    .padding-responsive {
        padding: var(--spacing-sm);
    }
    
    .margin-responsive {
        margin: var(--spacing-sm);
    }
}

@media (min-width: 1024px) {
    .padding-responsive {
        padding: var(--spacing-lg);
    }
    
    .margin-responsive {
        margin: var(--spacing-lg);
    }
}

/* ========================================
   CSS RESET & BASE STYLES
   ======================================== */
/* Global CSS reset to ensure consistent styling across browsers */
* {
    margin: 0;                    /* Remove default margins */
    padding: 0;                   /* Remove default padding */
    box-sizing: border-box;       /* Include padding/border in element width/height */
}

/* ========================================
   RESPONSIVE DEVICE CLASSES
   ======================================== */
/* Device-specific classes for better responsive control */
.device-mobile .desktop-icons {
    gap: 15px !important;
    top: 10px !important;
    left: 10px !important;
}

.device-tablet .desktop-icons {
    gap: 20px !important;
    top: 15px !important;
    left: 15px !important;
}

.device-desktop .desktop-icons {
    gap: 30px !important;
    top: 20px !important;
    left: 20px !important;
}

/* Breakpoint-specific optimizations */
.breakpoint-mobile-xs .folder-window {
    width: 98vw !important;
    height: 95vh !important;
    max-width: 98vw !important;
    max-height: 95vh !important;
}

.breakpoint-mobile .folder-window {
    width: 95vw !important;
    height: 90vh !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
}

.breakpoint-tablet .folder-window {
    width: 92vw !important;
    height: 85vh !important;
    max-width: 92vw !important;
    max-height: 85vh !important;
}

/* Mobile-optimized desktop icons */
.desktop-icons.mobile-optimized {
    gap: 12px !important;
    top: 8px !important;
    left: 8px !important;
}

.desktop-icons.mobile-optimized .desktop-icon {
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 6px !important;
}

.desktop-icons.mobile-optimized .icon-image {
    font-size: 28px !important;
}

.desktop-icons.mobile-optimized .icon-label {
    font-size: 12px !important;
}

/* Base body styling with retro aesthetic */
body {
    font-family: var(--font-retro);  /* Retro monospace fonts */
    background: var(--black);        /* Pure black background */
    color: var(--black);             /* Black text (will be overridden by specific elements) */
    overflow: hidden;                 /* Prevent all scrolling for desktop experience */
    user-select: none;               /* Prevent text selection for retro feel */
    cursor: default;                 /* Default cursor */
    filter: 
        contrast(1.02)               /* Slight contrast boost */
        brightness(0.98)             /* Slight brightness reduction */
        saturate(1.05);              /* Slight color saturation boost */
    
    /* Performance optimizations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    
    /* Responsive base sizing */
    font-size: 16px;
    line-height: 1.5;
}

/* Optimize images for performance */
img {
    max-width: 100%;
    height: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Optimize animations for performance */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   MOBILE TOUCH OPTIMIZATIONS
   ======================================== */
/* Enhanced touch support for mobile devices */
@media (hover: none) and (pointer: coarse) {
    /* Optimize for touch devices */
    .desktop-icon {
        min-height: var(--touch-target-ideal) !important;
        min-width: var(--touch-target-ideal) !important;
        padding: 10px !important;
        border-radius: 8px !important;
    }
    
    .control {
        min-height: var(--touch-target-min) !important;
        min-width: var(--touch-target-min) !important;
        width: var(--touch-target-min) !important;
        height: var(--touch-target-min) !important;
    }
    
    .touch-btn {
        min-height: var(--touch-target-ideal) !important;
        min-width: var(--touch-target-ideal) !important;
        width: var(--touch-target-ideal) !important;
        height: var(--touch-target-ideal) !important;
    }
    
    /* Reduce hover effects on touch devices */
    .desktop-icon:hover,
    .control:hover,
    .touch-btn:hover {
        transform: none !important;
        background: inherit !important;
    }
    
    /* Enhanced touch feedback */
    .desktop-icon:active,
    .control:active,
    .touch-btn:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */
/* Hardware acceleration for better performance */
.desktop-icon,
.control,
.touch-btn,
.folder-window,
.window-header {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize scrolling on mobile */
@media (max-width: 768px) {
    .window-content {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        overscroll-behavior: contain;
    }
}

/* ========================================
   RETRO SCREEN EFFECTS - CRT MONITOR SIMULATION
   ======================================== */
/* Main CRT overlay effect - creates the characteristic curved screen appearance */
.crt-overlay {
    position: fixed;               /* Fixed positioning for full screen coverage */
    top: 0;                       /* Position at top of viewport */
    left: 0;                      /* Position at left of viewport */
    width: 100%;                  /* Full width coverage */
    height: 100%;                 /* Full height coverage */
    background: 
        radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.2) 100%);  /* Vignette effect */
    pointer-events: none;         /* Allow clicks to pass through */
    z-index: var(--z-overlay);    /* High z-index to stay on top */
    
    /* Performance optimization */
    will-change: opacity;
    transform: translateZ(0);
}

.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, 0.08) 1px,
        rgba(0, 0, 0, 0.08) 2px
    );
    pointer-events: none;
    z-index: calc(var(--z-overlay) - 1);
    opacity: 0.6;
    
    /* Performance optimization */
    will-change: opacity;
    transform: translateZ(0);
}

/* Subtle Screen Texture */
.screen-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.02) 1px, transparent 0);
    background-size: 4px 4px;
    pointer-events: none;
    z-index: calc(var(--z-overlay) - 2);
    opacity: 0.4;
    
    /* Performance optimization */
    will-change: opacity;
    transform: translateZ(0);
}

/* Warm CRT Glow */
.crt-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at center, rgba(255, 248, 220, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: calc(var(--z-overlay) - 3);
    mix-blend-mode: soft-light;
    
    /* Performance optimization */
    will-change: opacity;
    transform: translateZ(0);
}

/* Subtle Color Shift */
.color-shift {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, transparent 0%, rgba(255, 248, 220, 0.01) 50%, transparent 100%);
    pointer-events: none;
    z-index: calc(var(--z-overlay) - 4);
    animation: colorShift 10s ease-in-out infinite;
    
    /* Performance optimization */
    will-change: opacity;
    transform: translateZ(0);
}

@keyframes colorShift {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Startup Flicker Animation */
@keyframes startupFlicker {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* Screen Flicker Effect - Old CRT Style */
@keyframes screenFlicker {
    0%, 100% { 
        opacity: 1;
        filter: brightness(1) contrast(1);
    }
    2% { 
        opacity: 0.95;
        filter: brightness(0.95) contrast(1.05);
    }
    4% { 
        opacity: 1;
        filter: brightness(1.02) contrast(0.98);
    }
    6% { 
        opacity: 0.98;
        filter: brightness(0.98) contrast(1.02);
    }
    8% { 
        opacity: 1;
        filter: brightness(1.01) contrast(0.99);
    }
    10% { 
        opacity: 0.96;
        filter: brightness(0.96) contrast(1.04);
    }
    12% { 
        opacity: 1;
        filter: brightness(1.03) contrast(0.97);
    }
    14% { 
        opacity: 0.97;
        filter: brightness(0.97) contrast(1.03);
    }
    16% { 
        opacity: 1;
        filter: brightness(1.01) contrast(0.99);
    }
    18% { 
        opacity: 0.94;
        filter: brightness(0.94) contrast(1.06);
    }
    20% { 
        opacity: 1;
        filter: brightness(1.04) contrast(0.96);
    }
    22% { 
        opacity: 0.99;
        filter: brightness(0.99) contrast(1.01);
    }
    24% { 
        opacity: 1;
        filter: brightness(1.02) contrast(0.98);
    }
    26% { 
        opacity: 0.95;
        filter: brightness(0.95) contrast(1.05);
    }
    28% { 
        opacity: 1;
        filter: brightness(1.01) contrast(0.99);
    }
    30% { 
        opacity: 0.98;
        filter: brightness(0.98) contrast(1.02);
    }
    32% { 
        opacity: 1;
        filter: brightness(1.03) contrast(0.97);
    }
    34% { 
        opacity: 0.96;
        filter: brightness(0.96) contrast(1.04);
    }
    36% { 
        opacity: 1;
        filter: brightness(1.02) contrast(0.98);
    }
    38% { 
        opacity: 0.97;
        filter: brightness(0.97) contrast(1.03);
    }
    40% { 
        opacity: 1;
        filter: brightness(1.01) contrast(0.99);
    }
    42% { 
        opacity: 0.95;
        filter: brightness(0.95) contrast(1.05);
    }
    44% { 
        opacity: 1;
        filter: brightness(1.04) contrast(0.96);
    }
    46% { 
        opacity: 0.98;
        filter: brightness(0.98) contrast(1.02);
    }
    48% { 
        opacity: 1;
        filter: brightness(1.02) contrast(0.98);
    }
    50% { 
        opacity: 0.96;
        filter: brightness(0.96) contrast(1.04);
    }
    52% { 
        opacity: 1;
        filter: brightness(1.01) contrast(0.99);
    }
    54% { 
        opacity: 0.97;
        filter: brightness(0.97) contrast(1.03);
    }
    56% { 
        opacity: 1;
        filter: brightness(1.03) contrast(0.97);
    }
    58% { 
        opacity: 0.98;
        filter: brightness(0.98) contrast(1.02);
    }
    60% { 
        opacity: 1;
        filter: brightness(1.02) contrast(0.98);
    }
    62% { 
        opacity: 0.95;
        filter: brightness(0.95) contrast(1.05);
    }
    64% { 
        opacity: 1;
        filter: brightness(1.01) contrast(0.99);
    }
    66% { 
        opacity: 0.96;
        filter: brightness(0.96) contrast(1.04);
    }
    68% { 
        opacity: 1;
        filter: brightness(1.03) contrast(0.97);
    }
    70% { 
        opacity: 0.97;
        filter: brightness(0.97) contrast(1.03);
    }
    72% { 
        opacity: 1;
        filter: brightness(1.02) contrast(0.98);
    }
    74% { 
        opacity: 0.98;
        filter: brightness(0.98) contrast(1.02);
    }
    76% { 
        opacity: 1;
        filter: brightness(1.01) contrast(0.99);
    }
    78% { 
        opacity: 0.95;
        filter: brightness(0.95) contrast(1.05);
    }
    80% { 
        opacity: 1;
        filter: brightness(1.04) contrast(0.96);
    }
    82% { 
        opacity: 0.99;
        filter: brightness(0.99) contrast(1.01);
    }
    84% { 
        opacity: 1;
        filter: brightness(1.02) contrast(0.98);
    }
    86% { 
        opacity: 0.96;
        filter: brightness(0.96) contrast(1.04);
    }
    88% { 
        opacity: 1;
        filter: brightness(1.01) contrast(0.99);
    }
    90% { 
        opacity: 0.97;
        filter: brightness(0.97) contrast(1.03);
    }
    92% { 
        opacity: 1;
        filter: brightness(1.03) contrast(0.97);
    }
    94% { 
        opacity: 0.98;
        filter: brightness(0.98) contrast(1.02);
    }
    96% { 
        opacity: 1;
        filter: brightness(1.02) contrast(0.98);
    }
    98% { 
        opacity: 0.99;
        filter: brightness(0.99) contrast(1.01);
    }
}

/* Screen Flicker Class */
.screen-flicker {
    animation: screenFlicker 3s ease-in-out;
}

/* Grid Wave Animation */
.subtle-grid {
    animation: gridWave 15s ease-in-out infinite;
}





@keyframes gridWave {
    0%, 100% { 
        transform: translateY(0px) scale(1);
        opacity: 0.9;
    }
    25% { 
        transform: translateY(-2px) scale(1.02);
        opacity: 1.0;
    }
    50% { 
        transform: translateY(1px) scale(0.98);
        opacity: 0.7;
    }
    75% { 
        transform: translateY(-1px) scale(1.01);
        opacity: 0.95;
    }
}

/* Subtle Grid Pattern */
.subtle-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 255, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes patternPulse {
    0%, 100% { opacity: 0.02; }
    50% { opacity: 0.04; }
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #000080 0%, #0000a0 50%, #000080 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    transition: opacity 0.5s ease-out;
    overflow: hidden;
    /* Ensure perfect centering on all devices */
    padding: 20px;
    box-sizing: border-box;
    /* Fallback centering for older browsers */
    text-align: center;
}



.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    text-align: center;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    padding: 20px;
    gap: 30px;
    box-sizing: border-box;
    /* Clean, simple centering */
    flex-shrink: 0;
}

/* Loading Icon */
.loading-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
}

.rotating-man {
    width: clamp(60px, 15vw, 100px);
    height: clamp(60px, 15vw, 100px);
    object-fit: contain;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
    animation: gentleFloat 3s ease-in-out infinite;
}

@keyframes gentleFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}



.loading-bar {
    width: 100%;
    max-width: clamp(200px, 60vw, 350px);
    height: clamp(8px, 2vw, 12px);
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    border-radius: clamp(4px, 1vw, 6px);
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.loading-progress {
    height: 100%;
    background: linear-gradient(90deg, #00ff00, #00cc00, #00ff00);
    background-size: 200% 100%;
    width: 0%;
    animation: 
        loadingProgress 3s ease-in-out forwards,
        progressShine 2s ease-in-out infinite;
    border-radius: inherit;
    box-shadow: 
        0 0 10px rgba(0, 255, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

@keyframes loadingProgress {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes progressShine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.loading-text {
    font-size: clamp(12px, 3vw, 18px);
    color: #ffffff;
    margin: 0;
    text-align: center;
    width: 100%;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    display: block;
    font-family: "VT323", "Courier New", monospace;
    letter-spacing: 1px;
    text-transform: none;
}

/* Animated dots */
.dot {
    opacity: 0;
    animation: dotAppear 0.5s ease-in forwards;
}

.dot1 {
    animation-delay: 0.5s;
}

.dot2 {
    animation-delay: 1s;
}

.dot3 {
    animation-delay: 1.5s;
}

@keyframes dotAppear {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(10px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1) translateY(-2px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========================================
   LOADING SCREEN RESPONSIVE DESIGN
   ======================================== */
/* Large Desktop (1200px and above) */
@media (min-width: 1200px) {
    .loading-content {
        max-width: 600px;
        gap: 40px;
        padding: 30px;
    }
    
    .rotating-man {
        width: 100px;
        height: 100px;
    }
    
    .loading-bar {
        width: 350px;
        height: 12px;
    }
    
    .loading-text {
        font-size: 18px;
    }
}

/* Desktop (1024px - 1199px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .loading-content {
        max-width: 550px;
        gap: 35px;
        padding: 25px;
    }
    
    .rotating-man {
        width: 90px;
        height: 90px;
    }
    
    .loading-bar {
        width: 320px;
        height: 11px;
    }
    
    .loading-text {
        font-size: 17px;
    }
}

/* Tablet Landscape (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .loading-content {
        max-width: 500px;
        gap: 30px;
        padding: 20px;
    }
    
    .rotating-man {
        width: 80px;
        height: 80px;
    }
    
    .loading-bar {
        width: 300px;
        height: 10px;
    }
    
    .loading-text {
        font-size: 16px;
    }
}

/* Tablet Portrait (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .loading-content {
        max-width: 450px;
        gap: 25px;
        padding: 18px;
    }
    
    .rotating-man {
        width: 70px;
        height: 70px;
    }
    
    .loading-bar {
        width: 280px;
        height: 9px;
    }
    
    .loading-text {
        font-size: 15px;
    }
}

/* Mobile Large (375px - 480px) */
@media (min-width: 375px) and (max-width: 480px) {
    .loading-content {
        max-width: 400px;
        gap: 20px;
        padding: 15px;
    }
    
    .rotating-man {
        width: 60px;
        height: 60px;
    }
    
    .loading-bar {
        width: 250px;
        height: 8px;
    }
    
    .loading-text {
        font-size: 14px;
    }
}

/* Mobile Small (320px - 374px) */
@media (min-width: 320px) and (max-width: 374px) {
    .loading-content {
        max-width: 350px;
        gap: 18px;
        padding: 12px;
    }
    
    .rotating-man {
        width: 55px;
        height: 55px;
    }
    
    .loading-bar {
        width: 220px;
        height: 7px;
    }
    
    .loading-text {
        font-size: 13px;
    }
}

/* Extra Small Mobile (below 320px) */
@media (max-width: 319px) {
    .loading-content {
        max-width: 300px;
        gap: 15px;
        padding: 10px;
    }
    
    .rotating-man {
        width: 50px;
        height: 50px;
    }
    
    .loading-bar {
        width: 200px;
        height: 6px;
    }
    
    .loading-text {
        font-size: 12px;
    }
}

/* Landscape orientation adjustments for mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .loading-content {
        gap: 15px;
        padding: 10px;
    }
    
    .rotating-man {
        width: 50px;
        height: 50px;
    }
    
    .loading-bar {
        width: 200px;
        height: 6px;
    }
    
    .loading-text {
        font-size: 13px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .loading-content {
        /* Ensure crisp rendering on high DPI displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Ensure loading screen works on very small screens */
@media (max-width: 280px) {
    .loading-content {
        max-width: 250px;
        gap: 12px;
        padding: 8px;
    }
    
    .rotating-man {
        width: 45px;
        height: 45px;
    }
    
    .loading-bar {
        width: 180px;
        height: 5px;
    }
    
    .loading-text {
        font-size: 11px;
    }
}

/* Ensure proper centering on ultra-wide screens */
@media (min-width: 1920px) {
    .loading-content {
        max-width: 700px;
        gap: 45px;
        padding: 35px;
    }
    
    .rotating-man {
        width: 120px;
        height: 120px;
    }
    
    .loading-bar {
        width: 450px;
        height: 15px;
    }
    
    .loading-text {
        font-size: 20px;
    }
}

/* Ensure loading screen works properly on devices with notches or unusual screen ratios */
@media (max-aspect-ratio: 1/1) and (max-width: 767px) {
    .loading-content {
        /* Adjust for very tall, narrow screens */
        gap: 15px;
        padding: 10px;
    }
}

/* Ensure loading screen works on devices with very high aspect ratios */
@media (min-aspect-ratio: 21/9) {
    .loading-content {
        /* Adjust for ultra-wide screens */
        max-width: 800px;
        gap: 50px;
        padding: 40px;
    }
}

/* Desktop Background */
.desktop {
    width: 100vw;
    height: 100vh;
    background: 
        linear-gradient(135deg, #008080 0%, #006666 25%, #008080 50%, #006666 75%, #008080 100%),
        radial-gradient(circle at 20% 20%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.05) 0%, transparent 70%);
    position: relative;
    overflow: visible; /* Allow taskbar to be visible */
}

/* Windows 98 Style Background Elements */
.retro-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Subtle Pattern Overlay */
.pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 100px 100px, 200px 200px;
    pointer-events: none;
    z-index: 2;
    animation: patternPulse 6s ease-in-out infinite;
}



/* Subtle Grid */
.retro-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 3;
    animation: gridPulse 5s ease-in-out infinite;
}

/* Old wallpaper-pattern class kept for compatibility but hidden */
.wallpaper-pattern {
    display: none;
}

/* Desktop Icons */
.desktop-icons {
    position: absolute;
    top: clamp(15px, 4vw, 20px);
    left: clamp(15px, 4vw, 20px);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 5vw, 30px);
    z-index: var(--z-desktop);
    pointer-events: auto;
    width: clamp(100px, 25vw, 120px);
    
    /* Responsive optimizations */
    @media (max-width: 480px) {
        top: 10px;
        left: 10px;
        gap: 15px;
        width: 80px;
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
        top: 12px;
        left: 12px;
        gap: 18px;
        width: 90px;
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
        top: 15px;
        left: 15px;
        gap: 22px;
        width: 100px;
    }
    
    @media (min-width: 1025px) {
        top: 20px;
        left: 20px;
        gap: 30px;
        width: 120px;
    }
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: clamp(6px, 1.5vw, 8px);
    border-radius: clamp(2px, 0.8vw, 3px);
    min-width: clamp(60px, 20vw, 80px);
    pointer-events: auto;
    position: relative;
    z-index: var(--z-desktop);
    user-select: none;
    outline: none;
    
    /* Enhanced touch-friendly sizing for mobile */
    @media (max-width: 768px) {
        min-height: var(--touch-target-ideal);
        min-width: var(--touch-target-ideal);
        padding: 10px;
        border-radius: 8px;
    }
    
    @media (max-width: 480px) {
        min-height: var(--touch-target-min);
        min-width: var(--touch-target-min);
        padding: 8px;
        border-radius: 6px;
    }
    
    /* Performance optimization */
    will-change: transform;
    transform: translateZ(0);
    
    /* Better focus states for accessibility */
    &:focus-visible {
        outline: 3px solid var(--accent-cyan);
        outline-offset: 2px;
        border-radius: 6px;
    }
}

.desktop-icon:hover {
    background: rgba(255, 255, 255, 0.3);
}

.desktop-icon:active {
    transform: scale(0.98);
}

.desktop-icon:focus {
    outline: 2px solid #00ffff;
    outline-offset: 2px;
}

.desktop-icon.selected {
    background: rgba(0, 123, 255, 0.3);
    border: 1px solid rgba(0, 123, 255, 0.6);
}

.icon-image {
    font-size: clamp(36px, 10vw, 48px);
    margin-bottom: clamp(3px, 1vw, 5px);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    image-rendering: pixelated;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    transition: var(--transition-normal);
    
    /* Responsive sizing */
    @media (max-width: 480px) {
        font-size: 32px;
        margin-bottom: 2px;
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
        font-size: 36px;
        margin-bottom: 3px;
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
        font-size: 40px;
        margin-bottom: 4px;
    }
    
    @media (min-width: 1025px) {
        font-size: 48px;
        margin-bottom: 5px;
    }
    
    /* Performance optimization */
    will-change: transform, filter;
    transform: translateZ(0);
}

/* Retro Icon Effects */
.desktop-icon:hover .icon-image {
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.6));
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.desktop-icon.selected .icon-image {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.icon-label {
    font-size: clamp(14px, 3.5vw, 20px);
    color: #ffffff;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-weight: bold;
    line-height: 1.2;
    max-width: clamp(80px, 20vw, 100px);
    word-wrap: break-word;
}

/* Folder Icon Styling */
.folder-icon-img {
    width: clamp(36px, 10vw, 48px);
    height: clamp(36px, 10vw, 48px);
    image-rendering: pixelated;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    transition: all 0.2s ease;
}

.folder-icon:hover .folder-icon-img {
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.7));
    transform: scale(1.05);
}

.folder-icon.selected .folder-icon-img {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
}

/* Snake Game Icon */
.snake-icon-img {
    width: clamp(36px, 10vw, 48px);
    height: clamp(36px, 10vw, 48px);
    image-rendering: pixelated;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    transition: all 0.2s ease;
}

.snake-game-icon:hover .snake-icon-img {
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.7));
    transform: scale(1.05);
}

.snake-game-icon.selected .snake-icon-img {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
}

/* Recycle Bin Icon */
.recycle-icon .icon-image {
    color: #ff6b6b;
}

.recycle-icon:hover .icon-image {
    color: #ff8e8e;
}



/* Double-click animation */
.desktop-icon.double-click {
    animation: doubleClickPulse 0.3s ease-in-out;
}

@keyframes doubleClickPulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Folder Windows - Main Container */
.folder-windows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-windows);
    pointer-events: none;
    
    /* Responsive container */
    @media (max-width: 480px) {
        padding: 5px;
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
        padding: 8px;
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
        padding: 10px;
    }
    
    @media (min-width: 1025px) {
        padding: 15px;
    }
}

/* Folder Window - Individual Windows - Responsive */
.folder-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw !important;
    max-width: 1200px !important;
    height: 85vh !important;
    max-height: 800px !important;
    background: var(--gray-light);
    border: 3px solid var(--white);
    border-right: 3px solid var(--gray-medium);
    border-bottom: 3px solid var(--gray-medium);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    display: none;
    z-index: var(--window-z-index, 30);
    pointer-events: auto;
    transition: var(--transition-normal);
    
    /* Responsive sizing and positioning */
    @media (max-width: 480px) {
        width: 95vw !important;
        height: 90vh !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-width: 2px;
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
        width: 92vw !important;
        height: 85vh !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-width: 2px;
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
        width: 90vw !important;
        height: 80vh !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-width: 3px;
    }
    
    @media (min-width: 1025px) {
        width: min(875px, 90vw) !important;
        height: min(625px, 80vh) !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-width: 3px;
    }
    
    /* Performance optimization */
    will-change: transform, opacity;
    transform: translate(-50%, -50%) translateZ(0);
}



.folder-window.active {
    display: block;
    z-index: 9999 !important;
}

.folder-window.maximized {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    transform: none;
}

.folder-window.minimized {
    display: none;
}

/* Window Header */
.window-header {
    background: linear-gradient(90deg, var(--blue-dark), var(--blue-light));
    color: var(--white);
    padding: clamp(4px, 1.5vw, 6px) clamp(8px, 2vw, 10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: clamp(12px, 2.5vw, 14px);
    cursor: move;
    border-bottom: 2px solid var(--white);
    
    /* Responsive header sizing */
    @media (max-width: 480px) {
        padding: 6px 8px;
        font-size: 12px;
        min-height: 36px;
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
        padding: 5px 9px;
        font-size: 13px;
        min-height: 38px;
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
        padding: 5px 10px;
        font-size: 13px;
        min-height: 40px;
    }
    
    @media (min-width: 1025px) {
        padding: 6px 10px;
        font-size: 14px;
        min-height: 42px;
    }
    
    /* Performance optimization */
    will-change: transform;
    transform: translateZ(0);
}

.window-title {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.5vw, 6px);
}

.window-icon {
    font-size: clamp(14px, 3vw, 16px);
}

.window-controls {
    display: flex;
    gap: clamp(2px, 1vw, 3px);
    align-items: center;
    flex-shrink: 0;
}

.control {
    width: clamp(16px, 4vw, 18px);
    height: clamp(16px, 4vw, 18px);
    background: var(--gray-light);
    border: 2px solid var(--white);
    border-right: 2px solid var(--gray-medium);
    border-bottom: 2px solid var(--gray-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: clamp(10px, 2.5vw, 12px);
    color: var(--black);
    transition: var(--transition-fast);
    
    /* Touch-friendly sizing for mobile - keep square */
    @media (max-width: 480px) {
        width: 24px;
        height: 24px;
        font-size: 14px;
        min-width: 24px;
        min-height: 24px;
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
        width: 20px;
        height: 20px;
        font-size: 12px;
        min-width: 20px;
        min-height: 20px;
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
        width: 18px;
        height: 18px;
        font-size: 11px;
        min-width: 18px;
        min-height: 18px;
    }
    
    @media (min-width: 1025px) {
        width: 18px;
        height: 18px;
        font-size: 12px;
        min-width: 18px;
        min-height: 18px;
    }
    
    /* Performance optimization */
    will-change: transform;
    transform: translateZ(0);
}

.control:hover {
    background: #e0e0e0;
}

.control:active {
    border: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translate(1px, 1px);
}

/* Ensure buttons always maintain square aspect ratio */
.control {
    aspect-ratio: 1;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Window Content */
.window-content {
    padding: clamp(10px, 2vw, 15px);
    height: calc(100% - 32px);
    overflow-y: auto;
    background: var(--white);
    box-sizing: border-box;
    
    /* Responsive content padding */
    @media (max-width: 480px) {
        padding: 8px;
        height: calc(100% - 40px);
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
        padding: 10px;
        height: calc(100% - 40px);
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
        padding: 12px;
        height: calc(100% - 40px);
    }
    
    @media (min-width: 1025px) {
        padding: 10px;
        height: calc(100% - 44px);
        overflow-y: visible; /* No scrolling on desktop */
    }
    
    /* Smooth scrolling for better mobile experience */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    
    /* Performance optimization */
    will-change: scroll-position;
    transform: translateZ(0);
}



/* All other windows - no scrolling on desktop */
.folder-window:not(#team-window) .window-content {
    overflow-y: hidden;
}

/* Allow scrolling on mobile for intro window */
@media (max-width: 768px) {
    #intro-window .window-content {
        overflow-y: auto !important;
        height: calc(100% - 40px);
        min-height: calc(100% - 40px);
        max-height: calc(100% - 40px);
    }
}

/* What We Do window - allow scrolling on mobile */
@media (max-width: 768px) {
    #what-we-do-window .window-content {
        overflow-y: auto;
        height: calc(100% - 40px);
        min-height: calc(100% - 40px);
        max-height: calc(100% - 40px);
    }
}

/* Projects window - perfectly centered and symmetrical desktop sizing */
@media (min-width: 1025px) {
    #projects-window .window-content {
        padding: 10px;
        height: calc(100% - 44px);
        overflow-y: visible;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #projects-window .projects-content {
        height: calc(100% - 60px);
        min-height: calc(100% - 60px);
        max-height: calc(100% - 60px);
        padding: 12px;
        margin: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    #projects-window .project-showcase {
        height: calc(100% - 90px);
        min-height: calc(100% - 90px);
        max-height: calc(100% - 90px);
        gap: 16px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .window-content {
        padding: 12px;
    }
}

/* Hero Content - Modern Design */
.hero-content {
    padding: clamp(15px, 4vw, 25px) clamp(12px, 3vw, 20px);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: clamp(8px, 2vw, 12px);
    margin: clamp(6px, 2vw, 10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Mobile optimization */
    @media (max-width: 768px) {
        height: auto;
        min-height: calc(100% - 40px);
        max-height: calc(100% - 40px);
        padding: 10px 8px;
        margin: 5px;
        justify-content: flex-start;
        overflow-y: auto;
    }
    
    @media (max-width: 480px) {
        padding: 8px 6px;
        margin: 3px;
        min-height: calc(100% - 36px);
        max-height: calc(100% - 36px);
    }
}

.hero-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.hero-main {
    display: flex;
    flex-direction: row;
    gap: clamp(10px, 3vw, 15px);
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(20px, 5vw, 30px);
    position: relative;
    z-index: 2;
    width: clamp(80%, 70%, 90%);
    margin-left: auto;
    margin-right: auto;
    
    /* Mobile layout optimization */
    @media (max-width: 768px) {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-bottom: 15px;
    }
    
    @media (max-width: 480px) {
        gap: 8px;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .hero-main {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: center;
    }
}

.hero-left {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-self: center;
    width: 100%;
}

.hero-right {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-icon {
    margin-bottom: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .hero-icon {
        text-align: center;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .hero-icon {
        margin-bottom: 6px;
    }
}

.hero-logo {
    width: clamp(60px, 15vw, 90px);
    height: clamp(60px, 15vw, 90px);
    object-fit: contain;
    filter: brightness(1.2) contrast(1.1) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    transition: all 0.3s ease;
}

.hero-logo:hover {
    transform: scale(1.05);
    filter: brightness(1.3) contrast(1.2) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6));
}

.flvme-title {
    font-size: clamp(32px, 8vw, 52px);
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    margin: 0 0 clamp(12px, 3vw, 18px) 0;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: clamp(1px, 0.5vw, 2px);
    transition: all 0.3s ease;
    line-height: 1.1;
    
    /* Mobile optimizations */
    @media (max-width: 768px) {
        font-size: clamp(24px, 6vw, 32px);
        margin-bottom: 8px;
        line-height: 1.0;
    }
    
    @media (max-width: 480px) {
        font-size: clamp(20px, 5vw, 28px);
        margin-bottom: 6px;
        letter-spacing: 0.5px;
    }
}

.flvme-title:hover {
    transform: scale(1.02);
    text-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.hero-subtitle {
    font-size: clamp(18px, 4vw, 26px);
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 clamp(12px, 3vw, 18px) 0;
    font-weight: 700;
    letter-spacing: clamp(0.3px, 0.1vw, 0.5px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.hero-description {
    font-size: clamp(14px, 3vw, 17px);
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 clamp(18px, 4vw, 25px) 0;
    line-height: 1.5;
    max-width: 100%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}



.hero-stats {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 3vw, 15px);
    align-items: center;
    justify-content: center;
    height: 100%;
}

@media (max-width: 768px) {
    .hero-stats {
        gap: clamp(8px, 2vw, 10px);
    }
}

.stat-item {
    background: rgba(255, 255, 255, 0.15);
    padding: clamp(12px, 3vw, 15px) clamp(14px, 3.5vw, 18px);
    border-radius: clamp(8px, 2vw, 12px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    text-align: center;
    min-width: clamp(90px, 20vw, 110px);
}

.stat-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.2);
}

.stat-number {
    font-size: clamp(24px, 6vw, 32px);
    font-weight: 900;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    margin-bottom: clamp(6px, 1.5vw, 8px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Make only the infinity symbol bigger */
.stat-item:nth-child(2) .stat-number {
    font-size: clamp(32px, 8vw, 48px);
}

.stat-label {
    font-size: clamp(12px, 2.5vw, 15px);
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.hero-timeline {
    display: flex;
    justify-content: center;
    gap: clamp(15px, 4vw, 25px);
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
    margin-top: 0;
    
    /* Mobile timeline optimization */
    @media (max-width: 768px) {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 0;
    }
    
    @media (max-width: 480px) {
        gap: 6px;
    }
}

@media (max-width: 768px) {
    .hero-timeline {
        gap: clamp(8px, 2vw, 12px);
        flex-direction: column;
        align-items: center;
    }
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 15px);
    background: rgba(255, 255, 255, 0.1);
    padding: clamp(12px, 3vw, 15px) clamp(14px, 3.5vw, 18px);
    border-radius: clamp(8px, 2vw, 12px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    min-width: clamp(140px, 30vw, 170px);
    
    /* Mobile timeline item optimization */
    @media (max-width: 768px) {
        min-width: auto;
        width: 100%;
        max-width: 280px;
        padding: 8px 12px;
        gap: 8px;
    }
    
    @media (max-width: 480px) {
        padding: 6px 10px;
        gap: 6px;
        max-width: 250px;
    }
}

.timeline-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.15);
}

.timeline-dot {
    width: clamp(8px, 2vw, 10px);
    height: clamp(8px, 2vw, 10px);
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.timeline-content h4 {
    font-size: clamp(14px, 3.5vw, 18px);
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    margin-bottom: clamp(4px, 1vw, 6px);
    font-weight: 700;
}

.timeline-content p {
    font-size: clamp(11px, 2.5vw, 13px);
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: clamp(20px, 4vw, 30px) clamp(15px, 3vw, 20px);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.feature-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #000080, #4040a0);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.feature-item:hover::after {
    width: 80%;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: clamp(36px, 6vw, 48px);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.feature-item span {
    font-size: clamp(16px, 2.5vw, 18px);
    font-weight: 700;
    color: #404040;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
    font-family: 'Inter', sans-serif;
}

.retro-button {
    padding: 12px 24px;
    font-size: 18px;
    font-family: 'VT323', monospace;
    background: #c0c0c0;
    border: 3px solid #ffffff;
    border-right: 3px solid #808080;
    border-bottom: 3px solid #808080;
    color: #000000;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.1s ease;
}

.retro-button:hover {
    background: #e0e0e0;
}

.retro-button:active {
    border: 3px solid #808080;
    border-right: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    transform: translate(2px, 2px);
}

.retro-button.primary {
    background: #000080;
    color: #ffffff;
    border-color: #000080;
}

.retro-button.primary:hover {
    background: #0000a0;
}

.retro-button.secondary {
    background: #ffffff;
    border: 3px solid #808080;
}

.retro-button.secondary:hover {
    background: #f0f0f0;
}

.modern-button {
    padding: 10px 20px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.modern-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.modern-button:hover::before {
    left: 100%;
}

.modern-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.modern-button.secondary {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
}

.modern-button.secondary:hover {
    box-shadow: 0 8px 25px rgba(240, 147, 251, 0.4);
}





/* Projects Content - Mobile-First Redesign */
.projects-content {
    padding: clamp(12px, 4vw, 20px);
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: clamp(12px, 3vw, 16px);
    margin: clamp(8px, 2vw, 12px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    height: calc(100% - 50px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    
    /* Mobile-first optimization */
    @media (max-width: 768px) {
        height: auto;
        min-height: calc(100% - 40px);
        max-height: calc(100% - 40px);
        overflow-y: auto;
        padding: clamp(16px, 5vw, 20px);
        margin: clamp(10px, 3vw, 15px);
    }
    
    @media (max-width: 480px) {
        padding: clamp(14px, 4vw, 18px);
        margin: clamp(8px, 2vw, 12px);
    }
    
    /* Desktop optimization - centered and symmetrical */
    @media (min-width: 1025px) {
        height: calc(100% - 60px);
        min-height: calc(100% - 60px);
        max-height: calc(100% - 60px);
        overflow-y: visible;
        padding: 12px;
        margin: 6px;
        justify-content: center;
        align-items: center;
    }
}

.projects-header {
    text-align: center;
    margin-bottom: clamp(16px, 5vw, 24px);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    @media (max-width: 768px) {
        margin-bottom: clamp(20px, 6vw, 28px);
    }
    
    /* Desktop optimization - perfect centering */
    @media (min-width: 1025px) {
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%;
    }
}

.projects-header h2 {
    font-size: clamp(28px, 7vw, 36px);
    font-family: 'Inter', sans-serif;
    color: #000080;
    margin-bottom: clamp(8px, 2vw, 12px);
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: clamp(0.5px, 0.2vw, 1px);
    line-height: 1.1;
    
    @media (max-width: 768px) {
        font-size: clamp(32px, 8vw, 40px);
        margin-bottom: clamp(10px, 3vw, 14px);
    }
}

.projects-subtitle {
    font-size: clamp(14px, 4vw, 18px);
    font-family: 'Inter', sans-serif;
    color: #606060;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 1.3;
    
    @media (max-width: 768px) {
        font-size: clamp(16px, 4.5vw, 20px);
    }
}

.project-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 4vw, 24px);
    height: calc(100% - 80px);
    overflow-y: auto;
    align-items: center;
    justify-items: center;
    width: 100%;
    
    /* Mobile-first redesign */
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: clamp(20px, 6vw, 28px);
        height: auto;
        min-height: auto;
        overflow-y: visible;
        padding: 0 clamp(8px, 2vw, 12px);
    }
    
    @media (max-width: 480px) {
        gap: clamp(18px, 5vw, 24px);
        padding: 0 clamp(6px, 1.5vw, 10px);
    }
    
    /* Desktop optimization - perfectly centered and symmetrical */
    @media (min-width: 1025px) {
        height: calc(100% - 90px);
        min-height: calc(100% - 90px);
        max-height: calc(100% - 90px);
        overflow-y: visible;
        gap: 16px;
        padding: 0;
        width: 100%;
        max-width: 100%;
        justify-items: center;
        align-items: center;
    }
}

@media (max-width: 768px) {
    /* Keep projects content consistent - only adjust sizing, not layout */
    .projects-content {
        padding: clamp(8px, 2vw, 10px);
        margin: clamp(3px, 1vw, 5px);
    }
    
    .project-showcase {
        gap: clamp(10px, 3vw, 15px);
    }
    
    /* Keep all content visible - no hiding/showing different versions */
    .desktop-metrics,
    .mobile-roadmap {
        display: block;
    }
    
    /* Keep project roadmap visible on all screen sizes */
    .project-roadmap {
        display: block;
    }
}

.project-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.project-link:hover {
    text-decoration: none;
}

.project-main {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: clamp(16px, 4vw, 20px);
    padding: clamp(20px, 5vw, 28px);
    border: 2px solid rgba(0, 0, 128, 0.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    height: fit-content;
    position: relative;
    transition: all 0.3s ease;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* Mobile-first card design */
    @media (max-width: 768px) {
        padding: clamp(24px, 6vw, 32px);
        border-radius: clamp(20px, 5vw, 24px);
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    }
    
    @media (max-width: 480px) {
        padding: clamp(20px, 5vw, 28px);
        border-radius: clamp(18px, 4vw, 22px);
    }
    
    /* Desktop optimization - perfectly centered and symmetrical */
    @media (min-width: 1025px) {
        padding: 18px;
        border-radius: 14px;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 100%;
        align-items: center;
        text-align: center;
        min-height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

.project-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

/* Project image optimization - ensure all images fit properly on ALL screen sizes */
.project-main img,
.project-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    transition: all 0.3s ease;
    display: block;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

/* Universal image fitting for all screen sizes */
.project-main img,
.project-visual img,
.crym-image {
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: inherit !important;
    display: block !important;
}

/* Mobile image optimization (320px - 480px) */
@media (max-width: 480px) {
    .project-main img,
    .project-visual img {
        object-fit: cover;
        object-position: center;
        border-radius: inherit;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
}

/* Small tablet image optimization (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .project-main img,
    .project-visual img {
        object-fit: cover;
        object-position: center;
        border-radius: inherit;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
}

/* Large tablet image optimization (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .project-main img,
    .project-visual img {
        object-fit: cover;
        object-position: center;
        border-radius: inherit;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
}

/* Desktop image optimization (1025px+) */
@media (min-width: 1025px) {
    .project-main img,
    .project-visual img {
        object-fit: cover;
        object-position: center;
        border-radius: inherit;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
}

.project-visual {
    position: relative;
    margin-bottom: clamp(16px, 4vw, 24px);
    border-radius: clamp(16px, 4vw, 20px);
    overflow: hidden;
    width: 100%;
    height: clamp(120px, 25vw, 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    box-sizing: border-box;
    
    /* Mobile optimization (320px - 480px) */
    @media (max-width: 480px) {
        height: clamp(120px, 28vw, 160px);
        margin-bottom: clamp(18px, 4vw, 24px);
        border-radius: clamp(18px, 4vw, 22px);
        background: #f1f5f9;
    }
    
    /* Small tablet optimization (481px - 768px) */
    @media (min-width: 481px) and (max-width: 768px) {
        height: clamp(140px, 30vw, 180px);
        margin-bottom: clamp(20px, 5vw, 28px);
        border-radius: clamp(20px, 5vw, 24px);
        background: #f8fafc;
    }
    
    /* Large tablet optimization (769px - 1024px) */
    @media (min-width: 769px) and (max-width: 1024px) {
        height: clamp(130px, 28vw, 170px);
        margin-bottom: clamp(18px, 4vw, 24px);
        border-radius: clamp(18px, 4vw, 22px);
        background: #f1f5f9;
    }
    
    /* Desktop optimization (1025px+) - perfectly fitted images */
    @media (min-width: 1025px) {
        height: 120px;
        margin-bottom: 16px;
        border-radius: 12px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f1f5f9;
    }
}

.crym-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    transition: all 0.3s ease;
    display: block;
    max-width: 100%;
    max-height: 100%;
    
    /* Mobile optimization (320px - 480px) */
    @media (max-width: 480px) {
        object-fit: cover;
        object-position: center;
        border-radius: inherit;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    
    /* Small tablet optimization (481px - 768px) */
    @media (min-width: 481px) and (max-width: 768px) {
        object-fit: cover;
        object-position: center;
        border-radius: inherit;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    
    /* Large tablet optimization (769px - 1024px) */
    @media (min-width: 769px) and (max-width: 1024px) {
        object-fit: cover;
        object-position: center;
        border-radius: inherit;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
    
    /* Desktop optimization (1025px+) - perfect image fitting */
    @media (min-width: 1025px) {
        object-fit: cover;
        object-position: center;
        border-radius: inherit;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
    }
}

.project-badge {
    position: absolute;
    top: clamp(6px, 2vw, 10px);
    right: clamp(6px, 2vw, 10px);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: clamp(3px, 1vw, 5px) clamp(6px, 2vw, 10px);
    border-radius: clamp(5px, 1.5vw, 8px);
    font-size: clamp(7px, 1.8vw, 9px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: clamp(0.3px, 0.1vw, 0.5px);
    font-family: 'Inter', sans-serif;
}

.project-details h3 {
    font-size: clamp(22px, 5.5vw, 28px);
    font-family: 'Inter', sans-serif;
    color: #1a202c;
    margin-bottom: clamp(12px, 3vw, 18px);
    font-weight: 800;
    line-height: 1.1;
    
    /* Mobile-first typography */
    @media (max-width: 768px) {
        font-size: clamp(26px, 6.5vw, 32px);
        margin-bottom: clamp(14px, 4vw, 20px);
    }
}

.project-description {
    font-size: clamp(14px, 3.5vw, 16px);
    font-family: 'Inter', sans-serif;
    color: #4a5568;
    line-height: 1.5;
    margin-bottom: clamp(16px, 4vw, 24px);
    
    /* Mobile-first description */
    @media (max-width: 768px) {
        font-size: clamp(16px, 4vw, 18px);
        margin-bottom: clamp(20px, 5vw, 28px);
        line-height: 1.6;
    }
}

.project-metrics {
    display: flex;
    gap: clamp(20px, 5vw, 32px);
    justify-content: center;
    margin-bottom: clamp(16px, 4vw, 24px);
    
    /* Mobile-first metrics layout */
    @media (max-width: 768px) {
        gap: clamp(24px, 6vw, 36px);
        margin-bottom: clamp(20px, 5vw, 28px);
        flex-wrap: wrap;
    }
}

.metric {
    text-align: center;
    min-width: clamp(70px, 18vw, 90px);
    
    /* Mobile-first metric sizing */
    @media (max-width: 768px) {
        min-width: clamp(80px, 20vw, 100px);
    }
}

/* Mobile Roadmap - Always visible */
.mobile-roadmap {
    display: block;
}

/* Desktop Metrics - Always visible */
.desktop-metrics {
    display: flex;
}

.mobile-roadmap h4 {
    font-size: clamp(14px, 3.5vw, 16px);
    font-family: 'Inter', sans-serif;
    color: #1a202c;
    margin-bottom: clamp(8px, 2vw, 12px);
    font-weight: 700;
    text-align: center;
}

.mobile-roadmap-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(4px, 1.5vw, 6px);
}

.mobile-roadmap-item {
    background: #ffffff;
    padding: 10px 12px;
    border-radius: 6px;
    border: 2px solid rgba(0, 0, 128, 0.1);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 55px;
    min-height: 55px;
}

.mobile-roadmap-item.completed {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border-color: rgba(59, 130, 246, 0.3);
}

.mobile-roadmap-item.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-color: rgba(16, 185, 129, 0.3);
}

.mobile-roadmap-item:not(.completed):not(.active) {
    background: #ffffff;
    color: #64748b;
    border-color: rgba(0, 0, 128, 0.1);
}

.mobile-roadmap-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 128, 0.2);
}

.mobile-roadmap-item.completed:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
}

.mobile-roadmap-item.active:hover {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.2);
}

.mobile-roadmap-icon {
    font-size: 14px;
    margin-bottom: 2px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 1;
    text-align: center;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
}

.mobile-roadmap-text h5 {
    font-size: 9px;
    font-weight: 700;
    margin-bottom: 1px;
    line-height: 1.1;
    font-family: 'Inter', sans-serif;
}

.mobile-roadmap-text p {
    font-size: 7px;
    margin: 0;
    opacity: 0.9;
    line-height: 1.1;
    font-family: 'Inter', sans-serif;
}

.metric-value {
    display: block;
    font-size: 18px;
    font-weight: 900;
    color: #667eea;
    margin-bottom: 4px;
    font-family: 'Inter', sans-serif;
}

.metric-label {
    font-size: 10px;
    color: #718096;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.project-roadmap {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: clamp(16px, 4vw, 20px);
    padding: clamp(24px, 6vw, 32px);
    border: 2px solid rgba(0, 0, 128, 0.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    margin-top: clamp(20px, 5vw, 28px);
    
    /* Mobile-first roadmap design */
    @media (max-width: 768px) {
        padding: clamp(28px, 7vw, 36px);
        border-radius: clamp(20px, 5vw, 24px);
        margin-top: clamp(24px, 6vw, 32px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    }
    
    @media (max-width: 480px) {
        padding: clamp(24px, 6vw, 32px);
        margin-top: clamp(20px, 5vw, 28px);
    }
}

/* PC view only - match height with crymson project tile */
@media (min-width: 769px) {
    .project-roadmap {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        height: fit-content;
        transition: all 0.3s ease;
    }
}

/* Desktop optimization - perfectly centered and symmetrical */
@media (min-width: 1025px) {
    .project-roadmap {
        padding: 16px;
        margin-top: 16px;
        border-radius: 12px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .project-roadmap h4 {
        font-size: 18px;
        margin-bottom: 16px;
        text-align: center;
        width: 100%;
    }
    
    .roadmap-items {
        gap: 12px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .roadmap-item {
        padding: 14px;
        min-height: 60px;
        border-radius: 8px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

.project-roadmap h4 {
    font-size: 20px;
    font-family: 'Inter', sans-serif;
    color: #1a202c;
    margin-bottom: 20px;
    font-weight: 800;
    text-align: center;
}

.roadmap-items {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 3vw, 16px);
    
    /* Mobile-first roadmap items */
    @media (max-width: 768px) {
        gap: clamp(16px, 4vw, 20px);
    }
}

.roadmap-item {
    background: #ffffff;
    padding: clamp(16px, 4vw, 20px);
    border-radius: clamp(12px, 3vw, 16px);
    border: 2px solid rgba(0, 0, 128, 0.1);
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: clamp(12px, 3vw, 16px);
    height: auto;
    min-height: clamp(70px, 18vw, 90px);
    
    /* Mobile-first item design */
    @media (max-width: 768px) {
        padding: clamp(20px, 5vw, 24px);
        border-radius: clamp(16px, 4vw, 20px);
        min-height: clamp(80px, 20vw, 100px);
        gap: clamp(16px, 4vw, 20px);
    }
    
    @media (max-width: 480px) {
        padding: clamp(18px, 4.5vw, 22px);
        min-height: clamp(75px, 18vw, 95px);
    }
}

.roadmap-item.completed {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border-color: rgba(59, 130, 246, 0.3);
}

.roadmap-item.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-color: rgba(16, 185, 129, 0.3);
}

.roadmap-item:not(.completed):not(.active) {
    background: #ffffff;
    color: #64748b;
    border-color: rgba(0, 0, 128, 0.1);
}

.roadmap-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 128, 0.2);
}

.roadmap-item.completed:hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
}

.roadmap-item.active:hover {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
}

.roadmap-icon {
    font-size: 20px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    line-height: 1;
    text-align: center;
    border: none;
    outline: none;
    background: none;
    box-shadow: none;
}

.roadmap-text h5 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
    font-family: 'Inter', sans-serif;
}

.roadmap-text p {
    font-size: 12px;
    margin: 0;
    opacity: 0.9;
    line-height: 1.3;
    font-family: 'Inter', sans-serif;
}

/* What We Do Content - Mobile-First Redesign */
.services-content {
    padding: clamp(20px, 5vw, 28px);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: clamp(16px, 4vw, 20px);
    margin: clamp(12px, 3vw, 16px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    height: calc(100% - 50px);
    overflow-y: auto;
    
    /* Mobile-first optimization */
    @media (max-width: 768px) {
        height: auto;
        min-height: calc(100% - 40px);
        max-height: calc(100% - 40px);
        overflow-y: auto;
        padding: clamp(24px, 6vw, 32px);
        margin: clamp(16px, 4vw, 20px);
        border-radius: clamp(20px, 5vw, 24px);
    }
    
    @media (max-width: 480px) {
        padding: clamp(20px, 5vw, 28px);
        margin: clamp(14px, 3.5vw, 18px);
    }
    
    /* Desktop optimization - proper sizing for window fit */
    @media (min-width: 1025px) {
        height: calc(100% - 60px);
        min-height: calc(100% - 60px);
        max-height: calc(100% - 60px);
        overflow-y: visible;
        padding: 15px;
        margin: 8px;
    }
}

.services-header {
    text-align: center;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .services-header {
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .services-header {
        margin-bottom: 10px;
    }
}

.services-header h2 {
    font-size: 28px;
    font-family: 'Inter', sans-serif;
    color: #000080;
    margin-bottom: 8px;
    font-weight: 900;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    line-height: 1.2;
}

.services-subtitle {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #606060;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 1.4;
}

.services-overview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    min-height: auto;
    padding-top: 10px;
    overflow: visible;
}

@media (max-width: 768px) {
    .services-overview {
        padding-top: 5px;
    }
}

@media (max-width: 480px) {
    .services-overview {
        padding-top: 3px;
    }
}

/* Core Capabilities Section - Mobile-First */
.service-features {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: clamp(20px, 5vw, 24px);
    padding: clamp(28px, 7vw, 36px);
    border: 2px solid rgba(0, 0, 128, 0.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-top: clamp(20px, 5vw, 28px);
    height: auto;
    min-height: auto;
    overflow: visible;
    
    /* Mobile-first service features */
    @media (max-width: 768px) {
        padding: clamp(32px, 8vw, 40px);
        border-radius: clamp(24px, 6vw, 28px);
        margin-top: clamp(24px, 6vw, 32px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    }
    
    @media (max-width: 480px) {
        padding: clamp(28px, 7vw, 36px);
        margin-top: clamp(20px, 5vw, 28px);
    }
    
    /* Desktop optimization - compact layout */
    @media (min-width: 1025px) {
        padding: 20px;
        margin-top: 15px;
        border-radius: 16px;
    }
}

/* Responsive service features */
@media (max-width: 1024px) {
    .service-features {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    .service-features {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .service-features {
        padding: 10px;
    }
}

@media (max-width: 768px) {
    .service-features {
        padding: 20px;
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .service-features {
        padding: 15px;
        margin-top: 0;
    }
}

.service-features h4 {
    font-size: 24px;
    color: #1a202c;
    margin-bottom: 25px;
    font-weight: 800;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 5vw, 28px);
    height: calc(100% - 100px);
    overflow-y: auto;
    padding: clamp(24px, 6vw, 32px);
    
    /* Mobile-first features grid */
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: clamp(24px, 6vw, 32px);
        padding: clamp(28px, 7vw, 36px);
        height: auto;
        overflow-y: visible;
    }
    
    @media (max-width: 480px) {
        gap: clamp(20px, 5vw, 28px);
        padding: clamp(20px, 5vw, 28px);
    }
    
    /* Desktop optimization - proper sizing for window fit */
    @media (min-width: 1025px) {
        height: calc(100% - 80px);
        min-height: calc(100% - 80px);
        max-height: calc(100% - 80px);
        overflow-y: visible;
        gap: 16px;
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .features-grid {
        gap: 15px;
        padding: 15px;
    }
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .service-features {
        padding: 15px;
    }
    
    .feature-item {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }
    
    .feature-item {
        padding: 8px;
    }
}

.feature-item {
    background: #ffffff;
    padding: clamp(24px, 6vw, 32px);
    border-radius: clamp(16px, 4vw, 20px);
    border: 2px solid rgba(0, 0, 128, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: clamp(120px, 25vw, 160px);
    overflow: visible;
    
    /* Mobile-first feature items */
    @media (max-width: 768px) {
        padding: clamp(28px, 7vw, 36px);
        border-radius: clamp(20px, 5vw, 24px);
        min-height: clamp(140px, 28vw, 180px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    @media (max-width: 480px) {
        padding: clamp(24px, 6vw, 32px);
        min-height: clamp(120px, 25vw, 160px);
    }
    
    /* Desktop optimization - compact layout */
    @media (min-width: 1025px) {
        padding: 16px;
        min-height: 100px;
        border-radius: 12px;
    }
}

@media (max-width: 768px) {
    .feature-item {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .feature-item {
        padding: 8px;
    }
}

.feature-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 128, 0.2);
}

.feature-icon {
    font-size: 32px;
    margin-bottom: 15px;
    color: #667eea;
}

@media (max-width: 768px) {
    .feature-icon {
        font-size: 28px;
        margin-bottom: 12px;
    }
}

@media (max-width: 480px) {
    .feature-icon {
        font-size: 24px;
        margin-bottom: 8px;
    }
}

.feature-item h5 {
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
    .feature-item h5 {
        font-size: 14px;
        margin-bottom: 6px;
    }
}

@media (max-width: 480px) {
    .feature-item h5 {
        font-size: 12px;
        margin-bottom: 4px;
    }
}

.feature-item p {
    font-size: 13px;
    color: #4a5568;
    margin: 0;
    line-height: 1.4;
    font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
    .feature-item p {
        font-size: 12px;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .feature-item p {
        font-size: 10px;
        line-height: 1.2;
    }
}

/* Team Window Content - Direct Integration */
#team-window .window-content {
    padding: 20px;
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    height: calc(100% - 60px);
    overflow-y: auto;
    background: var(--white);
}

/* Remove bottom border from team window */
#team-window {
    border-bottom: none !important;
    background: var(--white);
}

/* Hide scrollbar for team window */
#team-window .window-content::-webkit-scrollbar {
    display: none;
}

#team-window .window-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.team-header {
    text-align: center;
    margin-bottom: 20px;
    background: var(--white);
}

.team-header h2 {
    font-size: 28px;
    font-family: 'Inter', sans-serif;
    color: #000080;
    margin-bottom: 10px;
    font-weight: 900;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    line-height: 1.2;
}

.team-subtitle {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #606060;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 1.4;
}

.team-member-card {
    padding: clamp(20px, 5vw, 28px);
    border-radius: clamp(16px, 4vw, 20px);
    background: var(--white);
    border: 2px solid rgba(0, 0, 128, 0.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: clamp(20px, 5vw, 28px);
    min-height: clamp(200px, 35vw, 280px);
    
    /* Mobile-first team member cards */
    @media (max-width: 768px) {
        padding: clamp(24px, 6vw, 32px);
        border-radius: clamp(20px, 5vw, 24px);
        min-height: clamp(220px, 38vw, 300px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        margin-bottom: clamp(24px, 6vw, 32px);
    }
    
    @media (max-width: 480px) {
        padding: clamp(20px, 5vw, 28px);
        min-height: clamp(200px, 35vw, 280px);
        margin-bottom: clamp(20px, 5vw, 28px);
    }
}

.team-member-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #000080, #4040a0);
    transition: width 0.3s ease;
}

.team-member-card:hover::after {
    width: 90%;
}

.team-member-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 128, 0.2);
}

.member-header {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .member-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

.member-avatar {
    position: relative;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.member-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.status-indicator {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
}

.status-indicator.online {
    background: #10b981;
}

.member-info h3 {
    font-size: 22px;
    color: #1a1a1a;
    margin-bottom: 6px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.member-role {
    font-size: 15px;
    color: #667eea;
    margin-bottom: 8px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
}

.member-handle {
    font-size: 13px;
    color: #888;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    margin-bottom: 0;
}

.status-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #10b981;
    font-weight: 600;
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}

.status-link:hover {
    color: #059669;
    transform: translateY(-1px);
}

.status-dot {
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.member-details {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 20px;
}

.member-bio {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

.member-skills {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.skill-tag {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
}

.member-social {
    margin-top: 15px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.social-icon {
    font-size: 16px;
    font-weight: bold;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(20px, 5vw, 28px);
    margin-top: clamp(20px, 5vw, 28px);
    padding: clamp(24px, 6vw, 32px);
    height: calc(100% - 120px);
    overflow-y: auto;
    background: var(--white);
    
    /* Mobile-first team grid */
    @media (max-width: 1024px) {
        grid-template-columns: 1fr 1fr;
        gap: clamp(24px, 6vw, 32px);
        padding: clamp(28px, 7vw, 36px);
    }
    
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: clamp(28px, 7vw, 36px);
        padding: clamp(32px, 8vw, 40px);
        height: auto;
        overflow-y: visible;
    }
    
    @media (max-width: 480px) {
        gap: clamp(24px, 6vw, 32px);
        padding: clamp(28px, 7vw, 36px);
    }
}

/* Responsive team grid */
@media (max-width: 1024px) {
    .team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 18px; /* Added appropriate padding for tablet */
    }
    
    #team-window .window-content {
        padding: 15px;
    }
    
    .team-member-card {
        padding: 12px;
        margin-bottom: 12px;
    }
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 15px; /* Added appropriate padding for mobile */
    }
    
    #team-window .window-content {
        padding: 12px;
    }
    
    .team-member-card {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .member-header {
        margin-bottom: 12px;
    }
    
    .member-avatar {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    #team-window .window-content {
        padding: 10px;
    }
    
    .team-header {
        margin-bottom: 15px;
    }
    
    .team-header h2 {
        font-size: 24px;
    }
    
    .team-grid {
        padding: 12px; /* Added appropriate padding for small mobile */
    }
    
    .team-member-card {
        padding: 8px;
        margin-bottom: 8px;
    }
    
    .member-header {
        margin-bottom: 10px;
        gap: 8px;
    }
    
    .member-avatar {
        width: 55px;
        height: 55px;
    }
}

@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: clamp(8px, 2vw, 15px);
    }
}

/* Desktop optimization for team grid */
@media (min-width: 1025px) {
    .team-grid {
        height: calc(100% - 80px);
        min-height: calc(100% - 80px);
        max-height: calc(100% - 80px);
        overflow-y: visible;
        gap: 16px;
        padding: 16px;
        margin-top: 12px;
    }
}

.team-member {
    background: #f0f0f0;
    padding: 15px;
    border: 2px solid #c0c0c0;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
}

.team-member:hover {
    background: #e0e0e0;
    border-color: #808080;
    transform: translateY(-2px);
}

.member-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.member-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.team-member h3 {
    font-size: 18px;
    color: #000080;
    margin-bottom: 5px;
}

.team-member p {
    font-size: 14px;
    color: #404040;
    margin-bottom: 15px;
}

.member-status {
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 8px;
    display: inline-block;
}

.member-status.online {
    background: #00ff00;
    color: #000000;
    transition: all 0.2s ease;
}

.member-status.online:hover {
    background: #00dd00;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 255, 0, 0.3);
}

.member-status.away {
    background: #ffff00;
    color: #000000;
}

/* Start Menu */
.start-menu {
    position: fixed;
    bottom: clamp(36px, 8vw, 40px);
    left: clamp(8px, 2vw, 10px);
    background: #c0c0c0;
    border: clamp(2px, 0.5vw, 3px) solid #ffffff;
    border-right: clamp(2px, 0.5vw, 3px) solid #808080;
    border-bottom: clamp(2px, 0.5vw, 3px) solid #808080;
    padding: clamp(8px, 2vw, 10px);
    z-index: 200;
    min-width: clamp(160px, 40vw, 200px);
    display: none;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

.start-menu.show {
    display: block;
}

.start-menu-header {
    display: flex;
    align-items: center;
    gap: clamp(6px, 2vw, 10px);
    padding: clamp(6px, 1.5vw, 8px) clamp(8px, 2vw, 12px);
    background: #000080;
    color: #ffffff;
    margin: clamp(-8px, -2vw, -10px) clamp(-8px, -2vw, -10px) clamp(8px, 2vw, 10px) clamp(-8px, -2vw, -10px);
    font-weight: bold;
}

.start-menu-icon {
    width: clamp(18px, 4.5vw, 24px);
    height: clamp(18px, 4.5vw, 24px);
    object-fit: contain;
    filter: brightness(1.2) contrast(1.1);
}

.start-menu-items {
    display: flex;
    flex-direction: column;
}

.start-menu-item {
    display: flex;
    align-items: center;
    gap: clamp(6px, 2vw, 10px);
    padding: clamp(6px, 1.5vw, 8px) clamp(8px, 2vw, 12px);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.1s ease;
    position: relative;
}

.start-menu-item:hover {
    background: #000080;
    color: #ffffff;
    border-color: #000080;
}

.item-icon {
    font-size: clamp(12px, 3vw, 16px);
    width: clamp(15px, 4vw, 20px);
    text-align: center;
}

.item-text {
    flex: 1;
}

.item-arrow {
    font-size: clamp(9px, 2.5vw, 12px);
    color: #808080;
}

.start-menu-separator {
    height: clamp(1px, 0.5vw, 2px);
    background: #808080;
    margin: clamp(3px, 1vw, 5px) 0;
}

/* AI Credit Styling */
.start-menu-item.ai-credit {
    cursor: default;
    opacity: 0.7;
    font-size: clamp(9px, 2.5vw, 12px);
    padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 12px);
    color: #606060;
}

.start-menu-item.ai-credit:hover {
    background: transparent;
    color: #606060;
    border-color: transparent;
}

/* Start Menu Submenus */
.start-menu-item {
    position: relative;
}

.submenu {
    position: absolute;
    left: 100%;
    top: 0;
    background: #c0c0c0;
    border: clamp(1px, 0.5vw, 2px) solid #ffffff;
    border-right: clamp(1px, 0.5vw, 2px) solid #808080;
    border-bottom: clamp(1px, 0.5vw, 2px) solid #808080;
    padding: clamp(3px, 1vw, 5px) 0;
    min-width: clamp(140px, 35vw, 180px);
    display: none;
    z-index: 250;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}

.programs-item:hover .programs-submenu {
    display: block;
}

.submenu-item {
    display: flex;
    align-items: center;
    gap: clamp(6px, 2vw, 10px);
    padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 15px);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.1s ease;
    color: #000000;
}

.submenu-item:hover {
    background: #000080;
    color: #ffffff;
    border-color: #000080;
}

.submenu-icon {
    font-size: clamp(10px, 2.5vw, 14px);
    width: clamp(14px, 3.5vw, 18px);
    text-align: center;
}

.submenu-text {
    flex: 1;
    font-size: clamp(10px, 2.5vw, 14px);
}

/* Taskbar */
.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(36px, 8vw, 40px);
    background: linear-gradient(90deg, #c0c0c0, #d0d0d0);
    border-top: clamp(2px, 0.5vw, 3px) solid #ffffff;
    display: flex;
    align-items: center;
    padding: 0 clamp(8px, 2vw, 10px);
    gap: clamp(10px, 3vw, 15px);
    z-index: 100;
}

.start-button {
    background: linear-gradient(90deg, #008000, #00a000);
    color: #ffffff;
    padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 16px);
    border: clamp(1px, 0.5vw, 2px) solid #ffffff;
    border-right: clamp(1px, 0.5vw, 2px) solid #004000;
    border-bottom: clamp(1px, 0.5vw, 2px) solid #004000;
    font-weight: bold;
    cursor: pointer;
    font-size: clamp(12px, 2.5vw, 14px);
    transition: all 0.1s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.5vw, 8px);
}

.start-button:hover {
    background: linear-gradient(90deg, #00a000, #00c000);
}

.start-button:active {
    border: 2px solid #004000;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translate(1px, 1px);
}

.start-icon {
    width: clamp(16px, 4vw, 20px);
    height: clamp(16px, 4vw, 20px);
    object-fit: contain;
    filter: brightness(1.2) contrast(1.1);
}

.start-text {
    font-weight: bold;
}

.taskbar-items {
    display: flex;
    gap: clamp(6px, 2vw, 10px);
    flex: 1;
    overflow-x: auto;
    margin-left: clamp(6px, 2vw, 10px);
}

.taskbar-item {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.5vw, 8px);
    padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 16px);
    background: #a0a0a0;
    border: clamp(1px, 0.5vw, 2px) solid #ffffff;
    border-right: clamp(1px, 0.5vw, 2px) solid #808080;
    border-bottom: clamp(1px, 0.5vw, 2px) solid #808080;
    cursor: pointer;
    font-size: clamp(12px, 3vw, 16px);
    font-weight: bold;
    transition: all 0.1s ease;
    min-width: clamp(90px, 20vw, 120px);
    max-width: clamp(150px, 35vw, 200px);
    white-space: nowrap;
    flex-shrink: 0;
    color: #404040;
}

.taskbar-item:hover {
    background: #e0e0e0;
}

.taskbar-item.active {
    background: #e0e0e0;
    border-color: #000080;
}

.taskbar-item.minimized {
    background: #a0a0a0;
    color: #404040;
}

/* Mobile and Tablet Taskbar - Hide folder tabs on mobile/tablet */
@media (max-width: 1024px) {
    .taskbar-items {
        display: none !important;
    }
    
    /* Adjust taskbar spacing for mobile/tablet */
    .taskbar {
        gap: 10px;
        padding: 0 8px;
        justify-content: space-between;
    }
    
    /* Make start button more prominent on mobile/tablet */
    .start-button {
        padding: 10px 18px;
        font-size: 16px;
    }
    
    /* Adjust browser button for mobile/tablet */
    .browser-button {
        padding: 8px 14px;
        font-size: 14px;
    }
    
    /* Ensure taskbar-right stays on the right */
    .taskbar-right {
        margin-left: auto;
    }
}

.taskbar-icon {
    font-size: 14px;
}

.taskbar-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.taskbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.browser-button {
    background: #c0c0c0;
    border: clamp(1px, 0.5vw, 2px) solid #ffffff;
    border-right: clamp(1px, 0.5vw, 2px) solid #808080;
    border-bottom: clamp(1px, 0.5vw, 2px) solid #808080;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: clamp(90px, 20vw, 120px);
    max-width: clamp(150px, 35vw, 200px);
    height: clamp(28px, 7vw, 32px);
    padding: 0;
}

.browser-button a {
    color: #000000;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    transition: all 0.1s ease;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.browser-button:hover {
    background: #e0e0e0;
}

.browser-button:active {
    border: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translate(1px, 1px);
}

.browser-icon {
    font-size: 14px;
}

.browser-text {
    white-space: nowrap;
}

.clock {
    background: #c0c0c0;
    padding: 8px 16px;
    border: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    font-weight: bold;
    font-size: 16px;
    min-width: 80px;
    text-align: center;
}

/* Context Menu */
.context-menu {
    position: fixed;
    background: #c0c0c0;
    border: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    padding: 5px 0;
    z-index: 300;
    display: none;
    min-width: 150px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}

.context-menu.show {
    display: block;
}

.context-menu-item {
    padding: 8px 20px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.1s ease;
}

.context-menu-item:hover {
    background: #000080;
    color: #ffffff;
}

.context-menu-separator {
    height: 1px;
    background: #808080;
    margin: 5px 0;
}

/* Responsive Design - Tablet and Mobile */

/* Tablet Styles (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Desktop Icons */
    .desktop-icons {
        gap: 25px;
        width: 100px;
    }
    
    .desktop-icon {
        min-width: 70px;
        padding: 10px;
    }
    
    .icon-image {
        font-size: 40px;
    }
    
    .icon-label {
        font-size: 13px;
    }
    
    /* Folder Windows */
    .folder-window {
        width: 90vw !important;
        height: 80vh !important;
        max-width: 800px;
        max-height: 600px;
    }
    
    /* Hero Content */
    .hero-content {
        padding: 20px 15px;
        margin: 8px;
    }
    
    .hero-main {
        gap: 20px;
        margin-bottom: 25px;
    }
    
    .flvme-title {
        font-size: 44px;
    }
    
    .hero-subtitle {
        font-size: 22px;
    }
    
    .hero-description {
        font-size: 15px;
    }
    
    .hero-logo {
        width: 80px;
        height: 80px;
    }
    
    /* Projects Page - Optimized for tablet */
    .project-showcase {
        grid-template-columns: 1fr;
        gap: 15px;
        height: auto;
        min-height: calc(100% - 80px);
        overflow-y: visible;
    }
    
    .project-main {
        padding: 15px;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: visible;
    }
    
    .project-visual {
        height: 120px;
        margin-bottom: 15px;
    }
    
    .project-details h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    
    .project-description {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 15px;
        max-height: none;
        overflow: visible;
    }
    
    .project-metrics {
        gap: 15px;
        margin-bottom: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .metric {
        min-width: 60px;
        padding: 10px;
    }
    
    .metric-value {
        font-size: 16px;
    }
    
    .metric-label {
        font-size: 11px;
    }
    
    .project-roadmap {
        padding: 20px;
        max-height: none;
        overflow-y: visible;
        margin-top: 20px;
    }
    
    .roadmap-items {
        gap: 15px;
    }
    
    .roadmap-item {
        padding: 15px;
    }
    
    .roadmap-text h5 {
        font-size: 16px;
    }
    
    .roadmap-text p {
        font-size: 12px;
    }
    
    /* What We Do Page - Optimized for tablet */
    .service-features {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        padding: 20px;
        margin-top: 0;
        height: auto;
        min-height: auto;
        overflow: visible;
        border-radius: 16px;
    }
    
    .service-features h4 {
        font-size: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    .feature-item {
        padding: 18px;
        min-height: auto;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        background: #ffffff;
        text-align: center;
    }
    
    .feature-icon {
        font-size: 28px;
        margin-bottom: 12px;
    }
    
    .feature-item h5 {
        font-size: 15px;
        margin-bottom: 8px;
        color: #1a1a1a;
    }
    
    .feature-item p {
        font-size: 12px;
        line-height: 1.4;
        max-height: none;
        overflow: visible;
        color: #4a5568;
    }
    
    /* Team Page - Optimized for tablet */
    .team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 15px;
        height: auto;
        overflow-y: visible;
    }
    
    .team-member-card {
        padding: 20px;
        min-height: auto;
        max-height: none;
        overflow: visible;
    }
    
    .member-header {
        gap: 15px;
        margin-bottom: 20px;
        flex-direction: row;
        align-items: center;
    }
    
    .member-avatar {
        width: 70px;
        height: 70px;
    }
    
    .member-info h3 {
        font-size: 18px;
        margin-bottom: 6px;
    }
    
    .member-role {
        font-size: 14px;
        margin-bottom: 6px;
        line-height: 1.3;
    }
    
    .member-handle {
        font-size: 11px;
    }
    
    .member-details {
        padding-top: 20px;
    }
    
    .member-bio {
        font-size: 14px;
        margin-bottom: 20px;
        max-height: none;
        overflow: visible;
        line-height: 1.5;
    }
    
    .member-skills {
        gap: 8px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
    
    .skill-tag {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .social-link {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    /* Loading Screen */
    .loading-content {
        max-width: 80vw;
        padding: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .loading-bar {
        width: 350px;
        height: 18px;
    }
    
    .loading-text {
        font-size: 20px;
    }
}

/* Mobile Styles (up to 767px) */
@media (max-width: 767px) {
    /* Desktop Icons */
    .desktop-icons {
        gap: 20px;
        width: 80px;
        top: 15px;
        left: 15px;
    }
    
    .desktop-icon {
        min-width: 60px;
        padding: 8px;
    }
    
    .icon-image {
        font-size: 32px;
    }
    
    .icon-label {
        font-size: 11px;
    }
    
    /* Folder Windows */
    .folder-window {
        width: 95vw !important;
        height: 85vh !important;
        max-width: none;
        max-height: none;
    }
    
    /* Projects window - taller on mobile */
    #projects-window {
        height: 90vh !important;
    }
    
    .window-header {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .window-controls .control {
        width: 20px;
        height: 20px;
        font-size: 14px;
        min-width: 20px;
        min-height: 20px;
    }
    
    /* Hero Content */
    .hero-content {
        padding: 15px 12px;
        margin: 5px;
        height: calc(100% - 10px);
    }
    
    .hero-main {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 20px;
        width: 100%;
    }
    
    .hero-left {
        text-align: center;
        align-items: center;
    }
    
    .hero-right {
        justify-content: center;
    }
    
    .flvme-title {
        font-size: 36px;
        margin-bottom: 15px;
        letter-spacing: 1px;
    }
    
    .hero-subtitle {
        font-size: 20px;
        margin-bottom: 15px;
    }
    
    .hero-description {
        font-size: 14px;
        margin-bottom: 20px;
        line-height: 1.4;
    }
    
    .hero-logo {
        width: 70px;
        height: 70px;
        margin-bottom: 15px;
    }
    
    .hero-buttons {
        gap: 12px;
        margin-bottom: 15px;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    
    .modern-button {
        padding: 12px 24px;
        font-size: 14px;
        min-width: 140px;
    }
    
    .hero-stats {
        gap: 12px;
    }
    
    .stat-item {
        padding: 12px 15px;
        min-width: 90px;
    }
    
    .stat-number {
        font-size: 24px;
    }
    
    .stat-label {
        font-size: 13px;
    }
    
    .hero-timeline {
        gap: 10px;
        flex-direction: column;
        align-items: center;
    }
    
    .timeline-item {
        padding: 12px 15px;
        min-width: 140px;
    }
    
    /* Projects Page - Keep Consistent Layout */
    .projects-content {
        padding: clamp(8px, 2vw, 10px);
        margin: clamp(3px, 1vw, 5px);
    }
    
    .project-showcase {
        gap: clamp(10px, 3vw, 15px);
    }
    
    /* Keep all project content visible and consistent */
    .project-main,
    .project-visual,
    .project-details,
    .project-metrics,
    .project-roadmap {
        /* Maintain consistent styling across all screen sizes */
    }
    
    /* What We Do Page - Mobile Optimized */
    .services-content {
        padding: 15px 10px;
        margin: 5px;
        height: auto;
        min-height: calc(100% - 10px);
        overflow: visible;
    }
    
    .services-header {
        margin-bottom: 20px;
        text-align: center;
    }
    
    .services-header h2 {
        font-size: 28px;
        margin-bottom: 10px;
    }
    
    .services-subtitle {
        font-size: 16px;
    }
    
    .service-features {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        padding: 20px;
        margin-top: 0;
        height: auto;
        min-height: auto;
        overflow: visible;
        border-radius: 16px;
    }
    
    .service-features h4 {
        font-size: 22px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    .feature-item {
        padding: 20px;
        min-height: auto;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        background: #ffffff;
        text-align: center;
    }
    
    .feature-icon {
        font-size: 32px;
        margin-bottom: 15px;
    }
    
    .feature-item h5 {
        font-size: 16px;
        margin-bottom: 10px;
        color: #1a1a1a;
    }
    
    .feature-item p {
        font-size: 14px;
        line-height: 1.5;
        max-height: none;
        overflow: visible;
        color: #4a5568;
    }
    
    /* Team Page - Mobile-First Redesign */
    .team-content {
        padding: clamp(20px, 5vw, 28px);
        margin: clamp(12px, 3vw, 16px);
        height: auto;
        min-height: calc(100% - 40px);
        max-height: calc(100% - 40px);
        overflow-y: auto;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        border-radius: clamp(16px, 4vw, 20px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        
        /* Mobile-first team content */
        @media (max-width: 768px) {
            padding: clamp(24px, 6vw, 32px);
            margin: clamp(16px, 4vw, 20px);
            border-radius: clamp(20px, 5vw, 24px);
        }
        
        @media (max-width: 480px) {
            padding: clamp(20px, 5vw, 28px);
            margin: clamp(14px, 3.5vw, 18px);
        }
        
        /* Desktop optimization - proper sizing for window fit */
        @media (min-width: 1025px) {
            height: calc(100% - 60px);
            min-height: calc(100% - 60px);
            max-height: calc(100% - 60px);
            overflow-y: visible;
            padding: 15px;
            margin: 8px;
        }
    }
    
    .team-header {
        margin-bottom: 20px;
        text-align: center;
    }
    
    .team-header h2 {
        font-size: 28px;
        margin-bottom: 10px;
    }
    
    .team-subtitle {
        font-size: 16px;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 20px;
        height: auto;
        min-height: auto;
        overflow-y: visible;
    }
    
    .team-member-card {
        padding: 20px;
        max-height: none;
        overflow: visible;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.9);
    }
    
    .member-header {
        gap: 15px;
        margin-bottom: 20px;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .member-avatar {
        width: 80px;
        height: 80px;
        margin: 0 auto 15px;
        border-radius: 50%;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
    
    .member-info h3 {
        font-size: 22px;
        margin-bottom: 8px;
        color: #1a1a1a;
    }
    
    .member-role {
        font-size: 16px;
        margin-bottom: 8px;
        color: #667eea;
        font-weight: 600;
    }
    
    .member-handle {
        font-size: 12px;
        color: #888;
    }
    
    .member-details {
        padding-top: 20px;
        text-align: center;
    }
    
    .member-bio {
        font-size: 14px;
        margin-bottom: 20px;
        max-height: none;
        overflow: visible;
        line-height: 1.6;
        color: #666;
    }
    
    .member-skills {
        gap: 8px;
        margin-bottom: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .skill-tag {
        padding: 6px 12px;
        font-size: 11px;
        border-radius: 20px;
    }
    
    .social-link {
        padding: 12px 20px;
        font-size: 13px;
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    }
    
    /* Loading Screen */
    .loading-content {
        max-width: 90vw;
        padding: 15px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .loading-bar {
        width: 280px;
        height: 16px;
        margin: 15px auto;
    }
    
    .loading-text {
        font-size: 18px;
        margin-top: 15px;
    }
    
    /* Center Branding */
    .flvme-text-center {
        font-size: 80px;
        letter-spacing: 2px;
    }
    
    /* Taskbar */
    .taskbar {
        height: 36px;
        padding: 0 8px;
    }
    
    .start-button {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .start-icon {
        width: 16px;
        height: 16px;
    }
    
    .taskbar-item {
        padding: 6px 12px;
        font-size: 13px;
        min-width: 100px;
    }
    
    .clock {
        font-size: 13px;
        padding: 6px 12px;
    }
}

/* Small Mobile Styles (up to 480px) */
@media (max-width: 480px) {
    .folder-window {
        width: 98vw !important;
        height: 90vh !important;
    }
    
    /* Projects window - even taller on small mobile */
    #projects-window {
        height: 95vh !important;
    }
    
    .hero-content {
        padding: 12px 10px;
    }
    
    .flvme-title {
        font-size: 32px;
    }
    
    .hero-subtitle {
        font-size: 18px;
    }
    
    .hero-description {
        font-size: 13px;
    }
    
    .hero-logo {
        width: 60px;
        height: 60px;
    }
    
    .modern-button {
        padding: 10px 20px;
        font-size: 13px;
        min-width: 120px;
    }
    
    /* Projects Page - Extra Small Mobile */
    .project-main {
        padding: 10px;
        max-height: 35%;
    }
    
    .project-visual {
        height: 70px;
    }
    
    .project-details h3 {
        font-size: 15px;
    }
    
    .project-description {
        font-size: 10px;
        max-height: 35px;
    }
    
    .project-roadmap {
        padding: 10px;
        max-height: 60%;
    }
    
    /* What We Do Page - Extra Small Mobile */
    .feature-item {
        padding: 10px;
        min-height: 60px;
    }
    
    .feature-item h5 {
        font-size: 12px;
    }
    
    .feature-item p {
        font-size: 10px;
        max-height: 30px;
    }
    
    /* Team Page - Extra Small Mobile */
    .team-member-card {
        padding: 10px;
        max-height: 40%;
    }
    
    .member-avatar {
        width: 50px;
        height: 50px;
    }
    
    .member-info h3 {
        font-size: 14px;
    }
    
    .member-role {
        font-size: 11px;
    }
    
    .member-bio {
        font-size: 10px;
        max-height: 30px;
    }
    
    .loading-bar {
        width: 250px;
        height: 14px;
    }
    
    .loading-text {
        font-size: 16px;
    }
    
    .flvme-text-center {
        font-size: 60px;
        letter-spacing: 1px;
    }
}

/* Landscape Mobile Styles */
@media (max-width: 767px) and (orientation: landscape) {
    .folder-window {
        height: 90vh !important;
    }
    
    .hero-main {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .hero-timeline {
        flex-direction: row;
        gap: 15px;
    }
    
    .team-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Adjust card heights for landscape */
    .project-main {
        max-height: 50%;
    }
    
    .project-roadmap {
        max-height: 45%;
    }
    
    .team-member-card {
        max-height: 50%;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .desktop-icon {
        min-height: 60px;
    }
    
    .modern-button {
        min-height: 44px;
    }
    
    .window-controls .control {
        min-width: 24px;
        min-height: 24px;
    }
    
    .taskbar-item {
        min-height: 36px;
    }
    
    /* Ensure proper touch targets for mobile */
    .project-showcase {
        gap: 20px;
    }
    
    .team-grid {
        gap: 20px;
    }
    
    .feature-item {
        min-height: 80px;
        height: auto;
        overflow: visible;
    }
    
    /* What We Do page touch optimization */
    .services-content {
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    .service-features {
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    .features-grid {
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    /* Enhanced touch controls for snake game */
    .touch-controls {
        display: flex !important;
        gap: 20px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
    }
    
    .touch-btn {
        min-height: 48px;
        min-width: 48px;
        width: 60px !important;
        height: 60px !important;
        font-size: 24px !important;
        border-width: 3px !important;
    }
    
    /* Better touch feedback */
    .touch-btn:active {
        transform: scale(0.9) translate(1px, 1px) !important;
        transition: transform 0.1s ease !important;
    }
}

/* Additional Tablet Optimizations (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Ensure proper spacing and sizing for tablet */
    .project-showcase {
        padding: 0 10px;
    }
    
    .project-main {
        margin-bottom: 15px;
    }
    
    .project-roadmap {
        margin-top: 15px;
    }
    
    /* Hide desktop metrics and show mobile roadmap on tablets */
    .desktop-metrics {
        display: none;
    }
    
    .mobile-roadmap {
        display: block;
    }
    
    /* Hide the full project roadmap section on tablets */
    .project-roadmap {
        display: none;
    }
    
    /* Optimize mobile roadmap for tablets */
    .mobile-roadmap-items {
        gap: clamp(8px, 2.5vw, 10px);
    }
    
    .mobile-roadmap-item {
        padding: clamp(10px, 2.5vw, 14px);
        min-height: clamp(70px, 18vw, 90px);
    }
    
    .mobile-roadmap-icon {
        font-size: clamp(18px, 4.5vw, 22px);
        margin-bottom: clamp(6px, 1.5vw, 8px);
    }
    
    .mobile-roadmap-text h5 {
        font-size: clamp(11px, 2.8vw, 13px);
        margin-bottom: clamp(3px, 0.8vw, 5px);
    }
    
    .mobile-roadmap-text p {
        font-size: clamp(9px, 2.3vw, 11px);
    }
    
    /* What We Do page tablet optimization */
    .services-content {
        padding: 20px;
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    .service-features {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        padding: 25px;
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    .features-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    .feature-item {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 25px;
    }
    
    .team-grid {
        padding: 0 10px;
    }
    
    .team-member-card {
        margin-bottom: 15px;
    }
    
    .features-grid {
        padding: 0 10px;
    }
}

/* Enhanced Mobile Optimizations (up to 767px) */
@media (max-width: 767px) {
    /* Ensure content doesn't overflow on mobile */
    .window-content {
        padding: 10px;
    }
    
    /* Projects page - keep consistent layout */
    .projects-content {
        padding: clamp(8px, 2vw, 10px);
        margin: clamp(3px, 1vw, 5px);
    }
    
    .project-showcase {
        gap: clamp(10px, 3vw, 15px);
    }
    
    /* What We Do page mobile optimization */
    .services-content {
        padding: 8px 5px;
        margin: 2px;
    }
    
    .service-features {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        padding: 15px 10px;
    }
    
    .features-grid {
        grid-template-columns: 1fr 1fr;
        padding: 0 5px;
        gap: 10px;
    }
    
    /* Team page mobile optimization */
    .team-content {
        padding: 8px 5px;
        margin: 2px;
    }
    
    .team-grid {
        padding: 0 5px;
        gap: 10px;
    }
    
    .team-member-card {
        padding: 10px;
        margin-bottom: 10px;
    }
}

/* Extra Small Mobile Optimizations (up to 480px) */
@media (max-width: 480px) {
    /* Further reduce padding and margins for very small screens */
    .window-content {
        padding: 6px;
    }
    
    .projects-content,
    .services-content,
    .team-content {
        padding: clamp(8px, 2vw, 10px);
        margin: clamp(3px, 1vw, 5px);
    }
    
    .project-showcase,
    .features-grid,
    .team-grid {
        gap: clamp(10px, 3vw, 15px);
    }
    
    .features-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .project-main,
    .feature-item,
    .team-member-card {
        padding: clamp(12px, 3vw, 15px);
        margin-bottom: clamp(10px, 3vw, 15px);
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    .project-roadmap {
        padding: 6px;
        margin-top: 6px;
    }
    
    .service-features {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        padding: 10px 6px;
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    /* Mobile roadmap optimizations for very small screens */
    .mobile-roadmap-items {
        gap: clamp(4px, 1.5vw, 6px);
    }
    
    .mobile-roadmap-item {
        padding: clamp(6px, 1.5vw, 8px);
        min-height: clamp(50px, 12vw, 60px);
    }
    
    .mobile-roadmap-icon {
        font-size: clamp(14px, 3.5vw, 16px);
        margin-bottom: clamp(2px, 0.8vw, 4px);
    }
    
    .mobile-roadmap-text h5 {
        font-size: clamp(9px, 2.2vw, 10px);
        margin-bottom: clamp(1px, 0.4vw, 2px);
    }
    
    .mobile-roadmap-text p {
        font-size: clamp(7px, 1.8vw, 8px);
    }
    
    /* Project-specific optimizations for very small screens */
    .project-showcase {
        gap: clamp(6px, 1.5vw, 10px);
    }
    
    .project-main {
        padding: clamp(6px, 1.5vw, 8px);
        max-height: none;
        height: auto;
        overflow: visible;
    }
    
    .project-visual {
        height: clamp(40px, 10vw, 60px);
        margin-bottom: clamp(4px, 1vw, 6px);
    }
    
    .project-details h3 {
        font-size: clamp(12px, 3vw, 13px);
        margin-bottom: clamp(3px, 0.8vw, 5px);
    }
    
    .project-description {
        font-size: clamp(8px, 1.8vw, 10px);
        margin-bottom: clamp(4px, 1vw, 6px);
        line-height: 1.2;
    }
    
    /* Ensure text remains readable on very small screens */
    .projects-header h2,
    .services-header h2,
    .team-header h2 {
        font-size: 18px;
        margin-bottom: 4px;
    }
    
    .projects-subtitle,
    .services-subtitle,
    .team-subtitle {
        font-size: 11px;
    }
    
    .project-details h3 {
        font-size: 13px;
    }
    
    .feature-item h5 {
        font-size: 10px;
    }
    
    .member-info h3 {
        font-size: 12px;
    }
}

/* Landscape Mobile Optimizations */
@media (max-width: 767px) and (orientation: landscape) {
    /* Optimize for landscape orientation on mobile */
    .folder-window {
        height: 85vh !important;
    }
    
    /* Adjust card heights for landscape */
    .project-main {
        max-height: 45%;
    }
    
    .project-roadmap {
        max-height: 50%;
    }
    
    .team-member-card {
        max-height: 45%;
    }
    
    .feature-item {
        min-height: 65px;
        height: auto;
        overflow: visible;
    }
    
    /* Ensure proper spacing in landscape */
    .project-showcase,
    .features-grid,
    .team-grid {
        gap: 15px;
    }
    
    /* What We Do page landscape optimization */
    .services-content {
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    .service-features {
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    
    .features-grid {
        height: auto;
        min-height: auto;
        overflow: visible;
    }
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp rendering on high DPI displays */
    .folder-window {
        border-width: 2px;
    }
    
    .window-controls .control {
        border-width: 1px;
    }
    
    .taskbar {
        border-top-width: 2px;
    }
}

/* ========================================
   COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   ======================================== */

/* Mobile First Approach - Base styles for mobile */
@media (max-width: 480px) {
    /* Global mobile optimizations */
    body {
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* Optimize touch targets */
    .desktop-icon,
    .control,
    .taskbar-item,
    .start-button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Ensure control buttons remain square on mobile */
    .control {
        width: 44px;
        height: 44px;
    }
    
    /* Reduce animations for better performance */
    .crt-overlay,
    .scanlines,
    .screen-texture,
    .crt-glow,
    .color-shift,
    .subtle-grid {
        animation-duration: 0.5s;
        animation-iteration-count: 1;
    }
    
    /* Optimize window positioning */
    .folder-window {
        position: fixed;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        transform: none !important;
        border-radius: 0;
    }
    
    /* Projects window - full height on mobile */
    #projects-window {
        height: 100vh !important;
    }
    
    /* Full-screen mobile experience */
    .window-header {
        position: sticky;
        top: 0;
        z-index: 1001;
    }
    
    /* Optimize content for mobile */
    .hero-content,
    .projects-content,
    .services-content,
    .team-content {
        padding: 10px;
        margin: 5px;
    }
    
    /* Mobile-optimized typography */
    .flvme-title {
        font-size: clamp(28px, 8vw, 36px);
        line-height: 1.1;
    }
    
    .hero-subtitle {
        font-size: clamp(16px, 4vw, 20px);
        line-height: 1.2;
    }
    
    .hero-description {
        font-size: clamp(12px, 3vw, 14px);
        line-height: 1.4;
    }
}

/* Tablet Optimizations */
@media (min-width: 481px) and (max-width: 768px) {
    /* Tablet-specific adjustments */
    .desktop-icons {
        gap: 20px;
        width: 90px;
    }
    
    .folder-window {
        width: 92vw !important;
        height: 85vh !important;
        max-width: 600px;
        max-height: 500px;
    }
    
    /* Projects window - taller on tablet */
    #projects-window {
        height: 88vh !important;
        max-height: none;
    }
    
    /* Optimize content layout for tablet */
    .hero-main {
        flex-direction: column;
        gap: 20px;
    }
    
    .project-showcase {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .team-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 20px; /* Added appropriate padding for medium screens */
    }
    
    /* Tablet typography */
    .flvme-title {
        font-size: clamp(32px, 6vw, 40px);
    }
    
    .hero-subtitle {
        font-size: clamp(18px, 4vw, 22px);
    }
}

/* Desktop Optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Small desktop adjustments */
    .folder-window {
        width: 90vw !important;
        height: 80vh !important;
        max-width: 800px;
        max-height: 600px;
    }
    
    /* Optimize grid layouts */
    .project-showcase {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
    
    .team-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 25px;
        padding: 22px; /* Added appropriate padding for small desktop */
    }
    
    /* Desktop typography */
    .flvme-title {
        font-size: clamp(36px, 5vw, 44px);
    }
}

/* Large Desktop Optimizations */
@media (min-width: 1025px) {
    /* Large screen optimizations */
    .folder-window {
        width: min(875px, 90vw) !important;
        height: min(625px, 80vh) !important;
    }
    
    /* Enhanced desktop experience */
    .hero-main {
        flex-direction: row;
        gap: 30px;
    }
    
    .project-showcase {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    
    .team-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
        padding: 25px; /* Added appropriate padding for large desktop */
    }
    
    /* Large desktop typography */
    .flvme-title {
        font-size: clamp(40px, 4vw, 52px);
    }
}

/* Landscape Mobile Optimizations */
@media (max-width: 768px) and (orientation: landscape) {
    /* Optimize for landscape mobile */
    .folder-window {
        height: 85vh !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .desktop-icons {
        top: 5px;
        left: 5px;
        gap: 10px;
    }
    
    .hero-main {
        flex-direction: row;
        gap: 15px;
    }
    
    .hero-timeline {
        flex-direction: row;
        gap: 15px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Touch-specific optimizations */
    .desktop-icon:hover {
        transform: none;
    }
    
    .control:hover {
        background: var(--gray-light);
    }
    
    .taskbar-item:hover {
        background: var(--gray-light);
    }
    
    /* Larger touch targets */
    .desktop-icon {
        min-height: 50px;
        min-width: 50px;
    }
    
    .control {
        min-height: 44px;
        min-width: 44px;
        width: 44px;
        height: 44px;
    }
    
    /* Disable hover effects on touch devices */
    .feature-item:hover::after,
    .team-member-card:hover::after {
        width: 0;
    }
}

/* Performance Optimizations for All Devices */
@media (prefers-reduced-motion: reduce) {
    /* Reduce motion for accessibility */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .crt-overlay,
    .scanlines,
    .screen-texture,
    .crt-glow,
    .color-shift,
    .subtle-grid {
        animation: none !important;
    }
}

/* Print Optimizations */
@media print {
    /* Hide unnecessary elements for printing */
    .crt-overlay,
    .scanlines,
    .screen-texture,
    .crt-glow,
    .color-shift,
    .subtle-grid,
    .desktop-icons,
    .taskbar,
    .start-menu {
        display: none !important;
    }
    
    /* Ensure content is printable */
    .folder-window {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
        transform: none !important;
    }
    
    .window-header {
        background: #fff !important;
        color: #000 !important;
        border-bottom: 1px solid #000 !important;
    }
    
    .window-content {
        background: #fff !important;
        color: #000 !important;
        overflow: visible !important;
    }
    
    /* Optimize typography for print */
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000 !important;
        background: #fff !important;
    }
}

/* Print Styles */
@media print {
    /* Hide unnecessary elements for printing */
    .crt-overlay,
    .scanlines,
    .screen-texture,
    .crt-glow,
    .color-shift,
    .subtle-grid,
    .desktop-icons,
    .taskbar,
    .start-menu {
        display: none !important;
    }
    
    /* Ensure content is printable */
    .folder-window {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .window-header {
        background: #fff !important;
        color: #000 !important;
        border-bottom: 1px solid #000 !important;
    }
    
    .window-content {
        background: #fff !important;
        color: #000 !important;
    }
}

/* Scrollbar Styling */
.window-content::-webkit-scrollbar {
    width: 16px;
}

.window-content::-webkit-scrollbar-track {
    background: #c0c0c0;
    border: 1px solid #808080;
}

.window-content::-webkit-scrollbar-thumb {
    background: #808080;
    border: 1px solid #404040;
}

.window-content::-webkit-scrollbar-thumb:hover {
    background: #606060;
}

/* Snake Game Icon */
.snake-game-icon .icon-image {
    color: #ff1493;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    font-size: 42px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.snake-game-icon:hover .icon-image {
    color: #ff69b4;
    transform: scale(1.05);
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.7));
}

.snake-game-icon.selected .icon-image {
    color: #ff69b4;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8));
}

/* Snake Game Content */
.snake-game-content {
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
    overflow-y: auto;
}

/* Game Info Display */
.game-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2a2a2a;
    padding: 10px 15px;
    border-radius: 5px;
    border: 2px solid #808080;
    border-right: 2px solid #c0c0c0;
    border-bottom: 2px solid #c0c0c0;
}

.score-display, .high-score {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
}

.score-display span, .high-score span {
    color: #22c55e;
    margin-left: 5px;
}

/* Canvas Container */
.canvas-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    min-height: 400px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

#snake-canvas {
    border: 2px solid #808080;
    background: #000000;
    display: block;
    margin: 0 auto;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.5);
    
    /* Enhanced responsive canvas sizing */
    width: clamp(300px, 80vw, 400px) !important;
    height: clamp(300px, 80vw, 400px) !important;
    max-width: 400px !important;
    max-height: 400px !important;
    
    /* Mobile-first responsive sizing */
    @media (max-width: 480px) {
        width: 300px !important;
        height: 300px !important;
        border-width: 3px;
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
        width: 350px !important;
        height: 350px !important;
        border-width: 2px;
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
        width: 375px !important;
        height: 375px !important;
    }
    
    @media (min-width: 1025px) {
        width: 400px !important;
        height: 400px !important;
    }
    
    /* Performance optimization */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Game Controls */
.game-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.game-controls .retro-button {
    min-width: 70px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: bold;
}

/* Touch Controls for Mobile/Tablet */
.touch-controls {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    gap: 20px; /* Increased from 10px for better spacing */
    align-items: center;
    margin-top: 20px; /* Increased from 10px for better separation */
    margin-bottom: 20px; /* Added bottom margin to prevent overlap */
    padding: 15px; /* Added padding around the entire touch controls area */
}

/* Show touch controls on mobile devices */
@media (max-width: 768px) {
    .touch-controls {
        display: flex !important;
    }
}

.touch-control-row {
    display: flex;
    gap: 20px; /* Increased from 10px for wider button spacing */
    justify-content: center;
    align-items: center; /* Ensure proper vertical alignment */
}

.touch-btn {
    width: 60px;
    height: 60px;
    border: 3px solid #808080;
    border-right: 3px solid #c0c0c0;
    border-bottom: 3px solid #c0c0c0;
    background: #c0c0c0;
    color: #000000;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: all 0.1s ease;
    
    /* Enhanced mobile responsiveness */
    @media (max-width: 480px) {
        width: var(--touch-target-ideal);
        height: var(--touch-target-ideal);
        font-size: 20px;
        border-width: 2px;
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
        width: 55px;
        height: 55px;
        font-size: 22px;
        border-width: 2px;
    }
    
    /* Performance optimization */
    will-change: transform, background-color;
    transform: translateZ(0);
    
    /* Better focus states for accessibility */
    &:focus-visible {
        outline: 2px solid var(--accent-cyan);
        outline-offset: 2px;
    }
}

.touch-btn:active {
    border: 3px solid #c0c0c0;
    border-right: 3px solid #808080;
    border-bottom: 3px solid #808080;
    transform: translate(1px, 1px);
}

.touch-btn:hover {
    background: #e0e0e0;
}

/* Game Instructions */
.game-instructions {
    background: #2a2a2a;
    padding: 10px 15px;
    border-radius: 5px;
    border: 2px solid #808080;
    border-right: 2px solid #c0c0c0;
    border-bottom: 2px solid #c0c0c0;
    font-size: 12px;
    color: #ffffff;
}

.game-instructions p {
    margin: 5px 0;
    line-height: 1.4;
}

.game-instructions strong {
    color: #22c55e;
}

.game-instructions .game-tip {
    margin: 8px 0;
    padding: 8px;
    background: rgba(34, 197, 94, 0.1);
    border-left: 3px solid #22c55e;
    border-radius: 4px;
    font-size: 11px;
}

.game-instructions h4 {
    color: #22c55e;
    margin-bottom: 10px;
    font-size: 14px;
    text-align: center;
}

/* Game Over Overlay */
.game-over-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.game-over-content {
    background: #2a2a2a;
    padding: 30px;
    border-radius: 10px;
    border: 3px solid #808080;
    border-right: 3px solid #c0c0c0;
    border-bottom: 3px solid #c0c0c0;
    text-align: center;
    color: #ffffff;
    max-width: 90%;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}

.game-over-content h2 {
    color: #ff6b6b;
    margin-bottom: 20px;
    font-size: 24px;
}

.game-over-content p {
    margin: 10px 0;
    font-size: 16px;
}

.game-over-content button {
    margin-top: 20px;
    padding: 12px 24px;
    font-size: 16px;
}



#snake-game-window .window-content {
    background: #1a1a1a;
    color: #ffffff;
    padding: 0;
    height: calc(100% - 40px); /* Account for header */
}

#snake-game-window .window-header {
    background: #2a2a2a;
    color: #ffffff;
}

#snake-game-window .window-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-right: 6px;
    filter: brightness(1.2) contrast(1.1);
    vertical-align: middle;
}

/* Responsive Design for Mobile and Tablet */
@media (max-width: 1024px) {
    #snake-game-window {
        width: 95vw !important;
        height: 85vh !important;
        max-width: 95vw !important;
        max-height: 85vh !important;
    }
    
    .snake-game-content {
        padding: 10px;
        gap: 10px;
    }
    
    .game-info {
        padding: 8px 12px;
        flex-direction: column;
        gap: 8px;
    }
    
    .score-display, .high-score {
        font-size: 13px;
    }
    
    .touch-controls {
        display: flex; /* Show touch controls on mobile and tablet */
        gap: 18px; /* Slightly reduced but still spacious */
        margin-top: 18px;
        margin-bottom: 18px;
        padding: 12px;
    }
    
    .touch-btn {
        width: 55px; /* Slightly larger for better touch targets */
        height: 55px;
        font-size: 20px;
    }
    
    .game-controls .retro-button {
        min-width: 60px;
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .game-instructions {
        font-size: 11px;
        padding: 8px 12px;
    }
    
    .canvas-container {
        min-height: 300px;
        padding: 15px;
    }
    
    /* Show mobile controls, hide desktop controls on mobile and tablet */
    .mobile-controls {
        display: block;
    }
    
    .desktop-controls {
        display: none;
    }
}

@media (max-width: 480px) {
    #snake-game-window {
        width: 98vw !important;
        height: 90vh !important;
        max-width: 98vw !important;
        max-height: 90vh !important;
    }
    
    .snake-game-content {
        padding: 8px;
        gap: 8px;
    }
    
    .game-info {
        padding: 6px 10px;
    }
    
    .score-display, .high-score {
        font-size: 12px;
    }
    
    .touch-controls {
        gap: 15px; /* Maintain good spacing even on small screens */
        margin-top: 15px;
        margin-bottom: 15px;
        padding: 10px;
    }
    
    .touch-btn {
        width: 50px; /* Increased from 45px for better touch targets */
        height: 50px;
        font-size: 18px;
    }
    
    .game-controls .retro-button {
        min-width: 55px;
        padding: 5px 10px;
        font-size: 11px;
    }
    
    .game-instructions {
        font-size: 10px;
        padding: 6px 10px;
    }
    
    .canvas-container {
        min-height: 250px;
        padding: 10px;
    }
    
    .game-over-content {
        padding: 20px;
        margin: 20px;
    }
    
    .game-over-content h2 {
        font-size: 20px;
    }
    
    .game-over-content p {
        font-size: 14px;
    }
    
    .game-over-content button {
        margin-top: 20px;
        padding: 12px 24px;
        font-size: 16px;
    }
}

/* Landscape orientation adjustments for mobile and tablet */
@media (max-width: 1024px) and (orientation: landscape) {
    #snake-game-window {
        height: 80vh !important;
        max-height: 80vh !important;
    }
    
    .snake-game-content {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }
    
    .canvas-container {
        flex: 1;
        min-width: 250px;
        min-height: 200px;
        padding: 10px;
    }
    
    .game-controls, .touch-controls, .game-instructions {
        flex: 0 0 auto;
        margin-left: 10px;
    }
    
    .touch-controls {
        margin-top: 15px; /* Ensure proper spacing in landscape */
        margin-bottom: 15px;
        gap: 16px; /* Maintain good spacing in landscape mode */
        padding: 12px;
    }
    
    .game-info {
        flex: 0 0 100%;
        margin-bottom: 5px;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #snake-canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}



/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .touch-controls {
        display: flex !important;
        gap: 20px !important; /* Ensure proper spacing on touch devices */
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
    }
    
    .touch-btn {
        min-height: 48px; /* Increased from 44px for better touch targets */
        min-width: 48px;
        width: 60px !important; /* Force larger size on touch devices */
        height: 60px !important;
    }
    
    .game-controls .retro-button {
        min-height: 48px;
        padding: 12px 20px;
    }
}

/* What We Do Window - Responsive sizing */
#what-we-do-window {
    width: 800px !important;
    height: 750px !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
}

@media (max-width: 768px) {
    #what-we-do-window {
        width: 95vw !important;
        height: 85vh !important;
        max-width: 95vw !important;
        max-height: 85vh !important;
    }
}

@media (max-width: 480px) {
    #what-we-do-window {
        width: 98vw !important;
        height: 85vh !important;
        max-width: 98vw !important;
        max-height: 85vh !important;
    }
}

/* Center Branding - FLVME Text Only */
.center-branding {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.flvme-text-center {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(60px, 15vw, 120px);
    font-weight: 900;
    color: #ffffff;
    text-shadow: 
        0 0 30px rgba(255, 255, 255, 0.8),
        0 0 60px rgba(255, 255, 255, 0.6),
        0 0 90px rgba(255, 255, 255, 0.4),
        0 0 120px rgba(255, 255, 255, 0.2);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
    letter-spacing: clamp(2px, 1vw, 4px);
    text-align: center;
    line-height: 1;
    z-index: 5;
    position: relative;
}

/* Responsive design for roadmap items */
@media (max-width: 768px) {
    .roadmap-item {
        padding: 15px;
        gap: 12px;
    }
    
    .roadmap-icon {
        font-size: 20px;
    }
    
    .roadmap-text h5 {
        font-size: 14px;
        margin-bottom: 3px;
    }
    
    .roadmap-text p {
        font-size: 12px;
        line-height: 1.3;
    }
}

@media (max-width: 480px) {
    .roadmap-item {
        padding: 12px;
        gap: 10px;
    }
    
    .roadmap-icon {
        font-size: 18px;
    }
    
    .roadmap-text h5 {
        font-size: 12px;
        margin-bottom: 2px;
    }
    
    .roadmap-text p {
        font-size: 10px;
        line-height: 1.2;
    }
    
    .project-roadmap {
        padding: 15px;
    }
    
    .project-roadmap h4 {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    .roadmap-items {
        gap: 12px;
    }
}

/* Control instructions for different devices */
.mobile-controls {
    display: none; /* Hidden on desktop */
}

.desktop-controls {
    display: block; /* Visible on desktop */
}

    /* Show mobile controls, hide desktop controls on small mobile */
    .mobile-controls {
        display: block;
    }
    
    .desktop-controls {
        display: none;
    }

/* Feature Icons */
.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    position: relative;
}

.feature-svg-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Darker color that matches window colors better */
    filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(1000%) hue-rotate(180deg) brightness(40%) contrast(100%);
    /* Fallback: Use CSS custom property for color */
    color: #404040;
    /* Additional fallback: Use mask approach for better compatibility */
    mask: inherit;
    -webkit-mask: inherit;
    /* Ensure SVG paths inherit the color */
    fill: #404040;
    transition: all 0.3s ease;
}

/* Fallback for when filters don't work - use fill attribute */
.feature-svg-icon path,
.feature-svg-icon rect,
.feature-svg-icon circle,
.feature-svg-icon polygon,
.feature-svg-icon g {
    fill: #404040 !important;
    stroke: #404040 !important;
}

.feature-item:hover .feature-svg-icon {
    transform: scale(1.1);
    /* Even darker on hover */
    filter: brightness(0) saturate(100%) invert(10%) sepia(100%) saturate(1000%) hue-rotate(180deg) brightness(25%) contrast(100%);
}

.feature-item:hover .feature-svg-icon path,
.feature-item:hover .feature-svg-icon rect,
.feature-item:hover .feature-svg-icon circle,
.feature-item:hover .feature-svg-icon polygon,
.feature-item:hover .feature-svg-icon g {
    fill: #202020 !important;
    stroke: #202020 !important;
}

/* Window Height Configurations - Responsive and Adaptive */
#intro-window {
    width: 90vw !important;
    max-width: 900px !important;
}

#projects-window {
    width: 95vw !important;
    max-width: 1000px !important;
}

#what-we-do-window {
    width: 90vw !important;
    max-width: 900px !important;
}

#team-window {
    width: 95vw !important;
    max-width: 1400px !important;
}

#snake-game-window {
    width: 600px !important;
    height: 700px !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
}

/* Mobile-first responsive adjustments */
@media (max-width: 768px) {
    .folder-window {
        width: 95vw !important;
        height: 90vh !important;
    }
    
    #snake-game-window {
        width: 95vw !important;
        height: 85vh !important;
    }
}

@media (max-width: 480px) {
    .folder-window {
        width: 98vw !important;
        height: 95vh !important;
    }
    
    #snake-game-window {
        width: 98vw !important;
        height: 90vh !important;
    }
}