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

html {
    overscroll-behavior-y: none;
}

body {
    width: 100%;
    background-color: #161616;
    position: relative;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior-y: none;
}

/* Page transition overlay - for smooth fade transitions between pages and on viewport resize */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #161616;
    z-index: 99999;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.page-transition-overlay.fade-out {
    opacity: 0;
}

.page-transition-overlay.fade-in {
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

/* Main content container */
.content-container {
    width: 100%;
    min-height: 100vh; /* Base height, JS controls scroll limit dynamically */
    position: relative;
    background-color: #161616;
    pointer-events: none;
}

.content-container * {
    pointer-events: auto;
}

/* Hero section */
.hero-section {
    width: 100%;
    height: 100vh;
    position: relative;
}

/* Top blur overlay - glassmorphism effect for elements above horizontal line */
.top-blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 78px; /* 80px minus 2px so horizontal line isn't covered */
    background-color: rgba(22, 22, 22, 0.7); /* #161616 at 70% opacity */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 150; /* Above footer (100) but below navigation (200) */
    pointer-events: none;
    opacity: 0; /* Hidden by default, shown via JS during timeline segment */
    transition: opacity 0.3s ease;
}

/* Background overlay for fade to black effect */
.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: -5px;
    background-color: #161616;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    will-change: opacity;
}

/* Background layers for smooth cross-fade */
.background-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: -5px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    opacity: 1;
}

#background2 {
    background-image: url('Images/Background 2.png');
}

/* Fractal Glass Effect Canvas */
#fractalGlassCanvas {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: -5px;
    width: auto;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

/* Background 4 - appears during "better" animation */
.background-4 {
    background-image: url('Images/Background 4.png');
    opacity: 0;
    z-index: 1; /* Above background overlay, below lines and text */
    will-change: opacity;
}

/* Outer box with backdrop blur effect */
/* Centered vertically at 40px (middle of 80px gap above horizontal line) */
.button-outer {
    position: fixed;
    top: 23px;
    left: 21px;
    width: 67px;
    height: 34px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 7px;
    display: flex;
    align-items: center;
    padding: 4px;
    transition: width 0.3s ease;
    overflow: hidden;
    z-index: 200;
}

/* Expanded state */
.button-outer.expanded {
    width: 227px;
}

/* White highlight box that moves */
.button-highlight {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 45px;
    height: 26px;
    background-color: white;
    border-radius: 4px;
    transition: transform 0.3s ease, width 0.3s ease;
    z-index: 1;
}

/* Menu items */
.menu-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    z-index: 2;
    cursor: pointer;
    flex-shrink: 0;
}

.menu-item[data-item="home"] {
    width: 45px;
}

.menu-item[data-item="research"],
.menu-item[data-item="purpose"] {
    opacity: 0;
    width: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, width 0.3s ease;
    margin-left: 0;
}

.button-outer.expanded .menu-item[data-item="research"],
.button-outer.expanded .menu-item[data-item="purpose"] {
    opacity: 1;
    pointer-events: auto;
}

.button-outer.expanded .menu-item[data-item="research"] {
    width: 74px;
    margin-left: 8px;
}

.button-outer.expanded .menu-item[data-item="purpose"] {
    width: 66px;
    margin-left: 8px;
}

/* Text styling */
.menu-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    color: black;
    text-align: center;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.menu-item[data-item="research"] .menu-text,
.menu-item[data-item="purpose"] .menu-text {
    color: white;
}

.menu-item.active .menu-text {
    color: black;
}

.menu-item:not(.active) .menu-text {
    color: white;
}

/* Arrow container */
.button-arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    margin-right: 4px;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
}

.button-outer.expanded .button-arrow {
    margin-left: 8px;
    margin-right: 4px;
}

.arrow-right,
.arrow-left {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.arrow-right {
    opacity: 0.3;
}

.arrow-left {
    opacity: 0;
}

.button-outer.expanded .arrow-right {
    opacity: 0;
}

.button-outer.expanded .arrow-left {
    opacity: 0.3;
}

/* Logo centered horizontally, aligned with buttons vertically */
.logo-container {
    position: fixed;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
}

.logo {
    height: 38px;
    width: auto;
    object-fit: contain;
}

/* CONTACT Button in top-right corner */
.contact-button {
    position: fixed;
    top: 28px;
    right: 21px;
    width: 72px;
    height: 26px;
    background-color: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.contact-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    color: black;
    display: flex;
}

.contact-text span {
    display: inline-block;
    /* No transition - handled by JS for better performance */
}

/* Hide mobile/iPad menu elements on desktop */
.menu-panel,
.menu-dim-overlay,
.menu-separator-line,
.mobile-menu-text {
    display: none;
}

/* Hero text wrapper - clips vertical overflow for reveal animation */
.hero-text-wrapper {
    position: fixed;
    left: 70px;
    bottom: 115px;
    z-index: 2;
    overflow: hidden;
}

/* Main text content */
.main-text {
    font-family: 'Outfit', sans-serif;
    font-size: 60px;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #FFFFFF 0%, #D4D1D0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    /* Initial state: hidden below */
    transform: translateY(105%);
    transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: transform;
}

/* Revealed state */
.main-text.revealed {
    transform: translateY(0);
}

/* Hero button wrapper - clips horizontal overflow for reveal animation */
.hero-button-wrapper {
    position: fixed;
    left: 70px;
    bottom: 45px;
    z-index: 2;
    overflow: hidden;
}

/* Join Waitlist Button */
.waitlist-button {
    padding: 11.2px 22.4px;
    font-family: 'Roboto Mono', monospace;
    font-size: 11.2px;
    font-weight: 300;
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    /* Initial state: hidden to the left */
    transform: translateX(-105%);
    transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1), background-color 0.3s ease;
    will-change: transform;
}

/* Revealed state */
.waitlist-button.revealed {
    transform: translateX(0);
}

.waitlist-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Mobile Hero Button wrapper - hidden by default, shown on mobile */
.mobile-hero-button-wrapper {
    display: none;
}

/* Mobile Hero Button - hidden by default, shown on mobile */
.mobile-hero-button {
    display: none;
}

/* Expanding grid lines - GPU accelerated */
.grid-line-vertical {
    position: fixed;
    left: 125px;
    bottom: 0;
    width: 2px;
    height: 0;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 150; /* Above footer (100) but below navigation (200) */
    pointer-events: none;
    will-change: height, bottom;
    contain: layout style;
}

.grid-line-horizontal {
    position: fixed;
    left: 0;
    bottom: 115px;
    width: 0;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 150; /* Above footer (100) but below navigation (200) */
    pointer-events: none;
    will-change: width, bottom;
    contain: layout style;
}

/* Center vertical line - extends down from middle of horizontal line */
.grid-line-vertical-center {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 2px;
    height: 0;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 150; /* Above footer (100) but below navigation (200) */
    pointer-events: none;
    will-change: height, top, background;
    contain: layout style;
}

/* Product section horizontal lines - extend from center */
.product-line-left,
.product-line-right {
    position: fixed;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 150;
    pointer-events: none;
    width: 0;
}

.product-line-left {
    right: 50%;
}

.product-line-right {
    left: 50%;
}

/* Next section - image with masked rounded corners */
.next-section {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    overflow: hidden;
    background-color: #1a1f2e; /* Match image edge color to fill gaps */
}

/* Top edge */
.next-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #161616;
    z-index: 1;
}

/* Bottom edge */
.next-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #161616;
    z-index: 3;
}

/* Product image fills the section */
.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}

/* Dark overlay on product image (50% darker) */
.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

/* Product section content container */
.product-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

/* Product section text */
.product-text {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(32px, 4.62vw, 60px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    color: white;
    text-align: center;
    margin-bottom: 20px;
}

/* Pre-order button */
.preorder-button {
    padding: 11.2px 22.4px;
    font-family: 'Roboto Mono', monospace;
    font-size: 11.2px;
    font-weight: 300;
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.preorder-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Footer section - positioned below product section */
.footer-section {
    position: fixed;
    left: 0;
    top: 100vh; /* Start below viewport, JS will position it */
    width: 100%;
    height: 100vh;
    background-color: #161616;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0;
    margin-top: 0;
    opacity: 0; /* Hidden by default, shown via JS */
}

/* Line at top of footer (appears as bottom line of product image) */
.footer-top-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 101;
}

/* Rounded top edge for footer */
.footer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #161616;
    border-radius: 50px 50px 0 0;
}

/* Matrix text container with video */
.matrix-text-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 1600px;
    pointer-events: none;
}

/* SVG that contains the masked video */
.matrix-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* WebGL canvas for liquid silk animation */
.matrix-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Footer grid lines */
.footer-line-horizontal-1 {
    position: absolute;
    left: 0;
    top: calc(620px - 135px); /* Bottom of SVG text area - offset */
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.footer-line-horizontal-2 {
    position: absolute;
    left: 0;
    top: calc(620px - 135px + 295px); /* First line + 295px */
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.footer-line-vertical-left {
    position: absolute;
    left: 50px;
    top: calc(620px - 135px); /* Same as first horizontal line */
    width: 2px;
    height: 100vh; /* Extend to bottom of viewport */
    background-color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.footer-line-vertical-right {
    position: absolute;
    right: 50px;
    top: calc(620px - 135px); /* Same as first horizontal line */
    width: 2px;
    height: 100vh; /* Extend to bottom of viewport */
    background-color: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* Footer content */
.footer-content {
    position: absolute;
    top: calc(620px - 135px + 30px); /* 30px below upper horizontal line */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: auto;
    z-index: 10;
}

.footer-column-left {
    margin-left: calc(50px + 40px); /* 40px right of left vertical line */
    pointer-events: auto;
    position: relative;
    z-index: 20;
}

.footer-column-right {
    margin-right: calc(50px + 40px); /* 40px left of right vertical line */
    text-align: right;
}

.footer-heading {
    font-family: 'Roboto Mono', monospace;
    font-size: 15px;
    font-weight: 400;
    color: #6E6C6C;
    letter-spacing: -0.01em;
    margin-bottom: 12px; /* Same spacing as Connect to social icons */
}

.footer-link {
    font-family: 'Outfit', sans-serif;
    font-size: 25px;
    font-weight: 300;
    color: #ffffff;
    letter-spacing: -0.01em;
    margin-bottom: 9px; /* Reduced by 40% from 15px */
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 20;
    display: block;
    width: fit-content; /* Width matches text content */
    text-decoration: none;
    transition: color 0.3s ease-out;
}

/* Animated underline */
.footer-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    /* Log-like easing: fast start, slow finish */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Entering: expand from left to right */
.footer-link.entering::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Leaving: contract from left to right (left edge moves right) */
.footer-link.leaving::after {
    transform: scaleX(0);
    transform-origin: right;
}

/* Grey out other links when one is hovered (controlled via JS) */
.footer-link.dimmed {
    color: #2b2b2b !important;
}

.footer-link:visited {
    color: #ffffff;
}

.footer-link:visited.dimmed {
    color: #2b2b2b !important;
}

.footer-link:last-child {
    margin-bottom: 0;
}

.footer-social {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.social-icon {
    width: 27px;
    height: auto;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.social-icon:hover {
    opacity: 1;
}

.footer-legal {
    position: absolute;
    right: calc(50px + 40px);
    top: calc(620px - 135px + 295px - 30px);
    transform: translateY(-100%);
    text-align: right;
}

.footer-legal-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 15px;
    font-weight: 300;
    color: #6E6C6C;
    letter-spacing: -0.01em;
    margin-bottom: 7px;
}

.footer-legal-text:last-child {
    margin-bottom: 0;
}

/* Section text that fades in */
.section-text {
    position: fixed;
    left: 225px; /* 125px (vertical line) + 100px */
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Outfit', sans-serif;
    font-size: clamp(32px, 4.5vw, 60px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.01em; /* -1% */
    z-index: 3;
    pointer-events: none;
    will-change: transform;
    contain: layout style;
}

.section-text .word {
    color: rgba(43, 43, 43, 0); /* Start invisible, fade to #2b2b2b, then to #FFFFFF */
}

/* Letters inside deletable words inherit color from parent */
.fade-letter {
    color: inherit;
}

/* Better text - inherits section-text positioning, no extra styles needed */

.better-letter {
    color: rgba(255, 255, 255, 0); /* Start invisible, fade in via JS */
}

/* Chevron container - positioned 25px up and right of "testing" */
.chevron {
    position: fixed;
    z-index: 3;
    pointer-events: none;
    width: 30px;
    height: 30px;
}

/* Chevron lines - form a corner bracket ┐ shape */
/* Horizontal line expands from right to left */
.chevron-line-horizontal {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Vertical line expands from top to bottom */
.chevron-line-vertical {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 0;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Timeline section text */
.timeline-text {
    position: fixed;
    left: 125px; /* Aligned with vertical line */
    max-width: calc(50vw - 125px - 100px); /* Prevent collision with center line */
    z-index: 1; /* Below horizontal line (2) and blur overlay (5) */
    pointer-events: none;
    will-change: top;
    contain: layout style;
}

.timeline-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(24px, 2.5vw, 35px);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: white;
    margin-bottom: 12px;
}

/* Timeline title letter animation */
.title-letter {
    opacity: 0;
    /* Transition set dynamically via JS for animation, none for hide */
}

.title-letter.visible {
    opacity: 1;
}

/* Timeline subtitle word animation */
.subtitle-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px);
    /* Transition durations set dynamically via JS */
}

.subtitle-word.visible {
    opacity: 1;
    transform: translateY(0);
}

.timeline-subtitle {
    font-family: 'Roboto Mono', monospace;
    font-size: clamp(14px, 1.3vw, 18px);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: #ADADAD;
    margin-bottom: 27px;
}

/* Responsive line break - block at large viewports, inline at small */
.break-line {
    display: block;
}

@media (max-width: 1400px) {
    .break-line {
        display: inline;
    }
}

/* Timeline image wrapper - contains image container and border */
.timeline-image-wrapper {
    position: relative;
    left: -145px; /* Position so image left edge is -20px from viewport (125px - 145px = -20px) */
    width: calc(50vw - 80px); /* From -20px to (50vw - 100px) */
}

/* Timeline image with gradient fade and 3D depth effect */
.timeline-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.timeline-image {
    width: 110%; /* Slightly larger to allow parallax movement */
    height: auto;
    display: block;
    transition: transform 0.15s ease-out;
    transform: translate(-5%, -5%); /* Center the oversized image */
    pointer-events: auto;
}

/* Left gradient fade - 35% of image width, solid edge fading inward (90% opacity) */
.timeline-image-gradient-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 35%;
    height: 100%;
    background: linear-gradient(to right, rgba(22, 22, 22, 0.9) 0%, rgba(22, 22, 22, 0.9) 40%, transparent 100%);
    pointer-events: none;
    z-index: 3;
}

/* Bottom gradient fade - 30% of image height, solid edge fading upward */
.timeline-image-gradient-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, transparent 0%, #161616 60%, #161616 100%);
    pointer-events: none;
    z-index: 3;
}

/* Timeline 1 border - top (extends from right to left) */
.timeline-border-top {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 59%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* Timeline 1 border - right (extends from top to bottom) */
.timeline-border-right {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 51%, transparent 77%);
    pointer-events: none;
    z-index: 2;
}

/* Timeline section 2 - Test often (right side) */
.timeline-text-2 {
    position: fixed;
    left: calc(50% + 100px); /* 100px right of center line */
    max-width: calc(50vw - 100px - 50px); /* Prevent overflow on right */
    z-index: 1; /* Below horizontal line (2) and blur overlay (5) */
    pointer-events: none;
    will-change: top;
    contain: layout style;
}

.timeline-title-2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(24px, 2.5vw, 35px);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: white;
    margin-bottom: 12px;
}

.timeline-subtitle-2 {
    font-family: 'Roboto Mono', monospace;
    font-size: clamp(14px, 1.3vw, 18px);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: #ADADAD;
    margin-bottom: 27px;
}

/* Timeline 2 image wrapper - contains image container and border */
.timeline-image-wrapper-2 {
    position: relative;
    width: calc(50vw - 80px); /* Same width as Timeline 1 */
}

/* Timeline 2 image - right side, mirrored from Timeline 1 */
.timeline-image-container-2 {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.timeline-image-2 {
    width: 110%;
    height: auto;
    display: block;
    transition: transform 0.15s ease-out;
    transform: translate(-5%, -5%);
    pointer-events: auto;
}

/* Right gradient fade - mirrored from left gradient */
.timeline-image-gradient-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
    height: 100%;
    background: linear-gradient(to left, rgba(22, 22, 22, 0.9) 0%, rgba(22, 22, 22, 0.9) 40%, transparent 100%);
    pointer-events: none;
    z-index: 3;
}

/* Bottom gradient fade for Timeline 2 */
.timeline-image-gradient-bottom-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, transparent 0%, #161616 60%, #161616 100%);
    pointer-events: none;
    z-index: 3;
}

/* Timeline 2 border - top (extends from left to right) */
.timeline-border-top-2 {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 59%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* Timeline 2 border - left (extends from top to bottom) */
.timeline-border-left-2 {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 51%, transparent 77%);
    pointer-events: none;
    z-index: 2;
}

/* Timeline section 3 - Test everything (left side, below Timeline 2) */
.timeline-text-3 {
    position: fixed;
    left: 125px; /* Same as Timeline 1 - aligned with vertical line */
    max-width: calc(50vw - 125px - 120px); /* Tighter constraint to prevent 3-line wrap */
    z-index: 1; /* Below horizontal line (2) and blur overlay (5) */
    pointer-events: none;
    will-change: top;
    contain: layout style;
}

.timeline-title-3 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(24px, 2.5vw, 35px);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: white;
    margin-bottom: 12px;
}

.timeline-subtitle-3 {
    font-family: 'Roboto Mono', monospace;
    font-size: clamp(14px, 1.3vw, 18px);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: #ADADAD;
    margin-bottom: 27px;
}

/* Timeline 3 image wrapper - contains image container and border */
.timeline-image-wrapper-3 {
    position: relative;
    left: -145px; /* Same as Timeline 1 */
    width: calc(50vw - 80px);
}

/* Scale wrapper for responsive carousel - scale applied via JS */
.carousel-scale-wrapper {
    transform-origin: left top;
    /* Base dimensions before scaling - JS will adjust */
    width: 637px; /* carousel width (567) + margin (70) */
    height: 776px; /* carousel height (621) + margins (55) + padding (100) */
}

/* 3D Carousel for Timeline 3 */
.carousel-3d-container {
    position: relative;
    perspective: 1620px;
    perspective-origin: 50% 50%;
    width: 567px;
    height: 621px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    margin-left: 70px;
    margin-top: 55px;
    padding-bottom: 100px;
    box-sizing: content-box;
}

.carousel-3d-container:active {
    cursor: grabbing;
}

.carousel-3d-scene {
    width: 270px; /* 10% smaller: 300 * 0.9 */
    height: 405px; /* 10% smaller: 450 * 0.9 */
    position: relative;
    transform-style: preserve-3d;
    transform: rotateZ(10deg) rotateY(0deg);
    pointer-events: none;
}

.carousel-3d-card {
    position: absolute;
    width: 270px; /* 10% smaller: 300 * 0.9 */
    height: 405px; /* 10% smaller: 450 * 0.9 */
    left: 50%;
    top: 50%;
    margin-left: -135px;
    margin-top: -203px;
    transform-style: preserve-3d;
    pointer-events: none;
}

/* Position each card in the cylinder with helix stagger (9 cards, 40deg apart, radius 146px, stagger 30px) */
.carousel-3d-card[data-index="0"] {
    transform: rotateY(0deg) translateZ(146px) translateY(-120px) rotateY(90deg);
}
.carousel-3d-card[data-index="1"] {
    transform: rotateY(40deg) translateZ(146px) translateY(-90px) rotateY(90deg);
}
.carousel-3d-card[data-index="2"] {
    transform: rotateY(80deg) translateZ(146px) translateY(-60px) rotateY(90deg);
}
.carousel-3d-card[data-index="3"] {
    transform: rotateY(120deg) translateZ(146px) translateY(-30px) rotateY(90deg);
}
.carousel-3d-card[data-index="4"] {
    transform: rotateY(160deg) translateZ(146px) translateY(0px) rotateY(90deg);
}
.carousel-3d-card[data-index="5"] {
    transform: rotateY(200deg) translateZ(146px) translateY(30px) rotateY(90deg);
}
.carousel-3d-card[data-index="6"] {
    transform: rotateY(240deg) translateZ(146px) translateY(60px) rotateY(90deg);
}
.carousel-3d-card[data-index="7"] {
    transform: rotateY(280deg) translateZ(146px) translateY(90px) rotateY(90deg);
}
.carousel-3d-card[data-index="8"] {
    transform: rotateY(320deg) translateZ(146px) translateY(120px) rotateY(90deg);
}

.carousel-3d-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    pointer-events: none;
}

/* Overlay gradient on cards */
.carousel-3d-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%, rgba(0,0,0,0.2) 100%);
    border-radius: 12px;
    pointer-events: none;
}

/* Shine effect on cards */
.carousel-3d-card-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    border-radius: 12px;
    pointer-events: none;
}

/* Card shadow and border */
.carousel-3d-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255,255,255,0.08);
    pointer-events: none;
}

/* Cursor follower text - COMMENTED OUT */
/* .cursor-text {
    position: fixed;
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9999;
    background: linear-gradient(90deg,
        #888888 0%,
        #AAAAAA 25%,
        #888888 50%,
        #AAAAAA 75%,
        #888888 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: waveGradient 2s linear infinite;
    mix-blend-mode: difference;
    filter: invert(1);
}

@keyframes waveGradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
} */

/* Mobile-specific elements - hidden on desktop */
.mobile-grid-line-vertical,
.mobile-grid-line-horizontal,
.mobile-section-text,
.mobile-better-text,
.mobile-chevron,
.mobile-timeline-text,
.mobile-product-section,
.mobile-footer,
.mobile-matrix-text-container,
.mobile-menu-text {
    display: none;
}


/* Large desktop scaling - 1500px+ */
/* Nav elements: +75% at 2500px, formula: calc(BASE * -0.125 + BASE * 0.075vw) */
/* Hero elements: +65% at 2500px, formula: calc(BASE * 0.025 + BASE * 0.065vw) */
@media (min-width: 1500px) {
    /* Menu bar scaling - 75% growth */
    .button-outer {
        top: calc(-2.875px + 1.725vw); /* 23px base */
        left: calc(-2.625px + 1.575vw); /* 21px base */
        width: calc(-8.375px + 5.025vw); /* 67px base */
        height: calc(-4.25px + 2.55vw); /* 34px base */
        border-radius: calc(-0.875px + 0.525vw); /* 7px base */
        padding: calc(-0.5px + 0.3vw); /* 4px base */
    }

    .button-highlight {
        left: calc(-0.5px + 0.3vw); /* 4px base */
        top: calc(-0.5px + 0.3vw); /* 4px base */
        width: calc(-5.625px + 3.375vw); /* 45px base */
        height: calc(-3.25px + 1.95vw); /* 26px base */
        border-radius: calc(-0.5px + 0.3vw); /* 4px base */
    }

    .menu-item {
        height: calc(-3.25px + 1.95vw); /* 26px base */
    }

    .menu-item[data-item="home"] {
        width: calc(-5.625px + 3.375vw); /* 45px base */
    }

    .button-outer.expanded {
        width: calc(-28.375px + 17.025vw); /* 227px base */
    }

    .button-outer.expanded .menu-item[data-item="research"] {
        width: calc(-9.25px + 5.55vw); /* 74px base */
        margin-left: calc(-1px + 0.6vw); /* 8px base */
    }

    .button-outer.expanded .menu-item[data-item="purpose"] {
        width: calc(-8.25px + 4.95vw); /* 66px base */
        margin-left: calc(-1px + 0.6vw); /* 8px base */
    }

    .menu-text {
        font-size: calc(-1.5px + 0.9vw); /* 12px base */
    }

    /* Arrow scaling - 75% growth (size only, margins stay fixed for positioning) */
    .button-arrow {
        width: calc(-1.25px + 0.75vw); /* 10px base */
        height: calc(-1.25px + 0.75vw); /* 10px base */
    }

    /* Logo scaling - 75% growth */
    .logo-container {
        top: calc(-2.75px + 1.65vw); /* 22px base */
    }

    .logo {
        height: calc(-4.75px + 2.85vw); /* 38px base */
    }

    /* Top blur overlay - scales with logo (75% growth) */
    .top-blur-overlay {
        height: calc(-9.75px + 5.85vw); /* 78px base */
    }

    /* Contact button scaling - 75% growth */
    .contact-button {
        top: calc(-3.5px + 2.1vw); /* 28px base */
        right: calc(-2.625px + 1.575vw); /* 21px base */
        width: calc(-9px + 5.4vw); /* 72px base */
        height: calc(-3.25px + 1.95vw); /* 26px base */
        border-radius: calc(-0.5px + 0.3vw); /* 4px base */
    }

    .contact-text {
        font-size: calc(-1.5px + 0.9vw); /* 12px base */
    }

    /* Hero text wrapper scaling - 65% growth */
    .hero-text-wrapper {
        left: calc(1.75px + 4.55vw); /* 70px base */
        bottom: calc(2.875px + 7.475vw); /* 115px base */
    }

    /* Hero text scaling - 65% growth */
    .main-text {
        font-size: calc(1.5px + 3.9vw); /* 60px base */
        line-height: calc(1.5px + 3.9vw); /* 60px base */
    }

    /* Hero button wrapper scaling - 65% growth */
    .hero-button-wrapper {
        left: calc(1.75px + 4.55vw); /* 70px base */
        bottom: calc(1.125px + 2.925vw); /* 45px base */
    }

    /* Waitlist button scaling - 65% growth */
    .waitlist-button {
        padding: calc(0.28px + 0.728vw) calc(0.56px + 1.456vw); /* 11.2px 22.4px base */
        font-size: calc(0.28px + 0.728vw); /* 11.2px base */
        border-radius: calc(0.175px + 0.455vw); /* 7px base */
    }

    /* Section text "We're making biomarker..." - 65% growth */
    /* Left position scales proportionally to maintain visual ratio from 1400px */
    .section-text {
        left: calc(5.625px + 14.625vw); /* 225px base, scales proportionally */
        font-size: calc(1.5px + 3.9vw); /* 60px base, matches hero text scaling */
    }

    /* Chevron scaling - 65% growth */
    .chevron {
        width: calc(0.75px + 1.95vw); /* 30px base */
        height: calc(0.75px + 1.95vw); /* 30px base */
    }

    .chevron-line-horizontal {
        height: calc(0.05px + 0.13vw); /* 2px base */
    }

    .chevron-line-vertical {
        width: calc(0.05px + 0.13vw); /* 2px base */
    }

    /* Timeline section scaling - 65% growth */
    /* Timeline 1 - left side */
    .timeline-text {
        left: calc(3.125px + 8.125vw); /* 125px base */
    }

    .timeline-title {
        font-size: calc(0.875px + 2.275vw); /* 35px base (clamp max) */
        margin-bottom: calc(0.3px + 0.78vw); /* 12px base */
    }

    .timeline-subtitle {
        font-size: calc(0.45px + 1.17vw); /* 18px base (clamp max) */
        margin-bottom: calc(0.675px + 1.755vw); /* 27px base */
    }

    /* Timeline 2 - right side */
    .timeline-text-2 {
        left: calc(50% + 2.5px + 6.5vw); /* 50% + 100px base */
    }

    .timeline-title-2 {
        font-size: calc(0.875px + 2.275vw); /* 35px base */
        margin-bottom: calc(0.3px + 0.78vw); /* 12px base */
    }

    .timeline-subtitle-2 {
        font-size: calc(0.45px + 1.17vw); /* 18px base */
        margin-bottom: calc(0.675px + 1.755vw); /* 27px base */
    }

    /* Timeline 3 - left side */
    .timeline-text-3 {
        left: calc(3.125px + 8.125vw); /* 125px base */
    }

    .timeline-title-3 {
        font-size: calc(0.875px + 2.275vw); /* 35px base */
        margin-bottom: calc(0.3px + 0.78vw); /* 12px base */
    }

    .timeline-subtitle-3 {
        font-size: calc(0.45px + 1.17vw); /* 18px base */
        margin-bottom: calc(0.675px + 1.755vw); /* 27px base */
    }

    /* Product section scaling - 65% growth */
    .product-text {
        font-size: calc(1.5px + 3.9vw); /* 60px base (clamp max) */
        margin-bottom: calc(0.5px + 1.3vw); /* 20px base */
    }

    .preorder-button {
        padding: calc(0.28px + 0.728vw) calc(0.56px + 1.456vw); /* 11.2px 22.4px base */
        font-size: calc(0.28px + 0.728vw); /* 11.2px base */
        border-radius: calc(0.175px + 0.455vw); /* 7px base */
    }

    /* Footer text scaling - 65% growth */
    .footer-heading {
        font-size: calc(0.375px + 0.975vw); /* 15px base */
        margin-bottom: calc(0.3px + 0.78vw); /* 12px base */
    }

    .footer-link {
        font-size: calc(0.625px + 1.625vw); /* 25px base */
        margin-bottom: calc(0.225px + 0.585vw); /* 9px base */
    }

    .footer-social {
        gap: calc(0.375px + 0.975vw); /* 15px base */
    }

    .social-icon {
        width: calc(0.675px + 1.755vw); /* 27px base */
    }

    .footer-legal-text {
        font-size: calc(0.375px + 0.975vw); /* 15px base */
        margin-bottom: calc(0.175px + 0.455vw); /* 7px base */
    }

    /* Matrix text - continue 1:1 viewport scaling from 1500px onwards */
    /* Same scaling rate as 850-1400px range (width = viewport width) */
    .matrix-text-container {
        max-width: 100vw; /* Remove 1600px cap, continue scaling with viewport */
    }
}


/* Mobile/Tablet breakpoint - hide all content below 850px width */
@media (max-width: 850px) {
    /* Slide-out menu transition - S-curve bezier: slow-fast-slow */
    .logo-container,
    .hero-text-wrapper,
    .mobile-hero-button-wrapper,
    .mobile-grid-line-vertical,
    .mobile-grid-line-horizontal,
    .mobile-section-text,
    .mobile-better-text,
    .mobile-chevron,
    .mobile-timeline-text,
    .mobile-product-section,
    .mobile-footer-section,
    .mobile-matrix-text-container,
    .background-layer,
    #fractalGlassCanvas,
    .background-overlay,
    .background-4,
    .content-container,
    .hero-section,
    .top-blur-overlay,
    .menu-separator-line,
    .menu-dim-overlay {
        transition: margin-left 0.94s cubic-bezier(0.76, 0, 0.24, 1);
    }

    /* Ensure all main content is above menu panel (z-index: 1) */
    .background-overlay {
        z-index: 2 !important;
    }

    .content-container,
    .hero-section {
        z-index: 2 !important;
    }

    /* Menu separator line - right edge of main frame */
    .menu-separator-line {
        display: block;
        position: fixed;
        top: 0;
        left: calc(100vw - 2px); /* Position at right edge, anchored from left so margin-left shifts it */
        width: 2px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.1);
        z-index: 250; /* Above everything including menu button */
        pointer-events: none;
    }


    /* Menu dim overlay - covers content when menu is open */
    .menu-dim-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* Fixed width so margin-left shifts it */
        height: 100%;
        background-color: #161616;
        opacity: 0;
        z-index: 199; /* Below menu button (200), above all content */
        pointer-events: none;
        transition: opacity 0.94s cubic-bezier(0.76, 0, 0.24, 1), margin-left 0.94s cubic-bezier(0.76, 0, 0.24, 1);
    }

    body.mobile-menu-open .menu-dim-overlay {
        opacity: 0.7; /* Creates ~30% brightness effect */
    }

    /* Menu panel - positioned in revealed area when content shifts */
    .menu-panel {
        position: fixed;
        top: 30vh; /* 40% of viewport height */
        left: 15px; /* Mobile: 15px from left edge */
        z-index: 1; /* Always behind main content */
        display: flex;
        flex-direction: column;
        gap: 7px; /* Reduced gap between items */
        pointer-events: none; /* Disabled by default */
        /* Parallax: shift right 40% slower than main content */
        transition: margin-left 0.94s cubic-bezier(0.76, 0, 0.24, 1);
        overflow: visible; /* Allow chevrons to extend beyond panel */
    }

    /* When menu is open, enable clicks on panel */
    body.mobile-menu-open .menu-panel {
        pointer-events: auto;
    }

    /* When menu is open, disable pointer events on background elements so clicks pass through */
    body.mobile-menu-open .background-layer,
    body.mobile-menu-open #fractalGlassCanvas,
    body.mobile-menu-open .background-overlay,
    body.mobile-menu-open .background-4,
    body.mobile-menu-open .content-container,
    body.mobile-menu-open .hero-section,
    body.mobile-menu-open .mobile-hero-button {
        pointer-events: none !important;
    }

    /* Wrapper for reveal animation - clips vertical overflow only, allows horizontal for chevron */
    .menu-panel-item-wrapper {
        overflow-x: visible;
        overflow-y: hidden;
        position: relative;
        line-height: 1.2;
        pointer-events: auto;
        z-index: 1;
    }

    /* Bring hovered wrapper to front so chevron isn't covered by next item */
    .menu-panel-item-wrapper:hover {
        z-index: 2;
    }

    /* Menu panel items - scales from 102px at 500px to 117px at 850px (+20% base, +15% growth) */
    .menu-panel-item {
        display: inline-block;
        position: relative;
        font-family: 'Outfit', sans-serif;
        font-weight: 400;
        letter-spacing: -0.01em;
        color: #ffffff;
        /* Start fully hidden below - X shift handled by panel margin */
        transform: translateY(105%);
        /* Transition for Y reveal only */
        transition: transform 0.91s cubic-bezier(0.76, 0, 0.24, 1);
        pointer-events: auto;
        cursor: pointer;
        font-size: calc(80.1px + 4.37vw);
        will-change: transform;
        margin-left: 17px; /* Align with social text and contact button */
        white-space: nowrap; /* Prevent text wrapping during animation */
    }

    /* Revealed state - fully visible */
    .menu-panel-item.revealed {
        transform: translateY(0);
    }

    /* Menu item active state (current page) - white */
    .menu-panel-item.active {
        color: #ffffff;
    }

    /* Menu item inactive state - gray */
    .menu-panel-item:not(.active) {
        color: #676767;
    }

    /* Menu item text wrapper - positioning parent for chevron */
    .menu-item-text {
        display: inline-block;
        position: relative;
    }

    /* Add invisible spacer after each item to create room for chevron */
    .menu-panel-item::after {
        content: '';
        display: inline-block;
        width: calc(19.6px + 1.07vw); /* Same as chevron width */
    }

    /* Menu item chevron - positioned at top-right of text, shifted right by width and down by half width */
    /* Size: 25px at 500px, scales to 28.75px at 850px (same rate as text) */
    .menu-item-chevron {
        position: absolute;
        top: calc(9.8px + 0.535vw); /* Shift down by half chevron width */
        left: 100%; /* Start at right edge of text */
        width: calc(19.6px + 1.07vw);
        height: calc(19.6px + 1.07vw);
        pointer-events: none;
    }

    /* Chevron horizontal line - extends left from top-right corner */
    .menu-chevron-line-horizontal {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.1);
        transition: width 60ms linear;
    }

    /* Chevron vertical line - extends down from top-right corner */
    .menu-chevron-line-vertical {
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 0;
        background-color: rgba(255, 255, 255, 0.1);
        transition: height 60ms linear;
    }

    /* Expand chevron on hover (only for non-active items) */
    .menu-panel-item:not(.active):hover .menu-chevron-line-horizontal {
        width: calc(19.6px + 1.07vw);
    }

    .menu-panel-item:not(.active):hover .menu-chevron-line-vertical {
        height: calc(19.6px + 1.07vw);
    }

    /* Social links container - aligned with menu text (offset by circle width + margin) */
    .menu-social-links {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-top: 30px;
        margin-left: 17px; /* 7px circle + 10px margin to align with menu text */
        pointer-events: auto;
    }

    /* Social link styling */
    .menu-social-link {
        text-decoration: none;
        display: inline-block;
    }

    /* Shift LinkedIn up to reduce gap */
    #menuLinkedIn {
        margin-top: -7px;
    }

    /* Social text - scales from 12px at 500px to 13.8px at 850px (+20% base, +15% growth) */
    .menu-social-text {
        font-family: 'Roboto Mono', monospace;
        font-weight: 300;
        font-size: calc(9.4px + 0.51vw);
        letter-spacing: -0.01em;
        color: #6E6C6C;
        display: inline-flex;
    }

    /* Menu contact button - scales from 86x31px at 500px to 99x36px at 850px (+20% base, +15% growth) */
    .menu-contact-button {
        margin-top: 30px;
        margin-left: 17px; /* 7px circle + 10px margin to align with menu text */
        width: calc(67.9px + 3.7vw);
        height: calc(24.5px + 1.34vw);
        background-color: white;
        border-radius: calc(3.8px + 0.21vw);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        pointer-events: auto;
    }

    /* Contact text - scales from 14.4px at 500px to 16.6px at 850px (+20% base, +15% growth) */
    .menu-contact-text {
        font-family: 'Roboto Mono', monospace;
        font-size: calc(11.3px + 0.62vw);
        font-weight: 400;
        color: black;
        display: flex;
    }

    /* Footer text - scales from 10.8px at 500px to 12.4px at 850px (+20% base, +15% growth) */
    .menu-footer-left {
        position: fixed;
        bottom: 5px;
        left: 22px; /* 15px panel left + 7px */
        font-family: 'Roboto Mono', monospace;
        font-weight: 300;
        font-size: calc(8.5px + 0.46vw);
        letter-spacing: -0.01em;
        color: #6E6C6C;
        pointer-events: none;
        opacity: 0;
        z-index: 1; /* Same as menu panel - behind main content */
        transition: opacity 0.3s ease, margin-left 1.2s cubic-bezier(0.76, 0, 0.24, 1);
    }

    /* Footer text - scales from 10.8px at 500px to 12.4px at 850px (+20% base, +15% growth) */
    .menu-footer-right {
        position: fixed;
        bottom: 5px;
        right: 7px;
        font-family: 'Roboto Mono', monospace;
        font-weight: 300;
        font-size: calc(8.5px + 0.46vw);
        letter-spacing: -0.01em;
        color: #6E6C6C;
        pointer-events: none;
        opacity: 0;
        z-index: 1; /* Same as menu panel - behind main content */
        transition: opacity 0.3s ease, margin-left 1.2s cubic-bezier(0.76, 0, 0.24, 1);
    }

    /* Show footer when menu is open */
    body.mobile-menu-open .menu-footer-left,
    body.mobile-menu-open .menu-footer-right {
        opacity: 1;
    }

    /* Hide social links, contact button when menu is closed */
    .menu-social-links,
    .menu-contact-button {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    body.mobile-menu-open .menu-social-links,
    body.mobile-menu-open .menu-contact-button {
        opacity: 1;
    }

    /* Hide contact button and blur overlay */
    .contact-button,
    .top-blur-overlay {
        display: none !important;
    }

    /* Hide most content inside content-container */
    .content-container > * {
        display: none !important;
    }

    /* Explicitly hide product and footer sections on mobile */
    .next-section,
    .footer-section {
        display: none !important;
    }

    /* Keep content-container visible */
    .content-container {
        display: block !important;
        background-color: #161616;
    }

    /* Show background image - centered */
    /* z-index 2 to be above menu panel (1) */
    .background-layer {
        display: block !important;
        background-position: center center;
        z-index: 2 !important;
    }

    /* Show background 4 for mobile better animation */
    /* Override right: 0 with explicit width so margin-left shifts it properly */
    .background-4 {
        display: block !important;
        opacity: 0;
        z-index: 3 !important; /* Above background-layer and menu panel */
        right: auto;
        width: 100vw;
    }

    /* Show fractal glass effect */
    #fractalGlassCanvas {
        display: block !important;
        z-index: 2 !important; /* Above menu panel (1) */
    }

    /* Ensure body background is solid */
    body {
        background-color: #161616;
    }

    /* Logo - repositioned and resized for mobile */
    .logo-container {
        display: block !important;
        top: 40px;
        left: 30px;
        transform: none;
    }

    .logo {
        height: 40px;
        width: auto;
        object-fit: contain;
    }

    /* Menu bar - repositioned to right side and scaled up */
    .button-outer {
        display: flex !important;
        align-items: center;
        top: 40px;
        left: auto;
        right: 30px;
        width: 79px;
        height: 40px;
        border-radius: 8px;
        padding: 5px;
        pointer-events: auto;
        cursor: pointer;
        transition: width 0.3s ease;
    }

    /* Expanded state when menu is open - CLOSE is 5 chars vs MENU 4 chars */
    .button-outer.menu-open {
        width: 88px;
    }

    /* Scaled up highlight */
    .button-highlight {
        left: 5px;
        top: 5px;
        width: 53px;
        height: 30px;
        border-radius: 5px;
        pointer-events: none; /* Ensure clicks pass through to menu items */
        transition: width 0.3s ease;
    }

    /* Expanded highlight when menu is open */
    .button-outer.menu-open .button-highlight {
        width: 62px;
    }

    /* Scaled up menu items */
    .menu-item {
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-item[data-item="home"] {
        width: 53px;
        transition: width 0.3s ease;
    }

    /* Expanded menu item when menu is open */
    .button-outer.menu-open .menu-item[data-item="home"] {
        width: 62px;
    }

    /* Hide research and purpose items in mobile collapsed state */
    .menu-item[data-item="research"],
    .menu-item[data-item="purpose"] {
        display: none !important;
    }

    /* Scaled up text */
    .menu-text {
        font-size: 14px;
    }

    /* Scaled up arrow */
    .button-arrow {
        width: 12px;
        height: 12px;
        margin-left: 5px;
        margin-right: 5px;
    }

    /* Swap arrows for mobile - show left arrow instead of right (default state) */
    /* JS will toggle these when menu opens/closes */
    .arrow-right {
        visibility: visible;
        opacity: 0;
        z-index: 1;
        transition: opacity 0.3s ease;
    }

    .arrow-left {
        visibility: visible;
        opacity: 0.3;
        z-index: 2;
        transition: opacity 0.3s ease;
    }

    /* Disable expanded state on mobile */
    .button-outer.expanded {
        width: 79px;
    }

    /* Show hero section for main text */
    .hero-section {
        display: block !important;
    }

    /* Hero text wrapper - repositioned for mobile */
    .hero-text-wrapper {
        position: fixed;
        left: 30px;
        bottom: 81px;
        z-index: 10;
        transition: margin-left 0.94s cubic-bezier(0.76, 0, 0.24, 1);
    }

    /* Main text - repositioned to bottom left, shifted up to accommodate button */
    /* Equal spacing: 23px from button to bottom, 23px from button to text (35% reduction) */
    /* Button height ~35px, so text bottom = 23 + 35 + 23 = 81px */
    .main-text {
        font-size: calc(44px + 2vw);
        line-height: calc(44px + 2vw);
    }

    /* Hide the waitlist button wrapper on mobile */
    .hero-button-wrapper {
        display: none !important;
    }

    /* Hide the waitlist button on mobile */
    .waitlist-button {
        display: none !important;
    }

    /* Mobile Hero Button wrapper - shown on mobile/iPad */
    .mobile-hero-button-wrapper {
        display: block;
        position: fixed;
        left: 30px;
        bottom: 23px;
        z-index: 200;
        overflow: hidden;
        transition: margin-left 0.94s cubic-bezier(0.76, 0, 0.24, 1);
    }

    /* Mobile Hero Button - shown on mobile/iPad */
    /* Positioned outside content-container for proper z-index stacking */
    /* Equal spacing: 23px from bottom of frame (35% reduction from 35px) */
    /* Scales 20% faster from 850px to 500px */
    .mobile-hero-button {
        display: block;
        padding: calc(5.86px + 0.63vw) calc(15.08px + 0.86vw);
        font-family: 'Roboto Mono', monospace;
        font-size: calc(8.32px + 0.48vw);
        font-weight: 300;
        color: white;
        background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: none;
        border-radius: 7px;
        cursor: pointer;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        /* Initial state: hidden to the left */
        transform: translateX(-105%);
        /* Combine reveal transition with background-color (for hover) */
        transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1), background-color 0.3s ease;
        will-change: transform;
    }

    /* Revealed state for mobile button */
    .mobile-hero-button.revealed {
        transform: translateX(0);
    }

    .mobile-hero-button:hover,
    .mobile-hero-button:active {
        background-color: rgba(255, 255, 255, 0.3);
    }

    /* Mobile grid lines */
    .mobile-grid-line-vertical {
        display: block;
        position: fixed;
        left: 93px;
        bottom: 0;
        width: 2px;
        height: 0;
        background-color: rgba(255, 255, 255, 0.1);
        z-index: 5;
        pointer-events: none;
        /* Gap mask around text area - fades 5px from text edges */
        /* Text: 4 lines × (34px + 3vw) = 136px + 12vw total, half = 68px + 6vw */
        /* Padding: 5px from text, 20px gradient */
        -webkit-mask-image: linear-gradient(
            to top,
            black 0,
            black calc(50vh - 68px - 6vw - 25px),
            transparent calc(50vh - 68px - 6vw - 5px),
            transparent calc(50vh + 68px + 6vw + 5px),
            black calc(50vh + 68px + 6vw + 25px),
            black 100vh
        );
        mask-image: linear-gradient(
            to top,
            black 0,
            black calc(50vh - 68px - 6vw - 25px),
            transparent calc(50vh - 68px - 6vw - 5px),
            transparent calc(50vh + 68px + 6vw + 5px),
            black calc(50vh + 68px + 6vw + 25px),
            black 100vh
        );
        -webkit-mask-size: 100% 100vh;
        mask-size: 100% 100vh;
        -webkit-mask-position: 0 bottom;
        mask-position: 0 bottom;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    .mobile-grid-line-horizontal {
        display: block;
        position: fixed;
        left: 0;
        bottom: 105px;
        width: 0;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.1);
        z-index: 5;
        pointer-events: none;
    }

    /* Mobile section text */
    .mobile-section-text {
        display: block;
        position: fixed;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0; /* Initial value for menu shift animation */
        font-family: 'Outfit', sans-serif;
        font-size: calc(34px + 3vw);
        font-weight: 300;
        line-height: calc(34px + 3vw);
        letter-spacing: -0.01em;
        color: #2B2B2B;
        z-index: 10;
        opacity: 0;
        pointer-events: none;
    }

    .mobile-section-text .mobile-word {
        color: #2B2B2B;
        transition: color 0.3s ease;
    }

    .mobile-section-text .mobile-word.filled {
        color: #FFFFFF;
    }

    /* Mobile fade letters for deletion animation */
    .mobile-fade-letter {
        color: inherit;
        transition: opacity 0.1s ease;
    }

    /* Mobile better text - positioned at line 3 where "cheaper" was */
    .mobile-better-text {
        display: block;
        position: fixed;
        left: 30px;
        /* Line 3 starts at 50% (center of 4-line text block) */
        top: 50%;
        transform: none;
        font-family: 'Outfit', sans-serif;
        font-size: calc(34px + 3vw);
        font-weight: 300;
        line-height: calc(34px + 3vw);
        letter-spacing: -0.01em;
        z-index: 10;
        pointer-events: none;
        opacity: 0;
    }

    .mobile-better-letter {
        color: rgba(255, 255, 255, 0);
        transition: color 0.1s ease;
    }

    /* Mobile chevron - 18px at 320px, 27px at 850px */
    .mobile-chevron {
        display: block;
        position: fixed;
        width: calc(12.6px + 1.7vw);
        height: calc(12.6px + 1.7vw);
        z-index: 10;
        pointer-events: none;
        opacity: 0;
    }

    .mobile-chevron-line-horizontal {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .mobile-chevron-line-vertical {
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 0;
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Mobile timeline text sections - scroll with page like desktop */
    .mobile-timeline-text {
        display: block;
        position: fixed;
        /* 20px to the right of vertical line (93px + 20px = 113px at min width) */
        left: 113px;
        /* Will be positioned by JS relative to horizontal line */
        top: 0;
        z-index: 10;
        pointer-events: none;
        opacity: 0;
    }

    .mobile-timeline-title {
        font-family: 'Outfit', sans-serif;
        /* Base size 30px, scales 20% faster: 0.5vw * 1.2 = 0.6vw */
        font-size: calc(30px + 0.6vw);
        font-weight: 300;
        line-height: calc(30px + 0.6vw);
        letter-spacing: -0.01em;
        color: #FFFFFF;
        margin-bottom: 15px;
    }

    .mobile-title-letter {
        opacity: 0;
        /* Transition set dynamically via JS for animation */
    }

    .mobile-title-letter.visible {
        opacity: 1;
    }

    .mobile-timeline-subtitle {
        font-family: 'Roboto Mono', monospace;
        /* At 300px: 15px font, 20px line-height. Scales 50% faster (0.54vw) */
        font-size: calc(13.4px + 0.54vw);
        font-weight: 300;
        line-height: calc(18.4px + 0.54vw);
        letter-spacing: -0.01em;
        color: #ADADAD;
    }

    .mobile-subtitle-word {
        display: inline-block;
        opacity: 0;
        transform: translateY(15px);
        /* Transition set dynamically via JS */
    }

    .mobile-subtitle-word.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Mobile timeline image wrapper */
    .mobile-timeline-image-wrapper {
        position: relative;
        margin-top: 25px;
        padding-bottom: 2px;
        /* Padding scales from 20px at 300px width to 65px at 850px width */
        /* margin-left = padding - text_left (113px) */
        /* padding = calc(-4.545px + 8.182vw): at 300px=20px, at 850px=65px */
        margin-left: calc(-117.545px + 8.182vw);
        /* width = 100vw - 2*padding = calc(9.09px + 83.636vw) */
        width: calc(9.09px + 83.636vw);
    }

    .mobile-timeline-image {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Mobile timeline border segments - expand from vertical line position */
    /* Positioned via JS - left borders expand leftward, right borders expand rightward */
    .mobile-timeline-border-top-left,
    .mobile-timeline-border-top-right,
    .mobile-timeline-border-bottom-left,
    .mobile-timeline-border-bottom-right {
        position: absolute;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.1);
        pointer-events: none;
        z-index: 2;
        width: 0; /* Start at 0, animated via JS */
    }

    .mobile-timeline-border-top-left,
    .mobile-timeline-border-top-right {
        top: -2px;
    }

    .mobile-timeline-border-bottom-left,
    .mobile-timeline-border-bottom-right {
        bottom: 0;
    }

    /* Mobile timeline gradient overlays - left and right */
    /* Width: 100px at 330px viewport = 30.3vw */
    /* Height: 10px larger than image (5px above, 5px below) */
    .mobile-timeline-gradient-left,
    .mobile-timeline-gradient-right {
        position: absolute;
        top: -5px;
        height: calc(100% + 10px - 2px); /* Account for padding-bottom on wrapper */
        width: 30.3vw;
        pointer-events: none;
        z-index: 3;
    }

    .mobile-timeline-gradient-left {
        left: 0;
        /* Gradient: dark on left edge (100% opacity), fading to transparent toward center */
        background: linear-gradient(to right,
            rgba(22, 22, 22, 1) 0%,
            rgba(22, 22, 22, 1) 20%,
            rgba(22, 22, 22, 0.8) 40%,
            rgba(22, 22, 22, 0) 100%);
    }

    .mobile-timeline-gradient-right {
        right: 0;
        /* Gradient: transparent toward center, dark on right edge (100% opacity) */
        background: linear-gradient(to right,
            rgba(22, 22, 22, 0) 0%,
            rgba(22, 22, 22, 0.8) 75%,
            rgba(22, 22, 22, 1) 85%,
            rgba(22, 22, 22, 1) 100%);
    }

    /* Mobile 3D Carousel for Timeline 3 */
    /* Base dimensions match desktop (567x621), scaled via JS based on viewport */
    /* Scale: 0.805 at 330px width → 1.0 at 850px width */
    .mobile-carousel-wrapper {
        position: relative;
        /* Padding to accommodate 3D overflow from translateZ transforms */
        /* This ensures the mask covers the full visual extent of 3D content */
        /* Left needs extra padding because scale wrapper has negative margin-left (up to -140px at small viewports) */
        /* Bottom needs extra for 3D card overflow below the container */
        padding: 100px 80px 150px 200px; /* top right bottom left */
        /* Negative margins to offset the padding so layout remains the same */
        /* Top margin: 55px (gap like desktop) - 100px (top padding) = -45px */
        margin-top: -45px;
        margin-left: -200px;
        margin-right: -80px;
        margin-bottom: -150px;
        /* Mask transition for menu animation - masks right edge to prevent bleed into menu panel */
        /* Masks work on rendered pixels after 3D projection, unlike clip-path */
        -webkit-mask-image: linear-gradient(to right, black 0%, black 100%);
        mask-image: linear-gradient(to right, black 0%, black 100%);
        transition: -webkit-mask-image 0.94s cubic-bezier(0.76, 0, 0.24, 1), mask-image 0.94s cubic-bezier(0.76, 0, 0.24, 1);
    }

    .mobile-carousel-scale-wrapper {
        transform-origin: left top;
        position: relative;
        /* Base dimensions: container (567) */
        width: 567px;
        height: 621px;
        /* JS will update scale, dimensions, and left position */
    }

    .mobile-carousel-3d-container {
        position: relative;
        perspective: 1620px; /* Same as desktop */
        perspective-origin: 50% 50%;
        width: 567px; /* Same as desktop */
        height: 621px; /* Same as desktop */
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        cursor: grab;
        user-select: none;
        box-sizing: content-box;
    }

    .mobile-carousel-3d-container:active {
        cursor: grabbing;
    }

    .mobile-carousel-3d-scene {
        width: 270px; /* Same as desktop */
        height: 405px; /* Same as desktop */
        position: relative;
        transform-style: preserve-3d;
        transform: rotateZ(10deg) rotateY(0deg);
        pointer-events: none;
    }

    .mobile-carousel-3d-card {
        position: absolute;
        width: 270px; /* Same as desktop */
        height: 405px; /* Same as desktop */
        left: 50%;
        top: 50%;
        margin-left: -135px;
        margin-top: -203px;
        transform-style: preserve-3d;
        pointer-events: none;
    }

    /* Position each card in the cylinder with helix stagger */
    /* Same as desktop: Radius 146px, Stagger 30px */
    .mobile-carousel-3d-card[data-index="0"] {
        transform: rotateY(0deg) translateZ(146px) translateY(-120px) rotateY(90deg);
    }
    .mobile-carousel-3d-card[data-index="1"] {
        transform: rotateY(40deg) translateZ(146px) translateY(-90px) rotateY(90deg);
    }
    .mobile-carousel-3d-card[data-index="2"] {
        transform: rotateY(80deg) translateZ(146px) translateY(-60px) rotateY(90deg);
    }
    .mobile-carousel-3d-card[data-index="3"] {
        transform: rotateY(120deg) translateZ(146px) translateY(-30px) rotateY(90deg);
    }
    .mobile-carousel-3d-card[data-index="4"] {
        transform: rotateY(160deg) translateZ(146px) translateY(0px) rotateY(90deg);
    }
    .mobile-carousel-3d-card[data-index="5"] {
        transform: rotateY(200deg) translateZ(146px) translateY(30px) rotateY(90deg);
    }
    .mobile-carousel-3d-card[data-index="6"] {
        transform: rotateY(240deg) translateZ(146px) translateY(60px) rotateY(90deg);
    }
    .mobile-carousel-3d-card[data-index="7"] {
        transform: rotateY(280deg) translateZ(146px) translateY(90px) rotateY(90deg);
    }
    .mobile-carousel-3d-card[data-index="8"] {
        transform: rotateY(320deg) translateZ(146px) translateY(120px) rotateY(90deg);
    }

    .mobile-carousel-3d-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 12px; /* Same as desktop */
        pointer-events: none;
    }

    /* Overlay gradient on cards */
    .mobile-carousel-3d-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%, rgba(0,0,0,0.2) 100%);
        border-radius: 12px;
        pointer-events: none;
    }

    /* Shine effect on cards */
    .mobile-carousel-3d-card-shine {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
        border-radius: 12px;
        pointer-events: none;
    }

    /* Card shadow and border */
    .mobile-carousel-3d-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 12px;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255,255,255,0.08);
        pointer-events: none;
    }

    /* Mobile Product Section */
    .mobile-product-section {
        display: block;
        position: fixed;
        left: 0;
        width: 100%;
        height: 900px;
        z-index: 10 !important;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .mobile-product-image {
        width: 100%;
        height: 900px;
        object-fit: cover;
        object-position: center center;
    }

    .mobile-product-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1;
    }

    .mobile-product-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
        width: 90%;
    }

    .mobile-product-text {
        font-family: 'Outfit', sans-serif;
        font-size: calc(25px + 3vw);
        font-weight: 400;
        line-height: calc(25px + 3vw);
        letter-spacing: -0.01em;
        color: white;
        text-align: center;
        margin-bottom: 20px;
        white-space: nowrap;
    }

    .mobile-reserve-button {
        padding: calc(5.6px + 0.7vw) calc(11.2px + 1.4vw);
        font-family: 'Roboto Mono', monospace;
        font-size: calc(7.7px + 0.84vw);
        font-weight: 300;
        line-height: calc(7.7px + 0.84vw);
        letter-spacing: -0.01em;
        color: white;
        background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: none;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
        pointer-events: auto;
        transition: background-color 0.3s ease;
    }

    .mobile-reserve-button:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }

    /* Mobile product border lines - extend from vertical line intersection */
    .mobile-product-border-left,
    .mobile-product-border-right {
        position: absolute;
        top: 0;
        height: 2px;
        background-color: rgba(255, 255, 255, 0.1);
        z-index: 10;
        pointer-events: none;
        width: 0;
    }

    .mobile-product-border-bottom {
        display: none; /* Border now on footer section instead */
    }

    /* Mobile Footer Section - container with background for parallax */
    .mobile-footer-section {
        display: block;
        position: fixed;
        left: 0;
        width: 100%;
        background-color: #161616;
        z-index: 15;
        pointer-events: none;
        opacity: 0;
        overflow: hidden;
        border-top: 2px solid rgba(255, 255, 255, 0.1);
    }

    /* Mobile Footer */
    .mobile-footer {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        position: absolute;
        top: 45px;
        left: 30px;
        right: 30px;
        z-index: 20;
        pointer-events: none;
        opacity: 1;
    }

    .mobile-footer-left {
        text-align: left;
        display: flex;
        flex-direction: column;
    }

    .mobile-footer-right {
        text-align: right;
        display: flex;
        flex-direction: column;
    }

    .mobile-footer-heading {
        font-family: 'Roboto Mono', monospace;
        /* Scale from 10px at 330px, proportional rate increased 75% */
        font-size: calc(4.98px + 1.52vw);
        font-weight: 300;
        color: #6E6C6C;
        letter-spacing: -0.01em;
        margin-bottom: 7px;
    }

    .mobile-footer-link {
        font-family: 'Outfit', sans-serif;
        /* Scale from 15px at 330px, proportional rate increased 75% */
        font-size: calc(7.48px + 2.28vw);
        font-weight: 300;
        color: #ffffff;
        letter-spacing: -0.01em;
        margin-bottom: 10px;
        pointer-events: auto;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        position: relative;
        display: block;
        width: fit-content;
        text-decoration: none;
        transition: color 0.3s ease-out;
    }

    /* Animated underline for mobile footer links */
    .mobile-footer-link::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #ffffff;
        transform: scaleX(0);
        transform-origin: left;
        /* Log-like easing: fast start, slow finish */
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Entering: expand from left to right */
    .mobile-footer-link.entering::after {
        transform: scaleX(1);
        transform-origin: left;
    }

    /* Leaving: contract from left to right (left edge moves right) */
    .mobile-footer-link.leaving::after {
        transform: scaleX(0);
        transform-origin: right;
    }

    /* Grey out other links when one is hovered */
    .mobile-footer-link.dimmed {
        color: #2b2b2b !important;
    }

    .mobile-footer-link:last-child {
        margin-bottom: 0;
    }

    .mobile-footer-link:visited {
        color: #ffffff;
    }

    .mobile-footer-link:visited.dimmed {
        color: #2b2b2b !important;
    }

    /* Mobile footer social icons */
    .mobile-footer-social {
        display: flex;
        justify-content: flex-end;
        /* Gap scales from 10px at 330px to ~16.5px at 850px (30% faster) */
        gap: calc(5.85px + 1.248vw);
        margin-top: 10px;
    }

    .mobile-social-icon {
        /* Scale from 25px at 330px, proportional rate increased 75% */
        width: calc(12.46px + 3.8vw);
        height: calc(12.46px + 3.8vw);
        opacity: 0.6;
        transition: opacity 0.3s ease;
        cursor: pointer;
        pointer-events: auto;
    }

    .mobile-social-icon:hover {
        opacity: 1;
    }

    /* Mobile footer legal text */
    .mobile-footer-legal {
        margin-top: auto; /* Push to bottom to align with Purpose */
        text-align: right;
    }

    .mobile-footer-legal-text {
        font-family: 'Roboto Mono', monospace;
        /* Scale from 8px at 330px, proportional rate increased 75% (same rate as other elements) */
        font-size: calc(3.99px + 1.22vw);
        font-weight: 300;
        color: #6E6C6C;
        letter-spacing: -0.01em;
    }

    .mobile-footer-legal-text:first-child {
        margin-bottom: 3px;
    }

    /* Mobile Matrix Text with Video Reveal */
    .mobile-matrix-text-container {
        display: block;
        position: fixed;
        left: 0;
        /* Full viewport width to prevent cropping */
        width: 100vw;
        z-index: 5;
        pointer-events: none;
        opacity: 0;
        overflow: visible;
    }

    .mobile-matrix-svg {
        width: 100%;
        height: auto;
        display: block;
        overflow: visible;
    }

    .mobile-matrix-canvas {
        width: 100%;
        height: 100%;
        display: block;
    }

}

/* iPad view - between 500px and 850px */
/* Same as mobile but vertical line shifts right as viewport increases */
/* At 500px: line at 93px, at 850px: line at 175px */
@media (min-width: 500px) and (max-width: 850px) {
    .mobile-grid-line-vertical {
        /* Scales from 93px at 500px to 175px at 850px */
        /* calc(-24px + 23.4vw): at 500px = -24+117=93px, at 850px = -24+199=175px */
        left: calc(-24px + 23.4vw);
    }

    .mobile-section-text {
        /* Shifts proportionally with the line (same 82px shift) */
        /* calc(-87px + 23.4vw): at 500px = -87+117=30px, at 850px = -87+199=112px */
        left: calc(-87px + 23.4vw);
    }

    .mobile-better-text {
        /* Shifts proportionally with the line (same as mobile-section-text) */
        left: calc(-87px + 23.4vw);
    }

    .mobile-timeline-text {
        /* 20px to the right of vertical line */
        /* Vertical line: calc(-24px + 23.4vw), so this is calc(-4px + 23.4vw) */
        left: calc(-4px + 23.4vw);
    }

    .mobile-timeline-image-wrapper {
        /* In iPad view, text position changes to calc(-4px + 23.4vw) */
        /* margin-left = padding - text_left = calc(-4.545px + 8.182vw) - calc(-4px + 23.4vw) */
        /* = calc(-0.545px - 15.218vw) */
        margin-left: calc(-0.545px - 15.218vw);
    }

    /* iPad menu panel positioning and font size */
    .menu-panel {
        /* Panel left edge at 40vw (100vw - 60vw shift), plus 25% of 60vw panel = 40vw + 15vw = 55vw */
        left: 55vw;
    }

    /* Font scales from 36px at 500px to 41.4px at 850px (+20% base, +15% growth) */
    .menu-panel-item {
        font-size: calc(28.3px + 1.54vw);
    }

    /* iPad spacer for chevron */
    .menu-panel-item::after {
        width: calc(8.5px + 0.46vw);
    }

    /* Chevron scales proportionally with iPad font size, shifted right and down by half width */
    .menu-item-chevron {
        width: calc(8.5px + 0.46vw);
        height: calc(8.5px + 0.46vw);
        left: 100%; /* Start at right edge of text */
        top: calc(4.25px + 0.23vw); /* Shift down by half chevron width */
    }

    .menu-panel-item:not(.active):hover .menu-chevron-line-horizontal {
        width: calc(8.5px + 0.46vw);
    }

    .menu-panel-item:not(.active):hover .menu-chevron-line-vertical {
        height: calc(8.5px + 0.46vw);
    }

    /* iPad footer positioning */
    .menu-footer-left {
        left: calc(40vw + 7px); /* 40vw = left edge of menu area after 60vw shift */
    }

    .menu-footer-right {
        /* 7px from right edge of menu area (which ends at 100vw) */
        right: 7px;
    }
}

/* Mobile view - between 320px and 499px (500px+ is iPad) */
/* Smaller base sizes with aggressive scaling */
@media (max-width: 499px) {
    /* Hero text wrapper - positioned for small mobile */
    /* Centered via JS-calculated margin-left for menu shift animation support */
    .hero-text-wrapper {
        left: 0;
        bottom: calc(34px + 6.94vw);
        /* margin-left set by JS centerMainText() for proper menu shift animation */
    }

    /* Hero text - 35px at 320px, scales to 58px at 500px */
    /* Text width measured, then (viewport - textWidth) / 2 = margin-left on wrapper */
    /* Shifted up to accommodate button below (25% reduction in spacing) */
    /* Bottom: 56px at 320px, 69px at 500px */
    .main-text {
        font-size: calc(-6px + 12.8vw);
        line-height: calc(-6px + 12.8vw);
        width: fit-content;
        text-align: left;
    }

    /* Mobile Hero Button wrapper - positioned for small mobile */
    /* Centered via JS-calculated margin-left for menu shift animation support */
    .mobile-hero-button-wrapper {
        left: 0;
        bottom: calc(6.83px + 2.08vw);
        /* margin-left set by JS centerMainText() for proper menu shift animation */
    }

    /* Mobile Hero Button - scales with viewport like hero text */
    /* Font: 8.6px at 320px, 10.7px at 500px (10% smaller) */
    /* Vertical padding: 9px fixed (10% smaller), horizontal scales */
    /* Bottom: 13.5px at 320px, 17.25px at 500px (25% reduction) */
    .mobile-hero-button {
        font-size: calc(4.69px + 1.21vw);
        padding: 9px calc(15.55px + 0.77vw);
    }

    /* Logo - same left padding as hero text */
    .logo-container {
        left: calc(-12px + 8.4vw);
    }

    /* Menu bar - same right padding as hero text */
    .button-outer {
        right: calc(-12px + 8.4vw);
    }

    /* Section text "We're making biomarker testing..." */
    /* Matches 49px at 500px, scales down 135% faster (8.3vw vs 3vw) */
    /* ~34px at 320px, 49px at 500px */
    .mobile-section-text {
        font-size: calc(7.5px + 8.3vw);
        line-height: calc(7.5px + 8.3vw);
    }

    /* Better text - same size */
    .mobile-better-text {
        font-size: calc(7.5px + 8.3vw);
        line-height: calc(7.5px + 8.3vw);
    }

    /* Timeline titles - 33px at 500px, scales at 3.7vw */
    /* ~26.3px at 320px, 33px at 500px */
    .mobile-timeline-title {
        font-size: calc(14.5px + 3.7vw);
        line-height: calc(14.5px + 3.7vw);
    }

    /* Timeline subtitles - 16.1px at 500px, scales at 3vw */
    /* ~10.7px font at 320px, 16.1px at 500px */
    .mobile-timeline-subtitle {
        font-size: calc(1.1px + 3vw);
        line-height: calc(6.1px + 3vw);
    }

    /* Product text - 40px at 500px, scales 80% faster (5.4vw vs 3vw) */
    /* ~30px at 320px, 40px at 500px */
    .mobile-product-text {
        font-size: calc(13px + 5.4vw);
        line-height: calc(13px + 5.4vw);
    }

    /* Product button - scales 80% faster */
    /* Font: ~9.2px at 320px, 11.9px at 500px */
    /* Padding: ~6.8px/13.7px at 320px, 9.1px/18.2px at 500px */
    .mobile-reserve-button {
        font-size: calc(4.34px + 1.51vw);
        line-height: calc(4.34px + 1.51vw);
        padding: calc(2.8px + 1.26vw) calc(5.6px + 2.52vw);
    }

    /* Legal text - 7px at 320px, 10px at 500px */
    .mobile-footer-legal-text {
        font-size: calc(1.7px + 1.67vw);
    }

    /* Gap between CONNECT and icons - 2px at 320px, 10px at 500px */
    .mobile-footer-social {
        margin-top: calc(-12.2px + 4.44vw);
    }

    /* Footer padding - same as logo/menu bar: 15px at 320px, 30px at 500px */
    .mobile-footer {
        left: calc(-12px + 8.4vw);
        right: calc(-12px + 8.4vw);
    }

    /* Menu panel - start at 25vh, negative gap for overlap, left aligned with social/contact */
    .menu-panel {
        top: 25vh;
        gap: 0;
        left: 15px;
    }

    /* Hide menu items on mobile - keep social links, contact button, and footer text */
    .menu-panel-item-wrapper {
        display: none;
    }

    /* Reorder elements: mobile menu text first, then social links, then contact button */
    .mobile-menu-text {
        order: 1;
    }

    .menu-social-links {
        order: 2;
    }

    .menu-contact-button {
        order: 3;
    }

    /* Mobile social links - same font as legal text, 15px below menu text */
    .menu-social-links {
        margin-top: 15px;
        margin-left: 0;
        gap: 3px;
    }

    #menuLinkedIn {
        margin-top: -5px;
    }

    /* Social text - same as legal: 12px at 320px, 14.4px at 500px */
    .menu-social-text {
        font-size: calc(7.73px + 1.33vw);
    }

    /* Mobile contact button - 86.4x31.2px at 320px, scales +20% to 500px */
    .menu-contact-button {
        margin-top: 20px;
        margin-left: 0;
        width: calc(55.65px + 9.61vw);
        height: calc(20.2px + 3.44vw);
        border-radius: calc(3.12px + 0.54vw);
    }

    /* Contact text - same as legal: 12px at 320px, 14.4px at 500px */
    .menu-contact-text {
        font-size: calc(7.73px + 1.33vw);
    }

    /* Footer legal text - equal padding 7px on both sides */
    /* Font: 12px at 320px, 14.4px at 500px (+20% base, scales +20% across range) */
    .menu-footer-left {
        left: 7px;
        font-size: calc(7.73px + 1.33vw);
    }

    .menu-footer-right {
        right: 7px;
        font-size: calc(7.73px + 1.33vw);
    }

    /* Mobile menu text panel */
    .mobile-menu-text {
        display: flex;
        flex-direction: column;
        width: calc(100vw - 15px); /* Extend container to give room for chevrons */
    }

    /* Wrapper for reveal animation - clips vertical overflow only, allows horizontal for chevron */
    /* Margin: -5px at 320px, -10px at 500px */
    .mobile-menu-text-item {
        overflow-x: visible;
        overflow-y: hidden;
        position: relative;
        line-height: 1.2;
        margin-top: calc(3.89px - 2.78vw);
    }

    .mobile-menu-text-item:first-child {
        margin-top: 0;
    }

    /* Mobile menu item text - 60px at 320px, 90px at 500px */
    .mobile-menu-item-text {
        display: inline-block;
        position: relative;
        font-family: 'Outfit', sans-serif;
        font-size: calc(6.67px + 16.67vw);
        font-weight: 400;
        color: #6E6C6C;
        cursor: pointer;
        /* Start fully hidden below */
        transform: translateY(105%);
        /* Transition for Y reveal */
        transition: transform 1.5s cubic-bezier(0.76, 0, 0.24, 1);
        will-change: transform;
    }

    /* Revealed state - fully visible */
    .mobile-menu-text-item.revealed .mobile-menu-item-text {
        transform: translateY(0);
    }

    /* Active/highlighted menu item - white */
    .mobile-menu-text-item.active .mobile-menu-item-text {
        color: #FFFFFF;
    }

    /* Mobile menu chevron - 17px at 320px, 30px at 500px */
    .mobile-menu-chevron {
        position: absolute;
        top: calc(-3.06px + 3.61vw); /* Half of chevron size for vertical centering */
        left: 100%;
        width: calc(-6.11px + 7.22vw);
        height: calc(-6.11px + 7.22vw);
        pointer-events: none;
    }

    /* Mobile chevron lines - L-shape from top-right corner */
    .mobile-chevron-line-horizontal {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 2px;
        background-color: #6E6C6C;
        transition: width 60ms linear;
    }

    .mobile-chevron-line-vertical {
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 0;
        background-color: #6E6C6C;
        transition: height 60ms linear;
    }

    /* Hover animation - expand chevron lines */
    .mobile-menu-text-item:not(.active):hover .mobile-chevron-line-horizontal {
        width: calc(-6.11px + 7.22vw);
    }

    .mobile-menu-text-item:not(.active):hover .mobile-chevron-line-vertical {
        height: calc(-6.11px + 7.22vw);
    }

}