:root {
            --brand-terracotta: #C45A3C;
            --brand-rose: #D4727A;
            --brand-gold: #D4A856;
            --brand-sage: #7BA769;
        }

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

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

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

        .book-mockup {
            perspective: 1000px;
            width: 260px;
            height: 380px;
            position: relative;
            transform: rotateY(-20deg) rotateX(10deg);
            transform-style: preserve-3d;
            box-shadow: -15px 15px 40px rgba(157, 61, 34, 0.2);
            border-radius: 4px 16px 16px 4px;
        }

        .book-cover {
            background: linear-gradient(135deg, #bd5537 0%, #D4727A 100%);
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 24px;
            color: white;
            border-right: 8px solid rgba(0,0,0,0.1);
        }

        .book-spine {
            position: absolute;
            width: 40px;
            height: 100%;
            left: -40px;
            top: 0;
            background: #81290f;
            transform-origin: right;
            transform: rotateY(-90deg);
        }

        .pulsing-glow {
            animation: pulse 2s infinite ease-in-out;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(212, 168, 86, 0.4); }
            70% { box-shadow: 0 0 0 15px rgba(212, 168, 86, 0); }
            100% { box-shadow: 0 0 0 0 rgba(212, 168, 86, 0); }
        }

        .faq-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .faq-item.active .faq-content {
            max-height: 500px;
        }

        .faq-item.active .faq-icon {
            transform: rotate(45deg);
        }