/* ZABAL Responsive Design System - Complete Breakpoint Coverage
 * 
 * BREAKPOINTS:
 * - Mobile:       375px - 600px
 * - Tablet:       601px - 1024px  
 * - Desktop:      1025px - 1440px
 * - Large:        1441px+
 * - Ultra-wide:   2000px+
 * 
 * SPECIAL CASES:
 * - Landscape mobile (max-height: 500px)
 * - Touch devices (hover: none)
 * - Notched phones (safe-area-inset)
 * - Print styles
 * - Reduced motion (prefers-reduced-motion)
 */

/* ============================================
   RESPONSIVE SPACING TOKENS
   ============================================ */
:root {
    /* Mobile-first spacing scale */
    --space-section-mobile: 3rem;
    --space-section-tablet: 4rem;
    --space-section-desktop: 5rem;
    --space-section-large: 6rem;
    
    /* Container padding by breakpoint */
    --container-padding-mobile: 1rem;
    --container-padding-tablet: 1.5rem;
    --container-padding-desktop: 2rem;
    --container-padding-large: 3rem;
    
    /* Grid gaps responsive */
    --grid-gap-mobile: 1rem;
    --grid-gap-tablet: 1.5rem;
    --grid-gap-desktop: 2rem;
    
    /* Font size scale mobile */
    --text-hero-mobile: 2.5rem;
    --text-hero-tablet: 3.5rem;
    --text-hero-desktop: 4rem;
    --text-hero-large: 4.5rem;
    
    --text-section-title-mobile: 1.75rem;
    --text-section-title-tablet: 2.25rem;
    --text-section-title-desktop: 2.5rem;
}

/* ============================================
   MOBILE FIRST (375px - 600px)
   ============================================ */
@media (max-width: 600px) {
    /* Base Typography */
    html {
        font-size: 14px;
    }
    
    body {
        line-height: 1.5;
    }
    
    h1 {
        font-size: var(--text-hero-mobile);
        line-height: 1.1;
    }
    
    h2 {
        font-size: var(--text-section-title-mobile);
    }
    
    h3 {
        font-size: var(--text-xl);
    }
    
    h4 {
        font-size: var(--text-lg);
    }
    
    /* Container */
    .section-container {
        padding: 0 var(--container-padding-mobile);
        max-width: 100%;
    }
    
    /* Section Spacing */
    .content-section,
    .zabal-section,
    .streaming-section,
    .projects-section,
    .founder-section {
        padding: var(--space-section-mobile) var(--container-padding-mobile);
    }
    
    /* Hero Section Mobile */
    .zabal-hero {
        min-height: 100vh;
        min-height: 100dvh; /* Dynamic viewport height for mobile */
        padding: var(--space-6) var(--container-padding-mobile);
        padding-top: var(--space-12);
    }
    
    .hero-content {
        padding: 0;
    }
    
    .hero-name {
        font-size: var(--text-hero-mobile);
        letter-spacing: -0.03em;
        margin-bottom: var(--space-1);
    }
    
    .hero-title {
        font-size: var(--text-lg);
        margin-bottom: var(--space-2);
    }
    
    .hero-subtitle {
        font-size: var(--text-sm);
        line-height: 1.5;
        margin-bottom: var(--space-4);
    }
    
    .location-badge {
        font-size: var(--text-xs);
        padding: 0.2rem 0.5rem;
        display: block;
        margin-bottom: var(--space-2);
    }
    
    /* Hero Metrics Mobile */
    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
        margin: var(--space-6) 0;
    }
    
    .metric-item {
        padding: var(--space-3);
    }
    
    .metric-number {
        font-size: var(--text-2xl);
    }
    
    .metric-label {
        font-size: var(--text-xs);
    }
    
    /* Hero Actions Mobile */
    .hero-actions {
        flex-direction: column;
        gap: var(--space-3);
        margin: var(--space-6) 0;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-base);
    }
    
    .live-indicator {
        font-size: var(--text-xs);
        padding: 0.2rem 0.4rem;
    }
    
    /* Chain Badges Mobile */
    .hero-chains {
        margin-top: var(--space-4);
    }
    
    .chains-label {
        font-size: var(--text-xs);
        margin-bottom: var(--space-2);
    }
    
    .chain-badges {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-2);
        justify-content: center;
    }
    
    .chain-badge {
        width: auto;
        min-width: 0;
        padding: var(--space-1) var(--space-2);
        flex: 0 0 auto;
    }
    
    .chain-name {
        font-size: var(--text-xs);
    }
    
    .chain-purpose {
        font-size: 0.65rem;
    }
    
    .chain-icon {
        font-size: var(--text-sm);
    }
    
    /* Scroll Indicator Mobile */
    .hero-scroll-indicator {
        bottom: var(--space-4);
    }
    
    .scroll-arrow {
        font-size: var(--text-xl);
    }
    
    .scroll-text {
        font-size: var(--text-xs);
    }
    
    /* Streaming Section Mobile */
    .streaming-content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .stream-sidebar {
        order: 2;
    }
    
    .stream-main {
        order: 1;
    }
    
    /* Twitch Embed Mobile - Critical Fix */
    .stream-embed-container {
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    
    .stream-embed {
        min-height: 250px;
        position: relative;
    }
    
    .stream-embed iframe,
    #twitchEmbed,
    #liveEmbed iframe {
        width: 100% !important;
        height: 250px !important;
        max-width: 100%;
    }
    
    .stream-placeholder {
        min-height: 250px;
        padding: var(--space-4);
    }
    
    .placeholder-icon {
        font-size: var(--text-4xl);
    }
    
    .placeholder-title {
        font-size: var(--text-lg);
    }
    
    .placeholder-subtitle {
        font-size: var(--text-sm);
    }
    
    .placeholder-schedule {
        padding: var(--space-3);
    }
    
    .next-stream,
    .stream-topic {
        flex-direction: column;
        gap: var(--space-1);
        text-align: center;
    }
    
    .placeholder-actions {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .placeholder-actions .btn {
        width: 100%;
    }
    
    /* Stream Controls Mobile */
    .stream-controls {
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
    }
    
    /* Chat Embed Mobile */
    .stream-chat-section {
        margin-top: var(--space-4);
    }
    
    .chat-embed iframe,
    #twitchChat {
        width: 100% !important;
        height: 300px !important;
    }
    
    /* Sidebar Mobile */
    .sidebar-section {
        padding: var(--space-4);
    }
    
    .sidebar-title {
        font-size: var(--text-base);
    }
    
    .schedule-item {
        padding: var(--space-3);
    }
    
    .schedule-topic {
        font-size: var(--text-sm);
    }
    
    .schedule-description {
        font-size: var(--text-xs);
    }
    
    /* Platform Links Mobile */
    .platform-link {
        padding: var(--space-3);
    }
    
    .platform-icon {
        font-size: var(--text-lg);
    }
    
    .platform-name {
        font-size: var(--text-sm);
    }
    
    .platform-desc {
        font-size: var(--text-xs);
    }
    
    /* ZABAL Overview Mobile */
    .narrative-block {
        margin-bottom: var(--space-12);
    }
    
    .block-header {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }
    
    .block-title {
        font-size: var(--text-xl);
    }
    
    .block-icon {
        font-size: var(--text-2xl);
    }
    
    /* Evolution Timeline Mobile */
    .evolution-step {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        text-align: center;
    }
    
    .step-visual {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-3);
    }
    
    .step-icon {
        width: 50px;
        height: 50px;
        font-size: var(--text-xl);
    }
    
    .step-connector {
        width: 40px;
        height: 2px;
    }
    
    .step-title {
        font-size: var(--text-lg);
    }
    
    .step-description {
        font-size: var(--text-sm);
    }
    
    .step-learning {
        font-size: var(--text-xs);
    }
    
    /* Benefits Grid Mobile */
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .benefit-card {
        padding: var(--space-4);
    }
    
    .benefit-header {
        flex-direction: column;
        text-align: center;
        gap: var(--space-2);
    }
    
    .benefit-icon {
        font-size: var(--text-2xl);
    }
    
    .benefit-title {
        font-size: var(--text-base);
    }
    
    .benefit-description {
        font-size: var(--text-sm);
        text-align: center;
    }
    
    .benefit-chains,
    .benefit-features,
    .benefit-stats,
    .benefit-examples {
        justify-content: center;
    }
    
    .badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
    }
    
    /* Projects Gallery Mobile */
    .projects-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .project-card {
        padding: var(--space-4);
        /* Ensure cards don't overflow */
        max-width: 100%;
        overflow: hidden;
    }
    
    .project-card.featured {
        padding: var(--space-5);
    }
    
    /* Prevent text overflow in cards */
    .project-description,
    .project-tagline {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    .project-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .project-icon {
        font-size: var(--text-2xl);
    }
    
    .project-title {
        font-size: var(--text-lg);
    }
    
    .project-tagline {
        font-size: var(--text-sm);
    }
    
    .project-description {
        font-size: var(--text-sm);
    }
    
    .project-metrics {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
    }
    
    .project-metrics .metric-number {
        font-size: var(--text-lg);
    }
    
    .project-metrics .metric-label {
        font-size: 0.65rem;
    }
    
    .project-actions {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .project-actions .btn {
        width: 100%;
    }
    
    /* Founder Identity Mobile */
    .journey-steps {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .journey-step {
        text-align: center;
    }
    
    .journey-connector {
        display: none;
    }
    
    .step-location {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .location-icon {
        font-size: var(--text-2xl);
    }
    
    .location-name {
        font-size: var(--text-lg);
    }
    
    .location-duration {
        font-size: var(--text-xs);
    }
    
    .step-achievements {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .territory-hubs {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .hub-item {
        justify-content: center;
    }
    
    .foundation-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .foundation-card {
        padding: var(--space-4);
    }
    
    .philosophy-pillars {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .pillar-item {
        text-align: center;
    }
    
    .focus-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    
    /* Navigation Mobile */
    .nav-menu {
        padding: var(--space-6) var(--container-padding-mobile);
    }
    
    .nav-header {
        margin-bottom: var(--space-6);
    }
    
    .nav-header h1 {
        font-size: var(--text-3xl);
    }
    
    .nav-header h3 {
        font-size: var(--text-lg);
    }
    
    .nav-header .tagline {
        font-size: var(--text-sm);
        padding: 0 var(--space-2);
    }
    
    .nav-list {
        gap: var(--space-2);
    }
    
    .nav-link {
        font-size: var(--text-lg);
        padding: var(--space-2) var(--space-4);
    }
    
    .social-links {
        gap: var(--space-2);
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .social-links a {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-2);
    }
    
    /* Back Button Mobile */
    .back-button {
        top: var(--space-3);
        left: var(--space-3);
        padding: var(--space-2) var(--space-3);
    }
    
    .back-button span {
        font-size: var(--text-xs);
    }
    
    /* Contact Section Mobile */
    .collaboration-types {
        grid-template-columns: 1fr;
    }
    
    .contact-methods {
        flex-direction: column;
        gap: var(--space-6);
    }
    
    .social-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }
    
    /* Work Experience Mobile */
    .work-grid {
        grid-template-columns: 1fr;
    }
    
    /* Contracts Mobile */
    .contracts-grid {
        grid-template-columns: 1fr;
    }
    
    .contract-address {
        font-size: var(--text-xs);
        word-break: break-all;
    }
    
    /* Community Grid Mobile */
    .community-grid {
        grid-template-columns: 1fr;
    }
    
    /* Overflow Prevention */
    * {
        max-width: 100%;
    }
    
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
    
    pre, code {
        overflow-x: auto;
        word-wrap: break-word;
    }
    
    /* Section title underline fix for mobile */
    .section-title::after {
        width: 40px;
    }
    
    /* Reduce animation intensity on mobile */
    .card:hover,
    .project-card:hover,
    .benefit-card:hover {
        transform: none;
    }
    
    /* Grand Timeline Mobile - Single column stacked */
    .grand-timeline {
        padding: var(--space-4) 0 var(--space-8);
    }
    
    .timeline-header {
        margin-bottom: var(--space-6);
    }
    
    .timeline-title {
        font-size: var(--text-3xl);
    }
    
    .timeline-subtitle {
        font-size: var(--text-base);
    }
    
    .timeline-stats {
        gap: var(--space-4);
        padding: var(--space-4);
    }
    
    .stat-number {
        font-size: var(--text-2xl);
    }
    
    .timeline-legend {
        gap: var(--space-2);
        padding: var(--space-2);
    }
    
    .legend-item {
        font-size: 10px;
        padding: var(--space-1) var(--space-2);
    }
    
    /* Spine moves to left on mobile */
    .spine-line {
        left: 24px;
        transform: none;
    }
    
    /* Cards stack vertically */
    .timeline-card {
        display: flex;
        flex-direction: row;
        gap: var(--space-4);
        padding-left: var(--space-2);
    }
    
    .timeline-card.left .card-content,
    .timeline-card.right .card-content {
        text-align: left;
        flex: 1;
    }
    
    .timeline-card.left .card-header,
    .timeline-card.right .card-header {
        flex-direction: row;
    }
    
    .timeline-card.left .card-tags,
    .timeline-card.right .card-tags {
        justify-content: flex-start;
    }
    
    /* Connectors hidden on mobile - handled in main mobile section below */
    
    .year-marker {
        justify-content: flex-start;
        padding-left: var(--space-2);
    }
    
    .year-marker-text {
        font-size: var(--text-lg);
        padding: var(--space-1) var(--space-4);
    }
    
    /* Year nav mobile */
    .timeline-year-nav {
        padding: var(--space-2) var(--space-3);
    }
    
    .year-nav-inner {
        gap: var(--space-2);
    }
    
    .year-nav-label {
        display: none;
    }
    
    .year-link {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-xs);
    }
    
    .current-era {
        font-size: var(--text-base);
        min-width: 50px;
    }
    
    /* Modal mobile */
    .event-modal-content {
        max-height: 90vh;
        border-radius: var(--radius-xl);
    }
    
    .event-modal-body {
        padding: var(--space-5);
    }
    
    .modal-title {
        font-size: var(--text-2xl);
    }
    
    /* Footer mobile */
    .footer-links {
        gap: var(--space-4);
    }
    
    /* What's New button mobile */
    .whats-new-btn {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-2);
        bottom: var(--space-4);
        right: var(--space-4);
    }
    
    /* Filter bar mobile */
    .timeline-filters {
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
    }
    
    .filter-divider {
        display: none;
    }
    
    .filter-btn {
        padding: var(--space-1) var(--space-2);
        font-size: 10px;
    }
    
    .filter-icon {
        font-size: var(--text-xs);
    }
    
    .filter-count {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    /* MOBILE-FIRST TIMELINE: Single Column, Collapsed Cards */
    
    /* Hide spine and connectors on mobile */
    .spine-line,
    .spine-glow,
    .card-connector {
        display: none !important;
    }
    
    .connector-dot {
        display: none !important;
    }
    
    /* Single-column layout - no alternating */
    .timeline-card {
        display: block;
        grid-template-columns: none;
        padding: 0;
        margin-bottom: var(--space-4);
    }
    
    .timeline-card.left .card-content,
    .timeline-card.right .card-content {
        grid-column: auto;
        text-align: left;
    }
    
    /* Collapsed card state - minimal info */
    .card-content {
        padding: var(--space-4);
        min-height: 44px;
    }
    
    /* Card header - always visible */
    .card-header {
        flex-direction: row;
        margin-bottom: var(--space-2);
    }
    
    .timeline-card.left .card-header {
        flex-direction: row;
    }
    
    /* Mobile typography - scannable */
    .card-date {
        font-size: 12px;
        font-weight: 600;
    }
    
    .card-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: var(--space-2);
        line-height: 1.4;
    }
    
    /* Category - small colored dot + label */
    .card-category {
        font-size: 11px;
        padding: 4px 8px;
        gap: 4px;
    }
    
    /* Collapsed state - hide details by default */
    .card-content:not(.expanded) .card-summary,
    .card-content:not(.expanded) .card-tags,
    .card-content:not(.expanded) .card-location {
        display: none;
    }
    
    /* Expanded state - show all details */
    .card-content.expanded .card-summary {
        display: block;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: var(--space-3);
    }
    
    .card-content.expanded .card-location {
        display: block;
        font-size: 13px;
        margin-bottom: var(--space-2);
    }
    
    .card-content.expanded .card-tags {
        display: flex;
        margin-bottom: var(--space-3);
    }
    
    .card-tag {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    /* Expand button */
    .card-expand {
        font-size: 13px;
        margin-top: var(--space-2);
    }
    
    .card-content.expanded .card-expand::after {
        content: ' ↑';
    }
    
    .card-content:not(.expanded) .card-expand::after {
        content: ' →';
    }
    
    /* Year markers - subtle separators */
    .year-marker {
        padding: var(--space-6) 0 var(--space-3);
    }
    
    .year-marker-text {
        font-size: 18px;
        padding: var(--space-2) var(--space-4);
        border-width: 2px;
    }
    
    /* Hide era markers on mobile */
    .era-marker {
        display: none;
    }
    
    /* Disable scroll animations on mobile */
    .timeline-card,
    .year-marker {
        animation: none !important;
        transition: opacity 0.2s ease;
    }
    
    /* Timeline CTA mobile */
    .timeline-cta {
        padding: var(--space-6) var(--space-4);
        margin-top: var(--space-6);
    }
    
    .cta-text {
        font-size: 14px;
    }
    
    .cta-badge {
        font-size: 12px;
    }
    
    /* Timeline container mobile */
    .timeline-spine-container {
        padding: 0 var(--space-4);
    }
    
    /* Search and filters - compact */
    .timeline-search {
        margin-bottom: var(--space-4);
    }
    
    .search-input {
        font-size: 14px;
        padding: var(--space-3);
    }
}

/* ============================================
   TABLET (600px - 1024px)
   ============================================ */
@media (min-width: 601px) and (max-width: 1024px) {
    html {
        font-size: 15px;
    }
    
    /* Container */
    .section-container {
        padding: 0 var(--container-padding-tablet);
        max-width: 100%;
    }
    
    /* Section Spacing */
    .content-section,
    .zabal-section,
    .streaming-section,
    .projects-section,
    .founder-section {
        padding: var(--space-section-tablet) var(--container-padding-tablet);
    }
    
    /* Hero Tablet */
    .hero-name {
        font-size: var(--text-hero-tablet);
    }
    
    .hero-title {
        font-size: var(--text-2xl);
    }
    
    .hero-subtitle {
        font-size: var(--text-base);
    }
    
    /* Metrics Tablet */
    .metric-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
    }
    
    .metric-number {
        font-size: var(--text-2xl);
    }
    
    /* Hero Actions Tablet */
    .hero-actions {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-4);
    }
    
    .btn-primary,
    .btn-secondary {
        width: auto;
        min-width: 180px;
    }
    
    /* Chain Badges Tablet */
    .chain-badges {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Streaming Tablet */
    .streaming-content {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .stream-embed {
        min-height: 350px;
    }
    
    .stream-embed iframe,
    #twitchEmbed,
    #liveEmbed iframe {
        height: 350px !important;
    }
    
    .stream-placeholder {
        min-height: 350px;
    }
    
    .chat-embed iframe,
    #twitchChat {
        height: 350px !important;
    }
    
    /* Sidebar Tablet - Horizontal Layout */
    .stream-sidebar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }
    
    .sidebar-section {
        padding: var(--space-4);
    }
    
    /* Evolution Timeline Tablet */
    .evolution-step {
        grid-template-columns: auto 1fr;
        gap: var(--space-4);
        text-align: left;
    }
    
    .step-visual {
        flex-direction: column;
    }
    
    .step-connector {
        width: 2px;
        height: 40px;
    }
    
    /* Benefits Grid Tablet */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    /* Projects Grid Tablet */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    .project-card.featured {
        grid-column: span 2;
    }
    
    /* Founder Journey Tablet */
    .journey-steps {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--space-4);
    }
    
    .journey-step {
        flex: 1;
        min-width: 200px;
        max-width: 280px;
    }
    
    .journey-connector {
        display: block;
        align-self: center;
    }
    
    /* Foundation Grid Tablet */
    .foundation-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .foundation-card:last-child {
        grid-column: span 2;
    }
    
    /* Philosophy Pillars Tablet */
    .philosophy-pillars {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-6);
    }
    
    .pillar-item {
        flex: 1;
        max-width: 250px;
    }
    
    /* Navigation Tablet */
    .nav-header h1 {
        font-size: var(--text-4xl);
    }
    
    .nav-link {
        font-size: var(--text-xl);
    }
    
    /* Work Grid Tablet */
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Contracts Grid Tablet */
    .contracts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Community Grid Tablet */
    .community-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Contact Tablet */
    .collaboration-types {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .social-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   DESKTOP (1024px - 1440px)
   ============================================ */
@media (min-width: 1025px) and (max-width: 1440px) {
    html {
        font-size: 16px;
    }
    
    /* Container */
    .section-container {
        padding: 0 var(--container-padding-desktop);
        max-width: 1200px;
        margin: 0 auto;
    }
    
    /* Section Spacing */
    .content-section,
    .zabal-section,
    .streaming-section,
    .projects-section,
    .founder-section {
        padding: var(--space-section-desktop) var(--container-padding-desktop);
    }
    
    /* Hero Desktop */
    .hero-name {
        font-size: var(--text-hero-desktop);
    }
    
    .hero-title {
        font-size: var(--text-3xl);
    }
    
    /* Streaming Desktop */
    .streaming-content {
        grid-template-columns: 2fr 1fr;
        gap: var(--space-8);
    }
    
    .stream-embed {
        min-height: 400px;
    }
    
    .stream-embed iframe,
    #twitchEmbed,
    #liveEmbed iframe {
        height: 400px !important;
    }
    
    .stream-placeholder {
        min-height: 400px;
    }
    
    .chat-embed iframe,
    #twitchChat {
        height: 400px !important;
    }
    
    .stream-sidebar {
        flex-direction: column;
        gap: var(--space-6);
    }
    
    /* Projects Grid Desktop */
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }
    
    .project-card.featured {
        grid-column: span 3;
        display: grid;
        grid-template-columns: 1fr 2fr auto;
        align-items: center;
        gap: var(--space-8);
    }
    
    /* Foundation Grid Desktop */
    .foundation-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .foundation-card:last-child {
        grid-column: auto;
    }
}

/* ============================================
   LARGE DESKTOP (1440px+)
   ============================================ */
@media (min-width: 1441px) {
    html {
        font-size: 17px;
    }
    
    /* Container */
    .section-container {
        padding: 0 var(--container-padding-large);
        max-width: 1400px;
    }
    
    /* Section Spacing */
    .content-section,
    .zabal-section,
    .streaming-section,
    .projects-section,
    .founder-section {
        padding: var(--space-section-large) var(--container-padding-large);
    }
    
    /* Hero Large Desktop */
    .hero-name {
        font-size: var(--text-hero-large);
    }
    
    .hero-content {
        max-width: 900px;
    }
    
    /* Streaming Large Desktop */
    .stream-embed {
        min-height: 500px;
    }
    
    .stream-embed iframe,
    #twitchEmbed,
    #liveEmbed iframe {
        height: 500px !important;
    }
    
    .stream-placeholder {
        min-height: 500px;
    }
    
    .chat-embed iframe,
    #twitchChat {
        height: 500px !important;
    }
    
    /* Metrics Large */
    .metric-number {
        font-size: var(--text-4xl);
    }
    
    /* Benefits Grid Large */
    .benefits-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   ULTRA-WIDE SCREENS (2000px+)
   ============================================ */
@media (min-width: 2000px) {
    .section-container {
        max-width: 1600px;
    }
    
    html {
        font-size: 18px;
    }
}

/* ============================================
   LANDSCAPE MOBILE FIX
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .zabal-hero {
        min-height: auto;
        padding: var(--space-6) var(--container-padding-mobile);
    }
    
    .hero-scroll-indicator {
        display: none;
    }
    
    .nav-menu {
        overflow-y: auto;
    }
    
    .nav-header {
        margin-bottom: var(--space-4);
    }
    
    .nav-list {
        gap: var(--space-1);
    }
    
    .nav-link {
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-base);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .nav-menu,
    .back-button,
    .hero-scroll-indicator,
    .stream-embed,
    .chat-embed,
    .placeholder-actions {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .content-section {
        page-break-inside: avoid;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    .nav-link,
    .platform-link,
    .social-links a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on touch */
    .btn:hover,
    .card:hover,
    .nav-link:hover {
        transform: none;
    }
    
    /* Active states for touch */
    .btn:active {
        transform: scale(0.98);
    }
    
    .card:active {
        background: rgba(224, 221, 170, 0.1);
    }
}

/* ============================================
   SAFE AREA INSETS (Notched Phones)
   ============================================ */
@supports (padding: max(0px)) {
    .nav-menu {
        padding-left: max(var(--container-padding-mobile), env(safe-area-inset-left));
        padding-right: max(var(--container-padding-mobile), env(safe-area-inset-right));
        padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
    }
    
    .back-button {
        left: max(var(--space-3), env(safe-area-inset-left));
    }
    
    .section-container {
        padding-left: max(var(--container-padding-mobile), env(safe-area-inset-left));
        padding-right: max(var(--container-padding-mobile), env(safe-area-inset-right));
    }
}

/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .reveal-hidden {
        opacity: 1;
        transform: none;
    }
    
    .hero-scroll-indicator {
        animation: none;
    }
    
    .live-indicator,
    .badge-live,
    .status-dot.pulsing {
        animation: none;
    }
}