/* Homepage styles — cache-bust v=20260612130000 */
        * {
            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"],
        html[lang="fr"] {
            --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,
        html[lang="fr"] 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;
            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;
            --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: hero keeps animated mesh with pre-static tuning; pricing uses static gradients.
         */
        @media (max-width: 768px) {
            header.header--scrolled {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            .top-aurora-wrap .mesh-blob--1 {
                animation-duration: 26s;
            }

            .top-aurora-wrap .mesh-blob--2 {
                animation-duration: 30s;
            }

            .top-aurora-wrap .mesh-blob--3 {
                animation-duration: 22s;
            }

            .top-aurora-wrap .mesh-blob--4 {
                animation-duration: 28s;
            }

            .top-aurora-wrap .mesh-blob--5 {
                animation-duration: 17s;
            }

            .top-aurora-wrap .mesh-blob--6 {
                animation-duration: 33s;
            }

            .top-aurora-wrap .mesh-blob::before {
                filter: blur(42px);
            }

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

            .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 select {
            background: rgba(18, 12, 28, 0.75);
            border-color: rgba(167, 139, 250, 0.5);
            color: #fafafa;
        }

        .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 select {
            background: rgba(22, 16, 36, 0.9);
            border-color: rgba(196, 181, 253, 0.4);
            color: #fafafa;
        }

        .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;
        }

        .lang-switcher {
            display: flex;
            align-items: stretch;
        }

        .lang-switcher select {
            height: 100%;
            min-height: 100%;
            padding: var(--header-action-pad-y, 12px) 36px var(--header-action-pad-y, 12px) 14px;
            border: 1px solid #e9d5ff;
            border-radius: 11px;
            background: white;
            color: #4c1d95;
            font-family: 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
            font-weight: 600;
            font-size: var(--header-action-font-size, 16px);
            line-height: 1.2;
            box-sizing: border-box;
            cursor: pointer;
        }

        html[lang="en"] .lang-switcher select,
        html[lang="fr"] .lang-switcher select {
            font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
        }
        
        .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: 13px;
            font-weight: 600;
            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: 1160px;
            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(3, minmax(0, 1fr));
            gap: 22px;
        }

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

        .feature-pillar {
            background: #ffffff;
            padding: 30px 26px;
            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: 30px 26px;
            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: 1fr;
                gap: 24px;
            }
        }

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

            .features .feature-pillars {
                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-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::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;
        }

        @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 {
                width: 100%;
                max-width: 512px;
            }

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

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

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

        @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;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .product-power-network-flow,
            .product-power-node,
            .product-power-placeholder::before,
            .product-power-final::before {
                animation: none;
            }

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

        .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: 540px;
            margin: 0;
            color: rgba(226, 232, 240, 0.76);
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.5;
        }
        
        .pricing-trust-row {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
            margin: 24px 0 32px;
        }
        
        .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;
            grid-template-columns: minmax(260px, 1.6fr) repeat(4, minmax(0, 1fr));
            gap: 28px;
            margin-bottom: 40px;
        }
        
        .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 ul {
            list-style: none;
            padding: 0;
        }
        
        .footer-links a {
            color: #94a3b8;
            text-decoration: none;
            display: block;
            padding: 8px 0;
            transition: color 0.3s ease;
        }
        
        .footer-links a: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 {
            margin-top: 8px;
            font-size: 13px;
            line-height: 1.6;
            color: #94a3b8;
        }

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

        .footer-rss-note a:hover {
            color: #ec4899;
        }
        
        /* 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 select {
                padding: var(--header-action-pad-y) 28px var(--header-action-pad-y) 10px;
                font-size: var(--header-action-font-size);
            }
            
            .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 select {
                padding: var(--header-action-pad-y) 24px var(--header-action-pad-y) 8px;
                font-size: var(--header-action-font-size);
            }
            
            .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;
        }

        [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;
            }

            [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;
            }
        }