/* Enhanced YouTube Downloader - Landing Page Styles */
/* Modern Redesign with Glassmorphism & Animated Gradients */

:root {
    /* Primary Brand Colors */
    --primary: #F9A825;
    --primary-dark: #E8B400;
    --primary-light: #FFC947;
    --primary-glow: rgba(249, 168, 37, 0.4);

    /* Secondary Colors */
    --secondary: #343838;
    --secondary-dark: #252929;
    --secondary-light: #4A4E4E;

    /* Background Colors */
    --bg-primary: #0A0A0A;
    --bg-secondary: #121212;
    --bg-tertiary: #1A1A1A;
    --bg-elevated: #1E1E1E;
    --bg-surface: #242424;

    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #B8B8B8;
    --text-tertiary: #888888;
    --text-muted: #666666;

    /* Category Colors */
    --cat-performance: #2196F3;
    --cat-download: #4CAF50;
    --cat-content: #9C27B0;
    --cat-system: #FF9800;
    --cat-new: #F9A825;

    /* Accent Colors */
    --success: #4CAF50;
    --info: #2196F3;
    --warning: #FF9800;
    --error: #F44336;

    /* Glassmorphism */
    --glass-bg: rgba(30, 30, 30, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #F9A825 0%, #FFC947 100%);
    --gradient-hero: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 50%, #0A0A0A 100%);
    --gradient-mesh:
        radial-gradient(at 0% 0%, rgba(249, 168, 37, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(33, 150, 243, 0.1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(156, 39, 176, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(76, 175, 80, 0.1) 0px, transparent 50%);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 40px var(--primary-glow);

    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 96px;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Typography Scale */
    --font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --font-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --font-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --font-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
    --font-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
    --font-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    --font-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);

    /* Transitions */
    --transition-fast: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-base: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Reset & Base Styles */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: clip; /* Modern alternative to hidden - doesn't break position: sticky */
    width: 100%;
    max-width: 100vw; /* Force max width to viewport */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--primary);
    color: var(--bg-primary);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition-base);
}

a:hover {
    color: var(--primary-light);
}

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

/* Container */
.container {
    max-width: min(1280px, 100vw); /* Never exceed viewport */
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    box-sizing: border-box; /* Include padding in width */
    overflow-x: clip; /* Clip any overflowing children */
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
        padding: 0 var(--spacing-2xl);
    }
}

/* Navigation */
.nav {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--glass-border);
    overflow: visible; /* Allow mobile menu dropdown to overflow */
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    position: relative; /* Enable absolute positioning for .nav-links dropdown */
    z-index: 1001; /* Ensure nav content is above other elements */
}

.nav-brand h1 {
    font-size: var(--font-lg);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.nav-links {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.nav-links a {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--font-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    position: relative;
}

.nav-links a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: var(--gradient-primary);
    transition: transform 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.nav-links a:hover::before,
.nav-links a.active::before {
    transform: translateX(-50%) scaleX(1);
}

/* Blog Page Navigation Aliases (navbar uses different class names) */
.navbar {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--glass-border);
    overflow: visible;
}

.nav-container {
    max-width: min(1280px, 100vw);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    position: relative;
    z-index: 1001;
}

.nav-logo {
    display: inline-flex; /* Changed from flex to inline-flex for <a> tag */
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    transition: var(--transition-base);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.nav-logo:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

.nav-logo:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.nav-logo .logo-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.nav-logo .logo-text {
    font-size: var(--font-lg);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Hamburger Menu Toggle Button */
.hamburger,
.nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px; /* Increased from 8px for better touch target */
    z-index: 1002;
    position: relative;
    pointer-events: auto; /* Ensure button is always clickable */
    touch-action: manipulation; /* Prevent touch delays */
    min-width: 48px; /* WCAG minimum touch target */
    min-height: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Hamburger spans for blog.html (direct span children) */
.hamburger span {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 2px;
}

/* Hamburger active state - X icon animation */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.nav-toggle-icon {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--text-primary);
    position: relative;
    transition: background 0.3s ease;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 2px;
    background: var(--text-primary);
    transition: transform 0.3s ease;
}

.nav-toggle-icon::before {
    top: -8px;
}

.nav-toggle-icon::after {
    top: 8px;
}

/* Hamburger menu active state (X icon) */
.nav-toggle.active .nav-toggle-icon {
    background: transparent;
}

.nav-toggle.active .nav-toggle-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.nav-toggle.active .nav-toggle-icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* Mobile navigation menu */
@media (max-width: 768px) {
    .hamburger,
    .nav-toggle {
        display: flex; /* Show as flex on mobile to enable flex-direction column */
    }

    /* Reduce logo text size on mobile for better fit */
    .nav-logo .logo-text {
        font-size: clamp(1rem, 4vw, var(--font-lg));
    }

    .nav-links {
        display: none; /* Hide by default - fixes mystery box */
        position: absolute; /* Changed from fixed - fixes menu jump */
        top: 100%; /* Directly below nav bar */
        left: 0;
        right: 0;
        background: rgba(26, 26, 26, 0.98); /* Much more opaque - easier to read */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: var(--spacing-lg) 0;
        gap: 0;
        box-shadow: var(--shadow-lg);
        border-bottom: 1px solid var(--glass-border);
        z-index: 999;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        pointer-events: none; /* Don't block clicks when hidden */
    }

    .nav-links.active {
        display: flex !important; /* Show as flex when active - !important to override display: none */
        animation: slideDownMenu 0.3s ease-out;
        pointer-events: auto; /* Allow clicks when visible */
    }

    .nav-links a {
        width: 100%;
        padding: var(--spacing-lg) var(--spacing-xl); /* Increased padding for better touch */
        border-radius: 0;
        border-bottom: 1px solid var(--glass-border);
        font-size: 18px; /* Larger text for mobile readability */
        font-weight: 500;
        color: var(--text-primary); /* Ensure high contrast */
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    .nav-links a::before {
        display: none; /* Remove hover underline on mobile */
    }
}

/* Smooth slide-down animation for mobile menu */
@keyframes slideDownMenu {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframe Animations */
@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(5deg); }
    66% { transform: translateY(-10px) rotate(-5deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px var(--primary-glow), var(--shadow-lg); }
    50% { box-shadow: 0 0 40px var(--primary-glow), var(--shadow-xl); }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* Hero Section */
.hero {
    position: relative;
    padding: var(--spacing-4xl) 0;
    background: var(--bg-primary);
    overflow: visible; /* Allow image to scale on hover without clipping */
    min-height: 90vh;
    display: flex;
    align-items: center;
}

/* Allow hero container to overflow for hover effect */
.hero .container {
    overflow: visible; /* Override global container overflow-x: clip */
}

/* Animated Gradient Mesh Background */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-mesh);
    background-size: 200% 200%;
    animation: gradient-shift 20s ease infinite;
    opacity: 1;
    z-index: 0;
}

/* Floating Geometric Shapes */
.hero::after {
    content: '';
    position: absolute;
    top: 10%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(249, 168, 37, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.hero .container {
    display: grid;
    grid-template-columns: 45% 55%; /* Desktop: Text 45%, Image 55% - Image is hero element */
    gap: var(--spacing-3xl);
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    animation: fade-in-up 0.8s ease-out;
}

.hero-title {
    font-size: var(--font-3xl);
    font-weight: 900;
    margin-bottom: var(--spacing-lg);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.hero-title-highlight {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    text-shadow: 0 0 80px var(--primary-glow);
}

.hero-subtitle {
    font-size: var(--font-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
    line-height: 1.7;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.version-info {
    color: var(--text-tertiary);
    font-size: var(--font-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Hero Image - Static Expansion Effect */
.hero-image {
    position: relative;
    animation: scale-in 0.8s ease-out 0.2s both;
    overflow: visible; /* Allow screenshot to scale on hover without clipping */
    padding: 20px; /* Add padding to prevent shadow clipping */
}

.screenshot-main {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    transition: transform 0.5s ease;
}

.hero-image:hover .screenshot-main {
    transform: scale(1.05); /* Static expansion only - no tilt */
}

/* Glassmorphism Card Wrapper */
.hero-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    z-index: -1;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-base);
    cursor: pointer;
    transition: var(--transition-base);
    border: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-icon {
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--bg-primary);
    box-shadow: var(--shadow-lg);
    animation: pulse-glow 3s ease-in-out infinite;
}

.btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 60px var(--primary-glow), var(--shadow-xl);
}

.btn-primary:active {
    transform: translateY(-1px) scale(0.98);
}

.btn-secondary {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    color: var(--text-secondary);
    border: 2px solid var(--glass-border);
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.btn-secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--primary);
    color: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(249, 168, 37, 0.1);
}

.btn-large {
    padding: var(--spacing-lg) var(--spacing-2xl);
    font-size: var(--font-lg);
    border-radius: var(--radius-lg);
}

.btn-subtitle {
    font-size: var(--font-xs);
    font-weight: 400;
    opacity: 0.9;
    display: block;
    margin-top: var(--spacing-xs);
}

/* Two-line stacked button layout for better mobile readability */
.btn-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 24px;
    min-height: 64px;
}

.btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-main-text {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.btn-stacked .btn-subtitle {
    font-size: 0.75rem; /* 12px - much more readable than 8px! */
    font-weight: 400;
    opacity: 0.9;
    line-height: 1.2;
    text-align: center;
    display: block;
    margin-top: 0;
}

/* Section Styles */
section {
    padding: var(--spacing-4xl) 0;
    position: relative;
    width: 100%;
    max-width: 100vw; /* Never exceed viewport */
    overflow-x: clip; /* Clip overflowing content */
}

.section-title {
    font-size: var(--font-2xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    font-size: var(--font-lg);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Features Section */
.features {
    background: var(--bg-secondary);
    position: relative;
}

.features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); /* Responsive min */
    gap: var(--spacing-xl);
    width: 100%; /* Constrain to container */
    max-width: 100%; /* Never exceed container */
}

.feature-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
    width: 100%; /* Fill grid cell */
    max-width: 100%; /* Never exceed cell */
    box-sizing: border-box; /* Include padding in width */
}

/* Category Color Coding */
.feature-card:nth-child(1) .feature-icon { color: var(--cat-performance); }
.feature-card:nth-child(2) .feature-icon { color: var(--cat-content); }
.feature-card:nth-child(3) .feature-icon { color: var(--cat-download); }
.feature-card:nth-child(4) .feature-icon { color: var(--cat-new); }
.feature-card:nth-child(5) .feature-icon { color: var(--cat-content); }
.feature-card:nth-child(6) .feature-icon { color: var(--cat-performance); }
.feature-card:nth-child(7) .feature-icon { color: var(--cat-system); }
.feature-card:nth-child(8) .feature-icon { color: var(--cat-download); }
.feature-card:nth-child(9) .feature-icon { color: var(--cat-system); }

/* Glassmorphism Hover Effect */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

/* Glow effect on hover */
.feature-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease;
    pointer-events: none;
    opacity: 0;
}

.feature-card:hover::after {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
}

.feature-icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--spacing-lg);
    transition: var(--transition-base);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

.feature-card h3 {
    font-size: var(--font-xl);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: var(--font-base);
}

/* Professional Subtitle Burning - Special Gold Treatment */
.feature-card-highlight h3 {
    position: relative;
}

/* REMOVED: Automatic NEW badge on all .feature-card-highlight cards
   Now using explicit <span class="badge-new">NEW</span> in HTML for controlled placement */

/* Screenshots Section */
.screenshots {
    background: var(--bg-primary);
}

.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-2xl);
}

.screenshot-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
    border: 1px solid var(--glass-border);
    position: relative;
    cursor: pointer;
}

.screenshot-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(249, 168, 37, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.screenshot-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary);
}

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

.screenshot-card:hover .expand-icon {
    opacity: 1;
    transform: scale(1.1);
}

.screenshot-card img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.screenshot-card:hover img {
    transform: scale(1.05);
}

.screenshot-card p {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-base);
    background: var(--bg-elevated);
}

.expand-icon {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 1.5rem;
    opacity: 0;
    transition: var(--transition-base);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
}

/* Lightbox - Enhanced */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.97);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 3rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-base);
    z-index: 10000;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    border: 1px solid var(--glass-border);
}

.lightbox-close:hover {
    color: var(--primary);
    background: var(--bg-elevated);
    transform: rotate(90deg) scale(1.1);
}

.lightbox-content {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-xl);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.9);
    display: block;
    border: 2px solid var(--glass-border);
}

.lightbox-caption {
    margin-top: var(--spacing-xl);
    font-size: var(--font-lg);
    color: var(--text-primary);
    text-align: center;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
}

/* Installation Section - Visual Timeline */
.installation {
    background: var(--bg-secondary);
    position: relative;
}

.installation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}

.installation-steps {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

/* Animated Progress Line */
.installation-steps::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 48px;
    bottom: 48px;
    width: 2px;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
    opacity: 0.3;
}

.step {
    display: flex;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
    align-items: flex-start;
    position: relative;
}

.step:last-child {
    margin-bottom: 0;
}

.step-number {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    color: var(--bg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xl);
    font-weight: 800;
    box-shadow: var(--shadow-glow);
    position: relative;
    z-index: 1;
    transition: var(--transition-base);
}

.step:hover .step-number {
    transform: scale(1.1) rotate(5deg);
}

.step-content {
    flex: 1;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    transition: var(--transition-base);
}

.step:hover .step-content {
    transform: translateX(8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.step-content h3 {
    font-size: var(--font-xl);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}

.step-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: var(--font-base);
}

.step-content .btn {
    margin-top: var(--spacing-lg);
}

.alert {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
}

.alert-info {
    border-left: 4px solid var(--info);
}

.alert-icon {
    width: 24px;
    height: 24px;
    color: var(--info);
    flex-shrink: 0;
}

.system-requirements {
    max-width: 900px;
    margin: var(--spacing-3xl) auto 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
}

.system-requirements h3 {
    font-size: var(--font-xl);
    margin-bottom: var(--spacing-lg);
    font-weight: 700;
    color: var(--primary);
}

.system-requirements ul {
    list-style: none;
}

.system-requirements li {
    padding: var(--spacing-md) 0;
    color: var(--text-secondary);
    font-size: var(--font-base);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
}

.system-requirements li:last-child {
    border-bottom: none;
}

.system-requirements li::before {
    content: '✓';
    color: var(--success);
    font-weight: bold;
    margin-right: var(--spacing-md);
    font-size: var(--font-lg);
}

.system-requirements strong {
    color: var(--text-primary);
    min-width: 180px;
}

/* Download Section - Conversion Focused */
.download {
    background: var(--bg-primary);
    position: relative;
}

.download::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(249, 168, 37, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.download-card {
    max-width: 900px;
    margin: 0 auto;
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    padding: var(--spacing-3xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--primary);
    position: relative;
    z-index: 1;
    transition: var(--transition-base);
}

.download-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(249, 168, 37, 0.3);
}

.download-info {
    text-align: center;
}

.download-info h3 {
    font-size: var(--font-2xl);
    margin-bottom: var(--spacing-md);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.download-info p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-lg);
}

.download-features {
    list-style: none;
    margin-bottom: var(--spacing-2xl);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.download-features li {
    padding: var(--spacing-md);
    color: var(--text-secondary);
    font-size: var(--font-base);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    transition: var(--transition-base);
}

.download-features li:hover {
    border-color: var(--primary);
    transform: translateX(4px);
}

.download-actions {
    text-align: center;
}

.download-alt {
    margin-top: var(--spacing-lg);
    color: var(--text-tertiary);
    font-size: var(--font-sm);
}

.download-alt a {
    color: var(--primary);
    text-decoration: underline;
}

.download-alt a:hover {
    color: var(--primary-light);
}

/* Tech Stack Section */
.tech-stack {
    background: var(--bg-secondary);
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.tech-item {
    text-align: center;
    padding: var(--spacing-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
}

.tech-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.tech-item:hover {
    transform: translateY(-6px) scale(1.05);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.tech-item:hover::before {
    transform: scaleX(1);
}

.tech-item h4 {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-lg);
    font-weight: 700;
}

.tech-item p {
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

/* FAQ Section */
.faq {
    background: var(--bg-primary);
    padding: var(--spacing-4xl) 0;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    transition: var(--transition-base);
}

.faq-item:hover {
    border-color: var(--primary);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-xl);
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: var(--font-lg);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-base);
}

.faq-question:hover {
    color: var(--primary);
}

.faq-question span {
    flex: 1;
    padding-right: var(--spacing-md);
}

.faq-icon {
    width: 24px;
    height: 24px;
    color: var(--primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 var(--spacing-xl);
}

.faq-answer.active {
    max-height: 500px;
    padding: 0 var(--spacing-xl) var(--spacing-lg);
}

.faq-answer p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: var(--font-base);
}

/* Footer */
.footer {
    background: var(--bg-secondary);
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
    border-top: 1px solid var(--glass-border);
}

.footer-content,
.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    max-width: min(1280px, 100vw);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-lg);
}

.footer-section h4 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-lg);
    font-weight: 700;
}

.footer-section p {
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: var(--font-sm);
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    margin-bottom: var(--spacing-sm);
}

.footer-section a {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    transition: var(--transition-base);
}

.footer-section a:hover {
    color: var(--primary);
    padding-left: 4px;
}

.footer-bottom {
    border-top: 1px solid var(--glass-border);
    padding-top: var(--spacing-lg);
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--font-sm);
}

.footer-bottom p {
    margin: var(--spacing-xs) 0;
}

/* Scroll Animations */
.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

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

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

/* Responsive Design */
@media (max-width: 1024px) {
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-image {
        max-width: 600px;
        margin: 0 auto;
    }

    .screenshot-main {
        transform: none;
    }

    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .hero {
        padding: var(--spacing-3xl) 0;
        min-height: auto;
    }

    .hero-title {
        font-size: var(--font-2xl);
    }

    .hero-subtitle {
        font-size: var(--font-base);
    }

    .section-title {
        font-size: var(--font-xl);
    }

    .section-subtitle {
        font-size: var(--font-base);
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
    }

    .nav-brand h1 {
        font-size: var(--font-base);
    }

    .nav-links {
        gap: var(--spacing-xs);
        flex-wrap: wrap;
    }

    .nav-links a {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-xs);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .screenshots-grid {
        grid-template-columns: 1fr;
    }

    .installation-steps::before {
        left: 27px;
    }

    .step {
        gap: var(--spacing-md);
    }

    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .download-card {
        padding: var(--spacing-xl);
    }

    .download-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    section {
        padding: var(--spacing-2xl) 0;
    }

    .hero {
        padding: var(--spacing-2xl) 0;
    }

    .tech-grid {
        grid-template-columns: 1fr;
    }

    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 2rem;
    }

    .lightbox-content {
        max-width: 95%;
    }
}

/* Print Styles */
@media print {
    .nav,
    .hero-buttons,
    .expand-icon,
    .lightbox {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }
}
/* ========================================
   MOBILE HERO SECTION RESPONSIVENESS FIXES
   Enhanced YouTube Downloader Landing Page
   ========================================

   IMPLEMENTATION: Add these styles to style.css
   - Replace existing mobile breakpoints (lines 1313-1415)
   - Or append at end of file with higher specificity

   CRITICAL FIXES:
   1. Hero section padding optimization
   2. Button width and sizing constraints
   3. Glassmorphism border scaling
   4. Hero title typography and word wrapping
   5. Version info mobile layout
   6. New intermediate breakpoints (600px, 375px)
   ======================================== */

/* ========================================
   BREAKPOINT 1: LARGE TABLETS (max-width: 1024px)
   - Switch to single column layout
   - Center content and buttons
   ======================================== */
@media (max-width: 1024px) {
    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-image {
        max-width: 600px;
        margin: 0 auto;
    }

    .screenshot-main {
        transform: none; /* Remove 3D tilt on tablets */
    }

    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* ========================================
   BREAKPOINT 2: TABLETS & SMALL LAPTOPS (max-width: 768px)
   - Reduce hero padding
   - Stack buttons vertically
   - Adjust typography sizes
   ======================================== */
@media (max-width: 768px) {
    /* FIX #1: Hero Section Padding - Reduce from 64px to 48px */
    .hero {
        padding: var(--spacing-2xl) 0; /* 48px instead of 96px */
        min-height: auto; /* Remove fixed viewport height */
    }

    /* FIX #4: Hero Title Typography - Smooth scaling */
    .hero-title {
        font-size: var(--font-2xl); /* clamp(2rem, 1.5rem + 2.5vw, 3.5rem) */
        line-height: 1.15; /* Slightly increased for better wrapping */
        margin-bottom: var(--spacing-md); /* Reduce bottom spacing */
    }

    /* FIX #8: Hero Subtitle Readability */
    .hero-subtitle {
        font-size: var(--font-base); /* clamp(1rem, 0.95rem + 0.25vw, 1.125rem) */
        line-height: 1.6; /* Optimize for mobile reading */
        padding: 0 var(--spacing-md); /* Add horizontal padding */
        max-width: 100%; /* Allow full width on smaller screens */
    }

    .section-title {
        font-size: var(--font-xl);
    }

    .section-subtitle {
        font-size: var(--font-base);
    }

    /* FIX #2: Button Width & Sizing - Stack vertically, full width */
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-md); /* Maintain comfortable spacing */
    }

    .btn {
        width: 100%; /* Full width on tablets */
        justify-content: center; /* Center content */
    }

    /* FIX #5: Version Info Layout - Keep horizontal on tablets */
    .version-info {
        justify-content: center; /* Center when hero is centered */
        flex-wrap: wrap; /* Allow wrapping if needed */
    }

    .nav-brand h1 {
        font-size: var(--font-base);
    }

    .nav-links {
        gap: var(--spacing-xs);
        flex-wrap: wrap;
    }

    .nav-links a {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-xs);
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .screenshots-grid {
        grid-template-columns: 1fr;
    }

    .installation-steps::before {
        left: 27px;
    }

    .step {
        gap: var(--spacing-md);
    }

    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .download-card {
        padding: var(--spacing-xl);
    }

    .download-features {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   BREAKPOINT 3: MOBILE LANDSCAPE & SMALL TABLETS (max-width: 600px)
   NEW BREAKPOINT - Smoother transition to mobile
   - Further reduce hero padding
   - Constrain button max-width
   - Scale glassmorphism borders
   ======================================== */
@media (max-width: 600px) {
    /* FIX #1: Hero Section Padding - Reduce to 40px */
    .hero {
        padding: 40px 0; /* Between tablet (48px) and mobile (32px) */
    }

    /* FIX #2: Button Max-Width Constraint */
    .btn {
        max-width: 400px; /* Prevent awkward stretching */
        margin-left: auto;
        margin-right: auto;
    }

    .btn-large {
        padding: var(--spacing-md) var(--spacing-xl); /* Reduce from 24px 48px to 16px 32px */
        font-size: var(--font-base); /* Slightly smaller for mobile */
    }

    /* FIX #3: Glassmorphism Border Scaling */
    .hero-image::before {
        top: -10px; /* Reduce from -20px */
        left: -10px;
        right: -10px;
        bottom: -10px;
        backdrop-filter: blur(15px); /* Reduce blur intensity for performance */
    }

    /* FIX #5: Version Info - Stack vertically */
    .version-info {
        flex-direction: column;
        gap: var(--spacing-xs); /* Reduce gap when stacked */
        text-align: center;
    }

    /* Hero Image Scaling */
    .hero-image {
        max-width: 100%;
        padding: 0 var(--spacing-md); /* Add horizontal padding */
    }

    .screenshot-main {
        border-radius: var(--radius-lg); /* Reduce from --radius-xl */
    }
}

/* ========================================
   BREAKPOINT 4: MOBILE PORTRAIT (max-width: 480px)
   - Aggressive padding reduction
   - Optimized touch targets
   - Fine-tuned typography
   ======================================== */
@media (max-width: 480px) {
    /* Global Container Padding */
    .container {
        padding: 0 var(--spacing-md); /* 16px horizontal padding */
    }

    /* Global Section Padding */
    section {
        padding: var(--spacing-2xl) 0; /* 48px vertical */
    }

    /* FIX #1: Hero Section Padding - CRITICAL - Reduce to 32px */
    .hero {
        padding: var(--spacing-xl) 0; /* 32px - optimized for small screens */
    }

    /* FIX #4: Hero Title - Smoother font scaling with clamp() */
    .hero-title {
        /* Use custom clamp for better control on very small screens */
        font-size: clamp(1.75rem, 5vw, 2.5rem); /* ~28px to 40px range */
        line-height: 1.2; /* Tighter for better vertical spacing */
        letter-spacing: -0.02em; /* Slightly tighter for mobile */
        margin-bottom: var(--spacing-sm); /* Reduce from 24px to 8px */
    }

    /* FIX #7: Hero Title Word Wrapping Prevention */
    .hero-title {
        word-break: keep-all; /* Prevent awkward mid-word breaking */
        overflow-wrap: break-word; /* But allow breaking if absolutely necessary */
        hyphens: none; /* Disable hyphenation for cleaner look */
    }

    /* Ensure highlighted text scales properly */
    .hero-title-highlight {
        display: inline; /* Change from inline-block to prevent line breaking */
    }

    /* FIX #8: Hero Subtitle - Optimize readability */
    .hero-subtitle {
        font-size: clamp(0.95rem, 4vw, 1.125rem); /* Slightly smaller on mobile */
        line-height: 1.65; /* Optimal mobile readability */
        margin-bottom: var(--spacing-lg); /* Reduce from 48px to 24px */
        padding: 0 var(--spacing-sm); /* Add breathing room */
    }

    /* FIX #2: Button Sizing - Reduce horizontal padding */
    .btn {
        padding: var(--spacing-sm) var(--spacing-lg); /* 8px 24px */
        font-size: var(--font-sm); /* Slightly smaller text */
    }

    .btn-large {
        padding: var(--spacing-md) var(--spacing-xl); /* 16px 32px - reduced from 24px 48px */
        font-size: var(--font-base); /* Maintain readability */
    }

    /* Touch Target Optimization - ACCESSIBILITY */
    .btn {
        min-height: 44px; /* Apple HIG minimum touch target */
        min-width: 44px;
    }

    /* Button Icon Sizing */
    .btn-icon {
        width: 20px; /* Reduce from 24px */
        height: 20px;
    }

    /* Button Subtitle Text */
    .btn-subtitle {
        font-size: 0.7rem; /* Smaller on mobile */
        margin-top: 2px; /* Reduce spacing */
    }

    /* Hero Buttons Container */
    .hero-buttons {
        gap: var(--spacing-sm); /* Reduce gap to 8px */
        margin-bottom: var(--spacing-md); /* Reduce from 32px to 16px */
    }

    /* FIX #3: Glassmorphism Borders - Further reduce */
    .hero-image::before {
        top: -8px; /* Minimal offset for mobile */
        left: -8px;
        right: -8px;
        bottom: -8px;
        backdrop-filter: blur(10px); /* Lighter blur for better performance */
        border-radius: var(--radius-md); /* Match reduced screenshot radius */
    }

    /* Hero Image Optimization */
    .hero-image {
        padding: 0 var(--spacing-xs); /* Minimal padding */
    }

    .screenshot-main {
        border-radius: var(--radius-md); /* 12px - more appropriate for mobile */
        box-shadow: var(--shadow-md); /* Lighter shadow */
    }

    /* FIX #5: Version Info - Optimized stacking */
    .version-info {
        font-size: clamp(0.75rem, 3vw, 0.875rem); /* Smaller on mobile */
        gap: var(--spacing-xs); /* 4px gap */
        line-height: 1.5;
    }

    /* Tech Grid - Single column */
    .tech-grid {
        grid-template-columns: 1fr;
    }

    /* Lightbox Optimization */
    .lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 2rem;
    }

    .lightbox-content {
        max-width: 95%;
    }

    /* Hero Background Optimization */
    .hero::after {
        width: 250px; /* Reduce from 400px */
        height: 250px;
        opacity: 0.5; /* Reduce intensity on mobile */
    }
}

/* ========================================
   BREAKPOINT 5: SMALL MOBILE (max-width: 375px)
   NEW BREAKPOINT - Targets iPhone SE, small Androids
   - Fine-tune for very small screens
   - Further typography optimization
   ======================================== */
@media (max-width: 375px) {
    /* FIX #4: Hero Title - Optimized for iPhone SE */
    .hero-title {
        font-size: clamp(1.5rem, 6vw, 2rem); /* ~24px to 32px */
        line-height: 1.25;
        margin-bottom: var(--spacing-xs); /* 4px */
    }

    /* FIX #8: Hero Subtitle - Further reduction */
    .hero-subtitle {
        font-size: clamp(0.875rem, 4vw, 1rem); /* ~14px to 16px */
        line-height: 1.6;
        margin-bottom: var(--spacing-md); /* 16px */
        padding: 0 var(--spacing-xs); /* 4px horizontal */
    }

    /* Container Padding */
    .container {
        padding: 0 var(--spacing-sm); /* 8px - tighter on very small screens */
    }

    /* Button Optimization */
    .btn {
        padding: var(--spacing-sm) var(--spacing-md); /* 8px 16px */
        font-size: clamp(0.875rem, 3.5vw, 1rem);
    }

    .btn-large {
        padding: 12px 24px; /* Fixed sizing for consistency */
        font-size: clamp(0.95rem, 4vw, 1.125rem);
    }

    /* Version Info - Extra compact */
    .version-info {
        font-size: 0.75rem; /* 12px */
        gap: 2px; /* Minimal gap */
    }

    /* Hero Padding - Absolute minimum */
    .hero {
        padding: var(--spacing-lg) 0; /* 24px */
    }

    /* Glassmorphism - Minimal offset */
    .hero-image::before {
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        backdrop-filter: blur(8px); /* Lightest blur for best performance */
    }

    /* Screenshot Scaling */
    .screenshot-main {
        border-radius: var(--radius-sm); /* 6px - small radius for tiny screens */
    }

    /* Hero Buttons - Extra tight spacing */
    .hero-buttons {
        gap: var(--spacing-xs); /* 4px */
        margin-bottom: var(--spacing-sm); /* 8px */
    }
}

/* ========================================
   BREAKPOINT 6: MOBILE LANDSCAPE (height-based)
   - Optimize for horizontal orientation
   - Reduce vertical padding aggressively
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: var(--spacing-lg) 0; /* 24px - minimize vertical space */
        min-height: auto;
    }

    .hero-title {
        font-size: clamp(1.5rem, 4vw, 2rem);
        margin-bottom: var(--spacing-xs); /* 4px */
    }

    .hero-subtitle {
        font-size: clamp(0.875rem, 3vw, 1rem);
        margin-bottom: var(--spacing-sm); /* 8px */
    }

    .hero-buttons {
        flex-direction: row; /* Keep horizontal in landscape */
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }

    .btn {
        width: auto; /* Allow auto width in landscape */
        min-width: 140px; /* Minimum for readability */
    }

    .version-info {
        flex-direction: row; /* Keep horizontal */
        gap: var(--spacing-sm);
    }
}

/* ========================================
   ACCESSIBILITY: Touch Target Optimization
   - Ensure ALL interactive elements meet 44x44px minimum
   - Applies across all breakpoints
   ======================================== */
@media (max-width: 768px) {
    /* Touch targets must be at least 44x44px (Apple HIG / WCAG 2.1) */
    .btn,
    .nav-links a,
    button,
    a[href] {
        min-height: 44px;
        min-width: 44px;
        padding: max(var(--spacing-sm), 12px) max(var(--spacing-md), 16px);
    }

    /* Increase tap spacing between elements */
    .hero-buttons > * + * {
        margin-top: 8px; /* 8px minimum spacing */
    }

    .nav-links a {
        margin: var(--spacing-xs); /* Add margin for tap spacing */
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATION: Reduce Animations
   - Lighter blur effects on mobile for better FPS
   - Simplified animations to reduce CPU load
   ======================================== */
@media (max-width: 768px) {
    /* Reduce backdrop blur intensity */
    .glass-bg,
    .hero-image::before,
    .screenshot-main {
        backdrop-filter: blur(10px); /* Lighter than desktop (20px) */
    }

    /* Simplify gradient animation */
    .hero::before {
        animation-duration: 30s; /* Slower, less CPU intensive */
    }

    /* Reduce floating animation */
    .hero::after {
        animation-duration: 20s; /* Slower movement */
    }

    /* Disable parallax effects on mobile */
    .hero,
    .hero .container,
    .hero-image {
        transform: none !important;
    }
}

/* ========================================
   FIX #9: MOBILE NAVIGATION MENU
   - Ensure mobile menu doesn't overlap hero
   - Verify z-index hierarchy
   ======================================== */
@media (max-width: 768px) {
    .nav {
        position: sticky; /* Keep header visible while scrolling */
        top: 0;
        z-index: 1000; /* Ensure nav overlays all content */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow for depth */
    }

    /* Enhanced shadow when scrolled (optional visual improvement) */
    .nav.scrolled {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* If mobile menu exists (hamburger menu) */
    .mobile-menu {
        z-index: 99; /* Just below nav */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        backdrop-filter: blur(20px);
    }

    /* Ensure hero content doesn't overlap nav */
    .hero {
        position: relative;
        z-index: 1;
        margin-top: 0; /* Remove any negative margin */
    }
}

/* ========================================
   END OF MOBILE HERO FIXES
   ======================================== */

/* ========================================
   MOBILE NAVIGATION MENU - HAMBURGER FIXES
   Added: 2025-10-08
   ======================================== */

/* Mobile Menu Button (Hamburger Icon) */
.mobile-menu-btn {
    display: none !important; /* Hidden by default, shown on mobile by JS */
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    width: 48px !important; /* Increased from 40px */
    height: 48px !important; /* Increased from 40px */
    padding: 10px !important; /* Increased from 8px */
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    position: relative;
    z-index: 1001;
}

.mobile-menu-btn:hover {
    background: var(--bg-elevated);
    color: var(--primary);
}

.mobile-menu-btn:active {
    transform: scale(0.95);
}

.mobile-menu-btn svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Mobile Navigation - Hide links on small screens */
/* Tablet - Show hamburger at 1024px too if nav gets cramped */
@media (max-width: 1024px) and (min-width: 769px) {
    .nav-links {
        gap: var(--spacing-sm); /* Reduce gap on smaller tablets */
    }

    .nav-links a {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-xs);
    }
}

/* Accessibility: Focus styles for hamburger menu */
.mobile-menu-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* Mobile menu overlay (optional, for better UX) */
@media (max-width: 768px) {
    .nav-links.mobile-active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
        opacity: 0;
        animation: fadeIn 0.3s ease forwards;
    }

    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }
}

/* Ensure hamburger menu is above everything */
@media (max-width: 768px) {
    .nav {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .nav-content {
        position: relative;
        z-index: 1001;
    }
}

/* ========================================
   END OF MOBILE NAVIGATION FIXES
   ======================================== */

/* ========================================
   MOBILE BUTTON TEXT OVERFLOW FIXES
   Added: 2024-10-08 (Session 23 continuation)
   Target: 404px, 390px, 360px, 320px breakpoints
   Issue: Button subtitle text overflowing on small screens
   ======================================== */

/* BREAKPOINT: 404px and below - Initial mobile fixes */
@media (max-width: 404px) {
    /* Fix #1: Reduce button subtitle font size */
    .btn-subtitle {
        font-size: 0.65rem; /* Reduce from 0.7rem */
        line-height: 1.3;
        margin-top: 3px;
    }

    /* Fix #2: Reduce button padding to create more space */
    .btn-large {
        padding: 14px 20px; /* Reduce from 16px 32px */
        font-size: 0.95rem;
    }

    /* Fix #3: Ensure hero subtitle doesn't overflow */
    .hero-subtitle {
        font-size: clamp(0.9rem, 3.8vw, 1rem);
        padding: 0 var(--spacing-xs);
    }
}

/* BREAKPOINT: 390px and below - Aggressive mobile fixes */
@media (max-width: 390px) {
    /* Fix #1: Make button subtitle stack vertically with abbreviations */
    .btn-subtitle {
        font-size: 0.6rem; /* Further reduce */
        display: block;
        margin-top: 4px;
        line-height: 1.2;
        white-space: normal; /* Allow wrapping if needed */
        max-width: 100%;
    }

    /* Fix #2: Abbreviate text via CSS (hide parts on smallest screens) */
    .btn-primary.btn-large .btn-subtitle {
        /* Use word-spacing to tighten text */
        word-spacing: -0.5px;
        letter-spacing: -0.3px;
    }

    /* Fix #3: Further reduce button padding */
    .btn-large {
        padding: 12px 16px; /* Minimal padding */
        font-size: 0.9rem;
        line-height: 1.3;
    }

    /* Fix #4: Reduce main button text size */
    .btn {
        font-size: 0.85rem;
    }

    /* Fix #5: Ensure container has minimal padding */
    .hero .container {
        padding: 0 12px;
    }

    /* Fix #6: Reduce version info text size */
    .version-info {
        font-size: 0.7rem; /* 11.2px */
        padding: 0 8px;
        line-height: 1.4;
    }
}

/* BREAKPOINT: 360px and below - Critical small screen fixes */
@media (max-width: 360px) {
    /* Fix #1: Hide less critical button subtitle text */
    .btn-subtitle {
        font-size: 0.55rem; /* Very small but readable */
        /* Option: Use text overflow with ellipsis */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 280px; /* Prevent overflow */
        margin: 3px auto 0;
    }

    /* Fix #2: Reduce button width slightly */
    .btn {
        max-width: 320px;
        padding: 10px 12px;
    }

    .btn-large {
        padding: 11px 14px;
        font-size: 0.875rem;
    }

    /* Fix #3: Optimize hero title for very small screens */
    .hero-title {
        font-size: clamp(1.4rem, 5.5vw, 1.9rem); /* ~22.4px to 30.4px */
    }

    /* Fix #4: Container padding for edge-to-edge usage */
    .container {
        padding: 0 10px;
    }
}

/* BREAKPOINT: 320px (iPhone SE) - Minimum viable fixes */
@media (max-width: 320px) {
    /* Fix #1: Drastically simplify button subtitle */
    .btn-subtitle {
        font-size: 0.5rem; /* 8px - absolute minimum */
        letter-spacing: -0.5px;
        word-spacing: -1px;
    }

    /* Fix #2: Compress button text */
    .btn {
        font-size: 0.8rem;
        padding: 9px 10px;
        letter-spacing: -0.3px;
    }

    .btn-large {
        padding: 10px 12px;
        font-size: 0.85rem;
        letter-spacing: -0.3px;
    }

    /* Fix #3: Ensure hero content fits */
    .hero-title {
        font-size: clamp(1.3rem, 6vw, 1.75rem); /* ~20.8px to 28px */
        letter-spacing: -0.03em;
    }

    .hero-subtitle {
        font-size: 0.85rem; /* ~13.6px */
        line-height: 1.5;
        padding: 0 4px;
    }

    /* Fix #4: Minimal container padding */
    .container {
        padding: 0 8px;
    }

    .hero .container {
        padding: 0 8px;
    }

    /* Fix #5: Version info - ultra compact */
    .version-info {
        font-size: 0.65rem; /* ~10.4px */
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 4px;
        line-height: 1.3;
    }

    /* Fix #6: Ensure touch targets remain accessible */
    .btn {
        min-height: 42px; /* Slightly reduce from 44px due to space constraints */
    }
}

/* ========================================
   ACCESSIBILITY: Maintain Touch Targets
   Ensure buttons remain tappable on mobile
   ======================================== */
@media (max-width: 404px) {
    /* Ensure all buttons maintain minimum 44x44px touch target */
    .btn,
    .btn-large {
        min-height: 44px;
        min-width: 44px;
    }

    /* Add spacing between stacked buttons */
    .hero-buttons .btn + .btn {
        margin-top: 10px;
    }
}

@media (max-width: 320px) {
    /* Allow slight reduction on smallest screens (42px is still accessible) */
    .btn {
        min-height: 42px;
    }
}

/* ========================================
   END OF MOBILE BUTTON OVERFLOW FIXES (OLD SOLUTION - DEPRECATED)
   The above breakpoints are kept for non-stacked buttons elsewhere on the page
   For the hero download button, see MOBILE BUTTON STACKED LAYOUT below
   ======================================== */

/* ========================================
   MOBILE BUTTON STACKED LAYOUT - NEW SOLUTION
   Added: 2024-10-08 (Session 26)
   Solution: Vertical two-line layout instead of horizontal compression
   Target: 430px (large phones), 393px (iPhone 15), 360px, 320px breakpoints
   Benefits: No overflow, readable fonts (12-16px), WCAG compliant
   ======================================== */

/* BREAKPOINT: 430px and below - Large phones (iPhone 14 Pro Max, etc.) */
@media (max-width: 430px) {
    .btn-stacked {
        padding: 12px 20px;
        gap: 3px;
        min-height: 56px;
    }

    .btn-main-text {
        font-size: 0.95rem; /* 15.2px */
    }

    .btn-stacked .btn-subtitle {
        font-size: 0.7rem; /* 11.2px - much better than 8px! */
    }
}

/* BREAKPOINT: 393px and below - iPhone 15 (USER'S DEVICE - CRITICAL FIX) */
@media (max-width: 393px) {
    .btn-stacked {
        padding: 12px 18px;
    }

    .btn-main-text {
        font-size: 0.9rem; /* 14.4px */
    }

    .btn-stacked .btn-subtitle {
        font-size: 0.68rem; /* 10.88px */
    }
}

/* BREAKPOINT: 360px and below - Small screens (Galaxy S8, older Android) */
@media (max-width: 360px) {
    .btn-stacked .btn-subtitle {
        font-size: 0.65rem; /* 10.4px */
    }
}

/* BREAKPOINT: 320px and below - iPhone SE (minimum viable) */
@media (max-width: 320px) {
    .btn-stacked {
        padding: 10px 16px;
        min-height: 52px;
    }

    .btn-main-text {
        font-size: 0.85rem; /* 13.6px */
    }

    .btn-stacked .btn-subtitle {
        font-size: 0.6rem; /* 9.6px */
    }
}

/* ACCESSIBILITY: Maintain Touch Targets on stacked buttons */
@media (max-width: 430px) {
    .btn-stacked {
        min-height: 48px; /* WCAG 2.1 AA minimum */
        min-width: 48px;
    }

    .hero-buttons .btn-stacked + .btn {
        margin-top: 10px;
    }
}

@media (max-width: 320px) {
    .btn-stacked {
        min-height: 44px; /* Acceptable minimum on smallest screens */
    }
}

/* ========================================
   END OF MOBILE BUTTON STACKED LAYOUT
   ======================================== */

/* ========================================
   DESKTOP HERO IMAGE SIZING FIXES
   Added: 2025-10-08
   Issue: Hero screenshot appears too small on desktop
   Solution: Rebalance grid, increase image size, optimize proportions
   ======================================== */

/* DESKTOP LARGE (1920px+): Full HD monitors */
@media (min-width: 1920px) {
    .hero .container {
        grid-template-columns: 45% 55%; /* Text: 45%, Image: 55% - Image becomes dominant */
        gap: var(--spacing-2xl); /* Reduce gap from 64px to 48px for better balance */
        max-width: 1600px; /* Allow wider hero on large screens */
    }

    .hero-image {
        max-width: none; /* Remove max-width constraint */
    }

    .screenshot-main {
        width: 100%;
        max-width: 1000px; /* Cap at reasonable size for readability */
        height: auto;
        box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8), 0 0 60px var(--primary-glow); /* Enhanced shadow */
    }

    /* Increase glassmorphism border effect */
    .hero-image::before {
        top: -30px;
        left: -30px;
        right: -30px;
        bottom: -30px;
    }
}

/* DESKTOP STANDARD (1440px - 1919px): Common laptop/desktop */
@media (min-width: 1440px) and (max-width: 1919px) {
    .hero .container {
        grid-template-columns: 45% 55%; /* Image gets more space */
        gap: var(--spacing-2xl); /* 48px gap */
    }

    .hero-image {
        max-width: none;
    }

    .screenshot-main {
        width: 100%;
        max-width: 850px; /* ~850px wide on 1440px screen */
        height: auto;
        box-shadow: 0 16px 64px rgba(0, 0, 0, 0.7), 0 0 50px var(--primary-glow);
    }

    .hero-image::before {
        top: -25px;
        left: -25px;
        right: -25px;
        bottom: -25px;
    }
}

/* DESKTOP SMALL (1024px - 1439px): Small desktop/large tablet */
@media (min-width: 1024px) and (max-width: 1439px) {
    .hero .container {
        grid-template-columns: 50% 50%; /* Equal balance on smaller desktops */
        gap: var(--spacing-xl); /* 32px gap */
    }

    .hero-image {
        max-width: none;
    }

    .screenshot-main {
        width: 100%;
        max-width: 650px; /* ~650px wide on 1024px screen */
        height: auto;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 40px var(--primary-glow);
    }

    .hero-image::before {
        top: -20px;
        left: -20px;
        right: -20px;
        bottom: -20px;
    }
}

/* Fix existing 1024px breakpoint to not override desktop layout */
@media (min-width: 1025px) {
    /* Override previous line 308 grid setting */
    .hero .container {
        grid-template-columns: 45% 55% !important; /* Ensure image dominance */
    }

    /* Ensure hero content doesn't over-compress */
    .hero-content {
        max-width: 650px;
    }

    /* Ensure image scales to fill available space */
    .hero-image {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .screenshot-main {
        width: 100%;
        max-width: 900px; /* Allow larger on big screens */
        height: auto;
        object-fit: contain;
    }
}

/* ========================================
   VISUAL ENHANCEMENTS: Desktop Hero Image
   Make screenshot more prominent with visual effects
   ======================================== */
@media (min-width: 1024px) {
    /* Enhanced static expansion hover effect */
    .hero-image:hover .screenshot-main {
        transform: scale(1.08); /* 8% expansion - no rotation */
        box-shadow: 0 25px 90px rgba(0, 0, 0, 0.9), 0 0 70px var(--primary-glow);
    }

    /* Smooth bouncy transition for premium feel */
    .screenshot-main {
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), /* Bouncy easing */
                    box-shadow 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    /* Add subtle pulsing glow effect */
    @keyframes hero-image-pulse {
        0%, 100% {
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 40px var(--primary-glow);
        }
        50% {
            box-shadow: 0 16px 64px rgba(0, 0, 0, 0.7), 0 0 60px var(--primary-glow);
        }
    }

    .screenshot-main {
        animation: hero-image-pulse 4s ease-in-out infinite;
    }

    /* Pause animation on hover */
    .hero-image:hover .screenshot-main {
        animation: none;
    }

    /* Hero image clickable link styles */
    .hero-image-link {
        display: block;
        cursor: pointer;
        text-decoration: none;
        outline: none;
    }

    .hero-image-link:focus-visible {
        outline: 3px solid var(--primary-color);
        outline-offset: 4px;
        border-radius: var(--radius-xl);
    }
}

/* ========================================
   FIX: Remove max-width constraint on desktop
   The previous .hero-image max-width: 600px (line 1300)
   was preventing desktop images from growing
   ======================================== */
@media (min-width: 1024px) {
    .hero-image {
        max-width: none !important; /* Remove 600px constraint */
        width: 100%; /* Fill grid column */
    }
}

/* ========================================
   RATIONALE FOR SIZE CHOICES:

   Desktop Viewports:
   - 1920px (Full HD): Image ~1000px wide (52% of viewport)
     - Ensures screenshot is clearly visible
     - Maintains text readability
     - Creates visual impact

   - 1440px (Common Laptop): Image ~850px wide (59% of viewport)
     - Balanced proportions
     - Screenshot is hero element
     - Text remains prominent

   - 1024px (Small Desktop): Image ~650px wide (63% of viewport)
     - Equal text/image balance
     - Optimized for space constraints

   Grid Layout Philosophy:
   - Text: 45% (maintains readability, doesn't dominate)
   - Image: 55% (becomes hero element, creates visual impact)
   - Gap: 32-48px (comfortable breathing room)

   Visual Enhancement:
   - Increased box shadows (depth perception)
   - Enhanced glassmorphism borders (modern aesthetic)
   - Pulsing glow animation (draws attention)
   - Pronounced 3D hover effect (interactivity)
   ======================================== */

/* ========================================
   END OF DESKTOP HERO IMAGE SIZING FIXES
   ======================================== */

/* NEW Badge Styling for Feature Cards and Blog Posts */
.badge-new {
    background: var(--gradient-primary);
    color: var(--bg-primary);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    letter-spacing: 1.2px;
    box-shadow: 0 0 20px var(--primary-glow);
    display: inline-block;
    text-transform: uppercase;
    animation: pulse-glow 3s ease-in-out infinite;
    margin-bottom: var(--spacing-md);
}

.feature-card-new {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(249, 168, 37, 0.2);
}

.feature-card-new:hover {
    box-shadow: 0 0 40px rgba(249, 168, 37, 0.4), var(--shadow-xl);
}

/* ========================================
   BLOG & UPDATES PAGE STYLES
   Added: 2025-10-14
   ======================================== */

/* Blog Hero Section */
.hero-section {
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0.05;
    z-index: 0;
}

.hero-section .hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.hero-section .hero-title {
    font-size: 3rem;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0 auto 1.5rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-section .hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
    font-weight: 400;
}

/* Blog Post Card Container */
.blog-post-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.blog-post-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.blog-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(249, 168, 37, 0.15);
    border-color: rgba(249, 168, 37, 0.5);
}

.blog-post-card:hover::before {
    transform: scaleX(1);
}

/* Blog Post Header */
.blog-post-header {
    margin-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.blog-post-title {
    font-size: var(--font-2xl);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.blog-post-meta {
    color: var(--text-tertiary);
    font-size: var(--font-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 500;
}

/* Blog Post Content */
.blog-post-content h3 {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--primary);
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-lg);
    line-height: 1.3;
}

.blog-post-content p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-base);
}

.blog-post-content ul {
    list-style: none;
    margin: var(--spacing-lg) 0;
    padding: 0;
}

.blog-post-content li {
    color: var(--text-secondary);
    line-height: 1.9;
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
    position: relative;
    font-size: var(--font-base);
}

.blog-post-content li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
    transition: transform 0.2s ease;
}

.blog-post-content li:hover::before {
    transform: translateX(4px);
}

.blog-post-content code {
    background: rgba(249, 168, 37, 0.15);
    color: var(--primary-light);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 0.9em;
    border: 1px solid rgba(249, 168, 37, 0.2);
    font-weight: 600;
    word-break: break-word; /* Allow long code to wrap on mobile */
    overflow-wrap: break-word;
}

/* Code blocks (pre tags) */
.blog-post-content pre {
    background: rgba(26, 26, 26, 0.95);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    overflow-x: auto; /* Enable horizontal scrolling */
    margin: var(--spacing-lg) 0;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.blog-post-content pre code {
    background: none;
    border: none;
    padding: 0;
    word-break: normal; /* Don't break code in pre blocks */
    overflow-wrap: normal;
    white-space: pre; /* Preserve formatting */
}

/* Blog Post Actions */
.blog-post-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.blog-post-actions .btn {
    margin: 0;
    min-width: 180px;
}

/* Navigation Active State */
.nav-links a.active {
    background: var(--bg-elevated);
    color: var(--primary);
}

.nav-links a.active::before {
    transform: translateX(-50%) scaleX(1);
}

/* CTA Section for Blog */
.cta-section {
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
    position: relative;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}

.cta-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h2 {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-lg);
}

.cta-content p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--spacing-xl);
}

/* Responsive Blog Styles */
@media (max-width: 768px) {
    .hero-section {
        padding: 80px 0 60px;
    }

    .hero-section .hero-title {
        font-size: 2.25rem;
    }

    .hero-section .hero-subtitle {
        font-size: 1.125rem;
    }

    .blog-post-card {
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-2xl);
    }

    .blog-post-title {
        font-size: var(--font-xl);
    }

    .blog-post-content h3 {
        font-size: var(--font-lg);
        margin-top: var(--spacing-xl);
    }

    .blog-post-content li {
        padding-left: var(--spacing-lg);
    }

    .blog-post-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .blog-post-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 60px 0 40px;
    }

    .hero-section .hero-title {
        font-size: 1.875rem;
    }

    .hero-section .hero-subtitle {
        font-size: 1rem;
    }

    .blog-post-card {
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }

    .blog-post-title {
        font-size: var(--font-lg);
    }

    .blog-post-header {
        padding-bottom: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .blog-post-content h3 {
        font-size: var(--font-base);
        margin-top: var(--spacing-lg);
    }

    .blog-post-content p,
    .blog-post-content li {
        font-size: var(--font-sm);
    }

    .badge-new {
        font-size: 0.6rem;
        padding: 5px 10px;
    }
}

/* ========================================
   END OF BLOG & UPDATES PAGE STYLES
   ======================================== */