/* ===== Base & Reset ===== */
    *, *::before, *::after {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        margin: 0;
        overflow-x: hidden;
    }

    img {
        display: block;
        max-width: 100%;
    }

    ::selection {
        background: #e2744a;
        color: #fff;
    }

    /* ===== Scroll Reveal (Progressive Enhancement) ===== */
    @media (prefers-reduced-motion: no-preference) {
        .reveal-up,
        .reveal-left,
        .reveal-right {
            opacity: 1;
            transform: none;
            transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .reveal-up {
            transform: translateY(0);
        }

        .reveal-left {
            transform: translateX(0);
        }

        .reveal-right {
            transform: translateX(0);
        }
    }

    /* Hidden state for JS-enhanced reveals (only applied when JS runs) */
    .reveal-up.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal-left.revealed {
        opacity: 1;
        transform: translateX(0);
    }

    .reveal-right.revealed {
        opacity: 1;
        transform: translateX(0);
    }

    /* Start hidden for JS-enhanced animations */
    @media (prefers-reduced-motion: no-preference) {
        .reveal-up {
            opacity: 0;
            transform: translateY(30px);
        }
        .reveal-left {
            opacity: 0;
            transform: translateX(-30px);
        }
        .reveal-right {
            opacity: 0;
            transform: translateX(30px);
        }
    }

    /* ===== Hero Animations ===== */
    @media (prefers-reduced-motion: no-preference) {
        .hero-badge {
            animation: fadeSlideDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
        }

        .hero-title {
            animation: fadeSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
        }

        .hero-subtitle {
            animation: fadeSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
        }

        .hero-ctas {
            animation: fadeSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
        }
    }

    @keyframes fadeSlideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

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

    /* ===== Navbar ===== */
    #navbar {
        background: transparent;
    }

    #navbar.scrolled {
        background: rgba(28, 25, 23, 0.92);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    }

    #navbar.scrolled .nav-logo-text {
        color: #fff !important;
    }

    #navbar.scrolled .nav-link {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    #navbar.scrolled .nav-link:hover {
        color: #fff !important;
    }

    /* ===== Mobile Menu ===== */
    #mobileMenu.open {
        opacity: 1;
        pointer-events: all;
    }

    /* ===== Menu Tabs ===== */
    .menu-tab {
        background: transparent;
        border: none;
        color: #78716c;
        cursor: pointer;
        font-family: 'Inter', system-ui, sans-serif;
    }

    .menu-tab.active {
        background: #fff;
        color: #d4552a;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .menu-tab:hover:not(.active) {
        background: rgba(255, 255, 255, 0.6);
        color: #78716c;
    }

    /* ===== Button Focus States ===== */
    a:focus-visible,
    button:focus-visible {
        outline: 2px solid #d4552a;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* ===== Smooth Scroll Offset for Fixed Nav ===== */
    section[id] {
        scroll-margin-top: 80px;
    }

    /* ===== Custom Scrollbar ===== */
    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #faf5ed;
    }

    ::-webkit-scrollbar-thumb {
        background: #e2744a;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #c23e1d;
    }

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

        .hero-title br {
            display: none;
        }

        .hero-title::after {
            content: 'is Waiting.';
            display: block;
            color: #f5c4aa;
            font-style: italic;
            font-weight: 400;
        }
    }

    @media (max-width: 640px) {
        .hero-title {
            font-size: 2.5rem;
        }
    }