:root {
    --bg-color: #ffffff;
    --text-color: #111111;
    --text-muted: #666666;
    --accent-color: #e5e5e5;
    --nav-bg: rgba(255, 255, 255, 0.7);
    --border-color: rgba(0, 0, 0, 0.1);

    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --transition-speed: 0.4s;
    --transition-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg-color: #080808;
    --text-color: #f5f5f5;
    --text-muted: #a0a0a0;
    --accent-color: #222222;
    --nav-bg: rgba(20, 20, 20, 0.6);
    --border-color: rgba(255, 255, 255, 0.1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.5s ease, color 0.5s ease;
    overflow-x: hidden;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.fade-in-up {
    animation: fadeIn 1s var(--transition-ease) forwards;
}

/* --- Navigation --- */
.floating-nav {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    background: rgba(20, 20, 20, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50px;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.3s, border-color 0.3s;
    /* Entrance Animation */
    opacity: 0;
    animation: slideDownFade 0.8s ease-out 2.5s forwards;
}

@keyframes slideDownFade {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Navbar Theme Optimization for Dark Mode (Orange tint or similar?) */

.nav-links {
    display: flex;
    gap: 2rem;
    flex: 1;
    /* Occupy left */
}

.nav-logo {
    flex: 1;
    /* Occupy center */
    text-align: center;
}

.nav-actions {
    flex: 1;
    /* Occupy right */
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* Hamburger - Hidden on Desktop */
.hamburger {
    display: none;
}

/* Nav Menu (Mobile Sidebar) - Hidden on Desktop */
.nav-menu {
    display: none;
}

/* Desktop-only elements visible on large screens */
.desktop-only {
    display: flex;
}

.nav-links a {
    color: #f5f5f5;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s;
}


.nav-logo a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-logo {
    height: 32px;
    /* Adjusted for premium nav height */
    width: auto;
    filter: brightness(1.1);
    /* Slight pop on black */
}

/* Navbar Theme Optimization for Dark Mode (Orange tint or similar?) */
/* User requested "match with background". The background is lava. So maybe a slight orange glow or text? */
[data-theme="dark"] .nav-logo a {
    color: #fff;
    /* Keep white for readability on dark nav */
}

[data-theme="dark"] .nav-links a:hover {
    color: #fff;
    /* White hover */
}

/* --- Typography --- */
.accent-font {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
}

/* Hero Title Colors */
.hero-title {
    color: #fff;
    /* Always white due to background image */
}

.hero-subtitle {
    color: #fff;
    /* Ensure subtitle stays white */
}

.hero-title .accent-font {
    color: #fff;
    /* Default White */
    text-shadow: none;
}

/* Specific Light Mode Overrides */
[data-theme="light"] .hero-title {
    color: #fff;
    /* Stay white in light mode too */
}

[data-theme="light"] .hero-subtitle {
    color: #fff;
}

/* The word "Obsidian" becomes orange in white mode ONLY */
/* The word "Obsidian" stays white */
[data-theme="light"] .hero-title .accent-font {
    color: #fff;
}

[data-theme="dark"] .hero-title .accent-font {
    color: #fff;
    /* White in dark mode */
}

/* "Ready to make..." font application */
.rocks-overlay-text h2.accent-font {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #fff;
    /* Always white on rocks */
    text-transform: none;
}


/* --- Why Choose Us Custom Divider --- */
.section-divider {
    width: 80%;
    height: 3px;
    margin: 4rem auto 0;
    border-radius: 50%;
    /* Tapered ends look */
    background: linear-gradient(90deg, transparent, var(--text-color), transparent);
    opacity: 0.8;
    position: relative;
    /* Glow effect */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .section-divider {
    background: linear-gradient(90deg, transparent, #fff, transparent);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Optional: Add a second line for "High tech" feel */
.section-divider::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 20%;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--text-color), transparent);
    opacity: 0.4;
}

[data-theme="dark"] .section-divider::before {
    background: linear-gradient(90deg, transparent, #fff, transparent);
}

/* Animations */
@keyframes float-atm {

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

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

@keyframes rise-arrow {

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

    50% {
        transform: translateY(-10px);
    }
}

@keyframes flip-calendar {

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

    50% {
        transform: rotateY(180deg);
    }
}

.anim-atm svg {
    animation: float-atm 4s ease-in-out infinite;
}

.anim-arrow svg {
    animation: rise-arrow 2s ease-in-out infinite;
}

.anim-calendar svg {
    animation: flip-calendar 6s ease-in-out infinite;
}

/* Subtle card hover scale is already in generic .feature-card styles usually, ensuring it: */
.feature-card {
    transition: transform 0.3s ease, border-color 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}


/* --- Footer Adjustments --- */
.giant-footer-text {
    font-size: clamp(2rem, 10vw, 8rem);
    /* Reduced max size significantly */
    font-weight: 800;
    line-height: 1;
    margin: 0;
    letter-spacing: -0.02em;
    transform: translateY(0);
    /* Remove cutoff if smaller */
    padding-bottom: 2rem;
    white-space: nowrap;
    background: linear-gradient(to bottom, #fff, #444);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.9;
    text-align: center;
}


/* --- Scroll Nudge Icon --- */
.scroll-nudge-fixed svg {
    /* Make it look nicer if needed, stroke width etc */
    stroke-width: 1.5;
}

/* --- Scrollytelling Path Color update for Dark Mode if not already set --- */
/* Ensure path color matches theme */
[data-theme="dark"] .process-path path {
    stroke: #ffffff;
}

[data-theme="light"] .process-path path {
    stroke: #000000;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-toggle {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    transition: transform 0.2s ease;
}

.theme-toggle:hover {
    transform: scale(1.1);
}

.hidden {
    display: none;
}

.btn-primary {
    background-color: var(--text-color);
    color: var(--bg-color);
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Force navbar button to stay white/black regardless of theme */
.floating-nav .btn-primary {
    background-color: #f5f5f5 !important;
    color: #080808 !important;
}

/* Hero Section */
.hero-section {
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    /* Removed padding to let glass fill edge-to-edge */
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    max-width: 900px;
}

/* Updated Hero Title per request: Impactful text */
.hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2rem;
    /* Entrance Animation */
    opacity: 0;
    animation: slideUpFade 1s ease-out 2.8s forwards;
    /* Delay after loader */
}

.hero-subtitle {
    /* Entrance Animation - staggered */
    opacity: 0;
    animation: slideUpFade 1s ease-out 3.2s forwards;
}

.hero-content .btn-hero {
    /* Entrance Animation - staggered */
    opacity: 0;
    animation: slideUpFade 1s ease-out 3.6s forwards;
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title em {
    font-style: italic;
    font-weight: 400;
    display: inline-block;
    /* Required for transform */
    animation: zoomInFancy 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 3.5s forwards;
    /* Elastic ease, delayed */
    opacity: 0;
    /* Start hidden */
    transform: scale(0.5) translateY(-30px);
}

@keyframes zoomInFancy {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(-60px);
        filter: blur(15px);
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    }

    50% {
        filter: blur(0);
        text-shadow: 0 0 60px rgba(255, 255, 255, 0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
        text-shadow: none;
    }
}

/* Spotlight Effect */
.spotlight {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

[data-theme="light"] .spotlight {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--text-muted);
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 2.5rem;
}

/* Glass Overlay - Full Cover behind content */
.glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.4);
    /* DarkTint */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
    /* On top of light rays (0), below content (2) */
    pointer-events: none;
}

[data-theme="light"] .glass-overlay {
    background: rgba(255, 255, 255, 0.1);
}

/* Light Rays Background */
.light-rays-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #111111 50%, #080808 100%);
    overflow: hidden;
}

[data-theme="light"] .light-rays-bg {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.light-rays-canvas {
    mix-blend-mode: screen;
}

.btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background: transparent;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 1.1rem;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.btn-hero:hover {
    background: var(--text-color);
    color: var(--bg-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}

/* Why Choose Us Section */
.why-us-section {
    padding: 6rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.section-header h2 em {
    font-family: serif;
    /* Adding a touch of elegance or just italic */
    font-style: italic;
    font-weight: 400;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.15rem;
    line-height: 1.6;
}

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

.feature-card {
    padding: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: transform 0.4s var(--transition-ease), background 0.4s;
}

.feature-card:hover {
    /* transform: translateY(-8px);  <-- Removed to avoid conflict with GSAP Parallax */
    border-color: var(--text-color);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
    background: var(--nav-bg);
}

.icon-box svg {
    margin-bottom: 1.5rem;
    color: var(--text-color);
    width: 32px;
    height: 32px;
}

.feature-card h3 {
    margin-bottom: 1rem;
    font-size: 1.35rem;
    font-weight: 600;
}

.feature-card p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* Masonry Grid */
.gallery-section {
    padding: 4rem 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.masonry-grid {
    column-count: 3;
    /* Default to 3 for better balance */
    column-gap: 2rem;
}

@media (max-width: 1000px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .masonry-grid {
        column-count: 1;
    }
}

.grid-item {
    break-inside: avoid;
    margin-bottom: 2rem;
    position: relative;
    border-radius: 4px;
    /* Slightly rounded */
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-speed) var(--transition-ease);
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s var(--transition-ease);
}

.grid-item:hover {
    transform: translateY(-5px);
}

.grid-item:hover img {
    transform: scale(1.05);
    /* Subtle zoom */
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 10%, transparent);
    color: white;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s var(--transition-ease);
}

.grid-item:hover .overlay {
    opacity: 1;
    transform: translateY(0);
}

.overlay span {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Obsidian Stargate Portal Section */
.obsidian-portal-section {
    position: relative;
    background-color: #010102; /* Deepest void */
    overflow: hidden;
    height: 100vh; /* Pinned by GSAP later */
    width: 100%;
}

#portal-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* Let clicks pass to UI overlay */
}

/* Holographic UI Overlay (Hidden initially, revealed after sky drop) */
.portal-ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Only enable when active */
    opacity: 0; /* Fade in via GSAP */
}

.holo-screen {
    position: absolute;
    width: 420px;
    background: rgba(20, 20, 25, 0.4);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: #ffffff;
    opacity: 0; /* Managed by GSAP */
    transform: translateY(50px) scale(0.95);
    pointer-events: auto;
    margin-bottom: 25vh; /* Pushes the card above the light ray */
}

.holo-header {
    font-size: 0.75rem;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.holo-body h3 {
    font-size: 2.2rem;
    margin-bottom: 12px;
    font-weight: 300; /* Minimalist typography */
    letter-spacing: -0.02em;
}

.holo-body p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin-bottom: 35px;
    font-weight: 300;
}

.holo-footer {
    display: flex;
    justify-content: flex-start;
}

.btn-holo {
    display: inline-block;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-holo:hover {
    background: #ffffff;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.portal-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: monospace;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    animation: pulseText 2s infinite;
}

@keyframes pulseText {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}


/* FAQ Section */
.faq-section {
    padding: 8rem 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1.5rem 0;
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s;
}

.faq-question:hover {
    color: var(--text-muted);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer p {
    padding-bottom: 2rem;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 1.05rem;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

.faq-item.active .arrow {
    transform: rotate(45deg);
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Footer */
.site-footer {
    padding: 6rem 2rem;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    text-align: center;
}

.footer-brand h3 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.footer-brand p {
    color: var(--text-muted);
}

.footer-links {
    display: flex;
    gap: 3rem;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--text-color);
}

.footer-copy {
    color: var(--text-muted);
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Fixed Bottom Controls */
.fixed-controls {
    position: fixed;
    bottom: 2.5rem;
    width: 100%;
    padding: 0 3rem;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 100;
}

.fixed-controls button {
    pointer-events: auto;
    background: var(--nav-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.fixed-controls button:hover {
    transform: scale(1.05);
    background: var(--bg-color);
    border-color: var(--text-color);
}

/* Hide original Theme toggle in nav, but keep nav layout clean */

/* About Scrollytelling Section */
/* Floating 3D Corridor Text (WebGL Integration) */
.corridor-text-overlay {
    position: fixed; /* Fixed so it floats over the 3D canvas while scrolling */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 900px;
    text-align: center;
    color: #ffffff;
    z-index: 5;
    pointer-events: none; /* Let clicks pass through to canvas if needed */
    opacity: 0; /* GSAP handles visibility */
    padding: 4rem 2rem;
    
    /* Subtle dark radial glow behind the text so it never blends into bright 3D elements */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 70%);
}

.corridor-text-overlay h2 {
    font-size: clamp(3rem, 7vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    font-weight: 800; /* Bolder for better readability */
    letter-spacing: -0.02em;
    /* Layered text-shadow for extreme crispness against any background */
    text-shadow: 0 4px 24px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.8), 0 0 2px rgba(255,255,255,0.2);
}

.corridor-text-overlay p {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0 auto;
    max-width: 650px;
    font-weight: 400; /* Slightly heavier */
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* Ensure Light mode doesn't break WebGL text (WebGL is always dark) */
[data-theme="light"] .corridor-text-overlay {
    color: #fff;
}
[data-theme="light"] .corridor-text-overlay p {
    color: rgba(255, 255, 255, 0.7);
}

/* Update Footer & FAQ Visibility for Light Mode */
/* Ensure text colors are distinct in light mode if they weren't */
[data-theme="light"] .faq-answer p,
[data-theme="light"] .quote {
    color: #444;
}

[data-theme="light"] .ghost-num {
    color: #e0e0e0;
    /* Distinct grey for light mode */
}

[data-theme="dark"] .ghost-num {
    color: #222;
}


/* Fixed Controls Bounce Animation */
@keyframes bounce {

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

    50% {
        transform: translateY(-5px) scale(1.1);
    }
}

.fixed-controls button {
    animation: bounce 3s infinite ease-in-out;
}

.fixed-controls button:hover {
    animation-play-state: paused;
    /* Stop bouncing on hover so user can click */
}

/* Hero Update: Centering & Background */
.hero-section {
    padding-top: 15vh;
    /* Push content down */
    min-height: 100vh;
    background-image: url('C:/Users/Danny\'s PC/.gemini/antigravity/brain/5769f136-9326-46cf-b0c5-8d40f641758d/uploaded_image_2_1766339936082.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Texture overlay for hero to ensure text readability if needed */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    /* Darken bg image */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    /* Put text above overlay */
    margin-top: 10vh;
}


/* --- Rocks 3D Section --- */
.rocks-section {
    position: relative;
    width: 100%;
    height: 80vh;
    /* Large visual area */
    background: #111;
    /* Slightly lighter dark to see black rocks potentially, but interactions help */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="light"] .rocks-section {
    background: #f0f0f0;
    /* Light background for rocks in light mode */
}

/* Enhancing visibility of rocks in dark mode via a radial gradient spotlight effect */
[data-theme="dark"] .rocks-section::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(100, 100, 100, 0.1) 0%, rgba(0, 0, 0, 0.6) 90%);
    pointer-events: none;
    z-index: 1;
}

#three-rocks-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.rocks-overlay-text {
    position: relative;
    z-index: 3;
    /* Above rocks and gradient */
    text-align: center;
    mix-blend-mode: normal;
    pointer-events: none;
    /* Let mouse pass through to rocks */
}

.rocks-cta {
    pointer-events: auto;
    /* Keep button clickable */
}

.rocks-overlay-text h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    text-transform: none;
    /* Changed from uppercase per request "Ready to make..." */
    margin-bottom: 0.5rem;
}

.rocks-overlay-text p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    font-weight: 400;
}

.rocks-cta {
    background: #fff;
    color: #000;
    padding: 1rem 2rem;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s;
    display: inline-block;
}

.rocks-cta:hover {
    transform: scale(1.05);
}

[data-theme="light"] .rocks-overlay-text h2,
[data-theme="light"] .rocks-overlay-text p {
    color: #000;
}

[data-theme="light"] .rocks-cta {
    background: #000;
    color: #fff;
}


/* --- Bento Grid Testimonials --- */
.testimonials-section {
    padding: 6rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1.5rem;
    margin-top: 3rem;
}

/* --- Bento Grid Enhancements --- */
.bento-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
}
.bento-card:hover {
    transform: translateY(-5px);
    border-color: var(--text-color);
}

/* ── LIGHT MODE OVERRIDES ── */
/* Keep Nav Dark */
[data-theme="light"] .floating-nav {
    background: rgba(20, 20, 20, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="light"] .nav-links a { color: #fff !important; }
[data-theme="light"] .nav-links a:hover { color: #fff !important; }
[data-theme="light"] .nav-logo a { color: #fff !important; }
[data-theme="light"] .hamburger span { background: #fff !important; }

/* Specific Card Layouts */
.large-feature {
    grid-column: span 1;
    grid-row: span 2;
    /* Tall card */
}

.visual-card {
    grid-column: span 1;
    grid-row: span 1;
    padding: 0;
    overflow: hidden;
}

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

.stat-card {
    grid-column: span 1;
    grid-row: span 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.dark-quote {
    grid-column: span 2;
    grid-row: span 1;
    background: #000;
    /* Force dark background even in light mode for contrast */
    color: #fff;
}

[data-theme="light"] .dark-quote {
    color: #fff;
    /* Ensure text is white */
}

/* Bento Typo */
.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.user-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.user-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.user-info span,
.user-info-bottom span {
    font-size: 0.85rem;
    opacity: 0.7;
}

.stars {
    color: #FFD700;
    font-size: 1.2rem;
    margin-top: 1rem;
}

.quote-icon {
    font-size: 3rem;
    opacity: 0.1;
    margin-left: auto;
}

.mini-chart {
    width: 100px;
    height: 50px;
    margin-top: 1rem;
    stroke: var(--success-color, #4cc9f0);
}

.stat-card h3 {
    font-size: 4rem;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.user-info-bottom {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.user-info-bottom img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}


/* --- Newsletter Section --- */
.newsletter-section {
    padding: 4rem 2rem;
    text-align: center;
    background: var(--surface-color);
    margin: 2rem auto;
    max-width: 800px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

.newsletter-content h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.newsletter-form input {
    padding: 1rem 1.5rem;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    width: 300px;
    font-size: 1rem;
}

.newsletter-form button {
    padding: 1rem 2rem;
    border-radius: 50px;
    background: var(--text-color);
    color: var(--bg-color);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.newsletter-form button:hover {
    opacity: 0.8;
}


/* --- Big Footer --- */
.big-footer {
    position: relative;
    background: #000;
    /* Always dark footer */
    background-image: none;
    background-size: cover;
    background-position: center bottom;
    color: #fff;
    padding: 4rem 2rem 0 2rem;
    overflow: hidden;
    margin-top: 4rem;
}

/* Add overlay to footer for text readability */
.big-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    /* Slightly lighter than hero to show detail */
    z-index: 0;
}

.big-footer>* {
    position: relative;
    z-index: 1;
}

.footer-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto 6rem auto;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-col h4 {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}

.footer-col a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 0.2rem 0;
    transition: opacity 0.2s;
}

.footer-col a:hover {
    opacity: 0.7;
}

.btn-msg {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-msg:hover {
    background: #fff;
    color: #000;
}

.footer-bottom-row {
    width: 100%;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

/* --- Footer Text Sizing --- */
.giant-footer-text {
    font-size: clamp(1.5rem, 5vw, 5rem);
    /* Significantly reduced from 12rem max */
    font-weight: 800;
    line-height: 1;
    margin: 0;
    letter-spacing: -0.02em;
    transform: none;
    /* Removed cutoff transform */
    padding-bottom: 2rem;
    white-space: normal;
    /* Allow wrapping if absolutely needed, but size is smaller now */
    text-align: center;
    background: linear-gradient(to bottom, #fff, #888);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.9;
    max-width: 100%;
}

/* Responsive adjustments for Footer Text */
@media (max-width: 900px) {
    .giant-footer-text {
        font-size: clamp(1.5rem, 8vw, 3rem);
        /* Even smaller on mobile */
    }
}

/* --- Hero Button Fix --- */
/* Ensure generic button styles don't conflict, enforce specific look for Hero button */
.btn-hero {
    display: inline-block;
    background: #fff;
    color: #000;
    padding: 1rem 2rem;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 2rem;
    transition: transform 0.2s, background 0.2s, color 0.2s;
    border: 2px solid transparent;
}

.btn-hero:hover {
    transform: scale(1.05);
    background: #fff;
    /* White hover */
    color: #000;
}

/* Force Hero Button to remain visible in Light Mode (override generic light mode button changes if any) */
[data-theme="light"] .btn-hero {
    background: #fff;
    color: #000;
    border-color: transparent;
}

/* ScrollyTelling Monochrome Update */
.btn-coral.monochrome {
    background-color: transparent;
    border: 2px solid currentColor;
    color: var(--text-color);
    box-shadow: none;
}

.btn-coral.monochrome:hover {
    background-color: var(--text-color);
    color: var(--bg-color);
}

/* Hero Padding Adjustment & Video Background */
.hero-section {
    padding-top: 15vh;
    min-height: 100vh;
    /* Fallback Image */
    background-image: url('C:/Users/Danny\'s PC/.gemini/antigravity/brain/5769f136-9326-46cf-b0c5-8d40f641758d/uploaded_image_2_1766339936082.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    /* Default hidden */
    transition: opacity 1s linear;
    /* Smooth crossfade duration */
}

.hero-bg-video.active {
    opacity: 1;
    z-index: 1;
    /* On top */
}

/* Ensure z-index 0 for inactive so it stays behind */
.hero-bg-video {
    z-index: 0;
}

/* Ensure overlay covers video */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Responsive adjustments for Bento */
@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .large-feature,
    .visual-card,
    .stat-card,
    .dark-quote {
        grid-column: span 1;
        grid-row: auto;
    }
}


.scroll-indicator {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    opacity: 0.5;
    z-index: 10;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Scroll Reveal Classes */
.fade-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Loading Screen --- */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#loader.hidden-loader {
    opacity: 0;
    visibility: hidden;
}

.loader-logo {
    width: 150px;
    height: auto;
    animation: pulseGlow 2.5s infinite ease-in-out;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
}

[data-theme="dark"] .loader-logo {
    filter: invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

/* 
   Since the logo is black lines on transparent (assumed), 
   we invert it for dark mode to make it white lines.
   If the user provided white lines, we do the opposite.
   The image uploaded looked like black lines.
*/

@keyframes pulseGlow {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
        filter: invert(0) drop-shadow(0 0 0px rgba(0, 0, 0, 0));
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
        filter: invert(0) drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
    }

    100% {
        transform: scale(0.95);
        opacity: 0.8;
        filter: invert(0) drop-shadow(0 0 0px rgba(0, 0, 0, 0));
    }
}

/* Adjust keyframes for dark mode to keep the inversion */
[data-theme="dark"] .loader-logo {
    animation: pulseGlowDark 2.5s infinite ease-in-out;
}

@keyframes pulseGlowDark {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
        filter: invert(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
        filter: invert(1) drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
    }

    100% {
        transform: scale(0.95);
        opacity: 0.8;
        filter: invert(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
}

.loader-text {
    margin-top: 2rem;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.3em;
    font-size: 0.8rem;
    opacity: 0.7;
    animation: fadeIn 1s infinite alternate;
}

/* ====================================================
   MOBILE RESPONSIVENESS
   ==================================================== */

/* Tablet and below */
@media (max-width: 1024px) {
    .scrolly-container {
        flex-direction: column;
    }

    .left-col-fixed {
        position: relative;
        width: 100%;
        padding: 2rem;
    }

    .right-col-animated {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .scroll-indicator { display: none !important; }
    
    /* Hide native scrollbar on mobile which appears as a tiny right-side rectangle */
    ::-webkit-scrollbar {
        display: none;
    }
    body {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    /* Navigation - Hamburger Setup */
    .floating-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-radius: 20px;
        top: 1rem;
        width: 95%;
    }

    /* Hide desktop nav elements on mobile */
    .desktop-only {
        display: none !important;
    }

    .nav-logo {
        flex: 1;
        text-align: left;
        display: flex;
        justify-content: flex-start;
    }

    .nav-logo a {
        font-size: 0.9rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* Hamburger Button */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 20px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1001;
        /* Above sidebar (999) so it can close menu */
        position: relative;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--text-color);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Hamburger to X animation */
    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* Nav Menu - Right Sidebar on Mobile */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -280px;
        /* Hidden off-screen right */
        width: 280px;
        height: 100vh;
        background: rgba(20, 20, 20, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        padding: 2rem;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 999;
        display: flex;
    }

    .nav-menu.active {
        right: 0;
        /* Slide in */
    }

    [data-theme="light"] .nav-menu {
        background: rgba(255, 255, 255, 0.95);
        border-left: 1px solid rgba(0, 0, 0, 0.1);
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .nav-links a {
        font-size: 1.3rem;
        font-weight: 500;
    }

    .nav-actions {
        justify-content: center;
        margin-top: 1rem;
    }

    /* Hero */
    .hero-section {
        height: auto;
        min-height: 100vh;
        padding-top: 120px;
        /* Space for nav */
    }

    .hero-title {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .hero-subtitle {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .glass-overlay {
        backdrop-filter: blur(6px);
    }

    /* Why Choose Us - Features */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-card {
        padding: 1.5rem;
    }

    /* Scrollytelling */
    .about-scrolly-section {
        padding: 2rem 0.5rem;
    }

    .left-col-fixed {
        padding: 1rem;
    }

    .left-col-fixed h2 {
        font-size: 1.5rem;
    }

    .left-col-fixed p {
        font-size: 0.9rem;
    }

    .right-col-animated {
        transform: scale(0.7);
        transform-origin: top center;
        margin-bottom: -100px;
        /* Compensate for scale shrink */
    }

    .path-container {
        height: 400px;
    }

    .step-block {
        padding: 0.8rem;
    }

    .step-block h4 {
        font-size: 1rem;
    }

    .step-block p {
        font-size: 0.8rem;
    }

    .ghost-num {
        font-size: 3rem;
    }

    /* Process path visible on mobile */

    /* Rocks Section */
    .rocks-section {
        min-height: 60vh;
    }

    .rocks-overlay-text h2 {
        font-size: 1.5rem;
    }

    /* Testimonials Bento */
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .large-feature,
    .visual-card,
    .stat-card,
    .dark-quote {
        grid-column: span 1;
        grid-row: auto;
    }

    /* Newsletter */
    .newsletter-form {
        flex-direction: column;
        gap: 1rem;
    }

    .newsletter-form input {
        width: 100%;
    }

    .newsletter-form button {
        width: 100%;
    }

    /* FAQ */
    .faq-container {
        padding: 0 1rem;
    }

    /* Footer */
    .footer-top-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 1.5rem;
        text-align: center;
    }

    .footer-col {
        width: auto;
    }

    .giant-footer-text {
        font-size: 2rem;
        word-break: break-word;
    }

    .footer-msg {
        margin-top: 1rem;
    }

    /* Fixed Controls - Move to corners */
    .fixed-controls {
        bottom: 1rem;
        right: 1rem;
        gap: 0.5rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .btn-hero,
    .btn-primary {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }

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

    .floating-nav {
        padding: 0.8rem;
    }

    .nav-links a {
        font-size: 0.85rem;
    }
}

/* ── Blog Teaser Section ────────────────────────── */
.blog-teaser {
    padding: 8rem 2rem;
    border-top: 1px solid var(--border-color);
}

.blog-teaser .section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.blog-teaser-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.blog-teaser-link {
    text-decoration: none;
    color: inherit;
}

.blog-teaser-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-teaser-category {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: block;
}

.blog-teaser-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.blog-teaser-excerpt {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.blog-teaser-cta {
    margin-top: auto;
    font-size: 0.8rem;
    font-weight: 600;
}

/* -- Search Bar Glassmorphism --------------------- */
.search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 0.5rem;
    transition: all 0.3s ease;
}

.search-wrapper:focus-within {
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 20px rgba(100, 210, 255, 0.1);
}

.search-wrapper input {
    background: none;
    border: none;
    color: var(--text-color);
    padding: 0.8rem 1rem;
    width: 100%;
    outline: none;
    font-size: 1rem;
}

.search-wrapper input::placeholder {
    color: var(--text-muted);
}

/* -- Studio Pulse Indicator ---------------------- */
.studio-pulse-footer {
    position: absolute;
    bottom: 3rem;
    right: 3rem;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.25em;
    color: var(--text-muted);
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.studio-pulse-footer:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #00d2ff;
    border-radius: 50%;
    box-shadow: 0 0 15px #00d2ff;
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid #00d2ff;
    animation: pulse-ring-elite 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulse-ring-elite {
    0% {
        transform: scale(0.7);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .studio-pulse-footer {
        position: static;
        margin-top: 2rem;
        justify-content: center;
    }
}

/* ── COOKIE CONSENT BANNER ── */
#cookie-banner {
    position: fixed;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 3rem);
    max-width: 880px;
    background: rgba(8, 8, 12, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    z-index: 99999;
    transition: bottom 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -4px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
}

#cookie-banner.visible { bottom: 1.5rem; }

.cookie-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.cookie-text { flex: 1; min-width: 220px; }

.cookie-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.3rem;
    font-family: 'Inter', sans-serif;
}

.cookie-desc {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.55;
    font-family: 'Inter', sans-serif;
}

.cookie-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-size: 0.81rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.15s;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}

.cookie-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cookie-btn.cookie-accept {
    background: #fff;
    color: #050508;
    border-color: transparent;
}

.cookie-btn.cookie-accept:hover {
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

@media (max-width: 580px) {
    #cookie-banner { padding: 1.25rem 1.25rem 1.5rem; border-radius: 16px; }
    .cookie-actions { width: 100%; }
    .cookie-btn { flex: 1; text-align: center; }
}

/* --- HUD OVERLAY SYSTEM --- */
@keyframes scifiFlicker {
    0% { opacity: 0; transform: scale(0.98); }
    10% { opacity: 1; transform: scale(1.02); }
    20% { opacity: 0; }
    30% { opacity: 1; }
    40% { opacity: 0.2; transform: scale(0.99); }
    50% { opacity: 1; transform: scale(1); }
    100% { opacity: 1; }
}

@keyframes pulseNudge {
    0%, 100% { opacity: 0.2; transform: translateX(-50%) scale(0.98); }
    50% { opacity: 0.8; transform: translateX(-50%) scale(1.02); }
}

.rocks-nudge {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: rgba(255,255,255,0.6);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    pointer-events: none;
    animation: pulseNudge 2.5s infinite ease-in-out;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.desktop-nudge { display: block; }
.mobile-nudge { display: none; }

@media (max-width: 768px) {
    .rocks-nudge { top: 10%; font-size: 0.7rem; }
    .desktop-nudge { display: none; }
    .mobile-nudge { display: block; }
}

.audio-toggle-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    z-index: 50;
}

.audio-toggle-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
}

.audio-toggle-btn.is-playing {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.2);
}

@keyframes dashFlow {
    from { stroke-dashoffset: 20; }
    to { stroke-dashoffset: 0; }
}

.hud-container {
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hud-container.is-active {
    opacity: 1;
    animation: scifiFlicker 0.4s ease-out forwards;
}

.hud-container.is-active .hud-lines-svg line[stroke-dasharray] {
    stroke-dasharray: 4, 4;
    animation: dashFlow 0.5s linear infinite;
}

.hud-glitch-text {
    font-weight: bold;
    opacity: 0.8;
}

.hud-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
    margin-top: 5px;
    display: inline-block;
}

.hud-small {
    font-size: 0.6rem;
    opacity: 0.7;
    line-height: 1.6;
}

.hud-action-link {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 2px;
    display: inline-block;
    transition: all 0.3s ease;
}

.hud-action-link:hover {
    border-bottom-color: #ffffff;
    text-shadow: 0 0 8px rgba(255,255,255,0.8);
}

.hud-coord {
    font-size: 0.6rem;
    opacity: 0.5;
}

.hud-click-text {
    font-size: 0.85rem;
    font-weight: bold;
}

/* --- Partners & Awards Section --- */
.partners-awards-section {
    background-color: #050505; /* Very dark background to match image */
    padding: 8rem 2rem;
    color: #ffffff;
    font-family: var(--font-main);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.partners-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
}

@media (max-width: 900px) {
    .partners-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

.partners-heading {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 3rem;
    letter-spacing: -0.02em;
}

.right-heading {
    margin-top: 3rem;
    margin-bottom: 0;
}

/* Left Column - Clients */
.clients-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 500px;
}

.client-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0.8rem 1.5rem;
    font-size: 0.9rem;
    color: #e0e0e0;
    transition: background 0.3s, transform 0.3s;
}

.client-box:hover {
    background: rgba(40, 40, 40, 0.8);
    transform: translateY(-2px);
    cursor: pointer;
}

.client-icon {
    width: 24px;
    height: 24px;
    background: #222;
    color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    font-family: sans-serif;
}

/* Right Column - Awards */
.partners-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.awards-list {
    display: flex;
    flex-direction: column;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
}

.award-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
    transition: background 0.3s;
}

.award-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.award-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.award-logo {
    font-family: serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #555;
    letter-spacing: -2px;
}

.award-title {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    line-height: 1.4;
}

.award-title strong {
    font-weight: 600;
    color: #e0e0e0;
}

.award-title span {
    color: #888;
}

.award-right {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 0.85rem;
    color: #a0a0a0;
}

.award-year {
    color: #666;
    font-variant-numeric: tabular-nums;
}