/* CSS Reset & Global Styles */
:root {
    
     /* Header Specific Enhancements */
    --header-initial-bg: #FFFFFF; /* rgba(26, 32, 44, 0.6); Slightly transparent dark charcoal for initial state */
    --header-scrolled-bg: rgba(255, 255, 255, 0.85); /* More opaque on scroll */
    --header-accent-color: #805AD5; /* The specific purple color for scrolled links/buttons */
    --header-accent-hover: #6B46C1; /* Darker purple for hover on scrolled elements */

    --header-mobile-menu-bg: #1A202C; /* Consistent dark background for mobile menu */
    
    --primary-dark: #1A202C; /* Dark blue/charcoal inspired by GetPLRBox */
    --secondary-light: #F7FAFC; /* Light gray */
    --accent-orange: #F6AD55; /* Orange for CTAs - keeping for other sections */
    --hero-purple-bg: #805AD5; /* Purple for hero button background */
    --hero-purple-text: #6B46C1; /* Darker purple for hero button text */
    --hero-teal: #38B2AC; /* Teal for highlighted text in hero */
    --text-color-light: #E2E8F0; /* Off-white for dark backgrounds */
    --text-color-dark: #2D3748; /* Dark gray for light backgrounds (now used in hero) */
    --border-radius: 8px;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --dark-section-bg: #1A202C; /* Consistent dark background */
    --card-bg: #2D3748; /* Slightly lighter dark for cards */
    --text-color-subtle: #A0AEC0; /* Lighter gray for secondary text on dark */
    --orange-hover: #e09f4e; /* Slightly darker orange for hover */
    --hero-button-hover-dark: #553C9A; /* Darker purple for hover */
    --hero-button-hover-light: #F0F4F8; /* Lighter hover for outline button */

    

    /* Variables for How It Works section */
    --how-it-works-bg: #151B2A; /* Deeper dark blue for this section */
    --how-it-works-card-bg: #1B2332; /* Slightly lighter dark for cards */
    --how-it-works-highlight-text: #38B2AC; /* Teal for "With Confidence" */
    --how-it-works-highlight-underline: #38B2AC; /* Teal for underline */
    --step-icon-bg: #805AD5; /* Purple background for step icons */
    --step-label-color: #38B2AC; /* Teal color for Step X label */
    --arrow-color: #38B2AC; /* Teal color for connecting arrows */
    --journey-btn-start: #805AD5; /* Purple for journey button gradient start */
    --journey-btn-end: #38B2AC; /* Teal for journey button gradient end */
    --journey-btn-text: #FFFFFF; /* White text for journey button */
    
    /* Variables for Products section */
    --products-highlight-text: #38B2AC; /* Teal for "Selling Online" */
    --products-highlight-underline: #38B2AC; /* Teal for underline */
    --products-sub-highlight: #805AD5; /* Purple for "1 Million" */

    --product-card-bg: #FFFFFF; /* White background for cards */
    --product-card-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Lighter shadow */
    --product-qty-bg: #E2E8F0; /* Light gray for quantity background */
    --product-qty-color: #2D3748; /* Dark text for quantity */
    --product-icon-bg: #E9D8FD; /* Light purple for icon background */
    --product-icon-color: #6B46C1; /* Dark purple for icon SVG */

    /* Product CTA Button Colors */
    --btn-cta-pink-bg: #ECC9EE;
    --btn-cta-pink-color: #A0449D;
    --btn-cta-green-bg: #B0F4E8;
    --btn-cta-green-color: #38B2AC;
    --btn-cta-purple-bg: #E9D8FD;
    --btn-cta-purple-color: #805AD5;
    --btn-cta-orange-bg: #FEEBCF;
    --btn-cta-orange-color: #ED8936;
    --btn-cta-red-bg: #FEB2B2;
    --btn-cta-red-color: #E53E3E;
    
     /* New variables for product card overlay and top border */
    --product-image-overlay-color: rgba(128, 90, 213, 0.15); /* Semi-transparent purple */
    --product-card-top-border: 4px solid #805AD5; /* Purple top border */
    
/* Variables for Problem/Solution Section */
    --problem-bg: #F7FAFC; /* Light background */
    --problem-tag-bg: #FEEBCF; /* Light orange for tag */
    --problem-tag-color: #ED8936; /* Orange for tag text/icon */
    --problem-highlight-orange: #ED8936; /* Orange highlight for "Getting" */
    --problem-highlight-underline-orange: #F6AD55; /* Slightly lighter orange for underline */
    --problem-highlight-red-text: #E53E3E; /* Red highlight for "93% aspiring digital entrepreneurs" */
    --problem-card-bg: #FFFFFF; /* White for problem cards */
    --problem-card-border: #E2E8F0; /* Light gray border for cards */
    --problem-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Subtle shadow */

    /* Problem Icon Colors (for their background and border) */
    --problem-icon-bg-1: #FEEBCF; /* Orange icon background */
    --problem-icon-border-1: #F6AD55; /* Orange icon border */
    --problem-icon-bg-2: #E9D8FD; /* Purple icon background */
    --problem-icon-border-2: #D6BCFA; /* Purple icon border */
    --problem-icon-bg-3: #B2F5EA; /* Teal icon background */
    --problem-icon-border-3: #81E6D9; /* Teal icon border */
    --problem-icon-bg-4: #C6F6D5; /* Green icon background */
    --problem-icon-border-4: #68D391; /* Green icon border */
    --problem-icon-emoji-color: #2D3748; /* Default emoji/icon color if not custom SVG */


    /* Variables for Brutal Reality Section */
    --brutal-reality-bg: #FFFFFF; /* White background */
    --brutal-tag-bg: #FEEBCF; /* Light orange for tag */
    --brutal-tag-color: #ED8936; /* Orange for tag text/icon */
    --brutal-highlight-orange: #ED8936; /* Orange highlight for "Your Revenue is at Stake" */
    --metric-card-bg: #FFFFFF; /* White for metric cards */
    --metric-card-border: #E2E8F0; /* Light gray border for metric cards */
    --metric-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Subtle shadow */

    /* Metric Icon Colors (for their background and border) */
    --metric-icon-bg-1: #FEEBCF; /* Orange icon background */
    --metric-icon-border-1: #F6AD55; /* Orange icon border */
    --metric-icon-bg-2: #E9D8FD; /* Purple icon background */
    --metric-icon-border-2: #D6BCFA; /* Purple icon border */
    --metric-icon-bg-3: #B2F5EA; /* Teal icon background */
    --metric-icon-border-3: #81E6D9; /* Teal icon border */
    --metric-icon-bg-4: #C6F6D5; /* Green icon background */
    --metric-icon-border-4: #68D391; /* Green icon border */
    --metric-icon-emoji-color: #2D3748; /* Default emoji/icon color if not custom SVG */
    --metric-value-color: #38B2AC; /* Teal for metric values (e.g., 89%, $12K) */
    
    /* Variables for Solution Comparison Section */
    --solution-comparison-bg: #F7FAFC; /* Light background for the section */
    --solution-tag-green-bg: #C6F6D5; /* Light green tag background */
    --solution-tag-green-color: #38A169; /* Darker green tag text */
    --solution-tag-green-border: #68D391; /* Green tag border */
    --highlight-green-color: #38B2AC; /* Teal/green for "Within 5 Minutes" */

    --comparison-card-bg: #FFFFFF; /* White background for comparison cards */
    --comparison-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    --comparison-card-border: #E2E8F0; /* Light gray border for cards */

    /* Old Way specific colors */
    --old-way-border: #FEB2B2; /* Red border */
    --old-way-title-color: #E53E3E; /* Red title text */
    --old-way-icon-color: #E53E3E; /* Red icon color */
    --step-number-red-bg: #FEEBCF; /* Light orange background for number */
    --step-number-red-color: #ED8936; /* Orange text for number */
    --step-duration-red-color: #E53E3E; /* Red for duration */

    /* PLR Box Way specific colors */
    --plrbox-way-border: #C6F6D5; /* Green border */
    --plrbox-way-title-color: #38A169; /* Green title text */
    --plrbox-way-icon-color: #38A169; /* Green icon color */
    --step-number-green-bg: #C6F6D5; /* Light green background for number */
    --step-number-green-color: #38A169; /* Darker green text for number */
    --step-duration-green-color: #38A169; /* Green for duration */

    --journey-offer-text-color: #A0AEC0; /* Subtle text color for offer */
    
    /* Variables for Utilize & Sell Everywhere Section */
    --utilize-section-bg: #151B2A; /* Deep dark blue */
    --section-tag-purple-bg: #E9D8FD; /* Light purple tag background */
    --section-tag-purple-color: #6B46C1; /* Dark purple tag text */
    --section-tag-purple-border: #D6BCFA; /* Purple tag border */
    --section-tag-red-bg: #FEEBCF; /* Light orange tag background */
    --section-tag-red-color: #ED8936; /* Orange tag text */
    --section-tag-red-border: #F6AD55; /* Orange tag border */

    --highlight-underline-teal-gradient-start: #38B2AC; /* Teal for underline gradient */
    --highlight-underline-teal-gradient-end: transparent;

    --strategy-card-bg: #1B2332; /* Slightly lighter dark for cards */
    --strategy-card-border: rgba(255, 255, 255, 0.08); /* Subtle white border */
    --strategy-card-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); /* Darker shadow */
    --strategy-header-color: #A0AEC0; /* Light gray for "Strategy XX" */
    --strategy-icon-bg: rgba(255, 255, 255, 0.1); /* Semi-transparent white background for icon */
    --strategy-icon-color: #38B2AC; /* Teal for strategy icons */
    --strategy-title-color: #E2E8F0; /* Off-white for strategy titles */
    --strategy-desc-color: #A0AEC0; /* Light gray for descriptions */

    --platform-logo-bg: #FFFFFF; /* White background for platform logos */
    --platform-logo-color: #2D3748; /* Dark text for platform logos */
    --platform-logo-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     /* Variables for Platform Logo Animation */
    --platform-logo-anim-color1: #FFFFFF; /* Base white */
    --platform-logo-anim-color2: #F8F7FF; /* Very subtle light purple tint */
    --platform-logo-anim-color3: #F7FFF9; /* Very subtle light teal tint */

    --btn-monetize-start: #805AD5; /* Purple for button gradient start */
    --btn-monetize-end: #38B2AC; /* Teal for button gradient end */
    --btn-monetize-text: #FFFFFF; /* White text for button */
    --monetize-subtitle-color: #A0AEC0; /* Light gray for subtitle */
    
     /* Variables for Success Stories Section */
    --success-stories-bg: #F7FAFC; /* Light background */
    --success-stories-heading-color: #553C9A; /* Dark purple for "Success" */
    --success-stories-highlight-teal: #38B2AC; /* Teal for "Stories" */
    --success-stories-subheading-color: #2D3748; /* Dark gray for "BUILT WITH PLR BOX" */

    --portfolio-item-bg: #FFFFFF; /* White background for portfolio cards */
    --portfolio-item-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Stronger shadow */
    --portfolio-item-border-radius: 12px; /* Rounded corners for images/cards */

    /* For the fade effect on carousel edges */
    --carousel-fade-color: #F7FAFC; /* Should match section background */
    
    
    /* Variables for CTA Section */
    --cta-section-bg: #151B2A; /* Deep dark blue */
    --limited-offer-tag-bg: #805AD5; /* Purple */
    --limited-offer-tag-color: #FFFFFF;
    --limited-offer-tag-border: #6B46C1;
    --cta-headline-highlight-purple: #805AD5; /* Purple highlight for "Digital Business" */

    --cta-metric-card-bg: #FFFFFF; /* White card */
    --cta-metric-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    --cta-metric-card-border: #E2E8F0; /* Light gray border */
    --cta-metric-icon-bg: #E9D8FD; /* Light purple */
    --cta-metric-icon-color: #805AD5; /* Dark purple */
    --cta-metric-value-color: #38B2AC; /* Teal for values */
    --cta-metric-label-color: #2D3748; /* Dark text for labels */

    --cta-checklist-icon-color: #48BB78; /* Green checkmark */
    --cta-checklist-text-color: #E2E8F0; /* Light text for checklist items */

    --btn-get-started-cta-start: #805AD5; /* Purple gradient start */
    --btn-get-started-cta-end: #38B2AC; /* Teal gradient end */
    --btn-get-started-cta-text: #FFFFFF;

    --cta-guarantee-color: #A0AEC0; /* Subtle gray for guarantee line */
    --guarantee-icon-color: #CBD5E0; /* Lighter gray for guarantee icons */

    --cta-product-display-bg: #1B2332; /* Darker background for product container (if visible) */
    --cta-product-border: #D6BCFA; /* Light purple border for product container */
    --cta-product-bottom-banner-bg: #2D3748; /* Dark gray for the bottom banner */
    --cta-product-bottom-banner-text: #FFFFFF;
    --cta-product-banner-price-color: #38B2AC; /* Teal for the $7 price */
    
    /* Variables for Bonuses Section */
    --bonuses-bg: #F7FAFC; /* Light background */
    --bonus-tag-bg: #E9D8FD; /* Light purple tag background */
    --bonus-tag-color: #6B46C1; /* Dark purple tag text */
    --bonus-tag-border: #D6BCFA; /* Purple tag border */
    --bonuses-headline-purple: #553C9A; /* Dark purple for headline */
    --bonuses-headline-teal: #38B2AC; /* Teal for headline */

    --bonus-card-bg: #FFFFFF; /* White background for bonus cards */
    --bonus-card-border: #E2E8F0; /* Light gray border for cards */
    --bonus-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    --bonus-badge-bg: #C6F6D5; /* Light green for "Bonus" badge */
    --bonus-badge-color: #38A169; /* Dark green for "Bonus" text */
    --bonus-price-tag-bg: #FEEBCF; /* Light orange for price tag */
    --bonus-price-tag-color: #ED8936; /* Orange for price text */

    /* Variables for Video Training Section */
    --video-training-bg: #F7FAFC; /* Light background */
    --video-training-tag-bg: #C6F6D5; /* Light green tag background */
    --video-training-tag-color: #38A169; /* Dark green tag text */
    --video-training-tag-border: #68D391; /* Green tag border */
    --video-training-headline-purple: #553C9A; /* Dark purple for headline */

    --training-card-bg: #FFFFFF; /* White background for training cards */
    --training-card-border: #E2E8F0; /* Light gray border for cards */
    --training-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    --training-price-color: #38A169; /* Green for training price */
    
     /* Variables for Pricing Section */
    --pricing-bg: #F7FAFC; /* Light background */
    --pricing-tag-bg: #E9D8FD; /* Light purple tag */
    --pricing-tag-color: #6B46C1; /* Dark purple tag text */
    --pricing-tag-border: #D6BCFA; /* Purple tag border */
    --pricing-headline-gradient-start: #805AD5; /* Purple for headline gradient */
    --pricing-headline-gradient-end: #38B2AC; /* Teal for headline gradient */

    /* Lifetime Plan Colors */
    --lifetime-card-bg: #1B2332; /* Dark background */
    --lifetime-card-border: #3182CE; /* Blue border */
    --lifetime-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --lifetime-text-color: #E2E8F0; /* Light text */
    --lifetime-price-color: #38B2AC; /* Teal price */
    --lifetime-badge-bg-start: #805AD5; /* Purple badge gradient */
    --lifetime-badge-bg-end: #38B2AC; /* Teal badge gradient */
    --lifetime-badge-color: #FFFFFF;
    --lifetime-feature-icon-color: #A0AEC0; /* Grey checkmark for lifetime features */

    /* Yearly Plan Colors */
    --yearly-card-bg: #FFFFFF; /* White background */
    --yearly-card-border: #9AE6B4; /* Light green border */
    --yearly-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --yearly-text-color: #2D3748; /* Dark text */
    --yearly-price-color: #38A169; /* Green price */
    --yearly-annual-bill-color: #718096; /* Grey for annual bill text */
    --save-badge-bg: #C6F6D5; /* Light green for save badge */
    --save-badge-color: #38A169; /* Dark green for save badge text */
    --yearly-feature-icon-color: #68D391; /* Green checkmark for yearly features */

    /* Toggle Switch Colors */
    --toggle-slider-bg-off: #CBD5E0; /* Light gray when off */
    --toggle-slider-bg-on: #68D391; /* Green when on */
    --toggle-circle-color: #FFFFFF; /* White circle */

    /* Buttons */
    --btn-lifetime-access-start: #805AD5; /* Purple gradient */
    --btn-lifetime-access-end: #38B2AC; /* Teal gradient */
    --btn-lifetime-access-text: #FFFFFF;

    --btn-yearly-access-bg: #1A202C; /* Dark background */
    --btn-yearly-access-color: #FFFFFF;
    --btn-yearly-access-hover-bg: #2D3748; /* Slightly lighter dark on hover */
    
    /* Variables for About Us Section */
    --about-us-bg: #F7FAFC; /* Light background */
    --about-tag-bg: #E9D8FD; /* Light purple tag background */
    --about-tag-color: #6B46C1; /* Dark purple tag text */
    --about-tag-border: #D6BCFA; /* Purple tag border */
    --about-headline-gradient-start: #805AD5; /* Purple for headline gradient */
    --about-headline-gradient-end: #38B2AC; /* Teal for headline gradient */

    --about-main-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Stronger shadow for main image card */

    --about-metric-badge-bg: rgba(255, 255, 255, 0.7); /* Semi-transparent white for badges */
    --about-metric-badge-border: rgba(255, 255, 255, 0.8);
    --about-metric-badge-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --about-metric-value-color: #553C9A; /* Dark purple for metric values */
    --about-metric-label-color: #2D3748; /* Dark text for metric labels */

    --about-description-text-color: #2D3748; /* Dark text for description */

    --team-member-card-bg: #FFFFFF; /* White for team member cards */
    --team-member-card-border: #E2E8F0; /* Light gray border */
    --team-member-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    /* Role Tag Colors */
    --role-tag-design-bg: #E9D8FD; /* Light purple */
    --role-tag-design-color: #6B46C1;
    --role-tag-marketing-bg: #B2F5EA; /* Light teal */
    --role-tag-marketing-color: #38B2AC;
    --role-tag-strategy-bg: #C6F6D5; /* Light green */
    --role-tag-strategy-color: #38A169;
    
    /* Variables for FAQ Section */
    --faq-bg: #F7FAFC; /* Light background */
    --faq-tag-bg: #E9D8FD; /* Light purple tag background */
    --faq-tag-color: #6B46C1; /* Dark purple tag text */
    --faq-tag-border: #D6BCFA; /* Purple tag border */
    --faq-headline-gradient-start: #805AD5; /* Purple for headline gradient */
    --faq-headline-gradient-end: #38B2AC; /* Teal for headline gradient */
    --faq-card-bg: #FFFFFF; /* White background for FAQ items */
    --faq-card-border: #E2E8F0; /* Light gray border for FAQ items */
    --faq-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    --faq-question-color: #2D3748; /* Dark text for question */
    --faq-bullet-color: #805AD5; /* Purple for bullet point */
    --faq-toggle-color: #805AD5; /* Purple for toggle icon */
    --faq-answer-color: #4A5568; /* Slightly lighter dark gray for answer */
    
    /* Variables for Video Training Section */
    --video-training-bg: #F7FAFC; /* Light background */
    --video-training-tag-bg: #E9D8FD; /* Light purple tag background */
    --video-training-tag-color: #6B46C1; /* Dark purple tag text */
    --video-training-tag-border: #D6BCFA; /* Purple tag border */
    --video-training-headline-purple: #553C9A; /* Dark purple for headline */
    --video-training-headline-teal: #38B2AC; /* Teal for headline */

    --training-card-bg: #FFFFFF; /* White background for training cards */
    --training-card-border: #E2E8F0; /* Light gray border for cards */
    --training-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    --training-card-header-gradient-start: #805AD5; /* Purple for header gradient */
    --training-card-header-gradient-end: #38B2AC; /* Teal for header gradient */
    --play-icon-bg: rgba(255, 255, 255, 0.2); /* Semi-transparent white for play icon */
    --play-icon-color: #FFFFFF; /* White play icon */
    --course-badge-bg: #E9D8FD; /* Light purple for course badge */
    --course-badge-color: #6B46C1; /* Dark purple for course badge text */

    --training-title-color: #2D3748; /* Dark text for title */
    --training-description-color: #4A5568; /* Slightly lighter dark gray for description */
    --training-price-color: #38A169; /* Green for training price */

    --resell-message-bg: #E9D8FD; /* Light purple for resell message box */
    --resell-message-border: #D6BCFA; /* Purple border for resell message box */
    --resell-message-color: #2D3748; /* Dark text for resell message */

    --btn-all-bonuses-start: #805AD5; /* Purple for button gradient */
    --btn-all-bonuses-end: #38B2AC; /* Teal for button gradient */
    --btn-all-bonuses-text: #FFFFFF;
    --bonus-guarantee-text-color: #A0AEC0; /* Subtle gray for text below button */
	
	 /* Variables for Footer Section */
    --footer-bg-dark: #1A202C; /* Main dark background */
    --footer-text-light: #E2E8F0; /* Light text */
    --footer-text-subtle: #A0AEC0; /* Subtle gray text */
    --footer-heading-color: #CBD5E0; /* Lighter gray for headings */
    --footer-link-hover: #F6AD55; /* Orange hover color */

    --disclaimer-bg: #151B2A; /* Slightly darker background for disclaimer */
    --disclaimer-title-color: #E2E8F0; /* Light title for disclaimer */
    --disclaimer-text-color: #718096; /* Medium gray for disclaimer text */
    --disclaimer-border-top: 1px solid rgba(255, 255, 255, 0.08);

    --footer-bottom-border-top: 1px solid rgba(255, 255, 255, 0.08);

    --social-link-color: #CBD5E0; /* Light gray for social links */
    --social-link-hover: #F6AD55; /* Orange hover */
    
    /* Global Components - Back to Top Button */
    --back-to-top-bg: var(--color-accent-purple); /* Purple background */
    --back-to-top-color: var(--color-light-primary); /* White arrow */
    --back-to-top-hover-bg: var(--color-accent-purple-dark);

    /* Global Components - Scrollbar */
    --scrollbar-track-bg: var(--color-light-secondary); /* Light gray track */
    --scrollbar-thumb-bg: var(--color-dark-subtle); /* Mid-tone gray thumb */
    --scrollbar-thumb-hover-bg: var(--color-dark-secondary);
}

/* Define the animation keyframes */
@keyframes platformLogoColorAnimation {
    0% { background-color: var(--platform-logo-anim-color1); }
    33% { background-color: var(--platform-logo-anim-color2); }
    66% { background-color: var(--platform-logo-anim-color3); }
    100% { background-color: var(--platform-logo-anim-color1); }
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color-dark);
    background-color: var(--secondary-light);
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary-dark); /* Default for light sections */
}

.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4 {
    color: var(--text-color-light); /* For dark sections */
}

/* Utility Classes */
.text-center { text-align: center; }
.py-10 { padding-top: 4rem; padding-bottom: 4rem; }
.py-8 { padding-top: 3rem; padding-bottom: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 3rem; }
.sub-heading {
    font-size: 1.15rem;
    color: #000;/*var(--text-color-subtle);*/
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
    cursor: pointer;
    text-align: center;
    font-size: 1.1rem;
}

.btn-primary {
    background-color: var(--accent-orange);
    color: var(--primary-dark);
    border: none;
    box-shadow: var(--box-shadow);
}

.btn-primary:hover {
    background-color: var(--orange-hover);
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    color: var(--accent-orange);
    border: 2px solid var(--accent-orange);
    margin-left: 15px; /* Moved from inline style */
}

.btn-outline:hover {
    background-color: var(--accent-orange);
    color: var(--primary-dark);
    transform: translateY(-2px);
}

/* Hero Specific Buttons */
.btn-hero-primary {
    background-color: var(--hero-purple-bg);
    color: var(--secondary-light); /* Light text on purple */
    border: none;
    box-shadow: var(--box-shadow);
    padding-right: 40px; /* Adjust for arrow spacing */
    position: relative;
    padding-top: 16px; /* Adjust for vertical alignment */
    padding-bottom: 16px;
}

.btn-hero-primary .arrow-right {
    font-size: 1.5rem;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.btn-hero-primary:hover {
    background-color: var(--hero-button-hover-dark);
    transform: translateY(-2px);
}

.btn-hero-primary:hover .arrow-right {
    transform: translateY(-50%) translateX(5px);
}

.btn-hero-outline {
    background-color: white;
    color: var(--hero-purple-text); /* Darker purple text */
    border: 1px solid #E2E8F0; /* Light border */
    box-shadow: var(--box-shadow);
    margin-left: 15px;
    padding-top: 16px; /* Adjust for vertical alignment */
    padding-bottom: 16px;
}

.btn-hero-outline:hover {
    background-color: var(--hero-button-hover-light);
    color: var(--hero-purple-text);
    transform: translateY(-2px);
}


/* Header */
.header {
    background-color: var(--primary-dark);
    color: var(--text-color-light);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--box-shadow);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color-light);
    text-decoration: none;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
}

.nav-links a {
    color: var(--text-color-light);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--accent-orange);
}

.header-btn {
    margin-left: 30px; /* Space between nav and button */
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    background-color: var(--text-color-light);
    transition: all 0.3s ease;
}

.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Hero Section */
.hero {
    background-color: var(--secondary-light); /* Changed to light background */
    background-image: url('images/s1bg.jpg') !important;  /*Add background grid image */
   
    background-position: center top;
    background-repeat: repeat;
    color: var(--text-color-dark); /* Changed to dark text */
    padding: 100px 0 60px 0; /* Adjust bottom padding for the image below */
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-tag {
    background-color: #E9D8FD; /* Light purple background */
    color: var(--hero-purple-text); /* Darker purple text */
    padding: 8px 18px;
    border-radius: 50px;
    display: inline-flex; /* Use flex to align text and arrow */
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    border: 1px solid #D6BCFA;
}

.hero-tag .arrow-down {
    font-size: 1.2rem;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-color-dark); /* Now dark text for hero */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero h1 .highlight {
    color: var(--hero-teal); /* Teal color for "1 Million+" and "PLR Products" */
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
    color: var(--text-color-dark); /* Ensure paragraph is dark */
}

.hero-buttons {
    margin-bottom: 2.5rem; /* Reduced margin to bring checklist closer */
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow buttons to wrap on small screens */
    gap: 15px; /* Space between buttons */
}

/* Hero Checklist (Re-enabled and styled) */
.hero-checklist {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 2.5rem; /* Space below checklist */
    flex-wrap: wrap;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-color-dark);
}

.hero-checklist .checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-checklist .icon {
    color: var(--hero-checklist-color); /* Purple checkmark */
    font-size: 1.2rem;
}


/* Trusted By Solopreneurs (integrated into Hero) */
.trusted-by-hero {
    margin-top: 2rem; /* Adjusted margin to fit new layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 4rem; /* Space before the big product image */
}

.trusted-by-hero .avatars {
    display: flex;
    position: relative;
    justify-content: center;
    margin-bottom: 5px;
}

.trusted-by-hero .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid white; /* White border around avatars */
    margin-left: -10px; /* Overlap avatars */
    object-fit: cover;
    background-color: #E2E8F0; /* Placeholder background */
}

.trusted-by-hero .avatar:first-child {
    margin-left: 0;
}

.trusted-by-hero .stars {
    color: #F6E05E; /* Yellow for stars */
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.trusted-by-hero .trusted-text {
    font-size: 1rem;
    color: var(--text-color-dark); /* Dark text for "Trusted by Solopreneurs" */
    margin: 0;
    opacity: 1; /* Ensure full opacity */
}

/* Hero Product Display */
.hero-product-display {
    width: 100%;
    max-width: 900px; /* Max width to match screenshot proportion */
    margin: 0 auto;
    background: linear-gradient(135deg, var(--hero-product-box-bg-start) 0%, var(--hero-product-box-bg-end) 100%);
    border-radius: 15px; /* More rounded corners */
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--hero-product-box-border); /* Soft border */
    position: relative;
}

.plr-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 10px; /* Little internal padding */
}

.plr-box-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color-light); /* White/light text */
}

.plr-box-logo svg {
    width: 28px;
    height: 28px;
    /* Adjust SVG stroke color if needed for better contrast on background */
    filter: brightness(1.5); /* Make the SVG brighter on the dark background */
}

.plr-rights-info {
    background-color: rgba(255, 255, 255, 0.15); /* Slightly transparent white background */
    color: var(--plr-rights-text-color); /* Teal text */
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.product-main-image {
    position: relative;
    width: 100%;
    height: auto; /* Allow image to define height */
    overflow: hidden; /* Ensure image doesn't overflow container */
}

.product-main-image .main-product-img {
    width: 100%;
    height: auto;
    
    border-radius: 8px; /* Slightly rounded image corners */
    margin-bottom: 2%;
}

.only-price-circle {
    position: absolute;
    top: 50%;
    right: -25px; /* Adjust as per screenshot, it's half outside */
    transform: translateY(-50%);
    width: 150px; /* Size of the circle */
    height: 150px;
    background-color: var(--only-price-circle-bg);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--only-price-text);
    font-weight: 700;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 5px solid white; /* White border for the circle */
    z-index: 10;
}

.only-price-circle .access-text {
    font-size: 0.65rem;
    text-transform: uppercase;
    transform: rotate(90deg); /* Rotate text */
    position: absolute; /* Position to rotate independently */
    top: 35px; /* Adjust vertical position */
    left: -20px; /* Adjust horizontal position */
    white-space: nowrap; /* Prevent text wrapping */
    transform-origin: center center;
    letter-spacing: 1px;
}
.only-price-circle .only-text {
    font-size: 0.9rem;
    margin-top: 15px; /* Space from top edge */
}

.only-price-circle .price-text {
    font-size: 2.5rem;
    line-height: 1;
}

/* How It Works Section */
.how-it-works {
    background-color: var(--how-it-works-bg); /* Use new deeper dark background */
    color: var(--text-color-light); /* Light text on dark background */
    padding: 100px 0; /* Adjust padding as needed */
}

.how-it-works h2 {
    color: var(--text-color-light); /* Ensure heading is light */
    margin-bottom: 5rem; /* More space below heading */
    font-size: 2.8rem;
}

.how-it-works h2 .highlight-underline {
    color: var(--how-it-works-highlight-text); /* Teal color for highlight */
    position: relative;
    padding-bottom: 5px; /* Space for underline */
}

.how-it-works h2 .highlight-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--how-it-works-highlight-underline), transparent); /* Gradient underline */
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    position: relative; /* For positioning arrows */
    padding-bottom: 20px; /* Space for potential overflow or shadows */
}

.step-card {
    background-color: var(--how-it-works-card-bg); /* Lighter dark background for cards */
    padding: 40px 30px; /* Adjust padding */
    border-radius: var(--border-radius);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); /* Darker shadow */
    text-align: left; /* Align text to left as in screenshot */
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05); /* Very subtle border */
    position: relative;
    overflow: hidden; /* Hide overflowing step image */
    padding-bottom: 0; /* Image takes its own space */
    display: flex; /* Enable flex for vertical alignment */
    flex-direction: column; /* Stack children vertically */
}

.step-card:hover {
    transform: translateY(-5px);
}

.step-icon {
    width: 60px;
    height: 60px;
    background-color: var(--step-icon-bg); /* Purple background */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* Space below icon */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.step-icon svg {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2)); /* Soft glow on icons */
}

.step-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--step-label-color); /* Teal color */
    text-transform: uppercase;
    margin-bottom: 5px;
}

.step-card h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    color: var(--text-color-light);
}

.step-card p {
    font-size: 1rem;
    color: var(--text-color-subtle);
    margin-bottom: 30px; /* Space before image */
    flex-grow: 1; /* Push image to bottom if content varies */
}

.step-image-wrapper {
    width: 100%;
    height: auto;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    overflow: hidden; /* Ensure image fits rounded corners */
    margin-top: auto; /* Pushes image to the bottom of the card */
}

.step-card-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    /* Removed redundant padding-bottom: 20px; from here */
}

/* Refined Arrows for desktop */
/* Apply to all step-cards except the last one */
.step-card:not(:last-child)::after { /* This creates the arrow line */
    content: '';
    position: absolute;
    right: -25px; /* Position its right edge 25px outside the card's right edge */
    top: 105px; /* Vertical position aligned with icons */
    transform: translateY(-50%); /* Ensures perfect vertical centering */
    width: 25px; /* Length of the arrow line */
    height: 2px;
    background-color: var(--arrow-color);
    z-index: 5;
}

.step-card:not(:last-child)::before { /* This creates the arrowhead */
    content: '';
    position: absolute;
    /* Position the arrowhead to attach to the end of the ::after line.
       The ::after line's right edge is at `right: -25px;`. The arrowhead (10px wide) should butt up against it. */
    right: -35px; /* -25px (line's right) - 10px (arrowhead width) */
    top: 105px; /* Same vertical position as the line */
    transform: translateY(-50%); /* Ensures perfect vertical centering */
    width: 0;
    height: 0;
    border-top: 5px solid transparent; /* Half height of arrowhead */
    border-bottom: 5px solid transparent; /* Half height of arrowhead */
    border-left: 10px solid var(--arrow-color); /* Arrowhead base */
    z-index: 6;
}

/* Hide arrows when cards stack on smaller screens */
@media (max-width: 992px) {
    .step-card:not(:last-child)::after,
    .step-card:not(:last-child)::before {
        display: none;
    }
}

/* Journey Button */
.btn-journey {
    background: linear-gradient(90deg, var(--journey-btn-start) 0%, var(--journey-btn-end) 100%);
    color: var(--journey-btn-text);
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    padding: 8px 20px; /* More padding for a larger button */
    border-radius: 50px; /* Pill shape */
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-journey:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

.btn-journey .arrow-right {
    font-size: 1.8rem;
}

.journey-subtitle {
    font-size: 0.9rem;
    color: var(--text-color-subtle);
    margin-top: 15px;
    font-weight: 500;
}


/* Responsive Design (adjustments for How It Works section) */
@media (max-width: 992px) {
    .how-it-works h2 { margin-bottom: 3rem; }
}

@media (max-width: 768px) {
    .how-it-works { padding: 80px 0; }
    .how-it-works h2 { font-size: 2rem; }
    .steps-grid { grid-template-columns: 1fr; gap: 20px; } /* Stack cards */
    .step-card { padding: 30px 20px; text-align: center; } /* Center text on mobile */
    .step-icon { margin: 0 auto 20px auto; } /* Center icon */
    .step-card p { margin-bottom: 20px; }

    .btn-journey { padding: 5px 10px; font-size: 1rem; }
    .btn-journey .arrow-right { font-size: 0rem; }
    .journey-subtitle { margin-top: 10px; font-size: 0.85rem; }
}

@media (max-width: 480px) {
    .how-it-works h2 { font-size: 1.8rem; }
    .step-card h3 { font-size: 1.5rem; }
    .step-card p { font-size: 0.9rem; }
}


/* Products Section */
.products {
    background-color: var(--secondary-light); /* Light background */
    background-image: url('images/s1bg.jpg');
    
    background-position: center top;
    background-repeat: repeat;
    padding: 100px 0;
}

.products h2 {
    color: var(--primary-dark);
    font-size: 2.8rem;
}

.products h2 .highlight-underline-teal {
    color: var(--products-highlight-text);
    position: relative;
    padding-bottom: 5px;
}

.products h2 .highlight-underline-teal::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--products-highlight-underline), transparent);
}

.products .sub-heading .highlight-purple {
    color: var(--products-sub-highlight); /* Purple for "1 Million" */
    font-weight: 700;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Increased gap for visual separation */
}

.product-card {
    background-color: var(--product-card-bg); /* White background */
    border-radius: var(--border-radius);
    box-shadow: var(--product-card-shadow); /* Lighter shadow */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Important for image border-radius */
    transition: transform 0.3s ease;
    position: relative; /* Essential for absolute positioning of icon */

    /* New: Top border on the product card */
    border-top: var(--product-card-top-border);
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio for image placeholder */
    overflow: hidden;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

/* New: Overlay on product image */
.product-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--product-image-overlay-color); /* Semi-transparent purple overlay */
    z-index: 1; /* Above the image, below quantity/icon */
    opacity: 1; /* Ensure it's visible */
    transition: opacity 0.3s ease;
}

/* Optional: Fade out overlay on card hover */
.product-card:hover .product-image-container::before {
    opacity: 0;
}


.product-main-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 0; /* Ensures it's below the overlay */
}

.product-qty {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--product-qty-bg);
    color: var(--product-qty-color);
    padding: 5px 10px;
    border-radius: 50px; /* Pill shape */
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 10; /* Make sure it's above other elements */
}

/* Product card icon positioning corrected */
.product-card-icon {
    position: absolute; /* Position relative to .product-card */
    top: 5%; /* Adjust this value to control vertical overlap, approximately center of product image */
    left: 20px; /* Adjust horizontal position */
    width: 50px;
    height: 50px;
    background-color: var(--product-icon-bg); /* Light purple background */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    z-index: 5; /* Ensure it's above the image and overlay, but below quantity */
    border: 3px solid white; /* White border */
}

.product-card-icon svg {
    width: 28px;
    height: 28px;
    color: var(--product-icon-color); /* Dark purple icon color */
}

.product-content {
    padding: 30px 25px 25px; /* Adjust padding for content below image */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows content to take up remaining space */
}

.product-content h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--primary-dark);
}

.product-content p {
    font-size: 0.95rem;
    color: var(--text-color-dark);
    margin-bottom: 1.5rem; /* Space before button */
    flex-grow: 1; /* Pushes button to the bottom if descriptions vary */
}

/* Product CTA Buttons */
.btn-product-cta {
    display: flex; /* Use flex to center content */
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 400;
    padding: 5px 15px;
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    width: fit-content; /* Make button fit its content */
}

.btn-product-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-cta-pink {
    background-color: var(--btn-cta-pink-bg);
    color: var(--btn-cta-pink-color);
}
.btn-cta-pink:hover { background-color: #DDA3DD; }

.btn-cta-green {
    background-color: var(--btn-cta-green-bg);
    color: var(--btn-cta-green-color);
}
.btn-cta-green:hover { background-color: #92e0d3; }

.btn-cta-purple {
    background-color: var(--btn-cta-purple-bg);
    color: var(--btn-cta-purple-color);
}
.btn-cta-purple:hover { background-color: #D6B5F0; }

.btn-cta-orange {
    background-color: var(--btn-cta-orange-bg);
    color: var(--btn-cta-orange-color);
}
.btn-cta-orange:hover { background-color: #F7D19B; }

.btn-cta-red {
    background-color: var(--btn-cta-red-bg);
    color: var(--btn-cta-red-color);
}
.btn-cta-red:hover { background-color: #FA8B8B; }

/* Global CTA Buttons below product grid */
.btn-get-access {
    background: linear-gradient(90deg, var(--hero-purple-bg) 0%, var(--hero-teal) 100%); /* Same gradient as hero primary */
    color: var(--journey-btn-text);
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-get-access:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

.btn-get-access .arrow-right {
    font-size: 1.8rem;
}

.product-list-btn { /* This is the "View Complete Product List" button */
    background-color: transparent;
    color: var(--primary-dark);
    border: 1px solid #CBD5E0; /* Light gray border */
    box-shadow: none;
    margin-left: 20px;
    padding: 16px 28px;
}

.product-list-btn:hover {
    background-color: #E2E8F0;
    color: var(--primary-dark);
    transform: translateY(-2px);
}


/* Responsive Design (adjustments for Products section) */
@media (max-width: 992px) {
    .product-grid { gap: 20px; }
    .product-card-icon { top: 5%; left: 15px; width: 45px; height: 45px; }
    .product-card-icon svg { width: 24px; height: 24px; }
    .product-qty { font-size: 0.75rem; padding: 4px 8px; top: 10px; right: 10px; }
    .product-content { padding: 25px 20px 20px; }
    .product-content h3 { font-size: 1.3rem; }
    .product-content p { font-size: 0.9rem; margin-bottom: 1rem; }
    .btn-product-cta { font-size: 0.85rem; padding: 8px 12px; }

    .btn-get-access { padding: 15px 30px; font-size: 1rem; }
    .btn-get-access .arrow-right { font-size: 0rem; }
    .product-list-btn { padding: 14px 24px; font-size: 0.95rem; }
}

@media (max-width: 768px) {
    .products { padding: 80px 0; }
    .products h2 { font-size: 2rem; }
    .products .sub-heading { font-size: 1rem; }
    .product-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .product-card-icon { top: 5%; left: 15px; }
}

@media (max-width: 480px) {
    .products h2 { font-size: 1.8rem; }
    .products .sub-heading { font-size: 0.9rem; }
    .product-grid { grid-template-columns: 1fr; }
    .product-card-icon { top: 5%; left: 10px; width: 40px; height: 40px; }
    .product-card-icon svg { width: 22px; height: 22px; }
    .product-qty { font-size: 0.7rem; padding: 3px 7px; top: 8px; right: 8px; }
    .product-content { padding: 20px 15px 15px; }
    .product-content h3 { font-size: 1.2rem; }
    .product-content p { font-size: 0.85rem; }
    .btn-product-cta { font-size: 0.8rem; padding: 7px 10px; }

    .btn-get-access { flex-direction: column; gap: 8px; padding: 12px 24px; font-size: 0.9rem; }
    .btn-get-access .arrow-right { font-size: 0rem; }
    .product-list-btn { margin-left: 0; margin-top: 15px; display: block; width: 100%; }
}

/* Hero Section */
.hero {
    background-color: var(--secondary-light); /* Changed to light background */
    background-image: url('images/s1bg.jpg') !important;
    
    background-position: center top;
    background-repeat: repeat;
    color: var(--text-color-dark); /* Changed to dark text */
    padding: 100px 0 0 0; /* Adjust top padding, remove bottom padding as image will take its own space */
    text-align: center;
    position: relative;
    overflow: hidden; /* Ensure nothing overflows */
}


.hero-tag {
    background-color: #E9D8FD; /* Light purple background */
    color: var(--hero-purple-text); /* Darker purple text */
    padding: 8px 18px;
    border-radius: 50px;
    display: inline-flex; /* Use flex to align text and arrow */
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    border: 1px solid #D6BCFA;
}

.hero-tag .arrow-down {
    font-size: 1.2rem;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-color-dark); /* Now dark text for hero */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.hero h1 .highlight {
    color: var(--hero-teal); /* Teal color for "1 Million+" and "PLR Products" */
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
    color: var(--text-color-dark); /* Ensure paragraph is dark */
}

.hero-buttons {
    margin-bottom: 2.5rem; /* Reduced margin to bring checklist closer */
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow buttons to wrap on small screens */
    gap: 15px; /* Space between buttons */
}

/* Hero Checklist (Re-enabled and styled) */
.hero-checklist {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 2.5rem; /* Space below checklist */
    flex-wrap: wrap;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-color-dark);
}

.hero-checklist .checklist-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-checklist .icon {
    color: var(--hero-checklist-color); /* Purple checkmark */
    font-size: 1.2rem;
}

/* Trusted By Solopreneurs (integrated into Hero) */
.trusted-by-hero {
    margin-top: 2rem; /* Adjusted margin to fit new layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 4rem; /* Space before the big product image */
}

.trusted-by-hero .avatars {
    display: flex;
    position: relative;
    justify-content: center;
    margin-bottom: 5px;
}

.trusted-by-hero .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid white; /* White border around avatars */
    margin-left: -10px; /* Overlap avatars */
    object-fit: cover;
    background-color: #E2E8F0; /* Placeholder background */
}

.trusted-by-hero .avatar:first-child {
    margin-left: 0;
}

.trusted-by-hero .stars {
    color: #F6E05E; /* Yellow for stars */
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.trusted-by-hero .trusted-text {
    font-size: 1rem;
    color: var(--text-color-dark); /* Dark text for "Trusted by Solopreneurs" */
    margin: 0;
    opacity: 1; /* Ensure full opacity */
}

/* New: Hero Bottom Product Image */
.hero-bottom-image {
    width: 100%; /* Fill the width of its container (which is typically body/viewport) */
    max-width: 1000px; /* Limit max width as seen in screenshot */
    display: block; /* Remove extra space below image */
    margin: 0 auto; /* Center the image */
    object-fit: contain; /* Ensure the image scales down and fits without cropping */
    padding-top: 20px; /* Some padding from the elements above */
}


/* Responsive Design (adjustments for Hero Section) */
@media (max-width: 992px) {
    .hero h1 { font-size: 3rem; }
    .hero p { font-size: 1.2rem; }
    .hero-bottom-image { max-width: 90%; } /* Adjust for smaller screens */
}

@media (max-width: 768px) {
    .hero { padding: 80px 0 0 0; background-size: 30px 30px; }
    .hero-tag { margin-bottom: 1rem; font-size: 0.9rem; padding: 6px 15px; }
    .hero h1 { font-size: 2.5rem; }
    .hero p { font-size: 1rem; margin-bottom: 2rem;}
    .hero-buttons { flex-direction: column; gap: 15px; }
    .btn-hero-outline { margin-left: 0; }

    .hero-checklist { margin-bottom: 1.5rem; gap: 20px; font-size: 0.95rem; }

    .trusted-by-hero { margin-top: 1.5rem; margin-bottom: 2.5rem; }
    .trusted-by-hero .avatar { width: 35px; height: 35px; border-width: 2px; }
    .trusted-by-hero .stars { font-size: 1.3rem; }
    .trusted-by-hero .trusted-text { font-size: 0.9rem; }

    .hero-bottom-image { max-width: 100%; padding-top: 15px; } /* Ensure it takes full width within its context */
}

@media (max-width: 480px) {
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 0.9rem; }
    .btn { padding: 12px 24px; font-size: 0.9rem; }
    .hero-tag { font-size: 0.85rem; padding: 5px 10px; }

    .hero-checklist { font-size: 0.85rem; gap: 15px;}
    .hero-checklist .icon { font-size: 1rem; }

    .hero-bottom-image { padding-top: 10px; }
}

/* Problem/Solution Section */
.problem-solution {
    position: relative; /* Needed for overlay */
    background-color: var(--problem-bg);
    background-image: url('images/s1bg.jpg'); /* Assuming this is your grid pattern */
    background-repeat: repeat;
    padding: 100px 0; /* Consistent padding */
    color: var(--text-color-dark);
    text-align: center; /* Centers the inline-block tag */
    overflow: hidden; /* Ensures overlay stays inside */
}

.problem-solution::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        rgba(128, 0, 128, 0.08), /* soft purple */
        rgba(200, 120, 200, 0.1)  /* lighter pastel purple */
    );
    z-index: 0;
}

.problem-solution > * {
    position: relative;
    z-index: 1; /* Keeps text/content above overlay */
}


.business-risk-tag {
    background-color: var(--problem-tag-bg);
    color: var(--problem-tag-color);
    padding: 6px 16px; /* Refined padding */
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Reduced gap between text and icon */
    font-size: 0.85rem; /* Smaller font size for tag */
    font-weight: 400;
    margin-bottom: 2.5rem; /* More space below tag */
    border: 1px solid rgba(237, 137, 54, 0.2); /* Softer border */
}

.problem-solution h2 {
    color: var(--primary-dark);
    font-size: 2.8rem; /* Larger heading */
    margin-bottom: 1rem;
    line-height: 1.2;
}

.problem-solution h2 .highlight-orange {
    color: var(--problem-highlight-orange);
    position: relative;
    padding-bottom: 3px; /* Smaller padding for tighter underline */
    display: inline-block; /* Essential for underline to work on multi-line text if it wraps */
}

.problem-solution h2 .highlight-underline-orange::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--problem-highlight-underline-orange), transparent);
}

.problem-solution .sub-heading {
    font-size: 1.05rem; /* Slightly smaller sub-heading */
    color: var(--text-color-dark); /* Using dark text for main sub-heading */
    max-width: 650px; /* More constrained width */
    margin: 0 auto 4rem auto; /* More space before grid */
    line-height: 1.5;
}

.problem-solution .sub-heading .highlight-red-text {
    color: var(--problem-highlight-red-text);
    font-weight: 600; /* Slightly less bold */
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px; /* Consistent gap for cards */
   /* max-width: 960px;  Wider grid to match screenshot */
    margin: 0 auto;
}

.problem-item {
    background-color: var(--problem-card-bg);
    padding: 30px;
    border-top: var(--product-card-top-border) !important;
    border-radius: var(--border-radius);
    box-shadow: var(--problem-card-shadow);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease;
    border: 1px solid var(--problem-card-border); /* Light border */
}

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

.problem-icon {
    width: 55px; /* Specific width for the circle */
    height: 55px; /* Specific height for the circle */
    border-radius: 50%; /* Make it circular */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px; /* Space below icon */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow for icon container */
    border: 2px solid; /* Placeholder for specific border color below */
    font-size: 2.5rem; /* Emoji size */
    line-height: 1; /* For emoji vertical alignment */
}
/* Specific colors for each problem icon/background as seen in screenshot */
.problem-item:nth-child(1) .problem-icon {
    background-color: var(--problem-icon-bg-1);
    border-color: var(--problem-icon-border-1);
}
.problem-item:nth-child(2) .problem-icon {
    background-color: var(--problem-icon-bg-2);
    border-color: var(--problem-icon-border-2);
}
.problem-item:nth-child(3) .problem-icon {
    background-color: var(--problem-icon-bg-3);
    border-color: var(--problem-icon-border-3);
}
.problem-item:nth-child(4) .problem-icon {
    background-color: var(--problem-icon-bg-4);
    border-color: var(--problem-icon-border-4);
}

.problem-icon svg { /* If you replace emojis with SVGs */
    width: 32px; /* Adjust SVG size */
    height: 32px;
    color: var(--problem-icon-emoji-color); /* Default color, override for specific SVGs if needed */
}

.problem-item h3 {
    font-size: 1.35rem; /* Adjusted size for title */
    margin-bottom: 0.5rem;
    color: var(--primary-dark);
}

.problem-item p {
    font-size: 0.95rem; /* Adjusted size for description */
    color: var(--text-color-dark);
    line-height: 1.5;
}


/* Brutal Reality Section */
.brutal-reality-section {
    position: relative; /* Needed for overlay */
    background-image: url('images/s1bg.jpg');
    background-repeat: repeat;
    padding: 80px 0 100px 0; /* Adjusted padding-top and bottom */
    color: var(--text-color-dark);
    text-align: center;
    overflow: hidden; /* Ensures overlay stays inside */
}

.brutal-reality-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        rgba(66, 165, 178, 0.08), /* light teal */
        rgba(150, 220, 230, 0.1)  /* softer pastel aqua */
    );
    z-index: 0;
}

.brutal-reality-section > * {
    position: relative;
    z-index: 1; /* Keeps text/content above overlay */
}


.brutal-reality-tag {
    background-color: var(--brutal-tag-bg);
    color: var(--brutal-tag-color);
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Reduced gap */
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 2.5rem;
    border: 1px solid rgba(237, 137, 54, 0.2);
}

.brutal-reality-section h2 {
    color: var(--primary-dark);
    font-size: 2.8rem; /* Adjusted size */
    margin-bottom: 1rem;
    line-height: 1.2;
}

.brutal-reality-section h2 .highlight-orange {
    color: var(--brutal-highlight-orange);
}

.brutal-reality-section .sub-heading {
    font-size: 1.05rem;
    color: var(--text-color-dark);
    max-width: 650px;
    margin: 0 auto 4rem auto;
    line-height: 1.5;
}

.metric-grid {
    display: grid;
    
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Adjusted minmax for 4 columns */
    gap: 25px; /* Consistent gap */
    
    margin: 0 auto;
}

.metric-card {
    background-color: var(--metric-card-bg);
    padding: 30px;
    border-top: var(--product-card-top-border) !important;
    border-radius: var(--border-radius);
    box-shadow: var(--metric-card-shadow);
    text-align: center;
    transition: transform 0.3s ease;
    border: 1px solid var(--metric-card-border); /* Light border */
}

.metric-card:hover {
    transform: translateY(-5px);
}

.metric-icon {
    width: 55px; /* Specific width for the circle */
    height: 55px; /* Specific height for the circle */
    border-radius: 50%; /* Make it circular */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 18px auto; /* Center icon and add space below */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow for icon container */
    border: 2px solid; /* Placeholder for specific border color below */
    font-size: 2.5rem; /* Emoji size */
    line-height: 1; /* For emoji vertical alignment */
}
/* Specific colors for each metric icon/background as seen in screenshot */
.metric-card:nth-child(1) .metric-icon {
    background-color: var(--metric-icon-bg-1);
    border-color: var(--metric-icon-border-1);
}
.metric-card:nth-child(2) .metric-icon {
    background-color: var(--metric-icon-bg-2);
    border-color: var(--metric-icon-border-2);
}
.metric-card:nth-child(3) .metric-icon {
    background-color: var(--metric-icon-bg-3);
    border-color: var(--metric-icon-border-3);
}
.metric-card:nth-child(4) .metric-icon {
    background-color: var(--metric-icon-bg-4);
    border-color: var(--metric-icon-border-4);
}

.metric-icon svg { /* If you replace emojis with SVGs */
    width: 32px; /* Adjust SVG size */
    height: 32px;
    color: var(--metric-icon-emoji-color); /* Default color, override for specific SVGs if needed */
}

.metric-card h3 {
    font-size: 2.5rem; /* Larger for the percentage/value */
    font-weight: 700;
    color: var(--metric-value-color); /* Teal color for the value */
    margin-bottom: 0.5rem;
    line-height: 1;
}

.metric-card .metric-title {
    font-size: 1.15rem; /* Adjusted size */
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 0.6rem; /* Reduced margin */
}

.metric-card .metric-description {
    font-size: 0.9rem; /* Slightly smaller */
    color: var(--text-color-dark);
    line-height: 1.4;
}

/* Responsive Design (adjustments for these sections) */
@media (max-width: 992px) {
    .problem-solution h2 { font-size: 2.5rem; }
    .brutal-reality-section h2 { font-size: 2.2rem; }
    .problem-solution .sub-heading, .brutal-reality-section .sub-heading { font-size: 1rem; }
    .problem-grid, .metric-grid { gap: 20px; }
    .metric-card h3 { font-size: 2.2rem; }
    .metric-card .metric-title { font-size: 1.05rem; }
}

@media (max-width: 768px) {
    .problem-solution, .brutal-reality-section { padding: 60px 0; }
    .business-risk-tag, .brutal-reality-tag { margin-bottom: 1.5rem; }
    .problem-solution h2, .brutal-reality-section h2 { font-size: 2rem; }
    .problem-solution .sub-heading, .brutal-reality-section .sub-heading { font-size: 0.95rem; margin-bottom: 2rem;}
    .problem-grid, .metric-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* Stack into 2 columns on tablet */
    .problem-item, .metric-card { padding: 25px; text-align: center; align-items: center; } /* Center align on tablet */
    .problem-icon, .metric-icon { margin: 0 auto 15px auto; } /* Center icon on tablet */
    .problem-item h3 { font-size: 1.25rem; }
    .metric-card h3 { font-size: 2rem; }
}

@media (max-width: 480px) {
    .problem-solution h2, .brutal-reality-section h2 { font-size: 1.6rem; }
    .problem-solution .sub-heading, .brutal-reality-section .sub-heading { font-size: 0.85rem; }
    .problem-grid, .metric-grid { grid-template-columns: 1fr; } /* Stack into single column on mobile */
    .problem-item h3, .metric-card .metric-title { font-size: 1.15rem; }
    .problem-item p, .metric-card .metric-description { font-size: 0.8rem; }
    .problem-icon, .metric-icon { width: 48px; height: 48px; font-size: 2.2rem; margin-bottom: 10px; } /* Smaller icons on tiny screens */
    .metric-card h3 { font-size: 1.6rem; }
}
/* Header */
.header {
    background-color:  var(--header-initial-bg);/* Initial slightly transparent background  */
    color: var(--header-scrolled-bg);
    padding: 0.5rem 0; /* Increased vertical padding for a taller header */
    position: sticky;
    top: 0;
    left: 0; /* Ensure it spans full width */
    width: 100%; /* Ensure it spans full width */
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle initial shadow */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; /* Smooth transitions */
    backdrop-filter: blur(0px); /* Start with no blur */
    border-top: 3px solid transparent; /* Thickness of border */
  border-image: linear-gradient(to right, #7B2FF7, #00C6FF) 1;
  
    -webkit-backdrop-filter: blur(0px); /* For Safari support */
}

/* Styles applied when the header is scrolled */
.header.scrolled {
    background-color: var(--header-scrolled-bg); /* More opaque background on scroll */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); /* Stronger shadow on scroll */
    backdrop-filter: blur(8px); /* Apply the glassy blur effect */
    -webkit-backdrop-filter: blur(8px); /* For Safari */
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 45px; /* Ensures consistent height */
}

.logo {
    font-size: 2rem; /* Larger font size for logo */
    font-weight: 600;
    color: var(--text-color-light); /* Logo remains light text */
    text-decoration: none;
    letter-spacing: -0.5px; /* Subtle letter spacing */
    transition: color 0.3s ease;
    background: linear-gradient(to right, #7B2FF7, #00C6FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  color: transparent;
}

.logo:hover {
    color: var(--accent-orange); /* Existing hover color */
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 35px; /* Increased gap between nav items */
}

.nav-links a {
    color: #000; /* var(--text-color-light); Default nav link color (light) */
    text-decoration: none;
    font-weight: 400;
    font-size: 1.05rem; /* Slightly larger font for nav links */
    position: relative;
    transition: color 0.3s ease; /* Smooth color transition */
    padding: 5px 0; /* Add some vertical padding for click area */
    
}

.nav-links a:hover {
    color: #AD2DF8; /* var(--accent-orange); Existing hover color */
}

/* Specific class for the "Buy Now" button in the header */
.header-cta-btn {
    color: #fff;
  background: linear-gradient(to left, #7B2FF7, #00C6FF);
    margin-left: 40px; /* Space from nav links */
    padding: 12px 25px; /* Adjusted padding */
    font-size: 1rem;
    font-weight: 700;
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.header-cta-btn:hover {
    background-color: var(--orange-hover);
    transform: translateY(-2px);
}

/* === Styles when header is scrolled === */
.header.scrolled .nav-links a {
    color: #00C6FF; /* var(--header-accent-color); Nav links become purple on scroll */
}
.header.scrolled .nav-links a:hover {
    color: #000; /*var(--header-accent-hover); Darker purple on hover when scrolled */
}

.header.scrolled .header-cta-btn {
    background-color: var(--header-accent-color); /* Button becomes purple on scroll */
    color: var(--text-color-light); /* Light text on purple for contrast */
}
.header.scrolled .header-cta-btn:hover {
    background-color: var(--header-accent-hover); /* Darker purple on hover when scrolled */
    transform: translateY(-2px);
}

/* Mobile Navigation Toggle (Hamburger Icon) */
.nav-toggle {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 1001; /* Ensure toggle is above mobile menu */
}

.nav-toggle span {
    display: block;
    height: 2px;
    background-color: var(--text-color-light); /* Hamburger lines are light */
    border-radius: 2px;
    transition: all 0.3s ease;
}

.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }


/* Responsive Design for Header */
@media (max-width: 768px) {
    .header {
        padding: 1rem 0; /* Slightly reduce padding on mobile */
    }

    .nav-links {
        display: none; /* Hidden by default on mobile */
        flex-direction: column;
        background-color: var(--header-mobile-menu-bg); /* Solid dark background for mobile menu */
        position: absolute;
        top: 67px; /* Position below header (adjust if header height changes) */
        left: 0;
        width: 100%;
        padding: 25px 0; /* Increased padding for mobile menu */
        box-shadow: var(--box-shadow);
        align-items: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        /* Smooth slide-in/out effect */
        transform: translateY(-100%);
        opacity: 0;
        transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    }
    .nav-links.open {
        display: flex; /* Show mobile menu when 'open' class is active */
        transform: translateY(0); /* Slide into view */
        opacity: 1;
    }
    .nav-links li {
        margin: 12px 0; /* More space between mobile nav items */
    }
    .nav-links a {
        font-size: 1.2rem; /* Larger font for mobile nav links */
        padding: 8px 0;
        color: var(--text-color-light); /* Mobile menu links default to light color */
    }
    /* Mobile menu links also turn purple on scroll when open */
    .header.scrolled .nav-links.open a {
        color: var(--header-accent-color);
    }
    .header.scrolled .nav-links.open a:hover {
        color: var(--header-accent-hover);
    }

    .nav-toggle {
        display: flex; /* Show hamburger icon on mobile */
        color:#000;
    }
    .header .header-cta-btn {
        display: none; /* Hide header CTA button on mobile by default */
        /* You might choose to show it as the last item in the mobile menu when open */
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.6rem; /* Smaller logo on very small screens */
    }
}

/* Solution Comparison Section */
.solution-comparison-section {
    background-color: var(--solution-comparison-bg); /* Light background for the section */
    background-image: url('images/s1bg.jpg'); /* Assuming grid pattern */
    
    background-repeat: repeat;
    padding: 80px 0 100px 0; /* Adjust padding for visual spacing */
    color: var(--text-color-dark);
    text-align: center; /* Centers the tag and heading */
}

.solution-tag-green {
    background-color: var(--solution-tag-green-bg);
    color: var(--solution-tag-green-color);
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 2rem; /* Space below tag */
    border: 1px solid var(--solution-tag-green-border);
}

.solution-tag-green .solution-tag-icon {
    font-size: 1rem; /* Adjust icon size if using custom SVG/image */
    line-height: 1;
}

.solution-comparison-section h2 {
    color: var(--primary-dark);
    font-size: 2.8rem; /* Larger heading */
    margin-bottom: 1rem;
    line-height: 1.2;
}

.solution-comparison-section h2 .highlight-green {
    color: var(--highlight-green-color);
    position: relative;
    display: inline-block;
}

.solution-comparison-section .sub-heading {
    font-size: 1.05rem;
    color: var(--text-color-dark);
    max-width: 700px;
    margin: 0 auto 3rem auto;
    line-height: 1.5;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 30px; /* Space between the two main cards */
   
    margin: 0 auto 3rem auto; /* Center and add space below grid */
}

.old-way-card, .plrbox-way-card {
    background-color: var(--comparison-card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--comparison-card-shadow);
    border: 1px solid var(--comparison-card-border);
    text-align: left;
    display: flex;
    flex-direction: column;
}

.old-way-card {
    border: 1px solid var(--old-way-border);
}
.plrbox-way-card {
    border: 1px solid var(--plrbox-way-border);
}

.old-way-title, .plrbox-way-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem; /* Space below title */
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icon and text */
}

.old-way-title {
    color: var(--old-way-title-color);
}
.plrbox-way-title {
    color: var(--plrbox-way-title-color);
}

.old-way-icon, .plrbox-way-icon {
    font-size: 1.5rem; /* Icon size */
    line-height: 1; /* For emoji alignment */
}
.old-way-icon { color: var(--old-way-icon-color); }
.plrbox-way-icon { color: var(--plrbox-way-icon-color); }


.comparison-list {
    list-style: none;
    padding: 0;
    flex-grow: 1; /* Allows list to take up available height */
}

.comparison-list li {
    display: flex; /* Change from grid to flex for simpler vertical stack */
    flex-direction: column;
    align-items: flex-start; /* Align all content to the left */
    padding: 15px 0; /* Vertical padding for list items */
    border-bottom: 1px solid #F0F4F8; /* Solid light grey separator, no dashed */
    font-size: 1rem;
    color: var(--text-color-dark);
}

.comparison-list li:last-child {
    border-bottom: none;
}

.step-header {
    display: flex; /* Flex to align number and title horizontally */
    align-items: center;
    gap: 10px; /* Space between number and title */
    margin-bottom: 5px; /* Space between header and detail/duration */
}

.step-number-red, .step-number-green {
    width: 25px; /* Size of the number circle */
    height: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0; /* Prevent shrinking */
}
.step-number-red {
    background-color: var(--step-number-red-bg);
    color: var(--step-number-red-color);
}
.step-number-green {
    background-color: var(--step-number-green-bg);
    color: var(--step-number-green-color);
}

.step-title {
    font-size: 1.1rem; /* Slightly larger for the step title */
    font-weight: 600;
    color: var(--primary-dark);
}

.step-detail {
    font-size: 0.95rem; /* Smaller for the detail text */
    color: var(--text-color-dark);
    margin-left: 35px; /* Indent to align with step title text */
    margin-bottom: 5px; /* Space before duration */
    line-height: 1.4;
}

.step-duration-red, .step-duration-green {
    font-weight: 500; /* Slightly lighter font weight */
    font-size: 0.9rem; /* Smaller for duration */
    white-space: nowrap;
    text-align: left; /* Align left */
    margin-left: 35px; /* Indent to align with detail text */
}
.step-duration-red {
    color: var(--step-duration-red-color);
}
.step-duration-green {
    color: var(--step-duration-green-color);
}

.journey-offer-text {
    font-size: 0.95rem;
    color: var(--journey-offer-text-color);
    margin-top: 15px; /* Space below button */
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 992px) {
    .solution-comparison-section h2 { font-size: 2.5rem; }
    .comparison-grid { gap: 20px; }
    .old-way-title, .plrbox-way-title { font-size: 1.6rem; margin-bottom: 1.5rem; }
    .comparison-list li { padding: 12px 0; }
    .step-title { font-size: 1rem; }
    .step-detail { font-size: 0.9rem; margin-left: 32px; }
    .step-duration-red, .step-duration-green { font-size: 0.85rem; margin-left: 32px; }
    .step-number-red, .step-number-green { width: 22px; height: 22px; font-size: 0.8rem; }
}

@media (max-width: 768px) {
    .solution-comparison-section { padding: 60px 0; }
    .solution-tag-green { margin-bottom: 1.5rem; }
    .solution-comparison-section h2 { font-size: 2.2rem; }
    .solution-comparison-section .sub-heading { font-size: 1rem; margin-bottom: 2rem; }
    .comparison-grid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 2rem; } /* Stack cards on mobile */
    .old-way-card, .plrbox-way-card { padding: 25px; }
    .old-way-title, .plrbox-way-title { font-size: 1.5rem; margin-bottom: 1.5rem; }
    .comparison-list li { padding: 10px 0; }
    .step-detail { margin-left: 30px; }
    .step-duration-red, .step-duration-green { margin-left: 30px; }
    .journey-offer-text { font-size: 0.9rem; }
}

@media (max-width: 480px) {
    .solution-comparison-section h2 { font-size: 1.8rem; }
    .solution-comparison-section .sub-heading { font-size: 0.85rem; }
    .old-way-title, .plrbox-way-title { font-size: 1.3rem; }
    .comparison-list li { padding: 8px 0; }
    .step-title { font-size: 0.95rem; }
    .step-detail { font-size: 0.85rem; margin-left: 28px; }
    .step-duration-red, .step-duration-green { font-size: 0.8rem; margin-left: 28px; }
    .step-number-red, .step-number-green { width: 20px; height: 20px; font-size: 0.75rem; }
}

/* Ways to Utilize & Sell Everywhere Section */
.utilize-sell-everywhere {
    background-color: var(--utilize-section-bg); /* Deep dark blue background */
    padding: 100px 0; /* Vertical padding */
    color: var(--text-color-light); /* Default light text color */
    text-align: center; /* Center main headings and tags */
}

.section-tag-purple, .section-tag-red {
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 2rem; /* Space below tag */
    border: 1px solid; /* Defined by specific tag class */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-tag-purple {
    background-color: var(--section-tag-purple-bg);
    color: var(--section-tag-purple-color);
    border-color: var(--section-tag-purple-border);
}

.section-tag-red {
    background-color: var(--section-tag-red-bg);
    color: var(--section-tag-red-color);
    border-color: var(--section-tag-red-border);
    margin-top: 5rem; /* Space above the "Sell Everywhere" tag */
    margin-bottom: 3rem; /* Space below the "Sell Everywhere" tag */
}

.section-tag-icon {
    font-size: 1rem;
    line-height: 1;
}

.utilize-sell-everywhere h2 {
    color: var(--text-color-light);
    font-size: 2.8rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.utilize-sell-everywhere h2 .highlight-underline-teal-gradient {
    position: relative;
    padding-bottom: 5px;
    display: inline-block;
}

.utilize-sell-everywhere h2 .highlight-underline-teal-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--highlight-underline-teal-gradient-start), var(--highlight-underline-teal-gradient-end));
}

.utilize-sell-everywhere .sub-heading {
    font-size: 1.05rem;
    color: var(--text-color-subtle);
    max-width: 700px;
    margin: 0 auto 4rem auto; /* Space before strategies grid */
    line-height: 1.5;
}

/* Strategies Grid */
.strategies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 2 columns on desktop */
    gap: 30px;
    
    margin: 0 auto;
}

.strategy-card {
    background-color: var(--strategy-card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--strategy-card-shadow);
    border: 1px solid var(--strategy-card-border);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.3s ease;
}

.strategy-card:hover {
    transform: translateY(-5px);
}

.strategy-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--strategy-header-color);
    margin-bottom: 20px; /* Space below header */
}

.strategy-icon {
    width: 55px;
    height: 55px;
    background-color: var(--strategy-icon-bg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px; /* Space below icon */
    font-size: 2.5rem; /* Emoji size */
    line-height: 1; /* For emoji alignment */
    color: var(--strategy-icon-color); /* Apply primary icon color */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.strategy-card h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
    color: var(--strategy-title-color);
}

.strategy-card p {
    font-size: 0.95rem;
    color: var(--strategy-desc-color);
    line-height: 1.5;
}

/* Platform Grid */
.platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Many columns on desktop */
    gap: 15px; /* Smaller gap for logos */
    
    margin: 0 auto;
    
}

.platform-logo {
    background-color: var(--platform-logo-bg); /* Initial state, will be overridden by animation */
    color: var(--platform-logo-color);
    padding: 15px 10px;
    border-radius: 25px; /* From your snippet */
    box-shadow: var(--platform-logo-shadow);
    text-align: center;
    /* vertical-align: middle; is typically for inline-block alignment with text baseline. Not directly needed for centering content inside. */
    font-weight: 300; /* From your snippet */
    font-size: 0.95rem;
    transition: transform 0.3s ease; /* Keep existing transform transition */
flex-shrink: 0; /* Prevent items from shrinking below their content size */
    flex-grow: 0; /* Prevent items from stretching to fill available space */
    /* NEW: Apply the animated background color */
    animation: platformLogoColorAnimation 6s infinite alternate; /* 6s duration, infinite loop, alternates direction */
}

.platform-logo:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Final CTA Button for this section */
.btn-monetize {
    background: linear-gradient(90deg, var(--btn-monetize-start) 0%, var(--btn-monetize-end) 100%);
    color: var(--btn-monetize-text);
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-monetize:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

.btn-monetize .arrow-right {
    font-size: 1.8rem;
}

.monetize-subtitle {
    font-size: 0.95rem;
    color: var(--monetize-subtitle-color);
    margin-top: 15px; /* Space below button */
    font-weight: 500;
}


/* Responsive Design */
@media (max-width: 992px) {
    .utilize-sell-everywhere h2 { font-size: 2.5rem; }
    .strategies-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* Adjust strategy grid columns */
    .platform-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); } /* Adjust platform grid columns */
    .btn-monetize { padding: 15px 30px; font-size: 1rem; }
    .btn-monetize .arrow-right { font-size: 0rem; }
}

@media (max-width: 768px) {
    .utilize-sell-everywhere { padding: 80px 0; }
    .section-tag-purple, .section-tag-red { margin-bottom: 1.5rem; font-size: 0.8rem; padding: 5px 12px; }
    .utilize-sell-everywhere h2 { font-size: 2.2rem; }
    .utilize-sell-everywhere .sub-heading { font-size: 1rem; margin-bottom: 3rem; }
    .strategies-grid { grid-template-columns: 1fr; gap: 25px; } /* Stack strategy cards on tablet */
    .strategy-card { padding: 25px; }
    .strategy-icon { width: 50px; height: 50px; font-size: 2.2rem; margin-bottom: 10px; }
    .strategy-card h3 { font-size: 1.25rem; }
    .strategy-card p { font-size: 0.9rem; }
    .section-tag-red { margin-top: 3rem; margin-bottom: 2rem; } /* Adjust spacing for second tag */
    .platform-grid { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; } /* Adjust for tablet */
    .platform-logo { padding: 12px 8px; font-size: 0.9rem; }
    .monetize-subtitle { font-size: 0.9rem; }
}

@media (max-width: 480px) {
    .utilize-sell-everywhere h2 { font-size: 1.8rem; }
    .utilize-sell-everywhere .sub-heading { font-size: 0.9rem; }
    .platform-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); } /* Further adjust for small phones */
    .platform-logo { font-size: 0.8rem; }
    .btn-monetize { padding: 12px 24px; font-size: 0.9rem; flex-direction: column; gap: 5px; } /* Stack button on tiny screens */
    .monetize-subtitle { font-size: 0.85rem; margin-top: 10px; }
}

/* Success Stories Section */
.success-stories-section {
    background-color: var(--success-stories-bg);
    background-image: url('images/s1bg.jpg'); /* Assuming grid pattern */
    
    background-repeat: repeat;
    padding: 100px 0;
    color: var(--text-color-dark);
    text-align: center;
}

.success-stories-section h2 {
    color: var(--success-stories-heading-color);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.success-stories-section h2 .highlight-success-teal {
    color: var(--success-stories-highlight-teal);
}

.success-stories-section .sub-heading {
    font-size: 1.15rem;
    color: var(--success-stories-subheading-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 5rem; /* Space before carousel starts */
}

/* Portfolio Carousel Styling */
.portfolio-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0; /* Vertical padding to contain shadows */
    /* Masking for fade effect on edges */
    mask-image: linear-gradient(to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.portfolio-carousel {
    display: flex;
    white-space: nowrap; /* Keep items in a single line */
    animation: scrollPortfolio 30s linear infinite; /* Adjust duration for speed */
    will-change: transform;
}

/* Pause animation on hover */
.portfolio-carousel-wrapper:hover .portfolio-carousel {
    animation-play-state: paused;
}

.portfolio-item {
    flex-shrink: 0;
    /* Adjusted width and significantly increased height for tall screenshots */
    width: 280px; /* Slightly reduced width to allow for more height */
    height: 550px; /* Increased height to better fit tall content */
    margin: 0 20px; /* Increased space between items for visual separation */
    background-color: var(--portfolio-item-bg);
    border-radius: var(--portfolio-item-border-radius);
    box-shadow: var(--portfolio-item-shadow);
    overflow: hidden; /* Ensures image respects border-radius */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align image to the top inside the card */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Subtle border */
}

.portfolio-item img {
    width: 100%;
    height: auto; /* Allow image height to be determined by content/aspect ratio */
    object-fit: contain; /* CRUCIAL: Fits entire image within container without cropping */
    object-position: top; /* CRUCIAL: Shows the top of the long page */
    display: block;
    border-radius: var(--portfolio-item-border-radius); /* Apply radius to image container as well */
}

/* Keyframes for horizontal scrolling animation - RECALCULATED for new dimensions */
@keyframes scrollPortfolio {
    0% { transform: translateX(0); }
    /* Calculation: -1 * ((item_width + (margin_left + margin_right)) * num_unique_items) */
    /* -1 * ((280px + (20px * 2)) * 6) = -1 * (320px * 6) = -1920px */
    100% { transform: translateX(calc(-280px * 6 - 20px * 6 * 2)); }
}


/* Responsive Adjustments for Carousel - RECALCULATED for new dimensions */
@media (max-width: 992px) {
    .portfolio-item { width: 250px; height: 500px; margin: 0 15px; } /* Adjust for mid-size screens */
    @keyframes scrollPortfolio {
        100% { transform: translateX(calc(-250px * 6 - 15px * 6 * 2)); }
    }
}

@media (max-width: 768px) {
    .success-stories-section h2 { font-size: 2.5rem; }
    .success-stories-section .sub-heading { font-size: 1rem; margin-bottom: 3rem; }
    .portfolio-carousel-wrapper { padding: 15px 0; }
    .portfolio-item { width: 220px; height: 450px; margin: 0 12px; } /* Adjust for tablets */
    @keyframes scrollPortfolio {
        100% { transform: translateX(calc(-220px * 6 - 12px * 6 * 2)); }
    }
}

@media (max-width: 480px) {
    .success-stories-section h2 { font-size: 2rem; }
    .success-stories-section .sub-heading { font-size: 0.9rem; margin-bottom: 2rem; }
    .portfolio-carousel-wrapper { padding: 10px 0; }
    .portfolio-item { width: 180px; height: 350px; margin: 0 10px; } /* Adjust for very small screens */
    @keyframes scrollPortfolio {
        100% { transform: translateX(calc(-180px * 6 - 10px * 6 * 2)); }
    }
    /* Reusing existing button/subtitle styles for consistency */
    .btn-journey { flex-direction: column; gap: 8px; padding: 12px 24px; font-size: 0.9rem; }
    .journey-subtitle { font-size: 0.85rem; margin-top: 10px; }
}

/* CTA Section */
.cta-section {
    background-color: var(--cta-section-bg); /* Deep dark blue background */
    
    background-repeat: repeat;
    padding: 100px 0;
    color: var(--text-color-light); /* Default light text */
    text-align: center; /* Center initial elements */
}

.limited-offer-tag {
    background-color: var(--limited-offer-tag-bg);
    color: var(--limited-offer-tag-color);
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 2.5rem;
    border: 1px solid var(--limited-offer-tag-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.limited-offer-icon {
    font-size: 1rem;
    line-height: 1;
}

.cta-section h2 {
    color: var(--text-color-light);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 4rem; /* More space before the main grid */
    line-height: 1.2;
}
.cta-section h2 .highlight-purple-cta {
    color: var(--cta-headline-highlight-purple);
}

.cta-main-content-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Left column slightly wider for text */
    gap: 50px; /* Space between columns */
    
    margin: 0 auto;
    align-items: flex-start; /* Align content to the top of columns */
    text-align: left; /* Reset text alignment for column content */
}

/* Left Column Styling */
.cta-left-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cta-metrics-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Auto-fit for 3 cards */
    gap: 20px;
    width: 100%;
    margin-bottom: 4rem; /* Space before checklist */
}

.cta-metric-card {
    background-color: var(--cta-metric-card-bg);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--cta-metric-card-shadow);
    border: 1px solid var(--cta-metric-card-border);
    text-align: center; /* Metrics content is centered */
    transition: transform 0.3s ease;
}
.cta-metric-card:hover {
    transform: translateY(-5px);
}

.metric-card-icon {
    width: 48px; /* Size for icon background */
    height: 48px;
    border-radius: 50%;
    background-color: var(--cta-metric-icon-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px auto; /* Center icon */
    font-size: 2.2rem; /* Emoji size */
    line-height: 1;
    color: var(--cta-metric-icon-color); /* Icon color */
}

.metric-card-value {
    font-size: 1.8rem; /* Value size */
    font-weight: 700;
    color: var(--cta-metric-value-color); /* Teal for values */
    margin-bottom: 0.5rem;
    line-height: 1;
}

.metric-card-label {
    font-size: 0.9rem;
    color: var(--cta-metric-label-color); /* Dark text for label */
}

.cta-features-checklist {
    list-style: none;
    padding: 0;
    margin-bottom: 3rem; /* Space before button */
}
.cta-features-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1.1rem;
    color: var(--cta-checklist-text-color);
    margin-bottom: 15px;
    line-height: 1.4;
}
.cta-features-checklist li:last-child {
    margin-bottom: 0;
}
.cta-features-checklist .checklist-icon {
    color: var(--cta-checklist-icon-color); /* Green checkmark */
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px; /* Adjust for vertical alignment with text */
}

.btn-get-started-cta {
    background: linear-gradient(90deg, var(--btn-get-started-cta-start) 0%, var(--btn-get-started-cta-end) 100%);
    color: var(--btn-get-started-cta-text);
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex; /* Use inline-flex to allow centering the button within its parent div */
    align-items: center;
    gap: 10px;
    text-decoration: none; /* Ensure no underline */
    margin-bottom: 2rem; /* Space before guarantee line */
}
.btn-get-started-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}
.btn-get-started-cta .arrow-right {
    font-size: 1.8rem;
}

.cta-guarantee-line {
    font-size: 0.9rem;
    color: var(--cta-guarantee-color);
    font-weight: 500;
    
    align-items: center;
	
    gap: 15px; /* Space between bullet points/icons */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    padding-left: 0; /* Remove default list padding if turned into a list */
    list-style: none; /* In case it becomes a ul/li later */
}
.cta-guarantee-line .guarantee-icon {
    color: var(--guarantee-icon-color);
    font-size: 1.1rem;
    line-height: 1;
}

/* Right Column Styling (Product Display) */
.cta-right-column {
    display: flex;
    justify-content: center; /* Center the image vertically */
    align-items: center; /* Center the image horizontally */
}
.cta-product-display {
    width: 100%; /* Fill column width */
    max-width: 500px; /* Max width to control image size */
    background-color: var(--cta-product-display-bg); /* Dark background */
    border-radius: var(--border-radius);
    border: 1px solid var(--cta-product-border); /* Light purple border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Stronger shadow */
    overflow: hidden; /* Ensure image and banner fit */
    position: relative; /* For positioning the banner */
    display: flex; /* Flex container for img and banner */
    flex-direction: column;
}
.cta-product-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* Ensure full image is visible */
    object-position: center; /* Center the image within its space */
}
.cta-product-bottom-banner {
    background-color: var(--cta-product-bottom-banner-bg);
    color: var(--cta-product-bottom-banner-text);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 15px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Space for elements within the banner */
    text-transform: uppercase;
    flex-shrink: 0; /* Prevent banner from shrinking */
}
.cta-product-bottom-banner .banner-price {
    font-size: 1.5rem;
    color: var(--cta-product-banner-price-color); /* Teal price color */
}


/* Responsive Design */
@media (max-width: 992px) {
    .cta-section h2 { font-size: 2.5rem; margin-bottom: 3rem; }
    .cta-main-content-grid { grid-template-columns: 1fr; gap: 40px; } /* Stack columns on tablet */
    .cta-left-column { align-items: center; } /* Center content in left column */
    .cta-metrics-card-grid { justify-content: center; margin-bottom: 3rem; }
    .cta-features-checklist { margin-bottom: 2rem; }
    .cta-features-checklist li { justify-content: center; text-align: center; } /* Center checklist items on tablet */
    .cta-product-display { max-width: 450px; } /* Adjust product image size */
    .cta-product-bottom-banner { font-size: 1rem; padding: 12px 15px; }
    .cta-product-bottom-banner .banner-price { font-size: 1.3rem; }
}

@media (max-width: 768px) {
    .cta-section { padding: 80px 0; }
    .limited-offer-tag { margin-bottom: 2rem; font-size: 0.8rem; padding: 5px 12px; }
    .cta-section h2 { font-size: 2.2rem; margin-bottom: 2.5rem; }
    .cta-metrics-card-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 15px; margin-bottom: 2.5rem; }
    .cta-metric-card { padding: 20px 15px; }
    .metric-card-icon { width: 40px; height: 40px; font-size: 1.8rem; margin-bottom: 10px; }
    .metric-card-value { font-size: 1.5rem; }
    .metric-card-label { font-size: 0.8rem; }
    .cta-features-checklist li { font-size: 1rem; margin-bottom: 12px; }
    .cta-features-checklist .checklist-icon { font-size: 1.1rem; }
    .btn-get-started-cta { padding: 15px 30px; font-size: 1rem; }
    .btn-get-started-cta .arrow-right { font-size: 1.5rem; }
    .cta-guarantee-line { font-size: 0.85rem; justify-content: center; text-align: center; gap: 10px; }
    .cta-guarantee-line .guarantee-icon { font-size: 1rem; }
    .cta-product-display { max-width: 350px; } /* Smaller product image on tablets */
}

@media (max-width: 480px) {
    .cta-section h2 { font-size: 1.8rem; margin-bottom: 2rem; }
    .cta-metrics-card-grid { grid-template-columns: 1fr; } /* Stack metrics on mobile */
    .cta-metric-card { padding: 25px; }
    .metric-card-icon { width: 48px; height: 48px; font-size: 2.2rem; }
    .metric-card-value { font-size: 1.8rem; }
    .metric-card-label { font-size: 0.9rem; }
    .cta-features-checklist li { font-size: 0.95rem; }
    .btn-get-started-cta { flex-direction: column; gap: 8px; padding: 12px 24px; font-size: 0.9rem; }
    .cta-product-display { max-width: 100%; } /* Allow product image to take full width of column */
    .cta-product-bottom-banner { font-size: 0.9rem; padding: 10px 15px; }
    .cta-product-bottom-banner .banner-price { font-size: 1.2rem; }
}

/* Bonuses Section */
.bonuses {
    position: relative; /* Needed for overlay */
    background-color: var(--bonuses-bg);
    background-image: url('images/s1bg.jpg'); /* Assuming grid pattern */
    background-repeat: repeat;
    padding: 100px 0;
    color: var(--text-color-dark);
    text-align: center;
    overflow: hidden; /* Ensures overlay stays inside */
}

.bonuses::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        rgba(66, 165, 178, 0.08), /* base #42A5B2 very soft */
        rgba(200, 235, 240, 0.1)  /* pastel fade */
    );
    z-index: 0;
}

.bonuses > * {
    position: relative;
    z-index: 1; /* keep text/content above overlay */
}


.bonus-tag {
    background-color: var(--bonus-tag-bg);
    color: var(--bonus-tag-color);
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 2rem;
    border: 1px solid var(--bonus-tag-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.bonus-tag-icon {
    font-size: 1rem;
    line-height: 1;
}

.bonuses h2 {
    color: var(--primary-dark); /* Default dark text for the start of the h2 */
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.bonuses h2 .highlight-bonuses-purple {
    color: var(--bonuses-headline-purple);
}
.bonuses h2 .highlight-bonuses-teal {
    color: var(--bonuses-headline-teal);
}

.bonuses .sub-heading {
    font-size: 1.05rem;
    color: var(--text-color-dark);
    max-width: 700px;
    margin: 0 auto 3rem auto; /* Space before bonus grid */
    line-height: 1.5;
}

.bonus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 3 columns on desktop */
    gap: 30px;
    
    margin: 0 auto;
}

.bonus-card {
    background-color: var(--bonus-card-bg);
    border-radius: var(--border-radius);
    border-top: 4px solid #56358F !important;
    border-bottom: 4px solid #56358F !important;
    box-shadow: var(--bonus-card-shadow);
    border: 1px solid var(--bonus-card-border);
    overflow: hidden; /* Crucial for image border-radius */
    display: flex;
    flex-direction: column;
    text-align: left; /* Content is left-aligned */
    transition: transform 0.3s ease;
}
.bonus-card:hover {
    transform: translateY(-5px);
}

.bonus-image-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    background-color: #F0F4F8; /* Placeholder background if image not loaded */
}
.bonus-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure full image is visible, no cropping */
    object-position: center; /* Center the image */
    display: block;
}

.bonus-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--bonus-badge-bg);
    color: var(--bonus-badge-color);
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 400;
    z-index: 2;
}

.bonus-price-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--bonus-price-tag-bg);
    color: var(--bonus-price-tag-color);
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 400;
    z-index: 2;
}

.bonus-content {
    padding: 25px 25px 30px; /* Adjust padding below image */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow content to take remaining height */
}
.bonus-content h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--primary-dark);
    margin-bottom: 0.75rem;
}
.bonus-content p {
    font-size: 0.95rem;
    color: var(--text-color-dark);
    line-height: 1.5;
    flex-grow: 1; /* Push content to top, ensuring consistent button alignment if present */
}

/* Video Training Section */
.video-training {
    background-color: var(--video-training-bg);
    background-image: url('images/s1bg.jpg');
    
    background-repeat: repeat;
    padding: 100px 0; /* Adjust padding */
    color: var(--text-color-dark);
    text-align: center;
}



.video-training-tag {
    background-color: var(--video-training-tag-bg);
    color: var(--video-training-tag-color);
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 2rem;
    border: 1px solid var(--video-training-tag-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.video-training-tag-icon {
    font-size: 1rem;
    line-height: 1;
}

.video-training h2 {
    color: var(--primary-dark);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.video-training h2 .highlight-training-purple-teal {
    background: linear-gradient(90deg, var(--video-training-headline-purple), var(--video-training-headline-teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback */
}

.video-training .sub-heading {
    font-size: 1.05rem;
    color: var(--text-color-dark);
    max-width: 700px;
    margin: 0 auto 3rem auto; /* Space before training grid */
    line-height: 1.5;
}

.training-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 4 columns on desktop */
    gap: 25px;
    
    margin: 0 auto;
}

.training-card {
    background-color: var(--training-card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--training-card-shadow);
    border: 1px solid var(--training-card-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.3s ease;
}
.training-card:hover {
    transform: translateY(-5px);
}

.training-card-header {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: linear-gradient(90deg, var(--training-card-header-gradient-start), var(--training-card-header-gradient-end));
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-icon {
	position: absolute;
	top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
	
	
    border-radius: 50%;
    background-color: var(--play-icon-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--play-icon-color);
    font-size: 2rem; /* Emoji size */
    line-height: 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.play-icon svg {
    color: var(--play-icon-color);
    width: 18px;
    height: 18px;
}

.course-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--course-badge-bg);
    color: var(--course-badge-color);
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}
.course-badge .material-symbols-outlined { /* If using Material Icons for sparkle */
    font-size: 0.9em;
}


.training-content {
    padding: 20px 20px 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.training-content h3 {
    font-size: 1rem; /* Adjusted title size */
    font-weight: 600;
    color: var(--training-title-color);
    margin-bottom: 0.75rem;
}
.training-content p {
    font-size: 0.9rem; /* Adjusted description size */
    color: var(--training-description-color);
    line-height: 1.5;
    flex-grow: 1; /* Pushes price to bottom */
}

.training-price-bottom {
    font-size: 1.1rem; /* Adjusted price size */
    font-weight: 700;
    color: var(--training-price-color);
    padding: 0 20px 20px;
    text-align: right;
    margin-top: auto;
}

/* Resell Message Box */
.resell-message-box {
    background-color: var(--resell-message-bg);
    border: 1px solid var(--resell-message-border);
    border-radius: 50px;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 500;
    color: #000; /*var(--resell-message-color);*/
    max-width: 550px; /* Constrain width */
    margin: 4rem auto 3rem auto; /* Vertical spacing */
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* Button below resell message */
.btn-get-all-bonuses {
    background: linear-gradient(90deg, var(--btn-all-bonuses-start) 0%, var(--btn-all-bonuses-end) 100%);
    color: var(--btn-all-bonuses-text);
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.btn-get-all-bonuses:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}
.btn-get-all-bonuses .arrow-right {
    font-size: 1.8rem;
}

.bonus-guarantee-text {
    font-size: 0.95rem;
    color: var(--bonus-guarantee-text-color);
    margin-top: 15px; /* Space below button */
    font-weight: 500;
	color:#000;
}


/* Responsive Design */
@media (max-width: 992px) {
    .video-training h2 { font-size: 2.5rem; }
    .video-training .sub-heading { font-size: 1rem; }
    .training-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* 3 columns on larger tablets */
        gap: 20px; }
    .training-content h3 { font-size: 1.1rem; }
    .training-content p { font-size: 0.85rem; }
    .training-price-bottom { font-size: 1rem; }
    .resell-message-box { font-size: 1rem; padding: 12px 25px; max-width: 450px; margin: 3rem auto 2.5rem auto; }
    .btn-get-all-bonuses { padding: 15px 30px; font-size: 1rem; }
}

@media (max-width: 768px) {
    .video-training { padding: 80px 0; }
    .video-training-tag { margin-bottom: 1.5rem; font-size: 0.8rem; padding: 5px 12px; }
    .video-training h2 { font-size: 2.2rem; margin-bottom: 1.5rem; }
    .video-training .sub-heading { font-size: 0.95rem; margin-bottom: 2rem; }
    .training-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 2 columns on tablets */
        gap: 20px; }
    .training-card-header { padding-bottom: 65%; } /* Adjust aspect ratio if needed for 2 columns */
    .play-icon { width: 50px; height: 50px; font-size: 1.8rem; }
    .play-icon svg { width: 24px; height: 24px; }
    .course-badge { top: 10px; right: 10px; font-size: 0.75rem; padding: 4px 8px; }
    .training-content h3 { font-size: 1rem; margin-bottom: 0.5rem; }
    .training-content p { font-size: 0.8rem; line-height: 1.4; }
    .training-price-bottom { font-size: 0.9rem; padding: 0 20px 15px; }
    .resell-message-box { font-size: 0.9rem; padding: 10px 20px; max-width: 400px; margin: 2.5rem auto 2rem auto; }
    .btn-get-all-bonuses { padding: 12px 25px; font-size: 0.95rem; }
    .bonus-guarantee-text { font-size: 0.9rem; }
}

@media (max-width: 480px) {
    .video-training h2 { font-size: 1.8rem; margin-bottom: 1.5rem; }
    .video-training .sub-heading { font-size: 0.85rem; margin-bottom: 1.5rem; }
    .training-grid { grid-template-columns: 1fr; /* Stack cards on mobile */
        gap: 15px; }
    .training-card-header { padding-bottom: 56.25%; } /* Back to 16:9 on single column */
    .play-icon { width: 45px; height: 45px; font-size: 1.5rem; }
    .play-icon svg { width: 20px; height: 20px; }
    .course-badge { font-size: 0.7rem; padding: 3px 6px; top: 8px; right: 8px; }
    .training-content h3 { font-size: 1rem; }
    .training-content p { font-size: 0.8rem; }
    .resell-message-box { font-size: 0.85rem; padding: 8px 15px; margin: 2rem auto 1.5rem auto; }
    .btn-get-all-bonuses { flex-direction: column; gap: 8px; padding: 12px 24px; font-size: 0.9rem; }
    .bonus-guarantee-text { font-size: 0.8rem; }
}

/* Pricing Section */
.pricing {
    position: relative;
    background-color: var(--pricing-bg);
    background-image: url('images/s1bg.jpg'); /* Assuming grid pattern */
    
    background-repeat: repeat;
    padding: 100px 0;
    color: var(--text-color-dark);
    text-align: center;
    z-index: 1;
}

.pricing::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        rgba(66, 165, 178, 0.08), /* base #42A5B2 with low opacity */
        rgba(200, 235, 240, 0.1)  /* lightest version for soft fade */
    );
    z-index: 0;
}

.pricing > * {
    position: relative;
    z-index: 1; /* keep text above overlay */
}


.pricing-tag-main {
    background-color: var(--pricing-tag-bg);
    color: var(--pricing-tag-color);
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 2rem;
    border: 1px solid var(--pricing-tag-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pricing-tag-icon {
    font-size: 1rem;
    line-height: 1;
}

.pricing h2 {
    color: var(--primary-dark);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.pricing h2 .highlight-gradient-pricing {
    background: linear-gradient(90deg, var(--pricing-headline-gradient-start), var(--pricing-headline-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback */
}

.pricing .sub-heading {
    font-size: 1.05rem;
    color: var(--text-color-dark);
    max-width: 700px;
    margin: 0 auto 4rem auto;
    line-height: 1.5;
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 30px;
    
    margin: 0 auto;
    /* REMOVED: align-items: flex-start; */ /* This was causing unequal heights */
    /* By default, grid items will stretch to fill the height of the tallest item */
}

.pricing-card {
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--yearly-card-shadow); /* Default to yearly shadow, lifetime overrides */
    position: relative; /* For badges/ribbons */
    overflow: hidden; /* For rounded corners of badge */
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.3s ease;
}
.pricing-card:hover {
    transform: translateY(-5px);
}

.pricing-card .card-content {
    flex-grow: 1; /* Allows content to push button to bottom */
    display: flex;
    flex-direction: column;
}

.pricing-card h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}
.pricing-card .plan-slogan {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.pricing-card .plan-price {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    margin-bottom: 0.5rem;
}
.pricing-card .price-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}
.pricing-card .price-period {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
}

.pricing-card .annual-bill {
    font-size: 0.9rem;
    color: var(--yearly-annual-bill-color);
    margin-bottom: 1rem; /* Space below annual bill text */
}

.pricing-card .plan-features {
    list-style: none;
    padding: 0;
    margin-top: 1.5rem; /* Space above features list */
    margin-bottom: 2rem; /* Space below features list */
    flex-grow: 1; /* Pushes button to bottom */
}
.pricing-card .plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 12px;
}
.pricing-card .plan-features li::before {
    content: '✔'; /* Unicode checkmark */
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px; /* Adjust for vertical alignment */
}
/* Feature icon colors are defined per plan below */


/* Lifetime Plan Specific Styles */
.pricing-card.lifetime-plan {
    background-color: var(--lifetime-card-bg);
    border: 1px solid var(--lifetime-card-border);
    box-shadow: var(--lifetime-card-shadow);
    color: var(--lifetime-text-color);
}
.lifetime-plan h3, .lifetime-plan .plan-slogan {
    color: var(--lifetime-text-color);
}
.lifetime-plan .price-value {
    color: var(--lifetime-price-color);
}
.lifetime-plan .price-period {
    color: var(--lifetime-text-color);
}
.lifetime-plan .plan-features li {
    color: var(--lifetime-text-color);
}
.lifetime-plan .plan-features li::before {
    color: var(--lifetime-feature-icon-color); /* Grey checkmark */
}

.lifetime-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(90deg, var(--lifetime-badge-bg-start) 0%, var(--lifetime-badge-bg-end) 100%);
    color: var(--lifetime-badge-color);
    padding: 8px 15px;
    border-bottom-left-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1;
}
.countdown-timer-badge {
    display: flex;
    align-items: center;
    gap: 4px;
}
.countdown-timer-badge span {
    font-weight: 700;
}


/* Yearly Plan Specific Styles */
.pricing-card.yearly-plan {
    background-color: var(--yearly-card-bg);
    border: 1px solid var(--yearly-card-border);
    box-shadow: var(--yearly-card-shadow);
    color: var(--yearly-text-color);
}
.yearly-plan h3, .yearly-plan .plan-slogan {
    color: var(--yearly-text-color);
}
.yearly-plan .price-value {
    color: var(--yearly-price-color);
}
.yearly-plan .price-period {
    color: var(--yearly-text-color);
}
.yearly-plan .plan-features li {
    color: var(--yearly-text-color);
}
.yearly-plan .plan-features li::before {
    color: var(--yearly-feature-icon-color); /* Green checkmark */
}

/* Toggle Switch */
.billing-toggle-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 2rem; /* Space below toggle */
}
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px; /* Slightly taller for visual */
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--toggle-slider-bg-off);
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px; /* Slightly smaller circle */
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: var(--toggle-circle-color);
    transition: .4s;
}
input:checked + .slider {
    background-color: var(--toggle-slider-bg-on);
}
input:checked + .slider:before {
    transform: translateX(22px); /* Moves the circle when checked */
}
.slider.round {
    border-radius: 28px; /* Same as height to make it rounded */
}
.slider.round:before {
    border-radius: 50%;
}
.billed-yearly-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--yearly-text-color);
}
.save-badge {
    background-color: var(--save-badge-bg);
    color: var(--save-badge-color);
    padding: 4px 8px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}


/* Buttons for Pricing Cards */
.btn-lifetime-access, .btn-yearly-access {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Center content in button */
    gap: 10px;
    padding: 18px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%; /* Full width button */
    margin-top: auto; /* Push button to bottom of card */
}
.btn-lifetime-access {
    background: linear-gradient(90deg, var(--btn-lifetime-access-start) 0%, var(--btn-lifetime-access-end) 100%);
    color: var(--btn-lifetime-access-text);
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.btn-lifetime-access:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    opacity: 0.9;
}

.btn-yearly-access {
    background-color: var(--btn-yearly-access-bg);
    color: var(--btn-yearly-access-color);
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.btn-yearly-access:hover {
    background-color: var(--btn-yearly-access-hover-bg);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}


/* Responsive Design */
@media (max-width: 992px) {
    .pricing h2 { font-size: 2.5rem; }
    .pricing .sub-heading { font-size: 1rem; }
    .pricing-grid { gap: 20px; }
    .pricing-card { padding: 25px; }
    .pricing-card h3 { font-size: 1.6rem; }
    .pricing-card .price-value { font-size: 2.5rem; }
    .pricing-card .price-period { font-size: 1rem; }
    .pricing-card .plan-features li { font-size: 0.95rem; margin-bottom: 10px; }
    .lifetime-badge { font-size: 0.8rem; padding: 6px 12px; }
    .btn-lifetime-access, .btn-yearly-access { padding: 15px 25px; font-size: 1rem; }
}

@media (max-width: 768px) {
    .pricing { padding: 80px 0; }
    .pricing-tag-main { margin-bottom: 1.5rem; font-size: 0.8rem; padding: 5px 12px; }
    .pricing h2 { font-size: 2.2rem; margin-bottom: 1.5rem; }
    .pricing .sub-heading { font-size: 0.95rem; margin-bottom: 2rem; }
    .pricing-grid { grid-template-columns: 1fr; gap: 30px; } /* Stack cards on mobile */
    .pricing-card { padding: 30px; text-align: left; } /* Keep text aligned left for better stacked readability */
    .pricing-card h3, .pricing-card .plan-slogan, .pricing-card .plan-price,
    .yearly-plan .annual-bill, .yearly-plan .billing-toggle-container {
        text-align: left; /* Ensure these are also left-aligned when stacked */
        margin-left: 0;
        margin-right: 0;
    }
    .pricing-card .plan-features {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        max-width: none; /* Remove max-width if set, allow full width */
    }
    .lifetime-badge { border-bottom-left-radius: 0; border-bottom-right-radius: var(--border-radius); width: 100%; top: 0; left: 0; right: auto; justify-content: center; } /* Stretch badge across top of card */
    .pricing-card.lifetime-plan { padding-top: 60px; } /* Adjust padding for stretched badge */
}

@media (max-width: 480px) {
    .pricing h2 { font-size: 1.8rem; margin-bottom: 1.5rem; }
    .pricing .sub-heading { font-size: 0.85rem; margin-bottom: 1.5rem; }
    .pricing-card { padding: 25px; }
    .pricing-card h3 { font-size: 1.5rem; }
    .pricing-card .price-value { font-size: 2.2rem; }
    .pricing-card .price-period { font-size: 1rem; }
    .pricing-card .plan-features li { font-size: 0.9rem; }
    .btn-lifetime-access, .btn-yearly-access { padding: 12px 24px; font-size: 0.9rem; }
    .switch { width: 45px; height: 25px; }
    .slider:before { height: 18px; width: 18px; left: 3px; bottom: 3px; }
    input:checked + .slider:before { transform: translateX(20px); }
    .billed-yearly-text, .save-badge { font-size: 0.85rem; }
    .lifetime-badge { font-size: 0.75rem; }
}

/* About Us Section */
.about-us {
    background-color: var(--about-us-bg);
    background-image: url('images/s1bg.jpg'); /* Assuming grid pattern */
    
    background-repeat: repeat;
    padding: 100px 0 80px 0; /* Adjust padding for final section */
    color: var(--text-color-dark);
    text-align: center;
}

.about-tag {
    background-color: var(--about-tag-bg);
    color: var(--about-tag-color);
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 2rem;
    border: 1px solid var(--about-tag-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.about-tag-icon {
    font-size: 1rem;
    line-height: 1;
}

.about-us h2 {
    color: var(--primary-dark);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 3.5rem; /* Space before content grid */
    line-height: 1.2;
}
.about-us h2 .highlight-gradient-about {
    background: linear-gradient(90deg, var(--about-headline-gradient-start), var(--about-headline-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback */
}

.about-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 50px; /* Space between columns */
    
    margin: 0 auto;
    align-items: flex-start; /* Align content to the top of columns */
    text-align: left; /* Reset text alignment for column content */
}

/* Left Column (Image & Description) */
.about-left-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.about-image-container {
    position: relative;
    width: 100%;
    /* Aspect ratio approximately 1:1, adjust if your image is different */
    padding-bottom: 100%; /* For square image */
    background-color: #E2E8F0; /* Placeholder background */
    border-radius: var(--border-radius);
    box-shadow: var(--about-main-card-shadow);
    overflow: hidden; /* Ensure image and overlay fit */
    margin-bottom: 2.5rem; /* Space below image */
}
.about-main-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover for the main team image */
    display: block;
}

.about-metrics-overlay {
    position: absolute;
    bottom: 20px; /* Position from bottom */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    display: flex;
    gap: 15px; /* Space between badges */
    z-index: 2; /* Ensure above image */
}
.about-metric-badge {
    background-color: var(--about-metric-badge-bg);
    border: 1px solid var(--about-metric-badge-border);
    border-radius: var(--border-radius);
    padding: 10px 15px;
    text-align: center;
    box-shadow: var(--about-metric-badge-shadow);
    backdrop-filter: blur(5px); /* Glassy effect */
    -webkit-backdrop-filter: blur(5px);
}
.about-metric-badge h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--about-metric-value-color);
    margin-bottom: 0.2rem;
    line-height: 1;
}
.about-metric-badge p {
    font-size: 0.8rem;
    color: var(--about-metric-label-color);
    line-height: 1;
}

.about-description-text {
    font-size: 1.1rem;
    color: var(--about-description-text-color);
    line-height: 1.6;
}

/* Right Column (Team Member Bios) */
.about-right-column {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between member cards */
}
.team-member-card {
    background-color: var(--team-member-card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--team-member-card-shadow);
    border: 1px solid var(--team-member-card-border);
    padding: 25px;
    text-align: left;
    transition: transform 0.3s ease;
}
.team-member-card:hover {
    transform: translateY(-5px);
}
.member-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between name and role tag */
}
.role-tag {
    background-color: #E2E8F0; /* Default if not specifically set */
    color: var(--text-color-dark); /* Default if not specifically set */
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap; /* Prevent tag from wrapping */
}
/* Specific role tag colors */
.role-tag-design {
    background-color: var(--role-tag-design-bg);
    color: var(--role-tag-design-color);
}
.role-tag-marketing {
    background-color: var(--role-tag-marketing-bg);
    color: var(--role-tag-marketing-color);
}
.role-tag-strategy {
    background-color: var(--role-tag-strategy-bg);
    color: var(--role-tag-strategy-color);
}
.member-bio {
    font-size: 0.95rem;
    color: var(--text-color-dark);
    line-height: 1.5;
}

/* Reusing existing .btn-journey and .journey-subtitle styles from other sections */
/* This ensures consistency if those general styles are defined elsewhere */


/* Responsive Design */
@media (max-width: 992px) {
    .about-us h2 { font-size: 2.5rem; margin-bottom: 2.5rem; }
    .about-content-grid { grid-template-columns: 1fr; gap: 40px; } /* Stack columns on tablet */
    .about-left-column, .about-right-column { align-items: center; text-align: center; } /* Center content when stacked */
    .about-image-container { max-width: 450px; margin-left: auto; margin-right: auto; } /* Constrain image width */
    .about-metrics-overlay { gap: 10px; padding: 0 10px; }
    .about-metric-badge { padding: 8px 12px; }
    .about-metric-badge h3 { font-size: 1.3rem; }
    .about-metric-badge p { font-size: 0.7rem; }
    .about-description-text { font-size: 1rem; max-width: 600px; margin: 0 auto 2.5rem auto; }
    .team-member-card { max-width: 450px; margin-left: auto; margin-right: auto; text-align: left; } /* Center team cards but keep their internal text left-aligned */
    .member-name { justify-content: center; } /* Center member name & tag */
}

@media (max-width: 768px) {
    .about-us { padding: 80px 0 60px 0; }
    .about-tag { margin-bottom: 1.5rem; font-size: 0.8rem; padding: 5px 12px; }
    .about-us h2 { font-size: 2.2rem; margin-bottom: 2rem; }
    .about-content-grid { gap: 30px; }
    .about-image-container { padding-bottom: 80%; } /* Adjust aspect ratio for better fit on smaller screens */
    .about-metrics-overlay { bottom: 15px; gap: 8px; }
    .about-metric-badge { padding: 7px 10px; }
    .about-metric-badge h3 { font-size: 1.2rem; }
    .about-metric-badge p { font-size: 0.7rem; }
    .about-description-text { font-size: 0.95rem; margin-bottom: 2rem; }
    .team-member-card { padding: 20px; }
    .member-name { font-size: 1.2rem; gap: 8px; }
    .role-tag { font-size: 0.75rem; padding: 3px 8px; }
    .member-bio { font-size: 0.9rem; }
}

@media (max-width: 480px) {
    .about-us h2 { font-size: 1.8rem; margin-bottom: 1.5rem; }
    .about-image-container { padding-bottom: 70%; } /* Further adjust aspect ratio */
    .about-metrics-overlay { bottom: 10px; flex-wrap: wrap; justify-content: center; gap: 5px; } /* Wrap badges if space is tight */
    .about-metric-badge { padding: 5px 8px; }
    .about-metric-badge h3 { font-size: 1rem; }
    .about-metric-badge p { font-size: 0.6rem; }
    .about-description-text { font-size: 0.85rem; margin-bottom: 1.5rem; }
    .member-name { font-size: 1.1rem; flex-direction: column; gap: 5px; } /* Stack name and role tag */
    .role-tag { font-size: 0.7rem; padding: 2px 6px; }
    .member-bio { font-size: 0.85rem; }
}

/* FAQ Section */
.faq {
    position: relative; /* Needed for overlay */
    background-color: var(--faq-bg);
    background-image: url('images/s1bg.jpg'); /* Grid pattern */
    background-repeat: repeat;
    padding: 100px 0;
    color: var(--text-color-dark);
    text-align: center;
    overflow: hidden; /* Keeps overlay inside */
}




.faq-tag {
    background-color: var(--faq-tag-bg);
    color: var(--faq-tag-color);
    padding: 6px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 2rem;
    border: 1px solid var(--faq-tag-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.faq-tag-icon {
    font-size: 1rem;
    line-height: 1;
}

.faq h2 {
    color: var(--primary-dark); /* "Frequently Asked" part */
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.faq h2 .highlight-gradient-faq {
    background: linear-gradient(90deg, var(--faq-headline-gradient-start), var(--faq-headline-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback */
}

.faq .sub-heading {
    font-size: 1.05rem;
    color: var(--text-color-dark);
    max-width: 700px;
    margin: 0 auto 4rem auto; /* Space before FAQ items */
    line-height: 1.5;
}

.faq-items {
    max-width: 800px; /* Constrain FAQ width */
    margin: 0 auto;
}

.faq-item {
    background-color: var(--faq-card-bg);
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: var(--faq-card-shadow);
    border: 1px solid var(--faq-card-border);
}

.faq-question {
    padding: 20px 25px;
    font-size: 1.15rem; /* Slightly smaller question font */
    font-weight: 600;
    color: var(--faq-question-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid transparent; /* No border initially */
    transition: background-color 0.3s ease, border-bottom 0.3s ease;
}

.faq-item.open .faq-question {
    border-bottom: 1px solid var(--faq-card-border); /* Border when open */
    background-color: #F7FAFC; /* Slight background change when open */
}

.faq-question:hover {
    background-color: #F7FAFC;
}

.faq-bullet {
    display: inline-block;
    width: 8px; /* Size of the bullet */
    height: 8px;
    border-radius: 50%;
    background-color: var(--faq-bullet-color); /* Purple bullet */
    margin-right: 15px; /* Space between bullet and text */
    flex-shrink: 0; /* Prevent shrinking */
}

.faq-toggle {
    font-size: 1.5rem; /* Size of the plus/minus */
    font-weight: 400;
    transition: transform 0.3s ease;
    color: var(--faq-toggle-color); /* Purple toggle icon */
    flex-shrink: 0; /* Prevent shrinking */
    margin-left: 20px; /* Space from question text */
}

.faq-question.active .faq-toggle { /* Triggered by JS when active */
    transform: rotate(45deg); /* Change + to X */
}

.faq-answer {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    color: var(--faq-answer-color); /* Slightly lighter dark gray */
}

.faq-answer p {
    padding-bottom: 20px;
    padding-top: 10px;
    font-size: 0.95rem; /* Answer font size */
    line-height: 1.5;
}

.faq-item.open .faq-answer {
    max-height: 200px; /* Adjust based on content */
    padding-bottom: 20px;
}

/* Button and Guarantee text below FAQ */
.faq .text-center.mt-8 { /* Specificity for this section's button container */
    margin-top: 5rem; /* More space above button */
}
/* Reusing existing .btn-get-started-cta and .cta-guarantee-line styles */
/* Ensure your HTML uses these classes for the button and text here as well */


/* Responsive Design */
@media (max-width: 992px) {
    .faq h2 { font-size: 2.5rem; }
    .faq .sub-heading { font-size: 1rem; }
    .faq-question { padding: 18px 20px; font-size: 1.1rem; }
    .faq-answer { padding: 0 20px; }
    .faq-answer p { font-size: 0.9rem; }
}

@media (max-width: 768px) {
    .faq { padding: 80px 0; }
    .faq-tag { margin-bottom: 1.5rem; font-size: 0.8rem; padding: 5px 12px; }
    .faq h2 { font-size: 2.2rem; margin-bottom: 1.5rem; }
    .faq .sub-heading { font-size: 0.95rem; margin-bottom: 2rem; }
    .faq-question { padding: 15px 18px; font-size: 1rem; }
    .faq-bullet { width: 6px; height: 6px; margin-right: 10px; }
    .faq-toggle { font-size: 1.3rem; margin-left: 15px; }
    .faq-answer { padding: 0 18px; }
    .faq-answer p { font-size: 0.85rem; padding-top: 8px; padding-bottom: 15px; }
}

@media (max-width: 480px) {
    .faq h2 { font-size: 1.8rem; margin-bottom: 1.5rem; }
    .faq .sub-heading { font-size: 0.85rem; margin-bottom: 1.5rem; }
    .faq-question { padding: 12px 15px; font-size: 0.95rem; }
    .faq-bullet { width: 5px; height: 5px; margin-right: 8px; }
    .faq-toggle { font-size: 1.1rem; margin-left: 10px; }
    .faq-answer { padding: 0 15px; }
    .faq-answer p { font-size: 0.8rem; padding-top: 5px; padding-bottom: 12px; }
}

/* Footer */
.footer {
    background-color: var(--footer-bg-dark);
    color: var(--footer-text-subtle); /* Default text color */
    font-size: 0.9rem;
}

.footer-top {
    padding: 60px 0 50px 0; /* Adjust padding for top section */
    border-bottom: var(--disclaimer-border-top); /* Separator from disclaimer */
}

.footer-top .container {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr); /* Brand column wider, 3 link columns */
    gap: 30px;
    align-items: flex-start;
}

.footer-brand {
    text-align: left;
}
.footer-brand .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 2rem; /* Matches header logo size */
    font-weight: 700;
    color: var(--footer-text-light); /* Light text */
    text-decoration: none;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    transition: color 0.3s ease;
}
.footer-brand .logo:hover {
    color: var(--footer-link-hover);
}
.footer-logo-svg svg {
    filter: brightness(1.5); /* Adjust SVG brightness for contrast on dark bg */
    width: 28px; /* Larger icon */
    height: 28px;
}
.footer-brand p {
    color: var(--footer-text-subtle);
    line-height: 1.6;
    max-width: 350px; /* Constrain description width */
}

.footer-links-group {
    text-align: left;
}
.footer-links-group h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--footer-heading-color);
    margin-bottom: 15px;
}
.footer-links-group ul {
    list-style: none;
    padding: 0;
}
.footer-links-group li {
    margin-bottom: 10px;
}
.footer-links-group a {
    color: var(--footer-text-subtle);
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-links-group a:hover {
    color: var(--footer-link-hover);
}


.footer-disclaimer-wrapper {
    background-color: var(--disclaimer-bg); /* Slightly darker bg for disclaimer */
    padding: 50px 0;
    border-top: var(--disclaimer-border-top); /* Redundant if footer-top has it, but good for clarity */
}
.disclaimer-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--disclaimer-title-color);
    margin-bottom: 20px;
    text-align: left; /* Align title left */
}
.disclaimer-text {
    font-size: 0.75rem;
    color: var(--disclaimer-text-color);
    line-height: 1.5;
    margin-bottom: 15px;
    text-align: left; /* Align disclaimer text left */
}
.disclaimer-text:last-of-type {
    margin-bottom: 0;
}


.footer-bottom {
    padding: 30px 0;
    border-top: var(--footer-bottom-border-top); /* Separator above copyright/social */
}
.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 20px; /* Space between copyright and social */
}
.copyright {
    font-size: 0.85rem;
    color: var(--footer-text-subtle);
    line-height: 1.4;
}
.footer-social-links {
    display: flex;
    gap: 25px; /* Space between social links */
}
.footer-social-links a {
    color: var(--social-link-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}
.footer-social-links a:hover {
    color: var(--social-link-hover);
}


/* Responsive Design */
@media (max-width: 992px) {
    .footer-top .container {
        grid-template-columns: 1fr 1fr; /* Stack into 2 columns on mid-size screens */
    }
    .footer-brand { grid-column: span 2; text-align: center; } /* Span both columns and center */
    .footer-brand .logo { justify-content: center; }
    .footer-brand p { max-width: 80%; margin: 0 auto 20px auto; } /* Center description */
    .footer-links-group { text-align: center; }
    .disclaimer-title, .disclaimer-text { text-align: center; }
}

@media (max-width: 768px) {
    .footer-top { padding: 50px 0 40px 0; }
    .footer-top .container {
        grid-template-columns: 1fr; /* Stack into single column on tablets */
        gap: 40px;
    }
    .footer-brand { grid-column: auto; } /* Reset column span */
    .footer-brand p { max-width: 90%; } /* Adjust width */
    .footer-links-group { text-align: center; } /* Center links */
    .footer-links-group li { display: inline-block; margin: 0 10px 10px 10px; } /* Horizontal links on tablet */
    .footer-links-group ul { display: flex; flex-wrap: wrap; justify-content: center; }

    .footer-disclaimer-wrapper { padding: 40px 0; }
    .disclaimer-title, .disclaimer-text { font-size: 0.7rem; }

    .footer-bottom { padding: 25px 0; }
    .footer-bottom .container { flex-direction: column; text-align: center; } /* Stack copyright/social */
    .copyright { margin-bottom: 15px; }
    .footer-social-links { justify-content: center; }
}

@media (max-width: 480px) {
    .footer-top { padding: 40px 0 30px 0; }
    .footer-brand .logo { font-size: 1.8rem; }
    .footer-brand p { font-size: 0.85rem; }
    .footer-links-group h4 { font-size: 1rem; margin-bottom: 10px; }
    .footer-links-group li { margin: 0 8px 8px 8px; }

    .footer-disclaimer-wrapper { padding: 30px 0; }
    .disclaimer-title { font-size: 1rem; margin-bottom: 15px; }
    .disclaimer-text { font-size: 0.65rem; }

    .footer-bottom { padding: 20px 0; }
    .copyright { font-size: 0.8rem; }
    .footer-social-links { gap: 15px; }
    .footer-social-links a { font-size: 0.85rem; }
}

/* Back to Top Button */
.back-to-top-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: var(--back-to-top-bg);
    color: var(--back-to-top-color);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
    line-height: 1; /* Adjust for perfect vertical centering of arrow */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed-medium) var(--transition-easing),
                visibility var(--transition-speed-medium) var(--transition-easing),
                background-color var(--transition-speed-medium) var(--transition-easing);
    z-index: 999; /* Below header, above most content */
    box-shadow: var(--box-shadow-medium);
}
.back-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}
.back-to-top-btn:hover {
    background-color: var(--back-to-top-hover-bg);
    transform: translateY(-2px); /* Subtle lift on hover */
    box-shadow: var(--box-shadow-large);
}

/* Fancy Scrollbar (Webkit browsers only) */
::-webkit-scrollbar {
    width: 10px; /* Width of the vertical scrollbar */
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg); /* Color of the scrollbar track */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg); /* Color of the scrollbar thumb */
    border-radius: 10px;
    transition: background var(--transition-speed-medium) var(--transition-easing);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-bg); /* Color on hover */
}


/* ... rest of your style.css content follows ... */

/* Add these to your existing responsive section for smaller screens */
@media (max-width: 768px) {
    .back-to-top-btn {
        width: 45px;
        height: 45px;
        font-size: 1.5rem;
        bottom: 20px;
        right: 20px;
    }
}
@media (max-width: 480px) {
    .back-to-top-btn {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
        bottom: 15px;
        right: 15px;
    }
    ::-webkit-scrollbar {
        width: 8px; /* Slightly thinner scrollbar on mobile */
    }
}