        :root {
            --accent: #FF5C8D;
            --surface: #F9F9F7;
            --ink: #1A1A1A;
            --muted: #6B7280;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #FFFFFF;
            color: var(--ink);
            scroll-behavior: smooth;
        }

        .serif { font-family: 'Libre+Baskerville', serif; }
        .mono { font-family: 'Space Mono', monospace; }

        /* Page Transitions */
        .page-layer { display: none; opacity: 0; transform: translateY(10px); transition: all 0.6s ease; }
        .page-layer.active { display: block; opacity: 1; transform: translateY(0); }

        /* Custom Hover Glow */
        .glow-hover:hover {
            box-shadow: 0 0 25px rgba(255, 92, 141, 0.2);
            border-color: var(--accent);
        }

        /* Hero Parallax Emulation */
        .hero-zoom {
            animation: slowZoom 20s infinite alternate linear;
        }
        @keyframes slowZoom {
            from { transform: scale(1); }
            to { transform: scale(1.15); }
        }

        /* Responsive Grid adjustments */
        @media (max-width: 768px) {
            .serif { font-size: 2.5rem !important; line-height: 1.1; }
        }

        /* Hide Scrollbar but keep functionality */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        .btn-fancy {
            position: relative;
            overflow: hidden;
            transition: all 0.4s;
        }
        .btn-fancy::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; width: 0; height: 2px;
            background: currentColor;
            transition: width 0.3s;
        }
        .btn-fancy:hover::after { width: 100%; }

        .modal-blur {
            backdrop-filter: blur(8px);
            background: rgba(0,0,0,0.4);
        }
    /* Marquee animation */
.marquee {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 25s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
