/* ── minimal custom CSS — only what Tailwind CDN can't do inline ── */

        /* CSS variables for dark/light theming used inside arbitrary Tailwind values */
        :root {
            --accent: #1c6b47;
            --accent-soft: #dcf0e7;
            --accent-dim: rgba(28, 107, 71, 0.12);
            --surface: #fafaf8;
            --surface-2: #f2f1ee;
            --surface-3: #eae9e4;
            --border: #e0deda;
            --border-2: #cccac4;
            --ink: #0f0f0e;
            --ink-muted: #72726b;
            --ink-faint: #b8b8b0;
        }

        .dark {
            --accent: #3dba7e;
            --accent-soft: #0f2b1e;
            --accent-dim: rgba(61, 186, 126, 0.10);
            --surface: #0c0c0b;
            --surface-2: #141412;
            --surface-3: #1c1c19;
            --border: #242420;
            --border-2: #323230;
            --ink: #f0ede8;
            --ink-muted: #8a8a82;
            --ink-faint: #4a4a44;
        }

        @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');
        html {
            /* font-family: 'Geist', sans-serif; */
            font-family: "Comfortaa", sans-serif;
        }

        body {
            background: var(--surface);
            color: var(--ink);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            transition: background .35s, color .35s;
        }

        /* grain overlay */
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9999;
            opacity: .022;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        /* Hero grid — radial fade mask (mask-image can't be Tailwind arbitrary on CDN) */
        .hero-grid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background-image: linear-gradient(to right, var(--border) 1px, transparent 1px),
                linear-gradient(to bottom, var(--border) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
            -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 40%, transparent 100%);
            opacity: .65;
        }

        /* Reveal animation helper (JS toggles .is-visible) */
        .reveal {
            opacity: 0;
            transform: translateY(18px);
            transition: opacity .65s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1);
        }

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

        .delay-1 {
            transition-delay: .08s;
        }

        .delay-2 {
            transition-delay: .16s;
        }

        .delay-3 {
            transition-delay: .24s;
        }

        .delay-4 {
            transition-delay: .32s;
        }

        .delay-5 {
            transition-delay: .40s;
        }

        /* Mobile menu open state */
        #mobile-menu {
            display: none;
        }

        #mobile-menu.open {
            display: flex;
        }

        /* eyebrow ::after line — pseudo elements need a style tag */
        .eyebrow::after {
            content: '';
            flex: 1;
            max-width: 28px;
            height: 1px;
            background: var(--accent);
            opacity: .4;
        }

        /* Scroll cue animation uses translateX which clashes with Tailwind translate, keep minimal */
        .scroll-cue {
            animation: scroll-fade 2.2s ease-in-out infinite;
        }

        @keyframes scroll-fade {

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

            50% {
                opacity: .35;
                transform: translateY(6px)
            }
        }