:root {
    /* Minimalist / Liquid Theme Palette */
    --bg-color: #050505;
    /* Deep Black */
    --text-color: #f0f0f0;
    /* Off-white */
    --text-secondary: #888;
    --accent-color: #ffffff;
    --card-bg: rgba(20, 20, 20, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);
    --nav-bg: rgba(5, 5, 5, 0.8);

    /* Typography */
    --font-heading: 'Inter', sans-serif;
    /* Blocky iOS Style */
    --font-body: 'Inter', sans-serif;

    --transition-speed: 0.4s;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-color);
    height: 100vh;
    overflow-x: hidden;
    /* transition: background-color 0.3s, color 0.3s; Removed for simpler liquid feel */
}

/* --- Light Mode Variables --- */
body.light-mode {
    --bg-color: #ffffff;
    --text-color: #111111;
    --text-secondary: #555555;
    --accent-color: #000000;
    --card-bg: rgba(0, 0, 0, 0.03);
    /* Subtle dark glass on white */
    --glass-border: rgba(0, 0, 0, 0.1);
    --nav-bg: rgba(255, 255, 255, 0.8);
}

/* Typography */
h1 {
    font-size: 5rem;
    letter-spacing: -0.02em;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.3em;
}

p {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1000;
    border-bottom: 1px solid var(--glass-border);
    transition: background-color 0.3s ease;
}

.logo {
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -0.5px;
}

/* Ensure sections use the variable background */
section {
    background-color: var(--bg-color);
    /* Critical for Theme Toggle */
    transition: background-color 0.4s ease;
}

#intro,
#what-we-do,
#upcoming,
#contact,
#footer {
    background-color: var(--bg-color) !important;
    /* Force override manual colors */
}

/* Fix Toggle Button Visibility */
#theme-toggle {
    cursor: pointer;
    padding: 10px;
    z-index: 2000;
    /* Ensure above everything */
    position: relative;
    border-radius: 50%;
    transition: background 0.3s;
}

#theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.light-mode #theme-toggle {
    color: #000;
}

body.light-mode #theme-toggle:hover {
    background: rgba(0, 0, 0, 0.1);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a:hover {
    color: var(--accent-color);
}

/* Theme Toggle */
.theme-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.3s;
}

.theme-btn:hover {
    background: rgba(128, 128, 128, 0.1);
}

.sun-icon {
    display: block;
}

.moon-icon {
    display: none;
}

body.light-mode .sun-icon {
    display: none;
}

body.light-mode .moon-icon {
    display: block;
}


/* Loader */
/* Loader */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Loader Spinner */
.spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #fff;
    border-radius: 50%;
    margin-bottom: 20px;
    animation: spinCircle 1s linear infinite;
}

@keyframes spinCircle {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 250px;
    margin-bottom: 10px;
    font-family: 'Courier New', Courier, monospace;
}

.initializing-text {
    font-size: 14px;
    color: #fff;
    /* text-transform: uppercase; Removed for artistic look */
    letter-spacing: 2px;
}

.loading-percentage {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.loading-bar-container {
    width: 250px;
    /* Match text container width */
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    /* Removed animation delay for immediate start */
}

.loading-bar {
    width: 0%;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: loadProgress 2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes loadProgress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Intro Section */
#intro {
    position: relative;
    height: 400vh;
    /* 4x viewport height for scroll track */
    width: 100%;
    background: var(--bg-color);
    z-index: 500;
}

.intro-content {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    /* Transition for fade out at the end */
    transition: opacity 0.5s ease-out;
}

.intro-logo {
    /* Canvas specific styles */
    /* Width/Height controls the display size, JS controls resolution */
    width: 100%;
    max-width: 500px;
    /* Limit max size */
    height: auto;
    margin-bottom: 2rem;
    filter: invert(1);
    mix-blend-mode: screen;
    transition: filter 0.3s, mix-blend-mode 0.3s;
    object-fit: contain;
}

/* Light Mode Overrides for Intro */
body.light-mode .intro-logo {
    filter: none;
    mix-blend-mode: multiply;
}

#intro h2 {
    font-family: var(--font-heading);
    font-size: 6rem;
    /* Massive Scale */
    font-weight: 900;
    /* Extra Black */
    text-transform: uppercase;
    letter-spacing: -0.05em;
    /* Tight tracking for blocky look */
    line-height: 0.9;
    margin-bottom: 1rem;
    color: #fff;
}

body.light-mode #intro h2 {
    background: linear-gradient(180deg, #000, #666);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#intro p {
    font-size: 1.2rem;
    color: #888;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

body.light-mode #intro p {
    color: #555;
}

/* Center Text (Default) */
.text-center {
    position: relative;
    z-index: 2;
    transition: opacity 0.1s ease-out;
}

/* Corner Text Removed */
/* .text-corner styles deleted */

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 1s ease 1s;
}

.scroll-indicator span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #666;
    animation: glow 2s ease-in-out infinite alternate;
}

body.light-mode .scroll-indicator span {
    color: #333;
    animation: glowLight 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        color: #666;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0);
    }

    to {
        color: #fff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3);
    }
}

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

body.light-mode .scroll-indicator .line {
    background: linear-gradient(to bottom, #333, transparent);
}

@keyframes glowLight {
    from {
        color: #666;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0);
    }

    to {
        color: #000;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1);
    }
}


/* Hero Section (NanoBanana Style) */
.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-container {
    width: 92%;
    max-width: 1600px;
    height: 85vh;
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    transform: perspective(2000px) rotateX(1deg);
    transition: transform 0.5s ease;
}

/* Add a subtle hover effect to the 3D card */
.slider-container:hover {
    transform: perspective(2000px) rotateX(0deg) scale(1.005);
    border-color: rgba(255, 255, 255, 0.2);
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    display: flex;
    align-items: flex-end;
    /* Bottom Align */
    justify-content: flex-start;
    /* Left Align */
    padding: 0 10% 140px 10%;
    /* More bottom padding to clear pills */
}

.slide.active {
    opacity: 1;
    z-index: 10;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: var(--hero-overlay);
    transition: filter 0.3s ease;
}

.slide-content {
    position: relative;
    z-index: 20;
    text-align: left;
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.8s ease 0.2s;
    color: #fff;
    max-width: 600px;
    padding: 0;
    /* Removed padding */
    /* Removed Glassmorphism styles */
}

.slide-content h1 {
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    /* Tighter, standard Apple-like tracking */
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Stronger shadow for readability without box */
}

.slide-content p {
    font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: normal;
}

/* Force Slide Content to be visible in Light Mode too if images are dark,
   but user requested layout matching. Usually Hero text over image is white.
   Keeping it white for now. */
body.light-mode .slide-content {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.slide.active .slide-content {
    opacity: 1;
    transform: translateY(0);
}

/* Nav Arrows */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.nav-arrow:hover {
    background: #fff;
    color: #000;
    transform: translateY(-50%) scale(1.1);
}

.nav-arrow.prev {
    left: 40px;
}

.nav-arrow.next {
    right: 40px;
}

/* Bottom Pill Nav */
.bottom-nav {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    padding: 6px;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 100;
}

.nav-pill {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-pill:hover {
    color: #fff;
}

.nav-pill.active {
    background: #fff;
    color: #000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Sections */
.section {
    padding: 120px 10%;
    max-width: 1600px;
    margin: 0 auto;
}

.section-header {
    margin-bottom: 60px;
    text-align: center;
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card-image {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    background-color: #222;
}

.card-content {
    padding: 30px;
}

.card h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.card-link {
    color: var(--accent-color);
    font-weight: 500;
}

/* Footer / Socials */
footer {
    border-top: 1px solid var(--glass-border);
    padding: 80px 10% 40px;
    text-align: center;
    background: var(--bg-color);
}

.social-links-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    font-weight: 500;
    transition: all 0.3s ease;
}

.social-btn:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Brand Colors on Hover */
.social-btn.instagram:hover {
    color: #E1306C;
    border-color: #E1306C;
}

.social-btn.youtube:hover {
    color: #FF0000;
    border-color: #FF0000;
}

.social-btn.tiktok:hover {
    color: #00f2ea;
    border-color: #00f2ea;
}

.copyright {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Our Work Section (Masked Reveal) */
#our-work {
    height: 30vh;
    /* Divider height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    overflow: hidden;
}

/* Masking for Our Work text */
.masked-header {
    overflow: hidden;
    /* The mask */
    line-height: 1.1;
}

.masked-header h2 {
    display: none;
    /* Replaced by spans */
}

.masked-header .word-reveal {
    font-family: var(--font-heading);
    font-size: 8rem;
    /* Huge */
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
}

/* What We Do Section */
#what-we-do {
    padding: 100px 5%;
    background: #050505;
}

#product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 60px;
    perspective: 1000px;
}

.product-card {
    background: rgba(255, 255, 255, 0.03);
    /* Deep Glass */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    /* Hidden initially for GSAP */
    transform: translateY(30px);
    /* Slight offset */
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.product-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-5px);
    /* Lift on hover */
}

.card-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card:hover .card-image img {
    transform: scale(1.05);
}

.card-content {
    padding: 30px;
}

.card-content h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: 10px;
    color: #fff;
}

.card-content p {
    font-size: 1rem;
    color: #ccc;
    /* Lighter for better readability */
    margin-bottom: 25px;
    line-height: 1.6;
}

.card-link {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.card-link:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateX(5px);
}

.wwd-header h2 {
    font-family: var(--font-heading);
    font-size: 5rem;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
    color: #fff;
    margin-bottom: 20px;
}

.wwd-header p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    opacity: 0;
    /* Hidden for sequencing */
    transform: translateY(20px);
}

/* Connect / Contact Section */
#contact {
    padding: 100px 5%;
    text-align: center;
}

.connect-header h2 {
    font-family: var(--font-heading);
    font-size: 5rem;
    text-transform: uppercase;
    cursor: pointer;
}

/* Upcoming Work Extended */
#upcoming {
    padding: 100px 5%;
    background: #080808;
    background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    /* Dot pattern */
}

.upcoming-header h2 {
    font-family: var(--font-heading);
    font-size: 8rem;
    /* Massive Scale */
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
    line-height: 0.9;
}

.upcoming-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 80px;
    gap: 50px;
    opacity: 0;
    /* Hidden init */
    transform: translateY(50px);
}

.upcoming-item.project-right {
    flex-direction: row-reverse;
}

.upcoming-image {
    flex: 1;
    height: 300px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.upcoming-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.upcoming-image:hover img {
    transform: scale(1.05);
}

.upcoming-text {
    flex: 1;
}

.upcoming-text h3 {
    font-size: 3rem;
    font-family: var(--font-heading);
    margin-bottom: 20px;
    color: #fff;
}

.badgeq {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #fff;
    font-size: 0.8rem;
    margin-top: 15px;
    letter-spacing: 0.1em;
}

/* Our Work Reveal */
.word-reveal {
    display: inline-block;
    transform: translateY(110%);
    /* Hidden below mask */
    padding: 0 10px;
}

/* Social Sequence */
.social-links-container {
    opacity: 0;
    /* Hidden initially for sequence */
    transform: translateY(30px);
}

.social-btn.email {
    border-color: rgba(255, 255, 255, 0.4);
}

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

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 3rem;
    }

    .navbar {
        padding: 20px;
    }

    .nav-links {
        display: none;
    }

    .nav-arrow {
        width: 45px;
        height: 45px;
    }

    .nav-arrow.prev {
        left: 10px;
    }

    .nav-arrow.next {
        right: 10px;
    }

    .bottom-nav {
        width: 90%;
        justify-content: space-between;
    }

    .nav-pill {
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    /* --- Mobile Refinements --- */

    /* Global Section Spacing */
    section {
        padding: 60px 20px !important;
        /* Tighter padding for mobile */
    }

    /* Header scaling */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2.5rem !important;
    }

    .intro-content h1 {
        font-size: 3rem;
    }

    /* What We Do: Stack Cards */
    #product-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 40px;
    }

    .wwd-header h2 {
        font-size: 3rem !important;
        /* Readable but big */
        -webkit-text-stroke: 1px #fff;
        /* Thinner stroke for mobile */
    }

    /* Upcoming: Stack Projects */
    .upcoming-item {
        flex-direction: column !important;
        gap: 20px;
        margin-top: 50px;
        text-align: center;
    }

    /* Reset reverse row for mobile */
    .upcoming-item.project-right {
        flex-direction: column !important;
    }

    .upcoming-image {
        width: 100%;
        height: 250px;
        /* Slightly shorter for mobile context */
    }

    .upcoming-header h2 {
        font-size: 3.5rem !important;
        line-height: 1;
    }

    /* Connect: Adjustments */
    .connect-header h2 {
        font-size: 3rem !important;
    }

    .social-links-container {
        flex-direction: column;
        gap: 15px;
    }

    .social-btn {
        width: 100%;
        /* Full width buttons */
        justify-content: center;
    }
}