.seo-consultation-banner {
            background: linear-gradient(110deg, #103c4a 0%, #193a5e 48%, #29477e 100%);
        }

        .seo-eyebrow {
            color: #a6c4ff;
            letter-spacing: 1px;
        }

        .seo-title {
            font-size: clamp(24px, 2.2vw, 34px);
            letter-spacing: -0.8px;
        }

        .seo-gradient-text {
            background: linear-gradient(90deg, #9ebaff, #66d8e3);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .seo-description {
            max-width: 630px;
            color: #d2e2f4;
            font-size: 15px;
        }

        .seo-call-note { color: #c7d9f0; }
        .seo-call-note i { color: #42e5d2; }

        /* ============================================================
           2. PREMIUM CTA BUTTON
           ============================================================ */
        .seo-cta-button {
            position: relative;
            display: inline-flex;
            align-items: center;
           justify-content: flex-start; 
            padding: 20px 16px;
            border-radius: 14px;
            border: 1px solid rgba(102, 216, 227, 0.4);
            color: #ffffff !important;
            font-weight: 700;
            letter-spacing: 0.3px;
            text-decoration: none;
            overflow: hidden;
            isolation: isolate;
            cursor: pointer;

            background-color: #193a5e;
            background-image:
                linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%),
                linear-gradient(135deg, #103c4a 0%, #193a5e 48%, #29477e 100%),
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
            background-size: 100% 100%, 200% 200%, 180px 180px;
            background-position: 0 0, 0% 50%, 0 0;
            background-blend-mode: overlay, normal, soft-light;

            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.2),
                inset 0 -3px 8px rgba(0,0,0,0.4),
                0 8px 24px rgba(16,60,74,0.6),
                0 0 15px rgba(102,216,227,0.15);

            transition: transform 0.35s cubic-bezier(0.2,0.8,0.2,1),
                        box-shadow 0.35s ease,
                        background-position 0.8s ease;

            animation: seoCtaFloat 4s ease-in-out infinite,
                       seoCtaGradient 12s ease-in-out infinite;
        }

        .seo-cta-button::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg,
                rgba(102,216,227,0.6),
                rgba(255,255,255,0.1),
                rgba(41,71,126,0.8));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 2;
        }

        .seo-cta-button::after {
            content: "";
            position: absolute;
            top: -50%; left: -60%;
            width: 40%; height: 200%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
            transform: rotate(25deg);
            animation: seoCtaShine 6s ease-in-out infinite;
            pointer-events: none;
            z-index: 1;
        }

        .seo-cta-label {
            position: relative;
            z-index: 3;
            display: inline-flex;
            align-items: center;
        }

        .seo-cta-arrow { transition: transform 0.3s ease; }

        .seo-cta-button:hover,
        .seo-cta-button:focus-visible {
            color: #ffffff !important;
            transform: scale(1.03);
            border-color: rgba(102,216,227,0.8);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.3),
                inset 0 -3px 8px rgba(0,0,0,0.5),
                0 12px 32px rgba(16,60,74,0.8),
                0 0 25px rgba(102,216,227,0.3);
        }

        .seo-cta-button:hover .seo-cta-arrow,
        .seo-cta-button:focus-visible .seo-cta-arrow { transform: translateX(6px); }

        .seo-cta-button:focus-visible {
            outline: 3px solid #8ce8ed;
            outline-offset: 4px;
        }

        @keyframes seoCtaFloat {
            0%,100% { translate: 0 0; }
            50%     { translate: 0 -4px; }
        }
        @keyframes seoCtaGradient {
            0%,100% { background-position: 0 0, 0% 50%, 0 0; }
            50%     { background-position: 0 0, 100% 50%, 0 0; }
        }
        @keyframes seoCtaShine {
            0%,55% { left: -60%; }
            100%   { left: 130%; }
        }

        /* ============================================================
           3. CLICK MASCOT (appears on CTA click)
           ============================================================ */
        .cta-mascot {
            position: fixed;
            right: 24px;
            bottom: 0;
            width: 150px;
            pointer-events: none;
            z-index: 9999;

            opacity: 0;
            transform: translateY(120%);
            transition:
                opacity 0.35s ease,
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .cta-mascot.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .cta-mascot svg {
            width: 100%;
            height: auto;
            animation: mascotBob 1.1s ease-in-out infinite;
        }

        @keyframes mascotBob {
            0%,100% { transform: translateY(0); }
            50%     { transform: translateY(-5px); }
        }

        @media (max-width: 767.98px) {
            .seo-title { font-size: 27px; letter-spacing: -0.5px; }
            .seo-description { font-size: 14px; }
            .seo-cta-button { width: 100%; white-space: normal; padding: 14px 20px; }
            .seo-cta-label { flex-wrap: wrap; gap: 4px; }
            .cta-mascot { width: 110px; right: 12px; }
        }
        @media (max-width: 380px) {
            .seo-title { font-size: 24px; }
            .seo-cta-button { font-size: 0.95rem; }
        }

        @media (prefers-reduced-motion: reduce) {
            .seo-cta-button, .seo-cta-button::after, .cta-mascot svg {
                animation: none !important;
            }
            .seo-cta-button, .seo-cta-arrow, .cta-mascot { transition: none; }
        }