/* Targeted changes for specific UI elements */

/* ========================================
   VERTICAL CAROUSEL SYSTEM
   Enhanced showcase cards with smooth vertical scrolling
   ======================================== */

/* Main carousel wrapper - defines the viewport that shows one card at a time */
.showcase-carousel-wrapper {
    position: relative;
    max-width: 798px; /* Increased by 33% from 600px for larger carousel display */
    margin: 0 auto;
    height: 399px; /* Increased by 33% from 300px for larger carousel display */
    overflow: hidden; /* Hide cards outside viewport */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Carousel container - handles the scrolling mechanism */
.showcase-carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Carousel track - contains all slides vertically stacked for smooth seamless transitions */
.showcase-carousel-track {
    display: flex;
    flex-direction: column;
    height: 800%; /* 8 cards (4 original + 4 duplicates) × 100% each for seamless loop */
    transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth flowing easing */
    will-change: transform; /* Optimize for animation performance */
}

/* Individual carousel slides - smooth flowing transitions */
.carousel-slide {
    flex: 0 0 12.5%; /* Each slide takes 12.5% of total track (8 slides total) */
    height: 12.5%;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative;
    opacity: 0.6; /* Inactive slides are gently dimmed */
    transform: scale(0.98); /* Subtle scale difference for depth */
    transition: all 1s ease-out; /* Smooth, gentle transitions */
}

/* Active slide styling - smooth emphasis with gentle scaling */
.carousel-slide.active {
    opacity: 1;
    transform: scale(1.01); /* Subtle emphasis for active slide */
    z-index: 2; /* Ensure active slide is on top */
    box-shadow: 0 8px 30px rgba(91, 58, 255, 0.12) !important; /* Gentle enhanced shadow */
}

/* Enhanced card styling for image-only carousel */
.showcase-carousel-wrapper .showcase-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    border: 2px solid rgba(91, 58, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.8s ease !important;
}

/* No hover effects on carousel cards - removed per user request */

/* Image container styling for full-image cards */

/* Image container for full-image cards - no padding, full coverage */
.showcase-carousel-wrapper .showcase-card-image {
    flex: 1; /* Take full height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important; /* No padding for full image coverage */
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%) !important;
    border-radius: 16px;
    overflow: hidden;
}

.showcase-carousel-wrapper .showcase-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Scale to fit within bounding box while maintaining aspect ratio */
    border-radius: 16px;
    transition: transform 0.8s ease;
}

/* Dynamic title in the main heading - Podmod branding blue */
.dynamic-title {
    color: #5B3AFF; /* Podmod branding blue */
    font-weight: 700;
    transition: opacity 0.6s ease;
    display: inline;
}

/* Dynamic title fade animation */
.dynamic-title.fade-out {
    opacity: 0;
}

.dynamic-title.fade-in {
    opacity: 1;
}

/* Align showcase intro with carousel left edge */
.showcase-intro {
    max-width: 798px; /* Match carousel max-width (increased by 33%) */
    margin: 0 auto 4rem auto !important; /* Center the container like carousel */
    text-align: left !important; /* Keep text left-aligned within the container */
}

/* 
 * Showcase intro heading - reduce font size from default h1 to ensure single line display
 * This heading was changed from h2 to h1, but needs smaller font to fit on one line
 */
.showcase-intro h1 {
    font-size: 2.5rem !important; /* Slightly smaller than h2 default (2.5rem) for better fit */
    line-height: 1.2 !important;
    white-space: nowrap; /* Prevent text wrapping to ensure single line */
    overflow: hidden; /* Hide any potential overflow */
    text-overflow: ellipsis; /* Add ellipsis if text is too long */
}

/* Responsive font sizes for showcase intro h1 to ensure single line on all devices */
@media (max-width: 992px) {
    .showcase-intro h1 {
        font-size: 2.5rem !important; /* Tablet: slightly smaller */
    }
}

@media (max-width: 768px) {
    .showcase-intro h1 {
        font-size: 2.6rem !important; /* Mobile: compact size for single line */
        white-space: normal; /* Allow wrapping on very small screens if needed */
    }
}

@media (max-width: 480px) {
    .showcase-intro h1 {
        font-size: 2.8rem !important; /* Small mobile: further reduced */
    }
}

@media (max-width: 360px) {
    .showcase-intro h1 {
        font-size: 1.5rem !important; /* Extra small mobile: minimal size */
    }
}

/* Navigation indicators - clickable dots below carousel */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 1.5rem;
    position: relative;
    z-index: 10;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #5B3AFF;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Active indicator styling */
.indicator.active {
    background: #5B3AFF;
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(91, 58, 255, 0.4);
}

/* No hover effects on indicators - removed per user request */

/* Progress bar - shows auto-play progress */
.carousel-progress {
    width: 100%;
    height: 4px;
    background: rgba(91, 58, 255, 0.2);
    border-radius: 2px;
    margin-top: 1rem;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #5B3AFF, #7C4DFF);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear; /* Smooth progress animation */
}

/* Seamless carousel track positions for smooth infinite loop */
.showcase-carousel-track[data-current="0"] { transform: translateY(0%); }      /* Images (original) */
.showcase-carousel-track[data-current="1"] { transform: translateY(-12.5%); } /* Articles (original) */
.showcase-carousel-track[data-current="2"] { transform: translateY(-25%); }   /* Videos (original) */
.showcase-carousel-track[data-current="3"] { transform: translateY(-37.5%); } /* AI Answers (original) */
.showcase-carousel-track[data-current="4"] { transform: translateY(-50%); }   /* Images (duplicate) - seamless loop reset */

/* Screen reader only class for accessibility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus indicators for keyboard navigation accessibility */
.indicator:focus {
    outline: 3px solid #5B3AFF;
    outline-offset: 3px;
}

/* Reduced motion support for users with motion sensitivity */
@media (prefers-reduced-motion: reduce) {
    .showcase-carousel-track,
    .carousel-slide,
    .indicator,
    .progress-bar,
    .carousel-icon {
        transition: opacity 0.5s ease !important; /* Keep gentle opacity transition */
        animation: none !important;
    }
    
    .showcase-carousel-track {
        transition: transform 0.8s ease !important; /* Slower, gentler transition for reduced motion */
    }
}

/* Mobile responsiveness for tablets */
@media (max-width: 768px) {
    .showcase-carousel-wrapper {
        max-width: 100%;
        height: 250px; /* Further reduced height for mobile compact design */
        margin: 0 1rem; /* Side margins for mobile */
    }
    
    /* Align showcase intro with carousel on mobile */
    .showcase-intro {
        max-width: 100% !important;
        margin: 0 1rem 4rem 1rem !important; /* Match carousel mobile margins */
    }
    
    .showcase-carousel-wrapper .showcase-card-header {
        padding: 0.6rem 1rem !important; /* More compact mobile padding */
        font-size: 0.9rem !important;
    }
    
    .carousel-icon {
        width: 18px;
        height: 18px;
    }
    
    .showcase-carousel-wrapper .showcase-card-image {
        padding: 0.8rem !important; /* Compact mobile image padding */
    }
}

/* Mobile responsiveness for phones */
@media (max-width: 480px) {
    .showcase-carousel-wrapper {
        height: 220px; /* Ultra-compact for small screens */
        margin: 0 0.5rem;
    }
    
    /* Align showcase intro with carousel on small mobile */
    .showcase-intro {
        margin: 0 0.5rem 4rem 0.5rem !important; /* Match carousel small mobile margins */
    }
    
    .carousel-indicators {
        gap: 8px;
        margin-top: 1rem;
    }
    
    .indicator {
        width: 10px;
        height: 10px;
    }
    
    .showcase-carousel-wrapper .showcase-card-header {
        padding: 0.5rem 0.8rem !important; /* Ultra-compact mobile padding */
        font-size: 0.85rem !important;
    }
    
    .showcase-carousel-wrapper .showcase-card-image {
        padding: 0.6rem !important; /* Ultra-compact mobile image padding */
    }
}

/* 1. Hero section text size increases - RESPONSIVE */
/* Desktop - Default */
/* Hero heading - increased font size for better impact and visual hierarchy */
.hero-content h1 {
    font-size: 3.5rem !important; /* Increased from 3rem - more impactful headline that fills the increased vertical spacing */
}

/* Large Desktop */
@media (max-width: 1200px) {
    .hero-content h1 {
        font-size: 3.7rem !important; /* Increased from 3.2rem - maintains proportional scaling */
    }
}

/* Tablet */
@media (max-width: 992px) {
    .hero-content h1 {
        font-size: 3.2rem !important; /* Increased from 2.8rem - better readability on tablet screens */
    }
}

/* Mobile - Large */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2rem !important; /* Mobile: Very small for better fit */
    }
}

/* Mobile - Medium */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2rem !important; /* Small mobile: Ultra compact */
    }
}

/* Mobile - Small */
@media (max-width: 400px) {
    .hero-content h1 {
        font-size: 2rem !important; /* Tiny mobile: Minimal size */
    }
}

/* Hero section sub heading - customized styling for cleaner look */
.hero-content p {
    font-size: 1.1rem !important; /* Smaller, more readable font size */
    line-height: 1.4 !important; /* Tighter line spacing for cleaner appearance */
    text-align: left !important; /* Left-aligned for cleaner, more structured look */
    max-width: 600px; /* Maintain readable line length */
}

/* 2. Blog categories - ensure category-tag uses the same styling as category/tag */
.category-tag {
    background-color: #f8f9ff !important;
    color: #5B3AFF !important;
    padding: 0.3rem 0.8rem !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease !important;
    display: inline-block !important;
    margin-right: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.category-tag:hover {
    background-color: #5B3AFF !important;
    color: white !important;
}

/* 3. Modern pagination styling */
.pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
    margin: 4rem 0 3rem 0 !important;
    padding: 2rem 0 !important;
}

/* Override default pagination link styles from blog.css */
.pagination a:not(.pagination-btn),
.pagination span:not(.pagination-btn):not(.pagination-info) {
    border-radius: 30px !important;
}

/* Active pagination buttons - more specific selectors to override default pagination styles */
.pagination .pagination-btn,
.pagination a.pagination-btn {
    background: linear-gradient(135deg, #5B3AFF 0%, #7C5EFF 100%) !important;
    color: white !important;
    padding: 0.875rem 1.75rem !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(91, 58, 255, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.pagination .pagination-btn:hover,
.pagination a.pagination-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(91, 58, 255, 0.3) !important;
    background: linear-gradient(135deg, #4A2DE8 0%, #6B4DFF 100%) !important;
}

/* Disabled pagination buttons */
.pagination .pagination-btn.disabled,
.pagination span.pagination-btn.disabled {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    border: 2px solid #e9ecef !important;
    border-radius: 30px !important;
}

.pagination .pagination-btn.disabled:hover,
.pagination span.pagination-btn.disabled:hover {
    transform: none !important;
    box-shadow: none !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

/* Page info styling */
.pagination .pagination-info,
.pagination span.pagination-info {
    background-color: #f8f9ff !important;
    color: #5B3AFF !important;
    padding: 0.875rem 1.5rem !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    border: 2px solid #e8ebff !important;
    min-width: 120px !important;
    text-align: center !important;
}

/* Enhanced styling for arrow symbols */
.pagination-btn:contains("←"):before {
    margin-right: 0.25rem;
}

.pagination-btn:contains("→"):after {
    margin-left: 0.25rem;
}

/* 4. Blog header consistency - white text for main blog header */
.blog-post-header h1 {
    background: none !important; 
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #333 !important;
    background-clip: initial !important;
    color: #333 !important;
}

/* Main blog page header - white text on gradient background */
.blog-header h1,
.blog-header .blog-title {
    background: none !important; 
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: initial !important;
    color: #ffffff !important;
}

/* Blog header description - white text */
.blog-header p,
.blog-header .blog-description {
    color: #ffffff !important;
}

/* 5. Header padding - subtle top padding for better logo spacing */
/* Increase main header padding with modest top padding */
header {
    padding: 0.8rem 0 0.2rem 0 !important; /* Subtle top padding, minimal bottom padding */
}

/* Increase container padding within header for better spacing */
header .container {
    padding: 0.3rem 1.5rem !important; /* Modest top padding for better logo spacing */
}

/* Reduce logo height slightly for more compact header */
.logo {
    height: 60px !important; /* Reduced from 75px to 60px for more compact appearance */
    margin: 0 !important; /* Ensure no extra margins */
    padding: 0 !important; /* Ensure no extra padding */
}

/* Ensure wide logo also follows the reduced height */
.wide-logo {
    height: 60px !important; /* Keep consistent with main logo */
}

/* Mobile optimization - maintain spacing on small screens */
@media (max-width: 768px) {
    header {
        padding: 0.7rem 0 0.2rem 0 !important; /* Subtle padding for mobile, minimal bottom */
    }
    
    header .container {
        padding: 0.2rem 1rem !important; /* Maintain padding on mobile */
    }
    
    .logo {
        height: 50px !important; /* Smaller logo on mobile for more compact header */
    }
}

/* 6. Hero content grid spacing reduction - better heading layout */
/* Reduce the gap between text and image for tighter composition */
/* Center hero content */
.hero-content {
    justify-content: center !important; /* Center the content horizontally */
    text-align: center !important; /* Center text alignment */
    gap: 0 !important; /* Remove gap for vertical stacking */
    padding: 0 2rem !important; /* Consistent padding */
}

.hero-text {
    text-align: center !important; /* Center text within hero-text */
    max-width: 900px !important; /* Allow wider text for centered layout */
    margin: 0 auto !important; /* Center the text container */
    padding-left: 1rem !important; /* Reduced padding for centered layout */
    padding-right: 1rem !important; /* Reduced padding for centered layout */
}

.hero h1 {
    text-align: center !important; /* Center the heading */
    color: #121212 !important; /* Dark black text */
    margin-bottom: 2.5rem !important; /* Increased spacing */
}

.hero p {
    text-align: center !important; /* Center the subheading - ensure it works on all views */
    color: #121212 !important; /* Dark black text */
    margin-bottom: 4rem !important; /* Increased from 2.5rem - more space before button for better visual separation */
    display: block !important; /* Ensure it's a block element for proper centering */
    width: 100% !important; /* Full width of container */
    margin-left: auto !important; /* Ensure centering on wide screens */
    margin-right: auto !important; /* Ensure centering on wide screens */
}

/* Extra wide screens - ensure center alignment */
@media (min-width: 1600px) {
    .hero p {
        text-align: center !important;
        max-width: 100% !important;
    }
    
    .hero-text {
        text-align: center !important;
    }
    
    .hero-content {
        padding: 0 2rem !important; /* Even padding for centered layout */
    }
}

/* Ultra-wide screens - ensure center alignment */
@media (min-width: 2000px) {
    .hero p {
        text-align: center !important;
        max-width: 100% !important;
    }
    
    .hero-text {
        text-align: center !important;
        max-width: 1000px !important; /* Slightly wider max-width for ultra-wide screens */
    }
    
    .hero-content {
        padding: 0 3rem !important; /* More padding for ultra-wide screens */
        justify-content: center !important;
    }
}

/* Add spacing above hero buttons to move them down */
/* Increased spacing between paragraph and button for better visual hierarchy */
.hero-buttons {
    margin-top: 3.5rem !important; /* Increased from 2rem - creates more distance from paragraph above */
    justify-content: center !important; /* Center the button */
}

/* Hero image styling - positioned below the button */
/* Increased spacing between button and hero image for better visual separation */
.hero-image {
    margin-top: 4.5rem !important; /* Increased from 3rem - more space between button and GIF */
    text-align: center; /* Center the image */
    width: 100%;
    max-width: 100%;
    padding: 0 1rem; /* Add padding for responsive spacing */
}

.hero-screenshot {
    width: 100%;
    max-width: 1200px; /* Constrain maximum width for better display */
    height: auto;
    border-radius: 0; /* No rounded corners for clean GIF display */
    box-shadow: none; /* No shadow for clean GIF display */
    display: block;
    margin: 0 auto; /* Center the image */
}

/* Responsive adjustments for reduced spacing */
@media (max-width: 1024px) {
    .hero-content {
        gap: 0 !important; /* No gap for vertical stacking */
        padding: 0 10px !important; /* Centered padding */
        justify-content: center !important; /* Keep centered on tablet */
    }
    
    .hero-text {
        padding-right: 0.75rem !important; /* Reduced tablet padding */
        padding-left: 0.75rem !important; /* Reduced tablet padding */
        text-align: center !important; /* Keep centered */
    }
    
    .hero-image {
        margin-top: 3rem !important; /* Increased from 2rem - maintains good spacing on tablet */
    }
}

@media (max-width: 768px) {
    .hero-content {
        gap: 0 !important; /* No gap for vertical stacking */
        padding: 0 15px !important; /* Keep horizontal padding but centered */
        justify-content: center !important; /* Keep centered on mobile */
        text-align: center !important; /* Keep centered */
        flex-direction: column !important; /* Ensure vertical stacking */
    }
    
    .hero-text {
        text-align: center !important; /* Keep centered on mobile */
        padding-left: 0.75rem !important; /* Reduced mobile padding */
        padding-right: 0.75rem !important; /* Reduced mobile padding */
    }
    
    .hero h1 {
        margin-bottom: 0.8rem !important; /* Slightly tighter on mobile */
        text-align: center !important; /* Keep centered */
    }
    
    .hero p {
        text-align: center !important; /* Keep centered */
    }
    
    .hero-buttons {
        margin-top: 2.5rem !important; /* Increased from 1.25rem - maintains good spacing on mobile while proportional to desktop */
        justify-content: center !important; /* Keep centered */
    }
    
    .hero-image {
        margin-top: 3rem !important; /* Increased from 2rem - better spacing on mobile between button and image */
        padding: 0 0.5rem !important; /* Tighter padding on mobile */
    }
    
    .hero-screenshot {
        max-width: 100% !important; /* Full width on mobile */
        border-radius: 0 !important; /* No rounded corners for clean GIF display */
    }
}

/* ----------------------------------------
   HERO CTA BUTTON RESILIENCE ON SMALL SCREENS
   Ensures the primary CTAs keep their copy on a
   single line while still centering neatly.
----------------------------------------- */
.hero .hero-waitlist-button,
.hero .learn-more-button {
    /* Use flexbox so the text stays centered even when we resize */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Prevent CTA text from breaking onto a second line */
    flex-shrink: 0;      /* Avoid shrinkage that could trigger wrapping */
}

/* On narrow devices we allow stacking while preserving breathing room */
@media (max-width: 540px) {
    .hero .hero-buttons {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important; /* Slightly wider gap for readability when stacked */
    }

    .hero .hero-waitlist-button,
    .hero .learn-more-button {
        padding: 0.85rem 1.45rem !important; /* Trim padding so copy fits within one line */
        font-size: 0.9rem !important;        /* Maintain legibility on small screens */
    }
}

/* Ultra-small devices get a touch more padding reduction */
@media (max-width: 400px) {
    .hero .hero-waitlist-button,
    .hero .learn-more-button {
        padding: 0.8rem 1.3rem !important;
    }
}

/* ========================================
   BACKGROUND ENHANCEMENTS - SECTION BY SECTION
   Subtle, tasteful backgrounds that add visual interest
   while maintaining focus on content
   ======================================== */

/* 1. HERO SECTION - Light purple gradient background matching design */
.hero {
    /* Light purple gradient background - more prominent than before */
    background: linear-gradient(180deg, 
        rgba(91, 58, 255, 0.15) 0%,     /* Light purple at top */
        rgba(240, 238, 255, 0.8) 40%,   /* Lighter purple in middle */
        rgba(250, 249, 255, 0.95) 70%,  /* Very light purple */
        rgba(255, 255, 255, 1) 100%     /* White at bottom */
    ) !important;
    
    position: relative;
}

/* 2. HOW PODMOD WORKS SECTION - Gentle divider with audio theme */
.features {
    /* Keep white background but add subtle top border */
    background-color: #ffffff !important;
    position: relative;
}

/* Gentle section divider with audio wave pattern */
.features::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    /* Subtle audio wave pattern using CSS */
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(91, 58, 255, 0.08) 20%, 
        rgba(91, 58, 255, 0.12) 50%, 
        rgba(91, 58, 255, 0.08) 80%, 
        transparent 100%
    );
    /* Add a very subtle dot pattern for audio theme */
    background-image: 
        radial-gradient(circle at 2px 1px, rgba(91, 58, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 3px;
    z-index: 1;
}

/* Optional: Add very subtle background pattern to features content area */
.features-container {
    position: relative;
    z-index: 2;
}

/* 3. VALUE PROPOSITION SECTION - Keep existing background (already perfect) */
/* The existing #f9f9ff background is already well-designed, no changes needed */

/* 4. DEMO INTERFACES SECTION - Maintain neutral background for UI focus */
.podmod-showcase {
    /* Keep pure white background to make interface images stand out */
    background-color: #ffffff !important;
    
    /* Add very subtle section separation */
    border-top: 1px solid rgba(91, 58, 255, 0.05);
    border-bottom: 1px solid rgba(91, 58, 255, 0.05);
}

/* 5. CTA SECTION - Bold background to draw attention */
/* ========================================
   VISION SECTION - Banner-style CTA Design
   Modern banner layout with gradient background,
   CTA buttons, and social media section
   ======================================== */

.vision {
    /* Solid purple background to match reference image */
    background: #6244FF !important;
    
    /* Padding for banner section */
    padding: 6rem 0 6rem !important;
    
    /* Center content */
    text-align: center;
}

/* Remove animated gradient for this section since we want a solid look */
/* Main headline - large, bold white text */
.vision-headline {
    color: #ffffff !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
    text-shadow: none !important;
}

/* Supporting subtitle - white text, centered */
.vision-subtitle {
    color: #ffffff !important;
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto 3.5rem auto !important;
    text-shadow: none !important;
}

/* CTA Container - centers single button with supporting text below */
.vision-cta-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 4rem;
}

/* Base button styles */
.vision-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px; /* Rounded pill shape */
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap; /* Prevent text wrapping */
}

/* Primary button - white background with blue/purple text and arrow icon */
.vision-btn-primary {
    background-color: #ffffff !important;
    color: #5B3AFF !important; /* Purple text to match reference */
    gap: 0.5rem;
}

.vision-btn-primary:hover {
    background-color: #f5f5f5 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Arrow icon in primary button */
.vision-btn-arrow {
    width: 1.1rem;
    height: 1.1rem;
    color: #5B3AFF; /* Purple arrow */
    stroke-width: 2.5px;
}

/* No Credit Card Required text - industry standard styling */
.vision-no-cc-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em;
}

/* Separator line - extremely subtle or removed based on image */
.vision-separator {
    width: 100%;
    max-width: 800px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1); /* Very subtle line */
    margin: 0 auto 3rem auto;
}

/* Community Section Container */
.vision-community {
    margin-top: 0;
}

/* Community heading - white uppercase text */
.vision-community-heading {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
}

/* Social Media Links Container */
.vision-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Individual social media link - icons with circle background */
.vision-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15); /* Circle background */
    color: #ffffff !important;
    font-size: 1.4rem !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

.vision-social-link:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Legacy card styles - keep for backward compatibility but hide */
.vision-card {
    display: none !important;
}

.vision-grid {
    display: none !important;
}


/* ========================================
   RESPONSIVE BACKGROUND OPTIMIZATIONS
   Ensure backgrounds scale gracefully across all devices
   ======================================== */

/* Tablet and smaller desktop optimizations */
@media (max-width: 1024px) {
    /* Reduce animation intensity on tablet for better performance */
    .vision {
        animation-duration: 15s; /* Slower animation */
    }
    
    /* Adjust gradient positions for better tablet display */
    .hero {
        background: linear-gradient(180deg, 
            rgba(91, 58, 255, 0.12) 0%,     /* Slightly lighter purple on tablet */
            rgba(240, 238, 255, 0.75) 40%,   
            rgba(250, 249, 255, 0.93) 75%,   
            rgba(255, 255, 255, 1) 100%                     
        ) !important;
    }
}

/* Mobile phone optimizations */
@media (max-width: 768px) {
    /* Reduce gradient complexity on mobile for better performance */
    .hero {
        background: linear-gradient(180deg, 
            rgba(91, 58, 255, 0.1) 0%,     /* Lighter purple on mobile */
            rgba(240, 238, 255, 0.7) 50%,   
            rgba(255, 255, 255, 1) 100%    /* Simpler gradient for mobile */
        ) !important;
    }
    
    /* Simplify CTA background for mobile - match solid color */
    .vision {
        background: #6244FF !important;
        padding: 4rem 0 4rem !important;
        animation: none !important;
    }
    
    
    /* Responsive styles for new vision banner design */
    .vision-headline {
        font-size: 2.5rem !important; /* Smaller headline on mobile but still big */
        margin-bottom: 1.5rem !important;
    }
    
    .vision-subtitle {
        font-size: 1.1rem !important; /* Smaller subtitle on mobile */
        margin-bottom: 2.5rem !important;
        padding: 0 1rem;
    }
    
    .vision-cta-container {
        margin-bottom: 3rem;
    }
    
    .vision-btn {
        width: 100%; /* Full width button on mobile */
        max-width: 320px; /* Slightly wider to accommodate longer text */
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem; /* Slightly smaller text on mobile */
    }
    
    .vision-no-cc-text {
        font-size: 0.8rem !important; /* Slightly smaller on mobile */
    }
    
    .vision-separator {
        margin: 2rem auto;
    }
    
    .vision-social-links {
        gap: 1.5rem; /* Smaller gap between icons on mobile */
    }
    
    .vision-social-link {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.2rem !important;
    }
    
}

/* Small mobile phone optimizations */
@media (max-width: 480px) {
    /* Static backgrounds on very small screens for better performance */
    .vision {
        background: #6244FF !important; /* Match main color */
        padding: 3rem 0 3rem !important; /* Reduced padding on small screens */
    }
    
    /* Even smaller text on very small screens */
    .vision-headline {
        font-size: 2rem !important;
    }
    
    .vision-subtitle {
        font-size: 1rem !important;
    }
    
    .vision-btn {
        font-size: 0.9rem !important;
        padding: 0.75rem 1.25rem;
        max-width: 100%; /* Full width on very small screens */
    }
    
    .vision-no-cc-text {
        font-size: 0.75rem !important; /* Even smaller on very small screens */
    }
    
    .vision-social-link {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.1rem !important;
    }
    
    /* Stronger card backgrounds on small screens */
    .vision-card {
        background-color: rgba(255, 255, 255, 1) !important; /* Fully opaque */
        backdrop-filter: none !important; /* Remove blur for better performance */
    }
    
    /* Simplify features divider on small screens */
    .features::before {
        height: 2px; /* Thinner divider */
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(91, 58, 255, 0.1) 50%, 
            transparent 100%
        ); /* Simpler gradient */
        background-image: none; /* Remove dot pattern */
    }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .vision {
        animation: none !important; /* Disable all animations for users who prefer reduced motion */
    }
    
    /* Provide static backgrounds for reduced motion users */
    .vision {
        background: linear-gradient(135deg, #5B3AFF 0%, #7B5EFF 100%) !important;
        background-size: 100% 100% !important;
    }
    
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hero {
        background: #ffffff !important; /* Pure white background for high contrast */
    }
    
    .vision-card {
        border: 2px solid #5B3AFF !important; /* Stronger borders */
        background-color: #ffffff !important; /* Pure white backgrounds */
    }
    
    .vision > .container > h2,
    .vision > .container > p {
        text-shadow: none !important; /* Remove text shadow for clarity */
    }
}

/* SECTION PADDING REDUCTIONS */
/* Reduce top padding in "How Podmod Works" section */
.features {
    padding-top: 1rem !important; /* Reduced from 1.5rem */
}

/* ========================================
   VALUE PROP SECTION (PAIN POINTS)
   Editorial split-screen layout - problem vs solution
   Bold typography, minimal text, alternating alignment
   ======================================== */

/* Section container */
.value-prop {
    padding: 6rem 0 !important;
    background-color: #f9f9ff;
}

/* Section intro header - bold and minimal */
.value-prop-intro {
    text-align: center;
    margin-bottom: 5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.value-prop-intro h2 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
    color: #121212;
    letter-spacing: -0.02em;
}

.value-prop-intro p {
    font-size: 1.3rem;
    line-height: 1.5;
    color: #666;
    margin: 0;
}

/* Container for all pain point items - creates flowing timeline effect */
.value-prop-items {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}

/* Connecting line that flows through all items - creates visual continuity */
.value-prop-items::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 5%;
    bottom: 5%;
    width: 2px;
    background: linear-gradient(180deg, 
        rgba(91, 58, 255, 0.1) 0%, 
        rgba(91, 58, 255, 0.3) 50%, 
        rgba(91, 58, 255, 0.1) 100%);
    transform: translateX(-50%);
    z-index: 0;
}

/* Individual pain point item - split screen layout */
.value-prop-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Inline connector between problem + solution cards (desktop hides it; mobile overrides) */
.value-prop-connector {
    display: none;
}

/* Connector dot in center - creates timeline node effect */
.value-prop-item::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #5B3AFF 0%, #7B5FFF 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(91, 58, 255, 0.15), 0 0 0 8px rgba(91, 58, 255, 0.08);
    z-index: 2;
}

/* Problem side - left aligned, subtle background with soft shadow */
.value-prop-problem {
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(91, 58, 255, 0.06);
    position: relative;
    border: 1px solid rgba(91, 58, 255, 0.1);
}

/* Number badge - large, bold */
.value-prop-number {
    font-size: 0.875rem;
    font-weight: 700;
    color: #5B3AFF;
    margin-bottom: 1.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Problem heading - large, bold */
.value-prop-problem h3 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: #121212;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

/* Problem description - concise */
.value-prop-problem p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* Solution side - right aligned, soft purple accent */
.value-prop-solution {
    padding: 2rem 2.5rem;
    position: relative;
    background: linear-gradient(135deg, rgba(91, 58, 255, 0.04) 0%, rgba(91, 58, 255, 0.02) 100%);
    border-radius: 20px;
    border: 1px solid rgba(91, 58, 255, 0.15);
}

.value-prop-solution p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #222;
    margin: 0;
    font-weight: 500;
}

/* Reversed layout - problem on right, solution on left */
.value-prop-item-reverse {
    grid-template-columns: 1fr 1fr;
}

.value-prop-item-reverse .value-prop-problem {
    order: 2;
}

.value-prop-item-reverse .value-prop-solution {
    order: 1;
}

/* Responsive design */
@media (max-width: 1024px) {
    .value-prop-item,
    .value-prop-item-reverse {
        gap: 3rem;
    }
    
    .value-prop-problem,
    .value-prop-solution {
        padding: 2rem;
    }
    
    .value-prop-problem h3 {
        font-size: 1.75rem;
    }
}

@media (max-width: 768px) {
    .value-prop {
        padding: 4rem 0 !important;
    }
    
    .value-prop-intro {
        margin-bottom: 3.5rem;
        padding: 0 1rem;
    }
    
    .value-prop-intro h2 {
        font-size: 2.25rem;
    }
    
    .value-prop-intro p {
        font-size: 1.15rem;
    }
    
    .value-prop-items {
        gap: 2rem;
        padding: 0 1rem;
    }
    
    /* Hide center timeline on mobile */
    .value-prop-items::before {
        display: none;
    }
    
    /* Hide desktop connector dot so the mobile connector can take over */
    .value-prop-item::after {
        display: none;
    }
 
    /* Mobile: Nested/Contained Design - unified card container */
    .value-prop-item,
    .value-prop-item-reverse {
        grid-template-columns: 1fr;
        gap: 0;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(91, 58, 255, 0.08);
        overflow: hidden; /* Ensures rounded corners clip inner content */
        border: 1px solid rgba(91, 58, 255, 0.1);
    }
    
    .value-prop-item-reverse .value-prop-problem,
    .value-prop-item-reverse .value-prop-solution {
        order: initial;
    }
    
    /* Problem card: rounded top only, no bottom border radius */
    .value-prop-problem {
        padding: 1.75rem;
        border-radius: 20px 20px 0 0; /* Rounded top corners only */
        margin-bottom: 0;
        border-bottom: 1px solid rgba(91, 58, 255, 0.1); /* Subtle divider */
        box-shadow: none; /* Remove individual shadow, container has it */
        border: none; /* Remove border, container has it */
        background: #ffffff; /* Override desktop gradient for unified look */
    }
    
    /* Solution card: rounded bottom only, attached to problem */
    .value-prop-solution {
        padding: 1.75rem;
        border-radius: 0 0 20px 20px; /* Rounded bottom corners only */
        margin-top: 0;
        box-shadow: none; /* Remove individual shadow, container has it */
        border: none; /* Remove border, container has it */
        background: linear-gradient(135deg, rgba(91, 58, 255, 0.08) 0%, rgba(91, 58, 255, 0.04) 100%); /* More noticeable purple tint to differentiate from problem card */
    }
    
    /* Hide connector element on mobile - not needed with nested design */
    .value-prop-connector {
        display: none;
    }
 
    .value-prop-problem h3 {
        font-size: 1.6rem;
    }
    
    .value-prop-problem p {
        font-size: 1rem;
    }
    
    .value-prop-solution p {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .value-prop {
        padding: 3rem 0 !important;
    }
    
    .value-prop-intro {
        margin-bottom: 2.5rem;
    }
    
    .value-prop-intro h2 {
        font-size: 1.875rem;
    }
    
    .value-prop-intro p {
        font-size: 1rem;
    }
    
    .value-prop-items {
        gap: 2.5rem;
    }
    
    .value-prop-problem,
    .value-prop-solution {
        padding: 1.5rem;
    }
    
    .value-prop-problem h3 {
        font-size: 1.4rem;
    }
    
    .value-prop-problem p {
        font-size: 0.95rem;
    }
    
    .value-prop-solution p {
        font-size: 1rem;
    }
    
    .value-prop-number {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
}

/* Reduce top and bottom padding in carousel section */
.podmod-showcase {
    padding: 3rem 0 !important; /* Reduced from 5rem 0 */
}

/* Responsive padding adjustments */
@media (max-width: 1200px) {
    .podmod-showcase {
        padding: 2.5rem 0 !important; /* Reduced from 4rem 0 */
    }
}

@media (max-width: 768px) {
    .features {
        padding-top: 0.5rem !important; /* Further reduced for mobile */
    }
    
    /* Note: .value-prop responsive padding is now handled in the value-prop section styles above */
    
    .podmod-showcase {
        padding: 2rem 0 !important; /* Reduced from 3rem 0 */
    }
}

@media (max-width: 480px) {
    .podmod-showcase {
        padding: 1.5rem 0 !important; /* Further reduced for small mobile */
    }
}

/* ========================================
   PROMO VIDEO SECTION
   Video section positioned below hero with custom controls
   ======================================== */

/* Main video section container */
#video-section {
    position: relative;
    width: 100%;
    padding: 2rem 0;       /* Add small top and bottom padding */
    margin: 0;
}

/* Override container padding for full-bleed video */
#video-section .container {
    padding: 0;            /* Container usually has padding; zero it for full-bleed video */
}

/* Video wrapper - 16:9 aspect ratio container that scales with width */
.video-wrapper {
    position: relative;
    width: 100%;
    /* Fallback for browsers that don't support aspect-ratio */
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625 = 56.25%) */
    /* Modern browsers with aspect-ratio support */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;   /* Subtle rounding to match site style */
    background: #f8f8f8;   /* Match section background to blend seamlessly */
    /* Ensure it doesn't get too large on very wide screens */
    max-width: 100%;
    max-height: 80vh;      /* Prevent it from taking up entire viewport */
}

/* For browsers that support aspect-ratio, reset the padding */
@supports (aspect-ratio: 16 / 9) {
    .video-wrapper {
        height: auto;
        padding-bottom: 0;
    }
}

/* Video element styling */
.promo-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* Show entire video without cropping */
    display: block;
    cursor: pointer;       /* Indicate video is clickable */
}

/* Overlay controls container */
.video-controls {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

/* Video control buttons - styled to be visible but unobtrusive */
.video-btn {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translateY(-1px);
}

.video-btn.secondary {
    background: rgba(18, 18, 18, 0.55);
}

.video-btn.secondary:hover {
    background: rgba(18, 18, 18, 0.7);
}

/* Focus states for accessibility */
.video-btn:focus {
    outline: 2px solid #5B3AFF;
    outline-offset: 2px;
}

/* Mobile responsiveness for video section */
@media (max-width: 768px) {
    #video-section {
        padding: 1.5rem 0; /* Reduced padding on mobile */
    }
    
    .video-wrapper { 
        border-radius: 8px; /* Smaller radius on mobile */
        max-height: 70vh;   /* Allow more height on mobile but still capped */
    }
    
    .video-btn { 
        padding: 9px 12px; 
        font-size: 13px; 
    }
    
    .video-controls {
        right: 12px;
        bottom: 12px;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    #video-section {
        padding: 1rem 0; /* Further reduced padding on small mobile */
    }
    
    .video-wrapper { 
        border-radius: 6px; /* Even smaller radius on small mobile */
        max-height: 60vh;   /* Slightly lower cap for small screens */
    }
    
    .video-btn { 
        padding: 8px 10px; 
        font-size: 12px; 
    }
    
    .video-controls {
        right: 10px;
        bottom: 10px;
        gap: 4px;
    }
}

@media (max-width: 360px) {
    .video-wrapper { 
        max-height: 50vh;   /* Lower cap for tiny screens */
    }
}

@media (max-width: 320px) {
    .video-wrapper { 
        max-height: 45vh;   /* Even lower cap for very small screens */
    }
}

/* Reduced motion support for video section */
@media (prefers-reduced-motion: reduce) {
    .video-btn {
        transition: none !important;
    }
    
    .video-btn:hover {
        transform: none !important;
    }
}

/* ========================================
   MOBILE HERO IMAGE FIX - FIT TO SCREEN
   Ensures the hero image fits perfectly on all mobile screens
   without being cut off, while preserving desktop sizing
   ======================================== */

/* Tablet and Mobile - Make image fit within screen width */
@media (max-width: 768px) {
    /* Hero image container - remove negative margins and ensure proper constraints */
    .hero-image {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important; /* Prevent image from extending beyond container */
        width: 100% !important;
    }
    
    /* Hero screenshot - use percentage width instead of fixed pixels */
    .hero-screenshot {
        max-width: 100% !important; /* Fit to container width instead of 650px */
        width: 100% !important; /* Full width of container */
        height: auto !important; /* Maintain aspect ratio */
        margin-left: 0 !important;
        margin-right: 0 !important;
        object-fit: contain !important; /* Ensure entire image is visible */
    }
}

/* Small Mobile - Extra tight constraints */
@media (max-width: 480px) {
    .hero-image {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .hero-screenshot {
        max-width: 100% !important; /* Fit to screen instead of 480px */
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Extra Small Mobile - Ensure no overflow on tiny screens */
@media (max-width: 400px) {
    .hero-image {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .hero-screenshot {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Ultra Small Screens - Final safety net */
@media (max-width: 360px) {
    .hero-image {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .hero-screenshot {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ========================================
   RESPONSIVE HERO GIF SELECTION
   Desktop GIF shown on desktop/tablet (768px+)
   Mobile GIF shown on mobile screens (<768px)
   Only one GIF is visible at a time
   ======================================== */

/* Default: Show desktop GIF, hide mobile GIF */
.hero-screenshot-desktop {
    display: block !important;
}

.hero-screenshot-mobile {
    display: none !important;
}

/* Mobile: Hide desktop GIF, show mobile GIF */
@media (max-width: 768px) {
    .hero-screenshot-desktop {
        display: none !important;
    }
    
    .hero-screenshot-mobile {
        display: block !important;
    }
    
    /* Mobile GIF: Full width of screen with no padding/margins */
    .hero-screenshot-mobile {
        width: 100vw !important; /* Full viewport width */
        max-width: 100vw !important; /* Ensure no max-width constraint */
        margin-left: calc(-50vw + 50%) !important; /* Break out of container padding */
        margin-right: calc(-50vw + 50%) !important; /* Break out of container padding */
        padding: 0 !important;
        object-fit: contain !important; /* Scale to fit width while maintaining aspect ratio - no cropping */
    }
    
    /* Hero image container for mobile GIF - allow full width and increase spacing from button */
    .hero-image {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important; /* Break out of container */
        margin-right: calc(-50vw + 50%) !important; /* Break out of container */
        padding: 0 !important;
        margin-top: 4.5rem !important; /* Increased from 4rem - additional spacing between button and GIF on mobile */
    }
}

/* NOTE: Desktop styles (min-width: 1024px and above) remain completely unchanged */
/* This fix ONLY applies to mobile and tablet screens */

/* ========================================
   "HOW PODMOD WORKS" MOBILE IMPROVEMENTS
   Enhanced spacing and padding for better readability on mobile
   Desktop styles remain completely unchanged
   ======================================== */

/* Mobile view - Increase padding and spacing within cards */
@media (max-width: 768px) {
    /* Increase padding within process cards for better breathing room */
    .podmod-process-card {
        padding: 1rem 1.2rem !important; /* Increased from 0.6rem 0.8rem for more breathing room */
    }
    
    /* Increase spacing between card header row (icon + heading) and description text */
    .podmod-process-card .card-header-row {
        margin-bottom: 0.6rem !important; /* Spacing below icon + heading for better visual separation */
    }
    
    /* Ensure h3 has no margin since it's in flex container */
    .podmod-process-card h3 {
        margin-bottom: 0 !important; /* No margin since spacing is handled by card-header-row */
    }
    
    /* Decrease distance between cards and arrows for tighter layout */
    .process-arrow {
        padding: 0.1rem !important; /* Reduced from 0.2rem to bring arrows closer to cards */
        margin: 0.1rem 0 !important; /* Add minimal margin for slight separation */
    }
    
    /* Reduce gap between cards in vertical layout */
    .features-grid {
        gap: 0.75rem !important; /* Reduced from 1rem to bring cards and arrows closer */
    }
}

/* Small mobile - Maintain improved spacing */
@media (max-width: 480px) {
    /* Keep generous padding on small screens */
    .podmod-process-card {
        padding: 0.9rem 1.1rem !important; /* Slightly reduced from 1rem 1.2rem but still spacious */
    }
    
    /* Maintain good spacing between header row and text */
    .podmod-process-card .card-header-row {
        margin-bottom: 0.5rem !important; /* Spacing below icon + heading */
    }
    
    /* Ensure h3 has no margin since it's in flex container */
    .podmod-process-card h3 {
        margin-bottom: 0 !important; /* No margin since spacing is handled by card-header-row */
    }
}

/* ========================================
   ULTRA-WIDE SCREEN HERO SECTION FIX
   Prevents content from spreading too far apart on ultra-wide displays
   Centers the hero content for better visual balance
   Normal desktop and mobile screens remain completely unchanged
   ======================================== */

/* Ultra-wide screens (1800px and wider) - Center and constrain hero content */
@media (min-width: 1800px) {
    /* Container for hero section - add max-width and center it */
    .hero .container {
        max-width: 1600px !important; /* Constrain the overall width */
        margin: 0 auto !important; /* Center the container */
        padding: 0 3rem !important; /* Uniform padding on both sides */
    }
    
    /* Hero content - reduce excessive spacing between text and image */
    .hero-content {
        max-width: 1600px !important; /* Match container width */
        margin: 0 auto !important; /* Center the content */
        padding: 0 2rem !important; /* Reduce left padding to bring content closer */
        gap: 2rem !important; /* Reduce gap between text and image from 3rem */
    }
    
    /* Adjust hero text container to prevent it from being too far left */
    .hero-text {
        padding-left: 1rem !important; /* Reduce from 3rem */
        max-width: 600px !important; /* Slightly constrain text width */
    }
}

/* Extra ultra-wide screens (2200px and wider) - Further centering */
@media (min-width: 2200px) {
    /* Even more constrained for very wide monitors */
    .hero .container {
        max-width: 1800px !important; /* Allow slightly more width on huge screens */
    }
    
    .hero-content {
        max-width: 1800px !important;
        gap: 2.5rem !important; /* Slightly larger gap for huge screens */
    }
}

/* NOTE: Normal desktop (1024px-1799px) and mobile screens completely unchanged */

/* ========================================
   HOMEPAGE SECTION SPACING IMPROVEMENTS
   Increase padding on first 3 sections for better breathing room
   ======================================== */

/* 1. Hero Section - Increased top and bottom padding following industry best practices */
/* Industry standard: Desktop hero sections use 6-8rem vertical padding for spacious, premium feel */
.hero {
    padding-top: 7rem !important; /* Increased from 5rem - generous top spacing for visual breathing room */
    padding-bottom: 8rem !important; /* Increased from 6rem - extra bottom spacing before next section */
}

/* 2. How Podmod Works Section - Increased top and bottom padding */
.features {
    padding-top: 4rem !important; /* Increased from 1.5rem */
    padding-bottom: 4rem !important; /* Increased from 2.5rem */
}

/* 3. Stop Scrambling Section - Increased top and bottom padding */
.value-prop {
    padding-top: 5rem !important; /* Increased from 5rem (no change, already good) */
    padding-bottom: 5rem !important; /* Increased from 5rem (no change, already good) */
}

/* Responsive adjustments - maintain better spacing on all devices */
/* Tablet/Large screens: Proportional reduction while maintaining spacious feel */
@media (max-width: 1200px) {
    .hero {
        padding-top: 5.5rem !important; /* Increased from 4rem - more generous spacing */
        padding-bottom: 6.5rem !important; /* Increased from 5rem - maintains vertical breathing room */
    }
    
    .features {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
}

@media (max-width: 768px) {
    /* Mobile: Reduced but still generous spacing for smaller screens */
    .hero {
        padding-top: 4.5rem !important; /* Increased from 3.5rem - maintains comfortable spacing */
        padding-bottom: 5.5rem !important; /* Increased from 4.5rem - good separation from next section */
    }
    
    .features {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .value-prop {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
}

@media (max-width: 480px) {
    /* Small mobile: Compact but still comfortable vertical spacing */
    .hero {
        padding-top: 3.5rem !important; /* Increased from 3rem - maintains readability */
        padding-bottom: 4.5rem !important; /* Increased from 4rem - adequate bottom spacing */
    }
    
    .features {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .value-prop {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
}