:root {
    /* Apple Color System */
    --bg-color: #000000;
    --text-primary: #f5f5f7;
    --text-secondary: #86868b;
    --accent-blue: #2997ff;
    --accent-glow: rgba(41, 151, 255, 0.4);

    /* Glassmorphism */
    --glass-bg: rgba(22, 22, 23, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --card-radius: 24px;

    /* Typography */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --nav-height: 48px;

    /* Layout */
    --content-max-width: 1400px;
    --grid-gap: 24px;
    --grid-cols: 12;

    /* Gravity System Variables */
    --gravity-float-y: -4px;
    --gravity-float-dur: 3s;
    --gravity-blob-mod: 1;
    /* Multiplier */
    --gravity-ease: ease-in-out;
}

/* Global Typography Updates (Swiss Style) */
h1,
h2,
h3,
h4,
.headline,
.section-header h2,
.cinematic-content h2 {
    letter-spacing: 0.05em !important;
    /* +5% tracking */
    font-weight: 600;
    /* Distinct but not heavy */
}

p,
.subtext,
.reveal-subtext,
.cinematic-content p,
.section-header p {
    font-weight: 300 !important;
    /* Light */
    line-height: 1.6 !important;
    /* Relaxed readability */
    color: rgba(255, 255, 255, 0.85);
}

/* Gravity High State Overrides */
body.gravity-high {
    --gravity-float-y: -1px;
    --gravity-float-dur: 0.8s;
    --gravity-blob-mod: 0.2;
    --gravity-ease: cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* --- Dynamic Nebula Background --- */
.nebula-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Behind everything */
    overflow: hidden;
    pointer-events: none;
    background: #000;
    /* Deep black base */
}

.nebula-blob {
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: glow-pulse 6s ease-in-out infinite alternate;
}

.nebula-green {
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.15), transparent 70%);
    animation-delay: 0s;
}

.nebula-purple {
    bottom: -10%;
    right: -10%;
    background: radial-gradient(circle, rgba(140, 0, 255, 0.15), transparent 70%);
    animation-delay: 3s;
    /* Offset rhythm */
}

/* Rim Light Source (White Backlight) */
.rim-light-source {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    z-index: 0;
}

@keyframes glow-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.05);
        /* 5% Pulse */
        opacity: 0.7;
    }
}

/* --- Canvas Blending for Rim Light Effect --- */
canvas#hero-lightpass {
    /* Screen blend mode makes black transparent, revealing nebula */
    mix-blend-mode: screen;
    /* Enhance contrast to define the silhouette (Rim Light effect) */
    filter: contrast(1.2) brightness(1.2) drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
    position: fixed;
    /* Ensure it stays fixed as per original design */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    /* Above nebula, below text */
}

/* Ensure text remains visible above blend mode */
.headline,
.scrolling-text {
    z-index: 2;
    position: relative;
}

/* Gravity Pill Control - Hero Scoped */
.gravity-pill-wrapper {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.gravity-pill-wrapper.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

.gravity-trigger {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    /* User requested 10px */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 1.0);
    /* User requested 1px white border */
    border-radius: 980px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 500;
    animation: breathe 4s ease-in-out infinite;
    /* Breathing Animation */
}

@keyframes breathe {

    0%,
    100% {
        transform: scale(1.0);
    }

    50% {
        transform: scale(1.05);
    }
}

.gravity-trigger:hover,
.gravity-trigger.active {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: scale(1.05);
    /* Stable scale on hover to pause breathing feel */
    animation: none;
}

/* Leader Line SVG Overlay */
.leader-line-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.leader-line-path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 1px;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

/* Opacity Triggers - Hiding Content Until Scroll */
body .section-header,
body .tech-specs,
body .features {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    content-visibility: auto;
    /* Skip rendering work for off-screen content */
    contain-intrinsic-size: 1px 1px;
    /* Placeholder size to prevent scrollbar jump */
}

body.reveal-content .section-header,
body.reveal-content .tech-specs,
body.reveal-content .features {
    opacity: 1;
    transform: translateY(0);
}

.g-icon svg {
    display: block;
    opacity: 0.8;
}

.gravity-options {
    background: rgba(20, 20, 20, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 6px;
    display: flex;
    /* Flex row for pill shape */
    flex-direction: row;
    align-items: center;
    gap: 0;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transform-origin: bottom right;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.gravity-options.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.g-opt {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 16px;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 12px;
}

.g-opt:hover {
    color: #fff;
}

.g-opt.selected {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.g-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

/* High Gravity Visuals - Hero Only */
body.gravity-high .headline {
    /* Tighter, sharper shadows in high gravity */
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}

/* Make bubbles NOT affected by gravity switch globally as requested */
/* (Removed override for blobbies) */


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

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.011em;
    /* SF Text feel */
    line-height: 1.47059;
    /* Apple Standard Body */
}

/* LightOne Aura Container */
.aura-container {
    position: fixed;
    /* Ensuring visibility down to CTA */
    top: 0;
    left: 0;
    width: 100vw;
    /* Full viewport width */
    height: 100vh;
    /* Full viewport height */
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Core Blobs Common Styles */
.core-blob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    /* Increased size for overlap */
    height: 700px;
    border-radius: 50%;
    filter: blur(120px);
    /* Soft glowing balls */
    opacity: 0.25;
    transform: translate(-50%, -50%);
    /* Center origin */
    will-change: transform;
    backface-visibility: hidden;
    mix-blend-mode: normal;
    /* Allow RGB mixing naturally */
}

/* Specific RGB Blobs */
.rgb-red {
    background: #ff0000;
    animation: dance-cw 20s linear infinite;
}

.rgb-green {
    background: #00ff00;
    animation: dance-ccw 25s linear infinite;
    /* Shift Green position slightly lower/right to sync with Recycled card (bottom right usually) */
    /* Adjust translate in keyframe or here? Base position is 50/50. 
       Let's bias the starting position or the animation path. 
       Actually, recycled is usually 4th item (bottom right in grid).
    */
    top: 60%;
    /* Bias downwards */
}

.rgb-blue {
    background: #0000ff;
    animation: dance-pulse 15s ease-in-out infinite;
}

/* Ensure Transparency for Bottom Sections (CTA) */
.cinematic-section,
footer,
.footer-content,
.final-cta-container,
.section-header,
.bento-features {
    background: transparent !important;
}

.cinematic-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
    /* Estimate height */
}

/* Liquid Dance Animations */
@keyframes dance-cw {
    from {
        transform: translate3d(-50%, -50%, 0) rotate(0deg) translateX(150px) rotate(0deg);
    }

    to {
        transform: translate3d(-50%, -50%, 0) rotate(360deg) translateX(150px) rotate(-360deg);
    }
}

@keyframes dance-ccw {
    from {
        transform: translate3d(-50%, -50%, 0) rotate(360deg) translateX(150px) rotate(-360deg);
    }

    to {
        transform: translate3d(-50%, -50%, 0) rotate(0deg) translateX(150px) rotate(0deg);
    }
}

@keyframes dance-pulse {

    0%,
    100% {
        transform: translate3d(-50%, -50%, 0) scale(1);
    }

    50% {
        transform: translate3d(-50%, -50%, 0) scale(1.3);
    }
}

/* --- Nav Glass Button (Not Showy) --- */
.nav-glass-btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.08);
    /* Very subtle fill */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Thin crisp border */
    border-radius: 980px;
    /* Pill shape */
    padding: 8px 20px;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    letter-spacing: 0.02em;
}

.nav-glass-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    /* Slightly brighter on hover */
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    /* No scale, no heavy glow - minimalist */
}

/* Navigation */
/* Navigation - Apple Sticky Style */
/* Navigation - Apple Sticky Style */
/* Navigation - Apple Sticky Style */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height);
    background: rgba(0, 0, 0, 0.6);
    /* User requested 0.6 */
    backdrop-filter: blur(15px);
    /* User requested 15px */
    -webkit-backdrop-filter: blur(15px);
    padding: 0 max(22px, env(safe-area-inset-left));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    text-align: center;
    font-family: var(--font-main);
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.5s ease;
}

.loader-content.visible {
    opacity: 1;
    /* Only show if loading is slow */
}

.loading-percentage {
    font-size: 64px;
    font-weight: 200;
    /* Thin */
    color: #fff;
    margin-bottom: 8px;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.loading-text {
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Interactive Exploded View Labels */
.hero-labels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.label-item {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.5s ease;
    transform: translate(-50%, -50%);
    /* Center on coordinate */
}

.label-item.visible {
    opacity: 1;
}

.label-line {
    width: 60px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.label-text {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

/* Right-align specific labels logic if needed, currently generic */

/* Levitating Animation */
@keyframes levitate {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(var(--gravity-float-y));
    }
}

.levitate {
    animation: levitate var(--gravity-float-dur) var(--gravity-ease) infinite;
    will-change: transform;
}

/* Nav Container to constrain width */
.nav-container {
    width: 100%;
    max-width: 980px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-decoration: none;
    opacity: 0.9;
}

.nav-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 16px;
    border-radius: 980px;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.nav-btn:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
    transform: scale(1.02);
}

/* Hero Section */
.hero-container {
    height: 400vh;
    /* Increased for scroll space */
    width: 100%;
    position: relative;
    /* Removed flex centering because we need sticky behavior for the canvas, 
       content will be sticky or absolute */
}

.sticky-video-wrapper {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    opacity: 1.0;
}

canvas#hero-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* LCP Optimization: Hero Poster */
.hero-poster-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Placed behind canvas */
}

.hero-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Removed canvas block here - moved up to sticky wrapper for context */

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 60%, var(--bg-color));
}

.hero-content {
    text-align: center;
    z-index: 2;
    transform-style: preserve-3d;
    position: sticky;
    top: 30vh;
    /* Keeps text centered in view while scrolling */
    width: 100%;
    margin-bottom: 100vh;
    /* Push content down */
}

h1.headline {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 80px rgba(255, 255, 255, 0.15);
}

.cta-btn.glass {
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 980px;
    color: white;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    overflow: hidden;
    position: relative;
    display: inline-block;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.cta-btn.glass:hover {
    transform: scale(1.02);
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0.5;
}

.scroll-indicator span {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.scroll-indicator .line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, white, transparent);
}

/* Spacer */
.spacer {
    height: 20vh;
}

/* Technical Specs Grid (New) */
.tech-specs {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px 80px 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.spec-item {
    background: rgba(22, 22, 23, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.spec-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
}

.spec-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    color: var(--accent-blue);
    opacity: 0.9;
}

.spec-icon svg {
    width: 100%;
    height: 100%;
}

.spec-title {
    font-size: 17px;
    /* Apple subhead */
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.spec-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Features Section */
.features {
    padding: 100px 0;
    max-width: 980px;
    /* Apple Standard Content Width */
    margin: 0 auto;
}

.section-header {
    margin-bottom: 60px;
    padding-left: 20px;
    /* Match safe area/padding */
    position: relative;
    max-width: 600px;
}

.section-header h2 {
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-bottom: 16px;
    color: #FFFFFF;
    /* High contrast */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

.section-header p {
    color: rgba(255, 255, 255, 0.8);
    /* Better contrast */
    font-size: 24px;
    line-height: 1.16667;
    font-weight: 500;
    position: relative;
    z-index: 2;
    letter-spacing: 0.009em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.header-visual {
    position: absolute;
    top: -20px;
    /* Closer to text */
    right: 10%;
    /* Closer horizontally if needed */
    width: 250px;
    height: auto;
    opacity: 0.8;
    z-index: 1;
    animation: float 10s ease-in-out infinite;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 80%);
    mask-image: radial-gradient(circle, black 40%, transparent 80%);
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

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

/* Grid Spanning */
@media (min-width: 900px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 400px);
    }

    .card-large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .card-wide {
        grid-column: span 3;
        grid-row: span 1;
        min-height: 300px;
    }
}

/* 3D Card Interaction */
.card {
    perspective: 1000px;
    background: transparent;
    border: none;
    padding: 0;
    position: relative;
    cursor: pointer;
}

/* Inner Wrapper for 3D Transform */
/* Inner Wrapper for 3D Transform */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 3.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform-style: preserve-3d;
    box-shadow: none;
    /* Removed as requested */
    border-radius: 0;
    /* Removed as requested */
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Specific Slow Flip for Heavy Cards */
.card-large .card-inner,
.card-wide .card-inner,
.card-large-2 .card-inner,
.card-small .card-inner,
.card-medium .card-inner {
    transition: transform 2s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* --- Text Reveal Animation System --- */
.reveal-text-container .reveal-heading,
.reveal-text-container .reveal-subtext {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-text-container.is-visible .reveal-heading {
    opacity: 1;
    transform: translateY(0);
}

.reveal-text-container.is-visible .reveal-subtext {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
    /* Gentle Stagger */
}

/* Card Faces */
.card-front,
.card-back {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 0;
    /* Removed as requested */
    overflow: hidden;
    background: transparent !important;
    /* Fully Transparent */
    border: none;
    /* Removed borders */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    box-shadow: none;
    backdrop-filter: blur(12px);
    /* Reduced blur for depth felt, not seen */
    -webkit-backdrop-filter: blur(12px);
}

/* Front Face Specifics */
.card-front {
    z-index: 2;
}

/* Content z-indexing for front face */
.card-front .card-content {
    position: relative;
    z-index: 2;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    /* Enhanced contrast */
    color: #FFFFFF;
    /* Force white */
}

/* Dark gradient overlay for readability on front - Kept but subtle */
.card-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.05) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Visuals in Front Face */
.card-visual-img,
.card-visual-img-small,
.card-visual-wide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.6;
    /* Lowered opacity to blend with aura */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    mix-blend-mode: overlay;
    /* Blend better with bg */
}

/* Ghost Spec Section (Titanium & Wide Cards) */
.card-wide .card-front,
.card-wide .card-back {
    background: transparent !important;
    /* De-boxed */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Floating Frame */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: none;
}

/* Hover Effect - Subtle Lift for Apple feel */
.card:hover .card-inner {
    transform: translateY(-8px) scale(1.02);
    box-shadow: none;
    /* Ensure no shadow on hover */
}

/* Flipped State */
.card.flipped .card-inner {
    transform: rotateY(180deg);
}

/* Back Face Styling */
.card-back {
    transform: rotateY(180deg);
    background: rgba(255, 255, 255, 0.02);
    /* Slightly lighter for back? Or same. Sticking to atmospheric. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px;
}

.back-content {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease 0.2s;
}

.card.flipped .back-content {
    opacity: 1;
    transform: translateY(0);
}

.back-content h3 {
    font-size: 24px;
    font-weight: 600;
    color: #FFFFFF;
    /* High contrast */
    margin-bottom: 24px;
    letter-spacing: -0.01em;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}

.back-content ul {
    list-style: none;
    padding: 0;
    width: 100%;
}

.back-content li {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    /* Better white contrast */
    margin-bottom: 12px;
    padding-left: 0;
    border-left: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.2s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.back-content li::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
    opacity: 0.6;
}

.back-content li:hover {
    color: var(--text-primary);
}

.back-content li:hover::before {
    opacity: 1;
    transform: scale(1.2);
}

/* Hover effects for visuals inside front face */
.card:hover .card-visual-img,
.card:hover .card-visual-img-small,
.card:hover .card-visual-wide {
    transform: scale(1.1);
}

/* Footer */
footer {
    text-align: center;
    padding: 6rem 0;
    margin-top: 4rem;
    border-top: 1px solid #111;
    color: #444;
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.delay-1 {
    animation-delay: 0.15s;
}

.delay-2 {
    animation-delay: 0.3s;
}

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

.reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: transform, opacity;
}

.fade-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Responsive Design */
@media (max-width: 900px) {

    /* Reset Grid for Tablet/Mobile */
    .bento-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-template-rows: auto;
    }

    .card-large,
    .card-wide {
        grid-column: span 1;
        grid-row: span 1;
    }

    .card-wide {
        min-height: auto;
    }
}

@media (max-width: 768px) {

    /* Navigation */
    nav {
        padding: 1.5rem 1.5rem;
    }

    .logo {
        font-size: 1rem;
    }

    .nav-btn {
        padding: 0.4rem 1.2rem;
        font-size: 0.9rem;
    }

    /* Hero */
    .hero-content {
        top: 25vh;
        padding: 0 1rem;
    }

    h1.headline {
        font-size: 14vw;
        margin-bottom: 1.5rem;
    }

    .cta-btn.glass {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }

    /* Features */
    .features {
        padding: 2rem 0;
        /* Removed horizontal padding */
    }

    .section-header {
        margin-bottom: 3rem;
        padding-left: 1rem;
        /* Restore padding for header text if needed, or keeping it aligned with cards if they invoke their own padding. 
        Actually, section header has padding-left: 1rem in base. Let's ensure it looks okay. 
        User said "make those each spec card large fitting entire width". 
        So we focus on features/grid. */
    }

    .section-header h2 {
        font-size: 2.5rem;
        padding-left: 1rem;
        /* Ensure header alignment matches visual expectation */
    }

    .section-header p {
        padding-left: 1rem;
    }

    .bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        /* Tightened vertical spacing to 16px */
        padding: 0 0.5rem;
        /* Minimal padding for cards */
    }

    .card {
        padding: 2rem;
        min-height: auto;
        height: auto;
        /* Allow height to fit content */
        margin-bottom: 0;
        /* Let grid gap handle spacing */
    }

    /* Mobile Flip Fixes */
    .card-back {
        overflow-y: auto;
        /* Allow scrolling if content still overflows */
        padding-bottom: 2rem;
        /* Reduced breathing room to keep it compact */
        justify-content: flex-start;
        /* Align to top to prevent cutting off if centered vertical overlap occurs */
    }

    /* Ensure inner container allows height expansion */
    .card-inner {
        height: 100%;
    }

    /* Visual Adjustments - Mobile Full Fill (Robust Fix) */
    .card-front {
        position: relative !important;
        overflow: hidden !important;
        /* Restore default flex behavior to space text nicely */
        justify-content: space-between;
        align-items: stretch;
        z-index: 1;
        /* Establish stacking context */
    }

    /* Ensure content is above image */
    .card-front .card-content {
        position: relative;
        z-index: 10;
    }

    .card-visual-img,
    .card-visual-img-small,
    .card-visual-wide {
        position: absolute !important;
        inset: 0 !important;
        /* Fill container completely */
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        opacity: 0.8;
        transform: none !important;
        z-index: 0 !important;
    }

    /* Reset Header Visual if needed, but request was specific to spec cards */
    .header-visual {
        top: -30px;
        right: -10px;
        width: 150px;
    }
}

/* --- Performance Optimizations --- */
/* Skip rendering off-screen content */
.features,
.cinematic-section,
footer {
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
    /* Estimate height to prevent scrollbar jumping */
}

/* Limit repaint scope for complex cards */
.card {
    contain: paint layout;
}

/* Zero-G Text Animation */
.zero-g-char {
    display: inline-block;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
    margin-right: -0.02em;
    /* Slight tightening normally, but we have gaps. actually let's give it breathing room? */
    min-width: 0.3em;
    /* Ensure skinny letters take space? No, text-align handles it. */
    /* Let's just trust browser spacing but maybe add safety margin if they tilt inward */
    padding: 0 0.02em;
    /* Default to no animation, applied via JS for randomization */
}

/* Three variations of 'drifting' physics */
/* Float 1: Large smooth loop */
@keyframes zeroG-float-1 {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--base-rotate, 0deg));
    }

    25% {
        transform: translate3d(4px, -6px, 0) rotate(calc(var(--base-rotate, 0deg) + 2deg));
    }

    50% {
        transform: translate3d(-3px, 4px, 0) rotate(calc(var(--base-rotate, 0deg) - 1deg));
    }

    75% {
        transform: translate3d(2px, 5px, 0) rotate(calc(var(--base-rotate, 0deg) + 1deg));
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(var(--base-rotate, 0deg));
    }
}

/* Float 2: "Bouncy" dash feel */
@keyframes zeroG-float-2 {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--base-rotate, 0deg));
    }

    20% {
        transform: translate3d(-5px, 2px, 0) rotate(calc(var(--base-rotate, 0deg) - 2deg));
    }

    40% {
        transform: translate3d(3px, -4px, 0) rotate(calc(var(--base-rotate, 0deg) + 1deg));
    }

    60% {
        transform: translate3d(-2px, -2px, 0) rotate(var(--base-rotate, 0deg));
    }

    80% {
        transform: translate3d(4px, 3px, 0) rotate(calc(var(--base-rotate, 0deg) + 2deg));
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(var(--base-rotate, 0deg));
    }
}

/* Float 3: Slow drift */
@keyframes zeroG-float-3 {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--base-rotate, 0deg));
    }

    33% {
        transform: translate3d(3px, 5px, 0) rotate(calc(var(--base-rotate, 0deg) + 1.5deg));
    }

    66% {
        transform: translate3d(-4px, -3px, 0) rotate(calc(var(--base-rotate, 0deg) - 1.5deg));
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(var(--base-rotate, 0deg));
    }
}

@media (max-width: 480px) {
    h1.headline {
        font-size: 16vw;
    }

    .card {
        padding: 1.5rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .section-header p {
        font-size: 1rem;
    }
}

/* --- Cinematic Section --- */
.cinematic-section {
    padding: 100px 0;
    width: 100%;
    overflow: hidden;
}

.cinematic-container {
    max-width: var(--content-max-width, 1400px);
    margin: 0 auto;

    /* Swiss Grid Implementation */
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap, 24px);
    padding: 0 40px;
    /* Generous padding */
    align-items: center;
}

.cinematic-visual {
    /* Image stays prominent */
    grid-column: 2 / span 5;
    /* Left visual anchor */
    height: 600px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    background: #111;
}

.cinematic-image-real {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.8;
    transition: opacity 0.5s ease;
}

.cinematic-content {
    /* Text aligned to Golden Ratio (Col 8) */
    grid-column: 8 / span 4;
    text-align: left;
    display: block;
    /* Ensure it's not flex */
}

.cinematic-content h2 {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    background: linear-gradient(to right, #fff, #999);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cinematic-content p {
    font-size: 21px;
    line-height: 1.4;
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- New Feature Bento Grid (Grid 2) --- */
.bento-features {
    padding-top: 40px;
}

.bento-grid-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns for flexibility */
    grid-auto-rows: 400px;
    /* strict row height for all rows */
    gap: 24px;
    padding: 20px;
    max-width: 1020px;
    /* Slightly wider to accommodate gaps */
    margin: 0 auto;
}

.card-large-2 {
    grid-column: span 2;
    grid-row: span 1;
}

.card-small {
    grid-column: span 1;
    grid-row: span 1;
}

/* Glass Panel Style (No flip, just aesthetic) */
.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Default bottom align */
    position: absolute !important;
    inset: 0;
    z-index: 2;
    overflow: hidden;
}

.card-content-bottom {
    position: relative;
    z-index: 2;
}

.card-content-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    z-index: 2;
}

.glass-panel h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.glass-panel p {
    font-size: 15px;
    color: var(--text-secondary);
}

.visual-abstract {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.4;
    background: radial-gradient(circle at 50% 50%, #2997ff 0%, transparent 60%);
}

.eco-icon {
    font-size: 40px;
    margin-bottom: 16px;
    display: block;
    opacity: 0.8;
}

/* --- Specific Customizations (IP68 & Titanium) --- */

/* IP68 Shimmer Animation */
@keyframes shimmer {
    0% {
        transform: translateX(-150%) skewX(-20deg);
    }

    100% {
        transform: translateX(200%) skewX(-20deg);
    }
}

/* IP68 Water/Dust Effect */
@keyframes dust-splash {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.ip68-card {
    position: relative;
    overflow: hidden;
    /* Deeper, wetter background */
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%),
        var(--glass-bg);
    box-shadow: inset 0 0 20px rgba(100, 200, 255, 0.2);
    /* Inner water glow */
    border: 1px solid rgba(150, 200, 255, 0.3);
    /* Icier border */
}

/* Droplets Texture - Enhanced */
.ip68-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.6;
    /* More visible */
    z-index: 1;
    background-image:
        /* Large Splashes */
        radial-gradient(8px 8px at 20% 30%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.2) 60%, transparent 100%),
        radial-gradient(12px 12px at 70% 60%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.1) 60%, transparent 100%),
        /* Smaller drops */
        radial-gradient(4px 4px at 40% 80%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
        radial-gradient(3px 3px at 80% 20%, rgba(255, 255, 255, 0.7) 0%, transparent 100%),
        /* Micro mist */
        radial-gradient(1px 1px at 10% 10%, rgba(255, 255, 255, 0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 90%, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
    background-size: cover;
    filter: blur(0.3px) contrast(1.2);
    transition: transform 0.3s ease;
}

/* Shimmer/reflection */
.ip68-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 45%,
            rgba(255, 255, 255, 0.1) 48%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.1) 52%,
            transparent 55%);
    transform: rotate(30deg) translateY(0);
    animation: shimmer-water 4s infinite linear;
    pointer-events: none;
    z-index: 5;
}

@keyframes shimmer-water {
    0% {
        transform: rotate(30deg) translateY(0);
    }

    100% {
        transform: rotate(30deg) translateY(300px);
    }
}

/* Dust Splash Animation Container */
.ip68-card .dust-container {
    padding: 0;
    /* Remove padding if added by accident */
    margin: 0;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

/* Dust Particles */
.ip68-card .dust-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 200, 200, 0.6) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
}

/* Particle Positions & Animations */
.card:hover .ip68-card .dust-particle:nth-child(1) {
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    animation: dust-splash 0.6s ease-out forwards;
}

.card:hover .ip68-card .dust-particle:nth-child(2) {
    top: 30%;
    left: 40%;
    width: 60px;
    height: 60px;
    animation: dust-splash 0.7s ease-out 0.1s forwards;
}

.card:hover .ip68-card .dust-particle:nth-child(3) {
    top: 60%;
    left: 60%;
    width: 80px;
    height: 80px;
    animation: dust-splash 0.5s ease-out 0.05s forwards;
}

.card:hover .ip68-card .dust-particle:nth-child(4) {
    top: 40%;
    left: 70%;
    width: 50px;
    height: 50px;
    animation: dust-splash 0.8s ease-out 0.15s forwards;
}

/* Titanium Brushed Metal Gradient */
.titanium-card {
    /* Authentic Titanium Finish */
    background:
        /* Fine brushed texture */
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.02) 0px,
            rgba(255, 255, 255, 0.02) 1px,
            transparent 1px,
            transparent 3px),
        /* Metallic Sheen Gradient */
        linear-gradient(135deg,
            #2a2a2d 0%,
            #48484d 50%,
            #2a2a2d 100%);
    border-color: rgba(255, 255, 255, 0.2);
    /* Subtle metallic inner glow */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}


/* --- Footer & Awards --- */
footer {
    text-align: center;
    padding: 80px 20px 40px;
    background: #000;
    border-top: 1px solid #111;
}

.awards-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

.award-badge {
    border: 1px solid #333;
    padding: 8px 16px;
    border-radius: 8px;
    color: #666;
    font-size: 13px;
    font-weight: 500;
    cursor: default;
    transition: all 0.3s ease;
}

.award-badge:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.footer-cta h2 {
    font-size: 56px;
    /* Increased size */
    margin-bottom: 32px;
    letter-spacing: -0.02em;
    /* High Contrast Gradient Highlight */
    background: linear-gradient(to right, #ffffff 0%, #a5f3fc 50%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    /* Glow effect */
}

/* Magnetic Button Base Style */
.magnetic-btn {
    background: #fff;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    padding: 16px 40px;
    border-radius: 980px;
    border: none;
    cursor: pointer;
    transition: transform 0.1s linear, background 0.3s ease;
    /* Fast transform for magnet */
    display: inline-block;
    will-change: transform;
}

.magnetic-btn:hover {
    transform: scale(1.05);
    /* JS will override/augment this */
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 80px;
    margin-bottom: 20px;
}

.footer-links a {
    color: #666;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: #fff;
}

.copyright {
    color: #444;
    font-size: 11px;
}

/* --- Recycled Box Polish --- */
/* --- Recycled Box Polish --- */
.recycled-card {
    /* Emerald Tint and Glow Sync */
    background: radial-gradient(circle at center, rgba(0, 163, 108, 0.1), transparent) !important;
    border: 1px solid rgba(0, 255, 150, 0.2) !important;
    /* Mint Green Frame */
    backdrop-filter: blur(40px);
}

.recycled-card .actual-recycle-icon {
    color: #00A36C;
    /* Emerald Green Icon */
}

/* --- Titanium Section (Thematic Tint) --- */
.titanium-card {
    /* Silvery Blue Tint */
    background: linear-gradient(135deg, rgba(160, 190, 255, 0.15), transparent) !important;
    border: 1px solid rgba(160, 200, 255, 0.3) !important;
    /* Silvery Blue Frame */
    backdrop-filter: blur(40px);
    box-shadow: inset 0 0 20px rgba(160, 200, 255, 0.05);
    /* Subtle inner cool glow */
}

.titanium-card h3 {
    color: #e2e8f0 !important;
    /* Cool Silver-White Text */
}

/* --- Card Backs (Ghost Style) --- */
.card-back {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Specific Back Borders to match Front */
.card:has(.titanium-card) .card-back {
    border-color: rgba(210, 210, 210, 0.3);
}

.card:has(.ip68-card) .card-back {
    border-color: rgba(100, 200, 255, 0.3);
}

.back-content.center-align {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* --- Survival/Satellite Section (Thematic Tint) --- */
.satellite-card {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    /* Rugged Thicker Border */
    backdrop-filter: blur(40px);
}

.satellite-card h3,
.satellite-card p {
    color: #FFFFFF !important;
    /* High Contrast White */
}

.eco-icon-wrapper {
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.8);
    /* Better contrast */
    display: flex;
    justify-content: center;
    align-items: center;
}

.actual-recycle-icon {
    width: 40px;
    height: 40px;
    opacity: 0.9;
    transition: transform 0.8s ease-in-out, color 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(0, 163, 108, 0.5));
    /* Add glow to icon since border is gone */
}

/* Parent Hover Interaction */
.card:hover .actual-recycle-icon {
    transform: rotate(360deg);
    color: #10b981;
    /* Optional: light emerald highlight on hover */
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(0, 163, 108, 0.8));
}

/* Mobile: Ensure it resets or behaves nicely */
@media (hover: none) {
    .card:active .actual-recycle-icon {
        transform: rotate(360deg);
    }
}

/* --- Responsive Adjustments for New Sections --- */
@media (max-width: 900px) {
    .cinematic-container {
        flex-direction: column;
        /* Image Top (Default Order), Text Bottom */
        gap: 32px;
    }

    .cinematic-visual {
        width: 100%;
        height: 400px;
    }

    .cinematic-content {
        text-align: center;
    }

    .bento-grid-2 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
}

@media (max-width: 768px) {
    .cinematic-content h2 {
        font-size: 36px;
    }

    .bento-grid-2 {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns for Mobile Parity */
        gap: 12px;
        /* Slightly tighter gap for mobile */
        padding: 0 16px;
    }

    .card-large-2 {
        grid-column: span 2;
        /* Full width */
        grid-row: auto;
        min-height: 220px;
    }

    .card-small {
        grid-column: span 1;
        /* Half width (Side by Side) */
        grid-row: auto;
        min-height: 220px;
    }

    /* Mobile Flip Interaction (Tap/Active) */
    .card:active .card-inner,
    .card:focus .card-inner {
        transform: rotateY(180deg);
    }

    .glass-panel {
        padding: 24px;
    }

    .magnetic-btn {
        width: 100%;
        max-width: 300px;
        /* Easier to tap */
        height: 56px;
        /* Taller on mobile as requested (at least 48px) */
    }

    .awards-container {
        gap: 16px;
    }
}



/* --- Refined Mobile Layout (Intentionally Designed) --- */
@media (max-width: 768px) {

    /* Navigation Compactness */
    nav {
        padding: 1rem;
    }

    .nav-btn {
        padding: 8px 16px;
    }

    /* Hero: Reduce excessive scroll distance */
    .hero-container {
        height: 250vh;
        /* Was 400vh - too long for mobile */
    }

    .hero-content {
        top: 20vh;
        padding: 0 1.5rem;
    }

    h1.headline {
        font-size: 14vw;
        /* Keep impact but fits width */
        margin-bottom: 24px;
    }

    /* Features Section */
    .features {
        padding: 40px 0;
        /* Compact vertical spacing */
    }

    .section-header {
        margin-bottom: 32px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .section-header h2 {
        font-size: 32px;
    }

    .section-header p {
        font-size: 18px;
    }

    /* Cinematic Section: Compact Stack */
    .cinematic-section {
        padding: 60px 0;
    }

    .cinematic-container {
        flex-direction: column !important;
        /* Force stack */
        align-items: center !important;
    }

    /* Explicit styling to ensure Image Top, Text Bottom */
    .cinematic-visual {
        order: 1;
        /* Image First */
        height: 350px;
        /* Increased for visibility */
        margin-bottom: 24px;
        width: 100%;
        display: block;
    }

    .cinematic-image-real {
        opacity: 1;
        /* Fully visible */
        object-position: center;
    }

    .cinematic-content {
        order: 2;
        /* Text Second */
        width: 100%;
        /* Ensure full width text container */
        text-align: center;
    }

    .cinematic-content h2 {
        font-size: 36px;
    }

    /* --- Grid Logic: 2-Column Dense Layout --- */

    /* First Bento (Features) */
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 Cols */
        gap: 12px;
        padding: 0 16px;
    }

    /* Zero-G Camera: Full Width Impact */
    .card-large {
        grid-column: span 2;
        aspect-ratio: 16/10;
        /* Intrinsic cinematic shape */
        min-height: auto;
        perspective: 1000px;
        /* Enhanced depth for 3D effect */
    }

    /* Zero-G Text Glassmorphism */
    .card-large .card-content {
        background: rgba(22, 22, 23, 0.4);
        /* Slightly more transparent */
        backdrop-filter: blur(20px);
        /* Heavy blur as requested */
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 24px;
        border-radius: 16px;
        max-width: 320px;
        /* Constrain text width */
    }

    /* Zero-G Camera Image - 3D Ready */
    .card-large .card-visual-img {
        transform-style: preserve-3d;
        will-change: transform;
        transition: transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1);
        /* Smooth magnetic follow */
    }

    /* Neural & Battery: Side-by-Side (Square-ish) */
    .card-medium {
        grid-column: span 1;
        aspect-ratio: 1/1.2;
        /* Slightly tall square */
        min-height: auto;
    }

    /* Titanium (Unibody): Full Width */
    .card-wide {
        grid-column: span 2;
        min-height: 220px;
    }


    /* Second Bento (Survival) */
    .bento-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 0 16px;
    }

    /* Satellite: Full Width */
    .card-large-2 {
        grid-column: span 2;
        min-height: 240px;
    }

    /* IP68 & Titanium Small: Side-by-Side */
    /* Note: Titanium appears in both grids in HTML provided? 
       In bento-grid-2 it is .card-small. 
       We target .card-small generally. */
    .card-small {
        grid-column: span 1;
        aspect-ratio: 1/1.1;
        min-height: auto;
    }

    /* Recycled: Make it Full Width to close the section */
    .card-small:last-child {
        grid-column: span 2;
        min-height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Card Internals (Compactness) --- */
    .card {
        padding: 0;
        /* Let inner handle padding */
        margin: 0;
    }

    .card-front,
    .card-back {
        padding: 20px;
        /* Reduced from 40px */
    }

    /* Typography Adjustments */
    .card h3,
    .card-front h3 {
        font-size: 18px;
        /* Readable but contained */
        margin-bottom: 8px;
    }

    .card p {
        font-size: 13px;
        line-height: 1.4;
    }

    /* Back Content Lists */
    .back-content ul li {
        font-size: 12px;
        margin-bottom: 8px;
    }

    /* Mobile Flip Interaction */
    .card:active .card-inner {
        transform: rotateY(180deg);
    }

    /* Awards & Footer */
    .awards-container {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    /* Footer Layout Enhancements */
    /* Ensure footer content stacks or aligns nicely */
    .cta-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .magnetic-btn {
        width: 50% !important;
        /* Reduced from 100% */
        min-width: 160px;
        /* Prevent text wrapping */
        max-width: 250px;
        /* Cap resizing */
        margin: 0 auto;
        /* Center it */
        display: block;
    }
}

/* --- Enforced Mobile Spec Card Layout --- */
@media (max-width: 768px) {

    /* Force Full Width Column */
    .bento-grid,
    .bento-grid-2 {
        grid-template-columns: 100% !important;
        gap: 20px !important;
        /* Clear separation */
        padding-left: 16px !important;
        padding-right: 16px !important;
        display: grid !important;
    }

    /* Card Fixed Dimensions (50% Viewport) */
    .card,
    .card-large,
    .card-medium,
    .card-wide,
    .card-small,
    .card-large-2 {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: 50vh !important;
        min-height: 50vh !important;
        max-height: 50vh !important;
        margin: 0 !important;
        aspect-ratio: unset !important;
        transform: translateZ(0);
        /* Hardware accel */
    }

    /* Inner Container Locked */
    .card-inner {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        transform-style: preserve-3d;
        transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* Faces - Exact Match & Clipping */
    .card-front,
    .card-back {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        /* Strict clipping */
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        border-radius: 24px;
        /* Maintain design system radius */
        /* Ensure background doesn't leak */
        background-color: var(--glass-bg);
    }

    .card-back {
        transform: rotateY(180deg);
        z-index: 1;
    }

    /* Fix Flipping In-Place */
    .card.flipped .card-inner {
        transform: rotateY(180deg);
    }

    /* Visuals Fill Completely */
    .card-visual-img,
    .card-visual-img-small,
    .card-visual-wide {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* --- Survival Ready Desktop Geometry Locks --- */
@media (min-width: 769px) {

    /* Main Grid Enforces Rows */
    .bento-grid-2 {
        grid-auto-rows: 400px !important;
        /* Strict backbone */
    }

    /* Generic Card Reset */
    .bento-grid-2 .card {
        /* Force grid cell dimensions */
        width: 100% !important;
        height: 100% !important;
        min-height: 400px !important;
        max-height: 400px !important;
        /* Strict lock */
        contain: size layout paint !important;
    }

    /* COMPONENT A: Satellite SOS (Bar) */
    .bento-grid-2 .card-large-2 {
        grid-column: span 2 !important;
        /* Only explicit rule for Type A */
    }

    /* COMPONENT B: Boxes (IP68, Titanium, Recycled) */
    .bento-grid-2 .card-small {
        grid-column: span 1 !important;
        /* Only explicit rule for Type B */
    }

    /* Internal Geometry Locks */
    .bento-grid-2 .card-inner {
        width: 100% !important;
        height: 100% !important;
        transform-origin: center center;
    }

    .bento-grid-2 .card-front {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        /* Front face always stays locked */
    }

    .bento-grid-2 .card-back {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        /* Enable scrolling for overflow content */
        overflow-x: hidden !important;
    }

    /* Fix Back Face Typography for Density */
    .bento-grid-2 .back-content.center-align {
        padding: 40px;
        max-width: 100%;
    }

    /* Prevent scale jumping on flip */
    .bento-grid-2 .card.flipped:hover .card-inner {
        transform: rotateY(180deg) scale(1.02);
    }
}

/* --- Survival Ready Specific Mobile Hierarchy --- */
@media (max-width: 768px) {

    /* Main Grid: 2 Columns for Box Cards */
    .bento-grid-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        grid-auto-rows: auto !important;
        /* Reset auto rows for mobile fluidity if needed, or strict? Let's use specific heights */
    }

    /* COMPONENT A: Satellite SOS (Full Width Dominant Bar) */
    .bento-grid-2 .card-large-2 {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        height: 25vh !important;
        min-height: 25vh !important;
        max-height: 25vh !important;
        /* Strict lock */
        margin-bottom: 8px !important;
    }

    /* COMPONENT B: Box Cards (Compact & Side-by-Side) */
    .bento-grid-2 .card-small {
        grid-column: span 1 !important;
        width: 100% !important;
        height: 32vh !important;
        min-height: 32vh !important;
        max-height: 32vh !important;
        /* Strict lock */
    }

    /* Strict containment & Scroll Logic */
    .bento-grid-2 .card {
        contain: paint !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* Back Face Scrolling & Density */
    .bento-grid-2 .card-back {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 20px 16px !important;
    }

    .bento-grid-2 .card-front,
    .bento-grid-2 .card-back {
        /* Ensure mobile geometry doesn't leak */
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* Tighter Text Spacing for Boxes */
    .bento-grid-2 .back-content.center-align {
        gap: 8px !important;
    }

    .bento-grid-2 .card-small h3 {
        font-size: 1.1rem !important;
        margin-bottom: 4px !important;
    }

    .bento-grid-2 .card-small p {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }

    /* Ensure content expands for scrolling */
    .bento-grid-2 .back-content {
        height: auto !important;
        min-height: min-content !important;
        width: 100%;
        transform: translateZ(0);
    }
}

/* --- Floating Wrapper for Button --- */
.floating-wrapper {
    display: inline-block;
    /* Physics controlled via JS */
}

/* --- Global Ambient Dust Particles Removed --- */

/* =========================================
   MOBILE OPTIMIZATION (Screens < 768px)
   ========================================= */
@media screen and (max-width: 768px) {

    /* 1. Typography & Hero Scaling */
    h1.headline {
        font-size: 14vw !important;
        /* Larger relative to width on mobile */
        line-height: 1.1;
        margin-bottom: 32px;
    }

    .hero-content {
        top: 25vh !important;
        /* Move text up to avoid covering phone visual if possible */
    }

    .cta-btn.glass {
        padding: 14px 32px;
        /* larger touch target */
        font-size: 18px;
    }

    /* 2. Navigation */
    .nav-container {
        padding: 0 16px;
    }

    .nav-glass-btn {
        padding: 10px 24px;
        /* Easier to tap */
    }

    /* 3. Bento Grid Stacking */
    .bento-grid,
    .bento-grid-2 {
        grid-template-columns: 1fr !important;
        /* Single column stack */
        gap: 32px !important;
    }

    /* Reset row/col spans for mobile stack */
    .card-large,
    .card-medium,
    .card-wide,
    .card-large-2,
    .card-small {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        min-height: 400px;
        /* Ensure enough height for interactions */
    }

    /* 4. Footer & CTA */
    .footer-links {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 40px;
    }

    .footer-links a {
        font-size: 18px;
        /* Readable tap targets */
        padding: 8px 0;
    }

    .footer-cta h2.reveal-heading {
        font-size: 2.5rem !important;
    }

    /* 5. Touch Optimizations */
    .gravity-pill-wrapper {
        bottom: 24px;
        right: 24px;
        transform: scale(0.9);
        /* Slightly smaller UI to save screen space */
    }

    /* Disable hover-only effects that might get stuck */
    .card:hover .card-inner {
        /* On mobile, rely on click/tap, not hover */
        transform: none;
    }

    /* Use the .flipped class exclusively for mobile interactions */
    .card.flipped .card-inner {
        transform: rotateY(180deg);
    }
}