body {
            font-family: 'Be Vietnam Pro', sans-serif;
            background-color: #f2f8f0;
            color: #2a302b;
        }

        h1,
        h2,
        h3,
        .font-headline {
            font-family: 'Be Vietnam Pro', sans-serif;
            /* removed tight letter spacing to give VN diacritics room */
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        /* Natural glass effect */
        .glass {
            background: rgba(255, 255, 255, 0.9);
        }

        @supports (backdrop-filter: blur(6px)) {
            .glass {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
            }
        }

        .glass-dark {
            background: rgba(10, 15, 11, 0.6);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        .reveal {
            opacity: 0;
            transform: translateY(40px) translateZ(0);
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, opacity;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0) translateZ(0);
        }

        .reveal-left {
            opacity: 0;
            transform: translateX(-50px) translateZ(0);
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, opacity;
        }

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

        .reveal-right {
            opacity: 0;
            transform: translateX(50px) translateZ(0);
            transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, opacity;
        }

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

        .hover-lift {
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .hover-lift:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
        }

        .parallax-hero {
            transform-origin: center;
            will-change: transform;
        }

        .bg-hero-overlay {
            background: linear-gradient(to bottom, rgba(23, 106, 33, 0.4), rgba(10, 15, 11, 0.8));
        }