/* ============================================================
   PERFECT COMPUTING SOLUTIONS - ENTERPRISE STYLESHEET
   File: styles.css  
   Author: PCS Development Team
   Description: Enterprise-grade dark emerald green theme with premium gold accents
                specifically designed for cybersecurity and financial software presentation
   Version: 4.0 - Production Ready with Comprehensive Documentation
   Last Updated: 2024
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES (VARIABLES) DEFINITION
   Purpose: Centralized design system for consistent theming across all components
   Benefits: Easy maintenance, consistent branding, rapid prototyping
   ============================================================ */
:root {
    /* ==================== PCS BRAND COLOR PALETTE ==================== */
    /* Emerald Greens - Represents security, growth, and premium quality */
    --emerald-dark: #001a00;      /* Deepest background - creates depth and sophistication */
    --emerald-medium: #002b00;    /* Primary background - main content areas */
    --emerald-light: #004d00;     /* Secondary elements - cards, containers */
    --emerald-bright: #006600;    /* Accent borders - highlights and interactive elements */
    
    /* Gold Spectrum - Represents premium quality, value, and excellence */
    --gold-primary: #FFD140;      /* Primary brand gold - main CTAs and highlights */
    --gold-secondary: #FFCC33;    /* Secondary gold - hover states and secondary elements */
    --gold-dark: #D4AF37;         /* Dark gold - borders and subtle accents */
    
    /* Neutral Colors - Ensure readability and contrast compliance */
    --white: #ffffff;             /* Primary text color - maximum readability */
    --gray-light: #bdbdbd;        /* Secondary text - less important information */
    --gray-dark: #666666;         /* Tertiary text - metadata and disabled states */
    
    /* ==================== LAYOUT AND SPACING SYSTEM ==================== */
    /* Container System - Based on 8px grid system for consistent spacing */
    --container-max: 1200px;      /* Maximum content width for large displays */
    --border-radius: 12px;        /* Consistent border radius for modern appearance */
    --section-spacing: 3rem;      /* Vertical spacing between major sections */
    --card-spacing: 2rem;         /* Spacing between cards in grid layouts */
    
    /* ==================== TYPOGRAPHY SCALE ==================== */
    /* Modular scale for consistent type hierarchy (1.25 ratio - perfect fourth) */
    --text-xs: 0.75rem;           /* 12px - Labels, captions, fine print */
    --text-sm: 0.875rem;          /* 14px - Small text, navigation items */
    --text-base: 1rem;            /* 16px - Body text, default size */
    --text-lg: 1.125rem;          /* 18px - Lead text, important content */
    --text-xl: 1.25rem;           /* 20px - Subheadings, card titles */
    --text-2xl: 1.5rem;           /* 24px - Section headings */
    --text-3xl: 1.875rem;         /* 30px - Major headings */
    --text-4xl: 2.25rem;          /* 36px - Hero subheadings */
    --text-5xl: 3rem;             /* 48px - Primary hero headings */
}

/* ============================================================
   GLOBAL RESET AND BASE STYLES
   Purpose: Normalize browser defaults and establish consistent baseline
   Methodology: Modern CSS reset with careful preservation of useful defaults
   ============================================================ */
*,
*::before,
*::after {
    /* Border-box sizing: Padding and borders are included in element's total width/height */
    /* This prevents layout shifts and makes responsive design more predictable */
    box-sizing: border-box;
    
    /* Remove default margins and padding for consistent spacing control */
    /* We'll add margins systematically through our spacing system */
    margin: 0;
    padding: 0;
}

/* HTML Root Element Configuration */
html {
    /* Base font size: 16px for accessibility and consistent rem calculations */
    /* Users can override this with browser zoom while maintaining proportions */
    font-size: 16px;
    
    /* Smooth scrolling for better user experience with anchor links */
    /* Only applied if user doesn't prefer reduced motion */
    scroll-behavior: smooth;
}

/* Body Element - Foundation of All Content */
body {
    /* Font Stack: Modern system fonts with fallbacks for cross-platform consistency */
    /* Segoe UI (Windows), Arial (universal), Helvetica Neue (macOS), sans-serif (final fallback) */
    font-family: 'Segoe UI', 'Arial', 'Helvetica Neue', sans-serif;
    
    /* Background: Emerald gradient for premium appearance and brand consistency */
    /* 135-degree angle creates dynamic visual flow from top-left to bottom-right */
    background: linear-gradient(135deg, var(--emerald-dark) 0%, var(--emerald-medium) 100%);
    
    /* Text color: Pure white for maximum contrast and readability */
    color: var(--white);
    
    /* Line height: 1.6 for optimal readability (WCAG recommendation) */
    line-height: 1.6;
    
    /* Minimum height: Ensure full viewport coverage */
    min-height: 100vh;
    
    /* Horizontal overflow: Prevent unwanted horizontal scrolling */
    overflow-x: hidden;
}

/* ============================================================
   MAIN LAYOUT CONTAINER SYSTEM
   Purpose: Center content with appropriate padding at different viewport sizes
   Methodology: Mobile-first responsive container with progressive enhancement
   ============================================================ */
.site-container {
    /* Full width with maximum constraint for large displays */
    width: 100%;
    max-width: var(--container-max);
    
    /* Horizontal centering with automatic margins */
    margin: 0 auto;
    
    /* Base padding: 1.5rem (24px) for mobile devices */
    padding: 1.5rem;
}

/* Tablet Breakpoint: 768px and above */
@media (min-width: 768px) {
    .site-container {
        /* Increased padding for larger screens with more space */
        padding: 2rem;
    }
}

/* Desktop Breakpoint: 1200px and above */
@media (min-width: 1200px) {
    .site-container {
        /* Maximum padding for large desktop displays */
        padding: 3rem;
    }
}

/* ============================================================
   SITE HEADER AND BRANDING COMPONENT
   Purpose: Primary branding area with logo, company name, and navigation
   Design: Premium card-like appearance with subtle animations
   ============================================================ */
.site-header {
    /* Background: Emerald gradient for depth and visual interest */
    background: linear-gradient(135deg, var(--emerald-light) 0%, var(--emerald-medium) 100%);
    
    /* Border: Bright emerald for definition with consistent radius */
    border: 2px solid var(--emerald-bright);
    border-radius: var(--border-radius);
    
    /* Internal spacing: 2rem (32px) on all sides */
    padding: 2rem;
    
    /* External spacing: Section spacing below header */
    margin-bottom: var(--section-spacing);
    
    /* Shadow: Deep shadow for elevation and separation from background */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    
    /* Positioning context for pseudo-elements */
    position: relative;
    
    /* Contain animated elements within header bounds */
    overflow: hidden;
}

/* Animated Shimmer Effect - Creates premium feel on hover */
.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start completely off-screen to the left */
    width: 100%;
    height: 100%;
    
    /* Shimmer gradient: Transparent -> Gold -> Transparent */
    background: linear-gradient(90deg, transparent, rgba(255, 209, 64, 0.1), transparent);
    
    /* Smooth transition for left position */
    transition: left 0.6s ease;
}

/* Shimmer animation trigger on header hover */
.site-header:hover::before {
    left: 100%; /* Move completely off-screen to the right */
}

/* Brand Container - Logo and Text Grouping */
.brand {
    /* Flexbox for vertical centering and stacking */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* Consistent spacing between logo and text */
    text-align: center;
}

/* Company Logo Styling */
.brand-logo {
    /* Responsive width: Minimum of 100% container width, maximum 320px */
    width: min(100%, 320px);
    height: auto; /* Maintain aspect ratio */
    border-radius: 12px; /* Slightly rounded corners for modern look */
    
    /* Subtle scale animation on hover for interactivity */
    transition: transform 0.3s ease;
}

/* Logo hover effect: Slight scale for tactile feedback */
.brand-logo:hover {
    transform: scale(1.02);
}

/* Company Name Typography */
.brand-name {
    /* Responsive font size: Scales from 1.5rem to 2.25rem based on viewport */
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    font-weight: 800; /* Extra bold for prominence */
    color: var(--white);
    
    /* Text shadow for better readability over potential complex backgrounds */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Company Tagline Styling */
.brand-tagline {
    /* Responsive font size: Scales from 1rem to 1.25rem */
    font-size: clamp(var(--text-base), 2.5vw, var(--text-xl));
    color: var(--gray-light); /* Subtle gray for secondary information */
    line-height: 1.4; /* Slightly tighter line height for short text */
}

/* ============================================================
   PRIMARY NAVIGATION COMPONENT
   Purpose: Main site navigation with interactive menu items
   Design: Gold-accented buttons with sophisticated hover effects
   Accessibility: Full keyboard navigation and screen reader support
   ============================================================ */
.primary-nav {
    /* Spacing above navigation to separate from branding */
    margin-top: 1.5rem;
}

/* Navigation List Container */
.nav-list {
    /* Remove default list styling */
    list-style: none;
    
    /* Flexbox for horizontal layout with wrapping */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem; /* Consistent spacing between items */
    padding: 0;
}

/* Individual Navigation Items */
.nav-item {
    flex: 1; /* Equal distribution of available space */
    min-width: 140px; /* Minimum touch target size for mobile */
    max-width: 160px; /* Maximum width to prevent over-stretching */
}

/* Navigation Links - Interactive Elements */
.nav-link {
    /* Block-level display for full clickable area */
    display: block;
    text-decoration: none; /* Remove default underline */
    color: var(--gold-primary); /* Brand gold color */
    font-weight: 600; /* Semi-bold for prominence */
    
    /* Padding: Vertical 0.875rem (14px), Horizontal 1rem (16px) */
    padding: 0.875rem 1rem;
    border-radius: var(--border-radius); /* Consistent border radius */
    
    /* Background: Dark gradient for contrast against header */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    
    /* Border: Subtle gold accent */
    border: 1px solid rgba(255, 209, 64, 0.3);
    
    /* Smooth transitions for all animatable properties */
    transition: all 0.3s ease;
    font-size: var(--text-sm); /* Appropriate text size */
    text-align: center;
    
    /* Positioning for pseudo-element animations */
    position: relative;
    overflow: hidden; /* Contain shimmer effect */
}

/* Shimmer Effect for Navigation Links */
.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start off-screen left */
    width: 100%;
    height: 100%;
    
    /* Gold shimmer gradient */
    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
    transition: left 0.5s ease;
}

/* Shimmer animation on link hover */
.nav-link:hover::before {
    left: 100%; /* Move off-screen right */
}

/* Navigation Link Hover State */
.nav-link:hover {
    /* Background: Switch to gold gradient */
    background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-secondary) 100%);
    
    /* Text color: Dark for contrast against gold background */
    color: var(--emerald-dark);
    
    /* Lift effect for tactile feedback */
    transform: translateY(-2px);
    
    /* Enhanced shadow for elevation */
    box-shadow: 0 8px 25px rgba(255, 209, 64, 0.4);
    
    /* Border: Solid gold to match background */
    border-color: var(--gold-primary);
}

/* ============================================================
   HERO SECTION COMPONENT
   Purpose: Primary attention area with video background and key messaging
   Design: Animated border with video overlay and centered content
   ============================================================ */
.hero-section {
    /* Positioning for video and overlay */
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden; /* Contain video and border effects */
    margin-bottom: var(--section-spacing);
    
    /* Animated Gradient Border Technique */
    /* Uses background-clip to create sophisticated border effects */
    border: 3px solid transparent;
    background: 
        /* Inner background - emerald dark */
        linear-gradient(var(--emerald-dark), var(--emerald-dark)) padding-box,
        /* Animated border gradient */
        linear-gradient(45deg, var(--emerald-bright), var(--gold-primary), var(--emerald-bright)) border-box;
    
    /* Background size for animation */
    background-size: 200% 200%;
    
    /* Continuous border animation */
    animation: borderGlow 3s ease-in-out infinite;
    
    /* Deep shadow for dramatic effect */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Border Glow Animation Keyframes */
@keyframes borderGlow {
    0%, 100% { 
        background-position: 0% 50%; /* Start and end position */
    }
    50% { 
        background-position: 100% 50%; /* Middle position */
    }
}

/* Hero Background Video */
.hero-video {
    width: 100%;
    height: 400px; /* Fixed height for consistent aspect ratio */
    object-fit: cover; /* Ensure video covers entire area without distortion */
    opacity: 0.3; /* Low opacity for text readability */
    filter: brightness(0.8); /* Slightly darken for better contrast */
}

/* Tablet Video Height Adjustment */
@media (min-width: 768px) {
    .hero-video {
        height: 500px; /* Taller video for larger screens */
    }
}

/* Hero Content Overlay */
.hero-overlay {
    /* Perfect centering technique */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Content alignment */
    text-align: center;
    width: 90%; /* Responsive width with maximum constraint */
    max-width: 800px; /* Prevent overly wide text lines */
    padding: 2rem;
}

/* Primary Hero Heading */
.hero-title {
    /* Responsive font scaling from 1.875rem to 3rem */
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    font-weight: 800; /* Extra bold for impact */
    color: var(--gold-primary); /* Brand gold for prominence */
    margin-bottom: 1rem; /* Space below heading */
    
    /* Text shadow for readability over video */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    line-height: 1.2; /* Tighter line height for headings */
}

/* Hero Subtitle/Description */
.hero-subtitle {
    /* Responsive font scaling from 1.125rem to 1.5rem */
    font-size: clamp(var(--text-lg), 3vw, var(--text-2xl));
    color: var(--white);
    margin-bottom: 2rem; /* More space above CTA buttons */
    line-height: 1.4; /* Comfortable reading line height */
    opacity: 0.9; /* Slightly transparent for hierarchy */
}

/* Call-to-Action Button Container */
.hero-actions {
    display: flex;
    gap: 1rem; /* Consistent spacing between buttons */
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

/* ============================================================
   BUTTON COMPONENT SYSTEM
   Purpose: Interactive elements for user actions and navigation
   Design: Two variants (primary solid, secondary outline) with consistent interactions
   Accessibility: Full keyboard and screen reader support
   ============================================================ */
.btn {
    /* Flexbox for perfect centering of button content */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Padding: Vertical 0.875rem (14px), Horizontal 2rem (32px) */
    padding: 0.875rem 2rem;
    border-radius: 50px; /* Pill shape for modern appearance */
    
    /* Typography */
    font-weight: 700; /* Bold for emphasis */
    text-decoration: none; /* Remove underline for links */
    text-align: center;
    
    /* Interactive properties */
    border: none; /* Remove default border */
    cursor: pointer; /* Pointer cursor for interactivity */
    
    /* Smooth transitions for all animatable properties */
    transition: all 0.3s ease;
    font-size: var(--text-base); /* Standard text size */
    min-width: 160px; /* Minimum touch target size */
    
    /* Positioning for shine effect */
    position: relative;
    overflow: hidden; /* Contain pseudo-element */
}

/* Button Shine Effect */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start off-screen left */
    width: 100%;
    height: 100%;
    
    /* Shine gradient: Transparent -> White highlight -> Transparent */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

/* Shine animation on button hover */
.btn:hover::before {
    left: 100%; /* Move off-screen right */
}

/* PRIMARY BUTTON VARIANT - For main calls to action */
.btn-primary {
    /* Gold gradient background for high prominence */
    background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-secondary) 100%);
    color: var(--emerald-dark); /* Dark text for contrast */
    
    /* Shadow for elevation and visual separation */
    box-shadow: 0 4px 15px rgba(255, 209, 64, 0.4);
}

/* Primary button hover state */
.btn-primary:hover {
    /* Lift effect for tactile feedback */
    transform: translateY(-3px);
    
    /* Enhanced shadow for greater elevation */
    box-shadow: 0 8px 25px rgba(255, 209, 64, 0.6);
}

/* SECONDARY BUTTON VARIANT - For alternative actions */
.btn-secondary {
    /* Transparent background with gold border */
    background: transparent;
    color: var(--gold-primary);
    border: 2px solid var(--gold-primary);
    
    /* Subtle shadow for depth */
    box-shadow: 0 4px 15px rgba(255, 209, 64, 0.2);
}

/* Secondary button hover state */
.btn-secondary:hover {
    /* Semi-transparent gold background on hover */
    background: rgba(255, 209, 64, 0.1);
    color: var(--white); /* White text for better contrast */
    
    /* Consistent lift effect */
    transform: translateY(-3px);
    
    /* Enhanced shadow */
    box-shadow: 0 8px 25px rgba(255, 209, 64, 0.4);
}

/* ============================================================
   PRODUCT CARDS GRID SYSTEM
   Purpose: Showcase software products in an engaging, scannable layout
   Design: Interactive cards with hover effects and consistent information hierarchy
   ============================================================ */
.products-grid {
    /* CSS Grid for responsive, equal-height card layouts */
    display: grid;
    
    /* Responsive columns: Minimum 350px, maximum 1 fraction */
    /* auto-fit creates as many columns as possible within container */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
    
    /* Consistent spacing between cards */
    gap: var(--card-spacing);
    
    /* Spacing below grid section */
    margin-bottom: var(--section-spacing);
}

/* INDIVIDUAL PRODUCT CARD COMPONENT */
.product-card {
    /* Emerald gradient background for premium appearance */
    background: linear-gradient(135deg, var(--emerald-light) 0%, var(--emerald-medium) 100%);
    
    /* Border: Bright emerald for definition */
    border: 2px solid var(--emerald-bright);
    border-radius: var(--border-radius);
    
    /* Internal spacing: 2rem (32px) on all sides */
    padding: 2rem;
    
    /* Smooth transitions for interactive states */
    transition: all 0.4s ease;
    
    /* Positioning context for decorative elements */
    position: relative;
    overflow: hidden; /* Contain pseudo-elements */
    
    /* Flexbox for consistent card content layout */
    display: flex;
    flex-direction: column;
    height: 100%; /* Equal height cards in grid */
}

/* Animated Top Border Indicator */
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px; /* Thin border line */
    
    /* Gold gradient for premium accent */
    background: linear-gradient(90deg, var(--gold-primary), var(--gold-secondary));
    
    /* Start invisible (scaleX: 0) */
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

/* Animated border reveal on card hover */
.product-card:hover::before {
    transform: scaleX(1); /* Full width reveal */
}

/* Card Hover State - Enhanced Interaction */
.product-card:hover {
    /* Lift effect for tactile feedback */
    transform: translateY(-8px);
    
    /* Border color change to gold */
    border-color: var(--gold-primary);
    
    /* Enhanced shadow for greater elevation */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Product Icon/Emoji Styling */
.product-icon {
    font-size: 2.5rem; /* Large emoji/icons for visual interest */
    margin-bottom: 1rem; /* Space below icon */
}

/* Product Title Typography */
.product-title {
    font-size: var(--text-xl); /* 1.25rem for prominence */
    font-weight: 700; /* Bold for hierarchy */
    color: var(--gold-primary); /* Gold for brand consistency */
    margin-bottom: 1rem; /* Space below title */
    line-height: 1.3; /* Tighter line height for headings */
}

/* Product Meta Information Row */
.product-meta {
    /* Flexbox for horizontal layout with wrapping */
    display: flex;
    justify-content: space-between; /* Category left, status right */
    align-items: center;
    margin-bottom: 1rem; /* Space below meta row */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 0.5rem; /* Consistent spacing between items */
}

/* Product Category Text */
.product-category {
    font-size: var(--text-sm); /* Smaller text for secondary information */
    color: var(--gray-light); /* Subtle gray color */
}

/* Status Badge Component */
.status-badge {
    /* Padding: Vertical 0.375rem (6px), Horizontal 0.75rem (12px) */
    padding: 0.375rem 0.75rem;
    border-radius: 20px; /* Pill shape */
    font-size: var(--text-xs); /* Very small text */
    font-weight: 700; /* Bold for emphasis */
    text-transform: uppercase; /* ALL CAPS for badge style */
}

/* ACTIVE Status Badge Variant */
.status-active {
    background: rgba(0, 170, 0, 0.2); /* Semi-transparent green */
    color: #00cc00; /* Bright green text */
    border: 1px solid rgba(0, 170, 0, 0.4); /* Green border */
}

/* COMMANDO Status Badge Variant */
.status-commando {
    background: rgba(255, 209, 64, 0.2); /* Semi-transparent gold */
    color: var(--gold-primary); /* Gold text */
    border: 1px solid rgba(255, 209, 64, 0.4); /* Gold border */
}

/* Product Description Text */
.product-description {
    color: var(--white);
    line-height: 1.6; /* Comfortable reading line height */
    margin-bottom: 1.5rem; /* Space above action buttons */
    flex-grow: 1; /* Push buttons to bottom of card */
    opacity: 0.9; /* Slightly transparent for hierarchy */
}

/* Product Action Buttons Container */
.product-actions {
    display: flex;
    gap: 0.75rem; /* Consistent spacing between buttons */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    margin-top: auto; /* Push to bottom of flex container */
}

/* Button Sizing within Product Cards */
.product-actions .btn {
    flex: 1; /* Equal width distribution */
    min-width: 120px; /* Minimum button width */
    font-size: var(--text-sm); /* Slightly smaller text */
    padding: 0.75rem 1.5rem; /* Adjusted padding for card context */
}

/* ============================================================
   SITE FOOTER COMPONENT
   Purpose: Secondary information and visit counter
   Design: Subtle container with minimal visual weight
   ============================================================ */
.site-footer {
    /* Background: Dark emerald gradient for separation */
    background: linear-gradient(135deg, var(--emerald-dark) 0%, var(--emerald-medium) 100%);
    
    /* Top border: Subtle gold accent line */
    border-top: 1px solid rgba(255, 209, 64, 0.2);
    border-radius: var(--border-radius);
    
    /* Internal spacing */
    padding: 2rem;
    text-align: center;
    
    /* External spacing above footer */
    margin-top: var(--section-spacing);
}

/* Footer Main Text */
.footer-text {
    font-size: var(--text-lg); /* Slightly larger for prominence */
    color: var(--white);
    margin-bottom: 0.5rem; /* Space above counter */
}

/* Visit Counter Text */
.footer-counter {
    font-size: var(--text-sm); /* Smaller text for secondary information */
    color: var(--gray-light); /* Subtle gray color */
}

/* ============================================================
   RESPONSIVE BREAKPOINT SYSTEM
   Purpose: Adapt layout and typography for different screen sizes
   Methodology: Mobile-first with progressive enhancement
   ============================================================ */

/* MOBILE BREAKPOINT: 767px and below */
@media (max-width: 767px) {
    .site-container {
        padding: 1rem; /* Reduced padding for mobile */
    }
    
    .site-header {
        padding: 1.5rem 1rem; /* Adjusted header padding */
    }
    
    .nav-list {
        flex-direction: column; /* Stack navigation vertically */
        gap: 0.5rem; /* Tighter spacing */
    }
    
    .nav-item {
        min-width: auto; /* Remove minimum width constraints */
        max-width: none; /* Allow full width */
    }
    
    .hero-actions {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center alignment */
    }
    
    .hero-actions .btn {
        width: 100%; /* Full width buttons */
        max-width: 280px; /* But with maximum width constraint */
    }
    
    .product-actions {
        flex-direction: column; /* Stack action buttons */
    }
    
    .product-actions .btn {
        width: 100%; /* Full width buttons in cards */
    }
}

/* TABLET BREAKPOINT: 768px to 1199px */
@media (min-width: 768px) and (max-width: 1199px) {
    .products-grid {
        /* Two-column layout for tablets */
        grid-template-columns: repeat(2, 1fr);
    }
}

/* DESKTOP BREAKPOINT: 1200px and above */
@media (min-width: 1200px) {
    .products-grid {
        /* Three-column layout for large screens */
        grid-template-columns: repeat(3, 1fr);
    }
    
    .hero-video {
        height: 600px; /* Taller video for desktop */
    }
}

/* LARGE DESKTOP BREAKPOINT: 1400px and above */
@media (min-width: 1400px) {
    .site-container {
        max-width: 1400px; /* Extended maximum width */
    }
}

/* ============================================================
   UTILITY CLASSES
   Purpose: Reusable helper classes for common styling needs
   Benefits: Rapid prototyping, consistent spacing, reduced CSS duplication
   ============================================================ */
.text-center { text-align: center; }
.text-gold { color: var(--gold-primary); }
.text-emerald { color: var(--emerald-bright); }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* ============================================================
   ACCESSIBILITY ENHANCEMENTS
   Purpose: Ensure compliance with WCAG guidelines and support assistive technologies
   Methodology: Progressive enhancement with user preference respect
   ============================================================ */

/* REDUCED MOTION SUPPORT */
/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        /* Drastically reduce or remove all animations */
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* FOCUS INDICATORS FOR KEYBOARD NAVIGATION */
/* Enhanced focus styles for accessibility */
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--gold-primary); /* High contrast outline */
    outline-offset: 2px; /* Space between element and outline */
}

/* HIGH CONTRAST MODE SUPPORT */
/* Enhanced contrast for users with visual impairments */
@media (prefers-contrast: high) {
    :root {
        --emerald-dark: #000000; /* Pure black for maximum contrast */
        --emerald-medium: #001100; /* Very dark green */
        --emerald-light: #002200; /* Dark green */
        --gold-primary: #FFFF00; /* Bright yellow for high visibility */
    }
}