:root {
            --lavender: #DD88CF;
            --aqua: #48A6A7;
            --mist: #F8E7F6;
            --neutral: #A59D84;
            --royal: #22177A;
        }

        body {
            background-color: var(--mist);
            color: var(--royal);
            font-family: 'Sorts Mill Goudy', serif;
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, .sansita {
            font-family: 'Sansita', sans-serif;
            font-weight: 800;
        }

        /* UI Elements */
        .glass-header {
            background: rgba(248, 231, 246, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.4s ease;
        }
        .glass-header.scrolled {
            background: var(--mist);
            box-shadow: 0 4px 30px rgba(34, 23, 122, 0.05);
        }

        .hero-gradient {
            background: linear-gradient(135deg, var(--lavender) 0%, var(--aqua) 50%, var(--mist) 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%; }
        }

        .toolkit-card {
            background: white;
            border-radius: 32px;
            padding: 3rem;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            border: 1px solid rgba(34, 23, 122, 0.05);
        }

        .toolkit-card:hover {
            transform: translateY(-12px) rotate(1.5deg);
            box-shadow: 0 30px 60px -12px rgba(34, 23, 122, 0.12);
            border-color: var(--lavender);
        }

        .step-highlight {
            border-left: 4px solid var(--royal);
            padding-left: 2rem;
            transition: all 0.3s ease;
        }
        .step-highlight:hover {
            border-left-color: var(--lavender);
            background: rgba(221, 136, 207, 0.05);
        }

        .horizontal-scroll {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
        }
        .horizontal-scroll::-webkit-scrollbar { display: none; }
        
        .tool-card-wide {
            flex: 0 0 85%;
            margin-right: 2rem;
            scroll-snap-align: center;
        }
        @media (min-width: 768px) {
            .tool-card-wide { flex: 0 0 400px; }
        }

        .mobile-menu-overlay {
            clip-path: circle(0% at 100% 0%);
            transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
        }
        .mobile-menu-overlay.active {
            clip-path: circle(150% at 100% 0%);
        }

        /* Animation Classes */
        .reveal-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }
        .reveal-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .view-section { display: none; }
        .view-section.active { display: block; animation: fadeIn 0.6s ease; }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }