/* homepage-fonts.css */
/* Self-hosted homepage font subset — cache-bust v=20260611150000 */

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/ui/fonts/homepage/cairo-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/ui/fonts/homepage/tajawal-400.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/ui/fonts/homepage/tajawal-500.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/ui/fonts/homepage/tajawal-700.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/ui/fonts/homepage/tajawal-800.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/ui/fonts/homepage/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/ui/fonts/homepage/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/ui/fonts/homepage/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/ui/fonts/homepage/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/ui/fonts/homepage/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/ui/fonts/homepage/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/ui/fonts/homepage/figtree-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 500 900;
    font-display: swap;
    src: url('/ui/fonts/homepage/figtree-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* homepage.css */
/* Homepage styles — cache-bust v=20260621235900 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            scroll-behavior: smooth;
            --font-sans: 'Cairo', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
        }

        html[lang="en"] {
            --font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
        }

        /* Literal font stacks on body: some browsers fail font-family: var(--font-sans) even when the var resolves */
        body {
            font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
            line-height: 1.6;
            color: #1a202c;
            background: #ffffff;
        }

        html[lang="en"] body {
            font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header: transparent at top; frosted bar after scroll */
        header {
            color: #1a202c;
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            overflow: visible;
            border-bottom: 1px solid transparent;
            transition: background-color 0.22s ease, border-color 0.22s ease, backdrop-filter 0.22s ease;
        }

        header.header--scrolled {
            background: rgba(250, 245, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom-color: #e9d5ff;
        }

        header .container {
            max-width: 1200px;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 28px;
            font-weight: 400;
            color: #7c3aed;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }
        
        .logo-img {
            width: 40px;
            height: 40px;
            border-radius: 10px;
        }
        
        .footer-logo-img {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            vertical-align: middle;
            margin-left: 8px;
        }
        
        .cta-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
            color: white;
            padding: var(--header-action-pad-y, 12px) var(--header-action-pad-x, 28px);
            border-radius: 11px;
            text-decoration: none;
            font-weight: 700;
            font-size: var(--header-action-font-size, 16px);
            line-height: 1.2;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3);
        }

        .header-actions {
            display: flex;
            align-items: stretch;
            gap: 16px;
            overflow: visible;
            --header-action-pad-y: 12px;
            --header-action-pad-x: 28px;
            --header-action-font-size: 16px;
        }
        
        .header-link {
            color: #475569;
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
            transition: color 0.2s;
        }
        
        .header-link:hover {
            color: #9333ea;
        }

        .homepage-subheader {
            background: rgba(255, 255, 255, 0.98);
            border-bottom: 1px solid #ede9fe;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
        }

        .homepage-subheader__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 24px;
            padding: 18px 0 20px;
        }

        .homepage-subheader__group {
            min-width: 0;
        }

        .homepage-subheader__title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
            font-weight: 400;
            color: #0f172a;
            margin-bottom: 10px;
        }

        .homepage-subheader__list {
            display: grid;
            gap: 8px;
        }

        .homepage-subheader__link {
            display: block;
            text-decoration: none;
            color: #334155;
            font-size: 14px;
            line-height: 1.5;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .homepage-subheader__link:hover {
            color: #a78bfa;
            transform: translateX(-2px);
        }

        /* Hero mesh: same drift/shape motion as before; colors are Adly purple only (no brown / MOGUL orange) */
        .top-aurora-wrap {
            position: relative;
            background: #0a0518;
        }

        /* Pricing band: same animated mesh + base as hero. Taller than hero → add ambient wash + lift so it doesn’t read darker. */
        .pricing-aurora-wrap {
            position: relative;
            background: #0a0518;
            overflow: hidden;
        }

        .pricing-aurora-wrap::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background: linear-gradient(
                180deg,
                rgba(233, 213, 255, 0.11) 0%,
                rgba(124, 58, 237, 0.07) 22%,
                rgba(196, 181, 253, 0.09) 48%,
                rgba(147, 51, 234, 0.08) 72%,
                rgba(233, 213, 255, 0.1) 100%
            );
        }

        .pricing-aurora-wrap .top-aurora-layers {
            z-index: 1;
            filter: brightness(1.12) saturate(1.05);
        }

        .top-aurora-layers {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .mesh-blob {
            position: absolute;
            pointer-events: none;
            border-radius: 50%;
            will-change: transform, opacity;
            mix-blend-mode: normal;
        }

        .mesh-blob::before {
            content: "";
            position: absolute;
            left: -28%;
            top: -28%;
            width: 156%;
            height: 156%;
            border-radius: inherit;
            filter: blur(92px);
            transform: translateZ(0);
        }

        .mesh-blob--1 {
            width: 78vmax;
            height: 78vmax;
            left: -32%;
            top: -48%;
            animation: mesh-orbit-1 18.7s ease-in-out infinite;
        }

        .mesh-blob--1::before {
            background: radial-gradient(circle at 42% 38%,
                rgba(233, 213, 255, 0.55) 0%,
                rgba(124, 58, 237, 0.4) 24%,
                rgba(76, 29, 149, 0.28) 46%,
                rgba(15, 5, 28, 0) 72%);
        }

        .mesh-blob--2 {
            width: 68vmax;
            height: 68vmax;
            right: -36%;
            top: -22%;
            animation: mesh-orbit-2 22.1s ease-in-out infinite;
            animation-delay: -3.4s;
        }

        .mesh-blob--2::before {
            background: radial-gradient(circle at 55% 48%,
                rgba(147, 51, 234, 0.48) 0%,
                rgba(90, 24, 154, 0.3) 40%,
                rgba(60, 9, 108, 0.18) 58%,
                rgba(0, 0, 0, 0) 76%);
        }

        .mesh-blob--3 {
            width: 52vmax;
            height: 52vmax;
            left: 8%;
            bottom: -38%;
            animation: mesh-orbit-3 15.3s ease-in-out infinite;
            animation-delay: -5.95s;
            mix-blend-mode: screen;
        }

        .mesh-blob--3::before {
            background: radial-gradient(circle at 48% 42%,
                rgba(196, 181, 253, 0.45) 0%,
                rgba(124, 58, 237, 0.26) 38%,
                rgba(76, 29, 149, 0.2) 55%,
                rgba(0, 0, 0, 0) 72%);
        }

        .mesh-blob--4 {
            width: 56vmax;
            height: 44vmax;
            right: -5%;
            top: 12%;
            border-radius: 42% 48% 52% 44%;
            animation: mesh-orbit-4 20.4s ease-in-out infinite;
            animation-delay: -1.7s;
        }

        .mesh-blob--4::before {
            border-radius: inherit;
            background: radial-gradient(ellipse 70% 58% at 40% 45%,
                rgba(233, 213, 255, 0.42) 0%,
                rgba(109, 40, 217, 0.24) 42%,
                rgba(35, 15, 60, 0) 72%);
        }

        .mesh-blob--5 {
            width: 38vmax;
            height: 38vmax;
            left: 28%;
            top: 5%;
            animation: mesh-orbit-5 11.9s ease-in-out infinite;
            animation-delay: -7.65s;
            opacity: 0.9;
        }

        .mesh-blob--5::before {
            background: radial-gradient(circle at 50% 50%,
                rgba(124, 58, 237, 0.5) 0%,
                rgba(76, 29, 149, 0.26) 48%,
                rgba(26, 0, 51, 0) 76%);
        }

        .mesh-blob--6 {
            width: 85vmax;
            height: 50vmax;
            left: -40%;
            top: 20%;
            border-radius: 50%;
            animation: mesh-orbit-6 23.8s ease-in-out infinite;
            animation-delay: -9.35s;
            mix-blend-mode: soft-light;
            opacity: 0.88;
        }

        .mesh-blob--6::before {
            background: radial-gradient(ellipse 80% 52% at 60% 48%,
                rgba(45, 20, 80, 0.38) 0%,
                rgba(147, 51, 234, 0.18) 36%,
                rgba(196, 181, 253, 0.1) 52%,
                rgba(0, 0, 0, 0) 78%);
        }

        @keyframes mesh-orbit-1 {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
            18% { transform: translate(12vw, 8vh) scale(1.14); opacity: 0.88; }
            38% { transform: translate(22vw, -4vh) scale(0.9); opacity: 0.35; }
            58% { transform: translate(6vw, 14vh) scale(1.08); opacity: 0.75; }
            78% { transform: translate(-8vw, 6vh) scale(0.95); opacity: 0.5; }
        }

        @keyframes mesh-orbit-2 {
            0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.4; }
            22% { transform: translate(-14vw, 10vh) scale(1.12) rotate(-3deg); opacity: 0.82; }
            48% { transform: translate(-6vw, -12vh) scale(0.88) rotate(2deg); opacity: 0.28; }
            72% { transform: translate(-20vw, 4vh) scale(1.06) rotate(-1deg); opacity: 0.68; }
        }

        @keyframes mesh-orbit-3 {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
            25% { transform: translate(10vw, -16vh) scale(1.18); opacity: 0.72; }
            50% { transform: translate(-12vw, -6vh) scale(0.82); opacity: 0.9; }
            75% { transform: translate(4vw, 8vh) scale(1.05); opacity: 0.38; }
        }

        @keyframes mesh-orbit-4 {
            0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.35; }
            30% { transform: translate(-18vw, 12vh) scale(1.15) rotate(5deg); opacity: 0.78; }
            55% { transform: translate(10vw, -8vh) scale(0.92) rotate(-4deg); opacity: 0.22; }
            80% { transform: translate(4vw, 18vh) scale(1.08) rotate(2deg); opacity: 0.62; }
        }

        @keyframes mesh-orbit-5 {
            0%, 100% { transform: translate(0, 0) scale(0.95); opacity: 0.15; }
            35% { transform: translate(16vw, 20vh) scale(1.25); opacity: 0.85; }
            65% { transform: translate(-10vw, 6vh) scale(0.8); opacity: 0.2; }
        }

        @keyframes mesh-orbit-6 {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
            33% { transform: translate(18vw, -10vh) scale(1.1); opacity: 0.35; }
            66% { transform: translate(-12vw, 12vh) scale(0.92); opacity: 0.65; }
        }

        @media (prefers-reduced-motion: reduce) {
            .mesh-blob {
                animation: none !important;
                opacity: 0.55;
            }
        }

        /*
         * Mobile: static aurora — mid-screen purple burst, darker toward the outer radius.
         */
        @media (max-width: 768px) {
            header.header--scrolled {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            .top-aurora-wrap {
                background: #080412;
            }

            .top-aurora-layers .mesh-blob {
                display: none !important;
            }

            .top-aurora-layers {
                background:
                    radial-gradient(circle at 52% 34%,
                        rgba(196, 181, 253, 0.26) 0%,
                        rgba(147, 51, 234, 0.32) 16%,
                        rgba(109, 40, 217, 0.22) 32%,
                        rgba(76, 29, 149, 0.14) 48%,
                        rgba(45, 16, 90, 0.08) 62%,
                        rgba(10, 5, 24, 0) 78%),
                    linear-gradient(180deg, #0d071a 0%, #090513 55%, #060209 100%);
            }

            .pricing-aurora-wrap {
                background: #090513;
            }

            .pricing-aurora-wrap::before {
                background: linear-gradient(
                    180deg,
                    rgba(233, 213, 255, 0.1) 0%,
                    rgba(124, 58, 237, 0.09) 18%,
                    rgba(196, 181, 253, 0.1) 38%,
                    rgba(147, 51, 234, 0.08) 58%,
                    rgba(124, 58, 237, 0.09) 78%,
                    rgba(196, 181, 253, 0.08) 100%
                );
            }

            .pricing-aurora-wrap .top-aurora-layers {
                filter: none;
                background:
                    /* plan cards — upper */
                    radial-gradient(ellipse 95% 48% at 50% 18%,
                        rgba(196, 181, 253, 0.2) 0%,
                        rgba(147, 51, 234, 0.22) 22%,
                        rgba(109, 40, 217, 0.12) 42%,
                        rgba(45, 16, 90, 0.04) 62%,
                        rgba(8, 4, 18, 0) 78%),
                    /* social proof / mid-pricing */
                    radial-gradient(ellipse 90% 44% at 52% 48%,
                        rgba(168, 85, 247, 0.16) 0%,
                        rgba(124, 58, 237, 0.18) 24%,
                        rgba(90, 24, 154, 0.1) 46%,
                        rgba(45, 16, 90, 0.05) 64%,
                        rgba(8, 4, 18, 0) 80%),
                    /* compare plans — lower */
                    radial-gradient(ellipse 88% 42% at 48% 78%,
                        rgba(196, 181, 253, 0.16) 0%,
                        rgba(147, 51, 234, 0.17) 22%,
                        rgba(109, 40, 217, 0.11) 44%,
                        rgba(76, 29, 149, 0.07) 62%,
                        rgba(8, 4, 18, 0) 78%),
                    linear-gradient(180deg, #0d071a 0%, #0a0518 35%, #0b061a 68%, #0a0518 100%);
            }

            .portfolio-track {
                will-change: auto;
            }
        }

        /*
         * Homepage: fixed bar stays visible for the full scroll (sticky breaks inside tall wrappers / overflow).
         * Unscrolled: fully transparent over the aurora. Scrolled: .header--scrolled fills/bar from JS.
         */
        body.homepage {
            --homepage-header-pad-y: 15px;
        }

        @media (max-width: 600px) {
            body.homepage {
                --homepage-header-pad-y: 10px;
            }
        }

        .homepage .top-aurora-wrap {
            padding-top: calc(
                (var(--homepage-header-pad-y) * 2) + 40px + env(safe-area-inset-top, 0px)
            );
        }

        .homepage header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 1000;
            box-sizing: border-box;
            padding: calc(var(--homepage-header-pad-y) + env(safe-area-inset-top, 0px)) 0 var(--homepage-header-pad-y);
        }

        .homepage header:not(.header--scrolled) {
            background: transparent;
            border-bottom-color: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        @supports selector(:has(*)) {
            html:has(body.homepage) {
                scroll-padding-top: 96px;
            }
        }

        .homepage header .logo {
            color: #f8fafc;
        }

        .homepage header .header-link {
            color: rgba(226, 232, 240, 0.9);
        }

        .homepage header .header-link:hover {
            color: #c4b5fd;
        }

        .homepage header .lang-switcher {
            background: rgba(18, 12, 28, 0.75);
            border-color: rgba(167, 139, 250, 0.5);
            color: #fafafa;
        }

        .homepage header .lang-switcher .lang-icon {
            color: #e2e8f0;
        }

        .homepage header.header--scrolled {
            background: rgba(12, 8, 22, 0.92);
            border-bottom-color: rgba(167, 139, 250, 0.35);
            /* No backdrop-filter here: blur over the mesh + scroll = iOS jank & content flashing */
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .homepage header.header--scrolled .logo {
            color: #f8fafc;
        }

        .homepage header.header--scrolled .header-link {
            color: rgba(241, 245, 249, 0.93);
        }

        .homepage header.header--scrolled .lang-switcher {
            background: rgba(22, 16, 36, 0.9);
            border-color: rgba(196, 181, 253, 0.4);
            color: #fafafa;
        }

        .homepage header.header--scrolled .lang-switcher .lang-icon {
            color: #e2e8f0;
        }

        .top-aurora-wrap .homepage-subheader {
            position: relative;
            z-index: 2;
            background: transparent;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: none;
        }

        .top-aurora-wrap .homepage-subheader__title {
            color: rgba(248, 250, 252, 0.9);
        }

        .top-aurora-wrap .homepage-subheader__link {
            color: rgba(226, 232, 240, 0.78);
        }

        .top-aurora-wrap .homepage-subheader__link:hover {
            color: #ddd6fe;
        }

        section.hero-aurora-headline {
            position: relative;
            z-index: 2;
            padding: clamp(52px, 9vw, 96px) 0 24px;
            text-align: center;
        }

        .hero-title {
            font-size: clamp(34px, 5vw, 56px);
            font-weight: 400;
            margin: 0 auto 0;
            line-height: 1.15;
            letter-spacing: -0.02em;
            color: #f8fafc;
            max-width: 820px;
        }

        .hero-title .highlight {
            color: #c4b5fd;
            font-style: italic;
            font-weight: 400;
        }

        .hero-platform-strip {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(10px, 1.5vw, 18px);
            flex-wrap: wrap;
            margin: 0 auto 28px;
        }

        .hero-platform-icon {
            width: clamp(23px, 2.73vw, 30.5px);
            height: clamp(23px, 2.73vw, 30.5px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            backdrop-filter: none;
        }

        .hero-platform-icon img,
        .hero-platform-icon svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .hero-platform-icon.is-facebook img,
        .hero-platform-icon.is-tiktok img {
            border-radius: 999px;
        }

        .hero-platform-icon.is-instagram img,
        .hero-platform-icon.is-linkedin img,
        .hero-platform-icon.is-x img {
            border-radius: 8px;
        }

        .hero-platform-icon.is-whatsapp svg,
        .hero-platform-icon.is-telegram svg {
            border-radius: 999px;
            filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.18));
        }

        .hero-platform-icon.is-whatsapp svg {
            fill: #22c55e;
            stroke: #ffffff;
            stroke-width: 1.25;
            stroke-linecap: round;
            stroke-linejoin: round;
            background: #22c55e;
            padding: 2px;
        }

        .hero-platform-icon.is-telegram svg {
            fill: #2aabee;
            background: #ffffff;
            padding: 2px;
        }

        .lang-switcher {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            align-self: stretch;
            position: relative;
            overflow: visible;
            padding-block: 0;
            padding-inline-start: 12px;
            padding-inline-end: 10px;
            background: #ffffff;
            border: 1px solid #e9d5ff;
            border-radius: 11px;
            box-sizing: border-box;
            color: #4c1d95;
            font-size: var(--header-action-font-size, 16px);
        }

        .lang-switcher .lang-icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            color: #6b7280;
            pointer-events: none;
        }

        .lang-switcher-menu {
            position: static;
            margin: 0;
            flex: 1 1 auto;
        }

        .lang-switcher-summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
            font-weight: 600;
            font-size: inherit;
            line-height: 1.2;
            padding-block: var(--header-action-pad-y, 12px);
            padding-inline-end: 16px;
            color: inherit;
        }

        .lang-switcher-summary::-webkit-details-marker {
            display: none;
        }

        .lang-switcher-summary::after {
            content: '';
            width: 0;
            height: 0;
            margin-inline-start: 8px;
            border-inline-start: 4px solid transparent;
            border-inline-end: 4px solid transparent;
            border-top: 5px solid currentColor;
            opacity: 0.7;
        }

        .lang-switcher-panel {
            position: absolute;
            top: calc(100% + 6px);
            inset-inline-start: 0;
            inset-inline-end: 0;
            width: auto;
            min-width: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 6px;
            padding: 8px;
            background: #ffffff;
            border: 1px solid #e9d5ff;
            border-radius: 11px;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
            z-index: 80;
        }

        .lang-switcher-link {
            display: block;
            width: 100%;
            box-sizing: border-box;
            font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
            font-weight: 600;
            font-size: inherit;
            line-height: 1.2;
            color: inherit;
            text-decoration: none;
            padding: 10px 12px;
            border-radius: 8px;
            white-space: nowrap;
        }

        .lang-switcher-link:hover,
        .lang-switcher-link:focus-visible {
            background: rgba(147, 51, 234, 0.1);
        }

        html[lang="en"] .lang-switcher-summary,
        html[lang="en"] .lang-switcher-link {
            font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
        }

        .homepage header .lang-switcher-panel {
            background: #120c1c;
            border-color: rgba(196, 181, 253, 0.45);
            color: #fafafa;
        }

        .homepage header .lang-switcher-link:hover,
        .homepage header .lang-switcher-link:focus-visible {
            background: rgba(167, 139, 250, 0.28);
        }
        
        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(147, 51, 234, 0.4);
        }
        
        /* Hero continuation: same aurora band as headline — no white panel */
        .hero.hero--continuation {
            position: relative;
            z-index: 2;
            background: transparent;
            color: #f8fafc;
            padding: 0 0 0;
            text-align: center;
            overflow: visible;
        }

        .hero.hero--continuation .container {
            position: relative;
            z-index: 1;
        }

        .hero.hero--continuation .subtitle {
            font-size: clamp(17px, 2vw, 20px);
            margin-top: 0;
            margin-bottom: 10px;
            font-weight: 600;
            max-width: 860px;
            margin-right: auto;
            margin-left: auto;
            color: #ffffffb3;
            line-height: 1.75;
        }
        
        .hero.hero--continuation .subtitle strong {
            color: #ffffff;
            font-weight: 700;
        }

        .hero-founder-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: inherit;
            text-decoration: none !important;
            font-weight: inherit;
            white-space: nowrap;
            vertical-align: middle;
        }

        .hero-founder-link:hover {
            color: inherit;
            text-decoration: none;
        }

        .hero-founder-link img {
            width: 30px;
            height: 30px;
            border-radius: 999px;
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.82);
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
        }
        
        .hero.hero--continuation .subtitle-secondary {
            font-size: 17px;
            color: rgba(226, 232, 240, 0.88);
            font-weight: 600;
            max-width: 820px;
            margin: 0 auto 22px;
            line-height: 1.65;
        }

        .hero.hero--continuation .hero-friction {
            color: rgba(226, 232, 240, 0.78);
            margin-bottom: 0;
        }

        .top-aurora-wrap > .hero-social-note {
            position: relative;
            z-index: 2;
            text-align: center;
            color: rgba(248, 250, 252, 0.85);
            font-size: 14px;
            font-weight: 600;
            margin: 0;
            padding: 8px 16px 20px;
        }

        .top-aurora-wrap > .hero-social-note:empty {
            display: none;
            padding: 0;
        }

        .hero.hero--continuation .hero-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 40px;
            margin-bottom: 10px;
        }

        .hero.hero--continuation .hero-buttons--single {
            justify-content: center;
        }
        
        /* Primary CTA — global (.hero-cta) so sections outside .hero--continuation keep the filled button */
        .hero-cta {
            background: #7c3aed;
            color: white;
            padding: 0 38px;
            border-radius: 11px;
            text-decoration: none;
            font-weight: 700;
            font-size: 19px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 58px;
            transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
            box-shadow: 0 10px 26px rgba(124, 58, 237, 0.32);
        }

        /* Match /ui/styles.css .button primary (radius + brand fill) */
        .hero-cta.hero-cta--stacked {
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 18px 36px;
            min-height: unset;
            border-radius: 11px;
            border: 1px solid color-mix(in srgb, #7c3aed 35%, #4c1d95);
            background: color-mix(in srgb, #7c3aed 88%, #1f2937);
            box-shadow: 0 10px 26px rgba(124, 58, 237, 0.32);
            font-weight: 800;
            text-align: center;
            line-height: 1.25;
            max-width: 420px;
        }

        .hero-cta__line1 {
            display: block;
            font-size: clamp(16px, 2.8vw, 20px);
            font-weight: 800;
        }

        .hero-cta__line2 {
            display: block;
            font-size: clamp(12px, 2vw, 14px);
            font-weight: 600;
            opacity: 0.92;
            letter-spacing: 0.02em;
        }

        .hero-cta__arrow {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex-shrink: 0;
        }

        [dir="rtl"] .hero-cta__arrow {
            transform: scaleX(-1);
        }
        
        .hero-cta:not(.hero-cta--stacked):hover {
            transform: translateY(-2px);
            background: #6d28d9;
            box-shadow: 0 12px 28px rgba(109, 40, 217, 0.32);
        }

        .hero-cta.hero-cta--stacked:hover {
            transform: translateY(-2px);
            background: color-mix(in srgb, #7c3aed 92%, #111827);
            box-shadow: 0 12px 28px rgba(109, 40, 217, 0.32);
        }

        /* Hero under aurora: white CTA, brand text (must follow global .hero-cta) */
        .hero.hero--continuation .hero-cta,
        .hero.hero--continuation .hero-cta.hero-cta--stacked {
            background: #ffffff;
            color: #7c3aed;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
        }

        .hero.hero--continuation .hero-cta.hero-cta--stacked {
            border: 1px solid rgba(196, 181, 253, 0.65);
        }

        .hero.hero--continuation .hero-cta:not(.hero-cta--stacked):hover,
        .hero.hero--continuation .hero-cta.hero-cta--stacked:hover {
            transform: translateY(-2px);
            background: #f5f3ff;
            color: #6d28d9;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
        }
        
        .hero-cta-secondary {
            background: white;
            color: #5b21b6;
            padding: 0 34px;
            border-radius: 11px;
            text-decoration: none;
            font-weight: 700;
            font-size: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 54px;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
            border: 2px solid #d8b4fe;
        }
        
        .hero-cta-secondary:hover {
            border-color: #7c3aed;
            background: #f5f3ff;
            color: #4c1d95;
            transform: translateY(-2px);
        }
        
        .hero-friction {
            font-size: 11.5px;
            font-weight: 500;
            color: #6b7280;
            margin-bottom: 20px;
        }
        
        .hero-social-note {
            margin-top: 10px;
            color: #374151;
            font-size: 14px;
            font-weight: 600;
        }
        
        /* Section Common Styles */
        section {
            padding: 80px 0;
        }
        
        .section-title {
            text-align: center;
            font-size: 44px;
            font-weight: 400;
            margin-bottom: 20px;
            color: #7c3aed;
        }
        
        .section-subtitle {
            text-align: center;
            font-size: 20px;
            color: #64748b;
            margin-bottom: 50px;
        }
        
        /* For Everyone Section */
        .for-everyone {
            background: #ffffff;
            padding-top: 56px;
            padding-bottom: 56px;
        }

        .for-everyone .section-title {
            margin-bottom: 10px;
        }

        .for-everyone .section-subtitle {
            margin-bottom: 24px;
            font-size: clamp(16px, 2vw, 20px);
            font-weight: 500;
            line-height: 1.5;
            color: #667085;
        }

        .audience-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 22px;
        }
        
        .audience-card {
            background: white;
            padding: 34px 30px;
            border-radius: 20px;
            border: 1px solid #e7eaf1;
            border-top: 2px solid #d8dee9;
            box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .audience-card:hover {
            transform: translateY(-3px);
            border-color: #cfd8e6;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
        }

        .audience-card.sme {
            border-top-color: #a78bfa;
        }

        .audience-card.agency {
            border-top-color: #cbd5e1;
        }
        
        .audience-card h3 {
            font-size: 28px;
            font-weight: 400;
            margin-bottom: 8px;
            color: #0f172a;
            display: flex;
            align-items: center;
            gap: 10px;
            line-height: 1.2;
        }

        .audience-title-icon {
            width: 22px;
            height: 22px;
            color: #64748b;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transform: translateY(-1px);
        }

        .audience-title-text {
            display: block;
        }

        .audience-title-icon svg {
            width: 100%;
            height: 100%;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        
        .audience-card p {
            font-size: 15px;
            color: #475569;
            line-height: 1.5;
            margin-bottom: 14px;
            font-weight: 500;
        }
        
        .audience-card ul {
            list-style: none;
            padding: 0;
        }
        
        .audience-card li {
            font-size: 14px;
            line-height: 1.5;
            padding: 9px 0;
            border-bottom: 1px solid #edf2f7;
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        
        .audience-card li:before {
            content: "✓";
            color: #16a34a;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 1px solid #bbf7d0;
            background: #f0fdf4;
            font-size: 12px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .for-everyone-cta {
            margin-top: 18px;
            text-align: center;
        }

        .for-everyone-cta .hero-buttons {
            margin-bottom: 8px;
        }

        .for-everyone-cta .for-cta-microcopy {
            font-size: 14px;
            font-weight: 600;
            color: #64748b;
        }

        @media (max-width: 1024px) {
            .for-everyone .audience-grid {
                grid-template-columns: 1fr;
            }
        }

        .audience-item-label {
            font-weight: 700;
        }

        .audience-help {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 1px solid #c4b5fd;
            background: #f5f3ff;
            color: #7c3aed;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            flex-shrink: 0;
        }

        .audience-help-tip {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            z-index: 8;
            min-width: 220px;
            max-width: 340px;
            padding: 9px 11px;
            border-radius: 10px;
            background: #111827;
            color: #ffffff;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.45;
            opacity: 0;
            transform: translateY(4px);
            pointer-events: none;
            transition: opacity 0.12s ease, transform 0.12s ease;
        }

        [dir="rtl"] .audience-help-tip {
            left: auto;
            right: 0;
        }

        .audience-card li:hover .audience-help-tip,
        .audience-help:focus + .audience-help-tip {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Features Section */
        .features {
            background: linear-gradient(180deg, #fafbff 0%, #f6f8fc 100%);
            padding: 56px 0;
        }

        .features .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 32px;
        }

        .features .section-title {
            margin-bottom: 8px;
        }

        .features .section-subtitle {
            margin-bottom: 44px;
            font-size: 16px;
            font-weight: 500;
            color: rgba(71, 85, 105, 0.82);
        }

        .feature-pillars {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
        }

        .feature-pillars-row {
            display: contents;
        }

        .feature-pillar {
            background: #ffffff;
            padding: 26px 22px;
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, 0.2);
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
            text-align: right;
            display: flex;
            flex-direction: column;
            min-height: 100%;
            transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
        }

        .feature-pillar:hover {
            transform: translateY(-4px);
            background: #fbfcff;
            box-shadow: 0 14px 28px rgba(15, 23, 42, 0.09);
        }

        [dir="ltr"] .feature-pillar {
            text-align: left;
        }

        .feature-pillar.is-campaign {
            border-color: #b9c9ee;
            box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
        }

        .feature-pillar.feature-pillar-secondary {
            padding: 26px 22px;
            border-color: rgba(148, 163, 184, 0.16);
            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
        }

        .feature-pillar-head {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .feature-pillar-title {
            margin: 0;
            font-size: 22px;
            font-weight: 400;
            color: #0f172a;
            line-height: 1.35;
        }

        .feature-pillar-desc {
            margin: 0 0 14px;
            font-size: 14px;
            color: rgba(71, 85, 105, 0.78);
            line-height: 1.55;
        }

        [dir="ltr"] .feature-pillar-desc {
            text-align: left;
        }
        
        .feature-icon {
            width: 22px;
            height: 22px;
            color: #64748b;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .feature-pillar:hover .feature-icon {
            transform: translateY(-1px) scale(1.05);
        }

        .feature-icon svg {
            width: 100%;
            height: 100%;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.75;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .feature-highlights {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .feature-highlights li {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            padding: 10px 0;
            padding-inline-start: 4px;
            border-bottom: 1px solid #f2f5f9;
            font-size: 14px;
            line-height: 1.5;
            color: #334155;
        }

        .feature-highlights li:first-child {
            color: #1f2937;
            font-weight: 700;
        }

        .feature-highlights li::before {
            content: "";
            width: 10px;
            height: 10px;
            margin-top: 8px;
            border-radius: 999px;
            border: 1.5px solid #9fb0c5;
            background: #eff4fa;
            flex-shrink: 0;
        }

        .pillar-more {
            display: none;
        }

        .pillar-more summary {
            list-style: none;
            cursor: pointer;
            color: #5b21b6;
            font-size: 13px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .pillar-more summary::-webkit-details-marker {
            display: none;
        }

        .pillar-more summary::after {
            content: "⌄";
            font-size: 12px;
            transform: translateY(-1px);
            transition: transform 0.15s ease;
        }

        .pillar-more[open] summary::after {
            transform: rotate(180deg) translateY(1px);
        }

        .pillar-more-content {
            display: grid;
            grid-template-rows: 0fr;
            opacity: 0;
            transition: grid-template-rows 0.28s ease, opacity 0.24s ease;
        }

        .pillar-more[open] .pillar-more-content {
            grid-template-rows: 1fr;
            opacity: 1;
        }

        .pillar-more-inner {
            overflow: hidden;
        }

        .pillar-tools {
            list-style: none;
            margin: 8px 0 0;
            padding: 0;
        }

        .pillar-tools li {
            display: flex;
            align-items: flex-start;
            gap: 11px;
            padding: 14px 0;
            padding-inline-start: 4px;
            border-bottom: 1px solid #f2f5f9;
            font-size: 15px;
            line-height: 1.68;
            color: #334155;
        }

        .pillar-tools li::before {
            content: "";
            width: 10px;
            height: 10px;
            margin-top: 8px;
            border-radius: 999px;
            border: 1.5px solid #9fb0c5;
            background: #eff4fa;
            flex-shrink: 0;
        }

        .features-cta {
            margin-top: 34px;
            text-align: center;
        }

        .features-cta .hero-buttons {
            margin-bottom: 8px;
        }

        .features-cta .hero-cta {
            min-height: 66px;
            font-size: 21px;
            padding: 0 48px;
        }

        .features-cta-microcopy {
            font-size: 13px;
            font-weight: 600;
            color: #64748b;
        }

        @media (max-width: 1024px) {
            .features .feature-pillars {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 24px;
            }
        }

        @media (max-width: 768px) {
            .features .container {
                padding: 0 20px;
            }

            .features .feature-pillars {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .feature-pillar {
                padding: 22px 20px;
            }

            .feature-pillar-title {
                font-size: 18px;
            }

            .features .section-subtitle {
                margin-bottom: 40px;
            }

            .features-cta {
                margin-top: 28px;
            }

            .features-cta .hero-cta {
                min-height: 54px;
                font-size: 17px;
                padding: 0 24px;
            }
        }

        /* Founder note */
        .founder-note {
            background:
                radial-gradient(circle at 20% 8%, rgba(167, 139, 250, 0.12), transparent 28%),
                linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
            padding: 72px 0 84px;
        }

        .founder-note-card {
            max-width: 860px;
            margin: 0 auto;
            padding: clamp(30px, 5vw, 56px);
            border-radius: 28px;
            border: 1.5px solid rgba(124, 58, 237, 0.28);
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
            text-align: start;
        }

        .founder-note-head {
            text-align: center;
            margin-bottom: 30px;
        }

        .founder-note-avatar {
            width: 112px;
            height: 112px;
            border-radius: 50%;
            object-fit: cover;
            display: block;
            margin: 0 auto 18px;
            border: 3px solid rgba(124, 58, 237, 0.22);
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
        }

        .founder-note-title {
            margin: 0;
            font-size: clamp(26px, 3.5vw, 36px);
            line-height: 1.05;
            letter-spacing: -0.035em;
            color: #1f2937;
            font-weight: 900;
        }

        .founder-note-title span {
            color: #7c3aed;
        }

        .founder-note-kicker {
            margin-top: 8px;
            color: #6b7280;
            font-size: 15px;
            font-weight: 700;
        }

        .founder-note-body {
            max-width: 720px;
            margin: 0 auto;
        }

        .founder-note-body p {
            margin: 0 0 24px;
            color: #4b5563;
            font-size: clamp(16px, 1.8vw, 20px);
            line-height: 1.58;
            font-weight: 500;
            letter-spacing: -0.015em;
        }

        .founder-note-body p:last-child {
            margin-bottom: 0;
        }

        .founder-note-body strong {
            color: #1f2937;
            font-weight: 900;
        }

        .founder-note-action {
            margin-top: 34px;
            text-align: center;
        }

        .founder-note-cta {
            background: #7c3aed;
            box-shadow: 0 14px 28px rgba(124, 58, 237, 0.24);
        }

        .founder-note-cta:hover {
            background: #6d28d9;
            box-shadow: 0 18px 34px rgba(124, 58, 237, 0.34);
        }

        @media (max-width: 768px) {
            .founder-note {
                padding: 48px 0 58px;
            }

            .founder-note-card {
                border-radius: 22px;
                padding: 28px 20px 32px;
            }

            .founder-note-avatar {
                width: 88px;
                height: 88px;
            }

            .founder-note-body p {
                margin-bottom: 19px;
            }
        }
        
        /* Portfolio Gallery - seamless after hero (aurora mesh shows through) */
        .portfolio {
            position: relative;
            z-index: 2;
            background: transparent;
            color: white;
            overflow: hidden;
            padding: 70px 0 36px;
            /* Force LTR for predictable carousel behavior */
            direction: ltr;
            margin-bottom: 0;
            margin-top: 0;
        }

        .portfolio ~ .portfolio-more {
            margin-top: -2px;
        }

        .portfolio-viewport {
            position: relative;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        /* One spotlight over both rails: horizontal vignette + soft overhead highlight */
        .portfolio-viewport::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 2;
            background-image:
                radial-gradient(
                    ellipse 90% 55% at 50% -35%,
                    rgba(233, 213, 255, 0.14) 0%,
                    transparent 50%
                ),
                linear-gradient(
                    90deg,
                    rgba(10, 5, 24, 0.82) 0%,
                    rgba(10, 5, 24, 0.38) 12%,
                    rgba(10, 5, 24, 0.12) 22%,
                    transparent 34%,
                    transparent 66%,
                    rgba(10, 5, 24, 0.12) 78%,
                    rgba(10, 5, 24, 0.38) 88%,
                    rgba(10, 5, 24, 0.82) 100%
                );
        }

        .landing-message {
            background: #ffffff;
            padding: 56px 0 36px;
        }

        .landing-message .container {
            max-width: 1400px;
        }

        .landing-message-inner {
            width: 38%;
            max-width: 677px;
            margin-left: auto;
            margin-right: auto;
            text-align: start;
        }

        .landing-message-line {
            font-size: clamp(25.58px, 3.41vw, 38.96px);
            font-weight: 400;
            line-height: 1.45;
            letter-spacing: -0.01em;
            margin: 0;
        }

        .landing-message-line + .landing-message-line {
            margin-top: 36px;
        }

        .landing-word-chunk {
            color: #cfcfcf;
        }

        .reveal-ready .landing-word-chunk {
            transition: color 400ms ease;
        }

        .landing-word-chunk.is-visible {
            color: #111111;
        }

        .founder-video {
            position: relative;
            background: #ffffff;
            padding: 48px 0 74px;
            overflow: hidden;
            border-bottom: 1px solid rgba(226, 232, 240, 0.82);
        }

        .founder-video::before {
            content: none;
        }

        .founder-video::after {
            content: none;
        }

        .founder-video .container {
            max-width: 1360px;
        }

        .founder-video-card {
            position: relative;
            border-radius: 0;
            padding: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
            overflow: visible;
            isolation: auto;
            max-width: none;
            margin: 0;
        }

        .founder-video-card::before {
            content: none;
        }

        .founder-video-lead {
            margin: 0 auto 14px;
            max-width: 980px;
            font-size: 12px;
            letter-spacing: 0.08em;
            line-height: 1.35;
            text-align: center;
            color: rgba(44, 30, 72, 0.72);
            font-weight: 700;
        }

        .founder-video-proof {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            margin: 0 auto 22px;
            color: #4b5563;
            font-size: clamp(17px, 2.2vw, 24px);
            font-weight: 500;
            line-height: 1.25;
            text-align: center;
        }

        .founder-video-proof .pricing-social-proof-avatars {
            flex-shrink: 0;
        }

        .founder-video-proof .avatar-badge {
            width: 3.75rem;
            height: 3.75rem;
            margin-inline-end: -0.9rem;
            border-width: 2px;
            border-color: #ffffff;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
        }

        .founder-video-proof .avatar-badge:last-child {
            margin-inline-end: 0;
        }

        .founder-video-proof-text {
            display: inline-block;
        }

        .founder-video-proof-text strong {
            color: #111827;
            font-weight: 900;
        }

        .founder-video-frame {
            border-radius: 22px;
            overflow: hidden;
            border: 1px solid rgba(132, 109, 167, 0.08);
            background: #0f061e;
            box-shadow: 0 10px 28px rgba(18, 12, 30, 0.16);
            max-width: 980px;
            margin: 0 auto;
        }

        .founder-video-player {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 19 / 10;
            background: #0f061e;
            object-fit: cover;
        }

        .hero.hero--continuation .founder-video--in-hero {
            max-width: 1080px;
            margin: clamp(30px, 5vw, 58px) auto 0;
            padding: 0;
            background: transparent;
            border-bottom: 0;
            overflow: visible;
        }

        .hero.hero--continuation .founder-video-proof {
            color: rgba(255, 255, 255, 0.9);
        }

        .hero.hero--continuation .founder-video-proof-text strong {
            color: #ffffff;
        }

        .hero.hero--continuation .founder-video-proof .avatar-badge {
            border-color: rgba(255, 255, 255, 0.82);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
        }

        .hero.hero--continuation .founder-video-frame {
            border-color: rgba(255, 255, 255, 0.18);
            box-shadow: 0 20px 60px rgba(15, 8, 32, 0.35);
        }

        .hero-showcase-bridge {
            position: relative;
            z-index: 2;
            max-width: 760px;
            margin: 0 auto 34px;
            padding: 0 24px;
            text-align: center;
            color: #ffffff;
            direction: rtl;
        }

        .hero-showcase-bridge::before {
            content: none;
        }

        .hero-showcase-bridge::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -12px;
            width: min(220px, 48vw);
            height: 1px;
            transform: translateX(-50%);
            background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(196, 181, 253, 0.72), rgba(255, 255, 255, 0));
            box-shadow: 0 0 18px rgba(124, 58, 237, 0.35);
            pointer-events: none;
        }

        .hero-showcase-bridge__label {
            display: inline-block;
            padding: 0;
            background: transparent;
            border: 0;
            color: rgba(255, 255, 255, 0.92);
            font-size: clamp(24px, 3vw, 34px);
            font-weight: 800;
            letter-spacing: -0.02em;
            line-height: 1.18;
            text-shadow: 0 12px 34px rgba(124, 58, 237, 0.38);
        }

        [dir="ltr"] .founder-video-lead {
            letter-spacing: -0.015em;
        }

        .portfolio-more .founder-video {
            background: transparent;
            padding: 16px 0 0;
        }

        .portfolio-more .founder-video .container {
            max-width: 900px;
        }

        .portfolio-more .founder-video-card {
            border-radius: 26px;
            padding: clamp(12px, 1.6vw, 16px);
            background:
                linear-gradient(160deg, rgba(19, 10, 38, 0.96), rgba(11, 6, 27, 0.92));
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow:
                0 26px 70px rgba(7, 3, 19, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }

        .portfolio-more .founder-video-card::before {
            width: 420px;
            height: 420px;
            inset-inline-end: -170px;
            inset-block-start: -170px;
            background: radial-gradient(circle, rgba(124, 58, 237, 0.3), rgba(124, 58, 237, 0));
        }

        .portfolio-more .founder-video-title {
            margin-bottom: 10px;
            font-size: clamp(21px, 1.9vw, 30px);
            color: #f8f4ff;
            text-shadow: 0 2px 14px rgba(97, 39, 196, 0.35);
        }

        .portfolio-more .founder-video-frame {
            border-radius: 18px;
            border-color: rgba(255, 255, 255, 0.18);
            box-shadow:
                0 12px 35px rgba(4, 2, 12, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.06) inset;
        }

        .portfolio-more .founder-video-player {
            border-radius: 18px;
        }

        /* Product Power Showcase */
        .product-power {
            position: relative;
            overflow: hidden;
            background: #ffffff;
            padding: 16px 0 52px;
        }

        .product-power::before {
            content: none;
        }

        .product-power .container {
            position: relative;
            z-index: 1;
            max-width: 1280px;
        }

        .product-power-header {
            max-width: 780px;
            margin: 0 auto 56px;
            text-align: center;
        }

        .product-power-badge,
        .product-power-final-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1px solid rgba(124, 58, 237, 0.16);
            background: rgba(255, 255, 255, 0.72);
            color: #7c3aed;
            border-radius: 999px;
            padding: 8px 14px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.02em;
            box-shadow: 0 10px 28px rgba(124, 58, 237, 0.08);
        }

        .product-power-title {
            color: #141124;
            font-size: clamp(36px, 5vw, 64px);
            line-height: 1.04;
            font-weight: 800;
            letter-spacing: -0.04em;
            margin: 18px 0;
        }

        .product-power-title span,
        .product-power-feature-title span {
            color: #7c3aed;
        }

        .product-power-subtitle {
            margin: 0 auto;
            max-width: 680px;
            color: #64748b;
            font-size: 18px;
            line-height: 1.75;
            font-weight: 500;
        }

        .product-power-stack {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .product-power-feature {
            position: relative;
            display: flex;
            gap: clamp(32px, 5vw, 64px);
            align-items: center;
            justify-content: center;
            padding: 18px 0 48px;
        }

        .product-power-feature.is-schedule-feature {
            order: 4;
        }

        .product-power-feature.is-adly-command-feature {
            order: 5;
        }

        .product-power-final {
            order: 6;
        }

        @media (min-width: 981px) {
            .product-power-feature.is-schedule-feature .product-power-media,
            .product-power-feature.is-adly-command-feature .product-power-copy {
                order: 1;
            }

            .product-power-feature.is-schedule-feature .product-power-copy,
            .product-power-feature.is-adly-command-feature .product-power-media {
                order: 2;
            }
        }

        .product-power-copy {
            flex: 1 1 0;
            max-width: 576px;
        }

        .product-power-media {
            flex: 1 1 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .product-power-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: #7c3aed;
            font-size: 14px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 14px;
        }

        .product-power-eyebrow svg,
        .product-power-tool-icon svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .product-power-eyebrow svg {
            width: 36px;
            height: 36px;
            padding: 8px;
            border-radius: 12px;
            background: rgba(124, 58, 237, 0.1);
            color: #7c3aed;
            box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.08);
        }

        .product-power-feature-title {
            color: #1f2937;
            font-size: clamp(34px, 4vw, 50px);
            line-height: 1.06;
            letter-spacing: -0.035em;
            font-weight: 800;
            margin: 0 0 18px;
        }

        .product-power-copy p {
            color: #64748b;
            font-size: 17px;
            line-height: 1.75;
            font-weight: 500;
            margin: 0 0 26px;
        }

        .product-power-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .product-power-action-primary,
        .product-power-action-secondary,
        .product-power-final-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            padding: 0 20px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 700;
            font-size: 15px;
            font-family: inherit;
            cursor: pointer;
            transition: transform 0.24s ease, box-shadow 0.24s ease;
        }

        button.product-power-action-primary,
        button.product-power-action-secondary {
            appearance: none;
            -webkit-appearance: none;
        }

        .product-power-action-primary {
            color: #ffffff;
            background: #7c3aed;
            border: 1px solid transparent;
            box-shadow: 0 12px 26px rgba(124, 58, 237, 0.22);
        }

        .product-power-action-secondary {
            color: #5b21b6;
            background: #ffffff;
            border: 1px solid #d8def0;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
        }

        .product-power-action-primary:hover,
        .product-power-action-secondary:hover,
        .product-power-final-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
        }

        .product-power-media-shell {
            position: relative;
            width: 100%;
            max-width: 512px;
            aspect-ratio: 1 / 1;
            border-radius: 32px;
            background: #f1f2f4;
            border: 1px solid rgba(226, 232, 240, 0.88);
            box-shadow: 0 28px 70px rgba(71, 85, 105, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.95);
            overflow: hidden;
        }

        .product-power-media-shell.is-video {
            aspect-ratio: 1328 / 1080;
        }

        .product-power-media-shell.is-video-wide {
            aspect-ratio: 1658 / 1080;
        }

        .product-power-media-shell.is-adly-listening {
            aspect-ratio: 1328 / 1080;
            padding: clamp(16px, 2.2vw, 24px);
            background:
                radial-gradient(circle at 82% 82%, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0) 34%),
                linear-gradient(135deg, #140a28 0%, #211044 52%, #0f172a 100%);
            border-color: rgba(196, 181, 253, 0.18);
            box-shadow: 0 28px 70px rgba(30, 17, 64, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }

        .product-power-media-shell.is-adly-listening .adly-listening-motion {
            width: 100%;
            height: 100%;
            min-height: 0;
        }

        .product-power-media-shell.is-adly-listening .adly-listening-device {
            width: 100%;
            height: 100%;
            min-height: 0;
        }

        .product-power-media-shell::after {
            content: "";
            position: absolute;
            inset: 1px;
            border-radius: 31px;
            pointer-events: none;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
        }

        .product-power-placeholder {
            position: absolute;
            inset: 9%;
            border-radius: 22px;
            background: #111827;
            box-shadow: 0 22px 48px rgba(15, 23, 42, 0.22);
            overflow: hidden;
        }

        .product-power-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            object-fit: contain;
            background: #f1f2f4;
            box-shadow: none;
        }

        .product-power-placeholder::before,
        .product-power-final::before {
            content: none;
        }

        .product-power-placeholder-ui {
            position: absolute;
            inset: 18px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.88);
            padding: 16px;
            display: grid;
            gap: 10px;
            align-content: start;
        }

        .product-power-placeholder-top,
        .product-power-mini-row {
            display: flex;
            gap: 7px;
            align-items: center;
            justify-content: space-between;
        }

        .product-power-dot-row {
            display: flex;
            gap: 7px;
        }

        .product-power-dot {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: #7c3aed;
        }

        .product-power-pill-line {
            height: 10px;
            border-radius: 999px;
            background: #e9d5ff;
        }

        .product-power-pill-line.is-wide { width: 66%; }
        .product-power-pill-line.is-mid { width: 48%; }

        .product-power-tile-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 8px;
        }

        .product-power-mini-tile {
            min-height: 74px;
            border-radius: 14px;
            background: #f5f3ff;
            border: 1px solid #ede9fe;
        }

        .product-power-play {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 58px;
            height: 58px;
            border-radius: 999px;
            background: #ffffff;
            color: #7c3aed;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.24);
        }

        .product-power-play svg {
            width: 23px;
            height: 23px;
            fill: currentColor;
            margin-left: 3px;
        }

        [dir="rtl"] .product-power-play svg {
            margin-left: 0;
            margin-right: 3px;
            transform: scaleX(-1);
        }

        .product-power-mp4-label {
            position: absolute;
            right: 18px;
            bottom: 18px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.92);
            color: #7c3aed;
            padding: 7px 11px;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        [dir="rtl"] .product-power-mp4-label {
            right: auto;
            left: 18px;
        }

        .product-power-network {
            position: absolute;
            inset: 0;
        }

        .product-power-network svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .product-power-network-line,
        .product-power-network-flow {
            fill: none;
            stroke-linecap: round;
        }

        .product-power-network-line {
            stroke: rgba(148, 163, 184, 0.46);
            stroke-width: 2;
        }

        .product-power-network-flow {
            stroke: #7c3aed;
            stroke-width: 3;
            stroke-dasharray: 240;
            stroke-dashoffset: 240;
            filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.34));
            animation: product-power-flow 4.4s ease-in-out infinite;
        }

        .product-power-network-flow.is-branch {
            stroke-dasharray: 180;
            stroke-dashoffset: 180;
            animation-name: product-power-branch-flow;
            animation-delay: 1.45s;
        }

        .product-power-node {
            position: absolute;
            width: 58px;
            height: 58px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.94);
            border: 1px solid #e7eaf1;
            color: #7c3aed;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
        }

        .product-power-node svg {
            width: 22px;
            height: 22px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .product-power-node img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            border-radius: 6px;
        }

        .product-power-node .product-power-platform-svg {
            width: 23px;
            height: 23px;
        }

        .product-power-node.is-platform img[src*="instagram"] {
            width: 26px;
            height: 26px;
            border-radius: 8px;
        }

        .product-power-node.is-platform img[src*="tiktok"] {
            width: 25px;
            height: 25px;
            border-radius: 7px;
        }

        .product-power-node.is-source {
            left: 10%;
            top: 44%;
            color: #475569;
        }

        .product-power-node.is-source svg {
            width: 25px;
            height: 25px;
            stroke-width: 1.9;
            transform: none;
        }

        .product-power-user-icon {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 25px;
            height: 25px;
            transform: translate(-50%, -50%);
            color: #475569;
        }

        .product-power-node.is-source .product-power-user-icon svg {
            display: block;
            width: 100%;
            height: 100%;
        }

        .product-power-node.is-hub {
            left: 46%;
            top: 44%;
            background: #ffffff;
            animation: product-power-node-pulse 4.4s ease-in-out infinite;
        }

        .product-power-node.is-hub img {
            width: 34px;
            height: 34px;
            border-radius: 9px;
        }

        .product-power-node.is-platform {
            width: 52px;
            height: 52px;
            right: 11%;
            color: #7c3aed;
            font-size: 18px;
            line-height: 1;
            text-align: center;
        }

        .product-power-node.is-platform span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: #7c3aed;
        }

        .product-power-node.platform-1 { top: 14%; animation: product-power-platform-pulse 4.4s ease-in-out infinite 1.7s; }
        .product-power-node.platform-2 { top: 30%; animation: product-power-platform-pulse 4.4s ease-in-out infinite 1.85s; }
        .product-power-node.platform-3 { top: 47%; animation: product-power-platform-pulse 4.4s ease-in-out infinite 2s; }
        .product-power-node.platform-4 { top: 64%; animation: product-power-platform-pulse 4.4s ease-in-out infinite 2.15s; }
        .product-power-node.platform-5 { top: 80%; animation: product-power-platform-pulse 4.4s ease-in-out infinite 2.3s; }

        .product-power-final {
            position: relative;
            margin: 4px auto 0;
            max-width: 1080px;
            border-radius: 18px;
            padding: 14px 16px;
            background: rgba(255, 255, 255, 0.56);
            border: 1px solid rgba(226, 232, 240, 0.74);
            box-shadow: 0 8px 22px rgba(71, 85, 105, 0.045);
            overflow: hidden;
            color: #111827;
        }

        .product-power-final::before {
            content: none;
        }

        .product-power-final-inner {
            position: relative;
            z-index: 1;
            display: flex;
            gap: 16px;
            align-items: center;
            justify-content: space-between;
        }

        .product-power-final-badge {
            background: #f5f3ff;
            border-color: #e9d5ff;
            color: #6d28d9;
            box-shadow: none;
        }

        .product-power-final-title {
            margin: 0;
            font-size: 15px;
            line-height: 1.35;
            letter-spacing: -0.01em;
            font-weight: 700;
            color: #475569;
            white-space: nowrap;
        }

        .product-power-final-desc,
        .product-power-final-note {
            color: #64748b;
            line-height: 1.65;
            font-weight: 500;
        }

        .product-power-final-desc {
            font-size: 14px;
            margin: 0;
        }

        .product-power-final-cta {
            background: #ffffff;
            color: #7c3aed;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
            border: 1px solid #d8def0;
        }

        .product-power-final-note {
            margin: 8px 0 0;
            font-size: 13px;
        }

        .product-power-tool-grid {
            display: flex;
            flex-wrap: nowrap;
            gap: 8px;
            justify-content: flex-end;
        }

        .product-power-tool {
            min-height: 0;
            border-radius: 999px;
            padding: 7px 10px;
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(237, 242, 247, 0.9);
            backdrop-filter: none;
            display: flex;
            align-items: center;
            gap: 7px;
            color: #111827;
            box-shadow: none;
            white-space: nowrap;
        }

        .product-power-tool-icon {
            width: 22px;
            height: 22px;
            border-radius: 7px;
            background: #f5f3ff;
            color: #7c3aed;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .product-power-tool span:last-child {
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
        }

        .adly-listening {
            position: relative;
            display: grid;
            grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
            gap: clamp(28px, 5vw, 64px);
            align-items: center;
            margin: 4px 0 58px;
            padding: clamp(28px, 5vw, 54px);
            border-radius: 34px;
            background:
                radial-gradient(circle at 16% 16%, rgba(196, 181, 253, 0.32), rgba(196, 181, 253, 0) 34%),
                linear-gradient(135deg, #140a28 0%, #211044 52%, #0f172a 100%);
            color: #ffffff;
            overflow: hidden;
            box-shadow: 0 34px 80px rgba(30, 17, 64, 0.22);
        }

        .adly-listening::before {
            content: "";
            position: absolute;
            inset: auto -18% -38% auto;
            width: 440px;
            height: 440px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0));
            pointer-events: none;
        }

        .adly-listening-copy,
        .adly-listening-motion {
            position: relative;
            z-index: 1;
        }

        .adly-listening-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
            padding: 7px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.08);
            color: #ddd6fe;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.04em;
        }

        .adly-listening-title {
            margin: 0 0 16px;
            color: #ffffff;
            font-size: clamp(32px, 4.4vw, 56px);
            line-height: 1.06;
            letter-spacing: -0.04em;
            font-weight: 850;
        }

        .adly-listening-desc {
            max-width: 620px;
            margin: 0;
            color: rgba(241, 245, 249, 0.82);
            font-size: 17px;
            line-height: 1.8;
            font-weight: 550;
        }

        .adly-listening-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 24px;
        }

        .adly-listening-pills span {
            display: inline-flex;
            align-items: center;
            min-height: 36px;
            padding: 0 13px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: rgba(255, 255, 255, 0.92);
            font-size: 13px;
            font-weight: 800;
        }

        .adly-listening-motion {
            min-height: 386px;
        }

        .adly-listening-device {
            position: relative;
            min-height: 386px;
            border-radius: 30px;
            background:
                linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
                rgba(15, 23, 42, 0.58);
            border: 1px solid rgba(255, 255, 255, 0.16);
            box-shadow:
                0 24px 70px rgba(2, 6, 23, 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.16);
            overflow: hidden;
        }

        .adly-listening-device::before {
            content: "";
            position: absolute;
            inset: 18px;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: radial-gradient(circle at center, rgba(124, 58, 237, 0.22), rgba(124, 58, 237, 0));
        }

        .adly-listening-device-top {
            position: absolute;
            inset-inline-start: 22px;
            inset-block-start: 18px;
            display: flex;
            gap: 7px;
            z-index: 2;
        }

        .adly-listening-device-top span {
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.36);
        }

        .adly-listening-channel,
        .adly-listening-bubble,
        .adly-listening-core {
            position: absolute;
            z-index: 3;
        }

        .adly-listening-channel {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 40px;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.92);
            color: #111827;
            font-size: 12px;
            font-weight: 850;
            box-shadow: 0 16px 34px rgba(2, 6, 23, 0.24);
            animation: adly-listening-float 5.2s ease-in-out infinite;
        }

        .adly-listening-channel-icon {
            width: 24px;
            height: 24px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-size: 12px;
            font-weight: 900;
        }

        .adly-listening-channel-icon svg {
            width: 17px;
            height: 17px;
            fill: currentColor;
        }

        .adly-listening-channel.is-autopilot {
            inset-inline-start: 9%;
            inset-block-start: 19%;
            animation-delay: -0.8s;
        }

        .adly-listening-channel.is-autopilot .adly-listening-channel-icon {
            background: #7c3aed;
        }

        .adly-listening-channel.is-whatsapp {
            inset-inline-end: 8%;
            inset-block-start: 25%;
            animation-delay: -2.1s;
        }

        .adly-listening-channel.is-whatsapp .adly-listening-channel-icon {
            background: #22c55e;
        }

        .adly-listening-channel.is-telegram {
            inset-inline-start: 12%;
            inset-block-end: 24%;
            animation-delay: -3.2s;
        }

        .adly-listening-channel.is-telegram .adly-listening-channel-icon {
            background: #2aabee;
        }

        .adly-listening-core {
            inset-inline-start: 50%;
            inset-block-start: 50%;
            transform: translate(-50%, -50%);
            width: 148px;
            height: 148px;
            padding: 14px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.96);
            color: #111827;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 7px;
            align-items: center;
            text-align: center;
            border: 2.5px solid rgba(124, 58, 237, 0.45);
            box-shadow: 0 24px 58px rgba(2, 6, 23, 0.28), 0 0 0 0 rgba(124, 58, 237, 0);
            animation: adly-listening-core-hat 24s ease-in-out infinite;
            z-index: 2;
        }

        [dir="rtl"] .adly-listening-core {
            transform: translate(50%, -50%);
        }

        .adly-listening-core-logo {
            position: relative;
            width: 38px;
            height: 38px;
        }

        .adly-listening-core-logo > img {
            width: 38px;
            height: 38px;
            border-radius: 11px;
            box-shadow: 0 12px 26px rgba(124, 58, 237, 0.22);
        }

        .adly-listening-active-source {
            position: absolute;
            inset-inline-start: 50%;
            inset-block-start: -34px;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            border: 2px solid #ffffff;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
            opacity: 0;
            transform: translateX(-50%) scale(0.72);
            animation: adly-listening-active-source 24s ease-in-out infinite both;
        }

        .adly-listening-active-source svg {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .adly-listening-active-source img {
            width: 17px;
            height: 17px;
            border-radius: 5px;
        }

        .adly-listening-active-source.is-whatsapp { background: #22c55e; }
        .adly-listening-active-source.is-telegram { background: #2aabee; }
        .adly-listening-active-source.is-web { background: #475569; }
        .adly-listening-active-source.is-app { background: #ffffff; }

        .adly-listening-active-source.active-1 { animation-delay: 0.5s; }
        .adly-listening-active-source.active-2 { animation-delay: 5s; }
        .adly-listening-active-source.active-3 { animation-delay: 9.5s; }
        .adly-listening-active-source.active-4 { animation-delay: 14s; }
        .adly-listening-active-source.active-5 { animation-delay: 18.5s; }

        .adly-listening-core strong {
            display: block;
            color: #4c1d95;
            font-size: 19px;
            line-height: 1.1;
            font-weight: 900;
        }

        .adly-listening-core-status {
            display: block;
            margin-top: 3px;
            color: #64748b;
            font-size: 11px;
            font-weight: 750;
        }

        .adly-listening-wave {
            display: flex;
            align-items: end;
            gap: 5px;
            height: 28px;
            padding-top: 4px;
            width: 92px;
            justify-content: center;
            animation: adly-listening-typing-visibility 24s ease-in-out infinite both;
        }

        .adly-listening-wave span {
            width: 100%;
            max-width: 32px;
            height: 9px;
            border-radius: 999px;
            background: linear-gradient(180deg, #a78bfa, #7c3aed);
            animation: adly-listening-wave 1.2s ease-in-out infinite;
        }

        .adly-listening-wave span:nth-child(2) { animation-delay: 0.15s; }
        .adly-listening-wave span:nth-child(3) { animation-delay: 0.3s; }
        .adly-listening-wave span:nth-child(4) { animation-delay: 0.45s; }

        .adly-listening-output {
            position: relative;
            min-height: 22px;
            width: 100%;
            overflow: hidden;
        }

        .adly-listening-output-text {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4c1d95;
            font-size: 11px;
            font-weight: 900;
            line-height: 1.25;
            opacity: 0;
            transform: translateY(8px) scale(0.94);
            animation: adly-listening-output 24s ease-in-out infinite both;
        }

        .adly-listening-output-text.output-1 { animation-delay: 0.5s; }
        .adly-listening-output-text.output-2 { animation-delay: 5s; }
        .adly-listening-output-text.output-3 { animation-delay: 9.5s; }
        .adly-listening-output-text.output-4 { animation-delay: 14s; }
        .adly-listening-output-text.output-5 { animation-delay: 18.5s; }

        .adly-listening-bubble {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 6px;
            max-width: 230px;
            padding: 0;
            border-radius: 18px;
            background: transparent;
            color: #111827;
            font-size: 11.5px;
            line-height: 1.35;
            font-weight: 800;
            opacity: 0;
            transform: translateY(12px) scale(0.94);
            animation: adly-listening-message 24s ease-in-out infinite both;
            z-index: 4;
        }

        .adly-listening-message-row,
        .adly-listening-reply-row {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            width: fit-content;
            max-width: 100%;
            padding: 8px 10px;
            border-radius: 18px;
            box-shadow: 0 16px 34px rgba(2, 6, 23, 0.2);
        }

        .adly-listening-message-row {
            background: rgba(255, 255, 255, 0.9);
            animation: adly-listening-request-state 24s ease-in-out infinite both;
            animation-delay: inherit;
        }

        .adly-listening-source {
            width: 20px;
            height: 20px;
            flex: 0 0 20px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            box-shadow: 0 7px 14px rgba(15, 23, 42, 0.16);
        }

        .adly-listening-source svg {
            width: 13px;
            height: 13px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .adly-listening-source img {
            width: 15px;
            height: 15px;
            border-radius: 5px;
        }

        .adly-listening-source.is-whatsapp {
            background: #22c55e;
        }

        .adly-listening-source.is-telegram {
            background: #2aabee;
        }

        .adly-listening-source.is-web {
            background: #475569;
        }

        .adly-listening-source.is-app {
            background: #ffffff;
        }

        .adly-listening-bubble.bubble-1 {
            inset-inline-end: 5%;
            inset-block-start: 12%;
            max-width: 188px;
            animation-delay: 0.5s;
        }

        .adly-listening-bubble.bubble-2 {
            inset-inline-start: 5%;
            inset-block-start: 22%;
            max-width: 208px;
            animation-delay: 5s;
        }

        .adly-listening-bubble.bubble-3 {
            inset-inline-end: 4%;
            inset-block-start: 46%;
            max-width: 202px;
            animation-delay: 9.5s;
        }

        .adly-listening-bubble.bubble-4 {
            inset-inline-start: 4%;
            inset-block-end: 18%;
            max-width: 238px;
            animation-delay: 14s;
        }

        .adly-listening-bubble.bubble-5 {
            inset-inline-end: 14%;
            inset-block-end: 3%;
            max-width: 190px;
            color: #064e3b;
            animation-delay: 18.5s;
        }

        .adly-listening-bubble.bubble-5 .adly-listening-message-row {
            background: rgba(220, 252, 231, 0.92);
        }

        @keyframes adly-listening-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @keyframes adly-listening-core {
            0%, 100% { box-shadow: 0 24px 58px rgba(2, 6, 23, 0.28); }
            46%, 62% { box-shadow: 0 28px 70px rgba(124, 58, 237, 0.34); }
        }

        @keyframes adly-listening-wave {
            0%, 100% { height: 9px; opacity: 0.62; }
            50% { height: 26px; opacity: 1; }
        }

        @keyframes adly-listening-message {
            0%, 2% { transform: translateY(12px) scale(0.94); opacity: 0; }
            4%, 13% { transform: translateY(0) scale(1); opacity: 1; }
            16%, 17% { transform: translateY(0) scale(1); opacity: 0.5; }
            19%, 100% { transform: translateY(-7px) scale(0.98); opacity: 0; }
        }

        @keyframes adly-listening-request-state {
            0%, 11% {
                background: rgba(255, 255, 255, 0.92);
                color: #111827;
                filter: grayscale(0);
                opacity: 1;
            }
            13%, 17% {
                background: rgba(226, 232, 240, 0.72);
                color: #64748b;
                filter: grayscale(0.75);
                opacity: 0.72;
            }
            19%, 100% {
                background: rgba(226, 232, 240, 0.5);
                color: #94a3b8;
                filter: grayscale(1);
                opacity: 0;
            }
        }

        @keyframes adly-listening-active-source {
            0%, 3% { opacity: 0; transform: translateX(-50%) scale(0.72); }
            5%, 17% { opacity: 1; transform: translateX(-50%) scale(1); }
            20%, 100% { opacity: 0; transform: translateX(-50%) scale(0.82); }
        }

        @keyframes adly-listening-typing-visibility {
            0%, 5%, 12%, 100% { opacity: 0; transform: translateY(3px); }
            6%, 11% { opacity: 1; transform: translateY(0); }
        }

        @keyframes adly-listening-output {
            0%, 11% { opacity: 0; transform: translateY(8px) scale(0.94); }
            13%, 17% { opacity: 1; transform: translateY(0) scale(1); }
            20%, 100% { opacity: 0; transform: translateY(-6px) scale(0.98); }
        }

        @keyframes adly-listening-core-hat {
            0%, 5%, 84%, 100% {
                border-color: rgba(124, 58, 237, 0.45);
                box-shadow: 0 24px 58px rgba(2, 6, 23, 0.28), 0 0 0 0 rgba(124, 58, 237, 0);
            }
            3%, 18% {
                border-color: rgba(34, 197, 94, 0.72);
                box-shadow: 0 24px 58px rgba(2, 6, 23, 0.28), 0 0 34px rgba(34, 197, 94, 0.26);
            }
            21%, 37% {
                border-color: rgba(42, 171, 238, 0.75);
                box-shadow: 0 24px 58px rgba(2, 6, 23, 0.28), 0 0 34px rgba(42, 171, 238, 0.26);
            }
            40%, 55% {
                border-color: rgba(71, 85, 105, 0.72);
                box-shadow: 0 24px 58px rgba(2, 6, 23, 0.28), 0 0 34px rgba(148, 163, 184, 0.22);
            }
            58%, 73% {
                border-color: rgba(124, 58, 237, 0.72);
                box-shadow: 0 24px 58px rgba(2, 6, 23, 0.28), 0 0 34px rgba(124, 58, 237, 0.26);
            }
            77%, 92% {
                border-color: rgba(34, 197, 94, 0.72);
                box-shadow: 0 24px 58px rgba(2, 6, 23, 0.28), 0 0 34px rgba(34, 197, 94, 0.26);
            }
        }

        .adly-command-card,
        .adly-command-request {
            position: absolute;
            z-index: 4;
        }

        .adly-command-card {
            left: 50%;
            top: 50%;
            width: min(290px, 55%);
            min-height: 176px;
            transform: translate(-50%, -50%);
            padding: 18px;
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.96);
            border: 2px solid rgba(124, 58, 237, 0.34);
            color: #111827;
            box-shadow: 0 28px 70px rgba(2, 6, 23, 0.34);
            overflow: hidden;
            animation: adly-command-card-accent 25s ease-in-out infinite;
        }

        .adly-command-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 18% 0%, rgba(124, 58, 237, 0.12), transparent 34%),
                linear-gradient(180deg, rgba(248, 250, 252, 0), rgba(241, 245, 249, 0.82));
            pointer-events: none;
        }

        .adly-command-head,
        .adly-command-typing,
        .adly-command-output {
            position: relative;
            z-index: 1;
        }

        .adly-command-head {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .adly-command-logo {
            position: relative;
            width: 54px;
            height: 54px;
            flex: 0 0 54px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            box-shadow: 0 14px 34px rgba(124, 58, 237, 0.2);
        }

        .adly-command-logo > img {
            width: 38px;
            height: 38px;
            border-radius: 12px;
        }

        .adly-command-source {
            position: absolute;
            right: -7px;
            bottom: -7px;
            width: 28px;
            height: 28px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            border: 2px solid #ffffff;
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.22);
            opacity: 0;
            transform: scale(0.72);
            animation: adly-command-source 25s ease-in-out infinite both;
        }

        .adly-command-source svg {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .adly-command-source img {
            width: 16px;
            height: 16px;
            border-radius: 5px;
        }

        .adly-command-source.is-whatsapp { background: #22c55e; }
        .adly-command-source.is-telegram { background: #2aabee; }
        .adly-command-source.is-web { background: #475569; }
        .adly-command-source.is-app { background: #ffffff; color: #7c3aed; }
        .adly-command-source.active-1 { animation-delay: 0s; }
        .adly-command-source.active-2 { animation-delay: 5s; }
        .adly-command-source.active-3 { animation-delay: 10s; }
        .adly-command-source.active-4 { animation-delay: 15s; }
        .adly-command-source.active-5 { animation-delay: 20s; }

        .adly-command-head strong {
            display: block;
            color: #4c1d95;
            font-size: 22px;
            line-height: 1;
            font-weight: 900;
        }

        .adly-command-head .adly-listening-core-status {
            margin-top: 6px;
            color: #64748b;
            font-size: 12px;
            font-weight: 800;
        }

        .adly-command-typing {
            display: flex;
            gap: 7px;
            align-items: center;
            margin-top: 22px;
            opacity: 0;
            animation: adly-command-typing 5s ease-in-out infinite both;
        }

        .adly-command-typing span {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: #7c3aed;
            animation: adly-command-dot 0.9s ease-in-out infinite;
        }

        .adly-command-typing span:nth-child(2) { animation-delay: 0.14s; }
        .adly-command-typing span:nth-child(3) { animation-delay: 0.28s; }

        .adly-command-output {
            min-height: 42px;
            margin-top: 14px;
            padding: 12px 14px;
            border-radius: 18px;
            background: #f5f3ff;
            border: 1px solid rgba(124, 58, 237, 0.15);
            color: #4c1d95;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }

        .adly-command-output .adly-listening-output-text {
            position: absolute;
            inset: 12px 14px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: #4c1d95;
            font-size: 14px;
            font-weight: 900;
            line-height: 1.35;
            opacity: 0;
            transform: translateY(8px);
            animation: adly-command-output 25s ease-in-out infinite both;
        }

        [dir="rtl"] .adly-command-output .adly-listening-output-text {
            justify-content: flex-end;
        }

        .adly-command-output .output-1 { animation-delay: 0s; }
        .adly-command-output .output-2 { animation-delay: 5s; }
        .adly-command-output .output-3 { animation-delay: 10s; }
        .adly-command-output .output-4 { animation-delay: 15s; }
        .adly-command-output .output-5 { animation-delay: 20s; }

        .adly-command-request {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            max-width: 224px;
            padding: 10px 12px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.94);
            color: #111827;
            font-size: 12.5px;
            line-height: 1.35;
            font-weight: 850;
            box-shadow: 0 18px 42px rgba(2, 6, 23, 0.25);
            opacity: 0;
            transform: translateY(14px) scale(0.96);
            animation: adly-command-request 25s ease-in-out infinite both;
        }

        .adly-command-request::after {
            content: "";
            position: absolute;
            width: 42px;
            height: 2px;
            top: 50%;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.62));
            opacity: 0.7;
        }

        .adly-command-request .adly-listening-source {
            width: 24px;
            height: 24px;
            flex: 0 0 24px;
        }

        .adly-command-request .adly-listening-source svg {
            width: 15px;
            height: 15px;
        }

        .adly-command-request.request-1 {
            right: 7%;
            top: 13%;
            animation-delay: 0s;
        }

        .adly-command-request.request-2 {
            left: 6%;
            top: 24%;
            animation-delay: 5s;
        }

        .adly-command-request.request-3 {
            right: 5%;
            bottom: 25%;
            animation-delay: 10s;
        }

        .adly-command-request.request-4 {
            left: 5%;
            bottom: 17%;
            animation-delay: 15s;
            max-width: 246px;
        }

        .adly-command-request.request-5 {
            right: 18%;
            bottom: 6%;
            color: #064e3b;
            background: rgba(220, 252, 231, 0.95);
            animation-delay: 20s;
        }

        .adly-command-request.request-1::after,
        .adly-command-request.request-3::after,
        .adly-command-request.request-5::after {
            right: 100%;
        }

        .adly-command-request.request-2::after,
        .adly-command-request.request-4::after {
            left: 100%;
            transform: scaleX(-1);
        }

        @keyframes adly-command-card-accent {
            0%, 18%, 80%, 100% {
                border-color: rgba(34, 197, 94, 0.55);
                box-shadow: 0 28px 70px rgba(2, 6, 23, 0.34), 0 0 34px rgba(34, 197, 94, 0.16);
            }
            20%, 38% {
                border-color: rgba(42, 171, 238, 0.6);
                box-shadow: 0 28px 70px rgba(2, 6, 23, 0.34), 0 0 34px rgba(42, 171, 238, 0.16);
            }
            40%, 58% {
                border-color: rgba(148, 163, 184, 0.62);
                box-shadow: 0 28px 70px rgba(2, 6, 23, 0.34), 0 0 34px rgba(148, 163, 184, 0.14);
            }
            60%, 78% {
                border-color: rgba(124, 58, 237, 0.62);
                box-shadow: 0 28px 70px rgba(2, 6, 23, 0.34), 0 0 34px rgba(124, 58, 237, 0.16);
            }
        }

        @keyframes adly-command-source {
            0%, 3% { opacity: 0; transform: scale(0.72); }
            5%, 18% { opacity: 1; transform: scale(1); }
            20%, 100% { opacity: 0; transform: scale(0.82); }
        }

        @keyframes adly-command-request {
            0%, 3% { opacity: 0; transform: translateY(14px) scale(0.96); }
            5%, 13% { opacity: 1; transform: translateY(0) scale(1); }
            16%, 18% { opacity: 0.52; transform: translateY(0) scale(1); filter: grayscale(0.75); }
            20%, 100% { opacity: 0; transform: translateY(-8px) scale(0.98); filter: grayscale(1); }
        }

        @keyframes adly-command-typing {
            0%, 22%, 70%, 100% { opacity: 0; transform: translateY(4px); }
            30%, 58% { opacity: 1; transform: translateY(0); }
        }

        @keyframes adly-command-dot {
            0%, 100% { opacity: 0.45; transform: translateY(0); }
            50% { opacity: 1; transform: translateY(-4px); }
        }

        @keyframes adly-command-output {
            0%, 7% { opacity: 0; transform: translateY(8px); }
            9%, 17% { opacity: 1; transform: translateY(0); }
            20%, 100% { opacity: 0; transform: translateY(-7px); }
        }

        @keyframes product-power-flow {
            0%, 14% { stroke-dashoffset: 240; opacity: 0; }
            24%, 44% { stroke-dashoffset: 0; opacity: 1; }
            70%, 100% { stroke-dashoffset: -240; opacity: 0; }
        }

        @keyframes product-power-branch-flow {
            0%, 30% { stroke-dashoffset: 180; opacity: 0; }
            42%, 62% { stroke-dashoffset: 0; opacity: 1; }
            86%, 100% { stroke-dashoffset: -180; opacity: 0; }
        }

        @keyframes product-power-node-pulse {
            0%, 28%, 100% { box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12); transform: scale(1); }
            38%, 56% { box-shadow: 0 18px 44px rgba(124, 58, 237, 0.28); transform: scale(1.06); }
        }

        @keyframes product-power-platform-pulse {
            0%, 36%, 100% { border-color: #e7eaf1; transform: scale(1); }
            48%, 62% { border-color: #a78bfa; color: #6d28d9; transform: scale(1.08); }
        }

        @keyframes product-power-shimmer {
            0%, 48% { transform: translateX(-120%); }
            72%, 100% { transform: translateX(120%); }
        }

        @media (max-width: 980px) {
            .product-power-feature {
                flex-direction: column;
                align-items: center;
                gap: 28px;
            }

            .product-power-final-inner {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .product-power-tool-grid {
                flex-wrap: wrap;
            }

            .product-power-final-title {
                white-space: normal;
            }

            .product-power-media,
            .product-power-copy,
            .adly-listening {
                width: 100%;
                max-width: 512px;
            }

            .product-power-copy {
                order: 1;
            }

            .product-power-media {
                order: 2;
            }

            .product-power-copy {
                margin: 0 auto;
            }

            .adly-listening {
                grid-template-columns: 1fr;
                margin: 10px auto 54px;
                max-width: 760px;
                padding: 28px;
            }

            .adly-listening-motion {
                min-height: 344px;
            }

            .adly-listening-device {
                min-height: 344px;
            }
        }

        @media (max-width: 768px) {
            .product-power {
                padding: 28px 0 34px;
            }

            .product-power-header {
                margin-bottom: 34px;
            }

            .product-power-stack {
                gap: 0;
            }

            .product-power-feature {
                gap: 24px;
                margin-bottom: 10px;
                padding: 18px 0 66px;
            }

            .product-power-feature + .product-power-feature {
                padding-top: 42px;
            }

            .product-power-feature::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: 25px;
                width: min(230px, 58vw);
                height: 1px;
                transform: translateX(-50%);
                background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.22), transparent);
            }

            .product-power-feature-title {
                font-size: 31px;
            }

            .product-power-copy p {
                font-size: 15px;
            }

            .product-power-actions {
                flex-direction: column;
                align-items: stretch;
            }

            .product-power-tool-grid {
                gap: 7px;
                justify-content: flex-start;
            }

            .product-power-tool {
                padding: 7px 9px;
            }

            .product-power-node {
                width: 48px;
                height: 48px;
                font-size: 13px;
            }

            .product-power-node.is-platform {
                width: 43px;
                height: 43px;
            }

            .adly-listening {
                border-radius: 26px;
                padding: 24px 18px;
            }

            .adly-listening-title {
                font-size: 31px;
            }

            .adly-listening-desc {
                font-size: 15px;
            }

            .adly-listening-motion,
            .adly-listening-device {
                min-height: 320px;
            }

            .adly-listening-channel-label {
                display: none;
            }

            .adly-listening-channel {
                padding: 8px;
            }

            .adly-listening-core {
                width: min(218px, 72%);
                padding: 14px;
            }

            .adly-listening-bubble {
                max-width: 184px;
                font-size: 11px;
            }

            .product-power-media-shell.is-adly-listening .adly-listening-motion,
            .product-power-media-shell.is-adly-listening .adly-listening-device {
                min-height: 0;
            }

            .adly-command-card {
                width: min(265px, 62%);
                min-height: 166px;
                padding: 16px;
            }

            .adly-command-request {
                max-width: 178px;
                padding: 9px 10px;
                font-size: 11px;
            }

            .adly-command-request.request-1 {
                right: 4%;
                top: 12%;
            }

            .adly-command-request.request-2 {
                left: 4%;
                top: 22%;
            }

            .adly-command-request.request-3 {
                right: 4%;
                bottom: 24%;
            }

            .adly-command-request.request-4 {
                left: 4%;
                bottom: 16%;
                max-width: 190px;
            }

            .adly-command-request.request-5 {
                right: 10%;
                bottom: 5%;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .product-power-network-flow,
            .product-power-node,
            .product-power-placeholder::before,
            .product-power-final::before,
            .adly-listening-channel,
            .adly-listening-core,
            .adly-listening-wave span,
            .adly-listening-bubble,
            .adly-command-card,
            .adly-command-source,
            .adly-command-request,
            .adly-command-typing,
            .adly-command-typing span,
            .adly-command-output .adly-listening-output-text {
                animation: none;
            }

            .product-power-network-flow {
                stroke-dashoffset: 0;
                opacity: 0.85;
            }

            .adly-command-source.active-1,
            .adly-command-request.request-1,
            .adly-command-output .output-1 {
                opacity: 1;
                transform: none;
            }

            .adly-command-typing {
                opacity: 0;
            }
        }

        .landing-word-chunk .landing-adly-logo,
        .landing-word-chunk .landing-brain-icon,
        .landing-word-chunk .landing-team-icon,
        .landing-word-chunk .landing-megaphone-icon,
        .landing-word-chunk .landing-cost-icon,
        .landing-word-chunk .social-icon-rotator {
            opacity: 0.25;
            filter: grayscale(1);
        }

        .reveal-ready .landing-word-chunk .landing-adly-logo,
        .reveal-ready .landing-word-chunk .landing-brain-icon,
        .reveal-ready .landing-word-chunk .landing-team-icon,
        .reveal-ready .landing-word-chunk .landing-megaphone-icon,
        .reveal-ready .landing-word-chunk .landing-cost-icon,
        .reveal-ready .landing-word-chunk .social-icon-rotator {
            transition: opacity 400ms ease, filter 400ms ease;
        }

        .landing-word-chunk.is-visible .landing-adly-logo,
        .landing-word-chunk.is-visible .landing-brain-icon,
        .landing-word-chunk.is-visible .landing-team-icon,
        .landing-word-chunk.is-visible .landing-megaphone-icon,
        .landing-word-chunk.is-visible .landing-cost-icon,
        .landing-word-chunk.is-visible .social-icon-rotator {
            opacity: 1;
            filter: grayscale(0);
        }

        .landing-cost-icon {
            display: inline-block;
            width: 1.8em;
            height: 1.8em;
            vertical-align: -0.28em;
            margin: 0 0.15em;
            object-fit: contain;
            animation: brainFloatLtr 1.4s ease-in-out infinite;
        }

        [dir="rtl"] .landing-cost-icon {
            animation-name: brainFloatRtl;
        }

        .landing-megaphone-icon {
            display: inline-block;
            width: 1.49em;
            height: 1.49em;
            vertical-align: -0.28em;
            margin: 0 0.15em;
            object-fit: contain;
            animation: adlyFloatLtr 1.6s ease-in-out infinite;
        }

        [dir="rtl"] .landing-megaphone-icon {
            animation-name: adlyFloatRtl;
        }

        .landing-adly-logo {
            display: inline-block;
            width: 1.4em;
            height: 1.4em;
            vertical-align: -0.28em;
            margin: 0 0.1em;
            object-fit: contain;
            border-radius: 0.25em;
            animation: adlyFloatLtr 1.6s ease-in-out infinite;
        }

        [dir="rtl"] .landing-adly-logo {
            animation-name: adlyFloatRtl;
        }

        @keyframes adlyFloatLtr {
            0%, 100% {
                transform: translateX(0) translateY(0) scale(1);
                filter: drop-shadow(0 2px 4px rgba(147, 51, 234, 0.15));
            }
            50% {
                transform: translateX(-8px) translateY(-4px) scale(1.12);
                filter: drop-shadow(0 6px 14px rgba(147, 51, 234, 0.5));
            }
        }

        @keyframes adlyFloatRtl {
            0%, 100% {
                transform: translateX(0) translateY(0) scale(1);
                filter: drop-shadow(0 2px 4px rgba(147, 51, 234, 0.15));
            }
            50% {
                transform: translateX(8px) translateY(-4px) scale(1.12);
                filter: drop-shadow(0 6px 14px rgba(147, 51, 234, 0.5));
            }
        }

        .landing-brain-icon {
            display: inline-block;
            width: 1.47em;
            height: 1.47em;
            vertical-align: -0.28em;
            margin: 0 0.1em;
            object-fit: contain;
            mix-blend-mode: multiply;
            background: transparent;
            animation: brainFloatLtr 1.4s ease-in-out infinite;
        }

        [dir="rtl"] .landing-brain-icon {
            animation-name: brainFloatRtl;
        }

        @keyframes brainFloatLtr {
            0%, 100% {
                transform: translateX(0) translateY(0) rotate(0deg);
                filter: drop-shadow(0 2px 3px rgba(236, 72, 153, 0.15));
            }
            50% {
                transform: translateX(8px) translateY(-4px) rotate(5deg);
                filter: drop-shadow(0 6px 12px rgba(236, 72, 153, 0.5));
            }
        }

        @keyframes brainFloatRtl {
            0%, 100% {
                transform: translateX(0) translateY(0) rotate(0deg);
                filter: drop-shadow(0 2px 3px rgba(236, 72, 153, 0.15));
            }
            50% {
                transform: translateX(-8px) translateY(-4px) rotate(-5deg);
                filter: drop-shadow(0 6px 12px rgba(236, 72, 153, 0.5));
            }
        }

        .landing-team-icon {
            display: inline-block;
            width: 1.54em;
            height: 1.54em;
            vertical-align: -0.28em;
            margin: 0 0.1em;
            object-fit: contain;
            mix-blend-mode: multiply;
            animation: teamFloatLtr 2s ease-in-out infinite;
        }

        [dir="rtl"] .landing-team-icon {
            animation-name: teamFloatRtl;
        }

        @keyframes teamFloatLtr {
            0%, 100% {
                transform: translateX(0) translateY(0) scale(1);
                filter: drop-shadow(0 1px 2px rgba(99, 102, 241, 0.1));
            }
            50% {
                transform: translateX(-8px) translateY(-4px) scale(1.1);
                filter: drop-shadow(0 6px 12px rgba(99, 102, 241, 0.4));
            }
        }

        @keyframes teamFloatRtl {
            0%, 100% {
                transform: translateX(0) translateY(0) scale(1);
                filter: drop-shadow(0 1px 2px rgba(99, 102, 241, 0.1));
            }
            50% {
                transform: translateX(8px) translateY(-4px) scale(1.1);
                filter: drop-shadow(0 6px 12px rgba(99, 102, 241, 0.4));
            }
        }

        .social-icon-rotator {
            position: relative;
            display: inline-block;
            width: 1.17em;
            height: 1.17em;
            vertical-align: -0.22em;
            margin: 0 0.08em;
        }

        .social-icon {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 0.22em;
            opacity: 0;
            animation: socialIconSwap 1.8s linear infinite;
        }

        .social-icon-facebook {
            animation-delay: 0s;
        }

        .social-icon-instagram {
            animation-delay: 0.9s;
        }

        @keyframes socialIconSwap {
            0% { opacity: 1; }
            45% { opacity: 1; }
            55% { opacity: 0; }
            100% { opacity: 0; }
        }
        
        /* How It Works Section */
        .how-it-works-section {
            background: #ffffff;
            padding: 24px 0 52px;
        }

        .how-it-works {
            margin: 0 auto;
            max-width: 1080px;
            padding: 0;
        }

        .how-it-works-card {
            position: relative;
            overflow: hidden;
            border-radius: 30px;
            border: 1px solid rgba(226, 232, 240, 0.9);
            background: rgba(255, 255, 255, 0.86);
            box-shadow: 0 26px 70px rgba(71, 85, 105, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
            padding: clamp(26px, 4vw, 44px);
            backdrop-filter: blur(10px);
        }

        .how-it-works-card::before {
            content: none;
        }

        .how-it-works-card > * {
            position: relative;
            z-index: 1;
        }

        .how-it-works-head {
            text-align: center;
        }
        
        .how-badge {
            display: inline-block;
            background: #f5f3ff;
            color: #6d28d9;
            border: 1px solid #e9d5ff;
            padding: 7px 16px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 14px;
            letter-spacing: 0.01em;
        }
        
        .how-it-works .section-title {
            font-size: clamp(30px, 3.4vw, 38px);
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -0.015em;
            color: #111827;
            margin-bottom: 6px;
        }

        .how-it-works .section-subtitle {
            color: #4b5563;
            font-size: 15px;
            font-weight: 500;
            line-height: 1.45;
            margin-bottom: 0;
        }
        
        .steps-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 24px;
            position: relative;
            margin-top: 28px;
            max-width: 980px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .steps-line {
            position: absolute;
            top: 32px;
            left: 15%;
            right: 15%;
            height: 1px;
            background: rgba(147, 51, 234, 0.13);
            border-radius: 999px;
            z-index: 0;
        }
        
        .step {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            flex: 1;
            position: relative;
            z-index: 2;
            padding: 18px 14px;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.68);
            border: 1px solid rgba(237, 233, 254, 0.78);
        }
        
        .step-icon {
            width: 52px;
            height: 52px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            background: #ffffff;
            border: 1px solid #e9d5ff;
            color: #6d28d9;
            box-shadow: 0 10px 24px rgba(124, 58, 237, 0.1);
        }

        .step-icon svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            fill: none;
            stroke-width: 1.9;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        
        .step-title {
            font-size: 20px;
            font-weight: 400;
            color: #0f172a;
            margin-bottom: 6px;
            line-height: 1.28;
            letter-spacing: -0.015em;
        }
        
        .step-desc {
            font-size: 13px;
            color: #667085;
            max-width: 210px;
            line-height: 1.45;
            font-weight: 500;
        }

        .how-cta-wrap {
            margin-top: 20px;
            text-align: center;
        }

        .how-cta-wrap .hero-buttons {
            margin-bottom: 0;
        }

        .how-cta-wrap .hero-cta {
            width: 100%;
            max-width: min(360px, 100%);
            min-height: 54px;
            font-size: 17px;
            padding: 0 28px;
        }

        .how-cta-wrap .hero-cta-secondary {
            text-decoration: none;
        }

        .how-cta-microcopy {
            color: #6b7280;
            font-size: 13px;
            font-weight: 600;
            margin-top: 10px;
        }
        
        @media (max-width: 768px) {
            .steps-container {
                flex-direction: column;
                gap: 18px;
                align-items: center;
                margin-top: 18px;
            }
            
            .steps-line {
                display: none;
            }
            
            .how-it-works-section {
                padding: 18px 0 34px;
            }

            .how-it-works-card {
                border-radius: 24px;
                padding: 24px 18px;
            }

            .how-it-works .section-title {
                margin-bottom: 6px;
            }

            .how-it-works .section-subtitle {
                font-size: 14px;
                line-height: 1.42;
            }

            .step {
                width: 100%;
                max-width: 320px;
            }

            .step-icon {
                width: 46px;
                height: 46px;
                border-radius: 14px;
                margin-bottom: 8px;
            }

            .step-icon svg {
                width: 18px;
                height: 18px;
            }

            .step-title {
                font-size: 18px;
                margin-bottom: 4px;
            }

            .step-desc {
                font-size: 12.5px;
                line-height: 1.4;
                max-width: 230px;
            }

            .how-cta-wrap {
                margin-top: 18px;
            }

            .how-cta-wrap .hero-cta {
                max-width: min(300px, 100%);
                min-height: 50px;
                font-size: 16px;
                padding: 0 22px;
            }

            .how-cta-microcopy {
                font-size: 12px;
                margin-top: 8px;
            }
        }
        
        /* Before/After Comparison Section */
        .comparison {
            background: lab(34 73.38 -110.43 / 0.04);
            padding: 60px 0 80px;
        }

        /* Match tool-compare header typography and title → subtitle gap */
        .comparison-header {
            text-align: center;
            margin-bottom: 36px;
        }

        .comparison .section-title {
            font-size: clamp(32px, 5vw, 52px);
            font-weight: 400;
            color: #7c3aed;
            line-height: 1.2;
            margin-bottom: 10px;
        }

        .comparison .section-subtitle {
            font-size: clamp(16px, 2vw, 20px);
            color: #667085;
            font-weight: 500;
            max-width: 540px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.5;
            margin-bottom: 0;
        }
        
        .comparison-card {
            background: #ffffff;
            border-radius: 20px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
            overflow: hidden;
            max-width: 1100px;
            margin: 0 auto;
        }
        
        .comparison-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            background: #eef2f7;
        }
        
        .comparison-column {
            padding: 30px;
            background: #ffffff;
        }
        
        .comparison-column.before {
            border-top: 1px solid #f6d4d4;
        }
        
        .comparison-column.after {
            border-top: 1px solid #d2eedb;
        }
        
        .comparison-badge {
            display: inline-block;
            padding: 8px 18px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 18px;
            border: 1px solid transparent;
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
        }
        
        .before .comparison-badge {
            background: #fff6f6;
            color: #9f1239;
            border-color: #f8d7da;
        }
        
        .after .comparison-badge {
            background: #f2fbf6;
            color: #166534;
            border-color: #d1eadc;
        }
        
        .comparison-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .comparison-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 13px 14px;
            margin-bottom: 8px;
            border-radius: 12px;
            border: 1px solid #edf1f7;
            background: #fafbfc;
            font-size: 15px;
            font-weight: 500;
        }

        .comparison-list li:last-child {
            margin-bottom: 0;
        }
        
        .before .comparison-list li {
            color: #425466;
        }
        
        .after .comparison-list li {
            color: #1e293b;
        }
        
        .comparison-list .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 999px;
            border: 1px solid #dbe3ef;
            background: #ffffff;
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .comparison-text {
            line-height: 1.65;
        }
        
        .comparison-list .status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            flex-shrink: 0;
            margin-inline-start: auto;
            border: 1px solid #e5e7eb;
        }
        
        .before .status {
            color: #dc2626;
            background: #fff5f5;
            border-color: #fbcaca;
        }
        
        .after .status {
            color: #15803d;
            background: #f0fdf4;
            border-color: #b7e4c7;
        }

        .comparison-cta-wrap {
            margin-top: 22px;
            text-align: center;
        }

        .comparison-cta-microcopy {
            font-size: 14px;
            font-weight: 600;
            color: #4b5563;
            margin-bottom: 12px;
        }

        .comparison-buttons {
            margin-bottom: 0;
        }
        
        @media (max-width: 768px) {
            .comparison-grid {
                grid-template-columns: 1fr;
            }
            
            .comparison-column {
                padding: 22px 16px;
            }
            
            .comparison-list li {
                padding: 12px 12px;
                font-size: 14px;
            }

            .comparison-badge {
                margin-bottom: 14px;
            }

            .comparison-cta-wrap {
                margin-top: 16px;
            }

            .comparison-buttons .hero-cta,
            .comparison-buttons .hero-cta-secondary {
                width: 100%;
                max-width: 320px;
            }
        }
        
        .portfolio-row {
            overflow: hidden;
            width: 100%;
            margin-bottom: 24px;
            border-radius: 24px;
        }

        .portfolio-track {
            display: inline-flex;
            /* No gap here - copies must be seamless for perfect loop */
            animation: scroll-left 62s linear infinite;
            will-change: transform;
        }
        
        .portfolio-track.reverse {
            animation: scroll-right 62s linear infinite;
        }
        
        .portfolio-scroll {
            display: flex;
            flex-shrink: 0;
            gap: 24px;
            /* Add padding on right so there's space before next copy starts */
            padding-right: 24px;
        }
        
        /* Seamless left scroll: move by exactly one copy (50% of track) */
        @keyframes scroll-left {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        /* Seamless right scroll: start at -50%, end at 0 */
        @keyframes scroll-right {
            0% { transform: translateX(-50%); }
            100% { transform: translateX(0); }
        }
        
        .portfolio-item {
            flex-shrink: 0;
            width: 304px;
            aspect-ratio: 1 / 1;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 16px 36px rgba(8, 15, 28, 0.28);
            transition: transform 0.3s ease;
        }
        
        .portfolio-item:hover {
            transform: scale(1.05);
        }
        
        .portfolio-item img,
        .portfolio-item video {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            background: #12081f;
        }
        
        .video-item {
            flex-shrink: 0;
            width: 188px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 16px 36px rgba(8, 15, 28, 0.28);
            transition: transform 0.3s ease;
        }
        
        .video-item:hover {
            transform: scale(1.05);
        }
        
        .video-item video,
        .video-item img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 16px;
            object-fit: cover;
            background: #12081f;
        }

        /* ── See More Results ──────────────────────────────────── */
        .portfolio-more {
            position: relative;
            z-index: 2;
            background: #0a0518;
            padding: 0 0 72px;
            direction: ltr;
            text-align: center;
        }

        .portfolio-more-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 21.6px auto 0;
            min-height: 52px;
            padding: 10px 28px;
            background: rgba(255,255,255,0.07);
            border: 1.5px solid rgba(255,255,255,0.18);
            border-radius: 999px;
            color: #ffffff;
            font-family: var(--font-sans);
            font-size: 13px;
            line-height: 1.25;
            font-weight: 600;
            letter-spacing: 0;
            direction: ltr;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease;
        }

        .portfolio-more-btn-text {
            direction: rtl;
            unicode-bidi: plaintext;
        }

        .portfolio-more-btn:hover {
            background: rgba(255,255,255,0.13);
            border-color: rgba(255,255,255,0.32);
        }

        .portfolio-more-btn-arrow {
            width: 18px;
            height: 18px;
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }

        .portfolio-more-btn[aria-expanded="true"] .portfolio-more-btn-arrow {
            transform: rotate(180deg);
        }

        .portfolio-more-panel {
            padding-top: 32px;
        }

        @media (max-width: 768px) {
            .portfolio-viewport {
                width: min(100%, 1440px);
                margin: 0 auto;
                padding: 0 clamp(18px, 4vw, 42px);
            }

            .portfolio-viewport::after {
                background-image:
                    radial-gradient(
                        ellipse 95% 50% at 50% -40%,
                        rgba(233, 213, 255, 0.11) 0%,
                        transparent 48%
                    ),
                    linear-gradient(
                        90deg,
                        rgba(10, 5, 24, 0.78) 0%,
                        rgba(10, 5, 24, 0.42) 8%,
                        rgba(10, 5, 24, 0.14) 18%,
                        transparent 30%,
                        transparent 70%,
                        rgba(10, 5, 24, 0.14) 82%,
                        rgba(10, 5, 24, 0.42) 92%,
                        rgba(10, 5, 24, 0.78) 100%
                    );
            }

            .portfolio-more {
                padding-bottom: 57px;
            }
            .portfolio-more-btn {
                margin-top: 40px;
            }
            .portfolio {
                padding: 48px 0 0;
            }

            .portfolio-row {
                margin-bottom: 0;
            }

            .portfolio-scroll {
                gap: 16px;
                padding-right: 16px;
            }
        }

        .portfolio-more-panel[hidden] {
            display: none;
        }

        .portfolio-more-filters {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 28px;
            direction: rtl;
        }

        .portfolio-more-pill {
            display: inline-flex;
            align-items: center;
            padding: 8px 20px;
            border: 1.5px solid rgba(255,255,255,0.2);
            border-radius: 999px;
            background: transparent;
            color: rgba(255,255,255,0.65);
            font-size: 13px;
            font-weight: 600;
            font-family: var(--font-sans);
            cursor: pointer;
            transition: all 0.18s ease;
            white-space: nowrap;
        }

        .portfolio-more-pill:hover {
            border-color: rgba(255,255,255,0.45);
            color: #ffffff;
            background: rgba(255,255,255,0.06);
        }

        .portfolio-more-pill.active {
            background: var(--brand-primary, #7c3aed);
            border-color: var(--brand-primary, #7c3aed);
            color: #ffffff;
        }

        .portfolio-more-tagline {
            text-align: center;
            margin: 32px auto 0;
            max-width: 600px;
            padding: 0 24px;
            direction: inherit;
            animation: tagline-fade-in 0.4s ease both;
        }

        @keyframes tagline-fade-in {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .portfolio-more-tagline-title {
            font-family: var(--font-sans);
            font-size: 22px;
            font-weight: 400;
            color: #ffffff;
            margin: 0 0 16px;
            line-height: 1.5;
        }

        .portfolio-more-tagline-subtitle {
            font-family: var(--font-sans);
            font-size: 16.9px;
            font-weight: 400;
            color: rgba(255,255,255,0.6);
            margin: 0 0 10px;
            line-height: 1.7;
        }

        .portfolio-more-tagline-subtitle:last-child {
            margin-bottom: 0;
        }

        .landing-examples-modal {
            position: fixed;
            inset: 0;
            z-index: 8800;
            /* Column + top-aligned: avoids flex row centering clipping tall dialogs (lose close button above fold). */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding:
                max(clamp(12px, 2.2vw, 28px), env(safe-area-inset-top, 0px))
                clamp(12px, 2.2vw, 28px)
                max(clamp(12px, 2.2vw, 28px), env(safe-area-inset-bottom, 0px));
        }

        .landing-examples-modal[hidden] {
            display: none;
        }

        .landing-examples-backdrop {
            position: fixed;
            inset: 0;
            z-index: 0;
            background: rgba(2, 6, 23, 0.78);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .landing-examples-dialog {
            position: relative;
            z-index: 1;
            flex-shrink: 0;
            width: min(1120px, 94vw);
            max-height: none;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.16);
            background:
                radial-gradient(120% 140% at 100% 0%, rgba(124, 58, 237, 0.22), transparent 48%),
                radial-gradient(120% 140% at 0% 0%, rgba(59, 130, 246, 0.2), transparent 50%),
                linear-gradient(180deg, #0b1120 0%, #060913 100%);
            box-shadow: 0 42px 120px rgba(2, 6, 23, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            padding: clamp(18px, 2vw, 28px);
            overflow: visible;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .landing-examples-close {
            position: absolute;
            top: 14px;
            inset-inline-end: 14px;
            width: 40px;
            height: 40px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(15, 23, 42, 0.56);
            color: #f8fafc;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.2s ease;
        }

        .landing-examples-close:hover {
            background: rgba(51, 65, 85, 0.82);
            transform: translateY(-1px);
        }

        .landing-examples-head {
            display: grid;
            gap: 8px;
            flex-shrink: 0;
            padding-inline-end: 52px;
        }

        .landing-examples-modal-title {
            margin: 0;
            color: #f8fafc;
            font-size: clamp(26px, 2.8vw, 34px);
            line-height: 1.2;
            letter-spacing: -0.02em;
            font-weight: 800;
        }

        .landing-examples-modal-subtitle {
            margin: 0;
            color: rgba(203, 213, 225, 0.88);
            font-size: 15px;
            line-height: 1.65;
            max-width: 80ch;
        }

        .landing-examples-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: clamp(12px, 1.5vw, 18px);
            padding: 3px;
        }

        .landing-examples-card {
            display: grid;
            gap: 10px;
            text-align: start;
            font-family: var(--font-sans);
            border: 1px solid rgba(148, 163, 184, 0.24);
            border-radius: 16px;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.52) 100%);
            padding: 10px;
            cursor: pointer;
            transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
        }

        .landing-examples-card:hover {
            transform: translateY(-3px);
            border-color: rgba(129, 140, 248, 0.66);
            box-shadow: 0 18px 30px rgba(2, 6, 23, 0.42);
        }

        .landing-examples-card-thumb {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(2, 6, 23, 0.95) 100%);
            border: 1px solid rgba(148, 163, 184, 0.2);
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .landing-examples-card-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 22%;
            display: block;
        }

        .landing-examples-card-meta {
            display: grid;
            gap: 3px;
            min-height: 50px;
        }

        .landing-examples-card-title {
            color: #f8fafc;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.45;
        }

        .landing-examples-card-cta {
            color: rgba(129, 140, 248, 0.96);
            font-size: 12px;
            font-weight: 600;
            line-height: 1.35;
        }

        .landing-examples-preview {
            position: fixed;
            inset: 0;
            z-index: 9100;
            padding: 0;
            /* Opaque-ish scrim without backdrop-blur — blur can make sharp PNG previews look muddy on Chrome/Safari (GPU composite). */
            background: rgba(2, 6, 23, 0.96);
            display: block;
        }

        .landing-examples-preview[hidden] {
            display: none;
        }

        .landing-examples-preview-close {
            position: absolute;
            top: clamp(14px, 2vw, 22px);
            inset-inline-end: clamp(14px, 2vw, 22px);
            width: 46px;
            height: 46px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.24);
            background: rgba(15, 23, 42, 0.72);
            color: #f8fafc;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .landing-examples-preview-media {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            display: block;
            padding: clamp(12px, 2vw, 20px);
            overflow: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x pan-y pinch-zoom;
        }

        /* Natural bitmap width when smaller than the preview area; shrink only when wider than this scroll viewport. */
        .landing-examples-preview-media img {
            box-sizing: border-box;
            display: block;
            width: auto;
            max-width: 100%;
            height: auto;
            max-height: none;
            border-radius: 14px;
            box-shadow: 0 28px 78px rgba(2, 6, 23, 0.62);
            object-fit: initial;
            margin: 0 auto;
        }


        @media (max-width: 760px) {
            .landing-examples-backdrop {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            .landing-examples-preview {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            .landing-examples-dialog {
                width: min(98vw, 520px);
                border-radius: 18px;
                padding: 16px;
            }

            .landing-examples-head {
                padding-inline-end: 46px;
            }

            .landing-examples-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        .portfolio-more-items {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .portfolio-more-item {
            display: none;
        }

        .portfolio-more-item.visible {
            display: block;
        }

        .portfolio-more-item img {
            width: 100%;
            height: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 14px;
            display: block;
            cursor: pointer;
        }

        .portfolio-more-item video {
            width: 100%;
            height: 100%;
            aspect-ratio: 9 / 16;
            object-fit: cover;
            border-radius: 14px;
            display: block;
            cursor: pointer;
            background: #12081f;
        }

        .portfolio-more-placeholder {
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            border: 1px solid rgba(255,255,255,0.08);
            aspect-ratio: 1 / 1;
            position: relative;
            overflow: hidden;
        }

        .portfolio-more-placeholder.video {
            aspect-ratio: 9 / 16;
        }

        .portfolio-more-placeholder.card {
            aspect-ratio: 1.75 / 1;
        }

        .portfolio-more-placeholder.landing {
            aspect-ratio: 3 / 4;
        }

        .portfolio-more-placeholder::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
            background-size: 200% 100%;
            animation: pf-shimmer 1.8s linear infinite;
        }

        @keyframes pf-shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        /* ── Portfolio Lightbox Modal ───────────────────────────── */
        .pf-modal {
            position: fixed;
            inset: 0;
            z-index: 9000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pf-modal[hidden] {
            display: none;
        }

        .pf-modal-backdrop {
            position: absolute;
            inset: 0;
            z-index: 0;
            background: rgba(0, 0, 0, 0.88);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        .pf-modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 3;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255,255,255,0.12);
            border: 1.5px solid rgba(255,255,255,0.2);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.18s ease;
        }

        .pf-modal-close:hover {
            background: rgba(255,255,255,0.22);
        }

        .pf-modal-close svg {
            width: 20px;
            height: 20px;
        }

        .pf-modal-inner {
            position: relative;
            z-index: 1;
            isolation: isolate;
            max-width: min(90vw, 960px);
            max-height: 90vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pf-modal-media {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pf-modal-media img {
            max-width: min(90vw, 960px);
            max-height: 88vh;
            border-radius: 16px;
            box-shadow: 0 24px 80px rgba(0,0,0,0.6);
            display: block;
            object-fit: contain;
        }

        .pf-modal-media video {
            max-width: min(90vw, 480px);
            max-height: 88vh;
            border-radius: 16px;
            box-shadow: 0 24px 80px rgba(0,0,0,0.6);
            display: block;
        }

        /* Backdrop blur repaints fight iOS video chrome; solid backdrop avoids seek bar / controls flicker. */
        @media (max-width: 768px) {
            .pf-modal-backdrop {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
        }
        .pricing {
            position: relative;
            z-index: 2;
            background: transparent;
            padding: 56px 0 80px;
        }

        .pricing .section-title {
            color: #f8fafc;
        }

        .pricing .section-subtitle {
            color: rgba(226, 232, 240, 0.88);
        }

        .pricing-trust-row .trust-pill {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: rgba(248, 250, 252, 0.9);
        }

        .pricing-billing-toggle-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            margin: 22px 0 8px;
        }

        .pricing-billing-toggle {
            display: inline-flex;
            padding: 4px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.18);
            gap: 4px;
        }

        .pricing-billing-toggle button {
            border: none;
            background: transparent;
            padding: 10px 20px;
            border-radius: 11px;
            font-weight: 800;
            font-size: 14px;
            color: rgba(226, 232, 240, 0.86);
            cursor: pointer;
            font-family: inherit;
        }

        .pricing-billing-toggle button.is-active {
            background: #ffffff;
            color: #7c3aed;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22);
        }

        .pricing-billing-toggle-year {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            line-height: 1.15;
        }

        .pricing-billing-pill-tag {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 6px;
            background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
            color: #ffffff;
            font-size: 10.5px;
            font-weight: 900;
            letter-spacing: 0.03em;
            line-height: 1.2;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .pricing-billing-hint {
            max-width: 640px;
            margin: 0;
            color: rgba(226, 232, 240, 0.68);
            text-align: center;
            font-size: 11px;
            font-weight: 500;
            line-height: 1.45;
        }
        
        .pricing-trust-row {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
            margin: 24px 0 32px;
        }

        @media (max-width: 768px) {
            .pricing-trust-row {
                margin-bottom: 14px;
            }
        }
        
        .trust-pill {
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 600;
        }
        
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 22px;
            align-items: stretch;
            direction: inherit;
        }

        .pricing.pricing-pending .pricing-trust-row,
        .pricing.pricing-pending .pricing-grid,
        .pricing.pricing-pending .pricing-social-proof,
        .pricing.pricing-pending .credits-note,
        .pricing.pricing-pending .credits-trial-note,
        .pricing.pricing-pending .pricing-custom {
            visibility: hidden;
        }

        [dir="rtl"] .pricing-grid {
            direction: rtl;
        }

        [dir="ltr"] .pricing-grid {
            direction: ltr;
        }
        
        .pricing-card {
            background: linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%);
            padding: 30px 22px 22px;
            border-radius: 22px;
            border: 1px solid #e6e9f2;
            transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        }
        
        .pricing-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
            border-color: #d8deea;
        }
        
        .pricing-card.featured {
            border-color: #c4b5fd;
            background: linear-gradient(180deg, #fcfaff 0%, #f7f2ff 100%);
            box-shadow: 0 18px 40px rgba(124, 58, 237, 0.16);
        }

        .pricing-card.featured::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
        }
        
        .popular-badge {
            position: absolute;
            top: -11px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
            color: white;
            padding: 6px 15px;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
            letter-spacing: 0.2px;
            box-shadow: 0 10px 20px rgba(124, 58, 237, 0.2);
        }
        
        .pricing-card h3 {
            font-size: 24px;
            font-weight: 400;
            margin-bottom: 6px;
            color: #1a202c;
        }
        
        .plan-tagline {
            color: #64748b;
            font-size: 14px;
            margin-bottom: 14px;
            min-height: 21px;
        }

        .pricing-yearly-was-above:not([hidden]) {
            text-decoration: line-through;
            color: #94a3b8;
            font-size: 17px;
            font-weight: 700;
            line-height: 1.25;
            margin: 0 0 4px;
            font-variant-numeric: tabular-nums;
        }
        
        .price {
            font-size: 52px;
            font-weight: 900;
            color: #6d28d9;
            margin-bottom: 2px;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        
        .price span {
            font-size: 15px;
            font-weight: 600;
            color: #94a3b8;
            margin-inline-start: 4px;
        }
        
        .trial-note {
            color: #7c3aed;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 18px;
            line-height: 1.5;
            opacity: 0.9;
        }
        
        .pricing-features {
            list-style: none;
            padding: 0;
            margin: 0 0 10px 0;
            min-height: 0;
            flex: 1;
        }
        
        .pricing-features li {
            padding: 10px 0;
            font-size: 14px;
            line-height: 1.4;
            border-bottom: 1px solid #f4f6fa;
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            color: #475467;
        }

        .pricing-features li:first-child {
            color: #111827;
            font-weight: 700;
            padding-top: 0;
            padding-bottom: 12px;
        }

        .pricing-features li:last-child {
            border-bottom: 0;
        }
        
        .pricing-features li:before {
            content: "✓";
            color: #16a34a;
            font-weight: 700;
            margin-left: 8px;
            flex-shrink: 0;
            opacity: 0.9;
        }

        .plan-feature-label {
            font-size: inherit;
            line-height: inherit;
            font-weight: inherit;
            color: inherit;
        }

        .plan-feature-inline {
            display: inline;
        }

        .plan-feature-help {
            width: 18px;
            height: 18px;
            border-radius: 999px;
            border: 1px solid #c4b5fd;
            background: #f5f3ff;
            color: #7c3aed;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            flex-shrink: 0;
            margin-inline-start: 6px;
        }

        .plan-feature-tip {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            z-index: 8;
            min-width: 220px;
            max-width: 340px;
            padding: 9px 11px;
            border-radius: 10px;
            background: #111827;
            color: #ffffff;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.45;
            opacity: 0;
            transform: translateY(4px);
            pointer-events: none;
            transition: opacity 0.12s ease, transform 0.12s ease;
        }

        [dir="rtl"] .plan-feature-tip {
            left: auto;
            right: 0;
        }

        .plan-feature-inline:has(.plan-feature-help:hover) + .plan-feature-tip,
        .plan-feature-inline:has(.plan-feature-help:focus) + .plan-feature-tip {
            opacity: 1;
            transform: translateY(0);
        }

        .pricing-card .pricing-features li:nth-child(n+7) {
            display: none;
        }

        .pricing-card.features-expanded .pricing-features li:nth-child(n+7) {
            display: flex;
        }

        .pricing-features-toggle {
            border: 0;
            background: transparent;
            color: #667085;
            font-size: 12px;
            font-weight: 700;
            font-family: inherit;
            padding: 6px 0 12px;
            display: block;
            width: 100%;
            text-align: start;
            cursor: pointer;
        }

        .pricing-features-toggle:hover {
            color: #7c3aed;
        }

        .pricing-cta-note {
            margin-top: 9px;
            text-align: center;
            color: #94a3b8;
            font-size: 12px;
            font-weight: 600;
        }
        
        .credits-note {
            text-align: center;
            margin-top: 20px;
            font-size: 13px;
            max-width: 760px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.55;
        }

        .pricing .credits-note {
            color: rgba(203, 213, 225, 0.92);
        }

        .credits-trial-note {
            margin-top: 6px;
            font-size: 12px;
            line-height: 1.55;
            text-align: center;
        }

        .pricing .credits-trial-note {
            color: rgba(148, 163, 184, 0.95);
        }

        .pricing-social-proof {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            font-size: 13px;
            font-weight: 600;
        }

        .pricing .pricing-social-proof {
            color: rgba(248, 250, 252, 0.88);
        }

        .pricing-social-proof-avatars {
            display: flex;
            align-items: center;
        }

        .pricing-social-proof-avatars .avatar-badge {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 2px solid #ffffff;
            background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
            color: #4c1d95;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            margin-inline-end: -8px;
            overflow: hidden;
        }

        .pricing-social-proof-avatars .avatar-badge img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            background: #ffffff;
        }

        .pricing-social-proof-avatars .avatar-badge:last-child {
            margin-inline-end: 0;
        }
        
        .custom-plans {
            background: #f5f3ff;
            border: 1px solid #e9d5ff;
            border-radius: 16px;
            padding: 30px 40px;
            margin-top: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 30px;
            box-shadow: 0 8px 22px rgba(124, 58, 237, 0.08);
        }
        
        .custom-plans h3 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
            color: #1a202c;
        }
        
        .custom-points {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .custom-points li {
            color: #64748b;
            font-size: 14px;
            margin: 0 0 8px;
            display: flex;
            gap: 8px;
            align-items: center;
        }

        [dir="ltr"] .custom-points li {
            text-align: left;
            align-items: flex-start;
        }

        .custom-points li::before {
            content: "•";
            color: #7c3aed;
            font-weight: 900;
        }
        
        .custom-button {
            background: white;
            color: #7c3aed;
            border: 1.5px solid #c4b5fd;
            padding: 12px 24px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 700;
            font-size: 14px;
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        
        .custom-button:hover {
            background: #7c3aed;
            color: white;
            border-color: #7c3aed;
        }
        
        /* Final CTA Section */
        .final-cta {
            background: linear-gradient(180deg, #ffffff 0%, #fcfcff 100%);
            padding: 48px 0;
            text-align: center;
        }
        
        .final-cta-badge {
            display: none;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
            color: white;
            padding: 8px 20px;
            border-radius: 999px;
            font-size: 14px;
            font-weight: 650;
            margin-bottom: 24px;
        }
        
        .final-cta h2 {
            font-size: 38px;
            font-weight: 400;
            color: #1a202c;
            margin-bottom: 12px;
            line-height: 1.18;
        }
        
        .final-cta h2 span {
            color: inherit;
            font-weight: inherit;
        }
        
        .final-cta-subtitle {
            font-size: 18px;
            color: #64748b;
            margin-bottom: 24px;
            max-width: 560px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.55;
        }
        
        .final-cta-buttons {
            display: flex;
            gap: 0;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }
        
        .final-cta-primary {
            background: #7c3aed;
            color: white;
            padding: 17px 40px;
            border-radius: 14px;
            text-decoration: none;
            font-weight: 760;
            font-size: 18px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 12px 28px rgba(124, 58, 237, 0.22);
        }
        
        .final-cta-primary:hover {
            transform: translateY(-1px);
            background: #6d28d9;
            box-shadow: 0 16px 32px rgba(124, 58, 237, 0.26);
        }

        .final-cta-primary span {
            display: none;
        }
        
        .final-cta-trust {
            display: flex;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;
        }
        
        .trust-item {
            display: flex;
            align-items: center;
            gap: 0;
            color: #667085;
            font-size: 13px;
            font-weight: 600;
        }
        
        .trust-item .icon {
            display: none;
        }
        
        /* Interest Modal Styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            backdrop-filter: blur(5px);
        }

        .modal-overlay.show {
            display: flex;
            animation: fadeIn 0.3s ease-out;
        }

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

        .modal-content {
            background: white;
            border-radius: 20px;
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.3s ease-out;
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal-header {
            background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
            color: white;
            padding: 25px 30px;
            border-radius: 20px 20px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h2 {
            font-size: 24px;
            font-weight: 400;
            margin: 0;
        }

        .modal-close {
            background: none;
            border: none;
            color: white;
            font-size: 30px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.3s ease;
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .modal-body {
            padding: 30px;
        }

        .modal-intro {
            color: #64748b;
            font-size: 16px;
            margin-bottom: 25px;
            text-align: center;
            line-height: 1.6;
        }

        .interest-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            color: #1a202c;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .form-group input,
        .form-group select {
            padding: 15px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 16px;
            font-family: var(--font-sans);
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #9333ea;
            box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
        }

        .radio-group {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .radio-label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 12px 20px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            transition: all 0.3s ease;
            flex: 1;
            justify-content: center;
        }

        .radio-label:hover {
            border-color: #9333ea;
            background: rgba(147, 51, 234, 0.05);
        }

        .radio-label input[type="radio"] {
            margin: 0;
            width: auto;
        }

        .radio-label input[type="radio"]:checked + span {
            color: #9333ea;
            font-weight: 700;
        }

        .radio-label:has(input[type="radio"]:checked) {
            border-color: #9333ea;
            background: rgba(147, 51, 234, 0.1);
        }

        .submit-btn {
            background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
            color: white;
            border: none;
            padding: 18px 30px;
            border-radius: 11px;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(147, 51, 234, 0.3);
            font-family: var(--font-sans);
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(147, 51, 234, 0.4);
        }

        .submit-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none;
        }

        @media (max-width: 768px) {
            .modal-content {
                width: 95%;
                margin: 20px;
            }

            .modal-header {
                padding: 20px;
            }

            .modal-header h2 {
                font-size: 20px;
            }

            .modal-body {
                padding: 20px;
            }

            .radio-group {
                flex-direction: column;
                gap: 10px;
            }
        }
        
        @media (max-width: 768px) {
            .final-cta {
                padding: 48px 0;
            }

            .final-cta h2 {
                font-size: 26px;
            }
            
            .final-cta-buttons {
                align-items: center;
            }
            
            .final-cta-primary {
                width: 100%;
                max-width: 300px;
                justify-content: center;
                font-size: 16px;
                padding: 15px 22px;
            }
            
            .final-cta-trust {
                gap: 12px 18px;
            }

            .final-cta-subtitle {
                font-size: 16px;
                margin-bottom: 20px;
            }
        }
        
        .pricing-button {
            display: block;
            width: 100%;
            background: #ffffff;
            color: #5b21b6;
            text-align: center;
            padding: 12px 18px;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 700;
            font-size: 15px;
            border: 1px solid #d8def0;
            transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
            margin-top: auto;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
        }
        
        .pricing-button:hover {
            background: #f8f7ff;
            border-color: #c4b5fd;
        }

        .pricing-card.featured .pricing-button {
            background: #7c3aed;
            color: white;
            border-color: transparent;
            box-shadow: 0 12px 26px rgba(124, 58, 237, 0.28);
        }

        .pricing-card.featured .pricing-button:hover {
            background: #6d28d9;
            transform: translateY(-1px);
            box-shadow: 0 12px 24px rgba(147, 51, 234, 0.3);
        }
        
        .plan-note {
            background: #fef2f2;
            border: 1px solid #fecaca;
            padding: 10px;
            border-radius: 8px;
            margin-top: 15px;
            font-size: 12px;
            color: #991b1b;
            text-align: center;
        }
        
        /* Footer */
        footer {
            background: #1a202c;
            color: white;
            padding: 60px 0 30px;
        }

        footer .container {
            max-width: 1200px;
        }
        
        .footer-content {
            display: grid;
            /* Brand + Quick links + Free tools + Resources + Policies */
            grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(0, 1fr));
            gap: 24px 20px;
            margin-bottom: 40px;
            align-items: start;
        }

        .footer-links {
            min-width: 0;
        }

        .footer-seo .footer-blog-list > .footer-seo-group-label:first-child {
            margin-top: 0;
            padding-top: 0;
        }
        
        .footer-brand h3 {
            font-size: 32px;
            font-weight: 400;
            margin-bottom: 15px;
        }
        
        .footer-brand p {
            color: #94a3b8;
            line-height: 1.8;
            max-width: 320px;
        }

        .footer-contact {
            margin-top: 16px;
        }

        .footer-contact-title {
            font-size: 16px;
            font-weight: 400;
            color: #e2e8f0;
            margin-bottom: 8px;
        }

        .footer-contact-line {
            color: #94a3b8;
            line-height: 1.8;
            margin: 0;
        }

        .footer-contact-email {
            color: #e2e8f0;
            text-decoration: none;
        }

        .footer-contact-email:hover {
            color: #ec4899;
            text-decoration: underline;
        }
        
        .footer-links h4 {
            font-size: 18px;
            font-weight: 400;
            margin-bottom: 15px;
        }

        .footer-links h4 .footer-blog-title-link {
            color: inherit;
            text-decoration: none;
            display: inline;
            padding: 0;
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
        }

        .footer-links h4 .footer-blog-title-link:hover {
            color: #ec4899;
            text-decoration: none;
        }
        
        .footer-links ul {
            list-style: none;
            padding: 0;
        }
        
        .footer-links a:not(.footer-blog-title-link) {
            color: #94a3b8;
            text-decoration: none;
            display: block;
            padding: 8px 0;
            transition: color 0.3s ease;
        }
        
        .footer-links a:not(.footer-blog-title-link):hover {
            color: #ec4899;
        }

        .footer-seo-group-label {
            color: #e2e8f0;
            font-size: 13px;
            font-weight: 800;
            margin-top: 10px;
            padding-top: 4px;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid #334155;
            color: #64748b;
        }

        .footer-payment-logos {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 18px;
            align-items: center;
        }

        .footer-payment-logos img {
            height: 24px;
            width: auto;
            object-fit: contain;
            border-radius: 4px;
            background: #ffffff;
            padding: 3px 6px;
        }

        .footer-social {
            margin-top: 16px;
        }

        .footer-social a {
            display: inline-block;
        }

        .footer-social img {
            width: 22px;
            height: 22px;
            object-fit: cover;
            border-radius: 5px;
        }

        .footer-legal-note {
            margin-top: 8px;
            font-size: 13px;
            line-height: 1.6;
            color: #94a3b8;
        }

        .footer-rss-note,
        .footer-knowledge-note {
            margin-top: 8px;
            font-size: 13px;
            line-height: 1.6;
            color: #94a3b8;
        }

        .footer-rss-note a,
        .footer-knowledge-note a {
            color: #e2e8f0;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .footer-rss-note a:hover,
        .footer-knowledge-note a:hover {
            color: #ec4899;
        }

        .footer-knowledge-note .footer-knowledge-title {
            color: #94a3b8;
            font-weight: 700;
            text-decoration: none;
        }

        .footer-knowledge-note .footer-knowledge-title:hover {
            color: #ec4899;
        }

        .footer-knowledge-note .footer-knowledge-title::after {
            content: ':';
        }
        
        /* Mobile Responsive */
        @media (max-width: 1200px) {
            .pricing-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .features-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .custom-plans {
                flex-direction: column;
                text-align: center;
            }
        }
        
        @media (max-width: 1024px) {
            .footer-content {
                grid-template-columns: 1fr 1fr;
            }

            .landing-message-inner {
                width: min(82%, 820px);
                max-width: none;
            }

            .portfolio-more-items {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 30px;
                line-height: 1.2;
            }

            section.hero-aurora-headline {
                padding: 52px 0 24px;
            }
            
            .hero.hero--continuation .subtitle {
                font-size: 15px;
            }
            
            .hero.hero--continuation .subtitle-secondary {
                font-size: 15px;
                margin-bottom: 18px;
            }

            .landing-message {
                padding: 40px 0 28px;
            }

            .landing-message-inner {
                width: 88%;
                max-width: none;
                text-align: start;
            }

            .landing-message-line {
                font-size: 24.35px;
                line-height: 1.45;
            }

            .landing-message-line + .landing-message-line {
                margin-top: 32px;
            }

            .founder-video {
                padding: 30px 0 44px;
            }

            .founder-video-card {
                border-radius: 0;
                padding: 0;
            }

            .founder-video-lead {
                font-size: 11.5px;
                line-height: 1.35;
                letter-spacing: 0.065em;
                margin-bottom: 9px;
            }

            .founder-video-proof {
                flex-direction: column;
                gap: 10px;
                margin-bottom: 14px;
                font-size: 18px;
            }

            .founder-video-proof .avatar-badge {
                width: 2.125rem;
                height: 2.125rem;
                margin-inline-end: -0.5rem;
            }

            .founder-video-frame {
                border-radius: 16px;
            }

            .founder-video-player {
                aspect-ratio: 16 / 9;
            }

            .hero-showcase-bridge {
                margin: 0 auto 28px;
                padding: 0 18px;
            }

            .hero-showcase-bridge__label {
                font-size: 22px;
            }

            .portfolio-more .founder-video {
                padding-top: 12px;
            }

            .portfolio-more .founder-video-title {
                font-size: 20px;
                margin-bottom: 8px;
            }

            [dir="ltr"] .credits-trial-note {
                text-align: center;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .hero-cta:not(.hero-cta--stacked),
            .hero-cta-secondary {
                width: 100%;
                max-width: 300px;
                justify-content: center;
                font-size: 17px;
                min-height: 50px;
                padding: 0 26px;
            }

            .hero-cta.hero-cta--stacked {
                width: 100%;
                max-width: min(340px, 92vw);
                padding: 16px 22px;
            }
            
            .section-title {
                font-size: 28px;
            }

            .for-everyone .section-subtitle {
                margin-bottom: 18px;
            }

            .for-everyone .audience-card {
                padding: 24px 18px;
            }

            .for-everyone .audience-card h3 {
                font-size: 21px;
            }

            .audience-card p {
                font-size: 14px;
                margin-bottom: 10px;
            }

            .audience-card li {
                font-size: 13.5px;
                line-height: 1.42;
                padding: 8px 0;
            }
            
            .audience-grid,
            .feature-pillars,
            .features-grid,
            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .pricing-card {
                padding: 24px 18px 18px;
                border-radius: 18px;
            }

            .price {
                font-size: 44px;
            }

            .trial-note {
                font-size: 13px;
                margin-bottom: 16px;
            }

            .pricing-features {
                margin: 0 0 8px 0;
            }

            .pricing-features li {
                padding: 9px 0;
                font-size: 13px;
                line-height: 1.38;
            }

            .pricing-features li:before {
                margin-left: 8px;
            }

            .pricing-features-toggle {
                font-size: 12px;
                font-family: inherit;
                padding-bottom: 8px;
            }

            .pricing-button {
                font-size: 14px;
                padding: 11px 16px;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
            }
            
            .portfolio-item {
                width: 188px;
            }
            
            .video-item {
                width: 107px;
            }

            .portfolio-more-items {
                grid-template-columns: repeat(2, 1fr);
                padding: 0 16px;
            }
            
            .pricing-trust-row {
                gap: 8px;
                margin: 18px 0 24px;
            }

            .pricing-billing-toggle {
                width: min(100%, 340px);
            }

            .pricing-billing-toggle button {
                flex: 1;
                padding: 9px 10px;
                font-size: 12.5px;
            }

            .pricing-billing-pill-tag {
                font-size: 9px;
                padding: 3px 6px;
            }
            
            .trust-pill {
                font-size: 12px;
                padding: 7px 11px;
            }
            
            .pricing-social-proof {
                font-size: 12px;
                gap: 10px;
            }

            .pricing-card.plan-launch {
                order: 0;
            }

            .pricing-card.plan-starter {
                order: 1;
            }

            .pricing-card.plan-spark {
                order: 2;
            }

            .pricing-card.plan-growth {
                order: 3;
            }

            .pricing-card.plan-pro {
                order: 4;
            }
        }
        
        /* Mobile Header Fixes */
        @media (max-width: 600px) {
            header {
                padding: 10px 0;
            }
            
            .header-content {
                gap: 8px;
            }
            
            .logo {
                font-size: 22px;
                gap: 6px;
            }
            
            .logo-img {
                width: 32px;
                height: 32px;
            }
            
            .header-actions {
                gap: 8px;
                --header-action-pad-y: 8px;
                --header-action-pad-x: 14px;
                --header-action-font-size: 13px;
            }
            
            .lang-switcher {
                padding-inline-start: 10px;
                padding-inline-end: 8px;
            }

            .cta-button {
                padding: var(--header-action-pad-y) var(--header-action-pad-x);
                font-size: var(--header-action-font-size);
            }

            .homepage-subheader__grid {
                grid-template-columns: 1fr;
                gap: 16px;
                padding: 14px 0 16px;
            }
        }
        
        @media (max-width: 400px) {
            .logo {
                font-size: 20px;
            }
            
            .logo-img {
                width: 28px;
                height: 28px;
            }
            
            .header-actions {
                --header-action-pad-y: 7px;
                --header-action-pad-x: 12px;
                --header-action-font-size: 12px;
            }
            
            .lang-switcher {
                padding-inline-start: 8px;
                padding-inline-end: 6px;
            }

            .cta-button {
                padding: var(--header-action-pad-y) var(--header-action-pad-x);
                font-size: var(--header-action-font-size);
            }
        }

        /* Tool Comparison Table */
        .tool-compare {
            background: #ffffff;
            padding: 52px 0 90px;
        }

        .tool-compare__header {
            text-align: center;
            margin-bottom: 36px;
        }

        .tool-compare__title {
            font-size: clamp(32px, 5vw, 52px);
            font-weight: 400;
            color: #7c3aed;
            line-height: 1.2;
            margin-bottom: 10px;
        }

        .tool-compare__subtitle {
            font-size: clamp(16px, 2vw, 20px);
            color: #667085;
            font-weight: 500;
            max-width: 540px;
            margin: 0 auto;
            line-height: 1.5;
        }

        .tool-compare__card {
            max-width: 1100px;
            margin: 0 auto;
            background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
            border-radius: 24px;
            border: 1px solid #eceff5;
            box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
            overflow: hidden;
            padding: 40px 48px 36px;
        }

        .tool-compare__table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .tool-compare__table thead th {
            padding: 0 20px 26px;
            font-size: 15px;
            font-weight: 600;
            color: #9ca3af;
            text-align: center;
            vertical-align: bottom;
            border: none;
            background: transparent;
        }

        .tool-compare__table thead th:first-child {
            width: 46%;
        }

        .tool-compare__logo-cell {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
        }

        .tool-compare__logo-cell img {
            width: 52px;
            height: 52px;
            object-fit: contain;
            border-radius: 12px;
        }

        .tool-compare__logo-cell img[alt="Adly"] {
            width: 64px;
            height: 64px;
            border-radius: 14px;
        }

        .tool-compare__table tbody td {
            padding: 20px 20px;
            text-align: center;
            border-bottom: 1px solid #eef0f3;
            font-size: 17px;
            vertical-align: middle;
            background: transparent;
        }

        .tool-compare__table tbody tr:last-child td {
            border-bottom: none;
        }

        .tool-compare__table tbody td:first-child {
            font-weight: 600;
            color: #1e293b;
            line-height: 1.55;
            font-size: 16px;
        }

        .tool-compare__channel-label {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .tool-compare__channel-icons {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            flex: 0 0 auto;
        }

        .tool-compare__channel-icon {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .tool-compare__channel-icon.is-whatsapp {
            color: #22c55e;
        }

        .tool-compare__channel-icon.is-telegram {
            color: #2aabee;
        }

        [dir="ltr"] .tool-compare__table tbody td:first-child {
            text-align: left;
            direction: ltr;
        }

        [dir="rtl"] .tool-compare__table tbody td:first-child {
            text-align: right;
            direction: rtl;
        }

        .tool-compare__check {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #22c55e;
            border: none;
        }

        .tool-compare__check svg {
            width: 18px;
            height: 18px;
            stroke: #ffffff;
            fill: none;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .tool-compare__cross {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #ef4444;
            border: none;
        }

        .tool-compare__cross svg {
            width: 15px;
            height: 15px;
            stroke: #ffffff;
            fill: none;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .tool-compare__extra {
            display: none;
        }

        .tool-compare__card.is-expanded .tool-compare__extra {
            display: table-row;
        }

        .tool-compare__toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            margin-top: 24px;
            padding: 8px 16px;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            color: #667085;
            font-size: 13px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }

        [dir="rtl"] .tool-compare__toggle {
            margin-right: 0;
            margin-left: auto;
        }

        [dir="ltr"] .tool-compare__toggle {
            margin-right: auto;
            margin-left: 0;
        }

        .tool-compare__toggle:hover {
            background: #f5f3ff;
            border-color: #ddd6fe;
            color: #7c3aed;
        }

        .tool-compare__toggle-arrow {
            width: 18px;
            height: 18px;
            transition: transform 0.3s ease;
        }

        .tool-compare__card.is-expanded .tool-compare__toggle-arrow {
            transform: rotate(180deg);
        }

        .tool-compare__cta-wrap {
            margin-top: 36px;
            text-align: center;
        }

        .tool-compare__cta-microcopy {
            font-size: 14px;
            font-weight: 600;
            color: #4b5563;
            margin-top: 12px;
        }

        @media (max-width: 768px) {
            .tool-compare {
                padding: 34px 0 56px;
            }

            .tool-compare__card {
                border-radius: 18px;
                padding: 24px 18px 20px;
                margin: 0 4px;
            }

            .tool-compare__table {
                width: 100%;
            }

            .tool-compare__table thead th {
                padding: 0 6px 20px;
                font-size: 11px;
            }

            .tool-compare__logo-cell img {
                width: 36px;
                height: 36px;
            }

            .tool-compare__logo-cell img[alt="Adly"] {
                width: 44px;
                height: 44px;
            }

            .tool-compare__table tbody td {
                padding: 14px 6px;
                font-size: 14px;
            }

            .tool-compare__table tbody td:first-child {
                font-size: 13px;
                line-height: 1.45;
            }

            .tool-compare__channel-label {
                gap: 7px;
            }

            .tool-compare__channel-icons {
                gap: 3px;
            }

            .tool-compare__channel-icon {
                width: 15px;
                height: 15px;
            }

            [dir="ltr"] .tool-compare__table tbody td:first-child {
                padding-right: 8px;
            }

            [dir="rtl"] .tool-compare__table tbody td:first-child {
                padding-left: 8px;
            }

            .tool-compare__check,
            .tool-compare__cross {
                width: 26px;
                height: 26px;
            }

            .tool-compare__toggle {
                margin-top: 18px;
                padding: 7px 14px;
                font-size: 12px;
            }

            .tool-compare__check svg {
                width: 14px;
                height: 14px;
            }

            .tool-compare__cross svg {
                width: 12px;
                height: 12px;
            }
        }

        /* FAQ Section */
        .faq-section {
            background: #fcfbff;
            padding: 56px 0;
        }

        .faq-section__title {
            text-align: center;
            font-size: clamp(32px, 5vw, 52px);
            font-weight: 400;
            color: #7c3aed;
            margin-bottom: 48px;
        }

        .faq-section__list {
            max-width: 820px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .faq-item {
            background: #f8f9fb;
            border-radius: 16px;
            overflow: hidden;
            transition: background 0.2s;
        }

        .faq-item__question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            width: 100%;
            padding: 22px 28px;
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-size: 17px;
            font-weight: 400;
            color: #111827;
            text-align: start;
            line-height: 1.5;
        }

        .faq-item__icon {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #111827;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }

        .faq-item__icon svg {
            width: 16px;
            height: 16px;
            stroke: #ffffff;
            fill: none;
            stroke-width: 2.5;
            stroke-linecap: round;
        }

        .faq-item.is-open .faq-item__icon {
            transform: rotate(45deg);
        }

        .faq-item__answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, padding 0.35s ease;
        }

        .faq-item__answer-inner {
            padding: 0 28px 24px;
            font-size: 16px;
            font-weight: 500;
            color: #4b5563;
            line-height: 1.8;
        }

        .faq-item.is-open .faq-item__answer {
            max-height: 600px;
        }

        @media (max-width: 768px) {
            .faq-section {
                padding: 56px 0;
            }

            .faq-section__title {
                margin-bottom: 32px;
            }

            .faq-item__question {
                padding: 18px 20px;
                font-size: 15px;
            }

            .faq-item__answer-inner {
                padding: 0 20px 20px;
                font-size: 15px;
            }

            .faq-item__icon {
                width: 28px;
                height: 28px;
            }

            .faq-item__icon svg {
                width: 14px;
                height: 14px;
            }
        }


/* pricing-compare.css */
/* Homepage pricing comparison table (scoped to #pricing) */
#pricing {
  --pricing-compare-thead-top: 72px;
  --pricing-compare-radius: 16px;
}

#pricing .pricing-compare-wrap {
  margin: 22px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

#pricing .pricing-compare-toggle {
  font-size: 14px;
  font-weight: 700;
  display: inline-block;
  width: auto;
  text-align: center;
  color: #ffffff;
  padding: 6px 0;
}

#pricing .pricing-compare-toggle:hover {
  color: #ffffff;
  opacity: 0.88;
}

#pricing .pricing-compare-panel {
  margin: 40px auto 36px;
  max-width: 920px;
  text-align: start;
}

#pricing .pricing-compare-panel.hidden {
  display: none;
}

#pricing .pricing-compare-panel:not(.hidden) .pricing-compare-title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  color: #f8fafc;
}

#pricing a.pricing-view-all-features.pricing-features-toggle {
  display: inline-block;
  width: auto;
  text-decoration: none;
}

.pricing-compare-tooltip-popup {
  position: fixed;
  z-index: 120;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 10px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
  pointer-events: none;
}

#pricing-comparison {
  scroll-margin-top: calc(var(--pricing-compare-thead-top) + 12px);
}

#pricing .pricing-compare-scroll-hint {
  display: none;
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: #94a3b8;
}

#pricing .pricing-compare-scroll.pricing-compare-shell,

#pricing .pricing-compare-shell {
  --pricing-compare-radius: 16px;
  border: 1px solid #e8edf3;
  border-radius: var(--pricing-compare-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

#pricing .pricing-compare-table-premium {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

#pricing .pricing-compare-table-premium th,

#pricing .pricing-compare-table-premium td {
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

#pricing .pricing-compare-table-premium thead th {
  background: #fff;
  border-bottom: 2px solid #e8edf3;
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
  white-space: nowrap;
  padding: 11px 10px;
}

#pricing .pricing-compare-plan-head {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.25;
}

#pricing .pricing-compare-plan-name {
  font-size: 12px;
  font-weight: 800;
}

#pricing .pricing-compare-plan-price {
  font-size: 10.5px;
  font-weight: 700;
  color: #7c3aed;
  font-variant-numeric: tabular-nums;
}

#pricing .pricing-compare-table-premium thead .pricing-compare-col-recommended .pricing-compare-plan-price {
  color: #6d28d9;
}

#pricing .pricing-compare-table-premium thead th.pricing-compare-feature-col {
  text-align: start;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  border-inline-end: 1px solid #e8edf3;
  box-shadow: none;
}

#pricing .pricing-compare-table-premium tbody td {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#pricing .pricing-compare-table-premium tbody th.pricing-compare-feature-col {
  text-align: start;
  font-weight: 600;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.4;
  min-width: 190px;
  max-width: 260px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  overflow: visible;
  border-inline-end: 1px solid #e8edf3;
  box-shadow: none;
}

#pricing .pricing-compare-table-premium tbody tr.is-striped th.pricing-compare-feature-col,

#pricing .pricing-compare-table-premium tbody tr.is-striped td {
  background-color: #fafbfc;
}

#pricing .pricing-compare-table-premium tbody tr.is-striped .pricing-compare-col-highlight,

#pricing .pricing-compare-table-premium tbody tr.is-striped .pricing-compare-col-recommended {
  background-color: rgba(124, 58, 237, 0.055);
}

#pricing .pricing-compare-section-row th.pricing-compare-section-col {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #e8edf3 !important;
  color: #0f172a !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  text-align: start;
  padding: 10px 14px 7px !important;
  border-bottom: 1px solid #dde3ea !important;
  min-width: 190px;
  max-width: 260px;
  border-inline-end: 1px solid #dde3ea;
  box-shadow: none;
}

#pricing .pricing-compare-section-row td.pricing-compare-section-fill {
  background: #e8edf3 !important;
  border-bottom: 1px solid #dde3ea !important;
  padding: 0 !important;
}

#pricing .pricing-compare-section-row.is-first-section th.pricing-compare-section-col {
  padding-top: 10px !important;
}

[dir="rtl"] #pricing .pricing-compare-section-row th.pricing-compare-section-col {
  left: auto;
  right: 0;
  text-align: right;
}

#pricing .pricing-compare-section-row + .pricing-compare-row th,

#pricing .pricing-compare-section-row + .pricing-compare-row td {
  padding-top: 8px;
}

#pricing .pricing-compare-row.is-key-row .pricing-compare-feature-col,

#pricing .pricing-compare-row.is-key-row .pricing-compare-label-text {
  color: #0f172a;
  font-weight: 700;
}

#pricing .pricing-compare-row.is-uniform-bool .pricing-compare-feature-col {
  color: #475569;
  font-weight: 600;
}

#pricing .pricing-compare-col-highlight,

#pricing .pricing-compare-col-recommended {
  background: rgba(124, 58, 237, 0.06) !important;
}

#pricing .pricing-compare-table-premium thead .pricing-compare-col-highlight,

#pricing .pricing-compare-table-premium thead .pricing-compare-col-recommended {
  background: rgba(124, 58, 237, 0.1) !important;
  color: #5b21b6;
  box-shadow: inset 1px 0 0 rgba(124, 58, 237, 0.14), inset -1px 0 0 rgba(124, 58, 237, 0.14);
}

#pricing .pricing-compare-table-premium tbody .pricing-compare-col-recommended {
  box-shadow: inset 1px 0 0 rgba(124, 58, 237, 0.1), inset -1px 0 0 rgba(124, 58, 237, 0.1);
}

#pricing .pricing-compare-value {
  font-weight: 700;
  color: #334155;
  font-size: 13px;
}

#pricing .pricing-compare-row.is-key-row .pricing-compare-value {
  color: #0f172a;
  font-weight: 800;
  font-size: 13.5px;
}

#pricing .pricing-compare-row.is-diff-row .pricing-compare-value {
  color: #1e293b;
  font-weight: 800;
}

#pricing .pricing-compare-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.35;
  max-width: 100%;
}

#pricing .pricing-compare-label-text {
  min-width: 0;
}

#pricing .pricing-compare-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  color: #94a3b8;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
  position: relative;
}

#pricing .pricing-compare-tip::after {
  display: none !important;
}

#pricing .pricing-compare-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(124, 58, 237, 0.08);
  color: #7c3aed;
}

#pricing .pricing-compare-yes svg {
  display: block;
  width: 11px;
  height: 11px;
}

#pricing .pricing-compare-row.is-diff-row .pricing-compare-yes {
  background: rgba(124, 58, 237, 0.11);
  color: #6d28d9;
}

#pricing .pricing-compare-no {
  color: #e2e8f0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

#pricing .pricing-compare-row.is-diff-row .pricing-compare-no {
  color: #cbd5e1;
}

[dir="rtl"] #pricing .pricing-compare-table-premium tbody th.pricing-compare-feature-col,

[dir="rtl"] #pricing .pricing-compare-table-premium thead th.pricing-compare-feature-col {
  left: auto;
  right: 0;
  text-align: right;
}

#pricing .pricing-compare-head-pin {
  position: fixed;
  z-index: 8;
  display: none;
  box-sizing: border-box;
  pointer-events: none;
  background: #fff;
  border-bottom: 2px solid #e8edf3;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

#pricing .pricing-compare-head-pin.is-active {
  display: block;
}

#pricing .pricing-compare-head-pin-scroll {
  overflow: hidden;
}

#pricing .pricing-compare-head-pin-scroll .pricing-compare-table-premium {
  margin: 0;
}

#pricing .pricing-compare-table-premium tbody tr:last-child th,

#pricing .pricing-compare-table-premium tbody tr:last-child td {
  border-bottom: none;
}

#pricing .pricing-compare-table-premium thead tr > :first-child {
  border-start-start-radius: calc(var(--pricing-compare-radius, 16px) - 1px);
}

#pricing .pricing-compare-table-premium thead tr > :last-child {
  border-start-end-radius: calc(var(--pricing-compare-radius, 16px) - 1px);
}

#pricing .pricing-compare-table-premium tbody tr:last-child > :first-child {
  border-end-start-radius: calc(var(--pricing-compare-radius, 16px) - 1px);
}

#pricing .pricing-compare-table-premium tbody tr:last-child > :last-child {
  border-end-end-radius: calc(var(--pricing-compare-radius, 16px) - 1px);
}

#pricing .pricing-compare-table-premium thead .pricing-compare-col-highlight,

#pricing .pricing-compare-table-premium thead .pricing-compare-col-recommended,

#pricing .pricing-compare-table-premium tbody tr:last-child .pricing-compare-col-highlight,

#pricing .pricing-compare-table-premium tbody tr:last-child .pricing-compare-col-recommended {
  background-clip: padding-box;
}

#pricing .pricing-compare-label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

#pricing .pricing-compare-autopilot-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .pricing-page main.container {
    overflow-x: clip;
    padding-bottom: 88px;
  }

  .pricing-page .pricing-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pricing-page .pricing-card {
    padding: 20px 18px 18px;
    gap: 8px;
  }

  .pricing-page .pricing-card.recommended .pricing-card-head,
  .pricing-page .pricing-card.highlight .pricing-card-head {
    padding-top: 22px;
  }

  .pricing-page .pricing-card .plan-badge {
    top: -11px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [dir="rtl"] .pricing-page .pricing-card .plan-badge {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .pricing-page .price-value {
    font-size: 44px;
  }

  .pricing-page .pricing-card.plan-launch {
    order: 0;
  }

  .pricing-page .pricing-card.plan-starter {
    order: 1;
  }

  .pricing-page .pricing-card.plan-spark {
    order: 2;
  }

  .pricing-page .pricing-card.plan-growth {
    order: 3;
  }

  .pricing-page .pricing-card.plan-pro {
    order: 4;
  }

  .pricing-page .pricing-card.recommended {
    transform: none;
  }

  .pricing-page .pricing-card .pricing-cta {
    width: 100%;
    margin-top: auto;
  }

  .pricing-page a.pricing-view-all-features.pricing-features-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 6px 0 8px;
    -webkit-tap-highlight-color: transparent;
  }

  .pricing-page .pricing-social-proof {
    font-size: 13px;
    gap: 10px;
  }

  .pricing-page .pricing-custom {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .pricing-page .pricing-custom-cta {
    width: 100%;
    justify-self: stretch;
  }

  #pricing .pricing-compare-panel,
  .pricing-page .pricing-faq,
  .pricing-page .pricing-custom,
  .pricing-page .pricing-post-grid,
  .pricing-page .pricing-all-plans-strip {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  #pricing .pricing-compare-panel {
    overflow: visible;
    padding-inline: 0;
  }

  #pricing .pricing-compare-scroll-hint {
    display: block;
    padding: 0 4px;
  }

  #pricing .pricing-compare-scroll.pricing-compare-shell,
  #pricing .pricing-compare-shell {
    --pricing-compare-radius: 14px;
    width: 100%;
    max-width: 100%;
    border-radius: var(--pricing-compare-radius);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #pricing .pricing-compare-head-pin {
    z-index: 25;
  }

  #pricing .pricing-compare-table-premium {
    min-width: 0;
    font-size: 12px;
  }

  #pricing .pricing-compare-table-premium th,
  #pricing .pricing-compare-table-premium td {
    padding: 8px 6px;
  }

  #pricing .pricing-compare-table-premium thead th {
    white-space: normal;
    padding: 9px 5px;
  }

  #pricing .pricing-compare-table-premium thead th.pricing-compare-feature-col,
  #pricing .pricing-compare-table-premium tbody th.pricing-compare-feature-col,
  #pricing .pricing-compare-section-row th.pricing-compare-section-col {
    width: 108px;
    min-width: 108px;
    max-width: 118px;
    padding: 8px 6px !important;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.4;
    box-shadow: none;
  }

  #pricing .pricing-compare-table-premium tbody th.pricing-compare-feature-col,
  #pricing .pricing-compare-section-row th.pricing-compare-section-col {
    z-index: 3;
  }

  #pricing .pricing-compare-table-premium tbody th.pricing-compare-feature-col {
    font-size: 12px;
  }

  #pricing .pricing-compare-table-premium thead th:not(.pricing-compare-feature-col),
  #pricing .pricing-compare-table-premium tbody td {
    min-width: 72px;
    width: 72px;
  }

}


/* homepage-help.css */
/* "How can Adly help my business?" homepage quiz.
   Mirrors the pricing plan-quiz design language. */
:root {
  --hh-primary: #7c3aed;
  --hh-primary-soft: color-mix(in srgb, #7c3aed 8%, #ffffff);
  --hh-primary-softer: color-mix(in srgb, #7c3aed 4%, #ffffff);
  --hh-grad: linear-gradient(135deg, #7c3aed, color-mix(in srgb, #7c3aed 55%, #38bdf8));
  --hh-ink: #0f172a;
  --hh-muted: #64748b;
  --hh-border: #e5e7eb;
  --hh-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.hh-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: inherit;
}
.hh-icon svg { display: block; width: 100%; height: 100%; }

/* ---- Open CTA ---- */
.hh-hero-mount { display: flex; justify-content: center; margin: 14px 0 0; }
.hh-pricing-cta-wrap { display: flex; justify-content: center; margin: 0; }
.hh-pricing-mount-mobile {
  display: none;
  margin: 0 0 18px;
  text-align: center;
}

/* Desktop: quiz CTA stays above Compare plans. Mobile: above the plan cards. */
@media (max-width: 768px) {
  .hh-pricing-mount-mobile {
    display: block;
  }
  #hh-pricing-mount {
    display: none;
  }
}

.hh-open-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans, 'Cairo', 'Tajawal', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  overflow: hidden;
  box-shadow: none;
  transform-origin: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s var(--hh-ease), opacity 0.2s ease;
}
.hh-open-cta .hh-icon { width: 15px; height: 15px; }
.hh-open-cta-chevron {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: inherit;
  opacity: 0.85;
  transition: transform 0.2s var(--hh-ease), opacity 0.2s ease;
}
.hh-open-cta-chevron .hh-icon { width: 14px; height: 14px; }
html[dir="ltr"] .hh-open-cta-chevron { transform: scaleX(-1); }
@keyframes hhSheen {
  0%, 48% { transform: translateX(-120%); }
  72%, 100% { transform: translateX(120%); }
}

/* Pricing: compact action chip (not a trust pill, not a big text link) */
.hh-pricing-cta-wrap .hh-open-cta,
.hh-open-cta--chip {
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.hh-pricing-cta-wrap .hh-open-cta::after,
.hh-open-cta--chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 72%
  );
  transform: translateX(-120%);
  animation: hhSheen 3.6s var(--hh-ease) infinite;
  pointer-events: none;
}
.hh-pricing-cta-wrap .hh-open-cta:hover,
.hh-open-cta--chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  transform: translateY(-1px);
}
.hh-pricing-cta-wrap .hh-open-cta:active,
.hh-open-cta--chip:active {
  transform: translateY(0) scale(0.98);
}
.hh-pricing-cta-wrap .hh-open-cta .hh-icon,
.hh-open-cta--chip .hh-icon { width: 13px; height: 13px; }
.hh-pricing-cta-wrap .hh-open-cta .hh-open-cta-label::before,
.hh-pricing-cta-wrap .hh-open-cta .hh-open-cta-label::after,
.hh-open-cta--chip .hh-open-cta-label::before,
.hh-open-cta--chip .hh-open-cta-label::after {
  content: none;
  display: none;
}

/* Hero only: smaller ghost secondary so it does not compete with the primary CTA */
.hh-hero-mount .hh-open-cta {
  gap: 7px;
  padding: 8px 16px;
  border-color: rgba(255, 255, 255, 0.28);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  overflow: hidden;
  animation: hhOpenCtaBuzz 4.8s ease-in-out infinite;
}
.hh-hero-mount .hh-open-cta::after {
  display: none;
}
@keyframes hhOpenCtaBuzz {
  0%, 82%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  84% { transform: translate3d(-1.5px, 0, 0) rotate(-0.7deg); }
  86% { transform: translate3d(1.5px, 0.5px, 0) rotate(0.7deg); }
  88% { transform: translate3d(-1px, 0, 0) rotate(-0.45deg); }
  90% { transform: translate3d(1px, -0.5px, 0) rotate(0.45deg); }
  92% { transform: translate3d(-0.5px, 0, 0) rotate(-0.25deg); }
  94% { transform: translate3d(0.5px, 0, 0) rotate(0.25deg); }
  96% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
.hh-hero-mount .hh-open-cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.42);
  color: #ffffff;
  transform: none;
  animation: none;
}
.hh-hero-mount .hh-open-cta:active {
  transform: scale(0.98);
  animation: none;
}
.hh-hero-mount .hh-open-cta .hh-icon { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .hh-pricing-cta-wrap .hh-open-cta::after,
  .hh-open-cta--chip::after,
  .hh-hero-mount .hh-open-cta {
    animation: none;
  }
}

/* ---- Modal shell ---- */
.hh-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.hh-modal[hidden] { display: none; }
.hh-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.hh-card {
  position: relative;
  width: min(680px, calc(100vw - 28px));
  max-height: min(90vh, 800px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
  border-radius: 22px;
  padding: 22px 24px 26px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
  font-family: var(--font-sans, 'Cairo', 'Tajawal', system-ui, sans-serif);
  color: var(--hh-ink);
  animation: hhCardIn 0.4s var(--hh-ease);
}
@keyframes hhCardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hh-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hh-ink) 5%, transparent);
  color: var(--hh-muted);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hh-close:hover { background: color-mix(in srgb, var(--hh-ink) 10%, transparent); color: var(--hh-ink); }
html[dir="rtl"] .hh-close { inset-inline-end: auto; inset-inline-start: 14px; left: 14px; right: auto; }

.hh-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 48px 20px;
}
.hh-progress-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hh-primary) 9%, #eef2f7);
  overflow: hidden;
}
.hh-progress-fill {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--hh-grad);
  transition: width 0.45s var(--hh-ease);
}
.hh-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%);
  animation: hhSheen 2.6s linear infinite;
}
.hh-progress-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--hh-primary);
  background: var(--hh-primary-soft);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ---- Steps / options ---- */
.hh-step { animation: hhStepIn 0.34s var(--hh-ease); }
.hh-opening {
  margin: 0 auto 18px;
  max-width: 480px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--hh-muted);
  text-align: center;
}
@keyframes hhStepIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.hh-q-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hh-primary);
  background:
    linear-gradient(var(--hh-primary-softer), var(--hh-primary-softer)) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--hh-primary) 45%, transparent), color-mix(in srgb, var(--hh-primary) 8%, transparent)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--hh-primary) 10%, transparent);
  animation: hhIconIn 0.45s var(--hh-ease);
}
.hh-q-icon .hh-icon { width: 24px; height: 24px; }
@keyframes hhIconIn {
  from { opacity: 0; transform: scale(0.7) rotate(-6deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
.hh-question {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 4px;
}
.hh-hint {
  min-height: 18px;
  font-size: 13px;
  color: var(--hh-muted);
  text-align: center;
  margin-bottom: 16px;
}
.hh-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.hh-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--hh-border);
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--hh-ink);
  text-align: start;
  cursor: pointer;
  animation: hhOptIn 0.4s var(--hh-ease) backwards;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s var(--hh-ease), box-shadow 0.15s ease;
}
@keyframes hhOptIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hh-option:hover {
  border-color: color-mix(in srgb, var(--hh-primary) 40%, var(--hh-border));
  background: var(--hh-primary-softer);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--hh-primary) 8%, transparent);
}
.hh-option:active { transform: translateY(0) scale(0.985); }
.hh-option.is-selected {
  border-color: var(--hh-primary);
  background: var(--hh-primary-soft);
  font-weight: 700;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hh-primary) 12%, transparent);
  animation: hhPop 0.3s var(--hh-ease);
}
@keyframes hhPop {
  0% { transform: scale(1); }
  45% { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.hh-option.is-denied { animation: hhShake 0.32s ease; }
@keyframes hhShake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
}
.hh-option-check {
  margin-inline-start: auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--hh-ink) 16%, transparent);
  background: #ffffff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s var(--hh-ease);
}
.hh-option-check .hh-icon { width: 12px; height: 12px; opacity: 0; transition: opacity 0.15s ease; }
.hh-option.is-selected .hh-option-check {
  background: var(--hh-primary);
  border-color: var(--hh-primary);
  transform: scale(1.06);
}
.hh-option.is-selected .hh-option-check .hh-icon { opacity: 1; }

.hh-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hh-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-radius: 10px;
  color: var(--hh-muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 10px;
  transition: color 0.15s ease, background 0.15s ease;
}
.hh-back:hover { color: var(--hh-ink); background: color-mix(in srgb, var(--hh-ink) 5%, transparent); }
.hh-back .hh-icon { width: 15px; height: 15px; }
html[dir="rtl"] .hh-back .hh-icon { transform: scaleX(-1); }

/* ---- Loading ---- */
.hh-loading { text-align: center; padding: 44px 8px 40px; }
.hh-orbit { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.hh-orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 12%, var(--hh-primary));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: hhSpin 1.1s linear infinite;
}
@keyframes hhSpin { to { transform: rotate(360deg); } }
.hh-orbit-core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hh-primary);
  animation: hhBreathe 1.6s ease-in-out infinite;
}
.hh-orbit-core .hh-icon { width: 24px; height: 24px; }
@keyframes hhBreathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.12); opacity: 1; }
}
.hh-loading-title { margin-top: 20px; font-size: 17px; font-weight: 800; }
.hh-loading-sub {
  margin-top: 8px;
  min-height: 20px;
  font-size: 13.5px;
  color: var(--hh-muted);
  transition: opacity 0.3s ease;
}
.hh-loading-sub.is-fading { opacity: 0; }

/* ---- Error ---- */
.hh-error { text-align: center; padding: 34px 8px 26px; }
.hh-error-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hh-primary);
  background: var(--hh-primary-soft);
}
.hh-error-icon .hh-icon { width: 24px; height: 24px; }
.hh-error-text { margin-top: 14px; font-size: 14px; }
.hh-retry {
  margin-top: 18px;
  padding: 11px 26px;
  border: none;
  border-radius: 12px;
  background: var(--hh-grad);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ---- Result ---- */
.hh-result { text-align: center; position: relative; }
.hh-confetti { position: absolute; top: -8px; left: 0; right: 0; height: 0; pointer-events: none; }
.hh-confetti i {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 6px;
  height: 10px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: hhConfetti 1.15s var(--hh-ease) forwards;
  animation-delay: var(--d);
}
@keyframes hhConfetti {
  0% { opacity: 0; transform: translateY(-6px) rotate(0deg) scale(0.7); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(130px) rotate(var(--r)) scale(1); }
}
.hh-result-badge {
  width: 56px;
  height: 56px;
  margin: 2px auto 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--hh-grad);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--hh-primary) 35%, transparent);
  animation: hhBadgeIn 0.55s var(--hh-ease);
}
.hh-result-badge .hh-icon { width: 26px; height: 26px; }
@keyframes hhBadgeIn {
  0% { opacity: 0; transform: scale(0.4) rotate(-14deg); }
  60% { transform: scale(1.08) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.hh-result-headline {
  margin: 14px auto 0;
  max-width: 500px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  animation: hhRiseIn 0.5s var(--hh-ease) 0.08s backwards;
}
@keyframes hhRiseIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.hh-result-intro {
  margin: 10px auto 0;
  max-width: 500px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hh-muted);
  animation: hhRiseIn 0.5s var(--hh-ease) 0.14s backwards;
}

/* Problem → solution rows. First column reads first (problem on the right in RTL). */
.hh-matches {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: start;
}
.hh-match {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr;
  gap: 12px;
  align-items: stretch;
  animation: hhRiseIn 0.5s var(--hh-ease) backwards;
}
.hh-match-problem,
.hh-match-solution {
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.6;
}
.hh-match-problem {
  background: color-mix(in srgb, #ef4444 4%, #ffffff);
  border: 1px solid color-mix(in srgb, #ef4444 14%, transparent);
  color: var(--hh-ink);
}
.hh-match-solution {
  background:
    linear-gradient(color-mix(in srgb, var(--hh-primary) 4%, #ffffff), #ffffff) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--hh-primary) 45%, transparent), color-mix(in srgb, var(--hh-primary) 10%, transparent)) border-box;
  border: 1.5px solid transparent;
  color: var(--hh-ink);
}
.hh-match-problem p,
.hh-match-solution p { margin: 6px 0 0; }
.hh-match-side-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.hh-match-problem .hh-match-side-label { color: #dc2626; }
.hh-match-solution .hh-match-side-label { color: var(--hh-primary); }
.hh-match-side-label .hh-icon { width: 13px; height: 13px; }
.hh-match-title { margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--hh-primary); }
.hh-match-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--hh-primary) 55%, transparent);
}
.hh-match-arrow .hh-icon { width: 18px; height: 18px; transform: scaleX(-1); }
html[dir="rtl"] .hh-match-arrow .hh-icon { transform: none; }
.hh-plan-chip {
  display: inline-block;
  margin-top: 9px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--hh-primary-soft);
  border: 1px solid color-mix(in srgb, var(--hh-primary) 18%, transparent);
  color: var(--hh-primary);
  font-size: 11px;
  font-weight: 700;
}

/* Plan card */
.hh-result-plan {
  position: relative;
  margin: 26px auto 0;
  max-width: 440px;
  border-radius: 18px;
  padding: 22px 20px 18px;
  background:
    linear-gradient(color-mix(in srgb, var(--hh-primary) 4%, #ffffff), #ffffff) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--hh-primary) 55%, transparent), color-mix(in srgb, var(--hh-primary) 12%, transparent)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--hh-primary) 10%, transparent);
  animation: hhRiseIn 0.5s var(--hh-ease) 0.2s backwards;
}
.hh-result-tag {
  position: absolute;
  top: -11px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--hh-grad);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
html[dir="rtl"] .hh-result-tag { transform: translateX(50%); }
.hh-result-plan-name { font-size: 24px; font-weight: 800; color: var(--hh-primary); }
.hh-result-plan-price { margin-top: 4px; font-size: 22px; font-weight: 800; }
.hh-result-plan-price span { font-size: 13px; font-weight: 600; color: var(--hh-muted); }
.hh-result-plan-yearly { margin-top: 4px; font-size: 12px; color: var(--hh-muted); }
.hh-result-plan-reason { margin: 12px 0 0; font-size: 13.5px; line-height: 1.65; }

/* Coupon */
.hh-coupon {
  margin: 18px auto 0;
  max-width: 440px;
  border-radius: 18px;
  padding: 20px;
  background: color-mix(in srgb, var(--hh-primary) 5%, #ffffff);
  border: 1.5px dashed color-mix(in srgb, var(--hh-primary) 40%, transparent);
  animation: hhRiseIn 0.5s var(--hh-ease) 0.3s backwards;
}
.hh-coupon-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--hh-grad);
}
.hh-coupon-icon .hh-icon { width: 21px; height: 21px; }
.hh-coupon-title { margin-top: 10px; font-size: 15px; font-weight: 800; }
.hh-coupon-body { margin: 7px 0 0; font-size: 13px; line-height: 1.6; color: var(--hh-muted); }
.hh-coupon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.hh-coupon-code {
  padding: 8px 18px;
  border-radius: 10px;
  background: #ffffff;
  border: 1.5px solid color-mix(in srgb, var(--hh-primary) 35%, transparent);
  color: var(--hh-primary);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.hh-coupon-copy {
  padding: 9px 14px;
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hh-primary) 12%, #ffffff);
  color: var(--hh-primary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.hh-coupon-copy:hover { background: color-mix(in srgb, var(--hh-primary) 20%, #ffffff); }
.hh-coupon-hint { margin-top: 8px; font-size: 11.5px; color: var(--hh-muted); }

.hh-result-actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: hhRiseIn 0.45s var(--hh-ease) 0.4s backwards;
}
.hh-cta {
  display: inline-block;
  min-width: 250px;
  padding: 14px 28px;
  border-radius: 14px;
  background: var(--hh-grad);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--hh-primary) 32%, transparent);
  transition: transform 0.18s var(--hh-ease), box-shadow 0.18s ease;
}
.hh-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--hh-primary) 42%, transparent);
}
.hh-start-over {
  background: none;
  border: none;
  color: var(--hh-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px;
}
.hh-start-over:hover { color: var(--hh-ink); }

/* ---- Pricing section personalization ---- */
.hh-pricing-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto;
  max-width: 760px;
  padding: 12px 18px;
  border-radius: 14px;
  background:
    linear-gradient(color-mix(in srgb, var(--hh-primary) 5%, #ffffff), #ffffff) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--hh-primary) 45%, transparent), color-mix(in srgb, var(--hh-primary) 10%, transparent)) border-box;
  border: 1.5px solid transparent;
  color: var(--hh-ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.hh-pricing-banner .hh-icon { width: 17px; height: 17px; color: var(--hh-primary); }
.hh-banner-restart {
  background: none;
  border: none;
  color: var(--hh-primary);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pricing-card.hh-recommended {
  border-color: var(--hh-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hh-primary) 16%, transparent), 0 18px 44px color-mix(in srgb, var(--hh-primary) 14%, transparent);
}

@media (max-width: 640px) {
  .hh-question { font-size: 17px; }
  .hh-option { min-height: 50px; padding: 11px 13px; }
  .hh-progress { margin: 6px 40px 16px; }
  .hh-options { grid-template-columns: 1fr; }
  .hh-cta { min-width: 100%; }
  .hh-match { grid-template-columns: 1fr; gap: 8px; }
  .hh-match-arrow { display: none; }
  .hh-card { padding: 20px 16px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-step, .hh-option, .hh-q-icon, .hh-result-badge, .hh-result-headline, .hh-result-intro,
  .hh-match, .hh-result-plan, .hh-coupon, .hh-result-actions,
  .hh-open-cta::after, .hh-progress-fill::after, .hh-confetti i, .hh-card {
    animation: none !important;
  }
}