body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    background-color: #ffffff;
    overflow: hidden; /* Prevent body scroll */
    /* cursor: none; */ /* Show default cursor */
}

/* Main horizontal scrolling container */
.horizontal-container {
    display: flex;
    flex-wrap: nowrap;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    /* scroll-behavior: smooth; */ /* Disabled - handled by JS for better control */
    /* scroll-snap-type: x mandatory; */ 
    position: relative; /* Context for children */
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
}

/* Base style for all panels */
.panel {
    flex: 0 0 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    box-sizing: border-box;
    border-right: 1px solid #ffffff;
    scroll-snap-align: start;
    position: relative;
}

/* Specific Panel widths and styles */

.nav-panel {
    width: 250px;
    background-color: #ffffff;
    
}

.header-panel nav {
    flex-direction: column;
    gap: 30px;
}

.header-panel nav a {
    color: #666666;
    text-decoration: underline;
    font-size: 15px;
    font-weight: 600;
}

.header-panel nav a:hover,
.header-panel nav a.force-hover {
    color: #ff0026;
    text-decoration: underline;
}

.header-panel {
    width: 600px;
    background-color: #fff;
    margin-top: 100px;
}

.header-panel h1 {
    font-size: 64px;
    margin: 0 0 20px 0;
    line-height: 1;
    letter-spacing: -2px;
}

.header-panel .subtitle {
    font-size: 24px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.text-panel {
    width: 500px;
    font-size: 20px;
    line-height: 1.4;
    color: #444;
    background-color: #ffffff;
}
.text-panel-hero {
    width: 500px;
    font-size: 20px;
    line-height: 1.4;
    color: #444;
    margin-left: -100px;
    margin-top: 300px;
    background-color: #ffffff00;
}

.text-panel-two {
    width: 700px;
    font-size: 20px;
    line-height: 1.4;
    color: #444;
    margin-left: 300px;
    margin-top: -150px;
    background-color: #ffffff;
}


.text-panel p {
    margin-bottom: 20px;
}

.text-panel a {
    color: #ff0026;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.text-panel img, 
.text-panel-two img, 
.text-panel-hero img, 
.header-panel img,
.image-panel img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08), 0 1.5px 4px rgba(0,0,0,0.04);
    background: #fafaff;
    object-fit: cover;
}

.image-panel img {
    border-radius: 18px;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04);
}

.text-panel-two a {
    color: #ff0026;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.text-panel-hero a {
    color: #ff0026;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.text-panel a:hover,
.text-panel a.force-hover {
    border-bottom-color: #0099ff;
}
.text-panel-hero a:hover,
.text-panel-hero a.force-hover {
    border-bottom-color: #0099ff;
}
.text-panel-two a:hover,
.text-panel-two a.force-hover {
    border-bottom-color: #0099ff;
}

/* Image panel specific */
.image-panel {
    width: auto;
    padding: 0;
    border: none;
    min-width: 600px;
}

.image-panel img {
    height: 100%;
    width: auto;
    object-fit: cover;
    display: block;
}

/* Form Styles */
.email-form {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.email-form input {
    padding: 15px;
    font-size: 16px;
    border: 2px solid #eee;
    border-radius: 8px;
    outline: none;
}

.email-form input:focus {
    border-color: #000;
}

.email-form button {
    padding: 15px;
    font-size: 16px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.email-form button:hover,
.email-form button.force-hover {
    background: #333;
}

.footer-panel {
    font-size: 16px;
    background-color: #fafafa;
    border-right: none;
}

/* Custom scrollbar */
.horizontal-container::-webkit-scrollbar {
    height: 12px;
}

.horizontal-container::-webkit-scrollbar-track {
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.horizontal-container::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 6px;
    border: 3px solid #fff;
}

.horizontal-container::-webkit-scrollbar-thumb:hover {
    background-color: #bbb;
}

/* --- MAGNIFIER STYLES --- */

#cursor-lens {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
    transform: translate(-50%, -50%); /* Center on mouse */
    
    /* Glass Effect Base */
    /* background: rgba(255, 255, 255, 0.1); */
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
    /* backdrop-filter: blur(2px); */
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
    
    
}

/* The Cloned Content Wrapper inside the Lens */
.lens-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    /* This will contain the cloned .horizontal-container */
    /* We ensure it can display flex items just like the real one */
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    
    /* Reset some styles that might conflict */
    overflow: visible; 
    background-color: #fff;
    
    /* Transform Origin is critical for scaling */
    transform-origin: 0 0;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Distortion Overlay */
/* #cursor-lens::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255,255,255,0) 50%, rgba(180, 200, 255, 0.1) 90%, rgba(0,0,0,0.1) 100%);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.05);
    pointer-events: none;
} */
/* Hide the cursor on the real container to encourage looking at the lens? 
   No, usually we want to see what we are pointing at. 
   But the user said "A circular cursor...". Usually this replaces the mouse. */


/* ========== MOBILE RESPONSIVE STYLES ========== */
@media screen and (max-width: 768px) {
    body {
        overflow: auto; /* Enable scrolling on mobile */
        -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
    }

    /* Convert horizontal scroll to vertical scroll */
    .horizontal-container {
        flex-direction: column;
        flex-wrap: wrap;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
        touch-action: pan-y; /* Optimize for vertical touch scrolling */
        will-change: scroll-position;
    }

    /* Base panel adjustments for mobile */
    .panel {
        width: 100% !important;
        min-width: unset !important;
        height: auto;
        min-height: auto;
        padding: 40px 24px;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        transform: translateZ(0); /* Hardware acceleration for smoother scroll */
    }

    /* Nav panel */
    .nav-panel {
        width: 100% !important;
        padding: 20px 24px;
    }

    /* Header panel */
    .header-panel {
        width: 100% !important;
        margin-top: 0;
        padding-top: 40px;
    }

    .header-panel h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .header-panel .subtitle {
        font-size: 18px;
    }

    .header-panel nav {
        gap: 20px;
    }

    /* Text panels */
    .text-panel,
    .text-panel-hero,
    .text-panel-two {
        width: 100% !important;
        margin-left: 0;
        margin-top: 0;
        font-size: 18px;
        padding: 40px 24px;
    }

    .text-panel-hero {
        margin-top: 0;
    }

    .text-panel-two {
        margin-top: 0;
    }

    /* Image panel */
    .image-panel {
        width: 100% !important;
        min-width: unset !important;
        padding: 20px 24px;
        height: auto;
    }

    .image-panel img {
        width: 100%;
        height: auto;
        max-height: 70vh;
        object-fit: cover;
    }

    /* Form adjustments */
    .email-form {
        margin-top: 20px;
    }

    .email-form input,
    .email-form button {
        padding: 14px;
        font-size: 16px;
    }

    /* Footer */
    .footer-panel {
        padding: 40px 24px;
    }

    /* Hide the magnifying lens on mobile */
    #cursor-lens {
        display: none !important;
    }

    /* Images responsive */
    .text-panel img,
    .text-panel-two img,
    .text-panel-hero img,
    .header-panel img {
        max-width: 100%;
        height: auto;
        margin-top: 16px;
        margin-bottom: 16px;
        transform: translateZ(0); /* Hardware acceleration */
        backface-visibility: hidden;
    }

    /* Video responsive */
    .text-panel div[style*="padding-bottom:56.25%"] {
        margin-bottom: 16px;
    }

    /* Hide custom scrollbar on mobile */
    .horizontal-container::-webkit-scrollbar {
        display: none;
    }
}

/* Smaller mobile screens */
@media screen and (max-width: 480px) {
    .panel {
        padding: 32px 20px;
    }

    .header-panel h1 {
        font-size: 36px;
    }

    .header-panel .subtitle {
        font-size: 16px;
    }

    .text-panel,
    .text-panel-hero,
    .text-panel-two {
        font-size: 16px;
        padding: 32px 20px;
    }

    .header-panel nav a {
        font-size: 14px;
    }

    .email-form input,
    .email-form button {
        padding: 12px;
        font-size: 15px;
    }
}