*,
            *::before,
            *::after {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            :root {
                /* Single horizontal-padding token used by every section */
                --px: clamp(24px, 5vw, 80px);
                --dark: #080808;
            }
            html {
                scroll-behavior: smooth;
                overflow-x: hidden;
            }
            body {
                font-family:
                    "Geist",
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    sans-serif;
                background: var(--dark);
                color: #fff;
                overflow-x: hidden;
            }

            /* ─── Readability — drop ALL CAPS in Geist sections.
       Hero/nav/footer (Satoshi) override locally where needed. */
            body {
                text-transform: none;
            }

            /* ─── Navbar overrides for dark page ───────────────────────── */
            .navbar:not(.scrolled) .nav-link {
                color: rgba(255, 255, 255, 0.65);
            }
            .navbar:not(.scrolled) .nav-link:hover {
                color: #fff;
                background: rgba(255, 255, 255, 0.08);
            }
            .navbar:not(.scrolled) .navbar-btn.outline {
                color: rgba(255, 255, 255, 0.7);
                border-color: rgba(255, 255, 255, 0.6);
            }
            .navbar:not(.scrolled) .navbar-btn.outline:hover {
                color: #fff;
                border-color: rgba(255, 255, 255, 0.5);
            }

            /* ─── Hide site nav until scrolled ──────────────────────────── */
            #site-nav .navbar:not(.scrolled) {
                background: transparent !important;
            }
            #site-nav .navbar:not(.scrolled) .nav-link {
                color: rgba(255, 255, 255, 0.7);
            }
            #site-nav .navbar:not(.scrolled) .nav-link:hover {
                color: #fff;
                background: rgba(255, 255, 255, 0.08);
            }

            /* ─── Shared grain ───────────────────────────────────────────── */
            .grain::after {
                content: "";
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 0;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
                opacity: 0.032;
            }

            /* ─── Shared placeholder ─────────────────────────────────────── */
            .ph {
                background: #111;
                border: 1px solid rgba(255, 255, 255, 0.055);
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }
            .ph-label {
                font-size: 14px;
                letter-spacing: 2px;
                color: rgba(255, 255, 255, 0.1);
            }

            /* ─── Video assets ───────────────────────────────────────────── */
            .shot-visual video,
            .hero-frame-wrap video,
            .gi video,
            .cb-visual video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            /* ─── Shared type — ia-* classes from type.css ──────────────── */
            /* Typography handled by type.css. Layout-only overrides below. */

            /* ─── Shared buttons ─────────────────────────────────────────── */
            .btn-primary {
                height: 50px;
                padding: 0 28px;
                background: #fff;
                color: #080808;
                border: none;
                border-radius: 14px;
                font-size: 14px;
                font-weight: 600;
                letter-spacing: 0.2px;
                cursor: pointer;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                transition:
                    opacity 0.15s,
                    transform 0.15s;
                font-family: inherit;
            }
            .btn-primary:hover {
                opacity: 0.88;
                transform: translateY(-1px);
            }

            .btn-ghost {
                height: 50px;
                padding: 0 26px;
                background: transparent;
                color: rgba(255, 255, 255, 0.55);
                border: 1px solid rgba(255, 255, 255, 0.14);
                border-radius: 14px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                gap: 9px;
                transition:
                    color 0.15s,
                    border-color 0.15s;
                font-family: inherit;
            }
            .btn-ghost:hover {
                color: #fff;
                border-color: rgba(255, 255, 255, 0.32);
            }

            /* ─── Arrow icon ─────────────────────────────────────────────── */
            .arrow-icon {
                flex-shrink: 0;
            }


            /* ═══════════════════════════════════════════════════════════════
       HOW TO SECTION
    ═══════════════════════════════════════════════════════════════ */
            .howto-section {
                padding: 130px var(--px) 140px;
                position: relative;
                overflow: hidden;
            }
            /* Cinematic 4-layer ambient glow */
            @keyframes ht-bg-breathe {
                from { opacity: 1;   transform: scale(1);    }
                to   { opacity: 0.7; transform: scale(1.07) translateX(1%); }
            }
            .howto-section::before {
                content: "";
                position: absolute;
                inset: 0;
                pointer-events: none;
                background:
                    radial-gradient(ellipse 85% 72% at 0% 18%,  rgba(138, 63, 252, 0.24) 0%, transparent 50%),
                    radial-gradient(ellipse 72% 62% at 100% 86%, rgba(255, 95, 25, 0.13)  0%, transparent 50%),
                    radial-gradient(ellipse 55% 48% at 50% 58%,  rgba(80, 10, 200, 0.07)  0%, transparent 55%),
                    radial-gradient(ellipse 42% 38% at 94% 8%,   rgba(0, 200, 220, 0.05)  0%, transparent 50%);
                animation: ht-bg-breathe 18s ease-in-out infinite alternate;
                transform-origin: 5% 20%;
            }
            /* Section top edge glow line */
            .howto-section::after {
                content: "";
                position: absolute;
                top: 0; left: 0; right: 0;
                height: 1px;
                background: linear-gradient(
                    90deg,
                    transparent 5%,
                    rgba(138, 63, 252, 0.42) 26%,
                    rgba(190, 145, 255, 0.78) 50%,
                    rgba(138, 63, 252, 0.42) 74%,
                    transparent 95%
                );
                pointer-events: none;
            }
            /* ─── Header ─── */
            @keyframes ht-hd-enter {
                from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
                to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
            }
            .howto-hd {
                text-align: center;
                max-width: 580px;
                margin: 0 auto 84px;
                position: relative;
                z-index: 1;
                opacity: 0;
                transition: none;
            }
            .howto-hd.ht-hd-visible {
                animation: ht-hd-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            }
            .howto-overline-wrap {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                margin-bottom: 22px;
            }
            @keyframes ht-dot-pulse {
                0%, 100% { opacity: 0.38; transform: scale(1); }
                50%       { opacity: 1;    transform: scale(1.65); }
            }
            .howto-overline-dot {
                width: 4px; height: 4px;
                border-radius: 50%;
                background: rgba(138, 63, 252, 0.88);
                flex-shrink: 0;
                animation: ht-dot-pulse 2.8s ease-in-out infinite;
            }
            .howto-overline-dot:last-child { animation-delay: 1.4s; }
            .howto-overline-text {
                font-family: "Geist Mono", monospace;
                font-size: 10px;
                font-weight: 500;
                letter-spacing: 0.24em;
                text-transform: uppercase;
                color: rgba(255, 255, 255, 0.28);
            }
            .howto-headline {
                font-size: clamp(28px, 3vw, 40px);
                font-weight: 400;
                line-height: 1.2;
                letter-spacing: -0.025em;
                color: #f2f2f2;
                margin: 0 0 16px;
            }
            .howto-headline em {
                font-style: italic;
                font-weight: 300;
                color: rgba(195, 155, 255, 0.8);
            }
            .howto-sub {
                font-size: 13.5px;
                line-height: 1.72;
                color: rgba(255, 255, 255, 0.3);
                max-width: 400px;
                margin: 0 auto;
            }
            /* ─── Entry animation keyframes — land at resting rotation ─── */
            @keyframes ht-rise {
                from { opacity: 0; transform: perspective(900px) translateY(38px) rotateX(5deg); filter: blur(8px); }
                to   { opacity: 1; transform: rotate(var(--ht-rot, 0deg));                       filter: blur(0);   }
            }
            @keyframes ht-enter-left {
                from { opacity: 0; transform: perspective(900px) translateX(-44px) translateY(14px) rotateY(-6deg); filter: blur(8px); }
                to   { opacity: 1; transform: rotate(var(--ht-rot, 0deg));                                          filter: blur(0);   }
            }
            @keyframes ht-enter-right {
                from { opacity: 0; transform: perspective(900px) translateX(44px)  translateY(14px) rotateY(6deg);  filter: blur(8px); }
                to   { opacity: 1; transform: rotate(var(--ht-rot, 0deg));                                          filter: blur(0);   }
            }
            /* ─── Bento grid (no row spanning — clean 4-row rhythm)
                 Row 1: Card 1 (4) | Card 2 (2)          — 4+2 wide opener
                 Row 2: Card 3 (3) | Card 4 (3)          — equal halves
                 Row 3: Card 5 (2) | Card 6 (4)          — inverted 2+4
                 Row 4: Card 7 (6)                        — full-width cinematic closer
            ─── */
            .howto-grid {
                max-width: 1280px;
                margin: 0 auto;
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                gap: 18px;
                position: relative;
                z-index: 1;
                padding: 12px;
                margin-top: -12px;
            }
            .ht-card:nth-child(1) { grid-column: 1 / 5; --ht-rot: -1.5deg; }
            .ht-card:nth-child(2) { grid-column: 5 / 7; --ht-rot: 1.3deg; }
            .ht-card:nth-child(3) { grid-column: 1 / 4; --ht-rot: -2deg; }
            .ht-card:nth-child(4) { grid-column: 4 / 7; --ht-rot: 1.6deg; }
            .ht-card:nth-child(5) { grid-column: 1 / 3; --ht-rot: -1.8deg; }
            .ht-card:nth-child(6) { grid-column: 3 / 7; --ht-rot: 0.9deg; }
            .ht-card:nth-child(7) { grid-column: 1 / 7; --ht-rot: -0.5deg; }
            /* ─── Card base ─── */
            .ht-card {
                background: rgba(255, 255, 255, 0.04);
                border-radius: 20px;
                overflow: hidden;
                position: relative;
                display: flex;
                flex-direction: column;
                border: 1px solid rgba(255, 255, 255, 0.09);
                box-shadow: 0 22px 40px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.2);
                transition:
                    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    border-color 0.4s ease,
                    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
                will-change: transform;
                /* Hidden until JS triggers .ht-visible */
                opacity: 0;
            }
            /* Subtle inner top-edge catch light */
            .ht-card::before {
                content: "";
                position: absolute;
                top: 0; left: 12%; right: 12%;
                height: 1px;
                background: linear-gradient(90deg, transparent, rgba(138, 63, 252, 0.6), transparent);
                z-index: 2;
                pointer-events: none;
            }
            /* Cursor spotlight overlay */
            .ht-card::after {
                content: "";
                position: absolute;
                inset: 0;
                background: radial-gradient(260px circle at var(--mx, -300px) var(--my, -300px), rgba(138, 63, 252, 0.11), transparent 60%);
                pointer-events: none;
                z-index: 1;
                opacity: 0;
                transition: opacity 0.4s ease;
                border-radius: 16px;
            }
            .ht-card:hover::after { opacity: 1; }
            /* Hover: straighten + float + depth shadow (tasteskill signature) */
            .ht-card:hover {
                transform: rotate(0deg) scale(1.04) translateY(-10px) !important;
                z-index: 4;
                border-color: rgba(255, 255, 255, 0.15);
                box-shadow:
                    0 46px 70px rgba(0, 0, 0, 0.48),
                    0 16px 32px rgba(0, 0, 0, 0.28),
                    0 0 0 1px rgba(138, 63, 252, 0.12);
            }
            /* Scroll-reveal: default rise animation */
            .ht-card.ht-visible {
                animation: ht-rise 0.88s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            }
            /* Directional entry — left-anchored cards slide from left, right-anchored from right */
            .ht-card:nth-child(1).ht-visible {
                animation: ht-enter-left 0.96s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            }
            .ht-card:nth-child(2).ht-visible,
            .ht-card:nth-child(4).ht-visible,
            .ht-card:nth-child(6).ht-visible {
                animation: ht-enter-right 0.96s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            }
            /* Cards 3, 5, 7 use default ht-rise */
            /* ─── Media ─── */
            .ht-media {
                aspect-ratio: 16 / 9;
                overflow: hidden;
                position: relative;
                flex-shrink: 0;
                background: rgba(255, 255, 255, 0.04);
            }
            /* Focus-pull: starts zoomed, relaxes to natural on reveal */
            .ht-media img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transform: scale(1.07);
                transition:
                    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1),
                    filter 0.5s ease;
                will-change: transform;
            }
            .ht-card.ht-visible .ht-media img {
                transform: scale(1.0);
            }
            .ht-card:hover .ht-media img {
                transform: scale(1.04);
                filter: brightness(1.09);
            }
            /* Bottom gradient scrim */
            .ht-media::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(to bottom, transparent 28%, rgba(0, 0, 0, 0.6) 100%);
                pointer-events: none;
                z-index: 1;
            }
            /* Step number on image */
            .ht-step {
                position: absolute;
                bottom: 12px;
                left: 14px;
                z-index: 2;
                font-family: "Geist Mono", monospace;
                font-size: 10px;
                font-weight: 600;
                letter-spacing: 0.18em;
                color: rgba(255, 255, 255, 0.38);
                transition: color 0.4s ease;
                pointer-events: none;
            }
            .ht-card:hover .ht-step { color: rgba(168, 120, 255, 0.95); }
            /* ─── Card body — reveals with a short delay after card ─── */
            .ht-body {
                padding: 16px 18px 20px;
                display: flex;
                flex-direction: column;
                gap: 7px;
                opacity: 0;
                transform: translateY(10px);
                transition: opacity 0.65s ease, transform 0.65s ease;
            }
            .ht-card.ht-visible .ht-body {
                opacity: 1;
                transform: translateY(0);
                transition-delay: 0.22s;
            }
            /* Card 7: full-width cinematic closer — ultra-wide aspect */
            .ht-card:nth-child(7) .ht-media { aspect-ratio: 21 / 9; }
            /* Large-card text: bigger, more presence */
            .ht-card:nth-child(1) .ht-title,
            .ht-card:nth-child(4) .ht-title,
            .ht-card:nth-child(6) .ht-title,
            .ht-card:nth-child(7) .ht-title { font-size: 16px; }
            .ht-card:nth-child(1) .ht-desc,
            .ht-card:nth-child(4) .ht-desc,
            .ht-card:nth-child(6) .ht-desc,
            .ht-card:nth-child(7) .ht-desc  { font-size: 13px; }
            .ht-title {
                font-size: 13.5px;
                font-weight: 600;
                color: rgba(255, 255, 255, 0.88);
                line-height: 1.3;
                letter-spacing: -0.01em;
            }
            .ht-desc {
                font-size: 12px;
                line-height: 1.75;
                color: rgba(255, 255, 255, 0.3);
                font-weight: 400;
            }
            /* ─── CTA ─── */
            .howto-cta {
                text-align: center;
                margin-top: 72px;
                position: relative;
                z-index: 1;
            }
            /* ─── Responsive ─── */
            @media (max-width: 980px) {
                .howto-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
                .ht-card:nth-child(1),
                .ht-card:nth-child(2),
                .ht-card:nth-child(3),
                .ht-card:nth-child(4),
                .ht-card:nth-child(5),
                .ht-card:nth-child(6),
                .ht-card:nth-child(7) { grid-column: span 1; }
                .ht-card:nth-child(1),
                .ht-card:nth-child(7) { grid-column: span 2; }
                .ht-card:nth-child(7) .ht-media { aspect-ratio: 16 / 9; }
            }
            @media (max-width: 560px) {
                .howto-grid { grid-template-columns: 1fr; gap: 12px; }
                .ht-card:nth-child(n) { grid-column: 1; }
                .ht-card:nth-child(7) .ht-media { aspect-ratio: 16 / 9; }
                .howto-section { padding: 80px var(--px) 80px; }
            }
            @media (prefers-reduced-motion: reduce) {
                .howto-section::before { animation: none !important; }
                .howto-overline-dot { animation: none !important; }
                .howto-hd, .howto-hd.ht-hd-visible { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
                .ht-card, .ht-card.ht-visible { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; will-change: auto; }
                .ht-card:hover { transform: none !important; }
                .ht-body, .ht-card.ht-visible .ht-body { opacity: 1 !important; transform: none !important; transition: none !important; }
                .ht-media img, .ht-card.ht-visible .ht-media img { transform: none !important; filter: none !important; }
            }

            /* ═══════════════════════════════════════════════════════════════
       PRELOADER
    ═══════════════════════════════════════════════════════════════ */
            .preloader {
                position: fixed;
                inset: 0;
                z-index: 1000;
                background: var(--dark);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                gap: 28px;
                transition:
                    opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.9s;
            }
            .preloader.done {
                opacity: 0;
                visibility: hidden;
            }
            /* Spinner ring with the percentage centered inside it.
       Vanilla port of the 21st.dev ClassicLoader pattern:
       border on all sides + transparent top edge, animated with rotate. */
            .preloader-ring {
                position: relative;
                width: 96px;
                height: 96px;
                border-radius: 9999px;
                border: 3px solid rgba(255, 255, 255, 0.12);
                border-top-color: rgba(255, 255, 255, 0.85);
                animation: preloaderSpin 1.05s linear infinite;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            /* The count needs to NOT spin, so it's a sibling absolutely
       positioned at the same center, not a child of the ring. */
            .preloader-stack {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            .preloader-count {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: "Satoshi", sans-serif;
                font-size: 18px;
                font-weight: 500;
                letter-spacing: 0.01em;
                color: rgba(255, 255, 255, 0.92);
                font-variant-numeric: tabular-nums;
            }
            .preloader-label {
                font-family: "Satoshi", sans-serif;
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 0.32em;
                text-transform: uppercase;
                color: rgba(255, 255, 255, 0.55);
            }
            @keyframes preloaderSpin {
                to {
                    transform: rotate(360deg);
                }
            }
            @media (prefers-reduced-motion: reduce) {
                .preloader-ring {
                    animation: none;
                    border-top-color: rgba(255, 255, 255, 0.5);
                }
            }

            /* ═══════════════════════════════════════════════════════════════
       STUDIO HERO — Artlist-style intro
       Tokens from Imagine Design System (purple palette: 60=#8a3ffc, etc.)
       Type: Satoshi · Buttons: design-system pill (lg)
    ═══════════════════════════════════════════════════════════════ */
            .studio-hero {
                --sh-font:
                    "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    sans-serif;
                min-height: 100vh;
                padding: 140px var(--px) 100px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 56px;
                position: relative;
                overflow: hidden;
                font-family: var(--sh-font);
            }

            /* ── Gradient background (Artlist-style warm spotlight + brand purple wash) */
            .sh-bokeh {
                position: absolute;
                inset: 0;
                z-index: 0;
                pointer-events: none;
                overflow: hidden;
            }
            /* Warm orange spotlight from top-right + purple bloom from top-left */
            .sh-bokeh::before {
                content: "";
                position: absolute;
                inset: 0;
                background:
                    radial-gradient(
                        ellipse 50% 40% at 78% 8%,
                        rgba(255, 138, 76, 0.3) 0%,
                        transparent 55%
                    ),
                    radial-gradient(
                        ellipse 45% 35% at 22% 12%,
                        rgba(165, 110, 255, 0.22) 0%,
                        transparent 60%
                    ),
                    radial-gradient(
                        ellipse 70% 30% at 50% 0%,
                        rgba(255, 200, 160, 0.1) 0%,
                        transparent 70%
                    );
            }
            /* Subtle dot grid + bottom fade-to-black */
            .sh-bokeh::after {
                content: "";
                position: absolute;
                inset: 0;
                background-image: radial-gradient(
                    circle,
                    rgba(255, 255, 255, 0.04) 1px,
                    transparent 1px
                );
                background-size: 32px 32px;
                mask-image: radial-gradient(
                    ellipse 90% 70% at 50% 30%,
                    black 0%,
                    transparent 80%
                );
                -webkit-mask-image: radial-gradient(
                    ellipse 90% 70% at 50% 30%,
                    black 0%,
                    transparent 80%
                );
            }
            .studio-hero::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 240px;
                background: linear-gradient(
                    to bottom,
                    transparent,
                    #080808 90%
                );
                z-index: 0;
                pointer-events: none;
            }
            .studio-hero::before {
                display: none;
            }

            /* ── Top stack ── */
            .sh-top {
                text-align: center;
                position: relative;
                z-index: 1;
                max-width: 920px;
            }

            /* FILM STUDIO wordmark */
            .sh-brand {
                display: inline-flex;
                justify-content: center;
                margin: 0 0 44px;
            }
            .sh-brand img {
                display: block;
                height: 64px;
                width: auto;
                opacity: 0.96;
            }

            /* Headline — Satoshi medium */
            .sh-headline {
                font-family: var(--sh-font);
                font-weight: 500;
                font-size: clamp(42px, 6.4vw, 80px);
                line-height: 1.25;
                letter-spacing: -0.025em;
                color: #fafafa;
                margin: 0 auto 28px;
                max-width: 920px;
            }
            .sh-headline-soft {
                color: rgba(250, 250, 250, 0.5);
                font-weight: 400;
            }
            .sh-headline-soft em {
                font-style: italic;
                font-weight: 400;
            }
            /* "Imagination" text shimmer — vanilla CSS port of the 21st.dev
       TextShimmer component (https://21st.dev/community/components/ibelick/text-shimmer).
       Two layered backgrounds clipped to text: a moving white spotlight
       on top of a solid base-color fill. Linear, infinite, 2s default. */
            .sh-shimmer {
                --base-color: #d4d4d8; /* zinc-300 — lighter than the prior #71717a */
                --base-gradient-color: #ffffff;
                /* spread ≈ 2px × character count of "Imagination" (11 chars) */
                --spread: 22px;
                --shimmer-duration: 2s;

                position: relative;
                display: inline-block;
                font-style: italic;
                /* Italic glyphs lean right — extend the right side of the clip box
         so the "N" in "Imagination" isn't sliced off. */
                padding-right: 0.16em;
                margin-right: -0.04em;
                background-image:
                    linear-gradient(
                        90deg,
                        transparent calc(50% - var(--spread)),
                        var(--base-gradient-color),
                        transparent calc(50% + var(--spread))
                    ),
                    linear-gradient(var(--base-color), var(--base-color));
                background-size:
                    250% 100%,
                    auto;
                background-repeat: no-repeat, padding-box;
                background-clip: text, padding-box;
                -webkit-background-clip: text;
                color: transparent;
                -webkit-text-fill-color: transparent;
                animation: shTextShimmer var(--shimmer-duration) linear infinite;
            }
            @keyframes shTextShimmer {
                from {
                    background-position:
                        100% center,
                        0 0;
                }
                to {
                    background-position:
                        0% center,
                        0 0;
                }
            }
            @media (prefers-reduced-motion: reduce) {
                .sh-shimmer {
                    animation: none;
                    background: none;
                    -webkit-text-fill-color: currentColor;
                    color: inherit;
                }
            }

            /* Sub */
            .sh-sub {
                font-family: var(--sh-font);
                font-weight: 400;
                font-size: 18px;
                line-height: 1.55;
                letter-spacing: 0.16px;
                color: rgba(250, 250, 250, 0.6);
                max-width: 540px;
                margin: 0 auto 40px;
            }

            /* CTAs (Imagine Design System · button · lg pill) */
            .sh-actions {
                display: flex;
                align-items: center;
                gap: 12px;
                justify-content: center;
            }
            .ids-btn {
                --ids-h: 48px;
                --ids-px: 24px;
                --ids-fs: 15px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                height: var(--ids-h);
                padding: 0 var(--ids-px);
                border-radius: 9999px;
                font-family: var(--sh-font);
                font-size: var(--ids-fs);
                font-weight: 600;
                letter-spacing: 0.1px;
                text-decoration: none;
                cursor: pointer;
                border: 1px solid transparent;
                transition:
                    background 0.18s ease,
                    color 0.18s ease,
                    border-color 0.18s ease,
                    transform 0.18s ease,
                    box-shadow 0.25s ease;
                white-space: nowrap;
                user-select: none;
            }
            .ids-btn:focus-visible {
                outline: 2px solid #a56eff;
                outline-offset: 2px;
            }
            /* Variant: primary (white on dark theme = white bg / #161616 text) */
            .ids-btn-primary {
                background: #ffffff;
                color: #161616;
                border-color: #ffffff;
            }
            .ids-btn-primary:hover {
                background: #f4f4f4;
                transform: translateY(-1px);
                box-shadow: 0 8px 28px rgba(255, 255, 255, 0.55);
            }
            .ids-btn-primary:active {
                background: #eaeaea;
                transform: translateY(0);
            }
            /* Variant: secondary (subtle glass) */
            .ids-btn-secondary {
                background: rgba(255, 255, 255, 0.06);
                color: #fafafa;
                border-color: rgba(255, 255, 255, 0.55);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }
            .ids-btn-secondary:hover {
                background: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.32);
            }
            .ids-btn-secondary:active {
                background: rgba(255, 255, 255, 0.14);
            }

            /* ── UI mockup ── */
            .sh-ui {
                position: relative;
                z-index: 1;
                width: 100%;
                max-width: 1240px;
                margin-top: 16px;
                border-radius: 18px;
                overflow: hidden;
                box-shadow:
                    0 1px 0 rgba(255, 255, 255, 0.06),
                    0 30px 80px -20px rgba(0, 0, 0, 0.65),
                    0 60px 140px -40px rgba(138, 63, 252, 0.18);
                background: #0c0c0c;
                border: 1px solid rgba(255, 255, 255, 0.06);
            }
            .sh-ui-img {
                display: block;
                width: 100%;
                height: auto;
            }
            /* Video region — exact coords from Figma node 36:48687 (layout-final).
       Frame "asset - batch of 6" inside "director view": (384, 116) 1032×622.76
       in a 1440×1024 layout = 26.67% / 11.33% / 71.67% / 60.82%.
       Rounded to match the image's video-placeholder corners. */
            .sh-ui-video {
                position: absolute;
                top: 11.33%;
                left: 26.67%;
                width: 71.67%;
                height: 60.82%;
                object-fit: cover;
                background: #000;
                pointer-events: none;
                border-radius: 12px;
            }
            @media (max-width: 760px) {
                .studio-hero {
                    padding: 110px var(--px) 70px;
                    gap: 40px;
                }
                .sh-brand img {
                    height: 48px;
                }
                .sh-headline {
                    font-size: 38px;
                }
                .sh-actions {
                    flex-direction: column;
                    width: 100%;
                }
                .ids-btn {
                    width: 100%;
                }
                .sh-ui-play-btn {
                    width: 56px;
                    height: 56px;
                }
            }

            /* ═══════════════════════════════════════════════════════════════
       FAQ — two-column accordion (sticky title + collapsible list)
    ═══════════════════════════════════════════════════════════════ */
            .faq-section {
                padding: 96px var(--px);
                background: var(--dark);
                border-top: 1px solid rgba(255, 255, 255, 0.05);
            }
            .faq-container {
                max-width: 1080px;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                gap: 56px;
                align-items: flex-start;
            }
            .faq-heading {
                flex: 0 0 280px;
                position: sticky;
                top: 100px;
                display: flex;
                flex-direction: column;
                gap: 18px;
            }
            .faq-heading h2 {
                font-family: "Satoshi", sans-serif;
                font-size: 40px;
                font-weight: 600;
                line-height: 48px;
                letter-spacing: -0.01em;
                color: #fff;
                margin: 0;
            }
            .faq-heading h2 .faq-accent {
                color: rgba(255, 255, 255, 0.5);
            }
            .faq-heading p {
                font-family: "Geist", sans-serif;
                font-size: 16px;
                line-height: 24px;
                letter-spacing: 0.16px;
                color: #bdbdbd;
                max-width: 278px;
                margin: 0;
            }
            .faq-list {
                flex: 1 1 520px;
                max-width: 620px;
                display: flex;
                flex-direction: column;
            }
            .faq-item {
                padding: 24px 16px;
                border-top: 1px solid #2e2e2e;
            }
            .faq-item:first-child {
                border-top: none;
            }
            .faq-trigger {
                display: flex;
                align-items: center;
                gap: 8px;
                width: 100%;
                padding: 0;
                background: none;
                border: none;
                text-align: left;
                cursor: pointer;
                color: inherit;
                font-family: inherit;
            }
            .faq-question {
                flex: 1;
                font-family: "Geist", sans-serif;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: 0.16px;
                color: rgba(255, 255, 255, 0.5);
                margin: 0;
                transition: color 0.2s ease;
            }
            .faq-item.open .faq-question {
                color: #d4bbff;
                font-weight: 500;
            }
            .faq-toggle {
                flex-shrink: 0;
                width: 28px;
                height: 28px;
                border-radius: 9999px;
                background: #212121;
                border: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                cursor: pointer;
                transition: background 0.2s ease;
            }
            .faq-trigger:hover .faq-toggle {
                background: #2c2c2c;
            }
            .faq-toggle svg {
                width: 16px;
                height: 16px;
                display: block;
            }
            .faq-toggle .faq-icon-minus {
                display: none;
            }
            .faq-item.open .faq-toggle .faq-icon-plus {
                display: none;
            }
            .faq-item.open .faq-toggle .faq-icon-minus {
                display: block;
            }
            .faq-answer {
                overflow: hidden;
                max-height: 0;
                opacity: 0;
                transition:
                    max-height 0.35s ease,
                    opacity 0.25s ease,
                    margin-top 0.25s ease;
            }
            .faq-item.open .faq-answer {
                max-height: 600px;
                opacity: 1;
                margin-top: 12px;
            }
            .faq-answer p {
                font-family: "Geist", sans-serif;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                letter-spacing: 0.16px;
                color: #fff;
                margin: 0;
            }
            @media (max-width: 860px) {
                .faq-section {
                    padding: 72px var(--px);
                }
                .faq-container {
                    gap: 40px;
                }
                .faq-heading {
                    position: static;
                    flex: 1 1 100%;
                }
                .faq-heading h2 {
                    font-size: 32px;
                    line-height: 40px;
                }
                .faq-list {
                    flex: 1 1 100%;
                    max-width: none;
                }
            }

            /* ═══════════════════════════════════════════════════════════════
       HERO — mosaic → full-screen → scroll navigation
    ═══════════════════════════════════════════════════════════════ */
            .showcase {
                position: relative;
                width: 100%;
                height: 100vh;
                overflow: hidden;
                background: var(--dark);
            }

            /* ── Individual panel (absolutely positioned by JS) ────────── */
            .hero-panel {
                position: absolute;
                overflow: hidden;
                background: #1a1a1a;
                opacity: 0;
                will-change: top, left, width, height;
            }

            /* Panel image fallback background */
            .hero-panel {
                background: #111;
            }

            .hero-panel > video,
            .hero-panel > img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            /* Dim overlay — fades away on active */
            .panel-dim {
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.65);
                transition: background 1s ease;
                pointer-events: none;
                z-index: 1;
            }
            .hero-panel.active .panel-dim {
                background: rgba(0, 0, 0, 0);
            }

            /* Vignette — appears on active */
            .panel-vignette {
                position: absolute;
                inset: 0;
                background: radial-gradient(
                    ellipse 90% 100% at 50% 50%,
                    transparent 30%,
                    rgba(0, 0, 0, 0.48) 100%
                );
                opacity: 0;
                transition: opacity 1s ease;
                pointer-events: none;
                z-index: 2;
            }
            .hero-panel.active .panel-vignette {
                opacity: 1;
            }
            .panel-vignette::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 200px;
                background: linear-gradient(
                    to top,
                    rgba(0, 0, 0, 0.55),
                    transparent
                );
            }

            /* Thumb hover ring */
            .hero-panel.thumb::after {
                content: "";
                position: absolute;
                inset: 0;
                border: 1px solid rgba(255, 255, 255, 0);
                transition: border-color 0.2s;
                z-index: 4;
                pointer-events: none;
            }
            .hero-panel.thumb:hover::after {
                border-color: rgba(255, 255, 255, 0.78);
            }

            /* ── Fixed center + icon (row mode only) ──────────────────── */
            .row-plus {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 30;
                pointer-events: none;
                color: rgba(255, 255, 255, 0.8);
                opacity: 0;
                transition: opacity 0.5s ease;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 12px;
            }
            .row-plus-hint {
                font-family: "Satoshi", "Geist", sans-serif;
                font-size: 14px;
                font-weight: 500;
                letter-spacing: 0.1px;
                color: rgba(255, 255, 255, 0.78);
                text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
                white-space: nowrap;
            }
            .showcase.is-row-mode .row-plus {
                opacity: 1;
            }

            /* ── Row / gallery mode ────────────────────────────────────── */
            /* Remove dim on all panels when in row mode */
            .showcase.is-row-mode .panel-dim {
                background: rgba(0, 0, 0, 0) !important;
            }
            /* Clickable panels in row mode */
            .showcase.is-row-mode {
                cursor: grab;
            }
            .showcase.is-row-mode.is-dragging,
            .showcase.is-row-mode.is-dragging .hero-panel {
                cursor: grabbing;
                user-select: none;
            }
            .showcase.is-row-mode .hero-panel {
                cursor: pointer;
            }
            .showcase.is-row-mode .hero-panel img,
            .showcase.is-row-mode .hero-panel video {
                pointer-events: none;
                -webkit-user-drag: none;
                user-select: none;
            }
            /* Subtle hover darkening in row mode */
            .showcase.is-row-mode .hero-panel:hover .panel-dim {
                background: rgba(0, 0, 0, 0.18) !important;
            }

            /* ── UI overlay ────────────────────────────────────────────── */
            .hero-center {
                position: absolute;
                inset: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                z-index: 20;
                pointer-events: none;
                gap: 14px;
            }

            .hero-title-clip {
                overflow: hidden;
            }
            .hero-title {
                font-size: clamp(32px, 3.8vw, 58px);
                font-weight: 700;
                letter-spacing: -1.5px;
                color: #fff;
                text-align: center;
                transform: translateY(110%);
                transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
                will-change: transform;
            }
            .hero-title.in {
                transform: translateY(0);
            }

            .hero-shot-tag {
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 2px;
                color: rgba(255, 255, 255, 0.72);
                opacity: 0;
                transition: opacity 0.8s ease 0.4s;
            }
            .hero-shot-tag.in {
                opacity: 1;
            }

            /* ── Parameter chips ───────────────────────────────────────── */
            .hero-chips {
                display: flex;
                gap: 8px;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.8s ease 0.6s;
                pointer-events: none;
            }
            .hero-chips.in {
                opacity: 1;
            }
            .hero-chip {
                height: 26px;
                padding: 0 12px;
                border: 1px solid rgba(255, 255, 255, 0.14);
                border-radius: 100px;
                font-size: 14px;
                font-weight: 600;
                letter-spacing: 0.6px;
                color: rgba(255, 255, 255, 0.5);
                background: rgba(255, 255, 255, 0.06);
                backdrop-filter: blur(8px);
                display: inline-flex;
                align-items: center;
                white-space: nowrap;
            }

            /* ── + Nav buttons ─────────────────────────────────────────── */
            .hero-arrow {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 20;
                background: none;
                border: none;
                cursor: pointer;
                width: 44px;
                height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: rgba(255, 255, 255, 0.78);
                opacity: 0;
                transition:
                    opacity 0.6s ease,
                    color 0.25s;
            }
            .hero-arrow.in {
                opacity: 1;
            }
            .hero-arrow:hover {
                color: #fff;
            }
            .hero-prev {
                left: 18vw;
            }
            .hero-next {
                right: 18vw;
            }

            /* ── Counter + scrubber strip ──────────────────────────────── */
            .hero-bottom {
                position: absolute;
                bottom: 36px;
                left: 0;
                right: 0;
                z-index: 20;
                pointer-events: none;
                opacity: 0;
                transition: opacity 0.6s ease;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 14px;
            }
            .hero-scrubber {
                pointer-events: auto;
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 6px 10px;
                background: rgba(8, 8, 8, 0.55);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 9999px;
            }
            /* Click target is the whole 32×24 button; the visible bar is the ::before */
            .hero-tick {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 24px;
                background: transparent;
                border: 0;
                padding: 0;
                cursor: pointer;
                pointer-events: auto;
            }
            .hero-tick::before {
                content: "";
                display: block;
                width: 22px;
                height: 4px;
                border-radius: 9999px;
                background: rgba(255, 255, 255, 0.32);
                transition:
                    background 0.18s,
                    width 0.25s;
            }
            .hero-tick:hover::before {
                background: rgba(255, 255, 255, 0.6);
            }
            .hero-tick.active::before {
                background: #ffffff;
                width: 28px;
            }
            .hero-tick:focus-visible {
                outline: 2px solid #a56eff;
                outline-offset: 2px;
                border-radius: 9999px;
            }
            .hero-counter {
                cursor: pointer;
                pointer-events: auto;
                user-select: none;
            }
            .hero-counter:hover {
                color: #ffffff;
            }
            .hero-bottom.in {
                opacity: 1;
            }
            .hero-counter {
                font-family: "Satoshi", "Geist", sans-serif;
                font-size: 14px;
                font-weight: 500;
                letter-spacing: 0.2px;
                color: rgba(255, 255, 255, 0.78);
                white-space: nowrap;
                font-variant-numeric: tabular-nums;
            }

            /* ═══════════════════════════════════════════════════════════════
       CAMERA ARSENAL
    ═══════════════════════════════════════════════════════════════ */
            .arsenal-section {
                padding: 120px 0 0;
            }

            .arsenal-header {
                padding: 0 var(--px) 64px;
            }
            .arsenal-headline {
                margin: 0 0 20px;
                font-family: "Satoshi", sans-serif !important;
                font-size: clamp(40px, 5.6vw, 72px) !important;
                font-weight: 500 !important;
                letter-spacing: -0.025em !important;
                line-height: 1.04 !important;
                max-width: 760px;
            }
            .arsenal-headline em {
                font-style: italic !important;
                font-weight: 400 !important;
                color: rgba(250, 250, 250, 0.55) !important;
            }
            /* Apply same Satoshi treatment to all section display headlines */
            .section-headline {
                font-family: "Satoshi", sans-serif !important;
                font-weight: 500 !important;
                letter-spacing: -0.025em !important;
                line-height: 1.04 !important;
            }
            .section-headline em {
                font-style: italic !important;
                font-weight: 400 !important;
                color: rgba(250, 250, 250, 0.55) !important;
            }
            .arsenal-sub {
                max-width: 480px;
            }

            /* ── Bento grid — IA 2.0 highlights pattern ─────────────────── */
            .arsenal-bento {
                display: grid;
                grid-template-columns: repeat(12, 1fr);
                grid-template-rows: 310px 310px 270px;
                gap: 3px;
            }
            /* Position each card */
            .ab-arri {
                grid-column: 1 / 8;
                grid-row: 1 / 3;
            } /* hero — tall left  */
            .ab-red {
                grid-column: 8 / 13;
                grid-row: 1;
            } /* top right         */
            .ab-sony {
                grid-column: 8 / 13;
                grid-row: 2;
            } /* mid right         */
            .ab-zeiss {
                grid-column: 1 / 5;
                grid-row: 3;
            } /* bottom-left       */
            .ab-cooke {
                grid-column: 5 / 9;
                grid-row: 3;
            } /* bottom-mid        */
            .ab-leica {
                grid-column: 9 / 13;
                grid-row: 3;
            } /* bottom-right      */

            .ac {
                position: relative;
                overflow: hidden;
                background: #111;
            }
            .ac img,
            .ac video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }
            .ac:hover img,
            .ac:hover video {
                transform: scale(1.04);
            }

            /* Gradient scrim — heavier at bottom, lighter toward top */
            .ac-scrim {
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    to top,
                    rgba(0, 0, 0, 0.92) 0%,
                    rgba(0, 0, 0, 0.45) 40%,
                    rgba(0, 0, 0, 0.08) 100%
                );
                pointer-events: none;
            }

            /* Number badge — top left */
            .ac-num {
                position: absolute;
                top: 22px;
                left: 26px;
                font-family: "Geist", sans-serif;
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 0.18em;
                color: rgba(255, 255, 255, 0.7);
                z-index: 3;
            }

            /* Category badge — top right */
            .ac-badge {
                position: absolute;
                top: 20px;
                right: 20px;
                height: 22px;
                padding: 0 10px;
                border: 1px solid rgba(255, 255, 255, 0.12);
                border-radius: 100px;
                font-family: "Geist", sans-serif;
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: rgba(255, 255, 255, 0.72);
                display: inline-flex;
                align-items: center;
                background: rgba(0, 0, 0, 0.35);
                backdrop-filter: blur(8px);
                z-index: 3;
            }

            /* Body text — pinned to bottom */
            .ac-body {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 26px 28px 28px;
                z-index: 2;
            }
            /* Card "maker" label — Geist UPPERCASE, regular weight */
            .ac-maker {
                font-family: "Geist", sans-serif;
                font-size: 12px;
                font-weight: 400;
                letter-spacing: 0.18em;
                text-transform: uppercase;
                color: rgba(255, 255, 255, 0.72);
                margin-bottom: 8px;
            }
            /* Card name (e.g. "Cameras") — Satoshi medium */
            .ac-name {
                font-family: "Satoshi", sans-serif;
                font-size: clamp(20px, 1.7vw, 28px);
                font-weight: 500;
                letter-spacing: -0.02em;
                color: #fff;
                line-height: 1.1;
                margin-bottom: 14px;
            }
            /* Hero card gets larger name */
            .ab-arri .ac-name {
                font-size: clamp(28px, 2.4vw, 40px);
                letter-spacing: -0.025em;
                margin-bottom: 18px;
            }

            .ac-specs {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
            }
            .ac-specs span {
                height: 22px;
                padding: 0 9px;
                border: 1px solid rgba(255, 255, 255, 0.16);
                border-radius: 100px;
                font-family: "Geist", sans-serif;
                font-size: 12px;
                font-weight: 500;
                color: rgba(255, 255, 255, 0.65);
                display: inline-flex;
                align-items: center;
                backdrop-filter: blur(4px);
                background: rgba(255, 255, 255, 0.04);
            }

            /* Footer brand strip */
            .arsenal-footer {
                padding: 24px var(--px);
                border-top: 1px solid rgba(255, 255, 255, 0.04);
                margin-top: 3px;
            }
            .arsenal-footer p {
                font-size: 14px;
                letter-spacing: 1.8px;
                color: rgba(255, 255, 255, 0.14);
                line-height: 1.8;
            }

            @media (max-width: 1024px) {
                .arsenal-bento {
                    grid-template-columns: 1fr 1fr;
                    grid-template-rows: auto;
                }
                .ab-arri {
                    grid-column: 1 / 3;
                    grid-row: auto;
                    height: 320px;
                }
                .ab-red {
                    grid-column: 1;
                    grid-row: auto;
                    height: 260px;
                }
                .ab-sony {
                    grid-column: 2;
                    grid-row: auto;
                    height: 260px;
                }
                .ab-zeiss,
                .ab-cooke,
                .ab-leica {
                    grid-column: auto;
                    grid-row: auto;
                    height: 240px;
                }
            }
            @media (max-width: 768px) {
                .arsenal-bento {
                    grid-template-columns: 1fr;
                }
                .ab-arri,
                .ab-red,
                .ab-sony {
                    grid-column: 1;
                    height: 280px;
                }
                .ab-zeiss,
                .ab-cooke,
                .ab-leica {
                    grid-column: 1;
                    height: 240px;
                }
            }

            /* ═══════════════════════════════════════════════════════════════
       STATEMENT
    ═══════════════════════════════════════════════════════════════ */
            .film-statement {
                padding: 160px var(--px);
                border-top: 1px solid rgba(255, 255, 255, 0.05);
                position: relative;
                overflow: hidden;
            }

            .statement-inner {
                max-width: 860px;
                position: relative;
                z-index: 1;
            }

            .statement-headline {
                margin: 28px 0 32px;
            }
            .statement-sub {
                max-width: 480px;
                margin-bottom: 48px;
            }

            /* ═══════════════════════════════════════════════════════════════
       SIX SHOT TYPES — full-bleed cinematic frames
    ═══════════════════════════════════════════════════════════════ */
            .shot-types-section {
                border-top: 1px solid rgba(255, 255, 255, 0.05);
            }

            .section-header {
                padding: 100px var(--px) 80px;
            }
            .section-headline {
                margin: 24px 0 18px;
            }
            .section-sub {
                max-width: 480px;
            }

            /* Each shot is a full-bleed cinematic frame */
            .shot-row {
                position: relative;
                height: 85vh;
                min-height: 560px;
                overflow: hidden;
                border-top: 1px solid rgba(255, 255, 255, 0.05);
                display: block;
            }

            /* Full-bleed video */
            .shot-video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            /* Directional gradient — text side stays legible, video breathes on the other */
            .shot-overlay {
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 1;
                background: linear-gradient(
                    100deg,
                    rgba(8, 8, 8, 0.94) 0%,
                    rgba(8, 8, 8, 0.65) 28%,
                    rgba(8, 8, 8, 0.2) 55%,
                    transparent 100%
                );
            }
            .shot-row.rev .shot-overlay {
                background: linear-gradient(
                    -100deg,
                    rgba(8, 8, 8, 0.94) 0%,
                    rgba(8, 8, 8, 0.65) 28%,
                    rgba(8, 8, 8, 0.2) 55%,
                    transparent 100%
                );
            }

            /* Slate label — top-left: "01 — CHARACTER ACTION" */
            .shot-slate {
                position: absolute;
                top: 44px;
                left: var(--px);
                z-index: 3;
                display: flex;
                align-items: center;
                gap: 12px;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 2.5px;
                color: rgba(255, 255, 255, 0.65);
                pointer-events: none;
            }
            .shot-row.rev .shot-slate {
                left: auto;
                right: var(--px);
            }
            .shot-slate-num {
                color: rgba(255, 255, 255, 0.14);
            }

            /* Explore link — top opposite corner */
            .shot-explore {
                position: absolute;
                top: 40px;
                right: var(--px);
                z-index: 3;
                display: inline-flex;
                align-items: center;
                gap: 7px;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 1px;
                color: rgba(255, 255, 255, 0.65);
                text-decoration: none;
                transition: color 0.2s;
            }
            .shot-row.rev .shot-explore {
                right: auto;
                left: var(--px);
            }
            .shot-explore:hover {
                color: rgba(255, 255, 255, 0.75);
            }
            .shot-explore svg {
                transition: transform 0.2s;
            }
            .shot-explore:hover svg {
                transform: translateX(3px);
            }

            /* Ghost number — massive background decoration */
            .shot-num {
                position: absolute;
                bottom: -0.08em;
                right: 0.3vw;
                font-size: clamp(160px, 20vw, 280px);
                font-weight: 700;
                font-style: italic;
                color: rgba(255, 255, 255, 0.032);
                line-height: 1;
                pointer-events: none;
                user-select: none;
                z-index: 1;
            }
            .shot-row.rev .shot-num {
                right: auto;
                left: 0.3vw;
            }

            /* Text — pinned to lower third, film title card style */
            .shot-text {
                position: absolute;
                bottom: 60px;
                left: var(--px);
                z-index: 2;
                max-width: 540px;
            }
            .shot-row.rev .shot-text {
                left: auto;
                right: var(--px);
            }

            .shot-name {
                margin-bottom: 14px;
            }
            .shot-desc {
                margin-bottom: 22px;
            }

            /* Camera params — editorial dot-separated, no pills */
            .shot-params {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                font-size: 14px;
                font-weight: 600;
                letter-spacing: 0.6px;
                color: rgba(255, 255, 255, 0.7);
            }
            .shot-params span {
                white-space: nowrap;
            }
            .shot-params span + span::before {
                content: "·";
                margin: 0 9px;
                color: rgba(255, 255, 255, 0.15);
            }

            /* ═══════════════════════════════════════════════════════════════
       MID-PAGE CTA STRIP
    ═══════════════════════════════════════════════════════════════ */
            .mid-cta {
                padding: 72px var(--px);
                border-top: 1px solid rgba(255, 255, 255, 0.05);
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 40px;
            }
            .mid-cta-text {
                font-size: 15px;
                font-weight: 500;
                color: rgba(255, 255, 255, 0.78);
                max-width: 480px;
                line-height: 1.6;
            }
            .mid-cta-text strong {
                color: #fff;
                font-weight: 600;
            }

            /* ═══════════════════════════════════════════════════════════════
       STATS
    ═══════════════════════════════════════════════════════════════ */
            .stats-section {
                padding: 140px var(--px); /* matches the outputs section below */
            }
            /* Section eyebrow — Geist UPPERCASE (matches every other section's eyebrow) */
            .stats-eyebrow {
                font-family: "Geist", sans-serif;
                font-size: 14px;
                font-weight: 400;
                letter-spacing: 0.16em;
                text-transform: uppercase;
                color: rgba(255, 255, 255, 0.62);
                margin-bottom: 16px;
            }
            /* Section headline — Satoshi */
            .stats-headline {
                font-family: "Satoshi", sans-serif;
                font-size: clamp(40px, 5.6vw, 72px);
                font-weight: 500;
                line-height: 1.04;
                letter-spacing: -0.025em;
                color: #fafafa;
                max-width: 760px;
                margin-bottom: 64px;
            }
            .stats-headline em {
                font-style: italic;
                font-weight: 400;
                color: rgba(250, 250, 250, 0.55);
            }

            /* ── Bento grid — full width of the section ────────────────── */
            .bento {
                display: grid;
                grid-template-columns: 1fr 1.4fr 1fr;
                grid-template-rows: minmax(360px, auto) minmax(360px, auto);
                gap: 16px;
                width: 100%;
                font-family: "Satoshi", sans-serif;
            }
            .bc {
                position: relative;
                background: rgba(255, 255, 255, 0.025);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 22px;
                padding: 14px;
                overflow: hidden;
                transition:
                    background 0.25s,
                    border-color 0.25s,
                    transform 0.25s;
                display: flex;
                flex-direction: column;
                min-height: 360px;
            }
            .bc:hover {
                background: rgba(255, 255, 255, 0.045);
                border-color: rgba(255, 255, 255, 0.12);
            }
            .bc-visual {
                position: relative;
                flex: 1;
                width: 100%;
                border-radius: 14px;
                overflow: hidden;
                background: #0f0f0f;
                margin-bottom: 18px;
                min-height: 0;
            }
            .bc-visual img,
            .bc-visual video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
            .bc-foot {
                flex-shrink: 0;
                padding: 4px 10px 6px;
            }
            .bc-title {
                font-family: "Satoshi", sans-serif;
                font-size: 17px;
                font-weight: 600;
                letter-spacing: -0.01em;
                color: #fafafa;
                margin-bottom: 6px;
            }
            .bc-desc {
                font-family: "Satoshi", sans-serif;
                font-size: 13.5px;
                font-weight: 400;
                line-height: 1.5;
                color: rgba(250, 250, 250, 0.62);
                max-width: 42ch;
            }

            /* Hero card (center, spans 2 rows) — visual fills nearly everything */
            .bc-hero {
                grid-column: 2 / 3;
                grid-row: 1 / 3;
                padding: 14px;
            }
            .bc-hero .bc-visual {
                margin-bottom: 18px;
                flex: 1;
            }
            .bc-hero .bc-foot {
                text-align: center;
                padding: 6px 10px 14px;
            }
            .bc-hero .bc-title {
                font-size: clamp(24px, 2.2vw, 32px);
                font-weight: 500;
                letter-spacing: -0.02em;
                margin-bottom: 14px;
            }
            .bc-hero-cta {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                height: 44px;
                padding: 0 22px;
                border-radius: 9999px;
                background: #ffffff;
                color: #161616;
                font-family: "Satoshi", sans-serif;
                font-size: 14px;
                font-weight: 600;
                text-decoration: none;
                border: 1px solid #ffffff;
                transition:
                    background 0.18s,
                    transform 0.18s,
                    box-shadow 0.25s;
            }
            .bc-hero-cta:hover {
                background: #f4f4f4;
                transform: translateY(-1px);
                box-shadow: 0 8px 24px rgba(255, 255, 255, 0.18);
            }

            /* UI mockup helper card style */
            .bc-mockup {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background:
                    radial-gradient(
                        ellipse 60% 40% at 50% 0%,
                        rgba(165, 110, 255, 0.1),
                        transparent 70%
                    ),
                    #0c0c0c;
            }
            .bc-mock-input {
                width: 86%;
                padding: 14px 16px;
                background: rgba(255, 255, 255, 0.045);
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 12px;
                font-family: "Satoshi", sans-serif;
                font-size: 13px;
                color: rgba(255, 255, 255, 0.5);
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            .bc-mock-row {
                display: flex;
                align-items: center;
                gap: 6px;
            }
            .bc-mock-tag {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 3px 8px;
                background: rgba(165, 110, 255, 0.18);
                border: 1px solid rgba(165, 110, 255, 0.3);
                border-radius: 999px;
                font-size: 11px;
                font-weight: 500;
                color: #d4bbff;
            }
            .bc-mock-tag.gray {
                background: rgba(255, 255, 255, 0.08);
                border-color: rgba(255, 255, 255, 0.12);
                color: rgba(255, 255, 255, 0.7);
            }
            .bc-mock-text {
                color: rgba(255, 255, 255, 0.85);
                font-size: 12px;
            }

            @media (max-width: 980px) {
                .bento {
                    grid-template-columns: 1fr 1fr;
                    grid-template-rows: auto;
                }
                .bc-hero {
                    grid-column: 1 / -1;
                    grid-row: auto;
                    min-height: 360px;
                }
            }
            @media (max-width: 600px) {
                .bento {
                    grid-template-columns: 1fr;
                }
                .bc-hero {
                    grid-column: auto;
                }
            }

            /* ═══════════════════════════════════════════════════════════════
       GALLERY
    ═══════════════════════════════════════════════════════════════ */
            .gallery-section {
                border-top: 1px solid rgba(255, 255, 255, 0.05);
                padding-top: 100px;
            }

            .gallery-header {
                padding: 0 var(--px) 64px;
            }
            .gallery-header .section-headline {
                margin-top: 24px;
                margin-bottom: 0;
            }

            .gallery-pin-wrap {
                height: 300vh;
            }
            .gallery-pin {
                position: sticky;
                top: 0;
                height: 100vh;
                overflow: hidden;
                display: flex;
                align-items: center;
            }
            .gallery-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: 42vh 32vh;
                gap: 3px;
                padding: 0 3px;
                width: 100%;
                transform-origin: center center;
            }
            /* First image spans 2 columns for visual anchor */
            .gi:first-child {
                grid-column: span 2;
            }
            .gi {
                overflow: hidden;
                position: relative;
            }
            .gi .ph {
                border-radius: 2px;
                border: none;
            }
            .gi-overlay {
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0);
                transition: background 0.3s;
                z-index: 1;
            }
            .gi:hover .gi-overlay {
                background: rgba(0, 0, 0, 0.22);
            }
            .gi-label {
                position: absolute;
                bottom: 13px;
                left: 16px;
                font-size: 14px;
                letter-spacing: 1.6px;
                color: rgba(255, 255, 255, 0);
                transition: color 0.3s;
                z-index: 2;
            }
            .gi:hover .gi-label {
                color: rgba(255, 255, 255, 0.55);
            }

            /* ═══════════════════════════════════════════════════════════════
       FILMSTRIP — Controls + Outputs
    ═══════════════════════════════════════════════════════════════ */
            .features-section,
            .outputs-section {
                padding: 100px var(--px) 0;
            }

            .fb-header {
                margin-bottom: 64px;
            }
            .fb-header .section-headline {
                margin: 0 0 20px;
                font-size: clamp(40px, 5.6vw, 72px) !important;
                max-width: 760px;
            }
            .fb-sub {
                max-width: 480px;
            }

            /* ── Filmstrip container ── */
            .filmstrip {
                display: flex;
                height: 520px;
                gap: 3px;
                overflow: hidden;
            }

            /* ── Each card ── */
            .fs-card {
                position: relative;
                flex: 1;
                min-width: 0;
                cursor: pointer;
                overflow: hidden;
                background: #111;
                border-radius: 2px;
                transition: flex 0.65s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .fs-card.active {
                flex: 5;
            }

            .fs-card img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
                display: block;
            }
            .fs-card.active img {
                transform: scale(1.03);
            }

            /* Scrim — stronger on inactive for legibility */
            .fs-scrim {
                position: absolute;
                inset: 0;
                z-index: 1;
                background: linear-gradient(
                    to top,
                    rgba(6, 6, 6, 0.95) 0%,
                    rgba(6, 6, 6, 0.35) 55%,
                    transparent 100%
                );
                transition: opacity 0.4s;
            }
            .fs-card:not(.active) .fs-scrim {
                background: rgba(6, 6, 6, 0.55);
            }

            /* Number badge — always visible, top-left */
            .fs-num {
                position: absolute;
                top: 18px;
                left: 20px;
                z-index: 3;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 1.5px;
                color: rgba(255, 255, 255, 0.62);
                font-variant-numeric: tabular-nums;
                transition: opacity 0.3s;
            }

            /* Collapsed label — vertical, hidden when active */
            .fs-vtitle {
                position: absolute;
                bottom: 28px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 3;
                writing-mode: vertical-rl;
                text-orientation: mixed;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 2.5px;
                color: rgba(255, 255, 255, 0.78);
                white-space: nowrap;
                transition: opacity 0.25s;
            }
            .fs-card.active .fs-vtitle {
                opacity: 0;
                pointer-events: none;
            }

            /* Expanded content — fades in when active */
            .fs-body {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 3;
                padding: 28px 32px 32px;
                opacity: 0;
                transform: translateY(10px);
                transition:
                    opacity 0.35s 0.2s,
                    transform 0.35s 0.2s;
            }
            .fs-card.active .fs-body {
                opacity: 1;
                transform: none;
            }
            .fs-tag {
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 2px;
                color: rgba(255, 255, 255, 0.7);
                margin-bottom: 10px;
                display: block;
            }
            .fs-name {
                font-size: 22px;
                font-weight: 700;
                letter-spacing: -0.7px;
                color: #fff;
                line-height: 1.15;
                margin-bottom: 10px;
            }
            .fs-desc {
                font-size: 14px;
                color: rgba(255, 255, 255, 0.78);
                line-height: 1.6;
                max-width: 340px;
            }

            /* Camera card — mini strip inside expanded view */
            .fs-cam-strip {
                display: flex;
                gap: 6px;
                margin-top: 16px;
            }
            .fs-cam-mini {
                width: 56px;
                height: 40px;
                border-radius: 4px;
                overflow: hidden;
                border: 1px solid rgba(255, 255, 255, 0.1);
                flex-shrink: 0;
            }
            .fs-cam-mini img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            /* Elements @ badge */
            .fs-at {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
                font-size: 72px;
                font-weight: 800;
                color: rgba(255, 255, 255, 0.07);
                font-style: italic;
                letter-spacing: -3px;
                pointer-events: none;
                transition: opacity 0.4s;
            }
            .fs-card.active .fs-at {
                opacity: 0;
            }

            /* Hover state on inactive cards */
            .fs-card:not(.active):hover img {
                transform: scale(1.04);
            }
            .fs-card:not(.active):hover .fs-scrim {
                background: rgba(6, 6, 6, 0.35);
            }

            /* Placeholder (no image yet) */
            .fs-ph {
                position: absolute;
                inset: 0;
                background: linear-gradient(135deg, #161616 0%, #0e0e0e 100%);
            }

            /* Mobile — horizontal scroll rail */
            @media (max-width: 768px) {
                .features-section,
                .outputs-section {
                    padding: 60px 24px 0;
                }
                .filmstrip {
                    height: auto;
                    overflow-x: auto;
                    overflow-y: hidden;
                    -webkit-overflow-scrolling: touch;
                    scrollbar-width: none;
                    gap: 3px;
                    flex-wrap: nowrap;
                }
                .filmstrip::-webkit-scrollbar {
                    display: none;
                }
                .fs-card {
                    flex: 0 0 72vw;
                    height: 380px;
                }
                .fs-card.active {
                    flex: 0 0 82vw;
                }
            }

            /* ═══════════════════════════════════════════════════════════════
       CTA
    ═══════════════════════════════════════════════════════════════ */
            /* ═══ CTA — Cinematic title card ═══ */
            .film-cta {
                position: relative;
                height: 100vh;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .cta-video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                z-index: 0;
            }

            .cta-overlay {
                position: absolute;
                inset: 0;
                z-index: 1;
                background:
                    linear-gradient(
                        to top,
                        rgba(0, 0, 0, 0.88) 0%,
                        rgba(0, 0, 0, 0.1) 50%
                    ),
                    linear-gradient(
                        to bottom,
                        rgba(0, 0, 0, 0.6) 0%,
                        rgba(0, 0, 0, 0) 35%
                    ),
                    radial-gradient(
                        ellipse at 50% 50%,
                        transparent 35%,
                        rgba(0, 0, 0, 0.4) 100%
                    );
            }

            /* Letterbox bars */
            .cta-bar {
                position: absolute;
                left: 0;
                right: 0;
                height: 11vh;
                background: #000;
                z-index: 3;
            }
            .cta-bar-top {
                top: 0;
            }
            .cta-bar-bottom {
                bottom: 0;
            }

            /* Viewfinder corners */
            .cta-vf {
                position: absolute;
                z-index: 4;
                width: 20px;
                height: 20px;
            }
            .cta-vf-tl {
                top: calc(11vh + 18px);
                left: 32px;
                border-top: 1px solid rgba(255, 255, 255, 0.7);
                border-left: 1px solid rgba(255, 255, 255, 0.7);
            }
            .cta-vf-tr {
                top: calc(11vh + 18px);
                right: 32px;
                border-top: 1px solid rgba(255, 255, 255, 0.7);
                border-right: 1px solid rgba(255, 255, 255, 0.7);
            }
            .cta-vf-bl {
                bottom: calc(11vh + 18px);
                left: 32px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.7);
                border-left: 1px solid rgba(255, 255, 255, 0.7);
            }
            .cta-vf-br {
                bottom: calc(11vh + 18px);
                right: 32px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.7);
                border-right: 1px solid rgba(255, 255, 255, 0.7);
            }

            /* Top HUD row */
            .cta-hud-top {
                position: relative;
                z-index: 4;
                margin-top: calc(11vh + 20px);
                padding: 0 var(--px);
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .cta-readout {
                display: flex;
                gap: 18px;
                font-size: 14px;
                font-weight: 600;
                letter-spacing: 2px;
                color: rgba(255, 255, 255, 0.7);
            }
            .cta-rec {
                display: flex;
                align-items: center;
                gap: 7px;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 2.5px;
                color: rgba(255, 255, 255, 0.78);
            }
            .cta-rec-dot {
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: #ff3b30;
                animation: rec-blink 1.8s ease-in-out infinite;
            }
            @keyframes rec-blink {
                0%,
                100% {
                    opacity: 1;
                }
                50% {
                    opacity: 0.2;
                }
            }

            /* Centre — giant headline */
            .cta-main {
                position: relative;
                z-index: 4;
                padding: 0 var(--px);
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                max-width: 760px;
            }
            .cta-label {
                display: block;
                margin-bottom: 16px;
            }
            /* Match Camera Arsenal / Studio Toolkit / Outputs section headlines */
            .cta-headline {
                margin: 0;
                font-family: "Satoshi", sans-serif;
                font-size: clamp(40px, 5.6vw, 72px);
                font-weight: 500;
                letter-spacing: -0.025em;
                line-height: 1.04;
                color: #fff;
            }
            .cta-headline em {
                font-style: italic;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.55);
            }
            .cta-line-r {
                display: block;
                text-align: left;
            }
            .cta-btns {
                display: flex;
                gap: 12px;
                align-items: center;
                margin-top: 36px;
            }

            /* Bottom CTA strip */
            .cta-strip {
                position: relative;
                z-index: 4;
                margin-bottom: calc(11vh + 0px);
                padding: 0 var(--px);
                border-top: 1px solid rgba(255, 255, 255, 0.1);
                height: 64px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .cta-strip-left {
                display: flex;
                align-items: center;
                gap: 14px;
            }
            .cta-strip-meta {
                font-size: 14px;
                font-weight: 600;
                letter-spacing: 2px;
                color: rgba(255, 255, 255, 0.65);
            }
            .cta-strip-divider {
                width: 1px;
                height: 16px;
                background: rgba(255, 255, 255, 0.12);
            }
            .cta-strip-right {
                display: flex;
                align-items: center;
                gap: 20px;
            }
            /* Primary action — inline text link style */
            .cta-action-primary {
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 1.5px;
                color: #fff;
                text-decoration: none;
                transition: gap 0.25s;
            }
            .cta-action-primary:hover {
                gap: 16px;
            }
            .cta-action-primary svg {
                flex-shrink: 0;
            }

            /* Secondary ghost link */
            .cta-action-ghost {
                font-size: 14px;
                font-weight: 600;
                letter-spacing: 1.5px;
                color: rgba(255, 255, 255, 0.72);
                text-decoration: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.15);
                padding-bottom: 1px;
                transition:
                    color 0.2s,
                    border-color 0.2s;
            }
            .cta-action-ghost:hover {
                color: rgba(255, 255, 255, 0.7);
                border-color: rgba(255, 255, 255, 0.78);
            }

            @media (max-width: 768px) {
                .cta-readout {
                    display: none;
                }
                .cta-headline {
                    font-size: clamp(44px, 12vw, 80px);
                    letter-spacing: -2px;
                }
                .cta-strip {
                    padding: 0 24px;
                }
                .cta-main {
                    padding: 0 24px;
                }
            }

            /* ── Filmstrip progress bar ── */
            .fs-progress {
                position: absolute;
                bottom: 0;
                left: 0;
                height: 2px;
                width: 0%;
                background: rgba(255, 255, 255, 0.75);
                z-index: 5;
                pointer-events: none;
                border-radius: 0 1px 1px 0;
            }
            @keyframes fs-fill {
                from {
                    width: 0%;
                }
                to {
                    width: 100%;
                }
            }
            .fs-card.active .fs-progress {
                animation: fs-fill 4s linear forwards;
            }

            /* ── Filmstrip video fill ── */
            .fs-card video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            /* ── "Shot on" camera badge ── */
            .fs-cam-badge {
                position: absolute;
                top: 20px;
                right: 20px;
                z-index: 4;
                width: 120px;
                border-radius: 10px;
                overflow: hidden;
                border: 1px solid rgba(255, 255, 255, 0.55);
                background: rgba(0, 0, 0, 0.82);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
                box-shadow:
                    0 6px 24px rgba(0, 0, 0, 0.6),
                    inset 0 1px 0 rgba(255, 255, 255, 0.07);
                opacity: 0;
                transform: translateY(-8px) scale(0.9);
                transition:
                    opacity 0.4s 0.28s,
                    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.28s;
                pointer-events: none;
            }
            .fs-card.active .fs-cam-badge {
                opacity: 1;
                transform: none;
            }
            .fs-cam-badge-img {
                width: 100%;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 12px 6px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            }
            .fs-cam-badge-img img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                filter: brightness(1.15)
                    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
            }
            .fs-cam-badge-label {
                padding: 7px 10px 8px;
                display: flex;
                flex-direction: column;
                gap: 1px;
            }
            .fs-cam-badge-shot {
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 1.8px;
                color: rgba(255, 255, 255, 0.72);
                line-height: 1;
            }
            .fs-cam-badge-name {
                font-size: 14px;
                font-weight: 600;
                letter-spacing: -0.2px;
                color: rgba(255, 255, 255, 0.85);
                line-height: 1.3;
            }

            /* ═══════════════════════════════════════════════════════════════
       SCROLL REVEAL
    ═══════════════════════════════════════════════════════════════ */
            .reveal {
                opacity: 0;
                transform: translateY(30px);
                transition:
                    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .reveal.visible {
                opacity: 1;
                transform: none;
            }
            .reveal-d1 {
                transition-delay: 0.1s;
            }
            .reveal-d2 {
                transition-delay: 0.22s;
            }
            .reveal-d3 {
                transition-delay: 0.34s;
            }
            .reveal-d4 {
                transition-delay: 0.46s;
            }

            /* ═══════════════════════════════════════════════════════════════
       SECTION ATMOSPHERICS
    ═══════════════════════════════════════════════════════════════ */
            /* Ambient background image for statement & CTA */
            .statement-bg,
            .cta-bg {
                position: absolute;
                inset: 0;
                background-size: cover;
                background-position: center;
                pointer-events: none;
                z-index: 0;
            }
            .statement-bg {
                opacity: 0.07;
                filter: grayscale(0.2);
            }
            .cta-bg {
                opacity: 0.1;
                filter: grayscale(0.15);
            }

            /* ═══════════════════════════════════════════════════════════════
       MOBILE
    ═══════════════════════════════════════════════════════════════ */
            @media (max-width: 1024px) {
                .shot-row {
                    height: 75vh;
                    min-height: 480px;
                }
            }

            @media (max-width: 768px) {
                :root {
                    --px: 24px;
                }
                .hero-title {
                    font-size: 32px;
                }
                .hero-chips {
                    gap: 6px;
                }
                .film-statement,
                .shot-types-section,
                .camera-section,
                .stats-section,
                .film-cta {
                    padding-left: 24px;
                    padding-right: 24px;
                }
                .section-header {
                    padding-left: 24px;
                    padding-right: 24px;
                    padding-top: 64px;
                }
                .shot-row {
                    height: 70vh;
                    min-height: 420px;
                }
                .shot-text {
                    bottom: 36px;
                    max-width: 85vw;
                }
                .shot-row.rev .shot-text {
                    right: var(--px);
                }
                .shot-slate,
                .shot-row.rev .shot-slate {
                    left: var(--px);
                    right: auto;
                }
                .shot-explore,
                .shot-row.rev .shot-explore {
                    right: var(--px);
                    left: auto;
                }
                .shot-num {
                    font-size: clamp(100px, 22vw, 160px);
                }
                .mid-cta {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 24px;
                }
                .gallery-pin-wrap {
                    height: auto;
                }
                .gallery-pin {
                    position: relative;
                    height: auto;
                    display: block;
                }
                .gallery-grid {
                    grid-template-columns: repeat(2, 1fr);
                    grid-template-rows: auto;
                    transform: none !important;
                }
                .gi:first-child {
                    grid-column: span 2;
                }
                .cta-btns {
                    flex-direction: column;
                    align-items: flex-start;
                }
            }
/* === Unified Header/Footer === */
.site-footer {
      background: #0D0D1A;
      border-top: 1px solid rgba(255,255,255,0.06);
      padding: 72px 0 36px;
      color: rgba(255,255,255,0.85);
      font-family: inherit;
    }
    .footer-container {
      width: 100%;
      max-width: 1248px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 260px 1fr;
      gap: 60px;
      margin-bottom: 64px;
    }
    .footer-logo { display: inline-flex; align-items: center; margin-bottom: 14px; }
    .footer-logo-img { display: block; width: 158px; height: 39px; }
    .footer-tagline { font-size: 0.875rem; color: rgba(255,255,255,0.4); line-height: 1.6; max-width: 200px; }
    .footer-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
    .footer-subsection { margin-top: 32px; }
    .footer-heading {
      font-size: 0.8125rem; font-weight: 700; color: #fff;
      letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 20px;
    }
    .footer-col ul { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }
    .footer-col a { font-size: 0.875rem; color: rgba(255,255,255,0.38); text-decoration: none; transition: color 0.22s; }
    .footer-col a:hover { color: rgba(255,255,255,0.75); }
    .footer-bottom {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06);
      flex-wrap: wrap; gap: 16px;
    }
    .footer-copyright { font-size: 0.8125rem; color: rgba(255,255,255,0.28); }
    .footer-socials { display: flex; align-items: center; gap: 4px; }
    .footer-social-btn {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 10px;
      color: rgba(255,255,255,0.38); text-decoration: none;
      transition: color 0.22s, background 0.22s;
    }
    .footer-social-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
    @media (max-width: 1024px) {
      .footer-top { grid-template-columns: 1fr; gap: 40px; }
      .footer-columns { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .footer-columns { grid-template-columns: 1fr 1fr; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
    }

    /* ─── Steps section ─────────────────────────────────── */
    .mkt-steps {
      position: relative;
      background: var(--dark);
      padding: 120px var(--px) 110px;
      overflow: hidden;
    }
    .mkt-steps::before {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
      background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .mkt-steps::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
      background-image: radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 1px);
      background-size: 28px 28px;
      -webkit-mask-image: radial-gradient(circle 220px at var(--mx, -9999px) var(--my, -9999px), black 0%, transparent 100%);
      mask-image: radial-gradient(circle 220px at var(--mx, -9999px) var(--my, -9999px), black 0%, transparent 100%);
    }
    .mkt-steps-inner {
      position: relative; z-index: 1;
      max-width: 1200px; margin: 0 auto;
    }
    .mkt-steps-header {
      margin-bottom: 72px;
    }
    .mkt-steps-h2 {
      font-size: clamp(32px, 4.2vw, 60px);
      font-weight: 400; letter-spacing: -2px; line-height: 1.05;
      color: #fff; margin: 0 0 20px; max-width: 860px;
    }
    .mkt-steps-sub {
      font-size: 15px; color: rgba(255,255,255,0.62);
      line-height: 1.7; max-width: 480px; margin: 0;
    }
    /* 4-column cards grid */
    .mkt-steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 20px;
      overflow: hidden;
    }
    .mkt-step-card {
      padding: 36px 32px 32px;
      display: flex; flex-direction: column; gap: 0;
      border-right: 1px solid rgba(255,255,255,0.07);
    }
    .mkt-step-card:last-child { border-right: none; }
    .mkt-step-num {
      font-size: 52px; font-weight: 600; letter-spacing: -3px;
      color: rgba(255,255,255,0.07); line-height: 1; margin-bottom: 40px;
      user-select: none;
    }
    .mkt-step-title {
      font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.88);
      letter-spacing: -0.2px; line-height: 1.3; margin: 0 0 12px;
    }
    .mkt-step-body {
      font-size: 13.5px; font-weight: 300; line-height: 1.72;
      color: rgba(255,255,255,0.42); margin: 0; flex: 1;
    }
    .mkt-step-time {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 28px;
      font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,0.5);
      letter-spacing: 0.2px;
    }
    .mkt-step-time svg { flex-shrink: 0; opacity: 0.5; }

    /* ─── FAQ ───────────────────────────────────────────── */
    .mkt-faq {
      background: #fff;
      padding: 120px var(--px) 110px;
      border-top: 1px solid rgba(15,15,15,0.06);
    }
    .mkt-faq-inner {
      max-width: 1140px; margin: 0 auto;
      display: flex; gap: 80px; align-items: flex-start;
    }
    .mkt-faq-left {
      flex-shrink: 0; max-width: 360px; position: sticky; top: 100px;
    }
    .mkt-faq-h2 {
      font-size: clamp(28px, 3vw, 42px); font-weight: 400;
      letter-spacing: -1.2px; line-height: 1.1;
      color: #0f0f0f; margin: 0 0 16px;
    }
    .mkt-faq-sub {
      font-size: 15px; font-weight: 300; line-height: 1.7;
      color: #525252; margin: 0;
    }
    .mkt-faq-list {
      flex: 1; min-width: 0;
    }
    .mkt-faq-item {
      border-top: 1px solid rgba(15,15,15,0.08);
    }
    .mkt-faq-item:last-child {
      border-bottom: 1px solid rgba(15,15,15,0.08);
    }
    .mkt-faq-trigger {
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; width: 100%; padding: 26px 0;
      background: none; border: none; cursor: pointer; text-align: left;
      font-family: inherit; font-size: 15px; font-weight: 400;
      line-height: 1.5; color: #0f0f0f; letter-spacing: -0.1px;
      transition: color 0.2s ease;
    }
    .mkt-faq-trigger[aria-expanded="true"] { color: #8A3FFC; }
    .mkt-faq-icon {
      flex-shrink: 0; width: 26px; height: 26px;
      border-radius: 50%; border: 1px solid rgba(15,15,15,0.12);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 300; color: rgba(15,15,15,0.5);
      transition: border-color 0.2s, color 0.2s, background 0.2s;
    }
    .mkt-faq-trigger[aria-expanded="true"] .mkt-faq-icon {
      border-color: #8A3FFC; color: #8A3FFC;
      background: rgba(138,63,252,0.06);
    }
    .mkt-faq-answer {
      display: grid; grid-template-rows: 0fr;
      transition: grid-template-rows 0.34s cubic-bezier(0.16,1,0.3,1);
    }
    .mkt-faq-answer[data-open="true"] { grid-template-rows: 1fr; }
    .mkt-faq-answer-inner { overflow: hidden; }
    .mkt-faq-answer-text {
      padding: 0 40px 26px 0;
      font-size: 14.5px; font-weight: 300; line-height: 1.75;
      color: #0f0f0f; margin: 0;
    }

    /* ─── Comparison table ───────────────────────────────── */
    .mkt-compare {
      background: var(--dark);
      padding: 120px var(--px) 110px;
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    .mkt-compare-inner {
      max-width: 1100px; margin: 0 auto;
    }
    .mkt-compare-header {
      margin-bottom: 64px;
    }
    .mkt-compare-h2 {
      font-size: clamp(32px, 4vw, 52px); font-weight: 400;
      letter-spacing: -2px; line-height: 1.04;
      color: #fff; margin: 0 0 16px; max-width: 560px;
    }
    .mkt-compare-sub {
      font-size: 15px; color: rgba(255,255,255,0.6);
      line-height: 1.7; max-width: 480px; margin: 0;
    }
    /* Table */
    .mkt-compare-table { width: 100%; }
    .mkt-compare-row {
      display: grid;
      grid-template-columns: 200px 1fr 1fr 1fr;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .mkt-compare-row:last-child { border-bottom: none; }
    .mkt-compare-row.mkt-compare-head {
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .mkt-compare-cell {
      padding: 18px 20px;
      display: flex; flex-direction: column; justify-content: center; gap: 3px;
    }
    /* ImagineArt column highlight */
    .mkt-compare-row .mkt-compare-cell:nth-child(2) {
      background: rgba(255,255,255,0.04);
    }
    .mkt-compare-head .mkt-compare-cell:nth-child(2) {
      border-top: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.04);
    }
    /* Head labels */
    .mkt-col-name {
      font-size: 10.5px; font-weight: 500; letter-spacing: 1px;
      text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 0;
    }
    .mkt-compare-head .mkt-compare-cell:nth-child(2) .mkt-col-name {
      color: #fff;
    }
    .mkt-col-sub {
      font-size: 11px; font-weight: 300;
      color: rgba(255,255,255,0.3); margin: 0;
    }
    /* Row label */
    .mkt-row-label {
      font-size: 13px; font-weight: 400;
      color: rgba(255,255,255,0.6); margin: 0;
    }
    /* Cell values */
    .mkt-cell-val {
      display: flex; align-items: center; gap: 9px;
      font-size: 13px; font-weight: 300;
      color: rgba(255,255,255,0.4); line-height: 1.5;
    }
    .mkt-compare-row .mkt-compare-cell:nth-child(2) .mkt-cell-val {
      color: #fff; font-weight: 400;
    }
    /* Icons */
    .mkt-icon-check {
      flex-shrink: 0; color: #3dba80;
      display: flex; align-items: center;
    }
    .mkt-icon-minus {
      flex-shrink: 0; color: rgba(255,255,255,0.25);
      display: flex; align-items: center;
    }

    /* ─── How It Works Z-fold ────────────────────────────── */
    .hiw-zfold {
      background: #F7F7F7;
      padding: 88px var(--px) 80px;
    }
    .hiw-zfold-inner {
      max-width: 1140px;
      margin: 0 auto;
    }
    .hiw-zfold-header {
      margin-bottom: 56px;
    }
    .hiw-zfold-list {
      display: flex;
      flex-direction: column;
      gap: clamp(64px, 9vw, 120px);
    }
    .hiw-zfold-item {
      display: flex;
      align-items: center;
      gap: clamp(40px, 6vw, 96px);
    }
    .hiw-zfold-item.hiw-zfold-reverse {
      flex-direction: row-reverse;
    }
    .hiw-zfold-media {
      flex: 0 0 clamp(260px, 44%, 540px);
      height: clamp(260px, 36vw, 500px);
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      background: #ebebeb;
    }
    .hiw-zfold-media img,
    .hiw-zfold-media video {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    .hiw-zfold-play {
      position: absolute; bottom: 12px; right: 12px;
      width: 38px; height: 38px; border-radius: 50%;
      background: rgba(0,0,0,0.55);
      border: none; cursor: pointer; color: #fff;
      display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(6px);
      transition: background 0.15s;
    }
    .hiw-zfold-play:hover { background: rgba(0,0,0,0.78); }
    .hiw-zfold-text {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 14px;
    }
    .hiw-zfold-step {
      font-size: 10.5px; font-weight: 600; letter-spacing: 1.8px;
      text-transform: uppercase; color: #525252; margin: 0;
    }
    .hiw-zfold-title {
      font-size: clamp(22px, 2.6vw, 34px); font-weight: 400;
      line-height: 1.1; letter-spacing: -0.5px;
      color: #0f0f0f; margin: 0;
    }
    .hiw-zfold-body {
      font-size: 15px; font-weight: 400; line-height: 1.7;
      color: #0f0f0f; margin: 0 0 16px; max-width: 460px;
    }
    .hiw-zfold-cta {
      display: inline-flex; align-items: center;
      width: fit-content; height: 46px; padding: 0 22px;
      border-radius: 10px; background: #0f0f0f;
      color: #fff; font-size: 14px; font-weight: 500;
      text-decoration: none;
      transition: background 0.18s;
    }
    .hiw-zfold-cta:hover { background: #2a2a2a; }
    /* Z-fold extras */
    .hiw-zfold-callout {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 16px 18px; border-radius: 12px;
      background: rgba(15,15,15,0.04);
      border: 1px solid rgba(15,15,15,0.07);
      margin-bottom: 20px;
    }
    .hiw-zfold-callout-icon {
      flex-shrink: 0; margin-top: 2px;
      color: rgba(15,15,15,0.5);
    }
    .hiw-zfold-callout p {
      font-size: 13px; font-weight: 300; line-height: 1.65;
      color: #525252; margin: 0;
    }
    .hiw-zfold-ministeps {
      display: flex; flex-direction: column; gap: 10px;
      margin-bottom: 28px;
    }
    .hiw-zfold-ministep {
      display: flex; align-items: baseline; gap: 16px;
      padding: 14px 18px; border-radius: 12px;
      border: 1px solid rgba(15,15,15,0.07);
      background: #fff;
    }
    .hiw-zfold-ministep-n {
      font-size: 13px; font-weight: 300; color: rgba(15,15,15,0.5);
      flex-shrink: 0; min-width: 12px; line-height: 1;
    }
    .hiw-zfold-ministep-text { display: flex; flex-direction: column; gap: 2px; }
    .hiw-zfold-ministep-title {
      font-size: 13.5px; font-weight: 500; color: #0f0f0f; line-height: 1.3;
    }
    .hiw-zfold-ministep-sub {
      font-size: 12px; font-weight: 300; color: #525252; line-height: 1.4;
    }
    .hiw-zfold-badge {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 8px 16px; border-radius: 100px;
      border: 1px solid rgba(15,15,15,0.1);
      background: rgba(15,15,15,0.03);
      font-size: 12px; font-weight: 400; color: rgba(15,15,15,0.5);
      letter-spacing: 0.1px; margin-top: 4px;
    }
    .hiw-zfold-badge-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: #3dba80; flex-shrink: 0;
    }
    .hiw-zfold-steps-list {
      list-style: none; margin: 0 0 16px; padding: 0;
      border-top: 1px solid rgba(15,15,15,0.08);
      counter-reset: steps;
    }
    .hiw-zfold-steps-list li {
      counter-increment: steps;
      display: flex; align-items: flex-start; gap: 16px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(15,15,15,0.08);
    }
    .hiw-zfold-steps-list li::before {
      content: counter(steps);
      font-size: 11px; font-weight: 400; color: rgba(15,15,15,0.5);
      flex-shrink: 0; width: 16px; line-height: 1.6;
    }
    .hiw-zfold-steps-list li > span { display: flex; flex-direction: column; gap: 3px; }
    .hiw-zfold-steps-title {
      font-size: 13.5px; font-weight: 500; color: #0f0f0f; line-height: 1.3;
    }
    .hiw-zfold-steps-sub {
      font-size: 12px; font-weight: 300; color: #525252; line-height: 1.4;
    }
    .hiw-zfold-quote {
      margin: 0 0 16px;
      padding: 0 0 0 14px;
      border-left: 2px solid rgba(15,15,15,0.12);
      font-size: 13px; font-weight: 300; line-height: 1.65;
      color: #525252;
    }
    .hiw-zfold-check {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; font-weight: 400; color: rgba(15,15,15,0.5);
      margin: 0;
    }
    .hiw-zfold-stats {
      display: flex; align-items: stretch; gap: 0;
      border: 1px solid rgba(15,15,15,0.08); border-radius: 14px;
      overflow: hidden; margin-bottom: 28px;
    }
    .hiw-zfold-stat {
      flex: 1; padding: 20px 22px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .hiw-zfold-stat-divider {
      width: 1px; background: rgba(15,15,15,0.08); flex-shrink: 0;
    }
    .hiw-zfold-stat-num {
      font-size: clamp(28px, 3vw, 36px); font-weight: 400;
      letter-spacing: -1.5px; line-height: 1; color: #0f0f0f;
    }
    .hiw-zfold-stat-desc {
      font-size: 12px; font-weight: 300; line-height: 1.5;
      color: #525252;
    }
    .hiw-zfold-controls {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 8px; margin-bottom: 28px;
    }
    .hiw-zfold-control {
      display: flex; flex-direction: column; gap: 4px;
      padding: 14px 16px; border-radius: 12px;
      border: 1px solid rgba(15,15,15,0.07); background: #fff;
    }
    .hiw-zfold-control-label {
      font-size: 10px; font-weight: 600; letter-spacing: 1.4px;
      text-transform: uppercase; color: rgba(15,15,15,0.5);
    }
    .hiw-zfold-control-val {
      font-size: 13px; font-weight: 400; color: #0f0f0f; line-height: 1.4;
    }

    /* ═══════════════════════════════════════════════════════
       RESPONSIVE - tablet ≤ 1024px
       ═══════════════════════════════════════════════════════ */
    @media (max-width: 1024px) {
      /* Hero v3 tablet */
      .hero-top { padding: 0 40px; margin-bottom: 20px; }
      .hero-prompt-wrap, .hero-chips { width: calc(100% - 80px); }
      /* Reduce card height slightly on tablet */
      .hero-cards { height: 240px; }
      .styles-bento { grid-template-columns: repeat(6, 1fr); }
      .s-card:nth-child(1) { grid-column: span 3; height: 320px; }
      .s-card:nth-child(2) { grid-column: span 3; height: 320px; }
      .s-card:nth-child(3) { grid-column: span 3; height: 320px; }
      .s-card:nth-child(4) { grid-column: span 3; height: 280px; }
      .s-card:nth-child(5) { grid-column: span 3; height: 280px; }
      .s-card:nth-child(6) { grid-column: span 3; height: 280px; }
      .s-card:nth-child(7) { grid-column: span 4; height: 200px; }
      .s-card:nth-child(8) { grid-column: span 2; height: 200px; }
      .ads-grid { grid-template-columns: 1fr; }
      .ads-card-stack { flex-direction: row; gap: 12px; }
      .ads-card-stat { flex: 1; height: 160px; }
      .ads-card-secondary { height: 260px; }
    }

    /* ═══════════════════════════════════════════════════════
       RESPONSIVE - mobile ≤ 768px
       ═══════════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ── Hero v3 mobile ──────────────────────────────── */
      .mkt-hero { padding-top: 44px; padding-left: 0; padding-right: 0; padding-bottom: 160px; }
      .hero-top { padding: 0 24px; margin-bottom: 18px; gap: 8px; }
      .hero-studio-title { font-size: clamp(30px, 9vw, 48px); letter-spacing: 3px; }
      .hero-sub { font-size: 15px; }

      /* ── Hero cards, expanding accordion ─────────────── */
      .hero-cards-wrap { max-width: none; }
      .hero-cards {
        height: 180px;
        overflow: hidden;
        padding: 0 20px;
        gap: 6px;
      }
      .hi { flex: 1; width: auto; transition: flex 0.52s cubic-bezier(0.4,0,0.2,1); }
      .hi.active { flex: 5; }
      .hi-label {
        opacity: 0; transform: translateY(3px);
        transition: opacity 280ms ease 180ms, transform 280ms ease 180ms;
      }
      .hi.active .hi-label { opacity: 1; transform: translateY(0); }

      /* ── Shared ───────────────────────────────────────── */
      .mkt-inner { padding: 0 20px; }
      .sec-h2 { letter-spacing: -1px; }

      /* ── Ads ──────────────────────────────────────────── */
      .mkt-ads { padding: 72px 0; }
      .mkt-ads-inner { padding: 0 20px; gap: 32px; }
      .ads-grid { grid-template-columns: 1fr; }
      .ads-card-main { height: 420px; }
      .ads-card-stack { flex-direction: column; gap: 10px; }
      .ads-card-stat { height: 160px; padding: 22px; }
      .ads-card-secondary { height: 260px; }
      .ads-features-row { grid-template-columns: 1fr; border-radius: 16px; }


      /* ── Templates ────────────────────────────────────── */
      .templates { padding: 72px 0; }
      .templates-inner { padding: 0 20px; gap: 32px; }
      .templates-head { flex-direction: column; align-items: flex-start; gap: 12px; }
      .templates-head p { text-align: left; max-width: 100%; }
      .styles-bento { grid-template-columns: 1fr 1fr; gap: 8px; }
      .s-card:nth-child(n) { grid-column: span 1 !important; height: 180px !important; }
      .s-card:nth-child(1),
      .s-card:nth-child(2) { height: 240px !important; }

      /* ── Gallery ──────────────────────────────────────── */
      .gallery-header { padding: 64px 24px 36px; }
      .gallery-pin-wrap { height: auto; }
      .gallery-pin { position: relative; height: auto; display: block; }
      .gallery-grid { transform: none; grid-template-columns: repeat(3, 1fr); gap: 3px; }
      .gallery-item { aspect-ratio: 1/1; }

      /* ── Hero tabs (mobile) ──────────────────────────── */
      .hero-tab { padding: 6px 10px; font-size: 10px; }

      /* ── HIW card labels (mobile) ─────────────────────── */
      .hiw-card-label { font-size: 8px; padding: 3px 7px; }

      /* ── FAQ ─────────────────────────────────────────────── */
      .mkt-faq { padding: 80px 20px 72px; }
      .mkt-faq-inner { flex-direction: column; gap: 40px; }
      .mkt-faq-left { max-width: 100%; position: static; }

      /* ── Comparison table ────────────────────────────────── */
      .mkt-compare { padding: 80px 20px 72px; }
      .mkt-compare-header { margin-bottom: 48px; }
      .mkt-compare-table { border-radius: 0; }
      .mkt-compare-row { grid-template-columns: 1fr; }
      .mkt-compare-row.mkt-compare-head { display: none; }
      .mkt-compare-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 16px 20px; }
      .mkt-compare-cell:last-child { border-bottom: none; }
      .mkt-compare-row .mkt-compare-cell:nth-child(2) { border-right: none; }
      .mkt-compare-row:last-child .mkt-compare-cell:last-child { border-bottom: none; }
      .mkt-compare-cell::before { content: attr(data-col); display: block; font-size: 9.5px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.25); margin-bottom: 6px; }
      .mkt-compare-cell:first-child::before { display: none; }

      /* ── Steps section ───────────────────────────────────── */
      .mkt-steps { padding: 80px 20px 72px; }
      .mkt-steps-h2 { letter-spacing: -1.5px; }
      .mkt-steps-grid { grid-template-columns: 1fr 1fr; border-radius: 16px; }
      .mkt-step-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 28px 24px; }
      .mkt-step-card:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.07); }
      .mkt-step-card:nth-last-child(-n+2) { border-bottom: none; }
      .mkt-step-num { font-size: 40px; margin-bottom: 28px; }

      /* ── How It Works Z-fold ─────────────────────────────── */
      .hiw-zfold { padding: 72px 20px 60px; }
      .hiw-zfold-header { margin-bottom: 48px; }
      .hiw-zfold-item,
      .hiw-zfold-item.hiw-zfold-reverse { flex-direction: column; gap: 24px; }
      .hiw-zfold-media { flex: none; width: 100%; height: clamp(200px, 55vw, 320px); }
      .hiw-zfold-body { max-width: 100%; }

      /* ── Final CTA ────────────────────────────────────── */
      .mkt-final { padding: 80px 24px 64px; }
      .final-h2 { font-size: clamp(36px, 4.5vw, 56px); letter-spacing: -2px; }
      .final-sub { font-size: 15px; }
      .final-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .btn-final-white,
      .btn-final-ghost { justify-content: center; }
      .final-stats { flex-wrap: wrap; border-radius: 16px; }
      .fstat { flex: 1 0 40%; padding: 18px 20px; }
      .fstat + .fstat { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }
    }

    /* ═══════════════════════════════════════════════════════
       RESPONSIVE - short viewports (MacBook 800px height)
       ═══════════════════════════════════════════════════════ */
    @media (max-height: 860px) {
      .mkt-hero {
        justify-content: center;
        padding-top: 96px;
        padding-bottom: 48px;
      }
      .hero-top { margin-bottom: 0; }
    }
.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.48s cubic-bezier(0.22,1,0.36,1),
                border-color 0.48s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.48s cubic-bezier(0.22,1,0.36,1);
  }
  .site-nav.is-scrolled {
    background: rgba(10,10,11,0.72);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-bottom-color: rgba(255,255,255,0.08);
    box-shadow: 0 20px 48px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.1);
  }
  .site-nav-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: calc(1200px + 24px * 2);
    margin: 0 auto;
    padding: 0 24px;
    height: 68px;
  }
  .site-nav-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
  .site-nav-logo-img { display: block; height: 27px; width: auto; }
  .site-nav-links {
    position: absolute; inset: 0; margin: auto;
    height: 100%; width: fit-content;
    display: flex; align-items: center;
  }
  .nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
  .nav-item { position: relative; }
  .nav-link, .nav-trigger {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.875rem; font-weight: 600; color: #fff;
    padding: 6px 16px; border-radius: 10px;
    transition: color 0.22s, background 0.22s;
    cursor: pointer; white-space: nowrap;
    text-decoration: none; background: none; border: none; font-family: inherit;
  }
  .site-nav .nav-link,
  .site-nav .nav-trigger { color: #fff !important; font-weight: 600 !important; }
  .nav-link:hover, .nav-trigger:hover, .nav-item.is-open .nav-trigger {
    color: #fff; background: rgba(255,255,255,0.08);
  }
  .site-nav .nav-link:hover,
  .site-nav .nav-trigger:hover,
  .site-nav .nav-item.is-open .nav-trigger { color: #fff !important; background: rgba(255,255,255,0.08); }
  .nav-chevron { transition: transform 0.22s cubic-bezier(0.16,1,0.3,1); flex-shrink: 0; opacity: 0.5; }
  .nav-item.is-open .nav-chevron { transform: rotate(180deg); }
  .dropdown {
    position: absolute; top: calc(100% + 8px); left: 0;
    background: #fff; border: 1px solid rgba(0,0,0,0.13); border-radius: 16px;
    padding: 8px; min-width: 200px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12); z-index: 200;
  }
  .nav-item.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
  .site-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .btn-site-dark {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.875rem; font-weight: 600; color: #fff;
    background: #fff; border: 1px solid #fff; color: #0a0a0b;
    border-radius: 9999px; padding: 10px 20px;
    text-decoration: none; transition: background 0.22s, box-shadow 0.22s; white-space: nowrap;
    font-family: inherit; cursor: pointer;
  }
  .btn-site-dark:hover { background: rgba(255,255,255,0.88); }
  .site-nav.is-scrolled .btn-site-dark { background: #fff; border-color: transparent; color: #0a0a0b; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
  .site-nav.is-scrolled .btn-site-dark:hover { box-shadow: 0 0 0 6px rgba(255,255,255,0.1), 0 2px 8px rgba(0,0,0,0.2); }
  .menu-toggle {
    display: none; width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.25);
    background: transparent; cursor: pointer;
  }
  .burger { display: inline-flex; flex-direction: column; gap: 6px; }
  .burger::before, .burger::after {
    content: ''; display: block; width: 20px; height: 2px;
    background: #fff; border-radius: 2px;
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
  }
  .menu-toggle[aria-expanded="true"] .burger::before { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .burger::after  { transform: translateY(-4px) rotate(-45deg); }
  body.mobile-nav-open, html.mobile-nav-open { overflow: hidden; }
  .mobile-nav-open .site-nav-links {
    display: block; position: fixed;
    top: 68px; left: 0; right: 0; bottom: 0;
    width: 100%; height: calc(100vh - 68px);
    background: #0a0a0b; padding: 24px; overflow-y: scroll;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4); z-index: 99;
  }
  .mobile-nav-open .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .mobile-nav-open .nav-link,
  .mobile-nav-open .nav-trigger { width: 100%; justify-content: space-between; font-size: 1rem; padding: 12px 16px; }
  .mobile-nav-open .dropdown {
    display: none; position: static; box-shadow: none; border: none;
    border-radius: 16px; background: rgba(255,255,255,0.06); margin-top: 4px; padding: 6px;
  }
  .mobile-nav-open .nav-item.is-open .dropdown { display: block; opacity: 1; visibility: visible; transform: none; }
  .nav-item.has-mega { position: static; }
  .dropdown-mega {
    position: fixed; top: 68px; left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: 760px; max-width: calc(100vw - 48px); padding: 0; min-width: 0;
  }
  .nav-item.is-open .dropdown-mega { transform: translateX(-50%) translateY(0); }
  .dropdown-community {
    position: fixed; top: 68px; left: 50%; right: auto;
    transform: translateX(-50%) translateY(-6px);
    width: 580px; max-width: calc(100vw - 48px); padding: 0; min-width: 0;
  }
  .nav-item.is-open .dropdown-community { transform: translateX(-50%) translateY(0); }
  .mega-inner, .community-inner { display: flex; align-items: stretch; padding: 20px 24px; gap: 0; }
  .mega-col { display: flex; flex-direction: column; padding: 4px 16px 4px 0; min-width: 0; }
  .mega-col:last-child { padding-right: 0; }
  .mega-col-featured { flex-shrink: 0; width: 236px; }
  .mega-divider-v { width: 1px; background: rgba(0,0,0,0.07); margin: 0 16px; flex-shrink: 0; align-self: stretch; }
  .mega-label { display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8B8BAB; margin-bottom: 12px; }
  .mega-feat-list { display: flex; flex-direction: column; gap: 2px; }
  .mega-feat-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 10px; transition: background 0.22s; }
  .mega-feat-item:hover { background: rgba(0,0,0,0.04); }
  .mega-feat-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(0,0,0,0.05); flex-shrink: 0; color: #4B4B6B; transition: background 0.22s, color 0.22s; }
  .mega-feat-item:hover .mega-feat-icon { background: rgba(138,63,252,0.08); color: #8A3FFC; }
  .mega-feat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mega-feat-name { display: block; font-size: 0.8125rem; font-weight: 600; color: #0D0D1A; }
  .mega-feat-desc { display: block; font-size: 0.75rem; color: #8B8BAB; line-height: 1.45; }
  .mega-cat-hd { display: inline-flex; font-size: 0.8125rem; font-weight: 600; color: #8A3FFC; margin-bottom: 4px; transition: opacity 0.22s; }
  .mega-cat-hd:hover { opacity: 0.75; } .mega-cat-hd--gap { margin-top: 18px; }
  .mega-link-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  .mega-lnk { display: block; font-size: 0.8125rem; color: #4B4B6B; padding: 4px 8px; border-radius: 6px; white-space: nowrap; transition: color 0.22s, background 0.22s; text-decoration: none; }
  .mega-lnk:hover { color: #0D0D1A; background: rgba(0,0,0,0.04); }
  .mega-explore-all { display: inline-flex; font-size: 0.8125rem; font-weight: 600; color: #8A3FFC; margin-top: 14px; padding: 4px 8px; border-radius: 6px; transition: background 0.22s; text-decoration: none; }
  .mega-explore-all:hover { background: rgba(138,63,252,0.07); }
  .community-intro { display: flex; flex-direction: column; width: 210px; flex-shrink: 0; padding: 4px 0; }
  .community-desc { font-size: 0.8125rem; color: #4B4B6B; line-height: 1.55; margin: 0; }
  .community-grid { display: grid; grid-template-rows: repeat(3,auto); grid-auto-flow: column; gap: 4px; flex: 1; align-content: start; }
  .community-social { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border-radius: 10px; font-size: 0.6875rem; font-weight: 500; color: #4B4B6B; text-align: center; transition: color 0.22s, background 0.22s; text-decoration: none; }
  .community-social:hover { color: #0D0D1A; background: rgba(0,0,0,0.04); }
  .mobile-nav-open .dropdown-mega,
  .mobile-nav-open .dropdown-community { position: static; width: 100%; max-width: 100%; transform: none; }
  .mobile-nav-open .mega-inner,
  .mobile-nav-open .community-inner { flex-direction: column; padding: 8px 0; gap: 12px; }
  .mobile-nav-open .mega-col { padding-right: 0; width: 100%; }
  .mobile-nav-open .community-intro { width: 100%; }
  .mobile-nav-open .mega-col-featured { width: 100%; }
  .mobile-nav-open .mega-divider-v { display: none; }
  .mobile-nav-open .community-grid { grid-template-columns: repeat(3,1fr); grid-template-rows: none; grid-auto-flow: row; }
  @media (max-width: 1024px) { .site-nav-links { display: none; } .menu-toggle { display: flex; } }
  @media (max-width: 640px) { .site-nav-inner { height: 60px; } .mobile-nav-open .site-nav-links { top: 60px; height: calc(100vh - 60px); } }

  /* ─── OLD NAVBAR (kept only for overrides below) ─────── */
  .navbar {
    width: 100%;
    padding: 16px 0;
    position: fixed;
    top: 0; left: 0; right: 0; z-index: 100;
    transition: padding 0.3s ease;
  }
  .navbar-inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px clamp(40px, 12vw, 220px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 22px;
    background: transparent;
    border: 1px solid transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background 0.48s cubic-bezier(0.22,1,0.36,1),
                border-color 0.48s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.48s cubic-bezier(0.22,1,0.36,1),
                max-width 0.48s cubic-bezier(0.22,1,0.36,1),
                padding 0.48s cubic-bezier(0.22,1,0.36,1);
  }
  .navbar.scrolled { padding: 10px 16px; }
  .navbar.scrolled .navbar-inner {
    max-width: min(1180px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 8px 12px;
    background: rgba(10,10,11,0.72);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-color: transparent;
    border-radius: 22px;
    box-shadow: 0 20px 48px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.1);
  }
  .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; overflow: visible; line-height: 0; }
  .logo-white { display: block; }
  .logo-dark { display: none; }
  .nav-links { display: flex; align-items: center; gap: 2px; }
  .nav-link { display: flex; align-items: center; justify-content: center; padding: 6px 14px; border-radius: 8px; font-size: 14px; font-weight: 300; letter-spacing: 0.14px; color: rgba(15,15,15,0.75); text-decoration: none; white-space: nowrap; transition: color 0.15s, background 0.15s; }
  .nav-link:hover { color: #0f0f0f; background: rgba(15,15,15,0.05); }
  .nav-dropdown { position: relative; }
  .nav-dropdown-trigger { cursor: pointer; border: none; background: none; font-family: inherit; gap: 5px; }
  .nav-dropdown-trigger svg { transition: transform 0.2s ease; flex-shrink: 0; }
  .nav-dropdown:hover .nav-dropdown-trigger svg { transform: rotate(180deg); }
  .nav-dropdown-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); background: rgba(10,10,11,0.78); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; box-shadow: 0 20px 48px rgba(0,0,0,0.45); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); padding: 8px; min-width: 220px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.22s ease; z-index: 200; }
  .nav-dropdown-menu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
  .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .nav-dropdown-item { display: flex; align-items: center; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,0.75); text-decoration: none; transition: background 0.12s, color 0.12s; white-space: nowrap; }
  .nav-dropdown-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
  .nav-dropdown-item.current { color: #fff; background: rgba(255,255,255,0.06); }
  .nav-dropdown-trigger { color: rgba(255,255,255,0.75); }
  .nav-dropdown-trigger:hover { color: #fff; background: rgba(255,255,255,0.08); }
  .nav-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .navbar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 300; letter-spacing: 0.14px; white-space: nowrap; cursor: pointer; border: none; text-decoration: none; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, color 0.15s; font-family: inherit; }
  .navbar-btn-ghost { background: transparent; color: rgba(255,255,255,0.75); border-radius: 22px; }
  .navbar-btn-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .navbar:not(.scrolled) .navbar-btn-ghost { color: rgba(255,255,255,0.75); }
  .navbar:not(.scrolled) .navbar-btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.08); }
  .navbar.scrolled .navbar-btn-ghost { color: rgba(255,255,255,0.75); }
  .navbar.scrolled .navbar-btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.08); }
  .navbar-btn-dark { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.25); box-shadow: none; border-radius: 22px; }
  .navbar-btn-dark:hover { background: rgba(255,255,255,0.18); }
  .navbar.scrolled .navbar-btn-dark { background: #fff; border-color: transparent; color: #0a0a0b; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
  .navbar.scrolled .navbar-btn-dark:hover { box-shadow: 0 0 0 6px rgba(255,255,255,0.1), 0 2px 8px rgba(0,0,0,0.2); transform: scale(1.02); }
  .navbar:not(.scrolled) .nav-link { color: rgba(255,255,255,0.75); }
  .navbar:not(.scrolled) .nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
  .navbar.scrolled .nav-link { color: rgba(255,255,255,0.7); }
  .navbar.scrolled .nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }

  /* ─── Hamburger ───────────────────────────────────────── */
  .nav-hamburger {
    display: none;
    align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: transparent; border: none; cursor: pointer;
    color: #fff; transition: background 0.15s; padding: 0; flex-shrink: 0;
  }
  .nav-hamburger:hover { background: rgba(255,255,255,0.1); }
  .navbar.scrolled .nav-hamburger { color: rgba(255,255,255,0.75); }
  .navbar.scrolled .nav-hamburger:hover { background: rgba(255,255,255,0.08); }
  .nav-hamburger .bar {
    display: block; width: 18px; height: 1.5px;
    background: currentColor; border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
  }
  .nav-hamburger .bars { display: flex; flex-direction: column; gap: 5px; }
  .nav-hamburger.open .bar:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
  .nav-hamburger.open .bar:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

  /* ─── Mobile menu - full-screen dark overlay ─────────── */
  @keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav-mobile-menu {
    display: none;
    position: fixed; inset: 0; z-index: 101;
    background: #0a0a0a;
    flex-direction: column;
  }
  .nav-mobile-menu.open {
    display: flex;
    animation: mobileMenuIn 0.22s cubic-bezier(0.4,0,0.2,1) forwards;
  }
  /* Top bar inside overlay */
  .nav-mobile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; flex-shrink: 0;
  }
  .nav-mobile-close {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.6); padding: 4px;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.15s;
  }
  .nav-mobile-close:hover { color: #fff; }
  /* Vertically centered body */
  .nav-mobile-body {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding-bottom: 40px;
  }
  .nav-mobile-inner {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
  }
  .nav-mobile-link {
    display: block; text-align: center;
    padding: 10px 32px; border-radius: 10px;
    font-size: 22px; font-weight: 300; letter-spacing: -0.2px;
    color: rgba(255,255,255,0.55); text-decoration: none;
    transition: color 0.15s, background 0.15s;
  }
  .nav-mobile-link:hover { color: #fff; background: rgba(255,255,255,0.05); }
  .nav-mobile-divider {
    display: block;
    height: 1px; background: rgba(255,255,255,0.08);
    width: calc(100% - 48px); margin: 16px 0;
  }
  .nav-mobile-actions {
    padding: 0 24px; display: flex; justify-content: center; gap: 10px;
  }
  .nav-mobile-actions .navbar-btn {
    height: 44px; padding: 0 24px; font-size: 14px;
    font-weight: 300; border-radius: 14px;
  }
  .nav-mobile-actions .navbar-btn-dark { background: #fff; color: #0f0f0f; border: none; }
  .nav-mobile-actions .navbar-btn-dark:hover { background: #e8e8e8; }

  /* ─── Responsive breakpoint ──────────────────────────── */
  @media (max-width: 820px) {
    .nav-links { display: none; }
    .nav-actions { display: none; }
    .nav-hamburger { display: flex; }
    .navbar-inner { padding: 10px 20px; }
    .navbar.scrolled { padding: 8px 0; }
  }

  /* Page-level navbar overrides */
  .navbar-btn-ghost { display: none !important; }
  .nav-link-active { color: #0f0f0f !important; background: rgba(15,15,15,0.09) !important; font-weight: 300 !important; }
  .navbar:not(.scrolled) .nav-link { color: rgba(255,255,255,0.75) !important; }
  .navbar:not(.scrolled) .nav-dropdown-trigger { color: rgba(255,255,255,0.75) !important; }
  .navbar:not(.scrolled) .nav-link:hover { color: #fff !important; background: rgba(255,255,255,0.1) !important; }
  .navbar:not(.scrolled) .bar { background: #fff !important; }
  .navbar:not(.scrolled) .nav-link-active { color: #fff !important; background: rgba(255,255,255,0.18) !important; }
  .navbar.scrolled .nav-link-active { color: #fff !important; background: rgba(255,255,255,0.14) !important; }
  .nav-link { font-weight: 300 !important; }
/* Reset global nav/footer element selectors that break injected header and footer */
nav.site-nav-links, .site-nav-links {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  height: auto !important; z-index: auto !important; padding: 0 !important;
  background: transparent !important; backdrop-filter: none !important;
  border: none !important; box-shadow: none !important; display: flex !important;
  align-items: center !important; justify-content: flex-start !important;
}
/* Restore the tablet/mobile collapse the reset above unintentionally forced off. */
@media (max-width: 1024px) {
  nav.site-nav-links, .site-nav-links { display: none !important; }
  .menu-toggle { display: flex !important; }
  .site-nav-actions .btn-site-dark { display: none !important; }
  /* ...but let the hamburger's own JS-driven open state win over that collapse,
     restoring every property the reset above also force-overrode. */
  .mobile-nav-open .site-nav-links,
  .mobile-nav-open nav.site-nav-links {
    display: block !important;
    position: fixed !important;
    margin: 0 !important; inset: auto !important;
    top: 68px !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: calc(100vh - 68px) !important;
    background: #0a0a0b !important; padding: 24px !important; overflow-y: scroll !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4) !important;
    z-index: 99 !important;
  }
}
nav.footer-columns, .footer-columns {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  height: auto !important; z-index: auto !important; padding: 0 !important;
  background: transparent !important; backdrop-filter: none !important;
  border: none !important; box-shadow: none !important;
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: 32px !important; align-items: start !important;
}
footer.site-footer {
  position: static !important;
  padding: 72px 0 36px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: #0D0D1A !important;
}
.footer-container {
  width: 100% !important;
  max-width: 1248px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}
.footer-top {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 60px !important;
  margin-bottom: 64px !important;
  padding: 0 !important;
  border: none !important;
}
.footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 28px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  background: transparent !important;
}
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr !important; gap: 40px !important; }
  nav.footer-columns, .footer-columns { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  nav.footer-columns, .footer-columns { grid-template-columns: 1fr 1fr !important; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; }
}
/* ── Mega dropdown UI fixes: no underlines, better spacing ── */
.mega-feat-item { text-decoration: none !important; padding: 12px 14px !important; }
.mega-feat-name { text-decoration: none !important; }
.mega-feat-desc { text-decoration: none !important; }
.mega-feat-list { gap: 8px !important; }
.mega-feat-body { gap: 5px !important; }
.mega-feat-icon { width: 38px !important; height: 38px !important; }