:root {
            --lime: #D2FF72;
            --red: #A04747;
            --red-glass: rgba(160, 71, 71, 0.85);
            --lime-glass: rgba(210, 255, 114, 0.9);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--lime);
            color: var(--red);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, .nav-link, .btn-sh {
            font-weight: 400; /* Griffy is display heavy, standard weight is best */
        }

        /* --- UI COMPONENTS --- */
        .btn-sh {
            background: var(--red);
            color: var(--lime);
            padding: 14px 32px;
            border-radius: 12px;
            font-size: 1.5rem;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: inline-flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            border: none;
        }
        .btn-sh:hover {
            transform: scale(1.1) rotate(-2deg);
            box-shadow: 0 10px 25px rgba(160, 71, 71, 0.4);
        }

        .btn-outline {
            border: 3px solid var(--red);
            color: var(--red);
            padding: 12px 30px;
            border-radius: 12px;
            font-size: 1.5rem;
            transition: 0.3s;
        }
        .btn-outline:hover {
            background: var(--red);
            color: var(--lime);
        }

        /* --- HERO ROLLING TEXT --- */
        @keyframes rolling {
            from { transform: translateX(100%); }
            to { transform: translateX(-100%); }
        }
        .rolling-text-container {
            position: absolute;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            top: 40%;
            opacity: 0.15;
            pointer-events: none;
            z-index: 1;
        }
        .rolling-text {
            display: inline-block;
            font-size: 12rem;
            animation: rolling 30s linear infinite;
        }

        /* --- ASYMMETRIC CARDS --- */
        .asym-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            gap: 2.5rem;
        }
        @media (max-width: 900px) { .asym-grid { grid-template-columns: 1fr; } }

        .feature-card {
            background: var(--red-glass);
            color: var(--lime);
            border-radius: 40px;
            padding: 3rem;
            position: relative;
            overflow: hidden;
            transition: 0.5s;
            cursor: pointer;
            min-height: 400px;
        }
        .feature-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 30px 60px rgba(160, 71, 71, 0.5);
        }

        /* --- 3D CAROUSEL --- */
        .carousel-container {
            perspective: 1200px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 50px 0;
        }
        .carousel-card {
            width: 300px;
            height: 450px;
            background: var(--red);
            color: var(--lime);
            border-radius: 30px;
            padding: 30px;
            transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            transform-style: preserve-3d;
        }
        .carousel-card.side { transform: rotateY(35deg) scale(0.85); opacity: 0.6; }
        .carousel-card.center { transform: rotateY(0deg) scale(1.1); z-index: 10; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
        .carousel-card.side-right { transform: rotateY(-35deg) scale(0.85); opacity: 0.6; }

        /* --- RESOURCE TILES --- */
        .resource-tile {
            perspective: 1000px;
            height: 300px;
        }
        .tile-content {
            width: 100%;
            height: 100%;
            transition: transform 0.8s;
            transform-style: preserve-3d;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
        }
        .resource-tile:hover .tile-content {
            transform: rotateY(180deg);
        }
        .tile-front, .tile-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
        }
        .tile-back { transform: rotateY(180deg); background: white; color: var(--red); border: 4px solid var(--red); }

        /* --- ANIMATIONS --- */
        .reveal { opacity: 0; transform: translateY(40px); transition: 1s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* --- SEARCH BAR --- */
        .search-container {
            border: 4px solid var(--red);
            border-radius: 50px;
            background: white;
            padding: 5px 10px;
            display: flex;
            align-items: center;
        }

        #toast-box {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
        }