:root {
    --bg: #050505;
    --text: #ffffff;
    --accent: #00e5ff;
    --accent-glow: rgba(0, 229, 255, 0.5);
    --glass: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    /* Static pixel height lock */
    --true-vh: calc(var(--vh, 1vh) * 100);
}
html { 
    scrollbar-width: none; 
    height: 100%;
    overscroll-behavior-y: none;
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
} 
::-webkit-scrollbar { display: none; } 

[data-theme="light"] {
    --bg: #f0f0f0;
    --text: #111;
    --accent: #0066ff;
    --accent-glow: rgba(0, 102, 255, 0.3);
    --glass: rgba(0, 0, 0, 0.05);
    --glass-border: rgba(0, 0, 0, 0.1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; 
    overflow-x: hidden; width: 100%; position: relative;
    min-height: var(--true-vh); 
    transition: background 0.5s;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overscroll-behavior-y: none;
}

.blobs { 
    position: fixed; top: -10%; left: 0; width: 100%; height: 120%; 
    z-index: -1; pointer-events: none; overflow: hidden; 
}
.blob { position: absolute; width: 50vw; height: 50vw; border-radius: 50%; background: var(--accent); opacity: 0.15; filter: blur(80px); animation: float 15s infinite alternate ease-in-out; }
@keyframes float { from { transform: translate(-10%, -10%); } to { transform: translate(10%, 10%); } }

@keyframes pureFade { from { opacity: 0; } to { opacity: 1; } }

.logo-fixed { position: absolute; top: 2rem; left: 2.5rem; font-weight: 900; letter-spacing: -0.5px; font-size: 1.1rem; z-index: 1000; pointer-events: none; animation: pureFade 1s ease-out forwards 0.2s; opacity: 0; }
.theme-toggle-fixed { position: absolute; top: 1.5rem; right: 2rem; width: 44px; height: 44px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; transition: 0.3s; }
.theme-toggle-fixed:hover { background: var(--accent); color: #000; border-color: var(--accent); }

.hero { 
    height: var(--true-vh); 
    display: flex; flex-direction: column; align-items: center; 
    justify-content: flex-start; 
    padding-top: calc(var(--vh) * 12); 
    text-align: center; padding-left: 5%; padding-right: 5%; position: relative; overflow: hidden; transform: translateZ(0); 
}

.hero-pre, .hero h1, .hero-sub { backface-visibility: hidden; }
.hero-pre { text-transform: uppercase; letter-spacing: 4px; font-size: 0.8rem; opacity: 0.6; margin-bottom: 1.5rem; color: var(--accent); animation: fadeUp 0.8s ease-out forwards 0.3s; opacity: 0; }
.hero h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); font-weight: 900; line-height: 0.9; margin-bottom: 1.5rem; letter-spacing: -2px; animation: fadeUp 0.8s ease-out forwards 0.4s; opacity: 0; }
    .hero h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); margin-bottom: 1rem !important; } /* Tested 2.25 base, max 3.5 */
    .hero-pre { font-size: 0.65rem; margin-bottom: 1rem !important; }
    .hero-sub { 
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.65rem; /* Better balance */
        white-space: nowrap; 
        letter-spacing: 1px; 
        animation: fadeUp 0.8s ease-out forwards 0.5s;
        opacity: 0;
        color: rgba(255, 255, 255, 0.8);
    }
    
    /* Section Headers Scaling - Forced Small */

.vacuum-container { 
    width: 100%; max-width: 1200px; height: 400px; 
    position: relative; display: flex; align-items: center; justify-content: center; 
    overflow: visible; perspective: 1200px; transform-style: preserve-3d;
    margin-top: -40px; 
    margin-bottom: 110px; 
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spiralEnter {
    0% { transform: rotateY(45deg) rotateX(10deg) scale(0) rotateZ(120deg); opacity: 0; }
    100% { transform: rotateY(45deg) rotateX(10deg) scale(1) rotateZ(0deg); opacity: 1; }
}

.processor { 
    width: 154px; height: 154px; 
    background: radial-gradient(circle, var(--bg) 30%, rgba(0, 229, 255, 0.05) 70%, rgba(0, 229, 255, 0.2) 100%);
    border-radius: 50%; position: relative; z-index: 10; 
    box-shadow: 0 0 60px rgba(0, 229, 255, 0.2), inset 0 0 50px var(--bg);
    transform-style: preserve-3d; 
    animation: spiralEnter 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, 
               floatHole 4s infinite ease-in-out alternate 1.5s;
    opacity: 0;
}
@keyframes floatHole { from { transform: rotateY(45deg) rotateX(10deg) translateY(0); } to { transform: rotateY(45deg) rotateX(10deg) translateY(-10px); } }

.processor.solid-ring::after { 
    content: ''; position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; 
    border-radius: 46% 54% 52% 48% / 54% 46% 48% 52%; 
    border: 2px solid var(--accent); animation: spinBlob 8s infinite linear; 
    box-shadow: 0 0 30px var(--accent-glow), inset 0 0 20px var(--accent-glow);
    opacity: 0.9; pointer-events: none;
}
@keyframes spinBlob { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.conveyor-belt {
    position: absolute; left: calc(50% + 15px); top: 50%; width: 60vw; height: 300px; 
    transform: translateY(-50%) translateZ(150px) rotateY(-45deg) scale(1.2);
    transform-origin: left center; z-index: 100; display: flex; align-items: center;
    overflow: visible; mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    pointer-events: none; transform-style: preserve-3d; perspective: 500px; 
    will-change: transform;
    opacity: 0; /* Start hidden for stability delay */
    transition: opacity 1s ease-out;
}
.film-strip { 
    display: flex; gap: 15px; 
    animation: infiniteScroll 80s linear infinite; 
    transform-style: preserve-3d; 
    will-change: transform;
}
@keyframes infiniteScroll { 
    0% { transform: translate3d(-50%, 0, 0); } 
    100% { transform: translate3d(0, 0, 0); } 
}

.frame {
    width: 154px; height: 88px; background: #000;
    border-top: 8px solid #000; border-bottom: 8px solid #000;
    border-left: 2px solid #000; border-right: 2px solid #000;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow: hidden;
    opacity: 0;
    animation: pureFade 0.5s ease-out forwards 0.5s;
}
.frame img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-out; 
    z-index: 1;
}

.play-icon { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 24px; height: 24px;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(12px);
    border-radius: 50%;
    display: flex;
    align-items: center; justify-content: center;
    z-index: 100; pointer-events: none;
    border: 1px solid rgba(255,255,255,0.2);
    opacity: 0.8 !important;
    transition: opacity 0.8s ease-out;
}
.play-icon::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid white;
    margin-left: 1px;
}

@media(min-width: 900px) { 
    .processor { width: 238px; height: 238px; } 
    .vacuum-container { margin-top: 40px; }
}
@media(max-width: 768px) { .processor { width: 195px; height: 195px; } .logo-fixed { top: 1.5rem; left: 1.5rem; font-size: 0.9rem; } .theme-toggle-fixed { top: 1rem; right: 1rem; width: 38px; height: 38px; } }

.particle {
    position: absolute; width: 100px; height: 75px; 
    background-color: #000; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; 
    background-size: cover; background-repeat: no-repeat; background-position: center;
    display: flex; align-items: center; justify-content: center; 
    pointer-events: none; z-index: 50; --start-x: -20%;
    animation: particleEnter 0.5s ease-out forwards;
    /* GPU Optimization Hints */
    will-change: transform;
    transform: translateZ(0);
}
.particle img {
    width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease-out;
    transform: translateZ(0); /* Force GPU layer */
}
@keyframes particleEnter { from { opacity: 0; } to { opacity: 1; } }
@media(min-width: 1280px) { .particle { --start-x: -50%; } }
.anim-in { animation: suckIn 2.5s ease-in forwards; }

@keyframes suckIn { 
    0% { left: var(--start-x); top: var(--start-y); opacity: 0; transform: scale(1.2) translateZ(-100px) rotate(-10deg); } 
    15% { opacity: 1; } 
    60% { left: 35%; top: calc(var(--start-y) * 0.6 + 20%); transform: scale(0.3) translateZ(-100px) rotate(10deg); filter: brightness(1.2); }
    100% { left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) translateZ(-150px) rotate(90deg) scale(2.0, 0.1); filter: brightness(3) blur(10px); box-shadow: 0 0 50px white; } 
}

.section-comp { padding: 3rem 5% 4rem; display: flex; flex-direction: column; align-items: center; }
.comp-header { width: 100%; max-width: 900px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
.comp-title-group { text-align: left; }
.ratio-switch-group { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ratio-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; opacity: 0.5; }
.ratio-buttons { 
    display: flex; position: relative; background: rgba(255,255,255,0.03); 
    backdrop-filter: blur(10px); padding: 4px; border-radius: 100px; 
    border: 1px solid rgba(255,255,255,0.1); 
    user-select: none; -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.05);
}
.ratio-btn { 
    position: relative; z-index: 2; padding: 0.6rem 1.4rem; border: none; background: transparent; 
    color: var(--text); font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem; font-weight: 700; cursor: pointer; 
    transition: all 0.4s ease; opacity: 0.4; letter-spacing: 1px;
    text-transform: uppercase;
}
.ratio-btn.active { opacity: 1; color: #000; }

/* THE SLIDING PILL - PREMIUM GLOW VERSION */
.ratio-pill {
    position: absolute; top: 4px; left: 4px; bottom: 4px;
    width: calc(50% - 4px); background: #fff;
    border-radius: 100px; z-index: 1;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(255,255,255,0.3);
}
.ratio-buttons[data-active="portrait"] .ratio-pill {
    transform: translateX(100%);
}

.comp-wrapper {
    position: relative; width: 100%; max-width: 1200px; height: 506px;
    margin: 0 auto; display: flex; justify-content: center; align-items: center;
    overflow: visible;
}

.comp-box { 
    width: 100%; max-width: 900px; height: 100%; position: relative; 
    border-radius: 12px; overflow: hidden; box-shadow: 0 20px 80px rgba(0,0,0,0.6); 
    border: 1px solid var(--glass-border); 
    transition: max-width 0.8s cubic-bezier(0.16, 1, 0.3, 1), width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    background: #000; z-index: 10;
    flex-shrink: 0;
}

/* DATA-MODE DRIVEN LAYOUT */
.comp-wrapper[data-mode="portrait"] .comp-box { max-width: 285px; }
.comp-wrapper[data-mode="portrait"] .side-video {
    width: 285px; opacity: 1; margin: 0 10px;
}

.after-img { width: 100%; height: 100%; object-fit: cover; }

.side-video {
    height: 506px; object-fit: cover;
    border-radius: 12px; border: 1px solid var(--glass-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    width: 0; opacity: 0; margin: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.section-stat { 
    padding: 4rem 5% 6rem; 
    display: flex; justify-content: center; 
}

.section-phone-showcase {
    padding: 2rem 5% 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -100px;
    position: relative;
    z-index: 200;
}
.phone-frame {
    position: relative;
    width: 280px;
    height: 580px;
    background: #111;
    border: 12px solid #222;
    border-radius: 48px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
    overflow: hidden;
    transform: none;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #222;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index: 10;
}
.phone-video {
    width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer;
}
.phone-controls {
    position: absolute; bottom: 12px; right: 12px; z-index: 15;
    background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 1px solid rgba(255,255,255,0.1); color: white; transition: 0.3s; font-size: 10px;
}
.phone-controls:hover { background: rgba(255,255,255,0.2); }
.phone-reflection {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
    pointer-events: none; z-index: 5;
}
.phone-poster-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 2; pointer-events: none;
    transition: opacity 0.5s ease-out;
}
.phone-poster-overlay.hidden { opacity: 0; }

.stat-container { max-width: 850px; text-align: center; }
.stat-container p { font-size: 1rem; line-height: 1.6; opacity: 0.7; letter-spacing: 0.8px; font-weight: 400; }
.stat-container strong { color: var(--accent); font-weight: 700; }
.stat-link { font-size: 0.8rem; color: var(--accent); opacity: 0.5; text-decoration: none; transition: 0.3s; margin-top: 10px; display: inline-block; }
.stat-link:hover { opacity: 1; text-decoration: underline; }

@media(max-width: 768px) {
    .particle { --start-x: -90% !important; } /* Nudged slightly further off-screen */
    .section-phone-showcase { margin-top: -95px; padding-bottom: 1.5rem; }
    .section-stat { padding: 2rem 5% 4rem; }
    .stat-container p { font-size: 0.9rem; line-height: 1.6; }
    .comp-header { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem !important; }
    .comp-title-group h2 { font-size: 1.6rem !important; margin-bottom: 0.5rem; white-space: nowrap !important; }
    .comp-sub-desktop { display: none !important; }
    .comp-sub-mobile { display: block !important; opacity: 0.5 !important; }
    .ratio-btn { padding: 0.3rem 0.8rem !important; font-size: 0.65rem !important; }
    .timer-badge { font-size: 1.5rem !important; }
    .timer-label { font-size: 0.55rem !important; }
    
    /* Mobile Triple Video */
    .comp-wrapper { height: 300px; max-height: 50vw; }
    .comp-box, .side-video { height: 100%; }
    .comp-wrapper[data-mode="portrait"] .comp-box { max-width: 30vw; }
    .comp-wrapper[data-mode="portrait"] .side-video { width: 30vw; margin: 0 3px; }

    /* Fix Hero Spacing on Mobile */
    .hero { padding-top: 130px; justify-content: flex-start; min-height: var(--true-vh); }
    .vacuum-container { margin-bottom: 110px; }
    .processor { width: 117px !important; height: 117px !important; }
    .frame { width: 117px !important; height: 67px !important; }
    .section-contact { padding-top: 3rem !important; }

    /* Scale Phone Down 10% */
    .phone-frame { width: 252px; height: 522px; border-radius: 43px; border-width: 11px; }
    .phone-notch { width: 108px; height: 22px; }
}

.section-timeline { padding: 4rem 5% 8rem; position: relative; }
.timeline-header { max-width: 1000px; margin: 0 auto 3rem; text-align: left; display: flex; justify-content: space-between; align-items: flex-end; }
.timeline-header h2 { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; opacity: 0.8; }
.timer-badge { font-family: monospace; font-size: 2rem; font-weight: 900; color: var(--accent); text-shadow: 0 0 20px var(--accent-glow); }
.timer-label { font-size: 0.7rem; font-weight: 700; color: #555; vertical-align: middle; margin-left: 5px; }
.timer-container-desktop { display: none; text-align: right; }
.timer-container-mobile { display: block; position: sticky; top: 10vh; z-index: 50; width: 100%; text-align: right; padding-right: 5%; pointer-events: none; }
@media(min-width: 900px) { .timer-container-mobile { display: none; } .timer-container-desktop { display: block; } }
.timeline-container { display: flex; flex-direction: column; width: 100%; max-width: 500px; margin: 0 auto; position: relative; gap: 6rem; padding-left: 0; }
.timeline-track-mask { position: absolute; top: 0; bottom: 0; width: 2px; left: 29px; background: var(--glass-border); overflow: hidden; z-index: 0; }
.timeline-progress { position: absolute; top: 0; left: 0; width: 100%; height: 150px; background: linear-gradient(to top, transparent, var(--accent), transparent); box-shadow: 0 0 25px var(--accent); opacity: 0; transition: opacity 0.5s ease; border-radius: 10px; will-change: transform, opacity; }
.timeline-step { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding-left: 6.5rem; min-height: 120px; }
.step-dot { width: 60px; height: 60px; background: var(--bg); border: 2px solid var(--glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #555; box-shadow: 0 0 0 10px var(--bg); transition: 0.3s; position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.step-dot.active { border-color: var(--accent); color: #fff; background: var(--accent); box-shadow: 0 0 30px var(--accent-glow), 0 0 0 10px var(--bg); }
.step-content h3 { font-size: 1.3rem; margin-bottom: 0.5rem; color: #888; transition: 0.3s; }
.step-content p { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; opacity: 0.8; line-height: 1.4; }
.step-dot.active ~ .step-content h3 { color: #fff; }
@media(min-width: 900px) { .timeline-container { flex-direction: row; justify-content: space-between; gap: 0; padding-left: 0; max-width: 1000px; margin-top: 4rem; } .timeline-track-mask { top: 30px; left: 0; right: 0; width: 100%; height: 2px; bottom: auto; } .timeline-progress { top: 0; left: 0; height: 100%; width: 200px; background: linear-gradient(to right, transparent, var(--accent), transparent); transform: translateX(-100%); } .timeline-step { align-items: center; text-align: center; padding-left: 0; flex: 1; min-height: auto; } .step-dot { position: relative; margin: 0 auto 2rem; left: auto; top: auto; } }

.timer-asterisk {
    color: #555;
    font-size: 0.8rem;
    vertical-align: baseline;
    margin-left: 1px;
    font-weight: 700;
}

.section-phone-showcase {
    padding: 2rem 5% 2rem;
    position: relative;
    z-index: 200;
    /* Added fade-in and slide-up animation style */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 2s ease-out, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-phone-showcase.force-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Remove old body-state based selectors for this section to avoid conflict */
body.content-ready .section-phone-showcase,
body.user-scrolled .section-phone-showcase {
    /* Reset to default behaviour, let .force-visible handle it */
    transition-delay: 0s;
}
.section-gallery { padding: 6rem 5%; text-align: center; }
.gallery-window { 
    position: relative; width: 100%; max-width: 1200px; margin: 0 auto; 
    max-height: 400px; overflow: hidden; 
    transition: max-height 1.2s cubic-bezier(0.16, 1, 0.3, 1); 
}
.gallery-grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 0.4rem; /* Tightened from 1rem */
    width: 100%; 
}
@media (min-width: 768px) { 
    .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } /* Tightened from 1.5rem */
    .gallery-window { max-height: 520px; } 
}
@media (min-width: 1024px) { 
    .gallery-grid { grid-template-columns: repeat(4, 1fr); } 
}
.gallery-item { 
    position: relative; aspect-ratio: 16/9; background: var(--glass); border-radius: 4px; overflow: hidden; cursor: pointer; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.gallery-item.revealed { opacity: 1; transform: translateY(0); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 1; transition: filter 0.8s ease-out, opacity 0.6s; will-change: filter; }
.lazy-blur { filter: blur(10px); transform: scale(1.05); } 
.lazy-loaded { filter: blur(0); transform: scale(1); }
.gallery-item video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; transition: opacity 0.4s; }
.gallery-item:hover img { transform: scale(1.05); }

/* SLICK MINIMAL PLAY ICON */
.gallery-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; 
    height: 40px; 
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(12px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border: 1px solid rgba(255,255,255,0.2);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    opacity: 0.9;
}
/* CUSTOM CSS TRIANGLE */
.gallery-play-btn::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid white;
    margin-left: 2px;
}
.gallery-item:hover .gallery-play-btn {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
}

.play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; color: var(--accent); opacity: 0; transition: 0.3s; text-shadow: 0 0 20px rgba(0,0,0,0.8); z-index: 3; }
.gallery-item:hover .play-overlay { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
.fade-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 150px; background: linear-gradient(to top, var(--bg) 10%, transparent); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1rem; z-index: 20; }
.btn-load { pointer-events: auto; padding: 0.8rem 2.5rem; background: var(--text); color: var(--bg); border: none; border-radius: 100px; font-weight: 700; font-size: 0.9rem; cursor: pointer; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }

.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); backdrop-filter: blur(20px); z-index: 2000; opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease; }
.lightbox.active { opacity: 1; pointer-events: auto; }
.lightbox-content { position: relative; width: 90vw; max-width: 1200px; aspect-ratio: 16/9; background: #000; box-shadow: 0 40px 100px rgba(0,0,0,0.8); border-radius: 8px; overflow: hidden; display: flex; transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.lightbox.active .lightbox-content { transform: scale(1); }
.lightbox-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(0,0,0,0.5); border-radius: 50%; color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; z-index: 10; backdrop-filter: blur(10px); }
.lightbox-close:hover { background: #fff; color: #000; }

@media(max-width: 768px) { .lightbox.active .lightbox-content { transform: scale(1); } }

.section-contact { padding: 6rem 5%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact-container { width: 100%; max-width: 600px; }
.contact-form { display: flex; flex-direction: column; gap: 1rem; width: 100%; }

.form-row { display: flex; gap: 1rem; }
.form-row input { width: 50%; } /* Force 50/50 split */

/* Custom Checkbox Style */
.checkbox-group { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 5px; }
.checkbox-group input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; }
.urgent-label { font-size: 0.85rem; font-weight: 700; color: #ff4d4d; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.urgent-icon { font-size: 1.1rem; }

input, select, textarea {
    width: 100%; background: var(--glass); border: 1px solid var(--glass-border);
    padding: 1rem; color: var(--text); border-radius: 8px;
    font-family: 'Inter', sans-serif; font-size: 0.9rem;
    transition: 0.3s; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 15px var(--accent-glow); }

/* Custom Select Style */
select { appearance: none; cursor: pointer; }

.btn-submit {
    padding: 1rem 2rem; background: var(--accent); color: #000;
    border: none; border-radius: 100px; font-weight: 900;
    font-family: 'Inter', sans-serif; /* Consistent Font */
    font-size: 0.9rem; letter-spacing: 1px; cursor: pointer;
    transition: 0.3s; margin-top: 1rem; width: 100%;
    box-shadow: 0 0 20px var(--accent-glow);
}
.timeline-disclaimer {
    font-size: 0.7rem; opacity: 0.25; margin-top: 2rem; 
    text-align: center; max-width: 600px; margin-left: auto; margin-right: auto;
    line-height: 1.4;
}
.confetti { position: absolute; pointer-events: none; z-index: 100; }
.btn-submit:hover { transform: scale(1.02); background: #fff; box-shadow: 0 0 40px rgba(255,255,255,0.5); }

/* TILE SELECTION GROUP */
.radio-tiles {
    display: flex; gap: 1rem; width: 100%; margin-bottom: 1rem;
}
.tile-option {
    flex: 1; position: relative; cursor: pointer;
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: 8px; padding: 1rem 0.5rem;
    text-align: center; color: var(--text); opacity: 0.5;
    transition: 0.3s; font-size: 0.9rem; font-weight: 700;
}
.tile-option:hover { opacity: 0.8; }

/* Active State */
.tile-option:has(input:checked) {
    border-color: var(--accent); opacity: 1;
    box-shadow: 0 0 15px var(--accent-glow);
    background: rgba(255,255,255,0.08);
}

.tile-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.tile-option small {
    display: block; font-size: 0.65rem; opacity: 0.6; margin-top: 2px; font-weight: 400;
}

/* CUSTOM TEXTAREA PLACEHOLDER OVERLAY */
.textarea-overlay {
    position: absolute; top: 1.1rem; left: 1rem;
    display: flex; flex-direction: column;
    pointer-events: none; transition: 0.2s ease;
    color: var(--text);
}
textarea:focus ~ .textarea-overlay,
textarea:not(:placeholder-shown) ~ .textarea-overlay {
    opacity: 0; transform: translateY(-5px);
}

/* STAGE MANAGER */
section:not(.hero):not(.section-phone-showcase), footer { opacity: 0; transition: opacity 1s ease; pointer-events: none; }
body.content-ready section:not(.section-phone-showcase), body.content-ready footer { opacity: 1; pointer-events: auto; }
footer { padding: 2rem 5% 4rem; text-align: center; border-top: 1px solid var(--glass-border); opacity: 0.5; }