:root {
    --bg-color: #000000;
    --text-primary: #f5f5f7;
    --text-secondary: #86868b;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow-x: hidden;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Top Navigation */
.top-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    pointer-events: none; /* Prevent nav bar from blocking clicks below it */
    box-sizing: border-box;
}

.nav-link {
    pointer-events: auto; /* Re-enable clicks for the buttons */
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.nav-icon {
    width: 16px;
    height: 16px;
    will-change: transform;
}

.overlay, .overlay-dark {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}
.overlay { background: rgba(0,0,0,0.3); }
.overlay-dark { background: rgba(0,0,0,0.6); }

/* Typography */
.apple-text { font-size: 6vw; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; }
.apple-sub { font-size: 3vw; font-weight: 500; color: var(--text-secondary); letter-spacing: -0.02em; }
.apple-text-medium { font-size: 4vw; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.apple-text-large { font-size: 5vw; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.apple-text-huge { font-size: 8vw; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.apple-body { font-size: 1.5rem; color: var(--text-secondary); margin-top: 20px; font-weight: 400; max-width: 400px;}
.apple-btn { 
    display: inline-block; margin-top: 30px; padding: 12px 24px; 
    background: #fff; color: #000; border-radius: 30px; 
    text-decoration: none; font-weight: 500; font-size: 1.1rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.apple-btn:hover { transform: scale(1.05); opacity: 0.9; }


/* Sections */
section { position: relative; width: 100vw; overflow: hidden; }

/* Sec 1: Hero */
.sec-hero { height: 100vh; display: flex; align-items: center; justify-content: center; }
.video-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.content-hero { position: relative; z-index: 2; text-align: center; }

/* Car Sequence Wrapper */
.car-sequence-wrap {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 5;
}

/* Sec 2: Split (Pixel Precision & Video Scrub) */
.sec-split { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; 
    display: flex; 
    align-items: center; 
    padding: 0 8%; 
    justify-content: space-between;
    background: radial-gradient(circle at 65% 50%, #060a14 0%, #030408 65%, #000000 100%);
    overflow: hidden;
    z-index: 4;
}

.pixel-bg-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: auto;
}

.split-left { 
    width: 44%; 
    z-index: 2; 
    position: relative;
    pointer-events: auto;
}

.pixel-hud-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 100px;
    font-family: 'SF Mono', 'Roboto Mono', 'Inter', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.12);
}

.pixel-indicator-blink {
    width: 7px;
    height: 7px;
    background: #38bdf8;
    border-radius: 50%;
    box-shadow: 0 0 8px #38bdf8;
    animation: pixelPulse 1.8s ease-in-out infinite;
}

@keyframes pixelPulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px #38bdf8; }
    50% { opacity: 0.35; transform: scale(0.7); box-shadow: 0 0 2px #38bdf8; }
}

.pixel-hud-tag {
    color: #e2e8f0;
    font-weight: 600;
}

.pixel-hud-sep {
    color: rgba(255, 255, 255, 0.25);
}

.pixel-hud-stat {
    color: #38bdf8;
    font-weight: 500;
}

.gradient-pixel-text {
    background: linear-gradient(135deg, #ffffff 15%, #38bdf8 65%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.pixel-metrics-row {
    display: flex;
    gap: 28px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pixel-metric-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pixel-metric-item .metric-val {
    font-size: 20px;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.02em;
    font-family: 'Inter', -apple-system, sans-serif;
}

.pixel-metric-item .metric-lbl {
    font-size: 10.5px;
    color: #64748b;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
}

.split-right { 
    width: 48%; 
    height: 72vh; 
    z-index: 2; 
    position: relative;
}

.video-box { 
    width: 100%; 
    height: 100%; 
    border-radius: 36px; 
    overflow: hidden; 
    position: relative;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.95), 0 0 40px -5px rgba(56, 189, 248, 0.15);
}

/* Sec 3: Expand (Fluidity Drive) */
.sec-expand { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; 
    background-color: #000000;
    overflow: hidden;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.expand-video-wrap { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden;
    will-change: transform, filter;
}

.expand-text { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 6; 
    text-align: center; 
    width: 100%; 
    pointer-events: none;
}

.fluidity-card {
    display: inline-block;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.fluidity-title {
    color: #ffffff !important;
    font-size: 7.5vw;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.05;
    margin: 0;
    text-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.video-hud-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    z-index: 5;
    transition: opacity 0.3s ease;
}

.video-hud-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.video-hud-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: rgba(8, 12, 22, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    font-family: 'SF Mono', monospace, sans-serif;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #e2e8f0;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.hud-icon-scroll {
    font-style: normal;
    color: #38bdf8;
    font-size: 13px;
    display: inline-block;
    animation: rotateIcon 4s linear infinite;
}

@keyframes rotateIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.video-hud-time {
    font-family: 'SF Mono', monospace, sans-serif;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(8, 12, 22, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-hud-bottom {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scrub-timeline-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    position: relative;
}

.scrub-timeline-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #38bdf8, #818cf8);
    border-radius: 4px;
    box-shadow: 0 0 10px #38bdf8;
    transition: width 0.05s linear;
}

/* Sec 4: Float */
.sec-float { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;}
.float-content { width: 80%; text-align: center; z-index: 2; pointer-events: none;}
.full-screen-3d { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: auto;}

/* Sec 4.5: Liquid Glass Vision & Time Cycle */
.sec-vision { 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 5%; 
    position: relative; 
    overflow: hidden; 
    background-color: #020111; /* Starting night color */
}

/* Time Cycle Elements */
.sky-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #020111; z-index: 0; }
.sky-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Layer 1: Bright prominent stars */
        radial-gradient(1.8px 1.8px at 12% 18%, #ffffff, transparent),
        radial-gradient(2px 2px at 28% 10%, #ffffff, transparent),
        radial-gradient(1.6px 1.6px at 42% 16%, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(2.2px 2.2px at 58% 12%, #ffffff, transparent),
        radial-gradient(1.8px 1.8px at 73% 20%, #ffffff, transparent),
        radial-gradient(2px 2px at 88% 8%, #ffffff, transparent),
        radial-gradient(1.6px 1.6px at 94% 22%, rgba(255, 255, 255, 0.9), transparent),
        /* Layer 2: Mid-sky stars */
        radial-gradient(1.4px 1.4px at 6% 32%, rgba(224, 242, 254, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 18% 28%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1.2px 1.2px at 24% 42%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1.6px 1.6px at 35% 32%, rgba(224, 242, 254, 0.9), transparent),
        radial-gradient(1.3px 1.3px at 48% 26%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 54% 38%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1.2px 1.2px at 64% 28%, rgba(224, 242, 254, 0.8), transparent),
        radial-gradient(1.6px 1.6px at 70% 42%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1.4px 1.4px at 82% 32%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1.5px 1.5px at 91% 45%, rgba(224, 242, 254, 0.85), transparent),
        /* Layer 3: Faint distant stars */
        radial-gradient(1px 1px at 4% 15%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1.1px 1.1px at 15% 48%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 22% 20%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.2px 1.2px at 32% 48%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 39% 22%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1.2px 1.2px at 45% 48%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 52% 16%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1.1px 1.1px at 61% 48%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 68% 16%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.2px 1.2px at 78% 12%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 85% 48%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1.1px 1.1px at 96% 36%, rgba(255, 255, 255, 0.7), transparent),
        /* Layer 4: Lower horizon twinkle */
        radial-gradient(1px 1px at 9% 62%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.2px 1.2px at 20% 68%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 34% 60%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.3px 1.3px at 66% 62%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 76% 66%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.2px 1.2px at 87% 62%, rgba(255, 255, 255, 0.7), transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}
.celestial-body { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.sun { width: 30vw; height: 30vw; bottom: -30vw; left: -15vw; background: radial-gradient(circle, #fffdf2 0%, #ffdf00 40%, rgba(255,223,0,0) 80%); filter: blur(30px); }
.moon { 
    width: 12vw; 
    height: 12vw; 
    bottom: -12vw; 
    left: -6vw; 
    background: radial-gradient(circle, rgba(240, 245, 255, 0.75) 0%, rgba(200, 215, 240, 0.48) 32%, rgba(140, 165, 205, 0.22) 58%, rgba(100, 130, 170, 0) 80%); 
    filter: blur(12px); 
}

/* The darker period on the text */
.time-dot {
    color: #555;
    -webkit-text-fill-color: #555;
}

.vision-left { width: 45%; z-index: 2; position: relative; }
.vision-right { width: 50%; display: flex; justify-content: center; align-items: center; z-index: 2; }

/* Increased max-width for the animation asset */
.vision-bg { width: 100%; max-width: 800px; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255,255,255,0.4); position: relative;}

/* Subtle reflection overlay over the GIF to make the element look premium */
.vision-bg::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 40%); pointer-events: none;}
.vision-gif { width: 100%; height: auto; object-fit: contain; display: block; }

/* The True Glass Container (3D Pill Design from screenshot) */
.vision-content { 
    position: relative; 
    z-index: 2; 
    text-align: center; 
    background: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(60px); 
    -webkit-backdrop-filter: blur(60px); 
    border-radius: 100px; /* Perfect pill shape */
    padding: 4vw; 
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.15), /* Soft drop shadow */
        inset 0px 8px 15px rgba(255, 255, 255, 0.9), /* 3D top highlight */
        inset 0px -8px 15px rgba(0, 0, 0, 0.1); /* 3D bottom shading */
    border: 1px solid rgba(255, 255, 255, 0.7); 
    overflow: hidden; /* Keeps raindrops inside the glass */
}

.vision-text-group { display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; }

/* Solid, sleek dark text */
.dark-glass-text { font-size: 4vw; font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: #111111; margin-bottom: 8px; }
.dark-glass-sub { font-size: 1.2vw; font-weight: 500; color: #444444; letter-spacing: -0.01em; }

/* The icons exactly as requested */
.vision-icons {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: 10px;
}
.pill-icon {
    width: 3vw;
    height: 3vw;
    stroke: #111;
    transition: transform 0.3s ease;
}
.pill-icon:hover { transform: scale(1.1); }

/* Water Droplets Effect - Realistic Teardrops */
.water-drop {
    position: absolute;
    width: 6px;
    height: 9px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* Teardrop shape */
    box-shadow: inset 0px -2px 4px rgba(255,255,255,0.3), inset 0px 2px 2px rgba(255,255,255,0.1), 0 3px 5px rgba(0,0,0,0.1);
    backdrop-filter: blur(1px);
    z-index: 1; /* Behind text but inside glass */
    pointer-events: none;
    animation: slideDownGlass linear forwards;
}

@keyframes slideDownGlass {
    0% { 
        transform: translateY(0); 
        opacity: 0;
    }
    5% { 
        opacity: 1; 
    }
    90% { 
        opacity: 1;
    }
    100% { 
        transform: translateY(18vw); 
        opacity: 0; 
    }
}

/* Sec 5: Glassmorphism Marquee */
.new-sec-5 { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; background: #050505; overflow: hidden; }
.marquee-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-10deg); width: 120vw; display: flex; flex-direction: column; gap: 20px; opacity: 0.1; }
.marquee-track { display: flex; white-space: nowrap; font-size: 8vw; font-weight: 800; color: transparent; -webkit-text-stroke: 2px #ffffff; letter-spacing: 0.05em; }
.marquee-track span { animation: scrollMarquee 20s linear infinite; }
.marquee-track.reverse span { animation: scrollMarqueeRev 25s linear infinite; }
@keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scrollMarqueeRev { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.glass-card { position: relative; z-index: 2; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 5vw; border-radius: 40px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); text-align: center; }

/* ==========================================================================
   Section 4.5.1: Interactive Micro-Interactions Bento Laboratory
   ========================================================================== */
.sec-interactive {
    min-height: 100vh;
    padding: 120px 5% 140px;
    background: radial-gradient(circle at 50% 15%, #0d1222 0%, #04050a 100%);
    position: relative;
    z-index: 5;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Subtle High-Tech Laboratory Grid Backdrop */
.sec-interactive::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 75%);
    pointer-events: none;
}

.interactive-stage {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Section Header */
.interactive-header {
    text-align: center;
    margin-bottom: 56px;
}

.interactive-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #94a3b8;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    animation: badgePulse 2s infinite ease-in-out;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

.interactive-heading {
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.04em;
    margin-bottom: 12px;
    line-height: 1.1;
}

.interactive-heading .accent-dot {
    color: #38bdf8;
    -webkit-text-fill-color: #38bdf8;
}

.interactive-sub {
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    color: #94a3b8;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 6-Card Bento Showcase Grid */
.interactive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    width: 100%;
}

@media (max-width: 1100px) {
    .interactive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .interactive-grid {
        grid-template-columns: 1fr;
    }
}

/* Lab Card Base - Minimal & Refined */
.lab-card {
    background: linear-gradient(155deg, rgba(22, 27, 40, 0.7) 0%, rgba(11, 14, 22, 0.9) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
    position: relative;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.lab-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.06);
}

.lab-card-body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ==========================================================================
   Module 01: Pot-Colored Button morphing into Lush Botanical Flora
   ========================================================================== */
.botanic-btn-wrap {
    position: relative;
    width: 220px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Flora Layer: Completely Concealed in Idle (Zero Giveaway, Zero Green Dots) */
.botanic-flora-layer {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(40px) scale(0);
    width: 220px;
    height: 240px;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.6s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.35s ease, visibility 0.35s;
}

.flora-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Stems: Collapsed in Idle */
.flora-stem {
    transform-origin: 120px 240px;
    transform: scaleY(0) scaleX(0.2);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.35s ease;
}

/* Leaves: Fully Hidden (scale 0, opacity 0) in Idle State */
.flora-leaf {
    transform-box: fill-box;
    transform-origin: center bottom;
    opacity: 0;
    transform: scale(0);
    transition: transform 0.6s cubic-bezier(0.34, 1.5, 0.64, 1), opacity 0.35s ease;
}

.leaf-center,
.leaf-left,
.leaf-right,
.leaf-midleft,
.leaf-midright {
    opacity: 0;
    transform: scale(0);
}

/* Pot Morph Button (Idle: Sleek Frosted Glass Button) */
.pot-morph-btn {
    position: relative;
    width: 120px;
    height: 44px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    transition: all 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.pot-btn-label {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e2e8f0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 10;
}

/* 3D Pot Ceramic Components (Hidden during idle button state) */
.pot-rim {
    width: 118px;
    height: 18px;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleY(0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
    z-index: 8;
}

.pot-soil {
    width: 104px;
    height: 12px;
    background: radial-gradient(ellipse at center, #064e3b 0%, #022c22 100%);
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%) scale(0.6);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(16, 185, 129, 0.3);
    opacity: 0;
    pointer-events: none;
    z-index: 9;
    overflow: hidden;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.soil-texture {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#10b981 1px, transparent 1px);
    background-size: 4px 4px;
    opacity: 0.7;
}

.pot-body {
    width: 98px;
    height: 56px;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
    border-radius: 0 0 10px 10px;
    box-shadow: inset 4px 0 12px rgba(255, 255, 255, 0.15), inset -8px 0 14px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 7;
}

.pot-sheen {
    position: absolute;
    top: 0;
    left: 12px;
    width: 16px;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), transparent);
    pointer-events: none;
}

.pot-accent-line {
    position: absolute;
    top: 14px;
    left: 10%;
    width: 80%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.pot-shadow {
    width: 90px;
    height: 8px;
    background: rgba(0, 0, 0, 0.45);
    filter: blur(4px);
    border-radius: 50%;
    margin-top: 6px;
    transition: all 0.45s ease;
}

/* ==========================================================================
   Hover State: The Magic Happens (Button morphs to pot & plant blooms)
   ========================================================================== */
.card-botanic:hover .pot-morph-btn,
.card-botanic.blooming .pot-morph-btn,
.botanic-btn-wrap:hover .pot-morph-btn {
    width: 118px;
    height: 72px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.card-botanic:hover .pot-btn-label,
.card-botanic.blooming .pot-btn-label,
.botanic-btn-wrap:hover .pot-btn-label {
    opacity: 0;
    transform: scale(0.6) translateY(-10px);
}

.card-botanic:hover .pot-rim,
.card-botanic.blooming .pot-rim,
.botanic-btn-wrap:hover .pot-rim {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
}

.card-botanic:hover .pot-soil,
.card-botanic.blooming .pot-soil,
.botanic-btn-wrap:hover .pot-soil {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.card-botanic:hover .pot-body,
.card-botanic.blooming .pot-body,
.botanic-btn-wrap:hover .pot-body {
    opacity: 1;
}

.card-botanic:hover .pot-shadow,
.card-botanic.blooming .pot-shadow,
.botanic-btn-wrap:hover .pot-shadow {
    width: 86px;
    height: 12px;
    margin-top: -2px;
    background: rgba(0, 0, 0, 0.6);
    filter: blur(5px);
}

/* Flora Blooming on Hover */
.card-botanic:hover .botanic-flora-layer,
.card-botanic.blooming .botanic-flora-layer,
.botanic-btn-wrap:hover .botanic-flora-layer {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.card-botanic:hover .flora-stem,
.card-botanic.blooming .flora-stem,
.botanic-btn-wrap:hover .flora-stem {
    transform: scale(1);
    opacity: 1;
}

.card-botanic:hover .leaf-center,
.card-botanic.blooming .leaf-center,
.botanic-btn-wrap:hover .leaf-center {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition-delay: 0.08s;
    animation: leafBreezeCenter 4s ease-in-out infinite 0.7s;
}

.card-botanic:hover .leaf-left,
.card-botanic.blooming .leaf-left,
.botanic-btn-wrap:hover .leaf-left {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
    transition-delay: 0.14s;
    animation: leafBreezeLeft 4.5s ease-in-out infinite 0.8s;
}

.card-botanic:hover .leaf-right,
.card-botanic.blooming .leaf-right,
.botanic-btn-wrap:hover .leaf-right {
    opacity: 1;
    transform: scale(1) rotate(8deg);
    transition-delay: 0.2s;
    animation: leafBreezeRight 5s ease-in-out infinite 0.9s;
}

.card-botanic:hover .leaf-midleft,
.card-botanic.blooming .leaf-midleft,
.botanic-btn-wrap:hover .leaf-midleft {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.26s;
}

.card-botanic:hover .leaf-midright,
.card-botanic.blooming .leaf-midright,
.botanic-btn-wrap:hover .leaf-midright {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.32s;
}

@keyframes leafBreezeCenter {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1) rotate(2deg) translateY(-2px); }
}

@keyframes leafBreezeLeft {
    0%, 100% { transform: scale(1) rotate(-8deg); }
    50% { transform: scale(1) rotate(-11deg) translateY(-1px); }
}

@keyframes leafBreezeRight {
    0%, 100% { transform: scale(1) rotate(8deg); }
    50% { transform: scale(1) rotate(11deg) translateY(-1px); }
}

/* ==========================================================================
   Module 02: Celestial Day / Night Chronology
   ========================================================================== */
.chrono-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 180px;
}

.chrono-switch-wrap {
    position: relative;
    display: inline-block;
}

.chrono-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chrono-track {
    position: relative;
    width: 156px;
    height: 80px;
    border-radius: 44px;
    cursor: pointer;
    display: block;
    padding: 6px;
    background: #111827;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(0, 0, 0, 0.7), inset 0 -1px 2px rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    user-select: none;
}

/* Backdrop Skies */
.chrono-backdrop {
    position: absolute;
    inset: 0;
    border-radius: 44px;
    transition: opacity 0.5s ease-in-out;
}

.day-sky {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 60%, #0369a1 100%);
    opacity: 1;
}

.night-sky {
    background: linear-gradient(135deg, #090d16 0%, #0f172a 60%, #1e1b4b 100%);
    opacity: 0;
}

/* Day Elements: Clouds */
.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.cloud-1 { top: 22px; right: 20px; width: 34px; height: 12px; }
.cloud-1::before { content: ""; position: absolute; top: -6px; left: 8px; width: 14px; height: 14px; background: #fff; border-radius: 50%; }
.cloud-2 { top: 44px; right: 38px; width: 26px; height: 10px; opacity: 0.75; }

/* Night Elements: Stars */
.chrono-star {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    animation: chronoTwinkle 2.5s infinite ease-in-out;
}
.cstar-1 { top: 18px; left: 24px; width: 2.5px; height: 2.5px; animation-delay: 0.2s; }
.cstar-2 { top: 38px; left: 36px; width: 2px; height: 2px; animation-delay: 0.6s; }
.cstar-3 { top: 52px; left: 20px; width: 3px; height: 3px; animation-delay: 1.1s; }
.cstar-4 { top: 26px; left: 54px; width: 1.8px; height: 1.8px; animation-delay: 1.6s; }
.cstar-5 { top: 56px; left: 58px; width: 2.2px; height: 2.2px; animation-delay: 2.1s; }

@keyframes chronoTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.shooting-star {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 1.5px;
    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.4) 50%, transparent);
    transform: rotate(-35deg);
    opacity: 0;
    pointer-events: none;
}

.chrono-input:checked + .chrono-track .shooting-star {
    animation: shootStarAnim 3.8s ease-in-out infinite 0.6s;
}

@keyframes shootStarAnim {
    0% { transform: translate(0, 0) rotate(-35deg); opacity: 0; width: 0; }
    15% { opacity: 1; width: 36px; }
    35% { transform: translate(55px, 32px) rotate(-35deg); opacity: 0; width: 0; }
    100% { opacity: 0; }
}

/* The Celestial Orb Knob */
.chrono-orb {
    position: relative;
    z-index: 10;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateX(0);
}

.orb-sun {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffef0 0%, #ffd447 45%, #ff8c1a 90%);
    box-shadow: 0 0 20px rgba(255, 180, 40, 0.7), inset -3px -3px 8px rgba(180, 80, 0, 0.4);
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.orb-moon {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f8fafc 0%, #cbd5e1 50%, #64748b 95%);
    box-shadow: 0 0 16px rgba(200, 225, 255, 0.35), inset -4px -4px 10px rgba(15, 23, 42, 0.7), inset 2px 2px 5px rgba(255, 255, 255, 0.5);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Mini Moon Craters */
.mini-crater {
    position: absolute;
    background: #64748b;
    border-radius: 50%;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.4);
}
.cr-1 { top: 16px; left: 18px; width: 12px; height: 12px; }
.cr-2 { top: 36px; left: 32px; width: 9px; height: 9px; }
.cr-3 { top: 22px; left: 40px; width: 7px; height: 7px; }
.mini-maria {
    position: absolute;
    top: 28px;
    left: 14px;
    width: 22px;
    height: 18px;
    background: rgba(71, 85, 105, 0.45);
    border-radius: 60% 40% 50% 50%;
}

/* AM / PM Labels */
.chrono-labels {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 18px;
    pointer-events: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    z-index: 5;
}

.label-am { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: color 0.3s ease; }
.label-pm { color: rgba(255, 255, 255, 0.4); transition: color 0.3s ease; }

/* Checked State: Shift to Night */
.chrono-input:checked + .chrono-track .day-sky { opacity: 0; }
.chrono-input:checked + .chrono-track .night-sky { opacity: 1; }
.chrono-input:checked + .chrono-track .chrono-orb { transform: translateX(76px); }
.chrono-input:checked + .chrono-track .orb-sun { opacity: 0; transform: rotate(90deg); }
.chrono-input:checked + .chrono-track .orb-moon { opacity: 1; transform: rotate(0deg); }
.chrono-input:checked + .chrono-track .label-am { color: rgba(255, 255, 255, 0.35); }
.chrono-input:checked + .chrono-track .label-pm { color: #ffffff; text-shadow: 0 0 8px rgba(147, 197, 253, 0.6); }

/* ==========================================================================
   Module 03: Spatial Dynamic Island Capsule (Siri Fluid Waveform)
   ========================================================================== */
.island-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 180px;
    perspective: 800px;
}

.island-capsule {
    position: relative;
    width: 136px;
    height: 42px;
    border-radius: 21px;
    background: #090c13;
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    transition: width 0.5s cubic-bezier(0.34, 1.45, 0.64, 1),
                height 0.5s cubic-bezier(0.34, 1.45, 0.64, 1),
                border-radius 0.5s cubic-bezier(0.34, 1.45, 0.64, 1),
                border-color 0.4s ease,
                box-shadow 0.5s ease;
}

/* Fluid Siri Aurora Mesh Glow (Reveals and animates on hover/expanded) */
.island-aurora {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        rgba(6, 182, 212, 0.3) 0deg,
        rgba(236, 72, 153, 0.25) 90deg,
        rgba(139, 92, 246, 0.3) 180deg,
        rgba(59, 130, 246, 0.28) 270deg,
        rgba(6, 182, 212, 0.3) 360deg
    );
    filter: blur(20px);
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: rotateAurora 9s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes rotateAurora {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.island-glass-sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent);
    pointer-events: none;
    z-index: 2;
}

/* Idle State Content */
.island-idle-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 5;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.island-mini-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00f2fe;
    box-shadow: 0 0 8px #00f2fe, 0 0 2px #fff;
    animation: miniDotBreathe 2s ease-in-out infinite;
}

@keyframes miniDotBreathe {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.35); opacity: 1; box-shadow: 0 0 12px #00f2fe, 0 0 3px #fff; }
}

.island-mini-bars {
    display: flex;
    align-items: center;
    gap: 2.5px;
    height: 12px;
}

.island-mini-bars span {
    width: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.7);
    animation: idleBarWave 1.4s ease-in-out infinite alternate;
}
.island-mini-bars span:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.island-mini-bars span:nth-child(2) { height: 11px; animation-delay: 0.3s; }
.island-mini-bars span:nth-child(3) { height: 8px; animation-delay: 0.5s; }

@keyframes idleBarWave {
    0% { height: 4px; }
    100% { height: 11px; }
}

.island-idle-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f1f5f9;
}

/* Expanded Active State Content */
.island-active-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    z-index: 5;
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
    transition: opacity 0.35s ease 0.1s, transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s;
}

/* Media Artwork Icon */
.island-media-art {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0284c7 0%, #6366f1 50%, #ec4899 100%);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.art-glyph {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    position: relative;
}
.art-glyph::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: #ffffff;
}

.art-pulse-ring {
    position: absolute;
    inset: -3px;
    border-radius: 13px;
    border: 1.5px solid rgba(14, 165, 233, 0.6);
    animation: artPulse 2s ease-out infinite;
    pointer-events: none;
}

@keyframes artPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* Details & Track Info */
.island-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    flex: 1;
    margin: 0 14px;
    overflow: hidden;
}

.island-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.island-track-title {
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.island-badge {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Dynamic Equalizer Wave Bars */
.island-eq-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 18px;
}

.island-eq-bars span {
    width: 2.5px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, #00f2fe 0%, #4facfe 100%);
    box-shadow: 0 0 6px rgba(0, 242, 254, 0.5);
    transform-origin: bottom;
    animation: eqDance 1.1s ease-in-out infinite alternate;
    animation-delay: var(--d);
}

@keyframes eqDance {
    0% { height: 3px; opacity: 0.5; }
    100% { height: var(--h); opacity: 1; }
}

/* Tactile Play/Pause Button */
.island-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    outline: none;
    transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.island-play-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.1);
}

.btn-play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 2px;
    transition: all 0.25s ease;
}

.island-capsule.playing .btn-play-icon {
    width: 8px;
    height: 9px;
    border-style: double;
    border-width: 0 0 0 8px;
    border-color: #ffffff;
    margin-left: 0;
}

/* HOVER / EXPANDED STATE */
.card-capsule:hover .island-capsule,
.island-capsule.expanded {
    width: 250px;
    height: 72px;
    border-radius: 20px;
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.8), 0 0 30px rgba(56, 189, 248, 0.22);
}

.card-capsule:hover .island-aurora,
.island-capsule.expanded .island-aurora {
    opacity: 0.85;
}

.card-capsule:hover .island-idle-content,
.island-capsule.expanded .island-idle-content {
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
}

.card-capsule:hover .island-active-content,
.island-capsule.expanded .island-active-content {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* ==========================================================================
   Module 04: Spatial 3D VisionOS Glass Folder
   ========================================================================== */
.folder-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 180px;
    perspective: 1200px;
}

.spatial-folder-wrap {
    position: relative;
    cursor: pointer;
    user-select: none;
}

.spatial-folder-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.spatial-folder {
    position: relative;
    width: 180px;
    height: 125px;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.glass-folder-back {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.05), 0 20px 48px rgba(0, 0, 0, 0.6);
}

/* Realistic Code Document Sheets inside */
.code-doc {
    position: absolute;
    bottom: 8px;
    left: 8%;
    width: 84%;
    height: 94px;
    border-radius: 8px;
    background: #181d28;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    padding: 8px 10px;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.doc-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.doc-badge {
    font-size: 7px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    color: #fff;
}
.badge-html { background: #ef4444; }
.badge-css { background: #3b82f6; }
.badge-js { background: #eab308; color: #000; }
.badge-ts { background: #06b6d4; }
.badge-glsl { background: #a855f7; }

.doc-title {
    font-size: 9px;
    font-weight: 700;
    color: #cbd5e1;
    font-family: monospace;
}

.doc-lines span {
    display: block;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 4px;
}
.doc-1 .doc-lines span:nth-child(1) { width: 55%; background: rgba(239, 68, 68, 0.6); }
.doc-1 .doc-lines span:nth-child(2) { width: 80%; background: rgba(255, 255, 255, 0.2); }
.doc-1 .doc-lines span:nth-child(3) { width: 65%; background: rgba(56, 189, 248, 0.5); }

.doc-2 .doc-lines span:nth-child(1) { width: 70%; background: rgba(59, 130, 246, 0.6); }
.doc-2 .doc-lines span:nth-child(2) { width: 45%; background: rgba(236, 72, 153, 0.5); }
.doc-2 .doc-lines span:nth-child(3) { width: 60%; background: rgba(255, 255, 255, 0.2); }

.doc-3 .doc-lines span:nth-child(1) { width: 65%; background: rgba(234, 179, 8, 0.6); }
.doc-3 .doc-lines span:nth-child(2) { width: 75%; background: rgba(34, 197, 94, 0.5); }
.doc-3 .doc-lines span:nth-child(3) { width: 40%; background: rgba(255, 255, 255, 0.2); }

.doc-4 .doc-lines span:nth-child(1) { width: 50%; background: rgba(6, 182, 212, 0.6); }
.doc-4 .doc-lines span:nth-child(2) { width: 85%; background: rgba(129, 140, 248, 0.5); }
.doc-4 .doc-lines span:nth-child(3) { width: 60%; background: rgba(255, 255, 255, 0.2); }

.doc-5 .doc-lines span:nth-child(1) { width: 75%; background: rgba(168, 85, 247, 0.6); }
.doc-5 .doc-lines span:nth-child(2) { width: 55%; background: rgba(236, 72, 153, 0.5); }
.doc-5 .doc-lines span:nth-child(3) { width: 70%; background: rgba(255, 255, 255, 0.2); }

/* Stacking depths */
.doc-1 { z-index: 15; }
.doc-2 { z-index: 14; }
.doc-3 { z-index: 13; }
.doc-4 { z-index: 12; }
.doc-5 { z-index: 11; }

/* Front Acrylic Glass Cover */
.glass-folder-front {
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 100px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.4);
    transform-origin: bottom;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 20;
}

.glass-sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
    border-radius: 14px 14px 0 0;
}

.folder-badge-pill {
    position: absolute;
    top: -12px;
    right: 10px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 700;
    color: #cbd5e1;
    z-index: 25;
}

.live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 6px #38bdf8;
}

/* Spatial Fan-out on Hover & Checked */
.spatial-folder-toggle:checked ~ .spatial-folder,
.card-folder:hover .spatial-folder {
    transform: rotateX(12deg) rotateY(-6deg);
}

.spatial-folder-toggle:checked ~ .spatial-folder .glass-folder-front,
.card-folder:hover .glass-folder-front {
    transform: rotateX(-48deg);
}

.spatial-folder-toggle:checked ~ .spatial-folder .doc-1,
.card-folder:hover .doc-1 {
    transform: translateY(-72px) rotate(-12deg) translateX(-18px) translateZ(30px);
}
.spatial-folder-toggle:checked ~ .spatial-folder .doc-2,
.card-folder:hover .doc-2 {
    transform: translateY(-56px) rotate(10deg) translateX(18px) translateZ(22px);
}
.spatial-folder-toggle:checked ~ .spatial-folder .doc-3,
.card-folder:hover .doc-3 {
    transform: translateY(-40px) rotate(-5deg) translateX(-6px) translateZ(14px);
}
.spatial-folder-toggle:checked ~ .spatial-folder .doc-4,
.card-folder:hover .doc-4 {
    transform: translateY(-25px) rotate(6deg) translateX(12px) translateZ(8px);
}
.spatial-folder-toggle:checked ~ .spatial-folder .doc-5,
.card-folder:hover .doc-5 {
    transform: translateY(-10px) rotate(-2deg);
}

.spatial-folder-toggle:checked ~ .spatial-folder .code-doc:hover,
.card-folder:hover .code-doc:hover {
    transform: translateY(-84px) scale(1.1) translateZ(50px) !important;
    filter: brightness(1.2);
    z-index: 30;
}

/* ==========================================================================
   Module 05: Machined Haptic Rotary Dial
   ========================================================================== */
.dial-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 180px;
}

.knob-container {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.knob-container:active {
    cursor: grabbing;
}

/* 24 Calibration Ticks Ring */
.led-ticks-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dial-tick {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 7px;
    background: #334155;
    border-radius: 1px;
    transform-origin: center -65px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Position ticks radially */
.dial-tick:nth-child(1)  { transform: translate(-50%, -50%) rotate(-135deg); }
.dial-tick:nth-child(2)  { transform: translate(-50%, -50%) rotate(-123deg); }
.dial-tick:nth-child(3)  { transform: translate(-50%, -50%) rotate(-111deg); }
.dial-tick:nth-child(4)  { transform: translate(-50%, -50%) rotate(-99deg); }
.dial-tick:nth-child(5)  { transform: translate(-50%, -50%) rotate(-87deg); }
.dial-tick:nth-child(6)  { transform: translate(-50%, -50%) rotate(-75deg); }
.dial-tick:nth-child(7)  { transform: translate(-50%, -50%) rotate(-63deg); }
.dial-tick:nth-child(8)  { transform: translate(-50%, -50%) rotate(-51deg); }
.dial-tick:nth-child(9)  { transform: translate(-50%, -50%) rotate(-39deg); }
.dial-tick:nth-child(10) { transform: translate(-50%, -50%) rotate(-27deg); }
.dial-tick:nth-child(11) { transform: translate(-50%, -50%) rotate(-15deg); }
.dial-tick:nth-child(12) { transform: translate(-50%, -50%) rotate(-3deg); }
.dial-tick:nth-child(13) { transform: translate(-50%, -50%) rotate(9deg); }
.dial-tick:nth-child(14) { transform: translate(-50%, -50%) rotate(21deg); }
.dial-tick:nth-child(15) { transform: translate(-50%, -50%) rotate(33deg); }
.dial-tick:nth-child(16) { transform: translate(-50%, -50%) rotate(45deg); }
.dial-tick:nth-child(17) { transform: translate(-50%, -50%) rotate(57deg); }
.dial-tick:nth-child(18) { transform: translate(-50%, -50%) rotate(69deg); }
.dial-tick:nth-child(19) { transform: translate(-50%, -50%) rotate(81deg); }
.dial-tick:nth-child(20) { transform: translate(-50%, -50%) rotate(93deg); }
.dial-tick:nth-child(21) { transform: translate(-50%, -50%) rotate(105deg); }
.dial-tick:nth-child(22) { transform: translate(-50%, -50%) rotate(117deg); }
.dial-tick:nth-child(23) { transform: translate(-50%, -50%) rotate(129deg); }
.dial-tick:nth-child(24) { transform: translate(-50%, -50%) rotate(141deg); }

.dial-tick.active {
    background: #00f2fe;
    box-shadow: 0 0 10px #00f2fe, 0 0 2px #ffffff;
}

/* CNC Machined Knob Body */
.rotary-knob {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.75), 0 0 0 2px #181c26, 0 0 0 4px #2b3345, 0 0 0 6px rgba(0, 242, 254, 0.15);
    transition: transform 0.15s ease-out;
    transform: rotate(60deg);
}

.knob-metallic-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 180deg, #1b202c 0%, #3d4659 25%, #161b24 50%, #3d4659 75%, #1b202c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.28), inset 0 -3px 6px rgba(0, 0, 0, 0.85);
}

.knob-notch {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: #0b0f19;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}

.notch-led {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: #00f2fe;
    box-shadow: 0 0 8px #00f2fe, 0 0 2px #ffffff;
}

.knob-readout {
    position: absolute;
    bottom: -15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.readout-val {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.readout-label {
    font-size: 8px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.1em;
}

/* ==========================================================================
   Module 06: Holographic 3D Prismatic Titanium Pass
   ========================================================================== */
.holo-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
    perspective: 1000px;
}

.holo-card {
    position: relative;
    width: 220px;
    height: 136px;
    border-radius: 16px;
    cursor: pointer;
    transform-style: preserve-3d;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12);
    transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.holo-card:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(147, 197, 253, 0.25);
}

/* Brushed Titanium Base Layer */
.holo-base {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e2433 0%, #0d1017 45%, #181d2a 100%);
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12), transparent 70%),
        linear-gradient(135deg, #1e2433 0%, #0d1017 45%, #181d2a 100%);
    border-radius: 16px;
}

/* Iridescent Prismatic Rainbow Foil */
.holo-foil {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        125deg,
        rgba(255, 0, 128, 0.15) 0%,
        rgba(0, 240, 255, 0.2) 25%,
        rgba(255, 220, 0, 0.15) 50%,
        rgba(168, 85, 247, 0.2) 75%,
        rgba(255, 0, 128, 0.15) 100%
    );
    mix-blend-mode: color-dodge;
    opacity: 0.65;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.holo-card:hover .holo-foil {
    opacity: 0.95;
}

/* Dynamic Specular Glare Reflection */
.holo-glare {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 65%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Luxury Card Content */
.holo-content {
    position: relative;
    z-index: 5;
    height: 100%;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Metallic Gold EMV Chip */
.emv-chip {
    width: 32px;
    height: 24px;
    border-radius: 5px;
    background: linear-gradient(135deg, #d4af37 0%, #aa8420 50%, #f6e076 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.chip-line {
    position: absolute;
    background: rgba(0, 0, 0, 0.35);
}
.chip-line.l1 { top: 0; left: 11px; width: 1px; height: 100%; }
.chip-line.l2 { top: 11px; left: 0; width: 100%; height: 1px; }
.chip-core {
    position: absolute;
    top: 6px;
    left: 8px;
    width: 15px;
    height: 11px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 3px;
}

/* Contactless Wave Icon */
.nfc-icon {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nfc-icon span {
    border: 1.8px solid rgba(255, 255, 255, 0.65);
    border-left: none;
    border-top: none;
    border-bottom: none;
    border-radius: 50%;
    height: 14px;
    width: 6px;
}
.nfc-icon span:nth-child(2) { height: 10px; }
.nfc-icon span:nth-child(3) { height: 6px; }

/* Mid Row Holographic Brand Seal */
.card-mid-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.holo-brand-seal {
    display: flex;
    align-items: center;
    gap: 6px;
}

.seal-prism {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, #38bdf8, #ec4899, #eab308);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
    transform: rotate(45deg);
}

.brand-text {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.15em;
    background: linear-gradient(90deg, #ffffff 0%, #cbd5e1 50%, #ffffff 100%);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.card-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card-number {
    font-family: 'Space Grotesk', 'Inter', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.card-tier {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Contactless Tap Pulse Shockwave */
.holo-tap-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.8) 0%, transparent 70%);
    box-shadow: 0 0 20px #38bdf8;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.holo-card.tapped .holo-tap-ripple {
    animation: holoRipple 0.6s ease-out forwards;
}

@keyframes holoRipple {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(7); opacity: 0; }
}

/* UIVerse Animated WhatsApp Button */
.wa-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);
  cursor: pointer;
  transition-duration: .3s;
  overflow: hidden;
  position: relative;
}

.wa-icon {
  width: 24px;
  transition-duration: .3s;
}

.wa-icon path {
  fill: white;
}

.wa-btn:hover {
  width: 140px;
  border-radius: 50px;
  transition-duration: .3s;
  background-color: #25D366; /* WhatsApp Green */
  align-items: center;
}

.wa-btn:hover .wa-icon {
  width: 50px;
  transition-duration: .3s;
  transform: translateY(60%);
}

.wa-btn::before {
  position: absolute;
  top: -20px;
  content: "WhatsApp";
  color: white;
  transition-duration: .3s;
  font-size: 2px;
  font-family: 'Inter', sans-serif;
}

.wa-btn:hover::before {
  font-size: 13px;
  opacity: 1;
  transform: translateY(30px);
  transition-duration: .3s;
}

/* Sec 6: Multi-Image Parallax Reveal */
.new-sec-6 { height: 150vh; position: relative; background: #0a0a0a; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.parallax-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.parallax-img { position: absolute; background-size: cover; background-position: center; border-radius: 30px; filter: grayscale(100%) contrast(1.2); transition: filter 0.5s ease; }
.parallax-img:hover { filter: grayscale(0%) contrast(1); }
.img-1 { top: 10%; left: 5%; width: 30vw; height: 40vh; }
.img-2 { top: 20%; right: 5%; width: 25vw; height: 50vh; }
.img-3 { bottom: 10%; left: 30%; width: 40vw; height: 35vh; }
.mix-blend { mix-blend-mode: difference; z-index: 5; text-align: center; color: #fff;}

/* Sec 6.5: Horizontal Scroll */
.new-sec-extra { height: 100vh; overflow: hidden; background: #000; position: relative; }
.horiz-container { display: flex; width: 300vw; height: 100%; will-change: transform; }
.horiz-panel { width: 100vw; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;}
.panel-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255,255,255,0.05); padding: 8vw; border-radius: 40px; text-align: center; backdrop-filter: blur(10px); transform: perspective(1000px) rotateY(15deg) scale(0.8); transition: transform 0.5s ease; opacity: 0.5;}
.horiz-panel.active .panel-card { transform: perspective(1000px) rotateY(0deg) scale(1); opacity: 1; }
.panel-card h2 { font-size: 8vw; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(90deg, #fff, #555); -webkit-background-clip: text; color: transparent;}
.panel-card p { font-size: 1.5vw; color: #888; margin-top: 20px;}
.panel-1 { background: radial-gradient(circle at top left, #1a0b1c, #000); }
.panel-2 { background: radial-gradient(circle at top center, #0b1c1a, #000); }
.panel-3 { background: radial-gradient(circle at top right, #1c150b, #000); }

/* Sec 7: Morphing Gradient Finale */
.new-sec-7 { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; clip-path: circle(0% at 50% 50%); background: #000; perspective: 1000px; }
.gradient-bg { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, #050505, #222222, #0a0a0a, #1a1a1a); background-size: 400% 400%; animation: gradientMesh 15s ease infinite; z-index: 0; opacity: 0.8; filter: blur(30px);}
@keyframes gradientMesh { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.finale-content { position: relative; z-index: 2; text-align: center; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,0.8); transform-style: preserve-3d; will-change: transform; }
.text-light { color: #cccccc !important; }

@media (max-width: 768px) {
    .apple-text { font-size: 12vw; }
    .apple-text-medium, .apple-text-large { font-size: 8vw; }
    .sec-split { flex-direction: column; justify-content: center; text-align: center; height: auto; min-height: 100vh; padding: 60px 6%; }
    .split-left { width: 100%; }
    .video-box { position: relative; top: auto; right: auto; width: 100%; height: 45vh; margin-top: 30px; }
    .pixel-metrics-row { justify-content: center; }
    .float-video { opacity: 0.3; width: 100%; height: 100%; right: 0; top: 0; transform: none; border-radius: 0;}
}