/* Token-driven overrides for brand and glass integration */

/* Headings accents */
.simple-heading .accent,
.ecosystem-heading .accent {
    color: var(--brand, #F55722);
}

/* Primary buttons and gradients standardized to brand */
.primary-gradient,
.btn.primary,
.btn.primary-btn,
.btn-platform,
.gradient-btn {
    background: var(--brand, #F55722);
    color: var(--brand-contrast, #ffffff);
    border-color: var(--brand, #F55722);
}

/* Video/demo button outline using brand */
.btn.video-btn {
    border: 1px solid var(--brand, #F55722);
    color: var(--brand, #F55722);
}

/* Hero product cards: use glass if class present */
.product-card.glass-surface {
    border-radius: var(--radius-md, 14px);
    box-shadow: var(--elev-2, 0 10px 40px rgba(0,0,0,0.16));
}

/* Stats cards glass enhancement */
.stats-section .stat.glass-surface {
    border-radius: var(--radius-sm, 8px);
    box-shadow: var(--elev-1, 0 6px 24px rgba(0,0,0,0.08));
}

/* Platform and Coach Marv cards: apply glass treatment */
.platform .card.glass-surface,
.platform-column .platform-image-wrapper.glass-surface,
.ai-assistant-showcase.glass-surface {
    border-radius: var(--radius-md, 14px);
    box-shadow: var(--elev-2, 0 10px 40px rgba(0,0,0,0.16));
}

/* Reduced motion: dampen animations and blurs */
@media (prefers-reduced-motion: reduce) {
    .animated-image,
    .subtlePulse,
    .fade-in-up,
    .stagger-item,
    .testimonial-slide,
    .video-background iframe {
        animation: none !important;
        transition: none !important;
    }
    .glass-surface {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* ================= Modern Theme Overhaul ================ */

/* Global surfaces & typography rhythm */
html, body {
    background: radial-gradient(1200px 600px at 0% -10%, rgba(245, 87, 34, 0.06), transparent 60%),
                radial-gradient(1200px 600px at 100% 110%, rgba(0, 0, 0, 0.04), transparent 60%),
                #ffffff;
    color: var(--ink, #0a0a0b);
}

main { scroll-behavior: smooth; }

/* Elevate section structure - Modern spacing system */
.section { 
    position: relative; 
}

.section .section-title { 
    font-weight: 800; 
    letter-spacing: -0.02em; 
}

/* Better spacing for section content */
.section > .container-xl,
.section > .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* Consistent spacing between consecutive sections - handled in home-2026.css */

/* Special handling for hero sections - optimized spacing */
/* Shared hero section styling for investors, our story, blog, and NYC pages */
.section.hero-2026,
.section.hero.investor-hero,
.section.hero.connect-hero,
.section.hero.blog-hero,
.section.nyc-hero {
    padding-top: clamp(var(--space-2), 2vw, var(--space-5));
    padding-bottom: var(--space-section-y-large);
}

/* Center-align hero sections on investors, our story, and blog pages */
.section.hero.investor-hero .container-xl,
.section.hero.connect-hero .container-xl,
.section.hero.blog-hero .container-xl {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section.hero.investor-hero .hero-content,
.section.hero.connect-hero .hero-content,
.section.hero.blog-hero .hero-content {
    max-width: min(var(--content-max-width, 900px), 100%);
    width: 100%;
    flex: none;
    margin: 0 auto;
}

/* Shared hero heading and subtitle styling */
.section.hero.investor-hero h1,
.section.hero.connect-hero h1,
.section.hero.blog-hero h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    line-height: var(--lh-tight, 1.2);
    letter-spacing: -0.025em;
    color: var(--text-primary, #000);
    margin: 0 0 var(--space-6);
    text-align: center;
    max-width: min(var(--content-max-width, 900px), 100%);
    margin-left: auto;
    margin-right: auto;
}

.section.hero.investor-hero .hero-subtitle,
.section.hero.connect-hero .hero-subtitle,
.section.hero.blog-hero .hero-subtitle {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: var(--lh-normal, 1.6);
    color: var(--text-secondary, #333);
    text-align: center;
    max-width: min(var(--content-max-width, 900px), 100%);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    opacity: 0.9;
}

/* Blog hero specific background styling */
.section.hero.blog-hero {
    position: relative;
    background: linear-gradient(135deg, rgba(248, 248, 252, 0.9) 0%, rgba(255, 255, 255, 1) 100%);
    overflow: hidden;
}

.section.hero.blog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--brand, #F55722) 6%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--brand, #F55722) 4%, transparent) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.section.hero.blog-hero .container-xl {
    position: relative;
    z-index: 1;
}

/* Blog hero heading gradient text effect */
.section.hero.blog-hero h1 {
    background: linear-gradient(135deg, var(--text-primary, #000) 0%, var(--text-secondary, #333) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section.hero.blog-hero .blog-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--space-grid-gap);
    margin-top: clamp(var(--space-8), 5vw, var(--space-12));
    width: 100%;
    max-width: min(800px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.section.hero.blog-hero .blog-stat {
    background: var(--surface, #fff);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-5), 2vw, var(--space-8)) clamp(var(--space-4), 1.5vw, var(--space-6));
    box-shadow: var(--elev-1);
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2), box-shadow var(--motion-duration-medium) var(--motion-ease-out-2);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    position: relative;
    overflow: hidden;
    text-align: center;
}

.section.hero.blog-hero .blog-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(3px, 0.4vw, 4px);
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2);
}

.section.hero.blog-hero .blog-stat:hover {
    transform: translateY(calc(var(--space-2) * -1));
    box-shadow: var(--elev-2);
}

.section.hero.blog-hero .blog-stat:hover::before {
    transform: scaleX(1);
}

.section.hero.blog-hero .blog-stat .number {
    display: block;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 900;
    line-height: 1;
    color: var(--brand, #F55722);
    margin-bottom: var(--space-2);
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2);
}

.section.hero.blog-hero .blog-stat:hover .number {
    transform: scale(1.05);
}

.section.hero.blog-hero .blog-stat .label {
    display: block;
    font-size: clamp(0.875rem, 1vw, 1rem);
    font-weight: 600;
    color: var(--text-secondary, #333);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive adjustments for centered hero sections */
@media (max-width: 768px) {
    .section.hero.investor-hero .hero-content,
    .section.hero.connect-hero .hero-content,
    .section.hero.blog-hero .hero-content {
        max-width: 100%;
    }
    
    .section.hero.investor-hero h1,
    .section.hero.connect-hero h1,
    .section.hero.blog-hero h1,
    .section.hero.investor-hero .hero-subtitle,
    .section.hero.connect-hero .hero-subtitle,
    .section.hero.blog-hero .hero-subtitle {
        max-width: 100%;
    }
    
    .section.hero.blog-hero .blog-stats {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        margin-top: var(--space-8);
    }
    
    .section.hero.blog-hero .blog-stat {
        padding: var(--space-6) var(--space-5);
    }
}

/* Stats sections - more compact */
.section.stats-hero {
    padding: var(--space-section-y-compact) 0;
}

/* User sections (For Players, For Organizers) - standard spacing */
.user-section.section {
    padding: var(--space-section-y) 0;
}

/* Feature showcase sections - standard spacing */
.feature-showcase.section {
    padding: var(--space-section-y) 0;
}

/* Testimonial sections - balanced spacing */
.testimonial-section.section {
    padding: var(--space-section-y) 0;
}

/* FAQ sections - comfortable spacing */
.faq-section.section {
    padding: var(--space-section-y) 0;
}

/* Related products - standard spacing */
.related-products.section {
    padding: var(--space-section-y) 0;
}

/* Instagram feed - standard spacing */
.instagram-feed.section {
    padding: var(--space-section-y) 0;
}

/* Global reach sections - standard spacing */
.global-reach-section.section {
    padding: var(--space-section-y) 0;
}

/* NYC page sections - modernized styling */
.why-nyc-section.section {
    padding: var(--space-section-y) 0;
    background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface-muted, #f7f7f8) 100%);
    position: relative;
}

.why-nyc-section.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(1px, 0.1vw, 2px);
    background: linear-gradient(90deg, transparent, var(--border-color, rgba(0,0,0,0.08)), transparent);
    opacity: 0.6;
}

.nyc-stats-section.section {
    padding: var(--space-section-y-compact) 0;
}

.nyc-features-section.section {
    padding: var(--space-section-y) 0;
}

.nyc-cta-section.section {
    padding: var(--space-section-y-large) 0;
}

/* Sport Pages - Scalable Styling */
.sport-hero.section {
    padding: var(--space-section-y-large) 0;
}

.sport-stats-section.section {
    padding: var(--space-section-y-compact) 0;
}

.why-sport-section.section {
    padding: var(--space-section-y) 0;
    background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface-muted, #f7f7f8) 100%);
    position: relative;
}

.why-sport-section.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(1px, 0.1vw, 2px);
    background: linear-gradient(90deg, transparent, var(--border-color, rgba(0,0,0,0.08)), transparent);
    opacity: 0.6;
}

/* Subscribe Modal - Scalable, Mobile-First */
.subscribe-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: var(--space-4);
    opacity: 0;
    transition: opacity var(--motion-duration-medium) var(--motion-ease-out-2);
}

.subscribe-modal[aria-hidden="false"] {
    display: flex;
    opacity: 1;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.85) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: backdrop-filter var(--motion-duration-medium) var(--motion-ease-out-2);
}

.subscribe-modal-content {
    position: relative;
    width: 100%;
    max-width: min(520px, 100%);
    background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface-muted, #f7f7f8) 100%);
    border-radius: clamp(16px, 2vw, 24px);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 0 0 clamp(1px, 0.1vw, 2px) rgba(245, 87, 34, 0.08),
        0 0 0 clamp(4px, 0.5vw, 8px) color-mix(in srgb, var(--brand, #F55722) 5%, transparent);
    padding: clamp(var(--space-8), 4vw, var(--space-12));
    z-index: 1;
    transform: scale(0.92) translateY(20px);
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2), 
                box-shadow var(--motion-duration-medium) var(--motion-ease-out-2);
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    overflow: hidden;
}

.subscribe-modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(4px, 0.5vw, 6px);
    background: var(--brand-gradient);
    z-index: 0;
}

.subscribe-modal-content::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: clamp(200px, 30vw, 300px);
    height: clamp(200px, 30vw, 300px);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand, #F55722) 8%, transparent) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-20px, -20px) scale(1.1); }
}

.subscribe-modal[aria-hidden="false"] .subscribe-modal-content {
    transform: scale(1) translateY(0);
    box-shadow: 
        0 24px 72px rgba(0, 0, 0, 0.2),
        0 0 0 clamp(1px, 0.1vw, 2px) rgba(245, 87, 34, 0.12),
        0 0 0 clamp(4px, 0.5vw, 8px) color-mix(in srgb, var(--brand, #F55722) 8%, transparent);
}

.modal-close {
    position: absolute;
    top: clamp(var(--space-5), 2.5vw, var(--space-6));
    right: clamp(var(--space-5), 2.5vw, var(--space-6));
    width: clamp(36px, 4.5vw, 44px);
    height: clamp(36px, 4.5vw, 44px);
    border-radius: 50%;
    border: clamp(1px, 0.1vw, 2px) solid var(--border-color, rgba(0,0,0,0.08));
    background: var(--surface, #fff);
    color: var(--text-secondary, #666);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    transition: all var(--motion-duration-fast) var(--motion-ease-out-2);
    z-index: 10;
    box-shadow: var(--elev-1);
}

.modal-close:hover,
.modal-close:focus-visible {
    background: var(--brand-gradient);
    color: var(--brand-contrast, #fff);
    border-color: var(--brand, #F55722);
    transform: scale(1.1) rotate(90deg);
    box-shadow: var(--elev-2), 0 0 0 clamp(2px, 0.3vw, 4px) color-mix(in srgb, var(--brand, #F55722) 20%, transparent);
    outline: none;
}

.modal-close:focus-visible {
    outline: clamp(2px, 0.3vw, 3px) solid var(--brand, #F55722);
    outline-offset: clamp(2px, 0.3vw, 3px);
}

.modal-header {
    margin-bottom: clamp(var(--space-8), 4vw, var(--space-10));
    text-align: center;
    position: relative;
    z-index: 1;
    padding-top: clamp(var(--space-2), 1vw, var(--space-3));
}

.modal-title {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 900;
    margin: 0 0 var(--space-4);
    color: var(--text-primary, #000);
    line-height: var(--lh-tight, 1.2);
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--text-primary, #000) 0%, var(--text-secondary, #333) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.modal-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 8vw, 60px);
    height: clamp(3px, 0.4vw, 4px);
    background: var(--brand-gradient);
    border-radius: var(--radius-pill);
}

.modal-subtitle {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    color: var(--text-secondary, #555);
    margin: 0;
    line-height: var(--lh-normal, 1.6);
    opacity: 0.9;
}

.subscribe-modal-content .newsletter-form {
    width: 100%;
    position: relative;
    z-index: 1;
}

.subscribe-modal-content .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: relative;
}

.subscribe-modal-content input[type="email"] {
    width: 100%;
    padding: clamp(var(--space-5), 1.5vw, var(--space-6)) clamp(var(--space-6), 2vw, var(--space-8));
    border: clamp(1px, 0.1vw, 2px) solid var(--border-color, rgba(0,0,0,0.1));
    border-radius: var(--radius-md);
    font-size: clamp(1rem, 1.1vw, 1.0625rem);
    background: var(--surface, #fff);
    transition: all var(--motion-duration-fast) var(--motion-ease-out-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
}

.subscribe-modal-content input[type="email"]:hover {
    border-color: color-mix(in srgb, var(--brand, #F55722) 30%, transparent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.subscribe-modal-content input[type="email"]:focus {
    outline: none;
    border-color: var(--brand, #F55722);
    box-shadow: 
        0 0 0 clamp(3px, 0.4vw, 4px) color-mix(in srgb, var(--brand, #F55722) 15%, transparent),
        0 6px 16px rgba(245, 87, 34, 0.12);
    transform: translateY(-1px);
}

.subscribe-modal-content .btn-2026.primary {
    width: 100%;
    justify-content: center;
    padding: clamp(var(--space-5), 1.5vw, var(--space-6)) clamp(var(--space-6), 2vw, var(--space-8));
    font-size: clamp(1rem, 1.1vw, 1.0625rem);
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(245, 87, 34, 0.3);
    position: relative;
    overflow: hidden;
}

.subscribe-modal-content .btn-2026.primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left var(--motion-duration-slow) var(--motion-ease-out-2);
}

.subscribe-modal-content .btn-2026.primary:hover::before {
    left: 100%;
}

.subscribe-modal-content .btn-2026.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245, 87, 34, 0.4);
}

.subscribe-modal-content .btn-2026.primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(245, 87, 34, 0.3);
}

.subscribe-modal-content .form-success {
    margin-top: var(--space-5);
    padding: clamp(var(--space-5), 1.5vw, var(--space-6));
    background: linear-gradient(135deg, color-mix(in srgb, #4CAF50 12%, transparent) 0%, color-mix(in srgb, #4CAF50 8%, transparent) 100%);
    border-radius: var(--radius-md);
    border: clamp(1px, 0.1vw, 2px) solid color-mix(in srgb, #4CAF50 35%, transparent);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
    animation: slideInUp var(--motion-duration-medium) var(--motion-ease-out-2);
}

/* Ensure success message is hidden by default */
.subscribe-modal-content .form-success.hidden {
    display: none !important;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subscribe-modal-content .form-success i {
    color: #4CAF50;
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
    animation: scaleIn var(--motion-duration-medium) var(--motion-ease-out-2);
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.subscribe-modal-content .form-success span {
    font-weight: 600;
    color: #2e7d32;
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

/* Mobile optimizations - Scalable, Mobile-First */
@media (max-width: 768px) {
    .subscribe-modal {
        padding: var(--space-3);
        align-items: center;
        justify-content: center;
    }
    
    .subscribe-modal-content {
        padding: clamp(var(--space-6), 4vw, var(--space-10));
        max-height: 90vh;
        max-width: 100%;
        border-radius: clamp(var(--radius-lg, 16px), 5vw, 24px);
        transform: scale(0.96) translateY(clamp(10px, 2vw, 20px));
        margin-top: 0;
    }
    
    .subscribe-modal[aria-hidden="false"] .subscribe-modal-content {
        transform: scale(1) translateY(0);
    }
    
    .modal-overlay {
        backdrop-filter: blur(clamp(4px, 1vw, 6px));
        -webkit-backdrop-filter: blur(clamp(4px, 1vw, 6px));
    }
    
    .modal-close {
        top: clamp(var(--space-4), 2vw, var(--space-5));
        right: clamp(var(--space-4), 2vw, var(--space-5));
        width: clamp(40px, 5vw, 44px);
        height: clamp(40px, 5vw, 44px);
        min-width: 44px;
        min-height: 44px;
    }
    
    .modal-header {
        margin-bottom: clamp(var(--space-6), 3vw, var(--space-8));
        padding-top: clamp(var(--space-2), 1vw, var(--space-3));
    }
    
    .modal-title {
        font-size: clamp(1.5rem, 4vw, 1.875rem);
        margin-bottom: var(--space-3);
        line-height: var(--lh-tight, 1.2);
    }
    
    .modal-title::after {
        width: clamp(50px, 10vw, 70px);
        height: clamp(3px, 0.5vw, 4px);
    }
    
    .modal-subtitle {
        font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
        padding: 0 var(--space-1);
    }
    
    .subscribe-modal-content .form-group {
        gap: var(--space-4);
    }
    
    .subscribe-modal-content input[type="email"] {
        padding: clamp(var(--space-5), 2vw, var(--space-6)) clamp(var(--space-5), 2.5vw, var(--space-7));
        font-size: clamp(1rem, 1.15vw, 1.0625rem);
        min-height: clamp(44px, 6vw, 48px);
        -webkit-appearance: none;
        appearance: none;
    }
    
    .subscribe-modal-content .btn-2026.primary {
        padding: clamp(var(--space-5), 2vw, var(--space-6)) clamp(var(--space-6), 3vw, var(--space-8));
        font-size: clamp(1rem, 1.15vw, 1.0625rem);
        min-height: clamp(44px, 6vw, 48px);
        font-weight: 700;
    }
    
    .subscribe-modal-content .form-success {
        padding: clamp(var(--space-4), 2vw, var(--space-5)) clamp(var(--space-4), 2.5vw, var(--space-6));
        margin-top: var(--space-4);
    }
    
    .subscribe-modal-content .form-success i {
        font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    }
    
    .subscribe-modal-content .form-success span {
        font-size: clamp(0.875rem, 1vw, 0.9375rem);
    }
    
    /* Hide decorative orb on mobile for better performance */
    .subscribe-modal-content::after {
        display: none;
    }
}

/* Small mobile devices - Extra optimizations */
@media (max-width: 480px) {
    .subscribe-modal {
        padding: var(--space-3);
    }
    
    .subscribe-modal-content {
        border-radius: clamp(16px, 4vw, 20px);
        padding: clamp(var(--space-6), 4vw, var(--space-8));
        max-height: 95vh;
    }
    
    .modal-header {
        margin-bottom: clamp(var(--space-5), 2.5vw, var(--space-7));
    }
    
    .modal-title {
        font-size: clamp(1.375rem, 3.5vw, 1.625rem);
        line-height: 1.25;
    }
    
    .modal-subtitle {
        font-size: clamp(0.875rem, 1.1vw, 1rem);
        line-height: var(--lh-normal, 1.5);
    }
    
    .subscribe-modal-content input[type="email"],
    .subscribe-modal-content .btn-2026.primary {
        padding: var(--space-5) var(--space-6);
        font-size: 1rem;
    }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .subscribe-modal {
        align-items: center;
        justify-content: center;
    }
    
    .subscribe-modal-content {
        max-height: 95vh;
        border-radius: var(--radius-lg, 16px);
        margin-top: 0;
    }
    
    .modal-header {
        margin-bottom: clamp(var(--space-4), 2vw, var(--space-6));
    }
    
    .modal-title {
        font-size: clamp(1.25rem, 3vw, 1.5rem);
        margin-bottom: var(--space-2);
    }
    
    .modal-subtitle {
        font-size: clamp(0.875rem, 1vw, 1rem);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .subscribe-modal,
    .subscribe-modal-content,
    .modal-close,
    .subscribe-modal-content::after {
        transition: none;
        animation: none !important;
    }
    
    .subscribe-modal-content .form-success,
    .subscribe-modal-content .form-success i {
        animation: none !important;
    }
}

/* ================= Global Reach Section: Modern Redesign ================= */
/* Mobile-first, scalable design with generous spacing */

.global-reach-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--space-8), 6vw, var(--space-16));
    margin-top: var(--space-header-margin);
}

/* Modern Section Card */
.reach-section-card {
    background: var(--surface, #fff);
    border-radius: clamp(var(--radius-lg), 2vw, 28px);
    padding: clamp(var(--space-6), 5vw, var(--space-12));
    border: 1px solid var(--border-color, rgba(0,0,0,0.06));
    position: relative;
    overflow: hidden;
    transition: all var(--motion-duration-medium) var(--motion-ease-out-2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02);
}

.reach-section-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(3px, 0.4vw, 4px);
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2);
}

.reach-section-card:hover {
    transform: translateY(calc(var(--space-2) * -1));
    box-shadow: 0 12px 32px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
    border-color: var(--border-color, rgba(0,0,0,0.12));
}

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

/* Section Header */
.reach-section-header {
    display: flex;
    align-items: flex-start;
    gap: clamp(var(--space-4), 3vw, var(--space-6));
    margin-bottom: clamp(var(--space-5), 3vw, var(--space-8));
}

.reach-section-icon-wrapper {
    width: clamp(3.5rem, 6vw, 4.5rem);
    height: clamp(3.5rem, 6vw, 4.5rem);
    border-radius: clamp(var(--radius-md), 1.2vw, var(--radius-lg));
    background: var(--brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-contrast, #fff);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(245, 87, 34, 0.25);
}

.reach-section-title-wrapper {
    flex: 1;
}

.reach-section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--text-primary, #000);
    margin: 0 0 var(--space-2);
    line-height: var(--lh-tight, 1.2);
    letter-spacing: -0.02em;
}

.reach-section-subtitle {
    font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
    font-weight: 500;
    color: var(--text-secondary, #666);
    margin: 0;
    line-height: var(--lh-normal, 1.5);
}

.reach-section-description {
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: var(--lh-normal, 1.6);
    color: var(--text-secondary, #555);
    margin: 0 0 clamp(var(--space-8), 4vw, var(--space-12));
}

/* Items Grid - Modern, Generous Spacing */
.items-grid {
    display: grid;
    gap: clamp(var(--space-5), 4vw, var(--space-8));
}

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

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

/* Item Card - Sleeker Design */
.item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--space-3), 2vw, var(--space-4));
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    border-radius: clamp(var(--radius-md), 1.5vw, var(--radius-lg));
    background: var(--surface, #fff);
    border: clamp(1px, 0.15vw, 2px) solid var(--border-color, rgba(0,0,0,0.08));
    transition: all var(--motion-duration-fast) var(--motion-ease-out-2);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.item-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity var(--motion-duration-fast) var(--motion-ease-out-2);
}

.item-card:hover {
    transform: translateY(calc(var(--space-2) * -1));
    border-color: var(--brand, #F55722);
    box-shadow: 0 8px 24px rgba(245, 87, 34, 0.15), 0 4px 12px rgba(0,0,0,0.08);
    background: color-mix(in srgb, var(--brand, #F55722) 2%, var(--surface, #fff));
}

.item-card:hover::before {
    opacity: 0.03;
}

.item-card:focus-visible {
    outline: clamp(2px, 0.3vw, 3px) solid var(--brand, #F55722);
    outline-offset: clamp(2px, 0.3vw, 3px);
}

.item-card-icon {
    width: clamp(3rem, 5vw, 4rem);
    height: clamp(3rem, 5vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: all var(--motion-duration-fast) var(--motion-ease-out-2);
}

.item-card-icon i {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: var(--brand, #F55722);
    transition: all var(--motion-duration-fast) var(--motion-ease-out-2);
}

.item-card:hover .item-card-icon {
    transform: scale(1.1);
}

.item-card:hover .item-card-icon i {
    color: var(--brand, #F55722);
    transform: scale(1.1);
}

.item-card-label {
    font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
    font-weight: 600;
    color: var(--text-primary, #000);
    position: relative;
    z-index: 1;
    text-align: center;
    transition: color var(--motion-duration-fast) var(--motion-ease-out-2);
    line-height: var(--lh-tight, 1.3);
}

.item-card:hover .item-card-label {
    color: var(--brand, #F55722);
}

.item-card-badge {
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 700;
    color: var(--brand-contrast, #fff);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--space-1);
    position: relative;
    z-index: 1;
    display: block;
}

/* Featured City Card */
.item-card-featured {
    background: var(--brand-gradient);
    border-color: var(--brand-contrast, #fff);
    border-width: clamp(2px, 0.3vw, 3px);
    box-shadow: 0 6px 24px rgba(245, 87, 34, 0.25);
}

.item-card-featured .item-card-icon i,
.item-card-featured .item-card-label {
    color: var(--brand-contrast, #fff);
}

.item-card-featured:hover {
    box-shadow: 0 10px 32px rgba(245, 87, 34, 0.35);
    transform: translateY(calc(var(--space-2) * -1)) scale(1.02);
}

.item-card-featured:hover .item-card-label {
    color: var(--brand-contrast, #fff);
}

/* Info Cards (200+ Cities, Global Expansion) */
.item-card-info {
    cursor: default;
    opacity: 0.85;
    background: color-mix(in srgb, var(--text-secondary, #666) 3%, transparent);
    border-color: color-mix(in srgb, var(--text-secondary, #666) 10%, transparent);
}

.item-card-info:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    background: color-mix(in srgb, var(--text-secondary, #666) 5%, transparent);
}

.item-card-info .item-card-icon i {
    color: var(--text-secondary, #666);
}

.item-card-info .item-card-label {
    color: var(--text-secondary, #666);
}

.item-card-more {
    cursor: default;
    opacity: 0.75;
}

.item-card-more:hover {
    transform: none;
    border-color: var(--border-color, rgba(0,0,0,0.08));
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* City Cards - Square Aspect Ratio */
.item-card-city {
    aspect-ratio: 1;
    min-height: clamp(120px, 18vw, 160px);
}

/* ================= Interactive Flat Map Component ================= */
/* Desktop-only flat world map with city pins using Leaflet */

.globe-container,
.flat-map-container {
    width: 100%;
    height: clamp(400px, 50vw, 600px);
    min-height: 400px;
    margin: clamp(var(--space-6), 4vw, var(--space-10)) 0;
    border-radius: clamp(var(--radius-lg), 2vw, 24px);
    background: linear-gradient(135deg, #f7f7f8 0%, #ffffff 100%);
    border: 1px solid var(--border-color, rgba(0,0,0,0.06));
    overflow: hidden;
    position: relative;
    display: none; /* Hidden by default, shown on desktop */
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    z-index: 1;
}

.globe-container .leaflet-container,
.flat-map-container .leaflet-container {
    width: 100%;
    height: 100%;
    border-radius: clamp(var(--radius-lg), 2vw, 24px);
    background: #f7f7f8;
}

/* Custom city marker pins - Modern & Sleek */
.custom-city-marker {
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform var(--motion-duration-fast) var(--motion-ease-out-2);
}

.custom-city-marker:hover {
    transform: scale(1.2);
    z-index: 1000;
}

.city-pin-default {
    width: clamp(14px, 1.8vw, 18px);
    height: clamp(14px, 1.8vw, 18px);
    border-radius: 50%;
    background: linear-gradient(135deg, #666666 0%, #555555 100%);
    border: clamp(2px, 0.3vw, 3px) solid #ffffff;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
    transition: all var(--motion-duration-fast) var(--motion-ease-out-2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.city-pin-default::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.city-pin-featured {
    width: clamp(18px, 2.2vw, 24px);
    height: clamp(18px, 2.2vw, 24px);
    border-radius: 50%;
    background: var(--brand-gradient);
    border: clamp(3px, 0.4vw, 4px) solid #ffffff;
    box-shadow: 
        0 6px 20px rgba(245, 87, 34, 0.4),
        0 3px 10px rgba(245, 87, 34, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.4),
        0 0 0 clamp(2px, 0.3vw, 3px) rgba(245, 87, 34, 0.2);
    position: relative;
    transition: all var(--motion-duration-fast) var(--motion-ease-out-2);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pinGlow 2s ease-in-out infinite;
}

.city-pin-featured::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 35%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.city-pin-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(18px, 2.2vw, 24px);
    height: clamp(18px, 2.2vw, 24px);
    border-radius: 50%;
    border: clamp(2px, 0.3vw, 3px) solid #F55722;
    animation: pulseModern 2s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.7;
}

.city-pin-pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: clamp(2px, 0.3vw, 3px) solid #F55722;
    animation: pulseModern 2s ease-in-out infinite 0.5s;
    opacity: 0.4;
}

@keyframes pulseModern {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0.3;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

@keyframes pinGlow {
    0%, 100% {
        box-shadow: 
            0 6px 20px rgba(245, 87, 34, 0.4),
            0 3px 10px rgba(245, 87, 34, 0.3),
            inset 0 1px 3px rgba(255, 255, 255, 0.4),
            0 0 0 clamp(2px, 0.3vw, 3px) rgba(245, 87, 34, 0.2);
    }
    50% {
        box-shadow: 
            0 8px 24px rgba(245, 87, 34, 0.5),
            0 4px 12px rgba(245, 87, 34, 0.4),
            inset 0 1px 3px rgba(255, 255, 255, 0.4),
            0 0 0 clamp(3px, 0.4vw, 4px) rgba(245, 87, 34, 0.3);
    }
}

.custom-city-marker:hover .city-pin-default {
    transform: scale(1.15);
    box-shadow: 
        0 6px 18px rgba(0, 0, 0, 0.3),
        0 3px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, #777777 0%, #666666 100%);
}

.custom-city-marker:hover .city-pin-featured {
    transform: scale(1.15);
    animation: none;
    box-shadow: 
        0 10px 30px rgba(245, 87, 34, 0.5),
        0 5px 15px rgba(245, 87, 34, 0.4),
        inset 0 1px 3px rgba(255, 255, 255, 0.5),
        0 0 0 clamp(3px, 0.4vw, 4px) rgba(245, 87, 34, 0.4);
}

/* Pin connector line - Modern styling */
.leaflet-marker-icon {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* City popup styling - Modern & Sleek */
.city-popup-container {
    font-family: var(--font-sans, 'Roboto', sans-serif);
}

.city-popup {
    text-align: center;
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    min-width: 180px;
    position: relative;
}

.city-popup strong {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--text-primary, #000);
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: var(--lh-tight, 1.2);
}

.city-badge {
    display: inline-block;
    background: var(--brand-gradient);
    color: var(--brand-contrast, #fff);
    padding: clamp(var(--space-1), 0.8vw, var(--space-2)) clamp(var(--space-2), 1.5vw, var(--space-3));
    border-radius: var(--radius-pill);
    font-size: clamp(0.6875rem, 0.85vw, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--space-2);
    box-shadow: 0 2px 8px rgba(245, 87, 34, 0.3);
    animation: fadeInUp var(--motion-duration-medium) var(--motion-ease-out-2);
}

.city-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(0.875rem, 1.1vw, 0.9375rem);
    transition: all var(--motion-duration-fast) var(--motion-ease-out-2);
    padding: clamp(var(--space-3), 1.5vw, var(--space-4)) clamp(var(--space-4), 2vw, var(--space-6));
    border-radius: var(--radius-pill);
    background: var(--brand-gradient);
    box-shadow: 0 4px 12px rgba(245, 87, 34, 0.25);
    position: relative;
    overflow: hidden;
    animation: fadeInUp var(--motion-duration-medium) var(--motion-ease-out-2) 0.1s both;
}

.city-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left var(--motion-duration-medium) var(--motion-ease-out-2);
}

.city-link:hover {
    color: #ffffff !important;
    background: var(--brand-gradient);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 87, 34, 0.35);
}

.city-link:hover::before {
    left: 100%;
}

.city-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(245, 87, 34, 0.25);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Leaflet popup customization - Modern & Sleek */
.leaflet-popup-content-wrapper {
    border-radius: clamp(var(--radius-lg), 2vw, 20px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    padding: 0;
    overflow: hidden;
    position: relative;
    animation: popupSlideIn var(--motion-duration-medium) var(--motion-ease-out-2);
}

.leaflet-popup-content-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(3px, 0.4vw, 4px);
    background: var(--brand-gradient);
    z-index: 1;
}

.leaflet-popup-content {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.leaflet-popup-tip {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 12px;
    height: 12px;
}

.leaflet-popup-close-button {
    width: clamp(32px, 4vw, 36px);
    height: clamp(32px, 4vw, 36px);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary, #666);
    font-size: clamp(1.125rem, 1.5vw, 1.25rem);
    font-weight: 700;
    line-height: 1;
    transition: all var(--motion-duration-fast) var(--motion-ease-out-2);
    display: flex;
    align-items: center;
    justify-content: center;
    top: clamp(var(--space-2), 1.5vw, var(--space-3));
    right: clamp(var(--space-2), 1.5vw, var(--space-3));
    z-index: 10;
}

.leaflet-popup-close-button:hover {
    background: var(--brand-gradient);
    color: var(--brand-contrast, #fff);
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 2px 8px rgba(245, 87, 34, 0.3);
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Leaflet controls styling */
.leaflet-control-zoom {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.leaflet-control-zoom a {
    background-color: #ffffff;
    color: var(--text-primary, #000);
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    transition: background-color var(--motion-duration-fast) var(--motion-ease-out-2);
}

.leaflet-control-zoom a:hover {
    background-color: var(--surface-muted, #f7f7f8);
}

.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-sm);
    font-size: clamp(0.6875rem, 0.8vw, 0.75rem);
    padding: var(--space-1) var(--space-2);
}

/* Show globe on desktop, hide grid fallback */
@media (min-width: 769px) {
    .globe-container {
        display: block;
    }
    
    .cities-grid-fallback {
        display: none;
    }
}

/* Hide globe on mobile, show grid fallback */
@media (max-width: 768px) {
    .globe-container {
        display: none !important;
    }
    
    .cities-grid-fallback {
        display: grid;
    }
}

/* Globe loading state */
.globe-container::before {
    content: 'Loading interactive globe...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-secondary, #666);
    font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}

.globe-container canvas {
    z-index: 1;
    position: relative;
}

/* Globe hover tooltip (optional enhancement) */
.globe-tooltip {
    position: absolute;
    background: var(--text-primary, #000);
    color: var(--brand-contrast, #fff);
    padding: clamp(var(--space-2), 1vw, var(--space-3)) clamp(var(--space-3), 1.5vw, var(--space-4));
    border-radius: var(--radius-md);
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--motion-duration-fast) var(--motion-ease-out-2);
    transform: translate(-50%, -100%);
    margin-top: calc(var(--space-2) * -1);
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.globe-tooltip.visible {
    opacity: 1;
}

.globe-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: clamp(4px, 0.5vw, 6px) solid transparent;
    border-top-color: var(--text-primary, #000);
}

/* Responsive Design - Mobile First */
@media (min-width: 480px) {
    .items-grid-sports,
    .items-grid-cities {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 769px) {
    .global-reach-container {
        grid-template-columns: 1fr 1fr;
        gap: clamp(var(--space-10), 7vw, var(--space-20));
    }
    
    .items-grid-sports {
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(var(--space-6), 5vw, var(--space-10));
    }
    
    .items-grid-cities {
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(var(--space-6), 5vw, var(--space-10));
    }
}

@media (min-width: 1024px) {
    .items-grid-sports,
    .items-grid-cities {
        gap: clamp(var(--space-7), 6vw, var(--space-12));
    }
    
    .reach-section-card {
        padding: clamp(var(--space-8), 6vw, var(--space-16));
    }
}

@media (min-width: 1280px) {
    .items-grid-sports,
    .items-grid-cities {
        gap: clamp(var(--space-8), 7vw, var(--space-14));
    }
}

@media (max-width: 768px) {
    .global-reach-section .section-header {
        text-align: center;
    }
    
    .reach-section-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-4);
    }
    
    .reach-section-title-wrapper {
        text-align: center;
    }
    
    .reach-section-icon-wrapper {
        margin: 0 auto;
    }
}

/* CTA sections - balanced spacing */
.cta-simple.section {
    padding: var(--space-section-y) 0;
}

/* Investor sections - standard spacing */
.investor-section.section {
    padding: var(--space-section-y) 0;
}

/* Mission sections - standard spacing */
.mission-section.section {
    padding: var(--space-section-y) 0;
}

/* Modernized Mission Section */
.mission-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-8), 5vw, var(--space-16));
    align-items: center;
    margin-top: var(--space-header-margin);
}

.mission-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.mission-content h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--text-primary, #000);
    margin: 0 0 var(--space-3);
    position: relative;
    padding-left: var(--space-6);
}

.mission-content h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(3px, 0.4vw, 4px);
    height: clamp(1.5rem, 2vw, 2rem);
    background: var(--brand-gradient);
    border-radius: var(--radius-pill);
}

.mission-content p {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: var(--lh-normal);
    color: var(--text-secondary, #333);
    margin: 0;
}

.mission-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--elev-2);
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2), box-shadow var(--motion-duration-medium) var(--motion-ease-out-2);
}

.mission-image:hover {
    transform: translateY(calc(var(--space-2) * -1));
    box-shadow: var(--elev-2), 0 0 0 clamp(4px, 0.5vw, 8px) color-mix(in srgb, var(--brand, #F55722) 10%, transparent);
}

.mission-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform var(--motion-duration-slow) var(--motion-ease-out-2);
}

.mission-image:hover img {
    transform: scale(1.05);
}

/* Values Grid - Modern card styling */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: var(--space-grid-gap);
    margin-top: var(--space-header-margin);
}

.value-card {
    background: var(--surface, #fff);
    border-radius: var(--radius-lg);
    padding: var(--space-card-padding);
    box-shadow: var(--elev-1);
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2), box-shadow var(--motion-duration-medium) var(--motion-ease-out-2);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    position: relative;
    overflow: hidden;
    text-align: center;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(3px, 0.4vw, 4px);
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2);
}

.value-card:hover {
    transform: translateY(calc(var(--space-2) * -1));
    box-shadow: var(--elev-2);
}

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

.value-card i {
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: var(--brand, #F55722);
    margin-bottom: var(--space-4);
    display: block;
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2), color var(--motion-duration-medium) var(--motion-ease-out-2);
}

.value-card:hover i {
    transform: scale(1.1);
    color: var(--brand, #F55722);
}

.value-card h3 {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--text-primary, #000);
}

.value-card p {
    color: var(--text-secondary, #333);
    line-height: var(--lh-normal);
    margin: 0;
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mission-container {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .mission-image {
        order: -1;
    }
    
    .mission-content h3 {
        padding-left: var(--space-5);
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
}

/* Story sections - standard spacing */
.story-section.section {
    padding: var(--space-section-y) 0;
}

/* Contact sections - standard spacing */
.contact-section.section {
    padding: var(--space-section-y) 0;
}

/* Blog hero sections - standard spacing */
/* Blog hero padding is now handled by the shared hero rule above */

/* Blog content sections - standard spacing */
.blog-content.section {
    padding: var(--space-section-y) 0;
}

/* Feature announcement sections - optimized spacing */
.feature-announcement.section {
    padding: var(--space-section-y) 0;
}

/* Optimize spacing for sections following hero sections */
.section.hero-2026 + .section,
.section.hero.investor-hero + .section,
.section.hero.connect-hero + .section,
.section.hero.blog-hero + .section {
    padding-top: var(--space-section-y);
    margin-top: var(--space-section-between);
}

/* Optimize spacing for sections following compact sections */
.section.stats-hero + .section {
    padding-top: var(--space-section-y);
    margin-top: var(--space-section-between);
}

/* Ensure proper spacing between sections with different visual treatments */
.section[class*="bg-"] {
    position: relative;
}

/* Modern section transitions */
.section {
    transition: padding var(--motion-duration-medium) var(--motion-ease-out-2);
}

/* Display/hero heading with subtle gradient ink */
/* Neutralize global gradient display on small screens to avoid odd clipping when centered */
@media (max-width: 600px) {
    .display {
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: initial;
    }
}

/* Strong hero spacing like modern editors */
.hero-2026 .display { font-weight: 900; letter-spacing: -0.025em; }
.hero-2026 .lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); opacity: 0.95; }
.hero-2026 .hero-actions .btn-2026 { border-radius: 999px; }

/* Buttons unified: embrace brand and rounded shapes */
.btn-2026,
.btn,
.btn.primary-btn,
.gradient-btn {
    border-radius: 999px;
    line-height: 1.1;
}

.btn-2026.primary,
.btn.primary,
.btn.primary-btn,
.gradient-btn {
    background: linear-gradient(90deg, var(--brand, #F55722) 0%, rgba(245, 87, 34, 0.85) 100%);
    color: var(--brand-contrast, #ffffff);
    border-color: var(--brand, #F55722);
}

.btn-2026.ghost {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}

.btn-2026:hover,
.btn:hover,
.gradient-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }

/* Cards: softer shadows, larger radii */
.card,
.pillar-card,
.quote-card,
.platform .card {
    border-radius: var(--radius-md, 14px);
    box-shadow: var(--elev-1, 0 6px 24px rgba(0,0,0,0.08));
}

.glass-panel,
.glass-surface,
.glass-surface-strong {
    border-radius: var(--radius-lg, 22px);
}

/* Background floating shapes tuned to brand */
.background-elements .shape {
    background: radial-gradient(circle at 30% 30%, rgba(245, 87, 34, 0.18), rgba(245, 87, 34, 0.06));
}

/* Partners logos consistent tone */
.partners-2026 .logos { min-height: var(--logo-min-height, var(--space-16)); }
.partners-2026 .logos img {
    filter: grayscale(1) contrast(0.9) brightness(0.9);
    opacity: 0.9;
    height: clamp(2.25rem, 6vw, var(--logo-min-height, var(--space-16)));
    width: auto;
    object-fit: contain;
}

/* Links polish */
a { transition: color 0.2s ease, opacity 0.2s ease; }
a:hover { opacity: 0.9; }

/* Inputs (newsletter) */
input[type="email"],
input[type="text"],
input[type="search"],
textarea {
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    border-radius: var(--radius-md, 14px);
    padding: var(--input-padding-y, var(--space-3)) var(--input-padding-x, var(--space-3));
}

/* Focus states */
:focus-visible { 
    outline: none; 
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #F55722) 35%, transparent); 
    border-radius: var(--radius-sm, 8px); 
}

/* Hero device stack elevation */
.device-stack.glass-surface-strong { box-shadow: var(--elev-2, 0 12px 48px rgba(0,0,0,0.14)); }

/* Editorial mosaic: subtle border radii and elevation already defined in home-2026 */
.mosaic .tile { box-shadow: var(--elev-1, 0 6px 24px rgba(0,0,0,0.08)); }

/* Footer newsletter glass card spacing */
.footer-newsletter.glass-panel { 
    padding: var(--space-6, 1.5rem) var(--space-5, 1.25rem); 
}

/* Ensure nav remains glass and elevated */
header.site-header.glass-surface { 
    box-shadow: var(--elev-1, 0 6px 24px rgba(0,0,0,0.08)); 
}


/* ================= Footer Alignment System (token-driven, component-scoped) ================ */
/* Defaults (desktop-first) */
.modern-footer {
    --footer-text-align: left;
    --footer-justify: space-between;
    --footer-items-align: flex-start;
    --footer-bottom-direction: row;
}

/* ================= Connect Page Overrides & Components ================ */

/* Breadcrumbs - Scalable, consistent solution for all pages */
/* Uses design tokens - no hardcoded values */
/* High specificity to override any conflicting styles */
.breadcrumb-container,
body .breadcrumb-container,
html body .breadcrumb-container { 
    padding-top: clamp(var(--space-2), 1vw, var(--space-3)) !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.breadcrumb-container .container-xl,
body .breadcrumb-container .container-xl {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure no spacing between breadcrumb and main/hero sections */
.breadcrumb-container + main,
.breadcrumb-container + main > section,
body .breadcrumb-container + main,
body .breadcrumb-container + main > section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure hero sections don't add extra top spacing after breadcrumb */
main > section.hero-2026:first-child,
main > section.connect-hero:first-child,
main > section.management-hero:first-child,
main > section.booking-hero:first-child {
    margin-top: 0 !important;
}

/* Remove main padding-top on investors, our story, and blog pages */
main > section.investor-hero:first-child,
main > section.hero.connect-hero:first-child,
main > section.connect-hero.hero:first-child,
main > section.hero.blog-hero:first-child {
    margin-top: 0 !important;
}

/* Remove padding-top from main when it directly contains hero sections */
main:has(> section.investor-hero:first-child),
main:has(> section.hero.connect-hero:first-child),
main:has(> section.connect-hero.hero:first-child),
main:has(> section.hero.blog-hero:first-child) {
    padding-top: 0 !important;
}

/* Fallback for browsers that don't support :has() - target main elements directly */
body:has(main > section.investor-hero:first-child) main,
body:has(main > section.hero.connect-hero:first-child) main,
body:has(main > section.connect-hero.hero:first-child) main,
body:has(main > section.hero.blog-hero:first-child) main {
    padding-top: 0 !important;
}

.breadcrumb-container nav,
body .breadcrumb-container nav {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.breadcrumb,
body .breadcrumb-container .breadcrumb,
body .breadcrumb-container nav .breadcrumb { 
    list-style: none !important; 
    display: flex !important; 
    flex-wrap: wrap !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    gap: var(--space-2) !important;
}

.breadcrumb-item,
body .breadcrumb-container .breadcrumb-item {
    display: inline-flex !important; 
    align-items: center !important; 
    color: var(--text-secondary, #666) !important; 
    font-size: clamp(0.875rem, 1vw, 0.9375rem) !important; /* Scalable rem-based sizing */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.breadcrumb-item + .breadcrumb-item::before { 
    content: "/"; 
    display: inline-block; 
    margin: 0 var(--space-2); 
    color: var(--text-tertiary, #888); 
}

.breadcrumb-item a { 
    color: var(--brand, #F55722); 
    text-decoration: none; 
    transition: color var(--motion-duration-fast, 0.2s) ease; 
}

.breadcrumb-item a:hover { 
    color: var(--brand-hover, #FF7A45); 
}

.breadcrumb-item.active { 
    color: var(--text-secondary, #666); 
}

@media (max-width: 768px) { 
    .breadcrumb-container { 
        display: none !important; 
    } 
}

/* Feature Announcement - Badge and list styles */
.badge-new { 
    display: inline-flex; 
    align-items: center; 
    gap: var(--space-2); 
    background: color-mix(in srgb, var(--brand, #F55722) 10%, transparent); 
    color: var(--brand, #F55722); 
    padding: clamp(var(--space-2), 0.8vw, var(--space-3)) clamp(var(--space-3), 1.2vw, var(--space-5)); 
    border-radius: var(--radius-pill); 
    font-weight: 700; 
    font-size: clamp(0.75rem, 0.9vw, 0.875rem); 
    letter-spacing: 0.05em;
    text-transform: uppercase;
    width: fit-content;
}

.announcement-title { 
    font-size: clamp(1.75rem, 3.5vw, 2.5rem); 
    margin: 0;
    color: var(--text-primary, #000); 
    font-weight: 800;
    line-height: var(--lh-tight, 1.2);
    letter-spacing: -0.02em;
}

.announcement-copy { 
    font-size: clamp(1.0625rem, 1.3vw, 1.25rem); 
    line-height: var(--lh-normal, 1.6); 
    color: var(--text-secondary, #333); 
    margin: 0;
    max-width: min(600px, 100%);
}

.announcement-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: grid; 
    gap: clamp(var(--space-3), 1vw, var(--space-4)); 
}

.announcement-list li { 
    display: flex; 
    align-items: flex-start; 
    gap: var(--space-3); 
    line-height: var(--lh-normal, 1.6);
}

.announcement-list i { 
    color: var(--brand, #F55722); 
    margin-top: clamp(2px, 0.3vw, 4px); 
    flex-shrink: 0;
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

.announcement-list span {
    color: var(--text-secondary, #333);
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    line-height: var(--lh-normal, 1.6);
}

.announcement-text .btn-2026 {
    margin-top: var(--space-2);
    width: fit-content;
}

/* Testimonials - Block and heading */
.testimonial-block { margin-bottom: var(--space-8); }
.testimonial-heading { text-align: center; margin-bottom: var(--space-5); font-weight: 700; font-size: clamp(1.25rem, 1.75vw, 1.5rem); }

/* Instagram section - Container styles */
.instagram-feed-container { display: flex; flex-direction: column; align-items: center; text-align: center; }
.elfsight-app-container { 
    width: 100%; 
    max-width: var(--content-max-width, 900px); 
    margin: 0 auto var(--space-5); 
}
.instagram-grid { 
    width: 100%; 
    max-width: var(--content-max-width, 900px); 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(min(15.625rem, 100%), 1fr)); 
    gap: var(--space-grid-gap); 
    margin-top: var(--space-6); 
}
.placeholder-message { width: 100%; padding: var(--space-6); background: var(--surface-muted, #f7f7f8); border-radius: var(--radius-md); text-align: center; color: var(--text-secondary, #333); }
.placeholder-message i { font-size: clamp(2rem, 3vw, 2.5rem); color: var(--brand, #F55722); margin-bottom: var(--space-4); display: block; }

.modern-footer .footer-content { text-align: var(--footer-text-align); }
.modern-footer .footer-links { justify-content: var(--footer-justify); align-items: var(--footer-items-align); }
.modern-footer .link-group { text-align: var(--footer-text-align); }
.modern-footer .footer-bottom .container {
    flex-direction: var(--footer-bottom-direction);
    justify-content: var(--footer-justify);
    align-items: var(--footer-items-align);
    text-align: var(--footer-text-align);
}
.modern-footer .social-icons { justify-content: var(--footer-justify); }
.modern-footer .footer-logo { display: flex; justify-content: var(--footer-justify); }

/* Mobile-first: Footer defaults to centered on mobile */
    .modern-footer {
        --footer-text-align: center;
        --footer-justify: center;
        --footer-items-align: center;
        --footer-bottom-direction: column;
}

/* Desktop: switch to left-aligned layout */
@media (min-width: 601px) {
    .modern-footer {
        --footer-text-align: left;
        --footer-justify: space-between;
        --footer-items-align: flex-start;
        --footer-bottom-direction: row;
    }
}

/* Reduce top spacing for Connect hero without hardcoding */
.connect-hero { padding-top: clamp(var(--space-1), 2vw, var(--space-2)); }
.management-hero {
    /* Inherits all hero-2026 styles from home-2026.css */
    /* Uses standard hero-2026 video background handling via .has-video class */
    /* Add any management-specific overrides here if needed in the future */
}

/* ================= Modernized Connect Page Sections ================ */

/* User Section (Players) - Modern feature cards */
.user-section {
    background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface-muted, #f7f7f8) 100%);
    position: relative;
}

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

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-grid-gap);
    margin-top: var(--space-header-margin);
}

.feature-card {
    background: var(--surface, #fff);
    border-radius: var(--radius-lg);
    padding: var(--space-card-padding);
    box-shadow: var(--elev-1);
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2), box-shadow var(--motion-duration-medium) var(--motion-ease-out-2);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2);
}

.feature-card:hover {
    transform: translateY(calc(var(--space-2) * -1));
    box-shadow: var(--elev-2);
}

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

.feature-card .card-icon {
    width: clamp(48px, 5vw, 64px);
    height: clamp(48px, 5vw, 64px);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--brand, #F55722) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--brand, #F55722);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    transition: all var(--motion-duration-medium) var(--motion-ease-out-2);
}

.feature-card:hover .card-icon {
    background: var(--brand-gradient);
    color: var(--brand-contrast, #fff);
    transform: scale(1.05);
}

.feature-card h3 {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--text-primary, #000);
}

.feature-card p {
    color: var(--text-secondary, #333);
    line-height: var(--lh-normal);
    margin: 0;
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

/* Feature Showcase (How it Works) - Performance Optimized Styles */
/* Note: Main styles are in main.css for better performance */
/* These are theme-specific overrides that maintain performance optimizations */

.feature-showcase {
    /* Performance: content-visibility handled in main.css */
    /* Background override only if needed */
}

.feature-cards-container {
    /* Grid layout optimized in main.css */
    /* Gap and spacing handled in main.css */
}

.feature-card-modern {
    /* Performance optimizations maintained from main.css */
    /* GPU acceleration and containment preserved */
}

.feature-image-wrapper {
    /* Aspect ratio and containment optimized in main.css */
    /* Performance: aspect-ratio prevents layout shifts */
}

.feature-image-wrapper img {
    /* Transform optimizations in main.css */
    /* GPU acceleration via translateZ(0) */
}

.feature-number {
    /* Position and styling optimized in main.css */
    /* GPU acceleration maintained */
}

.feature-content {
    padding: clamp(var(--space-6), 3vw, var(--space-8)) clamp(var(--space-5), 2.5vw, var(--space-7));
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    gap: var(--space-4);
}

.feature-content .feature-number {
    position: relative;
    margin-bottom: var(--space-5);
    align-self: flex-start;
}

.feature-content h3 {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    font-weight: 700;
    margin-bottom: var(--space-5);
    margin-top: 0;
    color: var(--text-primary, #000);
    line-height: var(--lh-tight, 1.3);
}

.feature-content p {
    color: var(--text-secondary, #333);
    line-height: var(--lh-normal, 1.6);
    margin-bottom: 0;
    margin-top: 0;
    flex: 1;
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

.text-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--brand, #F55722);
    font-weight: 600;
    text-decoration: none;
    transition: gap var(--motion-duration-fast) var(--motion-ease-out-2);
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

.text-btn:hover {
    gap: var(--space-3);
}

.text-btn i {
    transition: transform var(--motion-duration-fast) var(--motion-ease-out-2);
}

.text-btn:hover i {
    transform: translateX(4px);
}

/* Organizer Section - Modern step cards */
.organizer-section {
    background: var(--surface, #fff);
    position: relative;
}

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

.simple-steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--space-grid-gap);
    margin-top: var(--space-header-margin);
}

.simple-step-card {
    background: var(--surface, #fff);
    border-radius: var(--radius-lg);
    padding: var(--space-card-padding);
    box-shadow: var(--elev-1);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    transition: all var(--motion-duration-medium) var(--motion-ease-out-2);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.simple-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--brand-gradient);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2);
}

.simple-step-card:hover {
    transform: translateY(calc(var(--space-2) * -1));
    box-shadow: var(--elev-2);
}

.simple-step-card:hover::before {
    transform: scaleY(1);
}

.step-number {
    width: clamp(40px, 5vw, 56px);
    height: clamp(40px, 5vw, 56px);
    background: var(--brand-gradient);
    color: var(--brand-contrast, #fff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: clamp(1.125rem, 1.75vw, 1.5rem);
    margin-bottom: var(--space-4);
    box-shadow: var(--elev-1);
    flex-shrink: 0;
}

.step-image-box {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-4);
    background: var(--surface-muted, #f7f7f8);
}

.step-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-duration-slow) var(--motion-ease-out-2);
}

.simple-step-card:hover .step-image-box img {
    transform: scale(1.08);
}

.simple-step-card h3 {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--text-primary, #000);
}

.simple-step-card p {
    color: var(--text-secondary, #333);
    line-height: var(--lh-normal);
    margin: 0;
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

.organizer-section .text-center {
    margin-top: var(--space-8);
    text-align: center;
}

/* Feature Announcement - Enhanced */
.feature-announcement {
    background: linear-gradient(135deg, var(--surface-muted, #f7f7f8) 0%, var(--surface, #fff) 100%);
    position: relative;
    overflow: hidden;
}

.feature-announcement::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: clamp(300px, 40vw, 500px);
    height: clamp(300px, 40vw, 500px);
    background: radial-gradient(circle, color-mix(in srgb, var(--brand, #F55722) 8%, transparent) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.announcement-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-8), 5vw, var(--space-16));
    align-items: center;
    position: relative;
    z-index: 1;
}

.announcement-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.announcement-image {
    position: relative;
}

.device-frame {
    position: relative;
    background: var(--surface, #fff);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-3), 1.5vw, var(--space-5));
    box-shadow: var(--elev-2);
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2), box-shadow var(--motion-duration-medium) var(--motion-ease-out-2);
}

.announcement-image:hover .device-frame {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    box-shadow: var(--elev-2), 0 0 0 clamp(8px, 1vw, 12px) color-mix(in srgb, var(--brand, #F55722) 8%, transparent);
}

.device-frame img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    object-fit: cover;
}

.floating-badge {
    position: absolute;
    top: clamp(-12px, -1.5vw, -16px);
    right: clamp(-12px, -1.5vw, -16px);
    background: var(--brand-gradient);
    color: var(--brand-contrast, #fff);
    width: clamp(48px, 6vw, 64px);
    height: clamp(48px, 6vw, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: var(--elev-2);
    font-size: clamp(1.125rem, 1.5vw, 1.5rem);
    animation: float 3s ease-in-out infinite;
    z-index: 2;
}

/* Testimonials - Enhanced modern cards */
.testimonial-section {
    background: linear-gradient(180deg, var(--surface-muted, #f7f7f8) 0%, var(--surface, #fff) 100%);
    position: relative;
}

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

.testimonial-card {
    background: var(--surface, #fff);
    border-radius: var(--radius-lg);
    padding: var(--space-card-padding);
    box-shadow: var(--elev-1);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    transition: all var(--motion-duration-medium) var(--motion-ease-out-2);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2);
}

.testimonial-card:hover {
    transform: translateY(calc(var(--space-2) * -1));
    box-shadow: var(--elev-2);
}

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

.quote-icon {
    margin-bottom: var(--space-3);
}

.quote-icon i {
    color: color-mix(in srgb, var(--brand, #F55722) 20%, transparent);
    font-size: clamp(1.5rem, 2vw, 2rem);
}

.testimonial-card:hover .quote-icon i {
    color: var(--brand, #F55722);
}

.quote {
    color: var(--text-secondary, #333);
    font-style: italic;
    line-height: var(--lh-normal);
    margin-bottom: var(--space-4);
    flex: 1;
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

.person-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
}

.avatar {
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: color-mix(in srgb, var(--brand, #F55722) 30%, transparent);
    flex-shrink: 0;
}

.person-meta h4 {
    margin: 0;
    color: var(--text-primary, #000);
    font-weight: 700;
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

.person-meta p {
    margin: 2px 0 0;
    color: var(--text-secondary, #333);
    font-size: clamp(0.875rem, 0.9vw, 0.9375rem);
}

/* FAQ Section - Modern accordion */
.faq-section {
    background: var(--surface, #fff);
    position: relative;
}

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

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-header-margin);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.faq-item {
    background: var(--surface, #fff);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    overflow: hidden;
    transition: all var(--motion-duration-medium) var(--motion-ease-out-2);
}

.faq-item:hover {
    box-shadow: var(--elev-1);
    border-color: color-mix(in srgb, var(--brand, #F55722) 30%, transparent);
}

.faq-question {
    width: 100%;
    padding: var(--space-card-padding);
    background: transparent;
    border: none;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    cursor: pointer;
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    font-weight: 600;
    color: var(--text-primary, #000);
    transition: color var(--motion-duration-fast) var(--motion-ease-out-2);
}

.faq-question:hover {
    color: var(--brand, #F55722);
}

.faq-question i {
    color: var(--brand, #F55722);
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2);
    flex-shrink: 0;
}

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--motion-duration-medium) var(--motion-ease-out-2), padding var(--motion-duration-medium) var(--motion-ease-out-2);
    padding: 0 var(--space-card-padding);
}

.faq-question[aria-expanded="true"] + .faq-answer {
    max-height: 1000px;
    padding: 0 var(--space-card-padding) var(--space-10);
}

.faq-question span {
    flex: 1;
    text-align: left;
}

.faq-answer p {
    color: var(--text-secondary, #333);
    line-height: var(--lh-normal);
    margin: 0 0 var(--space-4) 0;
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

/* Related Products - Modern product cards */
.related-products {
    background: var(--surface-muted, #f7f7f8);
    position: relative;
}

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

.related-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--space-grid-gap);
    margin-top: var(--space-header-margin);
}

.product-card {
    background: var(--surface, #fff);
    border-radius: var(--radius-lg);
    padding: var(--space-card-padding);
    box-shadow: var(--elev-1);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    transition: all var(--motion-duration-medium) var(--motion-ease-out-2);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2);
}

.product-card:hover {
    transform: translateY(calc(var(--space-3) * -1));
    box-shadow: var(--elev-2);
}

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

.product-icon {
    width: clamp(56px, 6vw, 72px);
    height: clamp(56px, 6vw, 72px);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--brand, #F55722) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--brand, #F55722);
    font-size: clamp(1.5rem, 2vw, 2rem);
    transition: all var(--motion-duration-medium) var(--motion-ease-out-2);
}

.product-card:hover .product-icon {
    background: var(--brand-gradient);
    color: var(--brand-contrast, #fff);
    transform: scale(1.1) rotate(5deg);
}

.product-content h3 {
    font-size: clamp(1.25rem, 1.75vw, 1.5rem);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--text-primary, #000);
}

.product-content p {
    color: var(--text-secondary, #333);
    line-height: var(--lh-normal);
    margin-bottom: var(--space-4);
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

.product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.product-features li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-secondary, #333);
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
}

.product-features i {
    color: var(--brand, #F55722);
    flex-shrink: 0;
}

/* Instagram Feed - Enhanced */
.instagram-feed {
    background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface-muted, #f7f7f8) 100%);
    position: relative;
}

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

.instagram-cta {
    margin-top: var(--space-6);
    text-align: center;
}

/* CTA Simple Section - Modern download CTA */
.cta-simple {
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 107, 61, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(232, 74, 28, 0.4) 0%, transparent 50%),
        linear-gradient(135deg, 
            var(--brand, #F55722) 0%, 
            #FF6B3D 30%, 
            #FF8A5C 60%, 
            #E84A1C 100%);
    color: var(--brand-contrast, #fff);
    padding: var(--space-section-y-large) 0;
    position: relative;
    overflow: hidden;
}

.cta-simple::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: clamp(300px, 40vw, 500px);
    height: clamp(300px, 40vw, 500px);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: pulse 8s ease-in-out infinite;
}

.cta-simple::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: clamp(300px, 40vw, 500px);
    height: clamp(300px, 40vw, 500px);
    background: radial-gradient(circle, rgba(255, 138, 92, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: pulse 10s ease-in-out infinite;
}

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

.cta-content {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    max-width: min(900px, 100%);
    margin-inline: auto;
}

.cta-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    margin: 0;
    color: var(--brand-contrast, #fff);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    letter-spacing: -0.025em;
    text-align: center;
    width: 100%;
    line-height: var(--lh-tight, 1.2);
}

.cta-title .accent-gradient {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    position: relative;
}

.cta-title .accent-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-pill);
}

.cta-description {
    font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
    line-height: var(--lh-normal);
    margin: 0;
    opacity: 0.95;
    max-width: min(700px, 100%);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    color: var(--brand-contrast, #fff);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.cta-highlights {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.highlight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    min-width: 120px;
}

.highlight-item i {
    font-size: clamp(1.5rem, 2vw, 2rem);
    color: var(--brand-contrast, #fff);
    opacity: 0.9;
}

.highlight-item span {
    color: var(--brand-contrast, #fff);
    font-weight: 600;
    font-size: clamp(0.9375rem, 1vw, 1rem);
    opacity: 0.95;
}

.app-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    width: 100%;
    margin-top: var(--space-4);
}

/* Modern button styling for CTA section */
.cta-simple .btn-2026.primary {
    background: var(--brand-contrast, #fff);
    color: var(--brand, #F55722);
    border-color: var(--brand-contrast, #fff);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    font-weight: 700;
    padding: clamp(var(--space-4), 1.2vw, var(--space-5)) clamp(var(--space-6), 2vw, var(--space-8));
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2), box-shadow var(--motion-duration-medium) var(--motion-ease-out-2);
}

.cta-simple .btn-2026.primary:hover {
    transform: translateY(calc(var(--space-1) * -1));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    background: var(--brand-contrast, #fff);
    color: var(--brand, #F55722);
}

.cta-simple .btn-2026.primary i {
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2);
}

.cta-simple .btn-2026.primary:hover i {
    transform: translateX(4px);
}

.cta-simple .btn-2026.ghost {
    background: rgba(255, 255, 255, 0.15);
    color: var(--brand-contrast, #fff);
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-weight: 600;
    padding: clamp(var(--space-4), 1.2vw, var(--space-5)) clamp(var(--space-6), 2vw, var(--space-8));
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    transition: all var(--motion-duration-medium) var(--motion-ease-out-2);
}

.cta-simple .btn-2026.ghost:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(calc(var(--space-1) * -1));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    color: var(--brand-contrast, #fff);
}

.cta-simple .btn-2026.ghost i {
    transition: transform var(--motion-duration-medium) var(--motion-ease-out-2);
}

.cta-simple .btn-2026.ghost:hover i {
    transform: scale(1.1);
}

/* Responsive adjustments for CTA section */
@media (max-width: 768px) {
    .cta-simple {
        padding: var(--space-section-y) 0;
    }
    
    .cta-content {
        gap: var(--space-5);
    }
    
    .app-buttons {
        flex-direction: column;
        width: 100%;
        gap: var(--space-3);
    }
    
    .cta-simple .btn-2026.primary,
    .cta-simple .btn-2026.ghost {
        width: 100%;
        justify-content: center;
    }
}

.app-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--surface, #fff);
    color: var(--text-primary, #000);
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-5);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--motion-duration-medium) var(--motion-ease-out-2);
    box-shadow: var(--elev-1);
    font-size: clamp(0.9375rem, 1vw, 1rem);
}

.app-btn:hover {
    transform: translateY(calc(var(--space-2) * -1));
    box-shadow: var(--elev-2);
    color: var(--text-primary, #000);
}

.app-btn i {
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
}

/* Booking Page Specific Styles */
.benefits {
    background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface-muted, #f7f7f8) 100%);
    position: relative;
}

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

.featured-venues {
    background: var(--surface, #fff);
    position: relative;
}

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

.venue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: var(--space-grid-gap);
    margin-top: var(--space-header-margin);
}

.venue-card {
    background: var(--surface, #fff);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--elev-1);
    border: 1px solid var(--border-color, rgba(0,0,0,0.08));
    transition: all var(--motion-duration-medium) var(--motion-ease-out-2);
    display: flex;
    flex-direction: column;
}

.venue-card:hover {
    transform: translateY(calc(var(--space-3) * -1));
    box-shadow: var(--elev-2);
}

.venue-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--surface-muted, #f7f7f8);
}

.venue-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-duration-slow) var(--motion-ease-out-2);
}

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

.venue-badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: var(--brand-gradient);
    color: var(--brand-contrast, #fff);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: var(--elev-1);
}

.venue-details {
    padding: var(--space-card-padding);
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.venue-details h3 {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--text-primary, #000);
}

.venue-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--text-secondary, #333);
    font-size: clamp(0.9375rem, 1vw, 1rem);
    margin-bottom: var(--space-4);
}

.venue-location i {
    color: var(--brand, #F55722);
}

.venue-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.venue-features span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-muted, #f7f7f8);
    border-radius: var(--radius-pill);
    font-size: clamp(0.875rem, 0.95vw, 0.9375rem);
    color: var(--text-secondary, #333);
}

.venue-features i {
    color: var(--brand, #F55722);
}

.view-all {
    margin-top: var(--space-8);
    text-align: center;
}

/* Booking Hero - Uses hero-2026 base styles, only page-specific overrides */
.booking-hero {
    /* Inherits all hero-2026 styles from home-2026.css */
    /* Add any booking-specific overrides here if needed */
}

/* Mobile-first responsive adjustments */
/* Base styles (mobile) are already defined above - grids stack naturally */

/* Tablet and up: enhance layouts */
@media (min-width: 769px) {
    .announcement-content {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: center;
    }
    
    .device-frame {
        transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
    }
    
    .announcement-text {
        padding-right: clamp(var(--space-4), 2vw, var(--space-6));
    }
}

/* Mobile-specific overrides (only when needed) */
@media (max-width: 768px) {
    .announcement-content {
        grid-template-columns: 1fr;
        gap: clamp(var(--space-6), 4vw, var(--space-8));
    }
    
    .announcement-image {
        order: -1;
    }
    
    .device-frame {
        transform: none;
        padding: var(--space-4);
    }
    
    .announcement-text {
        text-align: center;
        align-items: center;
    }
    
    .announcement-text .btn-2026 {
        width: 100%;
        justify-content: center;
    }
    
    .announcement-list {
        text-align: left;
        max-width: min(500px, 100%);
        margin-inline: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-card,
    .feature-card-modern,
    .simple-step-card,
    .testimonial-card,
    .product-card,
    .device-frame,
    .floating-badge {
        transition: none;
        animation: none;
        will-change: auto;
    }
    
    .feature-card:hover,
    .feature-card-modern:hover,
    .simple-step-card:hover,
    .testimonial-card:hover,
    .product-card:hover {
        transform: none;
    }
}

/* Scalable Video Embed Styles - Reusable across all pages */
.video-fallback {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: clamp(var(--space-6), 3vw, var(--space-8));
    border-radius: var(--radius-lg);
    text-align: center;
    z-index: 10;
}

.video-fallback i {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--space-4);
    color: var(--brand, #F55722);
}

.video-fallback p {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    margin-bottom: var(--space-6);
    color: rgba(255, 255, 255, 0.9);
    line-height: var(--lh-normal);
}

.video-fallback .btn-2026 {
    text-decoration: none;
    margin-top: var(--space-2);
}

@media (max-width: 768px) {
    .video-fallback {
        padding: var(--space-5);
    }
    
    .video-fallback i {
        font-size: 2.5rem;
    }
    
    .video-fallback p {
        font-size: 1rem;
        margin-bottom: var(--space-5);
    }
    
    .video-fallback .btn-2026 {
        padding: var(--space-3) var(--space-5);
        font-size: clamp(0.875rem, 2vw, 1rem);
        width: auto;
        max-width: 90%;
    }
}