:root{

            --soft-cream: #FBF3D1;
            --bold-orange: #FAA533;
            --deep-green: #344F1F;
        }

        body {
            background-color: var(--soft-cream);
            color: var(--deep-green);
            font-family: 'Space Grotesk', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, .anton {
            font-family: 'Anton', sans-serif;
            text-transform: uppercase;
            line-height: 0.9;
        }

        /* --- Header & Nav --- */
        header {
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }
        header.sticky {
            background-color: var(--deep-green);
            color: white;
            padding: 1rem 2rem;
        }

        /* --- Hero System --- */
        .hero-gradient {
            background: linear-gradient(135deg, var(--soft-cream) 0%, var(--bold-orange) 50%, var(--deep-green) 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .letter-reveal span {
            display: inline-block;
            transform: translateY(100%);
            opacity: 0;
            animation: revealUp 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
        }

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

        /* --- Grid Layouts --- */
        .breakthrough-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 2rem;
        }

        .card-big { grid-column: span 8; }
        .card-small { grid-column: span 4; }

        @media (max-width: 768px) {
            .card-big, .card-small { grid-column: span 12; }
        }

        .poster-card {
            border: 4px solid var(--deep-green);
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
            background: white;
        }

        .poster-card:hover {
            transform: scale(1.02) rotate(-1deg);
            border-color: var(--bold-orange);
            box-shadow: 20px 20px 0px var(--deep-green);
        }

        /* --- Parallax & Images --- */
        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* --- Section Transitions --- */
        .view-section {
            display: none;
            opacity: 0;
        }

        .view-section.active {
            display: block;
            opacity: 1;
        }

        /* --- UI Elements --- */
        .cta-button {
            background: var(--bold-orange);
            color: var(--deep-green);
            font-family: 'Anton', sans-serif;
            padding: 1.5rem 3rem;
            font-size: 1.5rem;
            transition: all 0.3s ease;
        }

        .cta-button:hover {
            transform: scale(1.1) skewX(-5deg);
            box-shadow: 0 0 30px var(--bold-orange);
        }

        /* --- Mobile Menu --- */
        #mobile-menu {
            transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
            clip-path: circle(0% at 100% 0%);
        }

        #mobile-menu.open {
            clip-path: circle(150% at 100% 0%);
        }

        .menu-link:hover {
            -webkit-text-stroke: 2px white;
            color: transparent;
            transform: translateX(20px);
        }