/* CSS Custom Properties */
:root {
    /* ===== COLOR SYSTEM ===== */
    
    /* Primary Colors */
    --color-primary: #FF6B35;
    --color-primary-hover: #E85A2B;
    --color-primary-dark: #D45528;
    
    /* Secondary Colors */
    --color-secondary: #750071;
    --color-secondary-hover: #5A0056;
    --color-secondary-light: #9B2097;
    
    /* Success Colors */
    --color-success: #31b261;
    --color-success-light: #3ad775;
    --color-success-dark: #0d7e00;
    --color-success-lighter: #54944f;
    
    /* Error/Danger Colors */
    --color-error: #dc3545;
    --color-error-hover: #c82333;
    
    /* Info/Blue Colors */
    --color-info: #397bff;
    --color-info-hover: #2c66d9;
    --color-info-dark: #1f4e99;
    
    /* Announcement/Green Colors */
    --color-announcement: #167B3C;
    --color-announcement-border: #2C9C56;
    --color-announcement-accent: #41B56C;
    --color-announcement-light: #629D5E;
    
    /* Text Colors */
    --color-text: #333;
    --color-text-secondary: #212121;
    --color-text-light: #666;
    --color-text-lightest: #999;
    --color-text-muted: #7A7062;
    --color-text-gray: #757575;
    --color-text-dark-gray: #495057;
    --color-text-light-gray: #adb5bd;
    
    /* Background Colors */
    --color-white: #fff;
    --color-background: #f8f9fa;
    --color-background-light: #FBF9F5;
    --color-background-accent: #F9F1EB;
    --color-background-gray-light: #F5F5F5;
    --color-background-gray: #E8E8E8;
    --color-background-gray-medium: #E0E0E0;
    --color-background-gray-dark: #BDBDBD;
    --color-background-neutral: #ddd;
    --color-background-border: #e9ecef;
    
    /* Special Colors */
    --color-whatsapp: #25D366;
    --color-whatsapp-dark: #128C7E;
    --color-whatsapp-darker: #0D6B5C;
    
    /* ===== TYPOGRAPHY SYSTEM ===== */
    
    /* Font Families */
    --font-primary: 'Nunito', 'Varela Round', 'Inter', sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    --fa-regular: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
    --fa-solid: "Font Awesome 6 Pro Solid", "Font Awesome 6 Pro", "FontAwesome";
    
    /* Font Sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */
    --text-6xl: 3.5rem;     /* 56px */
    --text-7xl: 4rem;       /* 64px */
    
    /* Specific Font Sizes */
    --text-nav: 0.95rem;
    --text-nav-icon: 0.8rem;
    --text-hero-title: 3.5rem;
    --text-hero-subtitle: 1.2rem;
    --text-section-title: 2.5rem;
    --text-button-large: 2.25rem;
    --text-icon-small: 0.9rem;
    --text-icon-base: 1rem;
    --text-icon-large: 1.8rem;
    --text-icon-xl: 2rem;
    --text-challenge: 1.5rem;
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* Line Heights */
    --line-height-tight: 1.0;
    --line-height-snug: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;
    
    /* ===== SPACING SYSTEM ===== */
    
    /* Base Spacing Scale */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-2xl: 4rem;     /* 64px */
    
    /* Specific Spacing */
    --spacing-0: 0;
    --spacing-1: 0.25rem;    /* 4px */
    --spacing-2: 0.5rem;     /* 8px */
    --spacing-3: 0.75rem;    /* 12px */
    --spacing-4: 1rem;       /* 16px */
    --spacing-5: 1.25rem;    /* 20px */
    --spacing-6: 1.5rem;     /* 24px */
    --spacing-8: 2rem;       /* 32px */
    --spacing-10: 2.5rem;    /* 40px */
    --spacing-12: 3rem;      /* 48px */
    --spacing-16: 4rem;      /* 64px */
    
    /* Component Specific Spacing */
    --spacing-section: 3rem;
    --spacing-card: 1.5rem;
    --spacing-button-x: 3rem;
    --spacing-button-y: 1rem;
    --spacing-nav-gap: 2rem;
    --spacing-nav-icon: 0.4rem;
    --spacing-huge: 50px;
    --spacing-base: 3px;
    
    /* ===== BORDER RADIUS SYSTEM ===== */
    
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-base: 3px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-xl: 15px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 22px;
    --radius-5xl: 25px;
    --radius-6xl: 26px;
    --radius-full: 50%;
    --radius-huge: 50px;
    --radius-massive: 60px;
    
    /* Legacy Support */
    --border-radius-sm: var(--radius-md);
    --border-radius: var(--radius-lg);
    --border-radius-md: var(--radius-lg);
    --border-radius-lg: var(--radius-xl);
    --border-radius-xl: var(--radius-3xl);
    
    /* ===== TRANSITIONS & ANIMATIONS ===== */
    
    /* Transition Durations */
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 600ms;
    --duration-slowest: 1000ms;
    
    /* Transition Timings */
    --ease-linear: linear;
    --ease-in: ease-in;
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;
    --ease-default: ease;
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce: cubic-bezier(0.4, 0.0, 0.2, 1);
    
    /* Predefined Transitions */
    --transition-fast: 0.3s ease;
    --transition-default: all 0.3s ease;
    --transition-hover: all 0.3s ease;
    --transition-opacity: opacity 0.3s ease;
    --transition-color: color 0.3s ease;
    --transition-transform: transform 0.3s ease;
    --transition-background: background 0.3s ease;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    
    /* Animation Durations */
    --animation-pulse: 2s;
    --animation-spin: 3s;
    --animation-bounce: 0.5s;
    --animation-fade: 0.6s;
    
    /* ===== SHADOWS ===== */
    
    /* Base Shadows */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.2);
    
    /* Component Shadows */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-navbar: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-navbar-sticky: 0 2px 20px rgba(0, 0, 0, 0.15);
    --shadow-button: 0 4px 15px rgba(0, 0, 0, 0.2);
    --shadow-button-hover: 0 6px 20px rgba(0, 0, 0, 0.15);
    
    /* Colored Shadows */
    --shadow-primary: 0 4px 15px rgba(255, 107, 53, 0.3);
    --shadow-primary-hover: 0 8px 25px rgba(255, 107, 53, 0.4);
    --shadow-info: 0 4px 15px rgba(57, 123, 255, 0.3);
    --shadow-info-hover: 0 0 18px 6px rgba(57, 123, 255, 0.6);
    --shadow-success: 0 4px 15px rgba(61, 215, 117, 0.3);
    
    /* Special Shadows */
    --shadow-button-blue: 0 2px 0 #1f4e99;
    --shadow-button-success: 0 2px 0 #0d7e00;
    --shadow-text: 0 2px 4px rgba(31, 78, 153, 0.8);
    --shadow-text-light: 0 3px 3px rgba(255, 255, 255, 0.8);
    
    /* ===== GRADIENTS ===== */
    
    --gradient-whatsapp: linear-gradient(135deg, #25D366 0%, #128C7E 50%, #0D6B5C 100%);
    --gradient-gray-light: linear-gradient(135deg, #F5F5F5, #E8E8E8);
    --gradient-gray-dark: linear-gradient(135deg, #E0E0E0, #BDBDBD);
    --gradient-white-transparent: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    --gradient-conic-white: conic-gradient(from 0deg, transparent 0 340deg, #FFFFFF 1turn);
    
    /* ===== Z-INDEX SCALE ===== */
    
    --z-negative: -1;
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-sticky: 99;
    --z-fixed: 100;
    --z-overlay: 101;
    --z-modal: 200;
    --z-popover: 300;
    --z-tooltip: 400;
    --z-max: 9999;
    
    /* ===== BREAKPOINTS ===== */
    
    --breakpoint-xs: 320px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;
    
    /* ===== LAYOUT ===== */
    
    --container-max-width: 1200px;
    --container-padding: 20px;
    
    /* ===== COMPONENT SPECIFIC ===== */
    
    /* Navbar */
    --navbar-height: 80px;
    --navbar-sticky-height: 50px;
    --navbar-sticky-top: 37px;
    --navbar-logo-height: 80px;
    --navbar-logo-sticky-height: 40px;
    
    /* Announcement Bar */
    --announcement-height: 37px;
    --announcement-border-width: 3px;
    
    /* Hero */
    --hero-slider-height: 600px;
    --hero-button-height: 80px;
    
    /* Buttons */
    --button-border-radius: 20px;
    --button-slider-size: 50px;
    
    /* Cards */
    --card-border-radius: var(--radius-lg);
    
    /* Opacity Values */
    --opacity-hover: 0.8;
    --opacity-disabled: 0.5;
    --opacity-backdrop: 0.85;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* scroll-behavior: smooth; - Disabled to prevent conflicts with custom JS scroll */
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    background-color: var(--color-white);
    overflow-x: hidden;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Header Styles */
.announcement-bar {
    background: var(--color-announcement);
    color: var(--color-white);
    padding: var(--spacing-2) 0;
    font-size: var(--text-xs);
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: var(--z-overlay);
    border-bottom: var(--announcement-border-width) solid var(--color-announcement-border);
}

.announcement-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-huge);
    white-space: nowrap;
    padding-top: var(--spacing-base);
}

.announcement-content:hover {
    animation-play-state: paused;
}

.announcement-bullet {
    color: var(--color-announcement-accent);
}

.announcement-link {
    color: var(--color-white);
    text-decoration: none;
    transition: var(--transition-opacity);
}

.announcement-link.underlined {
    text-decoration: underline;
}

.announcement-link:hover {
    opacity: var(--opacity-hover);
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.navbar {
    background: var(--color-white);
    box-shadow: var(--shadow-navbar);
    position: relative;
    z-index: var(--z-fixed);
    transition: var(--transition-default);
}

.navbar.sticky {
    position: fixed;
    top: var(--navbar-sticky-top); /* Exact height to eliminate gap */
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, var(--opacity-backdrop));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: var(--shadow-navbar-sticky);
    z-index: var(--z-sticky);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    max-width: var(--container-max-width);
    margin: 0 auto;
    transition: var(--transition-default);
}

.navbar.sticky .nav-container {
    padding: var(--spacing-sm) var(--spacing-lg);
    height: var(--navbar-sticky-height);
}

.logo img,
.logo-svg {
    height: var(--navbar-logo-height);
    width: auto;
    transition: var(--transition-default);
    filter: brightness(0) saturate(100%) invert(47%) sepia(99%) saturate(2537%) hue-rotate(350deg) brightness(101%) contrast(99%);
}

.navbar.sticky .logo img,
.navbar.sticky .logo-svg {
    height: var(--navbar-logo-sticky-height);
    margin-top: 6px !important;
    filter: brightness(0) saturate(100%) invert(47%) sepia(99%) saturate(2537%) hue-rotate(350deg) brightness(101%) contrast(99%);
}

.navbar.sticky .logo a:hover img,
.navbar.sticky .logo a:hover .logo-svg {
    /* No filter effects - using SVG hover instead */
}

.navbar.sticky .logo a .logo-hover {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--navbar-logo-sticky-height);
    width: auto;
    background-image: url('../images/logo-hover.svg');
    background-size: auto var(--navbar-logo-sticky-height);
    background-repeat: no-repeat;
    background-position: left center;
    opacity: 0;
    margin-top: 6px !important;
    transition: var(--transition-opacity);
    min-width: 160px;
}

.navbar.sticky .logo a:hover .logo-svg {
    opacity: 0 !important;
    transition: var(--transition-opacity);
}

.navbar.sticky .logo a:hover .logo-hover {
    opacity: 1 !important;
    transition: var(--transition-opacity);
}

/* Add padding to body when sticky header is active */
body.sticky-header-active {
    padding-top: calc(var(--announcement-height) + var(--navbar-sticky-height) + 6px); /* Height of announcement bar + sticky header */
}

.logo {
    width: 160px; /* Fixed width to prevent navigation shift */
    display: flex;
    align-items: center;
}

.logo a {
    display: block;
    text-decoration: none;
    position: relative;
    transition: var(--transition-default);
}

.logo a:hover img,
.logo a:hover .logo-svg {
    /* No filter effects - using SVG hover instead */
}

.logo a .logo-hover {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--navbar-logo-height);
    width: auto;
    background-image: url('../images/logo-hover.svg');
    background-size: auto var(--navbar-logo-height);
    background-repeat: no-repeat;
    background-position: left center;
    opacity: 0;
    transition: var(--transition-opacity);
    z-index: var(--z-10);
    min-width: 160px;
}

.logo a:hover .logo-svg {
    opacity: 0 !important;
    transition: var(--transition-opacity);
}

.logo a:hover .logo-hover {
    opacity: 1 !important;
    transition: var(--transition-opacity);
}

/* Text-based logo styling */
.logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    transition: var(--transition-default);
}

.logo-main {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: var(--font-bold);
    color: var(--color-primary);
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.logo-tagline {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    margin-top: -2px;
    letter-spacing: 0.5px;
}

.logo-text:hover .logo-main {
    color: var(--color-primary-hover);
    transform: translateY(-1px);
}

.logo-text:hover .logo-tagline {
    color: var(--color-primary);
}

/* Sticky navbar text logo adjustments */
.navbar.sticky .logo-text .logo-main {
    font-size: 1.3rem;
}

.navbar.sticky .logo-text .logo-tagline {
    font-size: 0.7rem;
}

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

.nav-links a {
    text-decoration: none;
    color: var(--color-secondary);
    font-weight: var(--font-normal);
    transition: var(--transition-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-nav-icon);
    font-size: var(--text-nav);
}

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

.nav-links a:hover .nav-icon {
    color: var(--color-primary) !important;
    transition: var(--transition-color);
    font-family: var(--fa-solid) !important;
    font-weight: var(--font-black) !important;
}

/* Navigation icons with unicode characters from FontAwesome 6 Pro Regular */
.nav-icon {
    font-size: var(--text-icon-base) !important;
    flex-shrink: 0;
    font-family: var(--fa-regular) !important;
    font-weight: var(--font-normal) !important;
    font-style: normal !important;
}

.challenges-icon {
    color: var(--color-secondary) !important; /* Purple - e196 */
}

.fa-lightbulb {
    font-family: var(--fa-regular) !important;
    color: var(--color-secondary) !important; /* Purple lightbulb */
}

/* Header hover effect for fa-lightbulb */
.nav-links a:hover .fa-lightbulb {
    font-family: var(--fa-solid) !important;
    font-weight: var(--font-black) !important;
    color: var(--color-primary) !important;
}

/* Mobile menu hover effect for fa-lightbulb */
.nav-item:hover .fa-lightbulb {
    font-family: var(--fa-solid) !important;
    font-weight: var(--font-black) !important;
    color: var(--color-primary) !important;
}

.recent-winners-icon {
    color: var(--color-secondary) !important; /* Purple - f091 */
}

/* Header hover effect for award icon (Brand new winners) */
.nav-links a:hover .fa-award {
    font-family: var(--fa-solid) !important;
    font-weight: var(--font-black) !important;
    color: var(--color-primary) !important;
}

/* Mobile menu hover effect for award icon */
.nav-item:hover .fa-award {
    font-family: var(--fa-solid) !important;
    font-weight: var(--font-black) !important;
    color: var(--color-primary) !important;
}

.account-icon {
    color: var(--color-secondary) !important;
    font-size: var(--text-nav-icon) !important;
    flex-shrink: 0;
    font-family: var(--fa-regular) !important;
    font-weight: var(--font-normal) !important;
    font-style: normal !important;
}

.cart-icon {
    color: var(--color-white) !important; /* White cart icon on orange background */
    font-size: var(--text-icon-base) !important;
}

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

.account-link {
    text-decoration: none;
    color: var(--color-secondary);
    font-weight: var(--font-normal);
    display: flex;
    align-items: center;
    gap: var(--spacing-nav-icon);
    font-size: var(--text-nav);
    transition: var(--transition-color);
}

.account-link:hover {
    color: var(--color-primary);
}

.account-link:hover .account-icon {
    font-family: var(--fa-solid) !important;
    font-weight: var(--font-black) !important;
}

.account-link.active .account-icon {
    font-family: var(--fa-solid) !important;
    font-weight: var(--font-black) !important;
}

.account-link:hover .account-icon {
    color: var(--color-primary) !important;
    transition: var(--transition-color);
}

/* Cart/Coins icon hover and active states */
.cart:hover .cart-icon {
    font-family: var(--fa-solid) !important;
    font-weight: var(--font-black) !important;
}

.cart.active .cart-icon {
    font-family: var(--fa-solid) !important;
    font-weight: var(--font-black) !important;
}

.account-link i {
    font-size: 1.1rem;
    color: inherit;
}

.cart {
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--button-border-radius);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    transition: var(--transition-background);
}

.cart:hover {
    background: var(--color-primary-hover);
    text-decoration: none;
    color: var(--color-white);
}

.cart i {
    font-size: var(--text-icon-base);
    color: inherit;
}

/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    background: var(--color-background-light);
    overflow: visible;
}

/* Hero Slider - Desktop First Implementation */
.hero-slider-container {
    position: relative;
    height: 560px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
        "content image";
    grid-template-rows: 1fr;
    gap: 4rem 4rem;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
    box-sizing: border-box;
}

.hero-slide.active {
    opacity: 1;
    z-index: var(--z-20);
}

.hero-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    gap: 1.5rem;
    padding-left: 1rem;
    text-align: left;
}

/* Desktop styling for new structure */
.hero-title-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hero-cta-section {
    display: flex;
    flex-direction: column;
}

/* Desktop: Override mobile grid with flexbox container */
@media (min-width: 1025px) {
    .hero-slide {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4rem !important;
    }
    
    .hero-left-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .hero-image {
        flex: 1;
        height: 520px !important;
    }
    
    .hero-title-section {
        gap: 0.5rem;
        text-align: left;
    }
    
    .hero-cta-section {
        gap: 1.5rem;
        text-align: left;
        align-items: flex-start;
    }
    
    .hero-cta-section .hero-cta-challenge {
        font-size: 1rem;
        font-weight: 700;
        color: var(--color-text-muted);
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    .hero-cta-section .hero-cta-button {
        align-self: flex-start;
        width: auto;
        max-width: 300px;
    }
    
    .hero-cta-section .hero-cta-disclaimer {
        text-align: left;
        margin: 0;
        font-size: 0.9rem;
        color: var(--color-text-secondary);
        line-height: 1.3;
        max-width: 400px;
    }
    
    .hero-image {
        flex: 1;
        height: 520px !important;
    }
}

.hero-content .hero-cta-challenge {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Base styling for all Play buttons */
.hero-content .hero-cta-button,
.hero-cta-section .hero-cta-button {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    border-radius: var(--border-radius);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: var(--transition-default);
    box-shadow: 0 2px 0 #1e40af, 0 4px 15px rgba(59, 130, 246, 0.3);
    white-space: nowrap;
    font-family: 'Nunito', sans-serif;
    text-shadow: 0 2px 4px rgba(30, 64, 175, 0.8);
    max-width: 300px;
}

/* Desktop: same dimensions as WhatsApp button */
@media (min-width: 1025px) {
    .hero-content .hero-cta-button,
    .hero-cta-section .hero-cta-button {
        padding: 1rem 2.5rem;
        font-size: 1.5rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 1rem;
        justify-content: center;
        font-family: 'Nunito', sans-serif;
        position: relative;
        box-shadow: 0 2px 0 #1e40af, 0 4px 15px rgba(59, 130, 246, 0.3);
        text-shadow: 0 2px 4px rgba(30, 64, 175, 0.8);
    }
}

.hero-content .hero-cta-button:hover,
.hero-cta-section .hero-cta-button:hover {
    background: #2563eb;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 3px 0 #1e40af, 0 0 18px 6px rgba(59, 130, 246, 0.6), 0 8px 25px rgba(59, 130, 246, 0.4);
}

.hero-content .hero-cta-button:active,
.hero-cta-section .hero-cta-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #1e40af, 0 2px 8px rgba(59, 130, 246, 0.3);
}

.hero-content .hero-cta-button i,
.hero-cta-section .hero-cta-button i {
    font-size: 1.25rem;
    text-shadow: 0 3px 6px rgba(30, 64, 175, 0.8);
}

.hero-content .hero-cta-disclaimer {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.3;
    margin-top: 0.5rem;
    max-width: 400px;
}

.hero-image {
    grid-area: image;
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: flex-end;
    position: relative;
    height: 520px;
    padding-right: 1rem;
}

.hero-product-image {
    max-width: 100%;
    max-height: 500px;
    height: auto;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 40px rgba(0,0,0,0.15));
    transition: transform 0.3s ease;
}

.hero-product-image:hover {
    transform: scale(1.01);
}

.hero-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: var(--radius-full);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: var(--color-primary);
    z-index: var(--z-30);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
}

.hero-slider-btn:hover {
    background: var(--color-white);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.hero-prev-btn {
    left: 2rem;
}

.hero-next-btn {
    right: 2rem;
}

/* Links styling */

.challenge-details-link {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.challenge-details-link:hover {
    color: var(--color-primary-hover);
}

/* Extra Wide Screens */
@media (min-width: 1200px) {
    .hero-slide {
        max-width: 1600px;
        gap: 4rem 3.5rem;
        padding: 0 4rem;
    }
    
    .hero-content {
        padding-left: 3rem;
    }
    
    .hero-image {
        padding-right: 2rem;
    }
    
    .hero-product-image {
        max-height: 480px;
    }
}

@media (min-width: 1400px) {
    .hero-slide {
        max-width: 1580px;
        gap: 4rem 5rem;
        padding: 0 5rem;
    }
    
    .hero-content {
        padding-left: 4rem;
    }
    
    .hero-product-image {
        max-height: 520px;
    }
}

/* Tablet Layout (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .hero-slider-container {
        position: relative;
        height: 450px;
        overflow: visible;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-slide {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 2rem !important;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 2rem;
        box-sizing: border-box;
    }
    
    .hero-slide.active {
        opacity: 1;
        z-index: var(--z-20);
    }
    
    .hero-left-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        text-align: left;
    }
    
    .hero-title-section {
        gap: 0.4rem;
        text-align: left;
    }
    
    .hero-cta-section {
        gap: 1.2rem;
        text-align: left;
        align-items: flex-start;
    }
    
    .hero-image {
        flex: 1;
        height: 400px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hero-product-image {
        max-height: 350px;
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }
    
    
    .hero-subtitle {
        font-size: 1rem;
        padding-bottom: 1rem;
    }
    
    .hero-cta-section .hero-cta-challenge {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--color-text-muted);
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    .hero-cta-section .hero-cta-button {
        background: #3b82f6;
        color: white;
        border: none;
        padding: 0.875rem 2rem;
        border-radius: var(--border-radius);
        font-size: 1.1rem;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        transition: var(--transition-default);
        box-shadow: 0 2px 0 #1e40af, 0 4px 15px rgba(59, 130, 246, 0.3);
        white-space: nowrap;
        font-family: 'Nunito', sans-serif;
        text-shadow: 0 2px 4px rgba(30, 64, 175, 0.8);
        max-width: 280px;
    }
    
    .hero-cta-section .hero-cta-disclaimer {
        font-size: 0.8rem;
        color: var(--color-text-secondary);
        line-height: 1.3;
        text-align: left;
        max-width: 350px;
    }
    
    .hero-slider-btn {
        display: none;
    }
}

/* Mobile Layout */
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.8rem;
        margin-bottom: 0rem;
        min-height: calc(1.8rem * 1.1 * 3);
        line-height: 1.1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .hero-slider-container {
        height: auto;
        min-height: unset;
        display: block;
        position: relative;
        overflow: visible;
        padding: 1rem 0 1rem 0;
    }
    
    .hero-slide {
        position: static;
        display: none;
        width: 100%;
        height: auto;
        transform: none;
        opacity: 1;
        flex-direction: column;
        gap: 0;
        text-align: center;
        padding: 0 1.5rem;
        align-items: center;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
    
    .hero-slide.active {
        display: flex;
    }
    
    .hero-left-content {
        display: contents;
    }
    
    .hero-title-section {
        order: 1;
        display: flex;
        flex-direction: column;
        gap: 0;
        text-align: center;
        width: 100%;
    }
    
    .hero-image {
        order: 2;
        height: 280px;
        margin: -1rem 0 -1rem 0 !important;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        padding: 0;
        overflow: visible;
    }
    
    .hero-cta-section {
        order: 3;
        display: flex;
        flex-direction: column;
        gap: 0;
        text-align: center;
        align-items: center;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        padding: 0 1rem;
        box-sizing: border-box;
    }
    
    .hero-cta-section .hero-cta-challenge {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--color-text-muted);
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    .hero-cta-section .hero-cta-button {
        background: #3b82f6;
        color: white;
        border: none;
        padding: 0.875rem 2rem;
        border-radius: var(--border-radius);
        font-size: 1.25rem;
        font-weight: 700;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        transition: var(--transition-default);
        box-shadow: 0 2px 0 #1e40af, 0 4px 15px rgba(59, 130, 246, 0.3);
        white-space: nowrap;
        font-family: 'Nunito', sans-serif;
        text-shadow: 0 2px 4px rgba(30, 64, 175, 0.8);
        width: calc(100vw - 4rem);
        max-width: calc(100% - 2rem);
        margin-bottom: 1.5rem;
    }
    
    .hero-cta-section .hero-cta-button:hover {
        background: #2563eb;
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 3px 0 #1e40af, 0 0 18px 6px rgba(59, 130, 246, 0.6), 0 8px 25px rgba(59, 130, 246, 0.4);
    }
    
    .hero-cta-section .hero-cta-button:active {
        transform: translateY(1px);
        box-shadow: 0 1px 0 #1e40af, 0 2px 8px rgba(59, 130, 246, 0.3);
    }
    
    .hero-cta-section .hero-cta-button i {
        font-size: 1.25rem;
        text-shadow: 0 3px 6px rgba(30, 64, 175, 0.8);
    }
    
    .hero-cta-section .hero-cta-disclaimer {
        font-size: 0.8rem;
        color: var(--color-text-secondary);
        line-height: 1.3;
        text-align: center;
        max-width: 280px;
        width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
        box-sizing: border-box;
        word-wrap: break-word;
    }
    
    
    .hero-product-image {
        max-height: 260px;
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transform: scale(0.85);
    }
    
    .hero-product-image:hover {
        transform: scale(0.85);
    }
    
    .hero-slider-btn {
        display: none;
    }
    
    .hero-cta-bottom {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 2rem;
        padding: 1.25rem 1.5rem;
    }
    
    .hero-cta-challenge {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
    }
    
    .hero-cta-button {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
    
    
    .hero-subtitle {
        font-size: 1rem;
        padding-bottom: 1rem;
    }
}

/* Small Mobile Optimization */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
        margin-bottom: 0rem;
        min-height: calc(1.8rem * 1.1 * 3);
        line-height: 1.1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .hero-slider-container {
        height: auto;
        overflow: visible;
        padding: 0;
    }
    
    
    .hero-slide {
        padding: 4.5rem 0rem 1.5rem;
        gap: 0;
        grid-template-areas: 
            "left-content"
            "image"
            "mobile-cta";
        grid-template-rows: auto auto auto;
    }
    
    .hero-title-section {
        gap: 0;
        order: 1;
    }
    
    .hero-cta-section {
        gap: 0;
        order: 3;
    }
    
    .hero-image {
        margin: -1rem 0 -1rem 0 !important;
    }
    
    
    .hero-cta-section .hero-cta-challenge {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--color-text-muted);
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    .hero-cta-section .hero-cta-button {
        padding: 0.875rem 2rem;
        font-size: 1.25rem;
        width: calc(100vw - 4rem);
        max-width: calc(100% - 2rem);
        margin-bottom: 1.5rem;
    }
    
    .hero-cta-section .hero-cta-disclaimer {
        font-size: 0.75rem;
        max-width: 280px;
    }
    
    .hero-image {
        grid-area: image;
        height: 320px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 0;
        overflow: visible;
        margin-top: 0;
        margin-bottom: 1.5rem;
        order: 2;
    }
    
    .hero-product-image {
        max-height: 300px;
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transform: scale(0.9);
    }
    
    
    .hero-cta-bottom {
        padding: 1rem 1.25rem;
        margin-top: 1.5rem;
    }
    
    .hero-cta-challenge {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    .hero-cta-button {
        padding: 0.5rem 1.25rem;
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }
    
    
    .hero-subtitle {
        font-size: 1rem;
        padding-bottom: 1rem;
    }
}

@media (min-width: 1025px) {
    .hero-title {
        font-size: var(--text-hero-title);
        font-weight: var(--font-bold);
        line-height: var(--line-height-tight);
        margin-bottom: var(--spacing-0);
        color: var(--color-primary);
    }
}

.hero-title {
    font-weight: var(--font-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary);
}

.hero-title .highlight {
    color: var(--color-primary);
}

.hero-subtitle {
    font-size: var(--text-hero-subtitle);
    color: var(--color-text-secondary);
    font-weight: var(--font-bold);
}

.small-text {
    font-size: inherit;
    color: var(--color-announcement-light);
}

.small-text span.emoji,
.small-text .emoji {
    font-size: 1.4rem;
}


.challenge-line {
    display: block;
    padding: var(--spacing-1) 0;
    margin: var(--spacing-xs) 0;
    line-height: var(--line-height-snug);
}

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

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-title {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--animation-fade) ease-out;
}

.fade-in-title.animate {
    opacity: 1;
    transform: translateY(0);
}

.challenge-info .challenge-label br + * {
    font-weight: 700;
}

/* Desktop uses normal HTML structure (3 divs) */


.play-btn {
    background: var(--color-info);
    color: var(--color-white);
    border: none;
    height: var(--hero-button-height);
    padding: 0 var(--spacing-button-x);
    border-radius: var(--border-radius);
    font-size: var(--text-button-large);
    font-weight: var(--font-bold);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    transition: var(--transition-default);
    box-shadow: var(--shadow-button-blue), var(--shadow-info);
    position: relative;
    text-shadow: var(--shadow-text);
    font-family: var(--font-primary);
    white-space: nowrap;
}

.play-btn:hover {
    background: var(--color-info-hover);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 3px 0 var(--color-info-dark), var(--shadow-info-hover), var(--shadow-primary-hover);
}

.play-btn i {
    font-size: var(--text-icon-large);
}

.credit-text {
    font-size: var(--text-icon-small);
    color: var(--color-text-secondary);
    margin: 0;
    font-family: var(--font-primary);
    text-align: right;
}

.credit-text strong {
    font-weight: var(--font-bold);
}

.hero-disclaimer {
    font-size: var(--text-icon-small);
    color: var(--color-text-light);
    line-height: var(--line-height-normal);
}


/* Old hero-features styles removed - now using promise-section */

/* Promise Section */
.promise-section {
    background: var(--color-white);
    position: relative;
    overflow: hidden;
}

.promise-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-md); /* Reduced padding to minimize whitespace */
    background: var(--color-white);
    border-radius: var(--radius-massive);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 120px;
}

.promise-content-centered {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-card);
    position: relative;
    text-align: center;
}

.promise-icon-wrapper {
    position: relative;
}

.promise-brain-icon {
    font-size: 32px;
    color: var(--color-secondary);
    position: relative;
    transform: scale(1);
    opacity: 1;
    transition: all var(--duration-base) var(--ease-smooth);
    margin: 0 var(--spacing-sm);
}

.promise-brain-icon.fade-out {
    opacity: 0;
    transform: scale(0.6);
}

@keyframes pulse-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.promise-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    position: relative;
    min-height: 60px;
    justify-content: center;
}

.promise-main-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    opacity: 1;
    transform: scale(1);
    transition: all var(--duration-base) var(--ease-smooth);
    height: 26px;
    align-items: center;
}

.promise-sub-content {
    opacity: 1;
    transform: scale(1);
    transition: all var(--duration-base) var(--ease-smooth);
    height: 26px;
    display: flex;
    align-items: center;
}

.promise-main-content.fade-out,
.promise-sub-content.fade-out {
    opacity: 0;
    transform: scale(0.8);
}

.promise-check-icon {
    font-size: var(--text-2xl);
    color: var(--color-success);
}

.promise-main-text {
    font-size: 22px;
    font-weight: var(--font-bold);
    color: var(--color-text-secondary);
    font-family: var(--font-primary);
    line-height: var(--line-height-snug);
}

.promise-sub-text {
    font-size: 22px;
    font-weight: var(--font-bold);
    color: var(--color-success-lighter);
    font-family: var(--font-primary);
    text-shadow: var(--shadow-text-light);
    line-height: var(--line-height-snug);
}

/* Responsive Promise Section */

/* Rewards Section */
.rewards {
    background: var(--color-white);
}

.section-title {
    text-align: center;
    font-size: var(--text-section-title);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-sm);
    color: var(--color-primary);
}

.section-subtitle {
    text-align: center;
    font-size: var(--text-hero-subtitle);
    color: var(--color-text-secondary);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-card); /* Reduced margin for consistency */
}

/* Slider Container */
.rewards-slider-container {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-section) var(--spacing-2xl);
    background-color: var(--color-background-accent);
    border-radius: var(--radius-massive);
}

.rewards-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 2rem;
    padding: 0 3rem;
}

.rewards-slider .reward-card {
    flex: 0 0 calc(33.333% - 1.33rem);
    min-width: 0;
}

/* Rewards Slider Controls */
.rewards-slider-container .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 107, 53, 0.9);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: var(--transition-default);
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.rewards-slider-container .slider-btn:hover {
    background: rgba(255, 107, 53, 1);
    transform: translateY(-50%) scale(1.1);
}

.rewards-slider-container .prev-btn {
    left: 1rem;
}

.rewards-slider-container .next-btn {
    right: 1rem;
}

.rewards-slider-container .slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 2rem;
}

.rewards-slider-container .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: var(--transition-default);
}

.rewards-slider-container .dot.active,
.rewards-slider-container .dot:hover {
    background: #FF6B35;
    transform: scale(1.2);
}


.reward-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    display: block;
}

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

.reward-card img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.product-placeholder {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, #F5F5F5, #E8E8E8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin-bottom: 1rem;
    transition: var(--transition-default);
}

.product-placeholder:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.product-image {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, #F5F5F5, #E8E8E8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: var(--transition-default);
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
}

.product-image:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Product placeholders are now defined with enhanced styling below */

.reward-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

/* Testimonials Section */
.testimonials {
    background: white;
}

.testimonials-container {
    position: relative;
    overflow: hidden;
    padding: 3rem 4rem;
    background-color: #f8f9fa;
    border-radius: 60px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.testimonial-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: flex;
    gap: 1rem;
}

.testimonial-avatar {
    flex-shrink: 0;
}

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

.avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #757575;
}

.testimonial-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-content p {
    margin-bottom: 1rem;
    font-style: italic;
    color: #333;
}

.testimonial-content cite {
    font-size: 0.9rem;
    color: #666;
    font-style: normal;
}

.cta-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
    gap: 1.5rem;
}

.circle-cta {
    background: #FF6B35;
    color: white;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    animation: pulse-rotate 4s infinite;
}

@keyframes pulse-rotate {
    0%, 50% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50%, 100% {
        transform: scale(1) rotate(360deg);
    }
}

.cta-content {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
}

.cta-text {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 0.9;
}

.cta-subtext {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* WhatsApp Section */
.whatsapp-section {
    background: var(--gradient-whatsapp);
    color: white;
    text-align: center;
    border-radius: 60px;
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
}

.whatsapp-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
    background-size: 50px 50px;
    opacity: 0.3;
}

.whatsapp-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.whatsapp-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: pulse-scale 2s infinite;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.whatsapp-section .section-title {
    color: white;
    margin-bottom: 0.5rem;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 700px;
    margin: 2rem auto;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255,255,255,0.15);
    padding: 1rem 1.25rem;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    transition: var(--transition-default);
}

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

.benefit-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.whatsapp-description {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.95;
}

.whatsapp-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 400px;
    margin: 0 auto 2rem;
}

.input-group {
    display: flex;
    width: 100%;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.country-code {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
    color: #495057;
    font-weight: 600;
}

.flag {
    width: 20px;
    height: auto;
    border-radius: 2px;
}

.phone-input {
    flex: 1;
    padding: 1rem;
    border: none;
    font-size: 1rem;
    outline: none;
    color: #495057;
}

.phone-input::placeholder {
    color: #adb5bd;
}

.input-helper-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.15rem 0 0 0;
    text-align: center;
    white-space: nowrap;
}

#phone-error-tooltip {
    background: #dc3545;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
    margin-top: -10px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    position: relative;
    animation: shake 0.5s ease-in-out;
}

#phone-error-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #dc3545;
}

.join-btn {
    background: #3ad775;
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: var(--border-radius);
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition-default);
    box-shadow: 0 2px 0 #0d7e00, 0 4px 15px rgba(61, 215, 117, 0.3);
    width: 100%;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    position: relative;
    text-shadow: 0 2px 4px rgba(13, 126, 0, 0.8);
}

.join-btn:hover {
    background: #31b261;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 3px 0 #0d7e00, 0 0 18px 6px rgba(58, 215, 117, 0.6), 0 8px 25px rgba(61, 215, 117, 0.4);
}

.join-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #0d7e00, 0 2px 8px rgba(61, 215, 117, 0.3);
}

.join-btn i {
    font-size: 1.25rem;
    text-shadow: 0 3px 6px rgba(13, 126, 0, 0.8);
}

.privacy-note {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0 auto;
    text-align: center;
    display: block;
    width: 100%;
    white-space: nowrap;
}

/* Info Sections Wrapper */
.info-sections-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    /* padding removed - parent section handles vertical spacing */
}

/* Skill Competition Section */
.skill-competition-section {
    background: #f8f9fa;
    border-radius: 60px;
    height: 100%;
}

.skill-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0rem 3rem 0rem 3rem;
}

.skill-text h2 {
    font-size: 2rem;
    color: #212121;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.skill-text p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.6;
}
.skill-subtitle {
    text-align: left;
    font-size: var(--text-hero-subtitle);
    color: var(--color-text-secondary);
    font-weight: var(--font-bold);
    margin-bottom: var(--spacing-card);
}
.skill-cta-btn {
    background: #3ad775;
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: var(--border-radius);
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--transition-default);
    box-shadow: 0 2px 0 #0d7e00, 0 4px 15px rgba(61, 215, 117, 0.3);
    width: auto;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    position: relative;
    text-shadow: 0 2px 4px rgba(13, 126, 0, 0.8);
    margin-top: 1.5rem;
}
.skill-cta-btn:hover {
    background: #31b261;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 3px 0 #0d7e00, 0 0 18px 6px rgba(58, 215, 117, 0.6), 0 8px 25px rgba(61, 215, 117, 0.4);
}
.skill-cta-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 #0d7e00, 0 2px 8px rgba(61, 215, 117, 0.3);
}
.skill-cta-btn i {
    font-size: 1.25rem;
    text-shadow: 0 3px 6px rgba(13, 126, 0, 0.8);
}

.skill-trophy {
    display: none;
}

/* Steps Section */
.steps-section {
    background: #f0f7ff;
    border-radius: 60px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 3rem;
}

.steps-section h2 {
    font-size: 2rem;
    color: #212121;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.steps-container {
    position: relative;
    height: 300px;
    margin: 2rem auto;
    max-width: 600px;
}

.step-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.step-card.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.step-number {
    background: #397bff;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.step-card h3 {
    font-size: 1.5rem;
    color: #212121;
    margin-bottom: 1rem;
}

.step-card p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.5;
}

.steps-navigation {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.step-nav-btn {
    width: 35px;
    height: 35px;
    border: none;
    background: white;
    color: #397bff;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition-default);
}

.step-nav-btn.active,
.step-nav-btn:hover {
    background: #397bff;
    color: white;
}

/* Info Section */
.info-section {
    padding: 4rem 0;
    background: transparent;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.info-card {
    background: #FF6B35;
    color: white;
    padding: 2rem;
    border-radius: 12px;
}

.info-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.info-card p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.step {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.step-icon {
    text-align: center;
    margin-bottom: 0.75rem;
    transition: var(--transition-default);
}

.step-emoji {
    font-size: 3rem;
    display: inline-block;
    transition: var(--transition-default);
}

.step-card.active .step-icon {
    transform: scale(1.1);
}

.step-card.active .step-emoji {
    /* No shadow for clean look */
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-link {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: white;
    color: var(--color-primary);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s;
}

.social-link:hover {
    transform: scale(1.1);
}

/* Footer */
.footer {
    background: var(--color-secondary);
    color: white;
    /* uses universal section spacing with special bottom padding */
    padding-bottom: 1rem;
    padding-top: 2rem; /* Much smaller padding-top */
    margin-top: 4rem; /* Same as universal section spacing */
}

.footer-top {
    text-align: center;
    margin-bottom: 3rem;
    /* margin-top removed - footer itself has padding-top */
}

.footer-logo {
    margin-bottom: 1.5rem;
}

.footer-logo-img {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1); /* Makes the logo white */
}

.footer-top h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    /* margin-top removed - footer itself has padding-top */
}

.footer-tagline {
    font-size: inherit;
    color: var(--color-primary);
    font-weight: inherit;
}

.typewriter-title {
    overflow: hidden;
    white-space: nowrap;
}

.typewriter-title .mobile-text {
    display: none;
}

.typewriter-title .desktop-text {
    display: block;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    margin: 3rem auto;
    padding: 0 2rem;
    width: 100%;
    box-sizing: border-box;
}

/* Extra small screens for social icons */

.footer-column h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.footer-main-link {
    color: #D5ACD4; /* Light purple for inactive links */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: var(--transition-default);
    white-space: nowrap;
}

.footer-main-link i {
    font-size: 1.125rem;
    width: 1.125rem;
    text-align: center;
    display: inline-block;
}

.footer-main-link.active {
    color: white;
}

.footer-main-link.active .fa-home {
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
}

.footer-main-link:hover {
    color: white;
}

/* Hover effects for footer icons - switch to solid versions */
.footer-main-link:hover .fa-trophy:before {
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
}

.footer-main-link:hover .fa-award:before {
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
}

.footer-main-link:hover .fa-user:before {
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
}

.footer-main-link:hover .fa-info-circle:before {
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
}

/* Lightbulb icon - footer */
.footer-main-link .fa-lightbulb {
    font-family: "Font Awesome 6 Pro Regular", "Font Awesome 6 Pro", "FontAwesome" !important;
    color: #D5ACD4 !important;
    font-size: 1.125rem !important;
}

.footer-main-link:hover .fa-lightbulb {
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
    color: white !important;
}

/* Home icon hover effect */
.footer-main-link:hover .fa-home:before {
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
}

.footer-column h4.home-link {
    color: #ff9a1f;
}

.footer-column h4.home-link .highlight {
    color: #ff9a1f;
}

.footer-column ul {
    list-style: none;
    padding-left: 1.625rem; /* Align with icon + gap (1.125rem + 0.5rem) */
}

.footer-column li {
    margin-bottom: 0.5rem;
}

.footer-column a {
    color: #D5ACD4;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column a:hover {
    color: white;
}

.footer-social {
    text-align: center;
    margin: 3rem 0 2rem;
    padding: 0 2rem;
    width: 100%;
    box-sizing: border-box;
}

.footer-social h3 {
    color: white;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.footer .social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.footer .social-link i {
    font-size: 1.5rem;
    color: white;
    z-index: 1;
}

.footer .social-link:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.footer .social-link.facebook {
    background: #1877f2;
}

.footer .social-link.instagram {
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}

.footer .social-link.tiktok {
    background: #000000;
}

.footer .social-link.youtube {
    background: #ff0000;
}

.footer .social-link.snapchat {
    background: #F4C842;
}

.footer .social-link.twitter {
    background: #000000;
}

.footer .social-link.twitter svg {
    fill: white;
}

.footer .social-link.twitter path {
    fill: white;
}

.footer .social-link.active {
    transform: scale(1.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1.2); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1.2); }
}

.footer-made-with {
    text-align: center;
    padding: 2rem 0;
    font-size: 0.875rem;
    color: white;
}

.footer-made-with .fa-heart {
    color: #ff0066;
    animation: pulse-scale 1.5s infinite;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding: 2rem 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: #d5acd4;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 0.875rem;
}

.footer-links a:hover {
    color: white;
}

.footer-legal {
    text-align: right;
}

.footer-legal p {
    margin-bottom: 0.5rem;
    color: #d5acd4;
    font-size: 0.875rem;
}

.footer-legal .fa-heart {
    color: #e95700;
    margin: 0 0.25rem;
}

/* Challenges Page Styles */
.challenges-hero {
    background: linear-gradient(135deg, #FFF8E1, #FFE0B2);
    padding: 3rem 0;
    text-align: center;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
}

.filters-section {
    background: white;
    padding: 2rem 0;
    border-bottom: 1px solid #E0E0E0;
}

.filters-container {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #666;
}

.filter-select {
    padding: 0.75rem 1rem;
    border: 1px solid #DDD;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    min-width: 150px;
}

.search-group {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.search-input {
    padding: 0.75rem 1rem;
    border: 1px solid #DDD;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    width: 200px;
}

.search-btn {
    padding: 0.75rem 1rem;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1rem;
}

.challenges-grid-section {
    padding: 3rem 0;
    background: #f8f9fa;
}

.challenges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.challenge-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.challenge-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.challenge-card.featured {
    border: 2px solid #FF6B35;
}

.challenge-card.premium {
    border: 2px solid #9C27B0;
}

.challenge-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #FF6B35;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 10;
}

.challenge-card.premium .challenge-badge {
    background: #9C27B0;
}

.challenge-image {
    padding: 2rem;
    text-align: center;
}

.challenge-image .product-placeholder {
    height: 120px;
    font-size: 2.5rem;
    margin-bottom: 0;
}

.challenge-info {
    padding: 0 2rem 2rem;
}

.challenge-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.challenge-description {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.challenge-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.challenge-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.challenge-difficulty {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.challenge-difficulty.easy {
    background: #E8F5E8;
    color: #4CAF50;
}

.challenge-difficulty.medium {
    background: #FFF3E0;
    color: #FF9800;
}

.challenge-difficulty.hard {
    background: #FFEBEE;
    color: #F44336;
}

.challenge-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    color: #666;
}

.challenge-btn {
    width: 100%;
    padding: 1rem;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.challenge-btn:hover {
    background: #e55a2b;
}

.cta-section {
    background: linear-gradient(135deg, #6A1B9A, #4A148C);
    color: white;
    padding: 4rem 0;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.cta-content p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.cta-btn.primary {
    background: #FF6B35;
    color: white;
}

.cta-btn.primary:hover {
    background: #e55a2b;
}

.cta-btn.secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.cta-btn.secondary:hover {
    background: white;
    color: #6A1B9A;
}

.nav-links a.active,
.account-link.active {
    color: var(--color-primary);
    font-weight: 600;
}

.nav-links a.active .nav-icon {
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
}

/* Account Page Styles */
.account-section {
    min-height: 80vh;
    padding: 3rem 0;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.account-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    background: white;
    border-radius: 50px;
    padding: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.toggle-btn {
    flex: 1;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: #666;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.toggle-btn.active {
    background: #FF6B35;
    color: white;
}

.account-form-container {
    max-width: 450px;
    margin: 0 auto;
}

.account-form {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    text-align: center;
}

.account-form h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.account-form p {
    color: #666;
    margin-bottom: 2rem;
}

.auth-form {
    text-align: left;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
    flex: 1;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 1rem;
    border: 1px solid #DDD;
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.9rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #DDD;
    border-radius: 3px;
    position: relative;
    background: white;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: #FF6B35;
    border-color: var(--color-primary);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: -3px;
    left: 3px;
    color: white;
    font-size: 12px;
}

.forgot-password {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.forgot-password:hover {
    text-decoration: underline;
}

.auth-btn {
    width: 100%;
    padding: 1rem;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    margin-bottom: 1.5rem;
}

.auth-btn:hover {
    background: #e55a2b;
}

.social-login {
    margin-top: 1.5rem;
}

.divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #DDD;
}

.divider span {
    background: white;
    padding: 0 1rem;
    color: #666;
    font-size: 0.9rem;
}

.social-buttons {
    display: flex;
    gap: 1rem;
}

.social-btn {
    flex: 1;
    padding: 1rem;
    border: 1px solid #DDD;
    border-radius: var(--border-radius);
    background: white;
    color: #666;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.social-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.social-btn.google span {
    background: #4285F4;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.social-btn.facebook span {
    background: #1877F2;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.hidden {
    display: none !important;
}

/* Dashboard Styles */
.dashboard {
    max-width: 1200px;
    margin: 0 auto;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar .avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35, #FF8A65);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.user-details h2 {
    margin: 0;
    color: #333;
}

.user-details p {
    margin: 0;
    color: #666;
}

.logout-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 2px solid #FF6B35;
    color: var(--color-primary);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
}

.logout-btn:hover {
    background: #FF6B35;
    color: white;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    font-size: 2rem;
    background: linear-gradient(135deg, #FF6B35, #FF8A65);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    display: block;
}

.stat-label {
    color: #666;
    font-size: 0.9rem;
}

.dashboard-content {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    overflow: hidden;
}

.dashboard-tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #E0E0E0;
    overflow-x: auto;
}

.tab-btn {
    padding: 1rem 2rem;
    border: none;
    background: transparent;
    color: #666;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: white;
}

.tab-content {
    display: none;
    padding: 2rem;
}

.tab-content.active {
    display: block;
}

.overview-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.overview-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
}

.overview-card h3 {
    margin-bottom: 1rem;
    color: #333;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: white;
    border-radius: 10px;
}

.activity-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-details {
    flex: 1;
}

.activity-title {
    font-weight: 600;
    color: #333;
    display: block;
}

.activity-date {
    color: #666;
    font-size: 0.9rem;
}

.activity-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.activity-status.completed {
    background: #E8F5E8;
    color: #4CAF50;
}

.activity-status.failed {
    background: #FFEBEE;
    color: #F44336;
}

.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.quick-action-btn {
    padding: 1rem;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.quick-action-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.action-icon {
    font-size: 1.5rem;
}

.history-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.history-details h4 {
    margin: 0 0 0.5rem 0;
    color: #333;
}

.history-details p {
    margin: 0 0 0.5rem 0;
    color: #666;
    font-size: 0.9rem;
}

.history-stats {
    color: #666;
    font-size: 0.8rem;
}

.history-result {
    text-align: right;
}

.result-text {
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.result-prize {
    font-size: 0.9rem;
    color: #666;
}

.history-result.won .result-text {
    color: #4CAF50;
}

.history-result.lost .result-text {
    color: #F44336;
}

.prizes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.prize-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
    text-align: center;
    position: relative;
}

.prize-status {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.prize-status.delivered {
    background: #E8F5E8;
    color: #4CAF50;
}

.prize-status.processing {
    background: #FFF3E0;
    color: #FF9800;
}

.prize-status.cash {
    background: #E3F2FD;
    color: #2196F3;
}

.prize-image {
    margin: 1rem 0;
}

.prize-image .product-placeholder {
    height: 80px;
    font-size: 2rem;
    margin-bottom: 0;
}

.prize-card h4 {
    margin: 0.5rem 0;
    color: #333;
}

.prize-card p {
    color: #666;
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.prize-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.credits-overview {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
}

.credits-balance {
    text-align: center;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: var(--border-radius-lg);
}

.balance-amount {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 1rem 0;
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.package-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
    text-align: center;
    position: relative;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.package-card:hover {
    border-color: var(--color-primary);
}

.package-card.popular {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, #FFF8E1, #FFE0B2);
}

.package-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF6B35;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.package-credits {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 1rem 0;
}

.package-price {
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 600;
    margin: 0.5rem 0;
}

.package-savings {
    font-size: 0.9rem;
    color: #4CAF50;
    font-weight: 500;
    margin: 0.5rem 0;
}

.package-btn {
    width: 100%;
    padding: 0.75rem;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 1rem;
}

.package-btn:hover {
    background: #e55a2b;
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.settings-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
}

.settings-card h3 {
    margin-bottom: 1rem;
    color: #333;
}

.settings-form .form-group {
    margin-bottom: 1rem;
}

.settings-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-btn {
    padding: 0.75rem 1.5rem;
    background: #FF6B35;
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.settings-btn:hover {
    background: #e55a2b;
}

/* FontAwesome Pro Icon Styling */
.fas, .fa-solid {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
}

.far, .fa-regular {
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome";
    font-weight: 400;
}

.fal, .fa-light {
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
}

.fat, .fa-thin {
    font-family: "Font Awesome 6 Pro";
    font-weight: 100;
}

.fad, .fa-duotone {
    font-family: "Font Awesome 6 Duotone";
    font-weight: 900;
}

.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

.product-placeholder i {
    font-size: 3rem;
    color: inherit;
}

.feature-icon i {
    font-size: 1.2rem;
    color: inherit;
}

.stat-icon i {
    color: white;
    font-size: 1.5rem;
}

.activity-icon i {
    color: var(--color-primary);
    font-size: 1.5rem;
}

.action-icon i {
    color: var(--color-primary);
    font-size: 1.5rem;
}

.play-btn i {
    margin-right: 0.5rem;
}

.challenge-stats i {
    margin-right: 0.25rem;
    color: var(--color-primary);
}

.search-btn i {
    color: white;
}

.footer .social-link i {
    font-size: 1.5rem;
    color: white;
}

/* Responsive Design */

/* Challenge Details link styling */
.challenge-details-link {
    color: var(--color-secondary) !important;
    text-decoration: none;
}

.challenge-details-link:hover {
    color: var(--color-primary) !important;
}

/* Mobile Sticky Footer Menu */
.mobile-footer-menu {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    height: 70px;
    z-index: 1000;
    border-top: 1px solid #eee;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
}

.footer-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--color-secondary);
    text-decoration: none;
    cursor: pointer;
    padding: 8px 4px;
    position: relative;
    transition: color 0.3s ease;
}

.footer-menu-item i {
    font-size: 18px;
    margin-bottom: 2px;
    transition: color 0.3s ease, transform 0.2s ease;
}

.footer-menu-item:active i {
    transform: scale(0.9);
}

.footer-menu-item span {
    font-size: 12px;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
}

.footer-menu-item:hover {
    color: var(--color-primary);
}

.footer-menu-item:hover i {
    color: var(--color-primary);
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
}

.footer-menu-item.active {
    color: var(--color-primary);
}

.footer-menu-item.active i {
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
    color: var(--color-primary);
}

.credits-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.credits-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #FF6B35;
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Nunito', sans-serif;
}

/* Mobile Full Screen Navigation Menu */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 999;
    overflow-y: auto;
}

.mobile-nav-overlay.active {
    display: block;
}

/* Hide sticky header when mobile menu is open */
body.menu-open .navbar.sticky,
body.menu-open .navbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Also hide when mobile nav overlay is active as backup */
.mobile-nav-overlay.active ~ * .navbar {
    display: none !important;
}

.mobile-nav-content {
    padding: 20px 30px 100px 30px;
    height: 100%;
}

.nav-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 12px 0;
    color: var(--color-secondary);
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    border-bottom: none;
    transition: color 0.3s ease;
}

.nav-item i {
    font-size: 18px;
    width: 18px;
    text-align: left;
    transition: color 0.3s ease;
}

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

.nav-item:hover i {
    color: var(--color-primary);
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
}

.nav-item-active {
    color: var(--color-primary);
}

.nav-item-active i {
    font-family: var(--fa-solid) !important;
    font-weight: 900 !important;
    color: var(--color-primary);
}

.nav-sub-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: 43px;
    margin-bottom: 8px;
}

.nav-sub-item {
    color: var(--color-secondary);
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
    text-decoration: none;
    padding: 8px 0;
    display: block;
}

.nav-sub-item:hover {
    color: var(--color-primary);
}

/* Tablet Footer Menu */
.tablet-footer-menu {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    height: 70px;
    z-index: 1000;
    border-top: 1px solid #eee;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
}

/* Hide tablet footer nav on desktop */

/* Tablet responsive */

/* Extra small screens */
/* Enhanced product placeholders based on design */

/* iPhone 16 Pro - Natural titanium with triple camera system */
.iphone-product {
    background: linear-gradient(135deg, #e8e6e2 0%, #d4d1cc 100%);
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.iphone-product::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 8%;
    width: 84%;
    height: 84%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: var(--border-radius-lg);
    z-index: 1;
}

.iphone-product::after {
    content: '';
    position: absolute;
    top: 12%;
    left: 12%;
    width: 35px;
    height: 35px;
    background: 
        radial-gradient(circle at 30% 30%, #444 20%, transparent 25%),
        radial-gradient(circle at 70% 30%, #444 20%, transparent 25%),
        radial-gradient(circle at 50% 70%, #444 20%, transparent 25%),
        linear-gradient(135deg, #666 0%, #999 100%);
    border-radius: 12px;
    z-index: 2;
}

/* PlayStation 5 - White console with controller */
.ps5-product {
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    position: relative;
    border-radius: 12px;
}

.ps5-product::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 55%;
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    border-radius: 20px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1;
}

.ps5-product::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 20%;
    width: 60%;
    height: 25%;
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
    border-radius: var(--border-radius);
    z-index: 2;
}

/* Apple Watch Ultra 2 - Black titanium with orange sport band */
.watch-product {
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
    position: relative;
    border-radius: var(--border-radius-lg);
}

.watch-product::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 1;
}

.watch-product::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 15%;
    background: linear-gradient(135deg, #ff6b35 0%, #ff4500 100%);
    border-radius: 20px;
    z-index: 2;
}

/* Samsung Galaxy S24+ - Light blue/violet color */
.samsung-product {
    background: linear-gradient(135deg, #e6e6fa 0%, #c8a2c8 100%);
    position: relative;
    border-radius: 18px;
}

.samsung-product::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 8%;
    width: 84%;
    height: 84%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: var(--border-radius-lg);
    z-index: 1;
}

.samsung-product::after {
    content: '';
    position: absolute;
    top: 12%;
    left: 12%;
    width: 30px;
    height: 30px;
    background: 
        radial-gradient(circle at 25% 25%, #444 15%, transparent 20%),
        radial-gradient(circle at 75% 25%, #444 15%, transparent 20%),
        radial-gradient(circle at 50% 75%, #444 15%, transparent 20%),
        linear-gradient(135deg, #666 0%, #999 100%);
    border-radius: 10px;
    z-index: 2;
}

/* DJI Mini 4 Pro Drone - White with black gimbal */
.drone-product {
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    position: relative;
    border-radius: 12px;
}

.drone-product::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1;
}

.drone-product::after {
    content: '';
    position: absolute;
    bottom: 15%;
    left: 35%;
    width: 30%;
    height: 20%;
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
    border-radius: 6px;
    z-index: 2;
}

/* AirPods Max - Over-ear headphones in green/teal */
.airpods-product {
    background: linear-gradient(135deg, #5cb85c 0%, #449d44 100%);
    position: relative;
    border-radius: 12px;
}

.airpods-product::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1;
}

.airpods-product::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 25%;
    width: 50%;
    height: 20%;
    background: linear-gradient(135deg, #5cb85c 0%, #449d44 100%);
    border-radius: var(--border-radius-lg);
    z-index: 2;
}

/* Apple MacBook Pro - Silver laptop design */
.macbook-product {
    background: linear-gradient(135deg, #e8e8e8 0%, #d4d4d4 100%);
    position: relative;
    border-radius: 12px;
}

.macbook-product::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 10%;
    width: 80%;
    height: 60%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1;
}

.macbook-product::after {
    content: '';
    position: absolute;
    bottom: 15%;
    left: 10%;
    width: 80%;
    height: 8%;
    background: linear-gradient(135deg, #d4d4d4 0%, #c0c0c0 100%);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    z-index: 2;
}

/* Samsung Galaxy Tab S9 - Modern tablet design */
.tablet-product {
    background: linear-gradient(135deg, #f8f8f8 0%, #e8e8e8 100%);
    position: relative;
    border-radius: 16px;
}

.tablet-product::before {
    content: '';
    position: absolute;
    top: 8%;
    left: 8%;
    width: 84%;
    height: 84%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    z-index: 1;
}

.tablet-product::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 6px;
    background: linear-gradient(135deg, #444 0%, #666 100%);
    border-radius: 3px;
    z-index: 2;
}

/* Nintendo Switch OLED - Red/blue design */
.switch-product {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
    position: relative;
    border-radius: 12px;
}

.switch-product::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1;
}

.switch-product::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 8%;
    width: 15%;
    height: 50%;
    background: linear-gradient(135deg, #0066CC 0%, #004499 100%);
    border-radius: var(--border-radius);
    z-index: 2;
}

/* Tesla Model 3 - Sleek car design */
.tesla-product {
    background: linear-gradient(135deg, #1A1A1A 0%, #444 100%);
    position: relative;
    border-radius: 12px;
}

.tesla-product::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 10%;
    width: 80%;
    height: 30%;
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 1;
}

.tesla-product::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 20%;
    width: 60%;
    height: 10%;
    background: linear-gradient(135deg, #444 0%, #666 100%);
    border-radius: 2px;
    z-index: 2;
}

/* Cash Prize - Green money design */
.cash-product {
    background: linear-gradient(135deg, #4CAF50 0%, #81C784 100%);
    position: relative;
    border-radius: 12px;
}

.cash-product::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: linear-gradient(135deg, #2E7D32 0%, #388E3C 100%);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1;
}

.cash-product::after {
    content: '£';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    color: #4CAF50;
    z-index: 2;
}

/* Enhanced hover effects */
.product-placeholder:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.product-placeholder:hover::before,
.product-placeholder:hover::after {
    transform: scale(1.05);
}

/* Responsive adjustments */

/* Desktop challenge text spacing */

/* Additional Mobile Fixes */

/* ===== CLEAN SECTION SPACING SYSTEM ===== */

/* Universal section spacing */
section {
    padding: 0;
    margin: 0;
}

/* Desktop: larger spacing */

/* Mobile: smaller spacing */

/* ===== COMPACT CONTAINER SECTIONS ===== */
/* For sections containing colored containers - zero padding, containers handle all spacing */
.compact-section {
    padding: 0 !important;
}

/* Consistent container spacing system */
.container-spacing {
    margin: 1.5rem 2rem !important;
}

/* WhatsApp section gets side margins but follows same vertical spacing */
.whatsapp-section {
    /* margin handled by container-spacing class */
}

/* Skill and Steps sections use universal spacing - internal padding handled by containers */
.skill-competition-section,
.steps-section {
    /* removed individual padding - uses universal section spacing */
}

/* Consistent heading sizes for narrow breakpoints */

/* ===== RESPONSIVE MEDIA QUERIES ===== */
/* Organized in mobile-first approach (smallest to largest breakpoints) */
/* All duplicate media queries have been consolidated for better maintainability */

@media (max-width: 480px) {
    .container-spacing {
            margin: 1rem 1rem !important;
        }
    
    .skill-content {
            padding: 1.5rem 0 !important;
        }
    
    
    .skill-competition-section .container {
            max-width: none;
            padding: 0;
        }
}

@media (max-width: 360px) {
    .hero-title {
        font-size: 1.8rem;
        margin-bottom: 0rem;
        min-height: calc(1.8rem * 1.1 * 3);
        line-height: 1.1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .navbar {
            position: fixed;
            top: 37px;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            z-index: 1000;
        }

        .navbar .nav-container {
            justify-content: center;
            padding: 0.5rem 1rem;
            height: 50px;
        }

        .navbar .nav-links {
            display: none;
        }

        .navbar .logo {
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }

        .navbar .logo img,
        .navbar .logo-svg {
            height: 40px;
            margin-top: 6px !important;
        }

        .navbar .nav-actions {
            display: none;
        }

        .hero {
            /* uses universal section spacing */
        }



        /* Challenge text perfectly centered on very small screens */
        .challenge-label {
            font-size: 1.3rem;
            margin-bottom: 0.8rem;
            margin-top: 0.4rem;
            display: flex !important;
            flex-direction: column !important;
            text-align: center !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            gap: 0.2rem;
            padding: 0.2rem 0;
        }


        .challenge-line {
            display: block;
            padding: 0;
            margin: 0;
            line-height: 1.2;
        }

        /* Ensure perfect centering on very small screens */
        .hero-cta {
            align-items: center !important;
            text-align: center !important;
            justify-content: center !important;
            margin-top: 0.2rem;
            padding: 1rem;
            min-height: auto;
            margin-left: -0.5rem;
            margin-right: -0.5rem;
        }

        .challenge-info {
            text-align: center !important;
            width: 100% !important;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .play-section {
            align-items: center !important;
            text-align: center !important;
            margin-left: 0 !important;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .play-btn {
            margin: 0 auto 0.5rem auto !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            height: 70px;
            padding: 0 2.5rem;
        }

        .credit-text {
            text-align: center !important;
            width: 100%;
            font-size: 0.85rem;
        }

        .footer .social-icons {
            gap: 0.5rem;
        }

        .footer .social-link {
            width: 35px !important;
            height: 35px !important;
            min-width: 35px !important;
            max-width: 35px !important;
            flex: 0 0 35px !important;
        }

        .footer .social-link i {
            font-size: 0.9rem;
            line-height: 35px;
        }


        .info-sections-wrapper {
            margin: 0 1rem;
        }

    .section-title {
            font-size: 1.8rem !important;
            line-height: 1.2 !important;
        }

        .section-subtitle {
            font-size: 0.95rem !important;
            line-height: 1.4 !important;
        }

        .typewriter-title {
            font-size: 1.8rem !important;
            line-height: 1.2 !important;
        }

        .whatsapp-section .section-title {
            font-size: 1.8rem !important;
            line-height: 1.2 !important;
        }

        .skill-text h2 {
            font-size: 1.8rem !important;
            line-height: 1.2 !important;
        }

        .steps-section h2 {
            font-size: 1.8rem !important;
            line-height: 1.2 !important;
        }

        .footer-top h2 {
            font-size: 1.8rem !important;
            line-height: 1.2 !important;
        }

        /* Fixed hero positioning for consistent layout on smallest screens */


        .hero-image {
            height: 250px !important;
            display: flex !important;
            align-items: flex-start !important;
            justify-content: center !important;
            margin: -1rem 0 0.5rem 0 !important;
            padding-top: 0 !important;
        }

        .hero-product-image {
            max-width: 250px !important;
            max-height: 250px !important;
            height: 250px !important;
            object-fit: contain !important;
        }


        .challenge-arrow {
            display: none !important;
        }

        .hero-cta {
            padding: 0.5rem 2rem !important;
            gap: 0 !important;
        }

        .play-section {
            margin-top: 0.2rem !important;
        }

        .credit-text {
            margin-top: 0.05rem !important;
            margin-bottom: 0.3rem !important;
        }

        .info-sections-wrapper {
            margin: 0 1rem;
        }

        .skill-competition-section,
        .steps-section {
            /* margin handled by parent container-spacing */
        }

        .skill-content {
            padding: 1.5rem 0 !important;
            text-align: left !important;
        }
        
        .skill-competition-section .container {
            max-width: none;
            padding: 0;
        }
        
        .skill-trophy {
            display: none !important;
        }

        .skill-text {
            max-width: none !important;
            width: 100% !important;
            padding: 0;
        }

        .skill-text h2 {
            text-align: center !important;
        }

        .skill-text p {
            text-align: left !important;
            font-size: 1rem !important;
        }
}

@media (max-width: 480px) {
    .footer-content {
            grid-template-columns: 1fr;
            gap: 2rem;
            text-align: left;
            padding: 0 1rem;
        }
    
    .footer-social {
            padding: 0 1rem;
        }

        .footer-column ul {
            text-align: left;
        }

        .footer-column li {
            text-align: left;
        }

        .footer-bottom {
            flex-direction: column;
            text-align: center;
            padding: 2rem 1rem 0;
        }

        .footer .social-icons {
            gap: 0.75rem;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 100%;
        }

        .footer .social-link {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px !important;
            max-width: 40px !important;
            flex: 0 0 40px !important;
            aspect-ratio: 1 / 1 !important;
        }

        .footer .social-link i {
            font-size: 1rem;
            line-height: 40px;
        }

        .footer-links {
            order: 1;
            width: 100%;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }

        .footer-links a {
            font-size: 0.875rem;
            text-align: center;
            display: block;
            padding: 0.25rem 0;
        }

        .footer-legal {
            order: 2;
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .footer-legal p {
            font-size: 0.75rem;
            line-height: 1.4;
            text-align: center;
            margin: 0 auto;
        }

    .navbar {
            position: fixed;
            top: 37px;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            z-index: 1000;
        }

        .navbar .nav-container {
            justify-content: center;
            padding: 0.5rem 1rem;
            height: 50px;
        }

        .navbar .nav-links {
            display: none;
        }

        .navbar .logo {
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }

        .navbar .logo img,
        .navbar .logo-svg {
            height: 40px;
            margin-top: 6px !important;
        }

        .navbar .nav-actions {
            display: none;
        }

        .hero {
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
            /* uses universal section spacing */
        }



        /* Challenge text fully centered on smaller screens */
        .challenge-label {
            font-size: 1.4rem;
            margin-bottom: 0.7rem;
            margin-top: 0.3rem;
            display: flex !important;
            flex-direction: column !important;
            text-align: center !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            gap: 0.15rem;
            padding: 0.15rem 0;
        }


        .challenge-line {
            display: block;
            padding: 0;
            margin: 0;
            line-height: 1.2;
        }

        /* Fix play button alignment on small screens */
        .hero-cta {
            align-items: center !important;
            text-align: center !important;
        }

        .challenge-info {
            text-align: center !important;
            width: 100% !important;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .play-section {
            align-items: center !important;
            text-align: center !important;
            margin-left: 0 !important;
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .play-btn {
            margin: 0 auto 0.5rem auto !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .credit-text {
            text-align: center !important;
            width: 100%;
        }

        .rewards-slider-container {
            border-radius: 30px;
            padding: 1.5rem 2rem;
        }

        .rewards-slider .reward-card {
            flex: 0 0 100%;
        }


        .rewards-slider {
            padding: 0;
        }

        .rewards-slider-container .slider-btn {
            width: 35px;
            height: 35px;
            font-size: 0.9rem;
        }

        .rewards-slider-container .prev-btn {
            left: 0.25rem;
        }

        .rewards-slider-container .next-btn {
            right: 0.25rem;
        }

        .hero-cta {
            margin-top: 0.5rem !important;
            padding: 1rem;
            min-height: auto;
            margin-left: -0.5rem;
            margin-right: -0.5rem;
        }

    .section-title {
            font-size: 2rem !important;
            line-height: 1.2 !important;
        }

        .section-subtitle {
            font-size: 1rem !important;
            line-height: 1.4 !important;
        }

        .typewriter-title {
            font-size: 2rem !important;
            line-height: 1.2 !important;
        }

        .whatsapp-section .section-title {
            font-size: 2rem !important;
            line-height: 1.2 !important;
        }

        .skill-text h2 {
            font-size: 2rem !important;
            line-height: 1.2 !important;
        }

        .steps-section h2 {
            font-size: 2rem !important;
            line-height: 1.2 !important;
        }

        .footer-top h2 {
            font-size: 2rem !important;
            line-height: 1.2 !important;
        }

        /* Fixed hero positioning for consistent layout */

        .hero-image {
            height: 300px !important;
            display: flex !important;
            align-items: flex-start !important;
            justify-content: center !important;
            margin: -1rem 0 0.5rem 0 !important;
            padding-top: 0 !important;
        }

        .hero-product-image {
            max-width: 280px !important;
            max-height: 280px !important;
            height: 280px !important;
            object-fit: contain !important;
        }


        .challenge-arrow {
            display: none !important;
        }

        .hero-cta {
            padding: 0.5rem 2rem !important;
            gap: 0 !important;
        }

        .play-section {
            margin-top: -1rem !important;
        }

        .challenge-info {
            margin-bottom: 0 !important;
        }

        .challenge-label {
            margin: 0 !important;
        }

        .challenge-line {
            margin: 0 !important;
            line-height: 1 !important;
        }

        .credit-text {
            margin-top: 0.1rem !important;
            margin-bottom: 0.3rem !important;
        }

        .info-sections-wrapper {
            margin: 0 1rem;
        }

        .skill-competition-section,
        .steps-section {
            /* margin handled by parent container-spacing */
        }

        .skill-content {
            padding: 1.5rem 0 !important;
            text-align: left !important;
        }
        
        .skill-competition-section .container {
            max-width: none;
            padding: 0;
        }
        
        .skill-trophy {
            display: none !important;
        }

        .skill-text {
            max-width: none !important;
            width: 100% !important;
            padding: 0;
        }

        .skill-text p {
            text-align: left !important;
        }
}

@media (max-width: 768px) {
    .promise-container {
            height: auto;
            padding: 0.75rem; /* Reduced padding on mobile */
        }

        .promise-content-centered {
            flex-direction: column;
            text-align: center;
            gap: 0.5rem;
        }

        .promise-brain-icon {
            font-size: 40px;
            margin: 0;
            order: 1;
        }

        .promise-main-content {
            order: 2;
        }

        .promise-sub-content {
            order: 3;
        }

        .promise-main-text,
        .promise-sub-text {
            font-size: 18px;
        }

    .info-sections-wrapper {
            /* padding removed - parent section handles vertical spacing */
        }

    .footer {
            /* uses universal section spacing with special bottom padding */
            padding-bottom: 1rem;
            padding-top: 1.5rem; /* Much smaller padding-top on mobile */
            margin-top: 3rem; /* Same as universal mobile section spacing */
        }

    .footer {
            margin-top: 3rem;
        }

        .footer-content {
            grid-template-columns: 1fr;
            gap: 2rem;
            text-align: left;
            padding: 0 1.5rem;
        }
    
        .footer-social {
            padding: 0 1.5rem;
        }

        .typewriter-title .desktop-text {
            display: none;
        }

        .typewriter-title .mobile-text {
            display: block;
            line-height: 0.9;
            white-space: normal;
        }

        .typewriter-title {
            white-space: normal;
        }

    .hero {
            /* padding removed - uses universal section spacing */
        }

        .hero-slider-btn {
            top: 40%; /* Higher position on mobile */
        }

        .hero-slider-container {
            height: auto;
            min-height: 500px;
            touch-action: pan-y pinch-zoom;
            cursor: grab;
        }

        .hero-slider-container:active {
            cursor: grabbing;
        }

        .hero-slide {
            user-select: none;
            -webkit-user-select: none;
        }




        .section-title {
            line-height: 1.1;
        }

        /* Mobile WhatsApp Section */
        .whatsapp-section {
            /* uses universal section spacing */
            margin: 0 1rem;
            border-radius: 30px;
            padding: 3rem 0;
        }

        .info-sections-wrapper {
            grid-template-columns: 1fr;
        }

        .skill-competition-section,
        .steps-section {
            /* margin handled by parent container-spacing */
            border-radius: 30px;
            padding: 2rem;
        }

        .skill-content {
            grid-template-columns: 1fr;
            gap: 2rem;
            text-align: center;
        }

        .skill-text h2 {
            font-size: 1.8rem;
        }

        .skill-trophy svg {
            max-width: 200px;
        }

        .steps-section h2 {
            font-size: 1.8rem;
            margin-bottom: 2rem;
        }

        .steps-container {
            height: 300px;
        }

        .step-card {
            padding: 1.5rem;
        }

        .step-number {
            width: 50px;
            height: 50px;
            font-size: 1.2rem;
        }

        .step-card h3 {
            font-size: 1.3rem;
        }

        .skill-subtitle {
            font-size: 0.95rem;
            line-height: 1.4;
        }

        .step-nav-btn {
            width: 30px;
            height: 30px;
            font-size: 0.8rem;
        }

        .whatsapp-icon {
            font-size: 3rem;
        }

        .benefits-grid {
            grid-template-columns: 1fr;
            margin: 1.5rem auto;
        }

        .benefit-item {
            padding: 0.75rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
        }

        .whatsapp-cta {
        }

        .input-group {
            border-radius: var(--border-radius);
        }

        .country-code {
            padding: 0.875rem;
        }

        .phone-input {
            padding: 0.875rem;
        }

        .join-btn {
            padding: 0.875rem 2rem;
            font-size: 1.25rem;
            font-weight: 700;
        }

        .input-helper-text {
            font-size: 0.8rem;
            margin: 0.0625rem 0 0 0;
            white-space: normal;
        }

        .privacy-note {
            white-space: normal;
            max-width: 280px;
        }


        .hero-cta {
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            transform: scale(0.85);
            text-align: center;
        }

        .hero-disclaimer {
            font-size: 0.9rem;
            margin-bottom: 0;
        }

        .hero-product-image {
            max-width: 250px;
            max-height: 250px;
            height: auto;
        }

        /* Rotate arrow 90 degrees on mobile - centered but closer to text */
        .challenge-arrow {
            transform: translate(-50%, -50%) rotate(90deg);
            left: 50%;
            top: 45%;
            margin: 0 auto;
            width: 35px;
        }

        .hero-cta:hover .challenge-arrow {
            transform: translate(-50%, -50%) rotate(90deg) scale(1.1);
        }

        /* Mobile challenge text - fully centered */
        .challenge-label {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            margin-top: 0.2rem;
            display: flex !important;
            flex-direction: column !important;
            text-align: center !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            gap: 0.1rem;
            padding: 0.1rem 0;
        }

        .challenge-line {
            display: block;
            padding: 0;
            margin: 0;
            line-height: 1.2;
        }

        .challenge-info {
            margin-bottom: 0.5rem;
            margin-top: 0.2rem;
            text-align: center !important;
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .hero-cta:hover .challenge-arrow {
            transform: translate(-50%, -50%) rotate(90deg) scale(1.1);
        }

        .challenge-arrow {
            top: 40% !important;
            width: 32px !important;
        }

        .hero-disclaimer {
            margin-top: -3.5rem !important;
            margin-bottom: 0 !important;
            font-size: 0.85rem;
            order: 5 !important;
        }

        .play-section {
            align-items: center !important;
            text-align: center !important;
            margin-left: 0 !important;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .play-btn {
            margin: 0 auto 0.5rem auto !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .credit-text {
            text-align: center !important;
            width: 100%;
        }


        /* Mobile sticky header adjustments */
        .navbar.sticky .nav-container {
            justify-content: center;
            padding: 0.5rem 1rem;
        }

        .navbar.sticky .nav-links {
            display: none;
        }

        .navbar.sticky .logo {
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }

        .navbar.sticky .nav-actions {
            display: none;
        }

        /* Regular header on mobile - clean logo only */
        .navbar .nav-container {
            justify-content: center;
        }

        .navbar .nav-links {
            display: none;
        }

        .navbar .nav-actions {
            display: none;
        }

        .navbar .logo {
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }

    .mobile-footer-menu {
            display: flex;
        }

        body {
            padding-bottom: 70px;
        }

    .mobile-nav-overlay {
            display: none;
        }

        /* Hide tablet footer nav on mobile */
        .tablet-footer-menu {
            display: none !important;
        }

        /* Mobile rewards slider - show only 1 product */
        .rewards-slider-container {
            border-radius: 45px;
            padding: 2rem 1rem;
        }

        .rewards-slider .reward-card {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .rewards-slider {
            padding: 0 1rem;
        }

        .rewards-slider-container .slider-btn {
            width: 40px;
            height: 40px;
            font-size: 1rem;
        }

        .rewards-slider-container .prev-btn {
            left: 0.5rem;
        }

        .rewards-slider-container .next-btn {
            right: 0.5rem;
        }

    .product-placeholder::before,
        .product-placeholder::after {
            transform: scale(0.8);
        }

    /* Fix Top Rewards slider - ensure card elements move together */
        .rewards-slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
            will-change: transform;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y pinch-zoom;
        }

        .rewards-slider-container {
            touch-action: pan-y pinch-zoom;
            cursor: grab;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: transparent;
        }

        .rewards-slider-container:active {
            cursor: grabbing;
        }

        .rewards-slider .reward-card {
            flex: 0 0 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            transition: none; /* Remove individual card transitions */
            user-select: none;
            -webkit-user-select: none;
        }

        /* Fix testimonials section for mobile */
        .testimonials {
            /* uses universal section spacing */
            background: transparent;
        }

        .testimonials-container {
            padding: 2rem 1.5rem;
            border-radius: 30px;
            background-color: #f8f9fa;
            overflow: visible;
        }

        .testimonials-grid {
            grid-template-columns: 1fr;
            margin-bottom: 0;
        }

        .testimonials .section-title,
        .testimonials .section-subtitle {
            padding: 0 1rem;
            margin-bottom: 1.5rem;
        }

        .testimonial-card {
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 1.5rem;
            gap: 0;
        }

        .testimonial-photo {
            width: 80px;
            height: 80px;
            margin-bottom: 1.5rem;
        }

        /* Special handling for "You're Next" card */
        .testimonial-card.you-testimonial {
            flex-direction: column;
            align-items: center;
        }

        .testimonial-card.you-testimonial .circle-cta {
            margin-bottom: 1.5rem;
        }


        .info-sections-wrapper {
            margin: 0 1rem;
        }

        /* Fix How to Win section step numbers */
        .step-card {
            padding: 1.5rem;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .step-card h3 {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.1rem;
            width: 100%;
        }

        .steps-navigation {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
            position: relative;
            z-index: 10;
        }

        .step-nav-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e0e0e0;
            border: none;
            font-weight: bold;
            color: #666;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
        }

        .step-nav-btn.active {
            background: var(--color-primary);
            color: white;
        }

        /* Fix mobile navigation menu scrolling */
        .mobile-nav-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: #fff;
            z-index: 999;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        .mobile-nav-overlay.active {
            display: block;
            overflow-y: auto !important;
        }

        .mobile-nav-content {
            padding: 20px 30px 100px 30px;
            min-height: 100vh;
            overflow-y: auto;
        }

        /* Ensure body doesn't scroll when menu is open */
        body.menu-open {
            overflow: hidden;
            position: fixed;
            width: 100%;
        }

    section {
            padding: 0;
        }

    .compact-section {
            padding: 0 !important;
        }

    .container-spacing {
            margin: 1rem 1rem !important;
        }

    .whatsapp-section {
            /* margin handled by container-spacing class */
        }

    .skill-content,
        .steps-section {
            padding: 2rem;
        }
}

@media (max-width: 900px) {
    .footer-content {
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            padding: 0 2rem;
        }
    
    .footer-social {
            padding: 0 2rem;
        }
}

@media (max-width: 768px) {
    .footer-content {
            grid-template-columns: 1fr;
            gap: 2rem;
            text-align: left;
            padding: 0 1.5rem;
        }
    
    .footer-social {
            padding: 0 1.5rem;
        }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .info-sections-wrapper {
            grid-template-columns: 1fr;
            margin: 0 1rem;
        }

        .skill-competition-section,
        .steps-section {
            /* margin handled by parent container-spacing */
        }

        .skill-content {
            padding: 1.5rem 0 !important;
            text-align: left !important;
        }
        
        .skill-competition-section .container {
            max-width: none;
            padding: 0;
        }
        
        .skill-trophy {
            display: none !important;
        }

        .skill-text {
            max-width: none !important;
            width: 100% !important;
            padding: 0;
        }

        .skill-text p {
            text-align: left !important;
        }

        .hero {
            /* uses universal section spacing */
        }

        .hero-slider-container {
            height: auto;
            min-height: 500px;
        }



        .hero-product-image {
            max-width: 250px;
            max-height: 250px;
            height: auto;
        }

        /* Rotate arrow 90 degrees on tablet - centered but closer to text */
        .challenge-arrow {
            transform: translate(-50%, -50%) rotate(90deg);
            left: 50%;
            top: 45%;
            width: 35px;
        }

        .hero-cta:hover .challenge-arrow {
            transform: translate(-50%, -50%) rotate(90deg) scale(1.1);
        }

        /* Tablet challenge text - fully centered */
        .challenge-label {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            margin-top: 0.2rem;
            display: flex !important;
            flex-direction: column !important;
            text-align: center !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100% !important;
            gap: 0.2rem;
            padding: 0.2rem 0;
        }

        .challenge-line {
            display: block;
            padding: 0;
            margin: 0;
            line-height: 1.2;
        }

        .challenge-info {
            margin-bottom: 0.5rem;
            margin-top: 0.2rem;
            text-align: center !important;
            width: 100% !important;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .play-section {
            align-items: center !important;
            text-align: center !important;
            margin-left: 0 !important;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .play-btn {
            margin: 0 auto 0.5rem auto !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .credit-text {
            text-align: center !important;
            width: 100%;
        }


        /* Mobile-style sticky header for tablet */
        .navbar.sticky .nav-container {
            justify-content: center;
            padding: 0.5rem 1rem;
        }

        .navbar.sticky .nav-links {
            display: none;
        }

        .navbar.sticky .logo {
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }

        .navbar.sticky .nav-actions {
            display: none;
        }

        /* Regular header on tablet - clean logo only */
        .navbar .nav-container {
            justify-content: center;
        }

        .navbar .nav-links {
            display: none;
        }

        .navbar .nav-actions {
            display: none;
        }

        .navbar .logo {
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }

        /* Show tablet footer navigation */
        .tablet-footer-menu {
            display: flex;
        }

        /* Add padding to body for sticky footer */
        body {
            padding-bottom: 70px;
        }

        /* hero-features removed - now using promise-section responsive styles */



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

        .whatsapp-cta {
            flex-direction: column;
        }

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

        .footer-bottom {
            flex-direction: column !important;
            gap: 1.5rem !important;
            text-align: center;
            padding: 2rem 1rem 0;
            align-items: center;
        }

        .footer-links {
            order: 1 !important;
            width: 100%;
            justify-content: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-bottom: 0;
        }

        .footer-links a {
            font-size: 0.75rem;
            text-align: left;
            white-space: nowrap;
        }

        .footer-legal {
            text-align: center !important;
            order: 2 !important;
            width: 100%;
            margin-top: 1rem;
        }

        .footer-legal p {
            font-size: 0.75rem;
            margin: 0;
        }

        .footer .social-icons {
            flex-wrap: wrap;
            justify-content: center;
        }

        .footer .social-link {
            width: 45px !important;
            height: 45px !important;
            min-width: 45px !important;
            max-width: 45px !important;
            flex: 0 0 45px !important;
            aspect-ratio: 1 / 1 !important;
        }

        .footer .social-link i {
            font-size: 1.2rem;
        }

        .footer-column ul {
            text-align: left;
        }

        .footer-column li {
            text-align: left;
        }

        .nav-container {
            flex-direction: column;
        }

        .nav-links {
            flex-direction: column;
            text-align: center;
        }

        .hero-stats {
            flex-direction: column;
        }

        .filters-container {
            flex-direction: column;
            align-items: stretch;
        }

        .search-group {
            margin-left: 0;
        }

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

        .cta-buttons {
            flex-direction: column;
            align-items: center;
        }

        .cta-btn {
            width: 200px;
        }

        .account-form {
            padding: 2rem;
        }

        .form-row {
            flex-direction: column;
        }

        .form-options {
            flex-direction: column;
            align-items: flex-start;
        }

        .social-buttons {
            flex-direction: column;
        }

        .dashboard-header {
            flex-direction: column;
            text-align: center;
        }

        .dashboard-stats {
            grid-template-columns: 1fr;
        }

        .dashboard-tabs {
            flex-direction: column;
        }

        .tab-btn {
            text-align: center;
            border-bottom: none;
            border-right: 3px solid transparent;
        }

        .tab-btn.active {
            border-bottom: none;
            border-right-color: var(--color-primary);
        }

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

        .quick-actions {
            grid-template-columns: 1fr;
        }

        .history-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .history-result {
            text-align: left;
        }

        .credits-overview {
            grid-template-columns: 1fr;
        }

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

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

/* Challenge-specific styles */
.challenge-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.challenge-difficulty,
.challenge-value {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.challenge-status {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
}

.challenge-status.active {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.challenge-status.coming-soon {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.challenge-status.premium {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.category-icon {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
    text-align: center;
}

.category-count {
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 0.5rem;
}

@media (min-width: 1024px) {
    .footer-content {
            gap: 2rem;
            padding: 0 3rem;
        }
    
    .footer-bottom {
            padding: 2rem 3rem 0;
        }
    
    .footer-social {
            padding: 0 3rem;
        }
}

@media (min-width: 1025px) {
    .info-sections-wrapper {
            /* padding removed - parent section handles vertical spacing */
        }

    .footer {
            /* uses universal section spacing with special bottom padding */
            padding-bottom: 1rem;
            padding-top: 3rem; /* Much smaller padding-top on desktop */
            margin-top: 5rem; /* Same as universal desktop section spacing */
        }

    .tablet-footer-menu {
            display: none !important;
        }

    .challenge-label {
            gap: 0.1rem;
            padding: 0.05rem 0;
        }

        .challenge-line {
            padding: 0;
            margin: 0;
        }

    section {
            padding: 0;
        }

    .compact-section {
            padding: 0 !important;
        }

    .skill-content,
        .steps-section {
            padding: 4rem;
        }
}

@media (min-width: 1200px) {
    .footer-content {
            gap: 2.5rem;
            padding: 0 4rem;
        }
    
    .footer-bottom {
            padding: 2rem 4rem 0;
        }
    
    .footer-social {
            padding: 0 4rem;
        }
}

@media (min-width: 1400px) {
    .footer-content {
            gap: 3rem;
            padding: 0 5rem;
        }
    
    .footer-bottom {
            padding: 2rem 5rem 0;
        }
    
    .footer-social {
            padding: 0 5rem;
        }
}