/* Pattern utilities based on Design System */
        .circuit-pattern {
            background-image: radial-gradient(circle at 2px 2px, var(--tw-colors-outline-variant) 1px, transparent 0);
            background-size: 32px 32px;
        }

        .kinetic-btn {
            background: linear-gradient(45deg, #64fbce, #156874);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .kinetic-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px 8px rgba(100, 251, 206, 0.2);
        }

        /* Hexagonal simulation */
        .hex-card-hover {
            transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hex-card-hover:hover {
            background-color: var(--tw-colors-primary-container);
        }

        .hex-card-hover:hover .hex-text-primary {
            color: var(--tw-colors-on-primary-container);
        }

        .hex-card-hover:hover .hex-text-secondary {
            color: var(--tw-colors-primary-fixed-dim);
        }

        .hex-card-hover:hover .hex-icon {
            color: var(--tw-colors-tertiary-fixed);
            transform: scale(1.1);
        }