/* ==========================================================================
   FunnelUX — Premium Redesign Enhancement Layer
   --------------------------------------------------------------------------
   Loaded AFTER style.css so it refines the existing dark theme without
   destructively editing the 126KB base stylesheet. Direction: elevate the
   current dark glassmorphism toward a Linear / Vercel / Raycast polish while
   preserving the #1e40af -> #06d6a0 brand and all existing integrations
   (Swiper, Calendly, intl-tel-input, PHP forms).

   Scope: currently linked on index.html (homepage flagship).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens — extend the palette, add an 8px spacing scale,
      an elevation/shadow scale, and focus/hover primitives.
   -------------------------------------------------------------------------- */
:root {
    /* Brand (unchanged, brought into the token layer) */
    --fx-brand-1: #1e40af;
    --fx-brand-2: #06d6a0;
    --fx-brand-grad: linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #06d6a0 100%);
    --fx-brand-grad-soft: linear-gradient(135deg, rgba(30, 64, 175, .15), rgba(6, 214, 160, .15));

    /* Dark surface ramp (Linear/Vercel-style depth) */
    --fx-bg: #0b0f1a;
    --fx-surface-1: rgba(255, 255, 255, .04);
    --fx-surface-2: rgba(255, 255, 255, .06);
    --fx-border: rgba(255, 255, 255, .10);
    --fx-border-strong: rgba(255, 255, 255, .16);

    /* 8px spacing scale */
    --fx-space-1: 8px;
    --fx-space-2: 16px;
    --fx-space-3: 24px;
    --fx-space-4: 32px;
    --fx-space-5: 40px;
    --fx-space-6: 48px;
    --fx-space-8: 64px;
    --fx-space-10: 80px;
    --fx-space-12: 96px;

    /* Elevation scale (softer, more premium than the base shadows) */
    --fx-shadow-sm: 0 1px 2px rgba(2, 6, 23, .08), 0 2px 6px rgba(2, 6, 23, .06);
    --fx-shadow-md: 0 4px 12px rgba(2, 6, 23, .10), 0 10px 24px rgba(2, 6, 23, .08);
    --fx-shadow-lg: 0 12px 28px rgba(2, 6, 23, .14), 0 24px 60px rgba(2, 6, 23, .12);
    --fx-shadow-brand: 0 12px 34px rgba(6, 214, 160, .28);

    /* Focus ring + easing */
    --fx-focus: 0 0 0 3px rgba(6, 214, 160, .45), 0 0 0 5px rgba(30, 64, 175, .35);
    --fx-ease: cubic-bezier(.22, .61, .36, 1);
    --fx-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* Section rhythm — tightened for a denser, professional feel (was too airy).
       Desktop stays a touch larger than mobile without the huge empty gaps. */
    --section-padding: clamp(40px, 4.5vw, 68px) 0;
    --section-padding-mobile: 44px 0;

    /* Tighter, more standard card radius (base 20px read too "bubbly") */
    --card-radius: 14px;

    /* height of the client-logo strip under the hero */
    --cls-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Typography — actually apply Inter (base CSS referenced it but never
      loaded it) and establish a fluid, premium type scale.
   -------------------------------------------------------------------------- */
body {
    font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5,
.section-title,
.hero h1,
.service-card-h3 {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* Moderated, professional type scale (previous scale ran too large) */
.hero h1 {
    font-size: clamp(1.85rem, 3.6vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.section-title {
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.section-intro p,
.hero p {
    font-size: clamp(0.98rem, 1vw, 1.08rem);
    line-height: 1.6;
    letter-spacing: -0.003em;
}

.service-card-h3,
.package-card-new .package-header h3 {
    font-size: 1.15rem;
    letter-spacing: -0.015em;
    font-weight: 700;
}

.service-card-new .description,
.service-card-new .features li {
    font-size: 0.92rem;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   3. Global safety + accessibility primitives
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

img { max-width: 100%; height: auto; }

/* Consistent, visible keyboard focus (base theme had none) */
a:focus-visible,
button:focus-visible,
.cta-button:focus-visible,
.tab-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.mobile-menu-toggle:focus-visible {
    outline: none;
    box-shadow: var(--fx-focus);
    border-radius: 12px;
}

/* --------------------------------------------------------------------------
   4. Navigation — cleaner link interaction (underline grow instead of the
      dated box-shadow lift), refined active state, better focus.
   -------------------------------------------------------------------------- */
header {
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}

header.scrolled {
    box-shadow: 0 6px 24px rgba(2, 6, 23, .12);
}

.nav-links a {
    color: #1f2440;
    transition: color .25s var(--fx-ease);
}

/* Replace the glow box with a growing gradient underline */
.nav-links a::before {
    top: auto;
    bottom: 6px;
    left: 20px;
    width: calc(100% - 40px);
    height: 2px;
    background: var(--fx-brand-grad);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 1;
    transition: transform .3s var(--fx-ease);
}

.nav-links a:hover::before { transform: scaleX(1); }

.nav-links a:hover {
    color: var(--fx-brand-1);
    transform: none;
    box-shadow: none;
}

.nav-links a.active {
    color: var(--fx-brand-1);
    background: var(--fx-brand-grad-soft);
}

/* --------------------------------------------------------------------------
   5. Hero — branded depth (gradient + glow over the photo), refined CTA row,
      and a truthful trust strip. Keeps the .hero h1 typewriter untouched.
   -------------------------------------------------------------------------- */
/* Reduce the full-screen empty feel: shorter hero, tighter padding */
.hero {
    min-height: auto;
    padding: 118px 20px 72px;
}

/* Tame the oversized "large" section padding used on some bands */
.section-padding-large { padding: clamp(48px, 5vw, 76px) 0 !important; }

/* Layered overlay: deep navy gradient for legibility + subtle brand glow */
.hero::before {
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(37, 99, 235, .28) 0%, transparent 60%),
        linear-gradient(180deg, rgba(6, 10, 22, .78) 0%, rgba(6, 10, 22, .86) 55%, rgba(6, 10, 22, .92) 100%);
}

.hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .45); }

.hero p { color: #e6ebf5; }

/* CTA row: primary + secondary, centered with consistent gap */
.hero .hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fx-space-2);
    justify-content: center;
    align-items: center;
    margin-top: var(--fx-space-1);
}

/* Truthful trust strip (service categories — no invented statistics) */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: center;
    margin-top: var(--fx-space-4);
}

.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #eaf0fb;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-trust span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fx-brand-2);
    box-shadow: 0 0 10px rgba(6, 214, 160, .9);
}

/* --------------------------------------------------------------------------
   6. Buttons — refined gradient, springy lift, glow, and a shine sweep.
   -------------------------------------------------------------------------- */
.cta-button {
    letter-spacing: -0.01em;
    transition: transform .35s var(--fx-ease-spring),
                box-shadow .35s var(--fx-ease),
                filter .35s var(--fx-ease);
}

.cta-button-primary {
    background: var(--fx-brand-grad);
    box-shadow: 0 8px 22px rgba(30, 64, 175, .28);
}

.cta-button-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, .35) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .7s var(--fx-ease);
    pointer-events: none;
}

.cta-button-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--fx-shadow-brand);
    filter: saturate(1.05) brightness(1.03);
}

.cta-button-primary:hover::after { transform: translateX(120%); }

/* base style.css has a SECOND, later `.cta-button { background: <brand-gradient> }`
   rule (~line 4012) that wins the cascade over `.cta-button-light` and
   `.cta-button-outline-white` (same specificity, later source order) — every
   "light"/"outline" button site-wide was silently rendering as a solid brand
   gradient instead of white/transparent. Restore the intended look here,
   since redesign.css loads after style.css and settles the tie correctly. */
.cta-button-light {
    background: #ffffff;
    color: #1e40af !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
}
.cta-button-light:hover {
    background: #f8fafc;
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
}
.cta-button-outline-white {
    background: transparent;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, .6);
    box-shadow: none;
}
.cta-button-outline-white:hover {
    background: rgba(255, 255, 255, .15);
    border-color: #ffffff;
}

/* --------------------------------------------------------------------------
   7. Section rhythm + titles — gradient accent underline, consistent intro.
   -------------------------------------------------------------------------- */
.section-intro { max-width: 680px; margin-bottom: clamp(24px, 3vw, 36px); }

.section-intro.text-center { margin-left: auto; margin-right: auto; }

/* Tighten the gap under section headings so content flows closer together */
.section-title { margin-bottom: 14px; }
.section-intro p { margin-bottom: 0; }

/* Refine the base ::after underline into a clean brand accent bar */
.section-title:after {
    background: var(--fx-brand-grad);
    height: 4px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   8. Cards — premium lift with a brand border-glow on hover.
      Neutralises the JS micro-parallax jitter transform to a clean lift.
   -------------------------------------------------------------------------- */
.service-card-new {
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: var(--fx-shadow-sm);
    transition: transform .4s var(--fx-ease), box-shadow .4s var(--fx-ease), border-color .4s var(--fx-ease);
}

.service-card-new:hover {
    box-shadow: var(--fx-shadow-lg);
    border-color: rgba(6, 214, 160, .5);
}

.package-card-new {
    transition: transform .4s var(--fx-ease), box-shadow .4s var(--fx-ease), border-color .4s var(--fx-ease);
}

.package-card-new:hover {
    box-shadow: var(--fx-shadow-lg);
    border-color: rgba(6, 214, 160, .5);
}

/* --------------------------------------------------------------------------
   9. Forms / inputs — clearer focus affordance with a brand ring.
   -------------------------------------------------------------------------- */
.form-group input,
.form-group select,
.form-group textarea,
.form-group-premium input,
.form-group-premium select,
.form-group-premium textarea {
    transition: border-color .25s var(--fx-ease), box-shadow .25s var(--fx-ease), background-color .25s var(--fx-ease);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-group-premium input:focus,
.form-group-premium select:focus,
.form-group-premium textarea:focus {
    outline: none;
    border-color: var(--fx-brand-2);
    box-shadow: 0 0 0 3px rgba(6, 214, 160, .18);
}

/* intl-tel-input country dropdown, opened via dropdownContainer: document.body
   (forms.js) — its width no longer comes from the input's parent, so JS sets
   an inline width on .iti--container to match the phone field on open; this
   just makes the inner list actually fill that width instead of using the
   library's own fixed default. */
.iti__country-list { width: 100% !important; box-sizing: border-box; }

/* --------------------------------------------------------------------------
   10. Reveal-on-scroll polish — smoother easing + a gentle stagger that
       cooperates with the existing IntersectionObserver in animations.js.
   -------------------------------------------------------------------------- */
.animate-on-scroll {
    transition: opacity .7s var(--fx-ease), transform .7s var(--fx-ease);
    transform: translateY(24px);
    will-change: opacity, transform;
}

.animate-on-scroll.animated {
    transform: translateY(0);
    will-change: auto;
}

/* --------------------------------------------------------------------------
   11. Responsive guards — no horizontal overflow, tighter mobile rhythm.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero { padding-top: 104px; }
    .hero .hero-cta-row { flex-direction: column; }
    .hero .hero-cta-row .cta-button { width: 100%; max-width: 320px; }
    .hero-trust span { font-size: .78rem; padding: 7px 13px; }
}

/* --------------------------------------------------------------------------
   12. Accessibility — honour reduced-motion. Disables the shimmer/parallax/
       reveal transforms and the animated grid for users who opt out.
       (The JS typewriter is additionally guarded in animations.js.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .hero::after { animation: none; }

    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero .container { transform: none !important; opacity: 1 !important; }
}

/* ==========================================================================
   13. LIGHT THEME PIVOT (UK-app / Stripe-style)
   --------------------------------------------------------------------------
   Flip the four remaining dark bands (hero, process, newsletter, contact) and
   the page background to a light, dense, professional palette. The other
   sections (services, packages, about, projects, reviews, book-demo, footer)
   were already light and are intentionally left untouched.
   ========================================================================== */
:root {
    --fx-ink: #0f172a;
    --fx-ink-soft: #475569;
    --fx-page: #f7f8fb;
    --fx-line: rgba(15, 23, 42, .10);
}

body { background: var(--fx-page); color: var(--fx-ink); }

/* ---- Hero -> light ---- */
.hero {
    background: linear-gradient(180deg, #ffffff 0%, #eef2fb 60%, #e9f7f2 100%);
    border-bottom: 1px solid var(--fx-line);
}

.hero::before {
    background:
        radial-gradient(60% 55% at 50% -5%, rgba(37, 99, 235, .14) 0%, transparent 60%),
        radial-gradient(42% 42% at 85% 18%, rgba(6, 214, 160, .12) 0%, transparent 60%);
}

.hero::after {
    /* dotted grid, subtle on light */
    background: radial-gradient(circle, rgba(30, 64, 175, .07) 1px, transparent 2px);
}

.hero h1 { color: var(--fx-ink); text-shadow: none; }
.hero p  { color: var(--fx-ink-soft); text-shadow: none; }

.hero-trust span {
    color: #0f2440;
    background: #ffffff;
    border-color: var(--fx-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 2px rgba(2, 6, 23, .06);
}

/* The "Explore Services" outline button needs dark-on-light treatment now */
.hero .cta-button-outline-white {
    color: #1e40af !important;
    background: #ffffff;
    border-color: rgba(30, 64, 175, .30);
    box-shadow: 0 1px 2px rgba(2, 6, 23, .06);
}

.hero .cta-button-outline-white:hover {
    background: #f1f5ff;
    border-color: #1e40af;
}

/* ---- Process -> light ---- */
#process .section-overlay { background: rgba(247, 248, 251, .93) !important; }
#process .section-title,
#process .section-intro p { color: var(--fx-ink) !important; }

/* ---- Newsletter form on the soft brand band ---- */
#newsletter .input-group input {
    background: #ffffff;
    color: var(--fx-ink);
    border: 1px solid var(--fx-line);
}
#newsletter .benefit-item,
#newsletter .benefit-item span { color: var(--fx-ink-soft) !important; }

/* ---- Contact -> light ---- */
#contact .section-overlay { background: rgba(247, 248, 251, .94) !important; }
#contact .section-title,
#contact .section-intro p { color: var(--fx-ink) !important; }
#contact .success-quote p { color: var(--fx-ink-soft) !important; }

.contact-form-premium {
    background: #ffffff;
    border: 1px solid var(--fx-line);
    box-shadow: var(--fx-shadow-md);
}
.contact-form-premium label { color: var(--fx-ink) !important; }
.contact-form-premium input,
.contact-form-premium textarea,
.contact-form-premium select {
    background: #ffffff !important;
    color: var(--fx-ink) !important;
    border: 1px solid var(--fx-line) !important;
}
.contact-form-premium input::placeholder,
.contact-form-premium textarea::placeholder { color: #94a3b8 !important; }

/* Footer already light — guard against any dark page bleed below it */
footer { background: #ffffff; }

/* ==========================================================================
   14. HERO BANNER (media + overlaid text + key-feature strip)
   --------------------------------------------------------------------------
   Full-width banner: looping stock video (image poster/fallback) behind a
   branded gradient overlay, left-aligned headline + CTAs, and a highlighted
   key-feature strip anchored across the bottom. Overrides the earlier hero
   rules (sections 5 & 13).
   ========================================================================== */
.hero.hero-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;    /* override base .hero align-items:center that was
                                shrinking children to content width (indenting text) */
    justify-content: flex-start;
    /* The hero + the client-logo strip below it together fill exactly one
       viewport, so landing shows the video slider AND the logos, with the
       feature-card peak starting just past the fold. --cls-h is the strip's
       height (kept in sync with .client-logos-strip padding/content). */
    min-height: calc(100vh - var(--cls-h));
    min-height: calc(100dvh - var(--cls-h));
    padding: 0;
    text-align: left;
    background: #0b0b0c;
    border-bottom: none;
    overflow: hidden;
}

/* Disable the old ::before/::after overlays + dotted grid on the banner */
.hero.hero-banner::before,
.hero.hero-banner::after { content: none; display: none; }

/* --- Background media --- */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .9;
}

/* Neutral scrim only — no brand colour wash over the footage. Darker on the
   left/bottom where the copy sits so the video stays true to its own colours. */
.hero-media-overlay {
    position: absolute;
    inset: 0;
    /* Video shows natural — no colour wash, no heavy dark layer. Just a
       whisper of shading at the very left/bottom edges so white type keeps
       contrast; readability is carried mainly by text-shadow below. */
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .18) 100%);
}

/* --- Overlaid content --- */
.hero-inner {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    /* Top padding clears the fixed offer-banner + nav (~130px) so the
       eyebrow badge is never tucked under the header. */
    padding: 156px 0 48px;
}

.hero.hero-banner .hero-content {
    /* Fill the flex line (don't shrink-to-content) and cap at the 1200px
       content width so the text left-edge lines up with the sections below.
       flex + width:100% stops the shrink; !important beats base max-width:1000. */
    flex: 1 1 auto;
    width: 100%;
    max-width: 1200px !important;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #eef3fc;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.35;              /* prevents descenders (g, p) being clipped */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Pulsing status dot */
.hero-eyebrow .he-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #06d6a0;
    box-shadow: 0 0 0 0 rgba(6, 214, 160, .6);
    animation: heDotPulse 2s ease-out infinite;
}

@keyframes heDotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(6, 214, 160, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(6, 214, 160, 0); }
    100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-eyebrow .he-dot { animation: none; }
}

.hero.hero-banner h1 {
    color: #ffffff;
    text-align: left;
    /* carries legibility now that the video plays unobscured */
    text-shadow: 0 2px 10px rgba(0, 0, 0, .78), 0 4px 34px rgba(0, 0, 0, .60);
    max-width: 820px;
}

/* Animated rotating word */
.word-rotator {
    display: inline-block;
    vertical-align: bottom;
    min-height: 1.15em;
}

.wr-word {
    display: inline-block;
    background: linear-gradient(100deg, #ffffff 0%, #34d399 55%, #38bdf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    transition: opacity .45s var(--fx-ease), transform .45s var(--fx-ease);
}

.wr-word.wr-out {
    opacity: 0;
    transform: translateY(14px);
}

.hero.hero-banner p {
    color: #f1f5fb;
    text-align: left;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .80), 0 2px 20px rgba(0, 0, 0, .55);
    margin-left: 0;
    margin-right: 0;
    max-width: 600px;
}

.hero.hero-banner .hero-cta-row { justify-content: flex-start; }

/* Outline button back to white-on-media treatment */
.hero.hero-banner .cta-button-outline-white {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .6);
    box-shadow: none;
}
.hero.hero-banner .cta-button-outline-white:hover {
    background: rgba(255, 255, 255, .16);
    border-color: #ffffff;
}

/* --- Curved "hill" divider with a glowing, ringed badge at the apex ---
   A smooth bezier curve (SVG mask) replaces the old hard-angled clip-path
   triangle; the gradient rim gently shimmers left-to-right, and the badge
   gets a soft halo glow plus a slow-rotating conic-gradient ring so the
   apex reads as a deliberate focal point rather than a plain circle. */
.hero-peak {
    position: relative;
    z-index: 3;
    /* now a standalone band between the logo strip and the services section;
       white background so the curved cut blends with the strip above */
    background: #ffffff;
    padding: 104px 20px 46px;
}

/* Two stacked masked layers make the curved peak with a gradient edge line.
   (Parent is NOT masked, so the gradient rim isn't cut off.) Only the top
   110px band is masked — the rest of the section is just the plain white
   background above, so the mask never has to stretch with section height. */
.hero-peak::before,
.hero-peak::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 110px;
    z-index: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 110' preserveAspectRatio='none'%3E%3Cpath d='M0,110 L0,40 C300,2 900,2 1200,40 L1200,110 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 110' preserveAspectRatio='none'%3E%3Cpath d='M0,110 L0,40 C300,2 900,2 1200,40 L1200,110 Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.hero-peak::before {
    background: linear-gradient(90deg, #1e40af, #06d6a0, #7c3aed, #1e40af);
    background-size: 220% 100%;
    animation: heRimShimmer 7s ease-in-out infinite;
}
.hero-peak::after { background: #ffffff; top: 4px; }   /* 4px lower reveals the gradient rim */
@keyframes heRimShimmer {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
}

.hero-peak > * { position: relative; z-index: 2; }

/* Circular badge at the apex — soft glow halo, rotating gradient ring,
   and an expanding pulse ring reinforce it as the section's focal point */
.hero-peak-badge {
    position: absolute;
    /* peak is now a standalone band under the logo strip — keep the badge
       inside it so it can't poke up through the strip above the fold */
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #ffffff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 26px rgba(2, 6, 23, .18), 0 0 46px 14px rgba(6, 214, 160, .18);
    border: 1px solid rgba(15, 23, 42, .06);
    z-index: 4;
}
.hero-peak-badge::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #1e40af, #06d6a0, #7c3aed, #1e40af);
    z-index: -1;
    animation: heBadgeSpin 8s linear infinite;
}
.hero-peak-badge::after {
    content: "";
    position: absolute;
    inset: -13px;
    border-radius: 50%;
    border: 2px solid rgba(6, 214, 160, .5);
    opacity: .6;
    animation: heBadgePulse 2.6s ease-out infinite;
}
@keyframes heBadgeSpin { to { transform: rotate(360deg); } }
@keyframes heBadgePulse {
    0%   { transform: scale(.88); opacity: .6; }
    100% { transform: scale(1.55); opacity: 0; }
}
.hero-peak-badge img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;   /* square, centered mark keeps aspect ratio */
    position: relative;
    z-index: 1;
}

.hero-peak-inner {
    max-width: 1120px;
    margin: 0 auto;
}

/* Higher specificity + resets to beat `.hero.hero-banner p` (which was making
   this light-grey with a text-shadow — invisible/blurry on the white peak) */
.hero.hero-banner .hero-peak-eyebrow {
    text-align: center;
    color: #475569;
    text-shadow: none;
    font-weight: 600;
    font-size: .92rem;
    max-width: none;
    margin: 0 auto 22px;
}

/* section heading tag above the eyebrow */
.hero-peak-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fx-brand-1);
    background: var(--fx-brand-grad-soft);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 10px;
}

/* --- fxk- : "FunnelUX stack" — a literal stacked-layers strip (all 7
   services). Each card carries two colour-matched "echo" layers behind it
   via stacked box-shadows (no extra markup), so every tile visually reads
   as the top card of its own little deck; on wide screens the tiles also
   ride a gentle staircase rhythm (alternating margin-top) instead of
   sitting in one flat monotone row. Hovering fans the layers out further
   and lifts + tilts the card. Replaces the old flat 7-column strip. */
.fxk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 30px 22px;
    margin-top: 34px;
}

.fxk-card {
    position: relative;
    flex: 1 1 128px;
    max-width: 168px;
    display: flex;
    flex-direction: column;
    text-align: left;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    padding: 18px 14px 20px;
    opacity: 0;
    animation: fxkRise .6s var(--fx-ease) forwards;
    transition: transform .4s var(--fx-ease), box-shadow .45s var(--fx-ease), border-color .4s var(--fx-ease);
    box-shadow:
        9px 9px 0 -5px color-mix(in srgb, var(--fxk-c) 30%, transparent),
        18px 17px 0 -10px color-mix(in srgb, var(--fxk-c) 14%, transparent),
        var(--fx-shadow-sm);
}
@keyframes fxkRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fxk-row .fxk-card:nth-child(1) { animation-delay: .05s; }
.fxk-row .fxk-card:nth-child(2) { animation-delay: .11s; }
.fxk-row .fxk-card:nth-child(3) { animation-delay: .17s; }
.fxk-row .fxk-card:nth-child(4) { animation-delay: .23s; }
.fxk-row .fxk-card:nth-child(5) { animation-delay: .29s; }
.fxk-row .fxk-card:nth-child(6) { animation-delay: .35s; }
.fxk-row .fxk-card:nth-child(7) { animation-delay: .41s; }

.fxk-card:hover {
    animation: none; opacity: 1;
    transform: translateY(-9px) rotate(-1deg);
    border-color: var(--fxk-c);
    box-shadow:
        14px 13px 0 -5px color-mix(in srgb, var(--fxk-c) 45%, transparent),
        27px 24px 0 -10px color-mix(in srgb, var(--fxk-c) 22%, transparent),
        var(--fx-shadow-lg);
}

.fxk-step {
    position: absolute;
    top: 10px; right: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .58rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--fxk-c) 55%, transparent);
}

.fxk-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; padding-right: 20px; }
.fxk-ic {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    font-size: 1.1rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--fxk-c) 16%, #fff);
    border: 1px solid color-mix(in srgb, var(--fxk-c) 30%, transparent);
    transition: transform .35s var(--fx-ease-spring);
}
.fxk-card:hover .fxk-ic { transform: scale(1.1) rotate(-6deg); }

.fxk-stat {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: -.02em;
    color: var(--fxk-c);
    line-height: 1;
}
.fxk-name {
    display: block;
    font-size: .84rem;
    font-weight: 700;
    color: var(--fx-ink);
    line-height: 1.25;
    margin-bottom: 3px;
}
.fxk-desc {
    display: block;
    font-size: .71rem;
    color: #64748b;
    line-height: 1.35;
}
.fxk-arrow {
    position: absolute;
    right: 14px; bottom: 14px;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--fxk-c);
    color: #fff;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .3s var(--fx-ease), transform .3s var(--fx-ease);
}
.fxk-card:hover .fxk-arrow { opacity: 1; transform: none; }

/* staircase rhythm — only once we're confident all 7 sit in a single row */
@media (min-width: 1240px) {
    .fxk-row .fxk-card:nth-child(odd) { margin-top: 0; }
    .fxk-row .fxk-card:nth-child(even) { margin-top: 24px; }
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .hero-peak { padding-top: 70px; }
    .hero-peak::before, .hero-peak::after { height: 84px; }
}

@media (max-width: 768px) {
    .hero.hero-banner { min-height: auto; }
    .hero-inner { padding: 156px 0 24px; }   /* clears the taller 2-line mobile offer banner */
}

@media (max-width: 520px) {
    .hero-peak-eyebrow { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none; }
    .hero-peak::before { animation: none; background-position: 0 0; }
    .hero-peak-badge::before { animation: none; }
    .hero-peak-badge::after { animation: none; opacity: 0; }
}

/* ==========================================================================
   15. SERVICES SHOWCASE (left header + staggered cards, reference-styled)
   ========================================================================== */
.services-showcase {
    position: relative;
    /* attractive tinted panel with soft brand glows */
    background:
        radial-gradient(55% 45% at 88% 6%, rgba(56, 189, 248, .13), transparent 60%),
        radial-gradient(45% 40% at 6% 94%, rgba(244, 114, 182, .13), transparent 60%),
        linear-gradient(180deg, #eef2fb 0%, #f6f9ff 55%, #e9f0fb 100%);
    overflow: hidden;
    /* unique slanted top + bottom separators (parallelogram) */
    clip-path: polygon(0 40px, 100% 0, 100% calc(100% - 40px), 0 100%);
    padding: clamp(40px, 3.4vw, 58px) 0;
    margin-top: -1px;
}

/* match the hero's content width so the left margin lines up (consistency) */
.services-showcase .container { max-width: 1200px; }

.services-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 24px 26px;
    align-items: start;
}

/* --- Header --- */
.services-head { position: relative; }
.services-head .svc-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1e40af;
    margin-bottom: 12px;
}
.services-head .section-title {
    text-align: left;
    margin-bottom: 18px;
}
.services-head .section-title:after {
    left: 0;
    margin-left: 0;
    transform: none;
}
.services-head .svc-sub {
    color: #475569;
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 26px;
    max-width: 330px;
}
.svc-head-cta { display: inline-flex; }

/* --- Staggered cards --- */
.services-stagger {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    align-items: stretch;      /* equal-height cards, cleanly aligned */
}

.svc-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    padding: 26px 20px 22px;
    text-decoration: none;
    box-shadow: var(--fx-shadow-sm);
    transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease), border-color .35s var(--fx-ease);
}
/* gradient accent bar that sweeps in on hover */
.svc-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--fx-brand-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--fx-ease);
}
.svc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--fx-shadow-lg);
    border-color: rgba(6, 214, 160, .45);
}
.svc-card:hover::before { transform: scaleX(1); }

.svc-ic {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 14px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05);
}
.svc-ic-1 { background: linear-gradient(135deg, #93c5fd, #dbeafe); }
.svc-ic-2 { background: linear-gradient(135deg, #f9a8d4, #fce7f3); }
.svc-ic-3 { background: linear-gradient(135deg, #6ee7b7, #d1fae5); }
.svc-ic-4 { background: linear-gradient(135deg, #fcd34d, #fef3c7); }
.svc-ic-5 { background: linear-gradient(135deg, #c4b5fd, #ede9fe); }

.svc-card h3 {
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--fx-ink);
    margin-bottom: 7px;
    letter-spacing: -0.01em;
}
.svc-card p {
    font-size: .86rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 16px;
}

.svc-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-top: auto;
    color: #ffffff;
    background: var(--fx-brand-grad);
    box-shadow: 0 6px 16px rgba(30, 64, 175, .28);
    transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
.svc-card:hover .svc-arrow {
    transform: translateX(4px) scale(1.06);
    box-shadow: var(--fx-shadow-brand);
}

/* gradient CTA card (fills the grid, adds a conversion prompt) */
.svc-card-cta {
    background: var(--fx-brand-grad);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(30, 64, 175, .28);
}
.svc-card-cta::before { display: none; }
.svc-card-cta h3 { color: #ffffff; }
.svc-card-cta p { color: rgba(255, 255, 255, .88); }
.svc-card-cta .svc-ic-cta {
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.svc-card-cta .svc-arrow {
    background: #ffffff;
    color: var(--fx-brand-1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.svc-card-cta:hover { border-color: transparent; }

/* featured card */
.svc-card-featured { border-color: rgba(6, 214, 160, .55); }
.svc-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--fx-brand-grad);
    padding: 5px 10px;
    border-radius: 999px;
}

/* --- Decorative background --- */
.svc-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    opacity: .55;
    pointer-events: none;
}
.svc-blob-1 {
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(244, 114, 182, .45), transparent 70%);
    top: 40px; right: -60px;
}
.svc-blob-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(56, 189, 248, .38), transparent 70%);
    bottom: -50px; left: 18%;
}

.svc-shape {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: .8;
}
.svc-tri {
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 16px solid #f59e0b;
    top: 120px; left: 42%;
    animation: svcFloat 7s ease-in-out infinite;
}
.svc-ring {
    width: 26px; height: 26px;
    border: 3px solid #22d3ee;
    border-radius: 50%;
    right: 6%; bottom: 30%;
    animation: svcFloat 9s ease-in-out infinite;
}
.svc-plus {
    color: #a78bfa;
    font-weight: 700;
    font-size: 1.6rem;
    right: 38%; top: 66px;
    animation: svcFloat 8s ease-in-out infinite;
}

.svc-rocket {
    position: absolute;
    left: 10px;
    bottom: 46px;
    font-size: 82px;
    line-height: 1;
    z-index: 1;
    opacity: .92;
    pointer-events: none;
    animation: svcFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 12px 16px rgba(2, 6, 23, .16));
}

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

/* --- Responsive --- */
@media (max-width: 992px) {
    .services-layout { grid-template-columns: 1fr; gap: 28px; }
    .services-head .svc-sub { max-width: 560px; }
    .services-stagger { grid-template-columns: repeat(2, 1fr); }
    .svc-card:nth-child(3n+1),
    .svc-card:nth-child(3n+3) { margin-top: 0; }
    .svc-rocket { display: none; }
}

@media (max-width: 560px) {
    .services-stagger { grid-template-columns: 1fr; }
    .svc-blob, .svc-shape { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-rocket, .svc-shape { animation: none; }
}

/* ==========================================================================
   16. PACKAGES / PRICING (creative redesign + advanced animations)
   ========================================================================== */
.service-packages {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(48% 38% at 10% 6%, rgba(30, 64, 175, .09), transparent 62%),
        radial-gradient(46% 40% at 92% 96%, rgba(6, 214, 160, .11), transparent 62%),
        linear-gradient(180deg, #eef3fb 0%, #e4ecfa 100%);
    /* unique separators: flat top nests under the services slant; slanted bottom */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 42px), 0 100%);
    padding: clamp(36px, 4vw, 56px) 0 clamp(48px, 5vw, 68px);
    margin-top: -1px;
}
.service-packages .container { max-width: 1200px; position: relative; z-index: 2; }

/* decorative blobs */
.pkg-deco {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    z-index: 0;
    pointer-events: none;
    opacity: .5;
}
.pkg-blob-1 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(56,189,248,.4), transparent 70%); top: -40px; left: -60px; }
.pkg-blob-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(167,139,250,.35), transparent 70%); bottom: 20px; right: -50px; }

/* --- header --- */
.packages-intro { text-align: center; margin-bottom: 18px; }
.pkg-eyebrow {
    display: inline-block;
    font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #1e40af; margin-bottom: 6px;
}
.service-packages .section-title { text-align: center; margin-bottom: 8px; }
.service-packages .section-title:after { left: 50%; transform: translateX(-50%); margin-left: 0; }
.pkg-sub { color: #475569; font-size: .94rem; line-height: 1.55; max-width: 560px; margin: 10px auto 0; }

/* --- tabs: segmented pill control --- */
.package-tabs {
    width: fit-content;
    margin: 0 auto 22px;
    gap: 4px;
    padding: 5px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    box-shadow: var(--fx-shadow-sm);
}
.tab-btn {
    border: none;
    background: transparent;
    color: #475569;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .88rem;
    transition: color .3s var(--fx-ease), background .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
.tab-btn.active {
    background: var(--fx-brand-grad);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(30, 64, 175, .28);
}
.tab-btn:hover:not(.active) {
    color: #1e40af;
    background: rgba(30, 64, 175, .06);
    border-color: transparent;
}

/* --- billing toggle (Monthly / Yearly, 10% off) --- */
.billing-toggle {
    display: flex;
    width: fit-content;
    margin: 0 auto 18px;
    gap: 4px;
    padding: 5px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 999px;
    box-shadow: var(--fx-shadow-sm);
}
.billing-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    color: #475569;
    padding: 9px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    transition: color .3s var(--fx-ease), background .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
.billing-btn.active {
    background: var(--fx-brand-grad);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(30, 64, 175, .28);
}
.billing-btn:hover:not(.active) {
    color: #1e40af;
    background: rgba(30, 64, 175, .06);
}
.billing-badge {
    background: rgba(15, 23, 42, .85);
    color: #ffffff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .01em;
    padding: 3px 8px;
    border-radius: 999px;
}
.billing-btn.active .billing-badge { background: rgba(255, 255, 255, .22); }

/* price swap: discounted figure primary, original struck through and muted */
.package-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.package-price .price-was {
    font-size: .8rem;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: line-through;
    order: 3;
}

/* --- grid --- */
.service-packages .packages-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: stretch;
}
@media (max-width: 920px) {
    .service-packages .packages-grid { grid-template-columns: 1fr; max-width: 440px; }
}

/* --- cards --- */
.package-card-new {
    padding: 20px 20px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: var(--fx-shadow-md);
    background: #ffffff;
    transition: transform .4s var(--fx-ease), box-shadow .4s var(--fx-ease), border-color .4s var(--fx-ease);
}
.package-card-new:hover {
    transform: translateY(-8px);
    box-shadow: var(--fx-shadow-lg);
    border-color: rgba(30, 64, 175, .28);
}

/* featured: gradient border + scale + glow */
.package-card-new.featured {
    border: 2px solid transparent;
    background: linear-gradient(#ffffff, #ffffff) padding-box, var(--fx-brand-grad) border-box;
    transform: scale(1.03);
    box-shadow: 0 26px 52px rgba(30, 64, 175, .22);
    z-index: 2;
}
.package-card-new.featured:hover { transform: scale(1.03) translateY(-8px); }

.package-card-new .package-header h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--fx-ink);
    letter-spacing: -0.02em;
    margin-bottom: 3px;
}
.package-card-new .package-header .subtitle { color: #64748b; font-size: .82rem; }

.popular-badge {
    background: var(--fx-brand-grad) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(30, 64, 175, .3);
    letter-spacing: .03em;
    font-size: .68rem !important;
    padding: 5px 12px !important;
}

/* price was a base-theme 3.5rem figure with no margin control — way too
   much vertical weight for a compact card */
.package-price {
    font-size: 1.9rem !important;
    margin: 6px 0 2px !important;
}
.package-price span { font-size: .82rem !important; }

/* features with gradient check icons */
.package-features ul { list-style: none; padding: 0; margin: 10px 0 14px; }
.package-features li {
    position: relative;
    padding: 5px 0 5px 28px;
    color: #334155;
    font-size: .86rem;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.package-features li:last-child { border-bottom: none; }
.package-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fx-brand-grad);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
}

/* CTA fills bottom — base style.css forces every card button (regardless of
   its secondary/primary class) to a flat solid colour: plain blue for
   regular cards, plain teal for `.featured` (see the compound selector
   `.package-card-new a.cta-button` / `.package-card-new.featured a.cta-button`
   in style.css). That made buttons inconsistent with the single brand
   gradient button used everywhere else on the site. Unify all of them here. */
.package-card-new a.cta-button,
.package-card-new.featured a.cta-button {
    margin-top: auto;
    background: var(--fx-brand-grad);
    box-shadow: 0 8px 22px rgba(30, 64, 175, .28);
    padding: 11px 20px;
    font-size: .9rem;
}
.package-card-new a.cta-button:hover,
.package-card-new.featured a.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--fx-shadow-brand);
    filter: saturate(1.05) brightness(1.03);
}

/* --- ADVANCED: staggered card reveal each time a tab becomes active --- */
.package-tab-pane.active .package-card-new {
    animation: pkgIn .55s var(--fx-ease);
}
.package-tab-pane.active .package-card-new.featured {
    animation: pkgInFeatured .55s var(--fx-ease);
}
.package-tab-pane.active .package-card-new:nth-child(1) { animation-delay: .04s; }
.package-tab-pane.active .package-card-new:nth-child(2) { animation-delay: .14s; }
.package-tab-pane.active .package-card-new:nth-child(3) { animation-delay: .24s; }

@keyframes pkgIn {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pkgInFeatured {
    from { opacity: 0; transform: translateY(26px) scale(1.045); }
    to   { opacity: 1; transform: translateY(0) scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
    .package-tab-pane.active .package-card-new,
    .package-tab-pane.active .package-card-new.featured { animation: none; }
}

/* ==========================================================================
   17. SERVICES PAGE (services.html) — page hero, why-us, process, stats, CTA
   ========================================================================== */
/* --- page hero --- */
.svcpage-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    padding: 118px 20px 92px;
    /* services_page.webp as the hero background, under a branded dark overlay
       so the white headline/subtitle stay readable */
    background:
        /* radial-gradient(60% 70% at 12% 18%, rgba(37, 99, 235, .42), transparent 60%),
        radial-gradient(52% 62% at 90% 8%, rgba(6, 214, 160, .26), transparent 60%),
        linear-gradient(180deg, rgba(9, 14, 28, .82) 0%, rgba(11, 18, 40, .90) 100%), */
        url('../images/services/services_page.webp') center / cover no-repeat;
    /* background-color: #0a1020; */
}
.svcpage-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 2px);
    background-size: 42px 42px;
    opacity: .4;
}
/* diagonal divider into the (light) services grid */
.svcpage-hero::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 100%; height: 56px;
    background: #eef2fb;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    z-index: 2;
}
.svcpage-hero-inner { position: relative; z-index: 3; max-width: 820px; margin: 0 auto; }
.svcpage-hero .hero-eyebrow { margin-bottom: 6px; }
.svcpage-hero h1 {
    color: #fff;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin: 16px 0 14px;
}
.svcpage-hero p { color: #cdd7ea; font-size: 1.05rem; line-height: 1.65; max-width: 640px; margin: 0 auto; }
.svcpage-crumbs { margin-top: 22px; display: flex; gap: 10px; justify-content: center; font-size: .9rem; color: rgba(255, 255, 255, .55); }
.svcpage-crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.svcpage-crumbs a:hover { color: #fff; }
.svcpage-crumbs span[aria-current] { color: #06d6a0; }

/* --- services grid (reuse homepage cards, flat top on this page) --- */
.services-showcase.svcpage-services { clip-path: none; margin-top: 0; }
.svcpage-grid { max-width: 1020px; margin: 0 auto; }

/* --- why choose us --- */
.svcpage-why {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(40% 50% at 100% 0%, rgba(56, 189, 248, .10), transparent 60%),
        #ffffff;
}
.svcwhy-blob-1 { position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(70px); opacity: .5; background: radial-gradient(circle, rgba(244, 114, 182, .25), transparent 70%); top: -60px; right: 6%; pointer-events: none; }
.svcwhy-blob-2 { position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(70px); opacity: .5; background: radial-gradient(circle, rgba(30, 64, 175, .16), transparent 70%); bottom: -40px; left: 2%; pointer-events: none; }
.svcpage-why-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.svcpage-why-media { position: relative; }
.svcpage-why-media img { width: 100%; border-radius: 20px; box-shadow: var(--fx-shadow-lg); display: block; }
.svcpage-why-badge {
    position: absolute; bottom: -18px; left: -18px;
    background: #fff; border-radius: 16px; padding: 12px 20px;
    box-shadow: var(--fx-shadow-md); text-align: center;
    border: 1px solid rgba(15, 23, 42, .06);
}
.svcpage-why-badge strong { display: block; font-size: 1.6rem; font-weight: 800; color: var(--fx-brand-1); line-height: 1; }
.svcpage-why-badge span { font-size: .78rem; color: #64748b; }
.svcpage-why-content .section-title { text-align: left; margin-bottom: 14px; }
.svcpage-why-content .section-title:after { left: 0; transform: none; margin-left: 0; }
.svcpage-why-lead { color: #475569; font-size: 1.02rem; line-height: 1.6; margin-bottom: 22px; }
.svcpage-why-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 16px; }
.svcpage-why-list li { display: flex; gap: 14px; align-items: flex-start; }
.wl-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: var(--fx-brand-grad-soft); border: 1px solid rgba(15, 23, 42, .05); }
.svcpage-why-list strong { display: block; color: var(--fx-ink); margin-bottom: 2px; font-size: .98rem; }
.svcpage-why-list div { color: #64748b; font-size: .9rem; line-height: 1.5; }

/* --- process --- */
.svcpage-process { background: linear-gradient(180deg, #f6f9ff 0%, #eaf0fb 100%); }
.svcpage-process .section-title { text-align: center; }
.svcpage-process .section-title:after { left: 50%; transform: translateX(-50%); margin-left: 0; }
.svcpage-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.svcpage-step {
    position: relative;
    background: #fff; border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px; padding: 28px 22px;
    box-shadow: var(--fx-shadow-sm);
    transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease);
}
.svcpage-step:hover { transform: translateY(-6px); box-shadow: var(--fx-shadow-lg); }
.step-no {
    display: inline-block; font-size: 1.7rem; font-weight: 800; line-height: 1; margin-bottom: 12px;
    background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.svcpage-step h3 { color: var(--fx-ink); margin-bottom: 8px; font-size: 1.08rem; font-weight: 700; }
.svcpage-step p { color: #64748b; font-size: .86rem; line-height: 1.5; }

/* --- stats (dark band) --- */
.svcpage-stats {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1226 0%, #0e1a36 100%);
    color: #fff;
    padding: clamp(48px, 5.5vw, 72px) 20px;
}
.svcstat-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    opacity: .5;
}
.svcstat-glow-1 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(37, 99, 235, .55), transparent 70%); top: -120px; left: -60px; }
.svcstat-glow-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(6, 214, 160, .45), transparent 70%); bottom: -110px; right: -40px; }

.svcpage-stats-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}
/* each stat is now its own raised card, not a flat column with dividers */
.svcpage-stat {
    position: relative;
    padding: 30px 20px 26px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
    transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease), border-color .35s var(--fx-ease), background .35s var(--fx-ease);
}
.svcpage-stat::before {
    content: "";
    position: absolute;
    top: 0; left: 16px; right: 16px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(52, 211, 153, .8), transparent);
    opacity: 0;
    transition: opacity .35s var(--fx-ease);
}
.svcpage-stat:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .075);
    border-color: rgba(255, 255, 255, .22);
    box-shadow: 0 26px 46px rgba(0, 0, 0, .32);
}
.svcpage-stat:hover::before { opacity: 1; }
.svcstat-ic {
    display: inline-flex;
    width: 48px; height: 48px;
    align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 14px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: transform .35s var(--fx-ease);
}
.svcpage-stat:hover .svcstat-ic { transform: scale(1.08) rotate(-4deg); }
.svcpage-stat .stat-number {
    display: block; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 800; line-height: 1;
    background: linear-gradient(120deg, #ffffff, #34d399, #38bdf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.svcpage-stat small { display: block; margin-top: 8px; color: rgba(255, 255, 255, .82); font-size: .9rem; }

@media (max-width: 700px) {
    .svcpage-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* --- CTA band (light — uses the site's own brand blue/teal as a soft
   pastel tint, matching the theme, instead of the dark navy stats band
   right above it; text switches to dark ink since the background is light) --- */
.svcpage-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: var(--fx-ink);
    padding: clamp(56px, 6vw, 88px) 20px;
    background: linear-gradient(135deg, #eef4ff 0%, #e6f7f3 100%);
}
.svcpage-cta::before {
    content: "";
    position: absolute;
    top: -140px; right: -100px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 64, 175, .12), transparent 70%);
    pointer-events: none;
}
.svcpage-cta::after {
    content: "";
    position: absolute;
    bottom: -160px; left: -100px;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 214, 160, .16), transparent 70%);
    pointer-events: none;
}
.svcpage-cta .container { position: relative; z-index: 1; }
.svccta-shape { position: absolute; pointer-events: none; opacity: .5; }
.svccta-ring { width: 90px; height: 90px; border: 3px solid rgba(30, 64, 175, .18); border-radius: 50%; top: 18%; left: 8%; animation: svcFloat 8s ease-in-out infinite; }
.svccta-dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(6, 214, 160, .35); bottom: 22%; left: 16%; animation: svcFloat 6s ease-in-out infinite; }
.svccta-plus { font-size: 2rem; font-weight: 700; color: rgba(30, 64, 175, .22); top: 20%; right: 10%; animation: svcFloat 7s ease-in-out infinite; }
.svcpage-cta h2 { color: var(--fx-ink); font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.svcpage-cta p { color: var(--fx-ink-soft); font-size: 1.05rem; margin: 0 auto 26px; max-width: 560px; }
.svcpage-cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* --- responsive --- */
@media (max-width: 900px) {
    .svcpage-why-grid { grid-template-columns: 1fr; gap: 40px; }
    .svcpage-why-badge { left: 16px; }
    .svcpage-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .svcpage-steps { grid-template-columns: 1fr; }
    .svcpage-hero { padding-top: 112px; }
}

/* ==========================================================================
   18. SERVICES PAGE — contact CTA banner + "How we work it!" process
   ========================================================================== */
/* --- contact CTA banner --- */
/* Bottom padding must comfortably exceed HALF of .svc-work-media's
   rendered height (~249px at the 21/9 desktop ratio) — otherwise the
   image's upward overlap overshoots this section entirely and bleeds
   into whatever comes BEFORE it (that section's own background then
   legitimately paints over the top of the image, which looks exactly
   like "the image is hidden/cut" but is really a too-short section). */
/* Bottom padding must exceed HALF of .svc-work-media's height (249px)
   so the image's upward overlap stays within this section instead of
   reaching the section before it. */
.svc-ctabanner { background: #ffffff; padding: 40px 0 220px; }
/* base style.css has a later, conflicting `.container` rule that also sets
   `position:relative; z-index:1` — that was silently elevating THIS
   section's container above `.svc-work` (which has no z-index of its own),
   so the CTA banner's content painted over the top of the straddling image
   instead of sitting behind it. Neutralising position removes the z-index
   effect (z-index only applies to positioned elements). */
.svc-ctabanner .container { position: static; }
.svc-ctabanner-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    max-width: 920px;
    margin: 0 auto;
    background: #eaf1ff;
    border-radius: 18px;
    padding: 26px 34px;
}
.svc-ctabanner-ic {
    position: absolute;
    left: 30px;
    top: -24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffff;
    color: #1e40af;
    display: grid;
    place-items: center;
    box-shadow: var(--fx-shadow-md);
}
.svc-ctabanner-text {
    flex: 1;
    margin: 0 0 0 66px;
    color: #1f2440;
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.5;
}
/* same brand-gradient primary button used everywhere else (cta-button-primary
   in style.css) so this banner's CTA matches the rest of the site instead of
   its own one-off colour. */
.svc-ctabanner-btn {
    flex: none;
    background: linear-gradient(135deg, #1e40af 0%, #06d6a0 100%);
    color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(30, 64, 175, 0.25);
}
.svc-ctabanner-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(6, 214, 160, 0.4);
}

/* --- work process --- */
/* Top padding must exceed HALF of .svc-work-media's height (249px) so
   the image's downward overlap stays within this section instead of
   covering the "Work Process" content that follows it. */
.svc-work {
    position: relative;
    background: #f0f0fb;
    padding: 220px 20px clamp(56px, 6vw, 84px);
}
/* Full-width media card that straddles the boundary between the white
   banner section above and this lavender section: negative top margin
   pulls roughly half its height up into the white area, the rest sits
   in the lavender area below. z-index keeps it above both backgrounds. */
/*
 * Straddle technique: negative top-margin on a nested child can margin-collapse
 * through unpadded ancestors (.container / .svc-work both have padding-top:0),
 * which drags the WHOLE .svc-work section (and its lavender background) up
 * with it — so the card never actually bridges the two section backgrounds,
 * and the image's own crop looked "cut" as a result. `transform` moves the
 * card visually without touching layout/margin-collapse, so the boundary
 * between the white banner above and the lavender section below passes
 * cleanly through the card's vertical middle.
 */
/* Straddle image: a PLAIN SIBLING sitting directly between
   <section class="svc-ctabanner"> and <section class="svc-work"> in the
   HTML (not nested inside either). Overlapping two ADJACENT sections is
   just two ordinary negative margins — no flow-root, no percentage/
   aspect-ratio interactions, no cross-section stacking-context fights.
   margin-top pulls it up into ctabanner (the preceding sibling);
   margin-bottom pulls svc-work (the following sibling) up to meet it. */
.svc-work-media {
    position: relative;
    z-index: 3;
    /* Narrower "floating card" look (~25% narrower than full-bleed),
       instead of spanning nearly the full section width. */
    max-width: 870px;
    width: calc((100% - 40px) * 0.75);
    margin: -186px auto;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--fx-shadow-lg);
    /* Aspect ratio lives on the CONTAINER now (not the <img>), and the
       image is absolutely positioned to fill it edge-to-edge. This makes
       horizontal centering unconditional — it can't drift to one side
       regardless of the image's intrinsic size, unlike relying on the
       <img> tag's own width/aspect-ratio box. */
    aspect-ratio: 21 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.svc-work-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;   /* top-anchored: keeps raised hands & faces fully in frame */
}
.svc-work-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    padding-left: 4px;
    border-radius: 50%;
    background: #ffffff;
    color: #4f46e5;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
    transition: transform .3s var(--fx-ease);
}
.svc-work-play::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .5);
    animation: swPulse 2.4s ease-out infinite;
}
@keyframes swPulse {
    0% { transform: scale(.9); opacity: .7; }
    100% { transform: scale(1.4); opacity: 0; }
}
.svc-work-play:hover { transform: translate(-50%, -50%) scale(1.08); }

.svc-work .section-title { text-align: center; }
.svc-work .section-title:after { left: 50%; transform: translateX(-50%); margin-left: 0; }
/* Sibling margin-collapse trick: both this element and .svc-work-media
   share the same containing block (.container), so a percentage margin
   here resolves against the same width the image's aspect-ratio is
   based on. -21.4286% = exactly half of the image's own height at the
   21/9 ratio — pulling this content back up by exactly the amount the
   image's transform shifted it, so the two together land flush with
   zero gap and zero overlap. Must be updated if the image's aspect
   ratio changes at other breakpoints (see media queries below). */
.svc-work .packages-intro { margin-bottom: 34px; }

.svc-work-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 22px auto 0;
}
/* dashed connector line behind the number circles (shows through the gaps) */
.svc-work-steps::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 12.5%;
    right: 12.5%;
    border-top: 2px dashed rgba(79, 70, 229, .35);
    z-index: 0;
}
.svc-work-step {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 16px;
    padding: 30px 20px 24px;
    margin-top: 18px;
    text-align: center;
    box-shadow: var(--fx-shadow-sm);
    transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease);
}
.svc-work-step:hover { transform: translateY(-6px); box-shadow: var(--fx-shadow-lg); }
.sw-no {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fx-brand-grad);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .88rem;
    box-shadow: 0 6px 14px rgba(30, 64, 175, .32);
    border: 3px solid #f0f0fb;
    z-index: 2;
}
.sw-ic { display: block; font-size: 1.85rem; margin: 20px 0 10px; }
.svc-work-step h3 { color: var(--fx-ink); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.svc-work-step p { color: #64748b; font-size: .84rem; line-height: 1.5; }

/* --- responsive --- */
@media (max-width: 860px) {
    .svc-ctabanner { padding-bottom: 220px; }
    .svc-ctabanner-box { flex-direction: column; text-align: center; padding-top: 42px; }
    .svc-ctabanner-ic { left: 50%; transform: translateX(-50%); }
    .svc-ctabanner-text { margin: 0; }
    .svc-work-media { margin: -189px auto; border-radius: 18px; aspect-ratio: 16 / 10; }
    .svc-work { padding-top: 220px; }
    .svc-work-steps { grid-template-columns: repeat(2, 1fr); }
    .svc-work-steps::before { display: none; }
}
@media (max-width: 520px) {
    .svc-ctabanner { padding-bottom: 170px; }
    .svc-work-media { margin: -140px auto; border-radius: 14px; aspect-ratio: 4 / 3.2; }
    .svc-work { padding-top: 170px; }
    .svc-work-play { width: 50px; height: 50px; }
    .svc-work-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .svc-work-play::after { animation: none; }
}

/* ==========================================================================
   19. FOOTER — dark theme, refined type, tighter rhythm, animations
   ========================================================================== */
.site-footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0b1226 0%, #0a0f1e 100%);
    color: #cbd3e6;
    padding: 40px 0 0;
}
/* thin brand-gradient top border (replaces the old shimmer bar) */
.site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--fx-brand-grad);
}
/* soft glow, matching the rest of the site's decorative language */
.site-footer::after {
    content: "";
    position: absolute;
    bottom: -120px; right: -80px;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 214, 160, .10), transparent 70%);
    pointer-events: none;
}

.site-footer .container { position: relative; z-index: 1; }

.footer-eyebrow {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6ee7b7;
    margin-bottom: 18px;
    opacity: 0;
    animation: footerFadeUp .6s ease-out forwards;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 32px;
    padding-bottom: 32px;
}

.footer-brand,
.footer-col {
    opacity: 0;
    animation: footerFadeUp .6s ease-out forwards;
}
.footer-brand { animation-delay: .05s; }
.footer-top .footer-col:nth-of-type(2) { animation-delay: .15s; }
.footer-top .footer-col:nth-of-type(3) { animation-delay: .25s; }
.footer-top .footer-col:nth-of-type(4) { animation-delay: .35s; }

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

.ft-logo { display: flex; align-items: center; gap: 10px; }
.ft-logo-mark { width: 28px; height: auto; display: block; flex: none; }
.ft-logo-text {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.footer-tagline {
    font-size: .9rem;
    line-height: 1.6;
    color: #93a0bd;
    margin: 14px 0 18px;
    max-width: 320px;
}

.site-footer .social-icons { display: flex; gap: 10px; margin-top: 0; }
.site-footer .social-icons a {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: none;
}
.site-footer .social-icons a:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(6, 214, 160, .22);
}
.site-footer .social-icons a svg { color: #cbd3e6; opacity: .85; transition: color .25s var(--fx-ease), opacity .25s var(--fx-ease), transform .4s var(--fx-ease); }
.site-footer .social-icons a:hover svg { color: #6ee7b7; opacity: 1; transform: scale(1.08) rotate(360deg); }

.footer-col-label {
    display: block;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 16px;
    position: relative;
}
.footer-col-label::after {
    content: "";
    position: absolute;
    left: 0; bottom: -8px;
    width: 26px; height: 2px;
    background: var(--fx-brand-grad);
    border-radius: 2px;
}

.site-footer .footer-col ul { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-col ul li { margin-bottom: 10px; }
.site-footer .footer-col ul li a {
    display: inline-block;
    padding: 2px 0;
    color: #a9b3cc;
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .25s var(--fx-ease), transform .25s var(--fx-ease);
}
.site-footer .footer-col ul li a::before { display: none; }
.site-footer .footer-col ul li:hover { transform: none; }
.site-footer .footer-col ul li a:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.footer-contact-col .footer-contact-list { gap: 10px; margin-bottom: 18px; }
.site-footer .contact-item-simple { color: #a9b3cc; font-size: .9rem; }
.site-footer .contact-item-simple a { color: #a9b3cc; }
.site-footer .contact-item-simple a:hover { color: #6ee7b7; }

.footer-cta {
    display: inline-flex;
    font-size: .88rem;
    padding: 11px 24px;
}

.site-footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: 0;
    padding: 18px 0;
}
.site-footer .footer-bottom p { color: #6b7694; font-size: .82rem; }
.site-footer .footer-bottom-links a { color: #93a0bd; font-size: .82rem; }
.site-footer .footer-bottom-links a:hover { color: #6ee7b7; }

@media (max-width: 900px) {
    .footer-top { grid-template-columns: 1fr 1fr; row-gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-tagline { max-width: 440px; }
}
@media (max-width: 560px) {
    .footer-top { grid-template-columns: 1fr; gap: 28px; }
    .site-footer .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .footer-eyebrow, .footer-brand, .footer-col { animation: none; opacity: 1; }
}

/* ==========================================================================
   20. REVIEWS — more compact cards so 4-5 fit on screen at once (base
   card was sized for 1-3 slidesPerView; slidesPerView now goes up to 5 in
   ui.js, so padding/type/avatar all need to shrink proportionally).
   ========================================================================== */
.reviews-slider-premium { padding: 40px 0 80px; }
.review-card-premium {
    padding: 26px;
    border-radius: 18px;
    gap: 16px;
}
/* clamp every quote to exactly 3 lines so varying quote lengths don't make
   cards look mismatched — keeps the original active/inactive scale+dim
   carousel effect untouched. */
.review-content p {
    font-size: .96rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.review-footer { padding-top: 16px; }
/* .client-info had no display rule at all (defaulted to block), which
   stacked the avatar above the name instead of sitting side by side. */
.client-info { display: flex; align-items: center; }
.avatar-placeholder { flex: none; width: 40px; height: 40px; border-radius: 10px; font-size: .92rem; margin-right: 12px; }
.name-details h4 { font-size: .95rem; }
.name-details span { font-size: .78rem; }
.verified-badge { padding: 5px 11px; font-size: .68rem; }
.rating-stars { font-size: .95rem; }

@media (max-width: 560px) {
    .review-card-premium { padding: 22px; }
}

/* ==========================================================================
   21. WHY FUNNELUX — circular hub/spoke diagram (replaces the old linear
   "Our Process" timeline). Central brand mark with 6 value-prop nodes
   connected by lines, matching the reference layout structurally.
   ========================================================================== */
.hub-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f7f9fd 0%, #eef2fb 100%);
}
.hub-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    opacity: .5;
    z-index: 0;
}
.hub-glow-1 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(30, 64, 175, .10), transparent 70%); top: -80px; left: -100px; }
.hub-glow-2 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(6, 214, 160, .12), transparent 70%); bottom: -80px; right: -100px; }
.hub-section .container { position: relative; z-index: 1; }
.hub-section .section-title { max-width: 720px; margin-left: auto; margin-right: auto; }

/* --- diagram container --- */
.hub-diagram {
    position: relative;
    max-width: 760px;
    aspect-ratio: 760 / 560;
    margin: 48px auto 0;
}
.hub-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.hub-lines line { stroke: rgba(15, 23, 42, .16); stroke-width: 2; }
.hub-lines .hub-dot { fill: var(--fx-brand-2); }

/* --- center brand mark --- */
.hub-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 190px;
    height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--fx-ink);
    box-shadow: var(--fx-shadow-lg);
}
/* expanding "radar ping" ring, broadcasting outward to the connected nodes */
.hub-center-pulse {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 2px solid rgba(6, 214, 160, .45);
    animation: hubPulse 2.6s ease-out infinite;
    pointer-events: none;
}
.hub-center-pulse::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid rgba(30, 64, 175, .3);
    animation: hubPulse 2.6s ease-out .6s infinite;
}
@keyframes hubPulse {
    0%   { transform: scale(.92); opacity: .9; }
    80%  { transform: scale(1.18); opacity: 0; }
    100% { transform: scale(1.18); opacity: 0; }
}
.hub-center-ring { width: 58px; height: 58px; margin-bottom: 8px; }
.hub-center-ring img { width: 100%; height: 100%; object-fit: contain; display: block; animation: hubLogoFloat 3.2s ease-in-out infinite; }
@keyframes hubLogoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
.hub-center strong { font-size: 1rem; font-weight: 800; color: var(--fx-ink); letter-spacing: -0.01em; }
.hub-center span { font-size: .68rem; color: #64748b; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }
.hub-center-mobile { display: none; }

/* --- value-prop nodes --- */
.hub-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 232px;
    text-align: center;
    z-index: 1;
}
.hub-node-tl { left: 18.42%; top: 16.07%; }
.hub-node-ml { left: 18.42%; top: 50%; }
.hub-node-bl { left: 18.42%; top: 83.93%; }
.hub-node-tr { left: 81.58%; top: 16.07%; }
.hub-node-mr { left: 81.58%; top: 50%; }
.hub-node-br { left: 81.58%; top: 83.93%; }

.hub-ic {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
    background: linear-gradient(135deg, rgba(30, 64, 175, .12), rgba(6, 214, 160, .16));
    color: var(--fx-brand-1);
    display: grid;
    place-items: center;
    transition: transform .35s var(--fx-ease);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05);
}
.hub-node:hover .hub-ic { transform: scale(1.08) rotate(-4deg); }
.hub-node h3 { font-size: .96rem; font-weight: 700; color: var(--fx-ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.hub-node p { font-size: .82rem; color: #64748b; line-height: 1.5; margin: 0; }

/* .animate-on-scroll's shared transform (translateY reveal offset) would
   otherwise clobber this node's own translate(-50%,-50%) centering — compose
   both into one transform instead of letting one override the other. */
.hub-node.animate-on-scroll { transform: translate(-50%, calc(-50% + 24px)); }
.hub-node.animate-on-scroll.animated { transform: translate(-50%, -50%); }

.hub-cta { text-align: center; margin-top: 40px; }

/* --- responsive: circular layout only really works wide; collapse to a
   simple 2-col (then 1-col) grid, with a small brand strip up top --- */
@media (max-width: 900px) {
    .hub-diagram {
        aspect-ratio: auto;
        max-width: 720px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 20px;
        margin-top: 28px;
    }
    .hub-lines, .hub-center { display: none; }
    /* !important: wins over the higher-specificity .hub-node.animate-on-scroll
       rule above, which is only meant for the desktop circular layout */
    .hub-node { position: static; transform: none !important; width: auto; }
    .hub-center-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        grid-column: 1 / -1;
        margin-bottom: 8px;
    }
    .hub-center-mobile img { width: 32px; height: 32px; object-fit: contain; }
    .hub-center-mobile strong { font-size: .92rem; color: var(--fx-ink); letter-spacing: -0.01em; }
}
@media (max-width: 560px) {
    .hub-diagram { grid-template-columns: 1fr; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .hub-node .hub-ic { transition: none; }
    .hub-center-pulse, .hub-center-pulse::after, .hub-center-ring img { animation: none; }
    .hub-center-pulse { display: none; }
}

/* ==========================================================================
   22. WHO WE ARE / ABOUT — compacted. The base section used 80px padding,
   an 80px column gap and a 500px SQUARE visual (mostly empty space around a
   small funnel logo), which made this the tallest section on the page for
   very little content. Tighten padding/gaps, shrink + reshape the visual,
   and pull the text blocks closer together.
   ========================================================================== */
.about-section-premium { padding: clamp(44px, 4.5vw, 64px) 0; }
.about-wrapper-premium { gap: clamp(36px, 4vw, 56px); align-items: center; }

/* visual: smaller and no longer a tall 1:1 square */
.about-section-premium .visual-card-premium { max-width: 420px; aspect-ratio: 4 / 3.4; }
.about-section-premium .visual-image-container { border-radius: 28px; padding: 30px; }
/* cap the logo so it isn't blown up to fill the whole panel */
.about-section-premium .about-main-img { width: auto; max-width: 62%; max-height: 62%; }
.about-section-premium .float-badge { padding: 12px 16px; }

/* content: tighten the rhythm between blocks */
.about-content-column .section-badge { margin-bottom: 12px; padding: 6px 14px; font-size: .78rem; }
.about-content-column .section-title { margin-bottom: 12px; }
.about-content-column .section-intro { margin-bottom: 14px; }
.about-content-column .section-intro p { font-size: 1rem; line-height: 1.55; }
.about-content-column .body-text-premium { margin-bottom: 20px; font-size: .96rem; line-height: 1.6; }
.about-content-column .about-checklist { gap: 12px 20px; margin-bottom: 24px; }
.about-content-column .about-cta-row { gap: 28px; }

/* ==========================================================================
   23. PRICING PAGE (pricing.html) — hero, billing toggle, plan cards,
   comparison table, "replaces your stack" table, add-ons, FAQ, CTA.
   All page-specific selectors are prefixed `pr-` so nothing here can
   collide with the sitewide `.hero`, `.cta`, `.toggle` etc. used elsewhere.
   Buttons reuse the site's cta-button/cta-button-primary/cta-button-secondary
   classes rather than a one-off button style, and section headings reuse
   the sitewide .section-title / .pkg-eyebrow / .pkg-sub pattern.
   ========================================================================== */
.pr-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    /* top padding must clear the fixed header + offer-banner (~150px, same
       value used by .svcpage-hero) or the first child renders hidden behind
       it instead of missing — it was only reaching 92px here. */
    padding: 118px 20px 24px;
    background:
        radial-gradient(720px 340px at 18% 0%, rgba(56, 189, 248, .14), transparent 65%),
        radial-gradient(720px 340px at 85% 8%, rgba(6, 214, 160, .14), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}
.pr-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fx-brand-1);
    background: #fff;
    border: 1px solid var(--fx-line);
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: var(--fx-shadow-sm);
}
.pr-kicker .pr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fx-brand-2); }
.pr-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 800; margin: 22px auto 14px; max-width: 760px; letter-spacing: -0.025em; }
.pr-hero-sub { color: var(--fx-ink-soft); font-size: 1.08rem; max-width: 600px; margin: 0 auto; }
.pr-guarantee { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .9rem; font-weight: 600; color: #0e9166; }

/* --- billing toggle --- */
.pr-toggle-row { display: flex; justify-content: center; margin: 34px 0 8px; }
.pr-toggle { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--fx-line); border-radius: 999px; padding: 5px; box-shadow: var(--fx-shadow-sm); gap: 4px; }
.pr-toggle button {
    font: inherit; font-weight: 600; font-size: .94rem; border: none; background: transparent;
    color: var(--fx-ink-soft); padding: 10px 22px; border-radius: 999px; cursor: pointer;
    display: flex; align-items: center; gap: 8px; transition: color .25s var(--fx-ease), background .25s var(--fx-ease);
}
.pr-toggle button.active { background: var(--fx-brand-grad); color: #fff; box-shadow: 0 6px 16px rgba(30, 64, 175, .25); }
.pr-save-pill { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #eafaf3; color: #158a5f; }
.pr-toggle button.active .pr-save-pill { background: rgba(255, 255, 255, .22); color: #fff; }
.pr-billing-note { text-align: center; font-size: .85rem; color: #94a3b8; margin-top: 10px; min-height: 1.3em; }

/* --- plan cards --- */
.pr-plans { padding: 36px 0 30px; }
.pr-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.pr-plan {
    position: relative; background: #fff; border: 1px solid var(--fx-line);
    border-radius: 20px; padding: 34px 30px; display: flex; flex-direction: column;
    box-shadow: var(--fx-shadow-sm); transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease);
}
.pr-plan:hover { transform: translateY(-6px); box-shadow: var(--fx-shadow-lg); }
.pr-plan.pr-popular {
    border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--fx-brand-grad) border-box;
    box-shadow: var(--fx-shadow-lg);
}
.pr-pop-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--fx-brand-grad); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.pr-plan h3 { font-size: 1.3rem; font-weight: 700; }
.pr-plan-for { color: #94a3b8; font-size: .9rem; margin: 4px 0 18px; }
.pr-plan-price { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; }
.pr-plan-price .pr-cur { font-size: 1.4rem; vertical-align: 14px; margin-right: 2px; }
.pr-plan-price .pr-per { font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 500; color: #94a3b8; letter-spacing: 0; }
.pr-billed-line { font-size: .82rem; color: #94a3b8; min-height: 1.3em; margin: 2px 0 20px; }
.pr-billed-line s { opacity: .7; margin-right: 6px; }
.pr-plan .cta-button { width: 100%; margin-bottom: 24px; justify-content: center; }
.pr-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; font-size: .93rem; color: var(--fx-ink-soft); }
.pr-plan ul .pr-head { font-weight: 700; color: var(--fx-ink); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.pr-plan li { display: flex; gap: 10px; align-items: flex-start; }
.pr-tick { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #eafaf3; display: grid; place-items: center; }
.pr-tick svg { width: 10px; height: 10px; stroke: #159467; stroke-width: 3; fill: none; }
.pr-plan .pr-fineprint { margin-top: auto; padding-top: 20px; font-size: .78rem; color: #94a3b8; }

/* base style.css sets a global `section { padding: 0; }` — every section
   needs an explicit padding class or it has zero vertical gap from its
   neighbours. #compare/#value/#addons/#faq had no such class. */
.pr-section { padding: clamp(56px, 6vw, 88px) 0; }

/* --- shared section heading (reuses sitewide .section-title/.pkg-eyebrow/.pkg-sub) --- */
.pr-sec-head { text-align: center; max-width: 680px; margin: 0 auto 40px; }
.pr-sec-head .section-title { text-align: center; }
.pr-sec-head .section-title:after { left: 50%; transform: translateX(-50%); margin-left: 0; }

/* --- comparison + "replaces your stack" tables --- */
.pr-table-card { background: #fff; border: 1px solid var(--fx-line); border-radius: 20px; box-shadow: var(--fx-shadow-sm); overflow-x: auto; }
.pr-table-card table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 680px; }
.pr-table-card th, .pr-table-card td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--fx-line); }
.pr-table-card th:first-child, .pr-table-card td:first-child { text-align: left; }
.pr-table-card thead th { font-size: .85rem; font-weight: 700; background: #fbfcfe; }
.pr-table-card thead th .pr-th-price { display: block; font-weight: 500; color: #94a3b8; font-size: .78rem; }
.pr-table-card tbody tr:last-child td { border-bottom: none; }
.pr-table-card tbody tr:hover td { background: #fafbff; }
.pr-table-card td .pr-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eafaf3; }
.pr-table-card td .pr-yes svg { width: 11px; height: 11px; stroke: #159467; stroke-width: 3; fill: none; }
.pr-table-card td .pr-no { color: #c6ccdd; font-weight: 600; }
.pr-row-group td { background: #f4f7fd !important; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--fx-brand-1); }
.pr-pop-col { background: rgba(6, 214, 160, .05); }

.pr-replace-note { text-align: center; font-size: .85rem; color: #94a3b8; margin-top: 14px; }
.pr-rep-table td.pr-cost { font-weight: 600; color: var(--fx-ink-soft); white-space: nowrap; }
.pr-rep-table td.pr-repl { color: #94a3b8; font-size: .85rem; }
.pr-rep-total td { background: linear-gradient(100deg, rgba(30, 64, 175, .06), rgba(6, 214, 160, .08)) !important; font-weight: 800; font-size: 1rem; border-top: 2px solid var(--fx-line); }
.pr-rep-total .pr-big { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; }
.pr-rep-total .pr-them { color: #c02f4a; }
.pr-rep-total .pr-us { color: #128a5e; }
.pr-pill-tag { display: inline-block; font-size: .72rem; font-weight: 600; background: #eef2fd; color: var(--fx-brand-1); border-radius: 999px; padding: 3px 10px; margin: 2px 3px 0 0; }

/* --- add-ons --- */
.pr-addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.pr-addon {
    background: #fff; border: 1px solid var(--fx-line); border-radius: 16px; padding: 22px;
    box-shadow: var(--fx-shadow-sm); display: flex; flex-direction: column; gap: 6px;
    transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
.pr-addon:hover { transform: translateY(-4px); box-shadow: var(--fx-shadow-lg); }
.pr-addon-icon {
    width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(120deg, #eef2fd, #eafaf3);
    display: grid; place-items: center; font-size: 1.15rem; margin-bottom: 6px;
}
.pr-addon h4 { font-size: 1rem; font-weight: 700; }
.pr-addon p { font-size: .85rem; color: #94a3b8; }
.pr-addon-price { margin-top: auto; padding-top: 10px; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--fx-brand-1); }
.pr-addon-price small { font-weight: 500; color: #94a3b8; font-family: 'Inter', sans-serif; }

/* --- FAQ (native <details>, no JS needed) --- */
.pr-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.pr-faq details { background: #fff; border: 1px solid var(--fx-line); border-radius: 14px; padding: 18px 22px; box-shadow: var(--fx-shadow-sm); }
.pr-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: "+"; font-size: 1.3rem; color: var(--fx-brand-1); font-weight: 400; transition: transform .25s var(--fx-ease); }
.pr-faq details[open] summary::after { transform: rotate(45deg); }
.pr-faq details p { margin-top: 12px; color: var(--fx-ink-soft); font-size: .93rem; }

/* --- CTA band (reuses the sitewide brand gradient + light button) --- */
.pr-cta {
    text-align: center; border-radius: 26px; padding: 64px 30px; color: #fff;
    background: var(--fx-brand-grad); position: relative; overflow: hidden; box-shadow: var(--fx-shadow-lg);
}
.pr-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(500px 240px at 80% 0%, rgba(255, 255, 255, .22), transparent 60%); }
.pr-cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; position: relative; }
.pr-cta p { position: relative; opacity: .92; margin: 12px auto 26px; max-width: 520px; }
.pr-cta .cta-button-light { position: relative; }
.pr-cta-contact { position: relative; margin-top: 22px; font-size: .9rem; opacity: .9; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.pr-cta-contact a { text-decoration: none; color: #fff; }
.pr-cta-wrap { padding: 70px 0; }

@media (max-width: 900px) {
    .pr-plan-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
    .pr-plan.pr-popular { order: -1; }
}
@media (max-width: 560px) {
    .pr-hero { padding-top: 112px; }
}
@media (prefers-reduced-motion: reduce) {
    .pr-toggle button, .pr-plan, .pr-addon { transition: none; }
}

/* Extra left/right breathing room on top of the base .container 20px —
   plan cards, compare table, replaces-table, add-ons and the closing CTA
   all sat flush against the standard container inset; give them more. */
.pr-plans .container,
#compare .container,
#value .container,
#addons .container,
.pr-cta-wrap .container {
    padding-left: clamp(20px, 5vw, 56px);
    padding-right: clamp(20px, 5vw, 56px);
}

/* ==========================================================================
   24. FLOATING "BOOK NOW" TAB — site-wide vertical tab fixed to the middle
   of the right edge (distinct from the round bottom-corner WhatsApp float).
   Click opens a full booking modal: branded header + embedded Calendly
   scheduler + a small "Powered by FunnelUX" footer tag.
   ========================================================================== */
.book-tab-wrap {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 998;
}
.book-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: var(--fx-brand-grad);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 18px 10px;
    border-radius: 12px 0 0 12px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    box-shadow: -4px 4px 18px rgba(30, 64, 175, .3);
    transition: padding .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
    animation: bookTabPulse 2.8s ease-in-out infinite;
}
.book-tab svg { writing-mode: horizontal-tb; flex: none; }
.book-tab:hover { padding-right: 16px; box-shadow: -6px 6px 26px rgba(6, 214, 160, .42); }
@keyframes bookTabPulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
}

/* --- booking modal (backdrop + card) --- */
.book-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s var(--fx-ease), visibility .3s;
}
.book-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.book-modal {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(2, 6, 23, .35);
    transform: translateY(18px) scale(.97);
    opacity: 0;
    transition: transform .35s var(--fx-ease-spring), opacity .3s var(--fx-ease);
}
.book-modal-backdrop.open .book-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.book-modal-header {
    position: relative;
    background: var(--fx-brand-grad);
    color: #fff;
    text-align: center;
    padding: 30px 44px 26px;
}
.book-modal-header h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 6px; }
.book-modal-header p { font-size: .9rem; color: rgba(255, 255, 255, .9); }
.book-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .16);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background .25s var(--fx-ease);
}
.book-modal-close:hover { background: rgba(255, 255, 255, .3); }

/* Compact preview instead of a full embedded live calendar — keeps the
   modal short; the actual booking happens on book-now.html. */
.book-modal-body { padding: clamp(20px, 3vw, 28px); background: #fff; }
.book-modal-preview { text-align: center; margin-bottom: 20px; }
.bmp-ic {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    display: grid; place-items: center;
    font-size: 1.6rem;
    border-radius: 16px;
    background: var(--fx-brand-grad-soft);
}
.book-modal-preview h4 { font-size: 1.1rem; font-weight: 800; color: var(--fx-ink); margin-bottom: 8px; }
.bmp-meta { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.bmp-meta span {
    font-size: .8rem; font-weight: 600; color: var(--fx-ink-soft);
    background: #f6f8fd; border: 1px solid var(--fx-line);
    padding: 5px 12px; border-radius: 999px;
}
.book-modal-preview p { font-size: .88rem; color: var(--fx-ink-soft); line-height: 1.55; }
.book-modal-cta { width: 100%; justify-content: center; }
.book-modal-footer {
    text-align: center;
    padding: 10px;
    font-size: .76rem;
    font-weight: 600;
    color: #94a3b8;
    border-top: 1px solid var(--fx-line);
}

@media (max-width: 600px) {
    .book-tab { padding: 14px 8px; font-size: .76rem; }
    .book-modal { max-width: 100%; }
    .book-modal-header { padding: 26px 40px 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .book-tab { animation: none; }
    .book-modal { transition: opacity .2s linear; transform: none; }
}

/* ==========================================================================
   25. BOOK NOW PAGE (book-now.html) — intro hero + Calendly embed card
   ========================================================================== */
.book-now-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 118px 20px 40px;
    background:
        radial-gradient(720px 340px at 18% 0%, rgba(56, 189, 248, .14), transparent 65%),
        radial-gradient(720px 340px at 85% 8%, rgba(6, 214, 160, .14), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}
.book-now-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; margin: 20px auto 14px; max-width: 720px; letter-spacing: -0.025em; }
.book-now-hero-sub { color: var(--fx-ink-soft); font-size: 1.05rem; max-width: 580px; margin: 0 auto; }
.book-now-trust {
    display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center;
    margin-top: 22px;
}
.book-now-trust span {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .85rem; font-weight: 600; color: var(--fx-ink);
    background: #fff; border: 1px solid var(--fx-line); padding: 8px 16px; border-radius: 999px;
    box-shadow: var(--fx-shadow-sm);
}
.book-now-trust span::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fx-brand-2);
}

.book-now-section { padding: 20px 20px 80px; }

/* Full-width card — Calendly's own widget already renders event/host info
   on the left and the date picker on the right once it has enough room;
   a narrower custom column was squeezing it out of that native layout. */
.book-now-card {
    /* max-width: 1000px; */
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--fx-line);
    border-radius: 24px;
    padding: clamp(12px, 2vw, 20px);
    box-shadow: var(--fx-shadow-lg);
}
/* Calendly's embed script doesn't always stretch its own iframe to fill the
   container — it can lock in a narrow width and fall back to its compact/
   stacked layout even though there's plenty of room. Force it to fill. */
.book-now-card .calendly-inline-widget { width: 100%; border-radius: 14px; overflow: hidden; }
.book-now-card .calendly-inline-widget iframe { width: 100% !important; }

.book-now-steps {
    max-width: 1000px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.book-now-step {
    text-align: center;
    padding: 22px 18px;
    background: #fff;
    border: 1px solid var(--fx-line);
    border-radius: 16px;
    box-shadow: var(--fx-shadow-sm);
}
.book-now-step .bns-no {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 8px;
    background: var(--fx-brand-grad);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.book-now-step h4 { font-size: .98rem; font-weight: 700; color: var(--fx-ink); margin-bottom: 6px; }
.book-now-step p { font-size: .85rem; color: var(--fx-ink-soft); line-height: 1.5; }

@media (max-width: 700px) {
    .book-now-steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   27. CONTACT US PAGE (contact-us.html) — same form/API as the homepage
   #contact section, reusing .contact-form-premium (already styled site-wide)
   so the two forms stay visually and functionally identical.
   ========================================================================== */
.contact-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 118px 20px 40px;
    background:
        radial-gradient(720px 340px at 18% 0%, rgba(56, 189, 248, .14), transparent 65%),
        radial-gradient(720px 340px at 85% 8%, rgba(6, 214, 160, .14), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}
.contact-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; margin: 20px auto 14px; max-width: 720px; letter-spacing: -0.025em; }
.contact-hero-sub { color: var(--fx-ink-soft); font-size: 1.05rem; max-width: 580px; margin: 0 auto; }

.contact-us-section { padding: 10px 20px 60px; }
.contact-us-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: stretch;
}
/* Equal-height columns: both cards fill the stretched grid row, and the
   message textarea grows to absorb any extra space so the form doesn't
   just leave an empty gap above its submit button. */
.contact-us-split .contact-form-premium,
.contact-info-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.contact-us-split .contact-form-premium form {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.contact-us-split .contact-form-premium .form-group-premium:has(textarea) {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.contact-us-split .contact-form-premium textarea {
    flex: 1;
    min-height: 90px;
    max-height: 160px;
    resize: none;
}
.contact-us-split .contact-form-premium .form-footer { margin-top: auto; }
.contact-info-card .contact-info-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.contact-info-card .contact-book-cta { margin-top: auto; }

/* form column reuses .contact-form-premium/.form-row/.form-group-premium
   as-is (already styled for a light background in section 13) */
.contact-us-split .contact-form-premium { padding: clamp(18px, 2.2vw, 26px); border-radius: 22px; }
.contact-us-split .contact-form-premium .form-row { gap: 18px; margin-bottom: 16px; }
.contact-us-split .contact-form-premium .form-group-premium { gap: 6px; }
.contact-us-split .contact-form-premium .form-group-premium:has(textarea) { margin-bottom: 16px; }

/* --- info column --- */
.contact-info-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--fx-line);
    border-radius: 22px;
    box-shadow: var(--fx-shadow-lg);
    transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease);
}
.contact-info-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(2, 6, 23, .16); }

/* dark branded header band, like a business card */
.contact-info-header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1226 0%, #0e1a36 100%);
    padding: 20px clamp(18px, 2.2vw, 26px) 16px;
}
.contact-info-header::before {
    content: "";
    position: absolute;
    top: -80px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 214, 160, .30), transparent 70%);
    pointer-events: none;
}
.civ-eyebrow {
    position: relative;
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6ee7b7;
    margin-bottom: 10px;
}
.contact-info-header h3 { position: relative; font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 6px; }
.contact-info-header p { position: relative; font-size: .86rem; color: rgba(255, 255, 255, .72); }

.contact-info-body { padding: clamp(16px, 2.2vw, 24px); }
.contact-info-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 2px; }
.contact-info-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 14px;
    transition: background .25s var(--fx-ease), transform .25s var(--fx-ease);
}
.contact-info-list li:hover { background: #f6f8fd; transform: translateX(4px); }
.contact-info-list li a,
.contact-info-list li span.civ { color: var(--fx-ink); font-weight: 700; font-size: .96rem; text-decoration: none; }
.contact-info-list li a:hover { color: var(--fx-brand-1); }
.contact-info-list li p { margin: 2px 0 0; color: var(--fx-ink-soft); font-size: .84rem; }
.civ-ic {
    flex: none;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 13px;
    font-size: 1.15rem;
    color: #fff;
    background: var(--fx-brand-grad);
    box-shadow: 0 8px 18px rgba(30, 64, 175, .25);
    transition: transform .3s var(--fx-ease);
}
.contact-info-list li:hover .civ-ic { transform: scale(1.08) rotate(-4deg); }

.contact-info-card .social-icons { margin-top: 4px; gap: 10px; }
.contact-info-card .social-icons a {
    width: 40px; height: 40px;
    background: #f6f8fd;
    border: 1px solid var(--fx-line);
    box-shadow: none;
}
.contact-info-card .social-icons a:hover {
    background: var(--fx-brand-grad);
    border-color: transparent;
}
.contact-info-card .social-icons a:hover svg,
.contact-info-card .social-icons a:hover { color: #fff; }

/* --- prominent "Book Now" CTA within the info column --- */
.contact-book-cta {
    margin-top: 16px;
    padding: 16px;
    border-radius: 16px;
    text-align: center;
    background: var(--fx-brand-grad);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.contact-book-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(220px 140px at 85% -10%, rgba(255, 255, 255, .25), transparent 60%);
    pointer-events: none;
}
.contact-book-cta p { position: relative; font-size: .88rem; font-weight: 600; margin-bottom: 10px; }
.contact-book-cta .cta-button-light { position: relative; width: 100%; justify-content: center; }

@media (max-width: 900px) {
    .contact-us-split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   28. FOOTER CTA BAND (index.html, directly above the footer) — dark band
   with headline + CTA on the left, looping muted autoplay video on the right.
   ========================================================================== */
.footer-cta-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1226 0%, #0e1a36 100%);
    padding: clamp(56px, 6vw, 92px) 20px;
}
.footer-cta-band::before {
    content: "";
    position: absolute;
    top: -120px; left: -80px;
    width: 360px; height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .28), transparent 70%);
    pointer-events: none;
}
.footer-cta-band::after {
    content: "";
    position: absolute;
    bottom: -140px; right: -60px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 214, 160, .22), transparent 70%);
    pointer-events: none;
}
.footer-cta-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.footer-cta-content h2 {
    color: #fff;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
.footer-cta-content p {
    color: rgba(255, 255, 255, .72);
    font-size: 1.05rem;
    margin-bottom: 28px;
}
.footer-cta-media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .45);
}
.footer-cta-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .footer-cta-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-cta-content .cta-button { margin: 0 auto; }
}

/* ==========================================================================
   29. HERO SLIDER — replaces the single-video hero with 4 auto-rotating
   slides (one video + headline per service). The peak divider/feature grid
   below is unchanged and untouched.
   ========================================================================== */
/* Absolutely fills the WHOLE hero (including behind the peak divider) so the
   footage never stops short and leaves a black band under it. */
.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s var(--fx-ease);
    pointer-events: none;
}
.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    pointer-events: auto;
}
.hero-slide-media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.hero-slide .hero-inner {
    position: relative;
    z-index: 2;
    flex: none;
    height: 100%;
    display: flex;
    align-items: center;
    /* bottom padding keeps the copy clear of the peak divider + dot nav,
       since the slide now spans the full hero height */
    padding: 118px 0 92px;
}

/* --- dot + arrow controls, scoped to the video area only --- */
/* one control bar (prev · dots · next) centred at the bottom of the video */
.hero-controls {
    position: absolute;
    z-index: 10;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
}
.hero-slider-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hero-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .3s var(--fx-ease), transform .3s var(--fx-ease), width .3s var(--fx-ease);
}
.hero-dot:hover { background: rgba(255, 255, 255, .6); }
.hero-dot.is-active { width: 26px; border-radius: 999px; background: var(--fx-brand-2); }

.hero-arrow {
    position: relative;   /* now flows inside .hero-controls */
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .25s var(--fx-ease), transform .25s var(--fx-ease);
}
.hero-arrow:hover { background: rgba(255, 255, 255, .22); transform: scale(1.08); }

@media (max-width: 600px) {
    .hero-controls { gap: 12px; bottom: 18px; }
    .hero-arrow { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}

/* ==========================================================================
   30. CLIENT LOGOS — auto-scrolling marquee strip beneath the hero
   ========================================================================== */
.client-logos-strip {
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid var(--fx-line);
    border-top: 1px solid var(--fx-line);
    /* fixed height so `calc(100dvh - var(--cls-h))` on the hero is exact and
       hero + strip land precisely on the fold */
    height: var(--cls-h);
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.cls-track-wrap {
    flex: 1 1 auto;
    min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 88%, transparent);
}
.cls-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 54px;
    /* continuous, never-stopping scroll */
    animation: clsScroll 45s linear infinite;
}
.cls-logo {
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    white-space: nowrap;
    filter: grayscale(1);
    opacity: .62;
    transition: opacity .25s var(--fx-ease), filter .25s var(--fx-ease);
}
.cls-logo b {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 1.02rem;
    color: #1f2937;
    letter-spacing: -0.02em;
}
.cls-logo i {
    font-style: normal;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #6b7280;
    margin-top: 1px;
}
.cls-logo:hover { opacity: 1; filter: grayscale(0); }

/* pinned right, like the reference strip */
.cls-cta {
    flex: none;
    margin: 0 84px 0 18px;   /* clears the floating WhatsApp button */
    background: #c9f24d;
    color: #14320a;
    font-weight: 700;
    font-size: .84rem;
    padding: 9px 18px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s var(--fx-ease), transform .25s var(--fx-ease);
}
.cls-cta:hover { background: #b9e63a; transform: translateY(-1px); }

@keyframes clsScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (max-width: 700px) {
    .cls-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cls-track { animation-duration: 160s; }
}

/* ==========================================================================
   31. COMPACT HEADER — trims the announcement bar + nav from 131px to ~99px
   so more of the hero video is visible above the fold. Base style.css sets
   .offer-banner{height:50px} and nav{height:80px}; overridden here.
   ========================================================================== */
.offer-banner { height: 38px; }
.offer-banner .offer-text { font-size: .95rem; }
.offer-banner .cta-button-outline-white { padding: 5px 15px; font-size: .8rem; }
.offer-banner .close-banner { right: 14px; font-size: 1.05rem; }

header nav { height: 60px; padding: 0; }
.logo-text.main_logo img { width: 188px; }

@media (max-width: 768px) {
    .offer-banner { height: auto; padding: 7px 38px 7px 14px; }
    .offer-banner .offer-text { font-size: .82rem; }
    header nav { height: 56px; }
    .logo-text.main_logo img { width: 150px; }
}

/* ==========================================================================
   32. HERO PEAK — stacked-layers strip (fxk-), staggered reveal.
   NOTE: animations.js assigns an inline `transition-delay` to every
   .animate-on-scroll element, so these utility classes need !important to
   take effect (inline styles otherwise win the cascade).
   ========================================================================== */
.delay-100 { transition-delay: .10s !important; }
.delay-200 { transition-delay: .20s !important; }
.delay-300 { transition-delay: .30s !important; }
.delay-400 { transition-delay: .40s !important; }

/* CSS-only entrance for the tag/eyebrow above the strip.
   Deliberately NOT using the .animate-up / IntersectionObserver path here:
   that starts elements at opacity:0 and depends on JS to reveal them, so any
   hiccup leaves the whole strip invisible. A keyframe animation always ends
   at opacity:1, so the content is guaranteed to show. */
.hero-peak-tag,
.hero-peak-eyebrow {
    opacity: 0;
    animation: hfRise .62s var(--fx-ease) forwards;
}
@keyframes hfRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-peak-tag     { animation-delay: .02s; }
.hero-peak-eyebrow { animation-delay: .10s; }

.hero-peak-inner { text-align: center; }
.hero.hero-banner .hero-peak-eyebrow,
.hero-peak-eyebrow { margin-bottom: 26px; }

@media (max-width: 760px) {
    .hero-peak { padding: 78px 20px 40px; }
    .fxk-row { gap: 22px 14px; }
    .fxk-card { flex-basis: 108px; padding: 15px 12px 16px; }
}
@media (max-width: 420px) {
    .fxk-card { flex: 1 1 42%; max-width: none; padding: 14px 12px 16px; }
    .fxk-desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fxk-card, .fxk-ic, .fxk-arrow { transition: none; }
    .fxk-card { animation: none; opacity: 1; }
    .hero-peak-tag, .hero-peak-eyebrow {
        animation: none;
        opacity: 1;
    }
}

/* ==========================================================================
   33. ABOUT US PAGE (about-us.html)
   Each section is deliberately a DIFFERENT layout — split hero, centred
   manifesto, editorial founder, divided stat band, zigzag rows, numbered
   ledger list, marquee, definition list, dark investor panel, CTA band —
   rather than repeating one card grid.
   Reveal uses CSS keyframes (not the JS observer) so nothing can be left
   stuck at opacity:0.
   ========================================================================== */
@keyframes auRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes auFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes auLeft { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes auRight{ from { opacity: 0; transform: translateX(26px); }  to { opacity: 1; transform: none; } }

.au-kicker {
    font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--fx-brand-1); margin-bottom: 12px;
}
.au-kicker-light { color: #6ee7b7; }
.au-tag {
    display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--fx-brand-1);
    background: var(--fx-brand-grad-soft); border-radius: 999px; padding: 7px 16px; margin-bottom: 18px;
}
.au-textlink {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: .94rem; color: #fff; text-decoration: none;
    transition: gap .25s var(--fx-ease);
}
.au-textlink-dark { color: var(--fx-brand-1); }
.au-textlink:hover { gap: 12px; }
.au-head { max-width: 640px; margin-bottom: clamp(34px, 4vw, 54px); }
.au-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.18; }
.au-head-split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---- 1. hero: split ---- */
.au-hero {
    position: relative; overflow: hidden;
    padding: 150px 20px clamp(56px, 6vw, 90px);
    background:
        radial-gradient(700px 340px at 12% 0%, rgba(56, 189, 248, .13), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}
.au-hero-glow {
    position: absolute; top: -140px; right: -120px; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 214, 160, .17), transparent 70%); pointer-events: none;
}
.au-hero-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 70px); align-items: center;
}
.au-hero-copy { animation: auLeft .7s var(--fx-ease) both; }
.au-hero-copy h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -.03em;
    line-height: 1.1; margin-bottom: 18px;
}
.au-hero-copy > p { color: var(--fx-ink-soft); font-size: 1.06rem; line-height: 1.65; max-width: 520px; }
.au-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.au-hero-actions .au-textlink { color: var(--fx-brand-1); }

.au-hero-visual { position: relative; animation: auRight .7s .12s var(--fx-ease) both; }
.au-hv-main { border-radius: 26px; overflow: hidden; box-shadow: var(--fx-shadow-lg); aspect-ratio: 4 / 3.4; }
.au-hv-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-hv-chip {
    position: absolute; display: flex; flex-direction: column; line-height: 1.15;
    background: #fff; border: 1px solid var(--fx-line); border-radius: 14px;
    padding: 12px 18px; box-shadow: var(--fx-shadow-md);
    animation: auRise .6s .5s var(--fx-ease) both;
}
.au-hv-chip strong { font-size: 1.15rem; font-weight: 800; color: var(--fx-brand-1); }
.au-hv-chip span { font-size: .76rem; color: var(--fx-ink-soft); }
.au-hv-chip-1 { left: -18px; bottom: 44px; }
.au-hv-chip-2 { right: -14px; top: 34px; animation-delay: .64s; }

/* ---- 2. story: centred manifesto ---- */
.au-story { background: #fff; padding: clamp(58px, 6vw, 92px) 20px; text-align: center; }
.au-story .container { max-width: 860px; }
.au-story-lead {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.35;
    letter-spacing: -.02em; color: var(--fx-ink); margin-bottom: 22px;
    animation: auRise .7s var(--fx-ease) both;
}
.au-story-lead em { font-style: normal; background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.au-story-body { color: var(--fx-ink-soft); font-size: 1.02rem; line-height: 1.75; animation: auRise .7s .12s var(--fx-ease) both; }
.au-story-rule { width: 74px; height: 4px; border-radius: 4px; background: var(--fx-brand-grad); margin: 34px auto 0; }

/* ---- 3. founder: editorial ---- */
.au-founder { background: #f7f8fb; padding: clamp(58px, 6vw, 92px) 20px; }
.au-founder-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
.au-founder-photo { margin: 0; position: relative; animation: auLeft .7s var(--fx-ease) both; }
.au-founder-photo img {
    width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; display: block;
    border-radius: 24px 24px 24px 90px; box-shadow: var(--fx-shadow-lg);
}
.au-founder-photo figcaption {
    position: absolute; left: 18px; bottom: 18px; right: 18px;
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
    border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column;
}
.au-founder-photo figcaption strong { font-size: 1rem; font-weight: 800; color: var(--fx-ink); }
.au-founder-photo figcaption span { font-size: .8rem; color: var(--fx-ink-soft); }
.au-founder-copy { animation: auRight .7s .1s var(--fx-ease) both; }
.au-quote {
    margin: 0 0 20px; padding-left: 22px; border-left: 4px solid transparent;
    border-image: var(--fx-brand-grad) 1;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.15rem, 2.1vw, 1.5rem);
    font-weight: 700; line-height: 1.45; letter-spacing: -.02em; color: var(--fx-ink);
}
.au-founder-copy > p { color: var(--fx-ink-soft); line-height: 1.7; margin-bottom: 22px; }
.au-founder-facts { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.au-founder-facts li {
    display: flex; gap: 16px; align-items: baseline; font-size: .95rem; color: var(--fx-ink);
    padding-bottom: 12px; border-bottom: 1px solid var(--fx-line);
}
.au-founder-facts span {
    flex: none; width: 74px; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: #94a3b8;
}

/* ---- 4. achievements: divided figures on dark ---- */
.au-stats {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #0b1226 0%, #0e1a36 100%);
    padding: clamp(48px, 5vw, 74px) 20px;
}
.au-stats-glow {
    position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
    width: 620px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, .34), transparent 70%); pointer-events: none;
}
.au-stats-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.au-stat { text-align: center; padding: 6px 18px; position: relative; animation: auRise .6s var(--fx-ease) both; }
.au-stat:nth-child(2) { animation-delay: .1s; }
.au-stat:nth-child(3) { animation-delay: .2s; }
.au-stat:nth-child(4) { animation-delay: .3s; }
.au-stat + .au-stat::before {
    content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px;
    background: rgba(255, 255, 255, .16);
}
.au-stat-num {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em;
    background: linear-gradient(120deg, #ffffff, #34d399 60%, #38bdf8);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.au-stat-num em { font-style: normal; font-size: .55em; }
.au-stat-label { display: block; margin-top: 10px; font-size: .88rem; color: rgba(255, 255, 255, .75); }

/* ---- 5. why: zigzag rows ---- */
.au-why { background: #fff; padding: clamp(58px, 6vw, 92px) 20px; }
.au-zig {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 64px);
    align-items: center; padding: clamp(26px, 3vw, 40px) 0;
    border-top: 1px solid var(--fx-line);
    animation: auRise .7s var(--fx-ease) both;
}
.au-zig:nth-of-type(2) { animation-delay: .08s; }
.au-zig:nth-of-type(3) { animation-delay: .16s; }
.au-zig-flip .au-zig-text { order: 2; }
.au-zig-no {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.1rem; font-weight: 800;
    line-height: 1; margin-bottom: 12px;
    background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.au-zig-text h3 { font-size: clamp(1.2rem, 2.1vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; color: var(--fx-ink); }
.au-zig-text p { color: var(--fx-ink-soft); line-height: 1.7; }
.au-zig-media { border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--fx-shadow-md); }
.au-zig-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--fx-ease); }
.au-zig:hover .au-zig-media img { transform: scale(1.05); }

/* ---- 6. services: numbered ledger list ---- */
.au-svc { background: #f7f8fb; padding: clamp(58px, 6vw, 92px) 20px; }
.au-svc-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--fx-line); }
.au-svc-list li {
    display: grid; grid-template-columns: 58px minmax(180px, 260px) 1fr 24px;
    align-items: center; gap: 18px;
    padding: 22px 12px; border-bottom: 1px solid var(--fx-line);
    transition: background .3s var(--fx-ease), padding .3s var(--fx-ease);
    animation: auRise .6s var(--fx-ease) both;
}
.au-svc-list li:nth-child(2) { animation-delay: .07s; }
.au-svc-list li:nth-child(3) { animation-delay: .14s; }
.au-svc-list li:nth-child(4) { animation-delay: .21s; }
.au-svc-list li:nth-child(5) { animation-delay: .28s; }
.au-svc-list li:hover { background: #fff; padding-left: 22px; padding-right: 22px; }
.au-svc-no { font-size: .8rem; font-weight: 800; letter-spacing: .08em; color: #94a3b8; }
.au-svc-name {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.05rem, 1.8vw, 1.32rem);
    font-weight: 800; letter-spacing: -.02em; color: var(--fx-ink); text-decoration: none;
    transition: color .25s var(--fx-ease);
}
.au-svc-list li:hover .au-svc-name { color: var(--fx-brand-1); }
.au-svc-desc { color: var(--fx-ink-soft); font-size: .94rem; }
.au-svc-arrow { color: #cbd5e1; transition: color .25s var(--fx-ease), transform .25s var(--fx-ease); }
.au-svc-list li:hover .au-svc-arrow { color: var(--fx-brand-2); transform: translateX(5px); }

/* ---- 7. logos ---- */
.au-logos { background: #fff; border-top: 1px solid var(--fx-line); border-bottom: 1px solid var(--fx-line); padding: 30px 0; overflow: hidden; }
.au-logos-label {
    text-align: center; font-size: .74rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: #94a3b8; margin-bottom: 20px;
}

/* ---- 8. company: definition ledger ---- */
.au-company { background: #f7f8fb; padding: clamp(58px, 6vw, 92px) 20px; }
.au-company-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 64px); align-items: start; }
.au-company-side { animation: auLeft .7s var(--fx-ease) both; position: sticky; top: 120px; }
.au-company-side h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: 14px; }
.au-company-note { color: var(--fx-ink-soft); line-height: 1.7; font-size: .98rem; }
.au-ledger { margin: 0; animation: auRise .7s .1s var(--fx-ease) both; }
.au-ledger > div {
    display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: baseline;
    padding: 18px 4px; border-bottom: 1px solid var(--fx-line);
}
.au-ledger > div:first-child { border-top: 1px solid var(--fx-line); }
.au-ledger dt { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.au-ledger dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--fx-ink); }
.au-ledger dd a { color: var(--fx-brand-1); text-decoration: none; }
.au-ledger dd a:hover { text-decoration: underline; }

/* ---- 9. investors: dark split panel ---- */
.au-invest {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #0b1226 0%, #12204a 100%);
    padding: clamp(58px, 6vw, 92px) 20px;
}
.au-invest::after {
    content: ""; position: absolute; right: -100px; bottom: -140px; width: 420px; height: 420px;
    border-radius: 50%; background: radial-gradient(circle, rgba(6, 214, 160, .18), transparent 70%);
    pointer-events: none;
}
.au-invest-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.au-invest-copy { animation: auLeft .7s var(--fx-ease) both; }
.au-invest-copy h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; margin-bottom: 16px; color: #fff; }
.au-invest-copy p { color: rgba(255, 255, 255, .74); line-height: 1.75; margin-bottom: 28px; }
.au-invest-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; animation: auRight .7s .1s var(--fx-ease) both; }
.au-invest-points li {
    display: flex; gap: 18px; align-items: flex-start; padding: 20px 18px; border-radius: 14px;
    transition: background .3s var(--fx-ease);
}
.au-invest-points li:hover { background: rgba(255, 255, 255, .06); }
.au-invest-points span {
    flex: none; font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: #6ee7b7; padding-top: 3px;
}
.au-invest-points strong { display: block; font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.au-invest-points div { color: rgba(255, 255, 255, .66); font-size: .92rem; line-height: 1.55; }

/* ---- 10. meeting band ---- */
.au-meet { background: #fff; padding: clamp(50px, 5.5vw, 82px) 20px; }
.au-meet-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    background: linear-gradient(120deg, #eef2fb 0%, #eafaf3 100%);
    border: 1px solid var(--fx-line); border-radius: 24px;
    padding: clamp(28px, 4vw, 46px);
    animation: auRise .7s var(--fx-ease) both;
}
.au-meet-text { max-width: 560px; }
.au-meet-text h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: 10px; }
.au-meet-text p { color: var(--fx-ink-soft); line-height: 1.65; }
.au-meet-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ---- responsive ---- */
@media (max-width: 980px) {
    .au-hero-grid, .au-founder-grid, .au-company-grid, .au-invest-grid { grid-template-columns: 1fr; }
    .au-company-side { position: static; }
    .au-zig, .au-zig-flip { grid-template-columns: 1fr; }
    .au-zig-flip .au-zig-text { order: 0; }
    .au-hv-chip-1 { left: 10px; }
    .au-hv-chip-2 { right: 10px; }
}
@media (max-width: 760px) {
    .au-stats-row { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
    .au-stat:nth-child(3)::before { display: none; }
    .au-svc-list li { grid-template-columns: 40px 1fr 20px; }
    .au-svc-desc { grid-column: 2 / 3; font-size: .86rem; }
    .au-ledger > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .au-hero-copy, .au-hero-visual, .au-hv-chip, .au-story-lead, .au-story-body,
    .au-founder-photo, .au-founder-copy, .au-stat, .au-zig, .au-svc-list li,
    .au-company-side, .au-ledger, .au-invest-copy, .au-invest-points, .au-meet-inner {
        animation: none; opacity: 1; transform: none;
    }
}

/* ==========================================================================
   34. TEAM PAGE (teams.html)
   Layouts kept deliberately distinct from about-us: full-bleed photo hero,
   reversed founder editorial, image-led portrait tiles, asymmetric mosaic,
   roster rows, tinted values band. CSS-keyframe reveals (never opacity-0
   stranded).
   ========================================================================== */
.tm-tag {
    display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: #6ee7b7;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px; padding: 7px 16px; margin-bottom: 18px;
}

/* ---- 1. hero: full-bleed photo ---- */
.tm-hero { position: relative; overflow: hidden; padding: 170px 20px clamp(64px, 7vw, 110px); }
.tm-hero-media { position: absolute; inset: 0; z-index: 0; }
.tm-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-hero-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 10, 22, .82) 0%, rgba(6, 10, 22, .62) 45%, rgba(6, 10, 22, .88) 100%);
}
.tm-hero-copy { position: relative; z-index: 1; text-align: center; max-width: 800px; }
.tm-hero-copy h1 {
    color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.12; margin-bottom: 16px;
    animation: auRise .7s var(--fx-ease) both;
}
.tm-hero-copy > p {
    color: rgba(255, 255, 255, .8); font-size: 1.06rem; line-height: 1.7; max-width: 620px; margin: 0 auto;
    animation: auRise .7s .1s var(--fx-ease) both;
}
.tm-hero-meta {
    display: flex; justify-content: center; gap: clamp(24px, 5vw, 60px); margin-top: 36px; flex-wrap: wrap;
    animation: auRise .7s .2s var(--fx-ease) both;
}
.tm-hero-meta div { display: flex; flex-direction: column; gap: 3px; }
.tm-hero-meta strong {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; font-weight: 800; color: #fff;
}
.tm-hero-meta span { font-size: .82rem; color: rgba(255, 255, 255, .62); }

/* ---- 2. founder: reversed editorial ---- */
.tm-founder { background: #fff; padding: clamp(58px, 6vw, 92px) 20px; }
.tm-founder-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.tm-founder-copy { animation: auLeft .7s var(--fx-ease) both; }
.tm-founder-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.tm-role {
    font-size: .84rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--fx-brand-2); margin: 6px 0 20px;
}
.tm-founder-lead {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 700; line-height: 1.45; letter-spacing: -.02em; color: var(--fx-ink);
    padding-left: 20px; border-left: 4px solid transparent; border-image: var(--fx-brand-grad) 1;
    margin-bottom: 18px;
}
.tm-founder-copy > p { color: var(--fx-ink-soft); line-height: 1.75; }
.tm-founder-signals { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 28px; }
.tm-founder-signals div {
    display: flex; flex-direction: column; gap: 2px;
    background: #f7f8fb; border: 1px solid var(--fx-line); border-radius: 12px; padding: 10px 16px;
    font-size: .92rem; font-weight: 600; color: var(--fx-ink);
}
.tm-founder-signals span { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.tm-founder-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tm-social-link {
    width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
    background: #f1f5f9; color: var(--fx-brand-1); border: 1px solid var(--fx-line);
    transition: background .25s var(--fx-ease), color .25s var(--fx-ease), transform .25s var(--fx-ease);
}
.tm-social-link:hover { background: var(--fx-brand-grad); color: #fff; transform: translateY(-3px); }
.tm-founder-photo { position: relative; animation: auRight .7s .1s var(--fx-ease) both; }
.tm-founder-photo img {
    width: 100%; aspect-ratio: 4 / 4.7; object-fit: cover; display: block;
    border-radius: 90px 24px 24px 24px; box-shadow: var(--fx-shadow-lg);
}
.tm-founder-badge {
    position: absolute; left: -14px; bottom: 30px;
    background: var(--fx-brand-grad); color: #fff; font-size: .74rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; padding: 9px 18px; border-radius: 999px;
    box-shadow: 0 10px 24px rgba(30, 64, 175, .3);
}

/* ---- 3. leadership: image-led tiles, caption slides up ---- */
.tm-lead { background: #f7f8fb; padding: clamp(58px, 6vw, 92px) 20px; }
.tm-lead-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tm-person {
    position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 3 / 3.7;
    box-shadow: var(--fx-shadow-md); animation: auRise .65s var(--fx-ease) both;
}
.tm-lead-grid .tm-person:nth-child(2) { animation-delay: .1s; }
.tm-lead-grid .tm-person:nth-child(3) { animation-delay: .2s; }
.tm-person img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--fx-ease); }
.tm-person:hover img { transform: scale(1.06); }
.tm-person-body {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(6, 10, 22, .55) 30%, rgba(6, 10, 22, .93) 100%);
}
.tm-person-body h3 { font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; }
.tm-person-role { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6ee7b7; margin: 4px 0 0; }
.tm-person-bio {
    font-size: .88rem; line-height: 1.55; color: rgba(255, 255, 255, .82);
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .45s var(--fx-ease), opacity .35s var(--fx-ease), margin-top .45s var(--fx-ease);
}
.tm-person:hover .tm-person-bio { max-height: 120px; opacity: 1; margin-top: 10px; }

/* ---- 4. group pictures: asymmetric mosaic ---- */
.tm-gallery { background: #fff; padding: clamp(58px, 6vw, 92px) 20px; }
.tm-gallery-note { color: var(--fx-ink-soft); max-width: 340px; font-size: .95rem; line-height: 1.6; }
/* Asymmetric mosaic: one large hero tile plus four supporting tiles. All 5
   source photos are portrait-orientation, so the supporting tiles are kept
   near-square (1 column × 1 row) rather than short wide strips — a 4:1
   strip forces ~80% of a portrait photo to be cropped away vertically. */
.tm-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 280px);
    grid-template-areas:
        "a a b c"
        "a a d e";
    gap: 16px;
}
.tm-mosaic figure {
    position: relative; margin: 0; overflow: hidden; border-radius: 18px;
    box-shadow: var(--fx-shadow-sm); animation: auFade .7s var(--fx-ease) both;
}
.tm-mosaic figure img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block;
    transition: transform .6s var(--fx-ease);
}
.tm-mosaic figure:hover img { transform: scale(1.05); }
/* brand-colour wash — each tile gets its own accent (--tm-c) fading in from
   the top-left, plus a dark base so captions stay legible; softens back on
   hover so the real photo comes through as a small reward for interacting */
.tm-mosaic figure::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--tm-c, #06d6a0) 55%, transparent) 0%, transparent 52%),
        linear-gradient(0deg, rgba(6, 10, 22, .78) 0%, rgba(6, 10, 22, .1) 45%, transparent 70%);
    mix-blend-mode: multiply;
    opacity: .85;
    pointer-events: none;
    transition: opacity .45s var(--fx-ease);
}
.tm-mosaic figure:hover::after { opacity: .5; }
.tm-mosaic figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; z-index: 2;
    font-size: .84rem; font-weight: 600; color: #fff;
    background: linear-gradient(180deg, transparent, rgba(6, 10, 22, .85));
}
.tm-m1 { grid-area: a; animation-delay: 0s; }
.tm-m2 { grid-area: b; animation-delay: .08s; }
.tm-m3 { grid-area: c; animation-delay: .16s; }
.tm-m4 { grid-area: d; animation-delay: .24s; }
.tm-m5 { grid-area: e; animation-delay: .32s; }

/* ---- 5. roster rows ---- */
.tm-roster { background: #f7f8fb; padding: clamp(58px, 6vw, 92px) 20px; }
.tm-roster-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--fx-line); }
.tm-roster-list li {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 56px minmax(140px, 200px) minmax(150px, 220px) 1fr;
    align-items: center; gap: 20px; padding: 18px 12px;
    border-bottom: 1px solid var(--fx-line);
    background: #f7f8fb;
    transition: background .3s var(--fx-ease), padding .3s var(--fx-ease);
    animation: auRise .6s var(--fx-ease) both;
}
.tm-roster-list li:nth-child(2) { animation-delay: .07s; }
.tm-roster-list li:nth-child(3) { animation-delay: .14s; }
.tm-roster-list li:nth-child(4) { animation-delay: .21s; }
/* explicit z-index so the hovered row (and its popup) unambiguously paints
   above sibling rows' own text — without this, the pop-up card can render
   underneath neighbouring rows' name/role text instead of over it */
.tm-roster-list li:hover { background: #fff; padding-left: 20px; z-index: 10; }
.tm-roster-list img {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 18%; display: block;
    border: 2px solid #fff; box-shadow: var(--fx-shadow-sm);
    position: relative; z-index: 2;
    transition: box-shadow .35s var(--fx-ease);
}
.tm-roster-list li:hover img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(30,64,175,.25); }
/* hover-to-enlarge: a floating portrait card pops up above the row using the
   same photo (passed in via --tm-photo since CSS can't read a sibling img's
   src), so you get a proper look at the person without leaving the list.
   Each row is a fixed 89px tall, so the popup is pinned flush to the row
   edge (no gap) and sized to exactly two row-heights (178px) — any gap or
   odd height here would land the popup's far edge mid-row, leaving a
   partial sliver of the next row's text peeking out.
   Opens upward by default; JS (ui.js) measures real available viewport
   space on hover and adds .pop-down when there isn't room above — the same
   collision check a dropdown/tooltip does — rather than guessing per-row. */
.tm-roster-list li::before {
    content: "";
    position: absolute;
    left: 12px; bottom: 100%; top: auto;
    width: 148px; height: 178px;
    border-radius: 16px;
    background-image: var(--tm-photo);
    background-size: cover;
    background-position: center 18%;
    background-color: #e2e8f0;
    border: 4px solid #fff;
    box-shadow: 0 26px 54px rgba(2, 6, 23, .32);
    opacity: 0;
    transform: translateY(10px) scale(.9);
    transform-origin: bottom left;
    pointer-events: none;
    z-index: 20;
    transition: opacity .3s var(--fx-ease), transform .4s var(--fx-ease-spring);
}
.tm-roster-list li.pop-down::before {
    top: 100%; bottom: auto;
    transform-origin: top left;
    transform: translateY(-10px) scale(.9);
}
.tm-roster-list li:hover::before,
.tm-roster-list li.pop-down:hover::before {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.tm-r-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.02rem; font-weight: 800; color: var(--fx-ink); letter-spacing: -.01em; }
.tm-r-role { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fx-brand-1); }
.tm-r-note { color: var(--fx-ink-soft); font-size: .93rem; }

/* ---- 6. values: tinted dark band ---- */
.tm-values {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #0b1226 0%, #12204a 100%);
    padding: clamp(58px, 6vw, 92px) 20px;
}
.tm-values .au-head h2 { color: #fff; }
.tm-values-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px); }
.tm-value { padding-top: 22px; border-top: 2px solid rgba(255, 255, 255, .16); animation: auRise .65s var(--fx-ease) both; }
.tm-values-row .tm-value:nth-child(2) { animation-delay: .1s; }
.tm-values-row .tm-value:nth-child(3) { animation-delay: .2s; }
.tm-value-no {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.9rem; font-weight: 800;
    line-height: 1; margin-bottom: 12px;
    background: linear-gradient(120deg, #ffffff, #34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tm-value h3 { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: -.01em; }
.tm-value p { color: rgba(255, 255, 255, .68); line-height: 1.65; font-size: .94rem; }

/* ---- 7. join band ---- */
.tm-join { background: #fff; padding: clamp(50px, 5.5vw, 82px) 20px; }
.tm-join-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    background: linear-gradient(120deg, #eef2fb 0%, #eafaf3 100%);
    border: 1px solid var(--fx-line); border-radius: 24px; padding: clamp(28px, 4vw, 46px);
    animation: auRise .7s var(--fx-ease) both;
}
.tm-join-inner h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: 10px; }
.tm-join-inner p { color: var(--fx-ink-soft); line-height: 1.65; max-width: 520px; }
.tm-join-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ---- responsive ---- */
@media (max-width: 980px) {
    .tm-founder-grid { grid-template-columns: 1fr; }
    .tm-founder-photo { max-width: 420px; }
    .tm-lead-grid { grid-template-columns: repeat(2, 1fr); }
    .tm-values-row { grid-template-columns: 1fr; gap: 26px; }
    .tm-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 200px) repeat(2, 220px);
        grid-template-areas: "a a" "a a" "b c" "d e";
    }
    /* bios always visible on touch, where there is no hover */
    .tm-person-bio { max-height: 120px; opacity: 1; margin-top: 10px; }
}
@media (max-width: 700px) {
    .tm-lead-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
    .tm-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: 260px repeat(4, 240px);
        grid-template-areas: "a" "b" "c" "d" "e";
    }
    .tm-roster-list li { grid-template-columns: 46px 1fr; row-gap: 4px; }
    .tm-r-role { grid-column: 2 / 3; }
    .tm-r-note { grid-column: 2 / 3; font-size: .86rem; }
    .tm-hero-meta { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .tm-hero-copy h1, .tm-hero-copy > p, .tm-hero-meta, .tm-founder-copy, .tm-founder-photo,
    .tm-person, .tm-mosaic figure, .tm-roster-list li, .tm-value, .tm-join-inner {
        animation: none; opacity: 1; transform: none;
    }
    .tm-person-bio { max-height: 120px; opacity: 1; margin-top: 10px; }
    .tm-roster-list li::before { transition: opacity .2s var(--fx-ease); }
}

/* ==========================================================================
   35. CLIENT WORK / PROJECTS PAGE (projects.html)
   Deliberately DENSE: section padding is roughly half the site default and
   grid gaps are tight, per the brief to avoid wasted margin/padding.
   ========================================================================== */
.pj-kicker {
    font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--fx-brand-1); margin-bottom: 8px;
}
.pj-kicker-light { color: #6ee7b7; }
.pj-tag {
    display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--fx-brand-1);
    background: var(--fx-brand-grad-soft); border-radius: 999px; padding: 6px 14px; margin-bottom: 12px;
}
.pj-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    flex-wrap: wrap; margin-bottom: 22px;
}
.pj-head h2 { font-size: clamp(1.5rem, 2.7vw, 2.1rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.18; }
.pj-head-note { color: var(--fx-ink-soft); font-size: .92rem; max-width: 380px; line-height: 1.55; }
.pj-head-light h2 { color: #fff; }
.pj-head-note-light { color: rgba(255, 255, 255, .66); }

/* ---- 1. hero: compact ---- */
.pj-hero {
    padding: 118px 20px 30px;
    background:
        radial-gradient(620px 260px at 10% 0%, rgba(56, 189, 248, .12), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
}
.pj-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.pj-hero-copy { max-width: 640px; animation: auRise .6s var(--fx-ease) both; }
.pj-hero-copy h1 { font-size: clamp(1.9rem, 3.9vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin-bottom: 10px; }
.pj-hero-copy > p { color: var(--fx-ink-soft); font-size: 1rem; line-height: 1.6; }
.pj-hero-stats { list-style: none; padding: 0; margin: 0; display: flex; gap: 26px; animation: auRise .6s .1s var(--fx-ease) both; }
.pj-hero-stats li { display: flex; flex-direction: column; }
.pj-hero-stats strong {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
    background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pj-hero-stats span { font-size: .76rem; color: var(--fx-ink-soft); }

/* ---- 2. featured case study ---- */
.pj-feature { background: #fff; padding: 34px 20px; }
.pj-feature-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center; }
.pj-feature-media { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 11; box-shadow: var(--fx-shadow-lg); animation: auLeft .6s var(--fx-ease) both; }
.pj-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-feature-badge {
    position: absolute; top: 14px; left: 14px;
    background: rgba(6, 10, 22, .78); color: #fff; backdrop-filter: blur(6px);
    font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    padding: 7px 13px; border-radius: 999px;
}
.pj-feature-copy { animation: auRight .6s .08s var(--fx-ease) both; }
.pj-feature-copy h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; margin-bottom: 10px; }
.pj-feature-lead { color: var(--fx-ink-soft); line-height: 1.6; font-size: .96rem; margin-bottom: 14px; }
.pj-feature-list { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 7px; }
.pj-feature-list li { position: relative; padding-left: 24px; font-size: .93rem; color: var(--fx-ink); }
.pj-feature-list li::before {
    content: "✓"; position: absolute; left: 0; top: 1px;
    width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
    background: var(--fx-brand-grad); color: #fff; font-size: 9px; font-weight: 800;
}
.pj-metrics { display: flex; gap: 10px; flex-wrap: wrap; }
.pj-metrics div {
    flex: 1 1 110px; background: #f7f8fb; border: 1px solid var(--fx-line);
    border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column;
}
.pj-metrics strong {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.3rem; font-weight: 800;
    letter-spacing: -.02em; color: var(--fx-brand-1);
}
.pj-metrics span { font-size: .74rem; color: var(--fx-ink-soft); }

/* ---- 3. dense work grid ---- */
.pj-grid-sec { background: #f7f8fb; padding: 34px 20px; }
.pj-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; }
.pj-tile {
    position: relative; overflow: hidden; border-radius: 16px; box-shadow: var(--fx-shadow-sm);
    animation: auFade .6s var(--fx-ease) both;
}
.pj-tile:nth-child(2) { animation-delay: .06s; }
.pj-tile:nth-child(3) { animation-delay: .12s; }
.pj-tile:nth-child(4) { animation-delay: .18s; }
.pj-tile:nth-child(5) { animation-delay: .24s; }
.pj-tile-lg { grid-column: span 2; grid-row: span 2; }
.pj-tile-wide { grid-column: span 2; }
.pj-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--fx-ease); }
.pj-tile:hover img { transform: scale(1.06); }
.pj-tile-body {
    position: absolute; inset: auto 0 0 0; padding: 16px 16px 14px; color: #fff;
    background: linear-gradient(180deg, transparent, rgba(6, 10, 22, .62) 38%, rgba(6, 10, 22, .94) 100%);
}
.pj-tile-cat { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6ee7b7; }
.pj-tile-body h3 { font-size: 1.02rem; font-weight: 800; letter-spacing: -.015em; margin: 5px 0 0; }
.pj-tile-body p {
    font-size: .84rem; line-height: 1.45; color: rgba(255, 255, 255, .8);
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .4s var(--fx-ease), opacity .3s var(--fx-ease), margin .4s var(--fx-ease);
}
.pj-tile:hover .pj-tile-body p { max-height: 70px; opacity: 1; margin: 6px 0 0; }
.pj-tile-stat {
    display: inline-block; margin-top: 8px; font-size: .74rem; font-weight: 800;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2);
    padding: 4px 10px; border-radius: 999px;
}

/* ---- 4. video ---- */
.pj-video {
    background: linear-gradient(135deg, #0b1226 0%, #101c3d 100%);
    padding: 36px 20px 34px; color: #fff;
}
.pj-video-stage {
    position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 21 / 9;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .5); animation: auRise .6s var(--fx-ease) both;
}
.pj-video-main { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-video-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 18px;
    background: linear-gradient(180deg, transparent, rgba(6, 10, 22, .9));
}
.pj-video-caption h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.015em; margin: 6px 0 3px; }
.pj-video-caption p { font-size: .88rem; color: rgba(255, 255, 255, .72); }
.pj-live {
    display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase; color: #6ee7b7;
}
.pj-live i { width: 7px; height: 7px; border-radius: 50%; background: #06d6a0; animation: heDotPulse 2s ease-out infinite; }
.pj-video-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.pj-thumb {
    position: relative; border: 1px solid rgba(255, 255, 255, .14); background: none; padding: 0;
    border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9;
    transition: border-color .25s var(--fx-ease), transform .25s var(--fx-ease);
}
.pj-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .55; transition: opacity .25s var(--fx-ease); }
.pj-thumb span {
    position: absolute; left: 10px; bottom: 8px; font-size: .76rem; font-weight: 700; color: #fff;
}
.pj-thumb:hover { transform: translateY(-3px); }
.pj-thumb:hover img { opacity: .8; }
.pj-thumb.is-active { border-color: #06d6a0; }
.pj-thumb.is-active img { opacity: 1; }

/* ---- 5. client messages ---- */
.pj-words { background: #fff; padding: 34px 20px; }
.pj-words-cols { columns: 2; column-gap: 14px; }
.pj-quote {
    break-inside: avoid; margin: 0 0 14px; padding: 18px 18px 16px;
    background: #f7f8fb; border: 1px solid var(--fx-line); border-radius: 16px;
    animation: auRise .6s var(--fx-ease) both;
}
.pj-quote-accent { background: linear-gradient(135deg, #eef2fb, #eafaf3); }
.pj-quote p { font-size: .96rem; line-height: 1.6; color: var(--fx-ink); margin-bottom: 14px; }
.pj-quote figcaption { display: flex; align-items: center; gap: 11px; }
.pj-quote figcaption img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.pj-quote figcaption span { display: flex; flex-direction: column; font-size: .8rem; color: var(--fx-ink-soft); }
.pj-quote figcaption strong { font-size: .88rem; color: var(--fx-ink); }

/* ---- 6. timeline ---- */
.pj-process { background: #f7f8fb; padding: 34px 20px; }
.pj-timeline {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.pj-timeline li {
    position: relative; padding: 16px 16px 14px; background: #fff;
    border: 1px solid var(--fx-line); border-radius: 14px;
    animation: auRise .55s var(--fx-ease) both;
}
.pj-timeline li:nth-child(2) { animation-delay: .07s; }
.pj-timeline li:nth-child(3) { animation-delay: .14s; }
.pj-timeline li:nth-child(4) { animation-delay: .21s; }
.pj-tl-no {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; font-weight: 800;
    background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pj-timeline h3 { font-size: 1rem; font-weight: 700; margin: 4px 0 5px; color: var(--fx-ink); }
.pj-timeline p { font-size: .86rem; line-height: 1.5; color: var(--fx-ink-soft); }
.pj-tl-when {
    display: inline-block; margin-top: 9px; font-size: .7rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; color: var(--fx-brand-1);
    background: var(--fx-brand-grad-soft); padding: 4px 9px; border-radius: 999px;
}

/* ---- 7. cta ---- */
.pj-cta { background: #fff; padding: 30px 20px 44px; }
.pj-cta-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: linear-gradient(120deg, #eef2fb 0%, #eafaf3 100%);
    border: 1px solid var(--fx-line); border-radius: 20px; padding: 26px 30px;
    animation: auRise .6s var(--fx-ease) both;
}
.pj-cta-inner h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: 6px; }
.pj-cta-inner p { color: var(--fx-ink-soft); font-size: .95rem; }
.pj-cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
    .pj-feature-grid { grid-template-columns: 1fr; }
    .pj-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
    .pj-tile-lg, .pj-tile-wide { grid-column: span 2; }
    .pj-tile-lg { grid-row: span 1; }
    .pj-timeline { grid-template-columns: repeat(2, 1fr); }
    .pj-video-thumbs { grid-template-columns: repeat(2, 1fr); }
    .pj-tile-body p { max-height: 70px; opacity: 1; margin: 6px 0 0; }
}
@media (max-width: 640px) {
    .pj-grid { grid-template-columns: 1fr; }
    .pj-tile-lg, .pj-tile-wide { grid-column: span 1; }
    .pj-timeline { grid-template-columns: 1fr; }
    .pj-words-cols { columns: 1; }
    .pj-hero-stats { gap: 18px; }
    .pj-video-stage { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
    .pj-hero-copy, .pj-hero-stats, .pj-feature-media, .pj-feature-copy, .pj-tile,
    .pj-video-stage, .pj-quote, .pj-timeline li, .pj-cta-inner {
        animation: none; opacity: 1; transform: none;
    }
    .pj-live i { animation: none; }
}

/* ==========================================================================
   36. SERVICES PAGE — per-service DEMO sections (svcd-)
   Modern SaaS product-page pattern: sticky jump-nav, then one alternating
   media/copy "demo" block per service with live video, feature list and
   headline metrics — replacing the old uniform card grid.
   ========================================================================== */
/* --- sticky jump nav --- */
.svcd-nav {
    position: sticky; top: 99px; z-index: 40;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--fx-line);
}
.svcd-nav-inner { display: flex; align-items: center; gap: 8px; padding: 10px 20px; overflow-x: auto; scrollbar-width: none; }
.svcd-nav-inner::-webkit-scrollbar { display: none; }
.svcd-pill {
    flex: none; font-size: .86rem; font-weight: 700; color: var(--fx-ink-soft);
    text-decoration: none; padding: 8px 16px; border-radius: 999px;
    transition: background .25s var(--fx-ease), color .25s var(--fx-ease);
}
.svcd-pill:hover { background: #f1f5f9; color: var(--fx-ink); }
.svcd-pill.is-active { background: var(--fx-brand-grad); color: #fff; }
.svcd-nav-cta {
    flex: none; margin-left: auto; font-size: .84rem; font-weight: 700; text-decoration: none;
    color: var(--fx-brand-1); border: 1px solid var(--fx-line); border-radius: 999px; padding: 8px 16px;
    transition: border-color .25s var(--fx-ease), background .25s var(--fx-ease);
}
.svcd-nav-cta:hover { border-color: var(--fx-brand-2); background: #f7fdfb; }

/* --- demo block --- */
.svcd { background: #fff; padding: clamp(46px, 5vw, 74px) 20px; scroll-margin-top: 156px; }
.svcd-alt { background: linear-gradient(180deg, #f7f8fb 0%, #eef2fb 100%); }
.svcd-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(28px, 4.5vw, 62px); align-items: center; }
.svcd-grid-flip .svcd-copy { order: 2; }

.svcd-index {
    display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--fx-brand-1); margin-bottom: 12px;
}
.svcd-copy h2 {
    font-size: clamp(1.6rem, 3.1vw, 2.4rem); font-weight: 800; letter-spacing: -.03em;
    line-height: 1.14; margin-bottom: 12px;
}
.svcd-lead { color: var(--fx-ink-soft); font-size: 1rem; line-height: 1.65; margin-bottom: 20px; max-width: 520px; }

.svcd-feats { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.svcd-feats li {
    position: relative; padding-left: 30px; font-size: .93rem; line-height: 1.5; color: var(--fx-ink-soft);
}
.svcd-feats li b { display: block; color: var(--fx-ink); font-weight: 700; font-size: .97rem; margin-bottom: 1px; }
.svcd-feats li::before {
    content: ""; position: absolute; left: 0; top: 4px;
    width: 18px; height: 18px; border-radius: 6px;
    background: var(--fx-brand-grad-soft);
    border: 1px solid rgba(30, 64, 175, .18);
}
.svcd-feats li::after {
    content: ""; position: absolute; left: 6px; top: 9px;
    width: 6px; height: 3px; border-left: 2px solid var(--fx-brand-1);
    border-bottom: 2px solid var(--fx-brand-1); transform: rotate(-45deg);
}

.svcd-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.svcd-stats div {
    flex: 1 1 96px; background: #fff; border: 1px solid var(--fx-line);
    border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column;
    box-shadow: var(--fx-shadow-sm);
}
.svcd-alt .svcd-stats div { background: #fff; }
.svcd-stats b {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
    background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.svcd-stats span { font-size: .73rem; color: var(--fx-ink-soft); margin-top: 1px; }

.svcd-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.svcd-link {
    display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem;
    color: var(--fx-brand-1); text-decoration: none; transition: gap .25s var(--fx-ease);
}
.svcd-link:hover { gap: 11px; }

/* --- media --- */
.svcd-media {
    position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3;
    box-shadow: var(--fx-shadow-lg); background: #0b0b0c;
}
.svcd-media video, .svcd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svcd-chip {
    position: absolute; top: 14px; left: 14px;
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(6, 10, 22, .74); backdrop-filter: blur(6px);
    color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 13px; border-radius: 999px;
}
.svcd-chip i { width: 7px; height: 7px; border-radius: 50%; background: #06d6a0; animation: heDotPulse 2s ease-out infinite; }
.svcd-chip-static { background: rgba(6, 10, 22, .68); }

/* --- compare strip --- */
.svcd-compare { background: #0b1226; color: #fff; padding: clamp(40px, 4.5vw, 62px) 20px; }
.svcd-compare-head { text-align: center; max-width: 620px; margin: 0 auto 26px; }
.svcd-compare-head h2 { font-size: clamp(1.5rem, 2.7vw, 2.1rem); font-weight: 800; letter-spacing: -.025em; color: #fff; margin-bottom: 8px; }
.svcd-compare-head p { color: rgba(255, 255, 255, .68); font-size: .95rem; }
.svcd-compare-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.svcd-mini {
    display: flex; flex-direction: column; gap: 3px; text-decoration: none;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px; padding: 16px 14px;
    transition: background .25s var(--fx-ease), transform .25s var(--fx-ease), border-color .25s var(--fx-ease);
}
.svcd-mini:hover { background: rgba(255, 255, 255, .1); transform: translateY(-4px); border-color: rgba(6, 214, 160, .5); }
.svcd-mini span { font-size: 1.3rem; line-height: 1; }
.svcd-mini b { font-size: .93rem; font-weight: 700; color: #fff; margin-top: 4px; }
.svcd-mini i { font-style: normal; font-size: .76rem; color: rgba(255, 255, 255, .6); }
.svcd-mini-cta { background: var(--fx-brand-grad); border-color: transparent; }
.svcd-mini-cta i { color: rgba(255, 255, 255, .85); }

/* --- responsive --- */
@media (max-width: 940px) {
    .svcd-grid, .svcd-grid-flip { grid-template-columns: 1fr; }
    .svcd-grid-flip .svcd-copy { order: 0; }
    .svcd-media { aspect-ratio: 16 / 10; }
    .svcd-compare-row { grid-template-columns: repeat(3, 1fr); }
    .svcd-nav { top: 95px; }
}
@media (max-width: 560px) {
    .svcd-compare-row { grid-template-columns: repeat(2, 1fr); }
    .svcd-stats div { flex: 1 1 80px; }
}
@media (prefers-reduced-motion: reduce) {
    .svcd-chip i { animation: none; }
}

/* ==========================================================================
   37. MEGA MENU (mn-) — grouped dropdown navigation with layered animation.
   Desktop: hover/focus opens a panel that fades + lifts in, with its columns
   and links staggering in behind it. Mobile: the same markup collapses into
   an accordion inside the existing .nav-links slide-in drawer.
   ========================================================================== */
.mega-nav { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mn-item { position: relative; }

/* --- top-level items --- */
.mega-nav > .mn-item > a,
.mn-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; font-size: .93rem; font-weight: 600; color: #1f2440;
    background: none; border: none; cursor: pointer;
    padding: 9px 15px; border-radius: 10px; text-decoration: none;
    transition: color .22s var(--fx-ease), background .22s var(--fx-ease);
}
.mega-nav > .mn-item > a::before { display: none; }   /* kill base underline effect */
.mega-nav > .mn-item > a:hover,
.mn-trigger:hover { color: var(--fx-brand-1); background: rgba(30, 64, 175, .06); transform: none; box-shadow: none; }
.mega-nav > .mn-item > a.is-current,
.mn-trigger.is-current { color: var(--fx-brand-1); background: var(--fx-brand-grad-soft); }
.mn-chev { transition: transform .3s var(--fx-ease); }
.mn-item.is-open .mn-chev { transform: rotate(180deg); }
.mn-item.is-open .mn-trigger { color: var(--fx-brand-1); background: rgba(30, 64, 175, .06); }

/* --- the panel --- */
.mn-panel {
    position: absolute; top: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(-8px) scale(.98);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s var(--fx-ease), transform .34s var(--fx-ease-spring), visibility .28s;
    z-index: 60;
}
.mn-item.is-open .mn-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}
/* invisible bridge so the pointer can travel from trigger to panel */
.mn-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
/* little arrow */
.mn-panel::after {
    content: ""; position: absolute; top: -6px; left: 50%; margin-left: -6px;
    width: 12px; height: 12px; background: #fff; transform: rotate(45deg);
    border-left: 1px solid var(--fx-line); border-top: 1px solid var(--fx-line);
}
.mn-panel-inner {
    position: relative; display: grid; gap: 26px;
    background: #fff; border: 1px solid var(--fx-line); border-radius: 18px;
    padding: 22px; box-shadow: 0 26px 60px rgba(2, 6, 23, .16);
}
.mn-panel-2 { grid-template-columns: repeat(2, minmax(215px, 1fr)); }
.mn-panel-3 { grid-template-columns: minmax(230px, 1fr) minmax(190px, .8fr) minmax(215px, .95fr); }

.mn-col-label {
    display: block; font-size: .68rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #94a3b8; margin-bottom: 10px; padding-left: 10px;
}

/* --- links inside the panel --- */
.mn-link {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 9px 10px; border-radius: 11px; text-decoration: none;
    transition: background .22s var(--fx-ease), transform .22s var(--fx-ease);
    /* staggered entrance, driven by the .is-open state below */
    opacity: 0; transform: translateY(8px);
}
.mn-item.is-open .mn-link { animation: mnItemIn .42s var(--fx-ease) forwards; }
@keyframes mnItemIn { to { opacity: 1; transform: translateY(0); } }
.mn-col .mn-link:nth-child(2) { animation-delay: .04s; }
.mn-col .mn-link:nth-child(3) { animation-delay: .08s; }
.mn-col .mn-link:nth-child(4) { animation-delay: .12s; }
.mn-col .mn-link:nth-child(5) { animation-delay: .16s; }
.mn-col .mn-link:nth-child(6) { animation-delay: .20s; }
.mn-link:hover { background: #f5f8ff; transform: translateX(3px); }

/* the emoji tiles (.mn-ic) that used to lead each row were removed from the
   markup — the rows are typographic now; see section 76 */
.mn-link span:last-child { display: flex; flex-direction: column; }
.mn-link b { font-size: .91rem; font-weight: 700; color: var(--fx-ink); line-height: 1.3; }
.mn-link i { font-style: normal; font-size: .78rem; color: var(--fx-ink-soft); margin-top: 1px; line-height: 1.35; }

.mn-link-plain {
    padding: 8px 10px; font-size: .89rem; font-weight: 600; color: var(--fx-ink-soft);
}
.mn-link-plain:hover { color: var(--fx-brand-1); }

/* --- featured promo panel --- */
.mn-feature {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 18px; border-radius: 14px; text-decoration: none;
    color: #fff; position: relative; overflow: hidden;
    opacity: 0; transform: translateY(8px);
}
/* real client screenshot behind a gradient scrim so the text stays legible */
.mn-feature-img {
    position: absolute; inset: 0; z-index: 0;
    background: url("../images/client-work/screens/shapins.jpg") center top / cover no-repeat;
    transition: transform .6s var(--fx-ease);
}
.mn-feature-img::after {
    content: ""; position: absolute; inset: 0;
    /* darkest across the bottom where the text sits, so it always reads;
       a light tint up top keeps the screenshot recognisable */
    background:
        linear-gradient(to top, rgba(5, 12, 26, .97) 0%, rgba(6, 16, 34, .94) 62%, rgba(9, 21, 46, .62) 84%, rgba(9, 21, 46, .44) 100%),
        linear-gradient(120deg, rgba(6, 30, 26, .3), transparent 55%);
}
.mn-feature:hover .mn-feature-img { transform: scale(1.06); }
.mn-item.is-open .mn-feature { animation: mnItemIn .45s .1s var(--fx-ease) forwards; }
.mn-feature::after {
    content: ""; position: absolute; top: -60px; right: -50px; width: 170px; height: 170px;
    border-radius: 50%; background: radial-gradient(circle, rgba(6, 214, 160, .32), transparent 70%);
    transition: transform .5s var(--fx-ease);
}
.mn-feature:hover::after { transform: scale(1.25); }
.mn-feature-tag {
    position: relative; font-size: .64rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #6ee7b7; margin-bottom: 8px;
}
.mn-feature strong { position: relative; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.mn-feature-note { position: relative; font-size: .8rem; line-height: 1.45; color: rgba(255, 255, 255, .85); margin-bottom: 12px; text-shadow: 0 1px 5px rgba(0, 0, 0, .5); }
.mn-feature-tag { text-shadow: 0 1px 5px rgba(0, 0, 0, .5); }
.mn-feature-go { text-shadow: 0 1px 5px rgba(0, 0, 0, .5); }
.mn-feature-go {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 700; color: #fff; transition: gap .25s var(--fx-ease);
}
.mn-feature:hover .mn-feature-go { gap: 11px; }

/* --- CTA --- */
/* `.nav-links a` in base style.css is specificity 0-1-1 and was wiping the
   gradient off a plain `.mn-cta` (0-1-0) — hence the qualified selector. */
.mega-nav a.mn-cta {
    display: inline-flex; align-items: center; margin-left: 8px;
    background: var(--fx-brand-grad); color: #fff !important;
    font-size: .89rem; font-weight: 700; padding: 10px 20px; border-radius: 999px;
    text-decoration: none; box-shadow: 0 8px 20px rgba(30, 64, 175, .26);
    transition: transform .25s var(--fx-ease-spring), box-shadow .25s var(--fx-ease);
}
.mega-nav a.mn-cta::before { display: none; }
.mega-nav a.mn-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6, 214, 160, .38); }

/* --- mobile: accordion inside the existing drawer --- */
@media (max-width: 992px) {
    .mega-nav { flex-direction: column; align-items: stretch; gap: 2px; }
    .mn-item { width: 100%; }
    .mega-nav > .mn-item > a, .mn-trigger { width: 100%; justify-content: space-between; padding: 13px 16px; }
    .mn-panel {
        position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
        max-height: 0; overflow: hidden;
        transition: max-height .4s var(--fx-ease);
    }
    .mn-item.is-open .mn-panel { max-height: 760px; transform: none; }
    .mn-panel::after, .mn-panel::before { display: none; }
    .mn-panel-inner {
        grid-template-columns: 1fr !important; gap: 14px; padding: 6px 4px 12px;
        border: none; box-shadow: none; border-radius: 0; background: transparent;
    }
    /* base mobile drawer sets `.nav-links a { display:block }` (0-1-1), which
       out-ranks a bare `.mn-link` (0-1-0) and stacked the icon above the text */
    .mega-nav a.mn-link { display: flex; margin: 0; }
    .mega-nav a.mn-link-plain { display: block; }
    .mn-link { opacity: 1; transform: none; animation: none !important; }
    .mega-nav a.mn-feature { display: flex; }
    .mn-feature { opacity: 1; transform: none; animation: none !important; }
    .mn-cta { margin: 10px 16px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .mn-panel, .mn-link, .mn-feature, .mn-chev, .mn-cta { transition: none; animation: none !important; }
    .mn-item.is-open .mn-link, .mn-item.is-open .mn-feature { opacity: 1; transform: none; }
}

/* ==========================================================================
   38. FOOTER REFRESH — closing CTA strip, clearer section labels, rebuilt
   social buttons and a contact list with real icons.
   The old `.social-icons` markup was replaced by `.ft-social` because the
   base `.social-icons a::before` is an absolutely-positioned gradient that
   painted OVER the SVG on hover, blanking the icon out.
   ========================================================================== */
/* --- closing CTA strip --- */
.ft-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 26px;
    flex-wrap: wrap; margin-bottom: 42px; padding: 26px 30px;
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(37, 99, 235, .16), rgba(6, 214, 160, .12));
    border: 1px solid rgba(255, 255, 255, .10);
}
.ft-cta-text h3 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: 5px;
}
.ft-cta-text p { color: rgba(255, 255, 255, .7); font-size: .93rem; margin: 0; }
.site-footer .ft-cta-btn { flex: none; }

/* --- social buttons (rounded squares, gradient on hover) --- */
.ft-social { display: flex; gap: 9px; margin-top: 18px; }
.ft-social a {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 11px; color: #14213d;
    background: #eef1fb;
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 4px 12px rgba(2, 6, 23, .25);
    transition: color .25s var(--fx-ease), background .25s var(--fx-ease),
                border-color .25s var(--fx-ease), transform .25s var(--fx-ease-spring),
                box-shadow .25s var(--fx-ease);
}
.ft-social a:hover {
    color: #fff; transform: translateY(-3px);
    background: var(--fx-brand-grad); border-color: transparent;
    box-shadow: 0 8px 18px rgba(6, 214, 160, .35);
}
.ft-social svg { display: block; }

/* --- contact list with icons --- */
.ft-contact { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.ft-contact li { display: flex; align-items: flex-start; gap: 11px; }
.ft-contact svg { flex: none; margin-top: 3px; color: #6ee7b7; }
.ft-contact a, .ft-contact span { color: #a9b3cc; font-size: .9rem; line-height: 1.5; text-decoration: none; }
.ft-contact a:hover { color: #fff; }

/* availability badge */
.ft-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 600; color: #93a0bd;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
    padding: 7px 13px; border-radius: 999px;
}
.ft-status i {
    width: 7px; height: 7px; border-radius: 50%; background: #06d6a0;
    box-shadow: 0 0 0 0 rgba(6, 214, 160, .6); animation: heDotPulse 2.4s ease-out infinite;
}

/* --- back to top --- */
.site-footer .ft-top {
    display: inline-flex; align-items: center; gap: 6px;
    transition: color .25s var(--fx-ease), gap .25s var(--fx-ease);
}
.site-footer .ft-top:hover { gap: 10px; }
.site-footer .footer-bottom p strong { color: #93a0bd; font-weight: 700; }

@media (max-width: 700px) {
    .ft-cta { padding: 22px; text-align: center; justify-content: center; }
    .ft-cta-text { width: 100%; }
    .site-footer .ft-cta-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ft-status i { animation: none; }
    .ft-social a { transition: none; }
}

/* ==========================================================================
   39. CLIENT SHOWCASE — Shapins Clinic multi-location grid + fallback-card
   logo/monogram variants for project screenshots that fail to load.
   ========================================================================== */
.ps-fallback-logo { max-width: 130px; max-height: 46px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.ps-fallback-mono {
    width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: .02em;
    color: #fff; background: var(--fx-brand-grad);
}

.ps-locations { margin-top: 28px; padding-top: 28px; border-top: 1px dashed rgba(15, 23, 42, .12); }
.ps-locations-label {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--fx-brand-2, #1e40af); margin-bottom: 16px;
}
.ps-locations-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.ps-location-card {
    border-radius: 14px; overflow: hidden; background: #fff;
    border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
    transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
.ps-location-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 23, 42, .12); }
.ps-location-card img { width: 100%; height: 96px; object-fit: cover; display: block; }
.ps-location-info { padding: 10px 12px 14px; }
.ps-location-info strong { display: block; font-size: .9rem; color: var(--fx-ink, #0f172a); margin-bottom: 3px; }
.ps-location-info span { display: block; font-size: .74rem; line-height: 1.4; color: var(--fx-ink-soft, #64748b); }

@media (max-width: 1024px) {
    .ps-locations-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .ps-locations-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   40. BENTO GRID — "Why Businesses Choose FunnelUX"
   ========================================================================== */
.bento-section { background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%); }

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
}
.bento-wide { grid-column: span 2; }

.bento-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 20px;
    padding: 30px 28px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
    transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease), border-color .35s var(--fx-ease);
    overflow: hidden;
}
.bento-card::before {
    content: "";
    position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: var(--fx-brand-grad);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .35s var(--fx-ease);
    pointer-events: none;
}
.bento-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .1);
    border-color: transparent;
}
.bento-card:hover::before { opacity: 1; }

.bento-ic {
    display: inline-grid; place-items: center;
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(6, 214, 160, .12));
    color: #1e40af;
    margin-bottom: 18px;
}
.bento-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; font-weight: 800;
    color: var(--fx-ink); margin-bottom: 8px; letter-spacing: -.01em;
}
.bento-card p { color: var(--fx-ink-soft); font-size: .92rem; line-height: 1.6; margin: 0; }

@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-wide { grid-column: span 2; }
}
@media (max-width: 640px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-wide { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
    .bento-card { transition: none; }
}

/* ==========================================================================
   41. AI WORKFLOW — dark aurora rail, Lead → … → Happy Customer
   ========================================================================== */
.flow-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0b1226 0%, #0a0f1e 100%);
    padding: clamp(64px, 7vw, 104px) 20px;
    color: #cbd3e6;
}
.flow-aurora {
    position: absolute; border-radius: 50%; pointer-events: none;
    filter: blur(10px);
}
.flow-aurora-1 {
    width: 520px; height: 520px; top: -220px; left: -120px;
    background: radial-gradient(circle, rgba(37, 99, 235, .20), transparent 68%);
}
.flow-aurora-2 {
    width: 480px; height: 480px; bottom: -240px; right: -100px;
    background: radial-gradient(circle, rgba(6, 214, 160, .16), transparent 70%);
}
.flow-section .container { position: relative; z-index: 1; }

.flow-intro { text-align: center; max-width: 720px; margin: 0 auto clamp(44px, 5vw, 68px); }
.flow-eyebrow {
    display: inline-block; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #6ee7b7; margin-bottom: 14px;
}
.flow-title {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 12px;
}
.flow-sub { color: rgba(255, 255, 255, .66); font-size: 1rem; line-height: 1.6; margin: 0; }

.flow-rail {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 0;
}
.flow-step {
    position: relative; text-align: center; padding: 0 6px;
    opacity: 0; animation: flowIn .6s var(--fx-ease) forwards;
    animation-delay: calc(var(--i) * .09s);
}
/* connector from previous node centre to this node centre */
.flow-step:not(:first-child)::before {
    content: ""; position: absolute; top: 27px; right: 50%; left: -50%; height: 2px;
    background: linear-gradient(90deg, rgba(110, 231, 183, .12), rgba(110, 231, 183, .45));
}
/* travelling pulse */
.flow-step:not(:first-child)::after {
    content: ""; position: absolute; top: 23px; left: -50%;
    width: 8px; height: 8px; border-radius: 50%; background: #6ee7b7;
    box-shadow: 0 0 12px rgba(6, 214, 160, .9);
    animation: flowPulse 3.2s linear infinite;
    animation-delay: calc(var(--i) * .38s);
}
.flow-node {
    position: relative; z-index: 1;
    display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px;
    border-radius: 18px; color: #6ee7b7;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .3s var(--fx-ease-spring), background .3s var(--fx-ease), color .3s var(--fx-ease);
}
.flow-step:hover .flow-node {
    transform: translateY(-5px); background: var(--fx-brand-grad); color: #fff; border-color: transparent;
}
.flow-step strong {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .92rem;
    font-weight: 700; color: #fff; margin-bottom: 4px;
}
.flow-step > span { display: block; font-size: .76rem; line-height: 1.45; color: rgba(255, 255, 255, .55); }

.flow-foot { text-align: center; margin-top: clamp(40px, 5vw, 60px); }
.flow-foot-pill {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: .84rem; font-weight: 600; color: #cbd3e6;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    padding: 10px 20px; border-radius: 999px;
}
.flow-foot-pill i {
    width: 8px; height: 8px; border-radius: 50%; background: #06d6a0;
    animation: heDotPulse 2.4s ease-out infinite;
}

@keyframes flowIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes flowPulse {
    0%   { left: -50%; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: calc(50% - 8px); opacity: 0; }
}

@media (max-width: 1100px) {
    .flow-rail { grid-template-columns: repeat(4, 1fr); row-gap: 38px; }
    .flow-step:not(:first-child)::before,
    .flow-step:not(:first-child)::after { display: none; }
}
@media (max-width: 560px) {
    .flow-rail { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .flow-step { opacity: 1; animation: none; }
    .flow-step:not(:first-child)::after,
    .flow-foot-pill i { animation: none; }
    .flow-node { transition: none; }
}

/* ==========================================================================
   42. VIDEO SHOWCASE — glass cards, poster by default, plays on hover
   ========================================================================== */
.vshow-section { background: linear-gradient(180deg, #f7f8fb 0%, #ffffff 100%); }
.vshow-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 48px;
}
.vshow-card {
    margin: 0; border-radius: 22px; overflow: hidden; background: #0b1226;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .10);
    transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease);
}
.vshow-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(15, 23, 42, .16); }
.vshow-media { position: relative; aspect-ratio: 16 / 9; background: #0b1226; }
.vshow-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vshow-play {
    position: absolute; inset: 0; margin: auto; width: 62px; height: 62px;
    display: grid; place-items: center; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: #0b1226;
    box-shadow: 0 8px 24px rgba(2, 6, 23, .35);
    transition: opacity .3s var(--fx-ease), transform .3s var(--fx-ease-spring);
}
.vshow-card:hover .vshow-play { opacity: 0; transform: scale(.82); }
.vshow-badge {
    position: absolute; top: 14px; left: 14px;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .72rem; font-weight: 600; color: #fff;
    background: rgba(11, 18, 38, .62); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 6px 11px; border-radius: 999px;
}
.vshow-badge i { width: 6px; height: 6px; border-radius: 50%; background: #06d6a0; }
.vshow-cap { padding: 18px 20px 20px; background: #0b1226; }
.vshow-cap strong {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 5px;
}
.vshow-cap span { display: block; font-size: .87rem; line-height: 1.55; color: rgba(255, 255, 255, .6); }

@media (max-width: 780px) { .vshow-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .vshow-card, .vshow-play { transition: none; }
}

/* ==========================================================================
   43. INTERACTIVE PRODUCT DEMO — tabbed dashboard mockups
   ========================================================================== */
.demo-section {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #0a0f1e 0%, #0b1226 100%);
    padding: clamp(64px, 7vw, 104px) 20px;
}
.demo-aurora {
    position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
    width: 720px; height: 480px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse, rgba(37, 99, 235, .18), transparent 70%);
}
.demo-section .container { position: relative; z-index: 1; }
.demo-intro { text-align: center; max-width: 720px; margin: 0 auto 38px; }

.demo-tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px;
}
.demo-tab {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .86rem; font-weight: 600;
    color: rgba(255, 255, 255, .66); cursor: pointer;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
    padding: 10px 18px; border-radius: 999px;
    transition: color .25s var(--fx-ease), background .25s var(--fx-ease), border-color .25s var(--fx-ease);
}
.demo-tab:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.demo-tab.is-active { color: #fff; background: var(--fx-brand-grad); border-color: transparent; }
.demo-tab:focus-visible { outline: 2px solid #6ee7b7; outline-offset: 2px; }

.demo-stage {
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    padding: clamp(18px, 2.6vw, 30px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.demo-panel[hidden] { display: none; }
.demo-panel { animation: demoFade .45s var(--fx-ease) both; }
@keyframes demoFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.demo-pane-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.demo-card {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px; padding: 20px;
}
.demo-card-label {
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #6ee7b7; margin-bottom: 14px;
}

/* voice */
.demo-call-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.demo-avatar {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .1); color: #fff; font-weight: 700; font-size: .84rem; flex: none;
}
.demo-avatar-brand { background: var(--fx-brand-grad); }
.demo-call-head strong { display: block; color: #fff; font-size: .95rem; }
.demo-call-head > div > span { display: block; font-size: .78rem; color: rgba(255, 255, 255, .55); }
.demo-live {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: none;
    font-size: .72rem; font-weight: 700; color: #6ee7b7;
    background: rgba(6, 214, 160, .12); border: 1px solid rgba(6, 214, 160, .3);
    padding: 5px 10px; border-radius: 999px;
}
.demo-live i { width: 6px; height: 6px; border-radius: 50%; background: #06d6a0; animation: heDotPulse 1.8s ease-out infinite; }
.demo-wave { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; height: 62px; }
.demo-wave span {
    flex: 1; border-radius: 3px; background: linear-gradient(180deg, #6ee7b7, #2563eb);
    animation: demoWave 1.1s ease-in-out infinite; transform-origin: bottom;
}
.demo-wave span:nth-child(odd) { animation-delay: .15s; }
.demo-wave span:nth-child(3n) { animation-delay: .3s; }
.demo-wave span:nth-child(4n) { animation-delay: .45s; }
@keyframes demoWave { 0%, 100% { height: 22%; } 50% { height: 100%; } }
.demo-timer { margin-top: 14px; font-size: .8rem; color: rgba(255, 255, 255, .55); }

.demo-line { font-size: .86rem; line-height: 1.5; color: rgba(255, 255, 255, .72); margin: 0 0 10px; }
.demo-line b {
    display: inline-block; min-width: 52px; font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .4);
}
.demo-line-ai b { color: #6ee7b7; }

/* chat */
.demo-chat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.demo-chat-head strong { display: block; color: #fff; font-size: .95rem; }
.demo-online { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; color: #6ee7b7; }
.demo-online i { width: 6px; height: 6px; border-radius: 50%; background: #06d6a0; }
.demo-bubbles { display: flex; flex-direction: column; gap: 10px; }
.demo-bub {
    max-width: 82%; margin: 0; padding: 10px 14px; border-radius: 14px;
    font-size: .86rem; line-height: 1.5;
}
.demo-bub-in { align-self: flex-start; background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .8); border-bottom-left-radius: 5px; }
.demo-bub-out { align-self: flex-end; background: var(--fx-brand-grad); color: #fff; border-bottom-right-radius: 5px; }
.demo-bub-typing { align-self: flex-start; display: inline-flex; gap: 5px; background: rgba(255, 255, 255, .09); border-bottom-left-radius: 5px; }
.demo-bub-typing i {
    width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6);
    animation: demoType 1.3s ease-in-out infinite;
}
.demo-bub-typing i:nth-child(2) { animation-delay: .18s; }
.demo-bub-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes demoType { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.demo-chan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.demo-chan-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: .86rem; color: rgba(255, 255, 255, .72);
    padding-bottom: 11px; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.demo-chan-list li:last-child { border-bottom: none; padding-bottom: 0; }
.demo-chan-list b { font-size: .74rem; font-weight: 700; color: rgba(255, 255, 255, .45); }
.demo-chan-list .demo-ok { color: #6ee7b7; }

/* calendar */
.demo-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.demo-cal-grid span {
    aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px;
    font-size: .8rem; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .04);
}
.demo-cal-dow { background: none !important; font-size: .68rem !important; font-weight: 700; color: rgba(255, 255, 255, .35) !important; }
.demo-cal-off { color: rgba(255, 255, 255, .25) !important; background: transparent !important; }
.demo-cal-sel { background: var(--fx-brand-grad) !important; color: #fff !important; font-weight: 700; }
.demo-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.demo-slots span {
    text-align: center; padding: 9px 4px; border-radius: 10px; font-size: .8rem;
    color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
}
.demo-slot-taken { opacity: .35; text-decoration: line-through; }
.demo-slot-pick { background: var(--fx-brand-grad) !important; color: #fff !important; border-color: transparent !important; font-weight: 700; }
.demo-confirm {
    display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 14px;
    border-radius: 12px; background: rgba(6, 214, 160, .1); border: 1px solid rgba(6, 214, 160, .25);
}
.demo-confirm-flat { margin-top: 20px; }
.demo-tick {
    width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: #06d6a0; color: #04231a; font-weight: 800; font-size: .82rem;
}
.demo-confirm strong { display: block; color: #fff; font-size: .9rem; margin-bottom: 3px; }
.demo-confirm > div span { display: block; font-size: .78rem; line-height: 1.45; color: rgba(255, 255, 255, .6); }

/* crm pipeline */
.demo-pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.demo-col-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .5); margin-bottom: 12px;
}
.demo-col-head b { color: #6ee7b7; }
.demo-lead {
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
}
.demo-lead strong { display: block; color: #fff; font-size: .86rem; margin-bottom: 3px; }
.demo-lead span { display: block; font-size: .75rem; color: rgba(255, 255, 255, .5); }
.demo-lead-win { border-color: rgba(6, 214, 160, .35); background: rgba(6, 214, 160, .08); }

/* website builder */
.demo-web-wrap { display: grid; grid-template-columns: 1.5fr .55fr 1fr; gap: 20px; align-items: start; }
.demo-browser { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }
.demo-browser-bar {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px;
    background: rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.demo-browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.demo-browser-bar span { margin-left: 10px; font-size: .74rem; color: rgba(255, 255, 255, .45); }
.demo-browser-body, .demo-phone-body { padding: 16px; display: grid; gap: 10px; }
.demo-phone { border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); }
.demo-skel { border-radius: 8px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.16), rgba(255,255,255,.08)); background-size: 200% 100%; animation: demoShimmer 2.2s linear infinite; }
.demo-skel-hero { height: 74px; }
.demo-skel-line { height: 10px; }
.demo-skel-line.short { width: 62%; }
.demo-skel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.demo-skel-box { height: 54px; }
.demo-skel-box.tall { height: 96px; }
@keyframes demoShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.demo-web-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.demo-web-points li {
    position: relative; padding-left: 26px; font-size: .88rem; line-height: 1.5; color: rgba(255, 255, 255, .72);
}
.demo-web-points li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
    font-size: .66rem; font-weight: 800; color: #04231a; background: #06d6a0;
}

/* analytics */
.demo-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.demo-stat {
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px; padding: 16px 18px;
}
.demo-stat > span { display: block; font-size: .76rem; color: rgba(255, 255, 255, .5); margin-bottom: 6px; }
.demo-stat strong {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 4px;
}
.demo-stat b { font-size: .74rem; font-weight: 700; color: rgba(255, 255, 255, .45); }
.demo-up { color: #6ee7b7 !important; }
.demo-chart-card { padding-bottom: 18px; }
.demo-chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.demo-chart span {
    flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #6ee7b7, #2563eb);
    animation: demoGrow .8s var(--fx-ease-spring) both;
}
.demo-chart span:nth-child(2) { animation-delay: .05s; }
.demo-chart span:nth-child(3) { animation-delay: .1s; }
.demo-chart span:nth-child(4) { animation-delay: .15s; }
.demo-chart span:nth-child(5) { animation-delay: .2s; }
.demo-chart span:nth-child(6) { animation-delay: .25s; }
.demo-chart span:nth-child(7) { animation-delay: .3s; }
.demo-chart span:nth-child(8) { animation-delay: .35s; }
.demo-chart span:nth-child(9) { animation-delay: .4s; }
.demo-chart span:nth-child(10) { animation-delay: .45s; }
@keyframes demoGrow { from { height: 0; opacity: 0; } to { height: var(--h); opacity: 1; } }

/* ads */
.demo-camp { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.demo-camp li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: .86rem; color: rgba(255, 255, 255, .72);
    padding-bottom: 11px; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.demo-camp li:last-child { border-bottom: none; padding-bottom: 0; }
.demo-camp b { font-size: .8rem; font-weight: 700; color: #6ee7b7; }
.demo-bars { display: grid; gap: 14px; }
.demo-bar-row { display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; gap: 12px; }
.demo-bar-row > span { font-size: .8rem; color: rgba(255, 255, 255, .55); }
.demo-bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.demo-bar i { display: block; height: 100%; border-radius: 999px; background: rgba(255, 255, 255, .3); }
.demo-bar-good { background: var(--fx-brand-grad) !important; }
.demo-bar-row b { font-size: .84rem; font-weight: 700; color: #fff; text-align: right; }

@media (max-width: 900px) {
    .demo-pane-grid { grid-template-columns: 1fr; }
    .demo-pipeline { grid-template-columns: repeat(2, 1fr); }
    .demo-web-wrap { grid-template-columns: 1fr; }
    .demo-stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .demo-pipeline { grid-template-columns: 1fr; }
    .demo-slots { grid-template-columns: repeat(3, 1fr); }
    .demo-tab { font-size: .8rem; padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .demo-panel, .demo-chart span, .demo-skel,
    .demo-wave span, .demo-bub-typing i, .demo-live i { animation: none; }
    .demo-chart span { height: var(--h); opacity: 1; }
    .demo-tab { transition: none; }
}

/* ==========================================================================
   44. BEFORE vs AFTER — flip-card "case files" (f90-) on two infinite
   marquee belts: the top row drifts right, the bottom row drifts left,
   never stopping — each belt is the card set duplicated once and animated
   from 0 to -50% (or reversed) so the loop is seamless. Every card is still
   a real 3D flip on hover/tap (muted BEFORE face → vivid AFTER face with
   logo, quote, stars, metric jump); hovering a belt pauses its drift so the
   flipped card can actually be read. Real client logos throughout (forced
   to a clean white silhouette, same technique proven on the Client Work
   gallery); the extra sample cards use a polished wordmark-style monogram
   so they read as real brand marks rather than placeholder initials.
   ========================================================================== */
.ba-section { background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%); overflow: hidden; }

.f90-marquees { margin-top: 44px; display: flex; flex-direction: column; gap: 20px; }

.f90-marquee {
    position: relative;
    overflow: hidden;
    margin: 0 -20px;
    padding: 4px 0;
}
.f90-marquee::before,
.f90-marquee::after {
    content: "";
    position: absolute; top: 0; bottom: 0;
    width: 90px; z-index: 3; pointer-events: none;
}
.f90-marquee::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.f90-marquee::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }

.f90-track {
    display: flex;
    width: max-content;
    gap: 18px;
    padding: 0 20px;
    animation: f90Drift 42s linear infinite;
}
.f90-track-right { animation-direction: reverse; }
.f90-marquee:hover .f90-track,
.f90-marquee:focus-within .f90-track { animation-play-state: paused; }
@keyframes f90Drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.f90-card {
    position: relative;
    flex: 0 0 250px;
    width: 250px;
    height: 290px;
    border-radius: 18px;
    perspective: 1400px;
    box-shadow: var(--fx-shadow-sm);
    cursor: pointer;
}
.f90-card:focus-visible { outline: 2px solid var(--f90-c); outline-offset: 3px; }

.f90-inner {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 18px;
    transform-style: preserve-3d;
    transition: transform .85s var(--fx-ease);
}
.f90-card:hover .f90-inner,
.f90-card:focus-visible .f90-inner,
.f90-card.is-active .f90-inner { transform: rotateY(180deg); }

.f90-face {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    border-radius: 18px;
    padding: 20px 18px 18px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
.f90-face-before {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--f90-c) 30%, #10121c) 0%,
        color-mix(in srgb, var(--f90-c) 8%, #05060a) 100%);
}
.f90-face-after {
    background: linear-gradient(155deg,
        var(--f90-c) 0%,
        color-mix(in srgb, var(--f90-c) 55%, #05060a) 100%);
    transform: rotateY(180deg);
    color: #fff;
}

.f90-tag {
    align-self: flex-start;
    font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 4px 10px;
    margin-bottom: 14px;
}
.f90-tag-after { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }

.f90-logo-wrap { height: 34px; display: flex; align-items: center; margin-bottom: 10px; }
.f90-logo { max-height: 28px; max-width: 130px; object-fit: contain; filter: brightness(0) invert(1); opacity: .55; }
/* wordmark-style monogram for the sample clients that have no real logo file —
   a solid accent tile + tight uppercase letters reads as a brand mark rather
   than a placeholder "initials" badge */
.f90-mono {
    width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: .82rem; letter-spacing: -.01em;
    color: rgba(255,255,255,.6);
    background: linear-gradient(155deg, color-mix(in srgb, var(--f90-c) 55%, #10121c), color-mix(in srgb, var(--f90-c) 20%, #05060a));
    border: 1px solid color-mix(in srgb, var(--f90-c) 35%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.f90-who { margin-bottom: auto; }
.f90-who strong { display: block; font-size: .92rem; color: #fff; margin-bottom: 2px; }
.f90-who span { display: block; font-size: .72rem; color: rgba(255,255,255,.45); }

.f90-stat-label {
    display: block; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: rgba(255,255,255,.45); margin-bottom: 4px;
}
.f90-stat-num {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -.02em;
    font-size: 1.7rem; line-height: 1; color: rgba(255,255,255,.65);
}
.f90-hint {
    margin-top: 12px; font-size: .68rem; color: rgba(255,255,255,.35);
    display: flex; align-items: center; gap: 5px;
}

/* after face */
.f90-face-after .f90-logo { opacity: 1; }
.f90-face-after .f90-mono { color: #fff; background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); box-shadow: none; }
.f90-stars { display: flex; gap: 2px; color: #ffd166; margin-bottom: 10px; }
.f90-quote {
    font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.9);
    margin: 0 0 auto; flex: 1;
}
.f90-face-after .f90-stat-num { color: #fff; }
.f90-stat-row { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.f90-delta {
    font-size: .74rem; font-weight: 800; color: #0b1226;
    background: #fff; border-radius: 999px; padding: 2px 9px;
}

.f90-card.is-active { z-index: 2; }

@media (max-width: 760px) {
    .f90-card { flex-basis: 210px; width: 210px; height: 270px; }
    .f90-marquee::before, .f90-marquee::after { width: 40px; }
}
@media (max-width: 480px) {
    .f90-card { flex-basis: 190px; width: 190px; height: 260px; }
    .f90-quote { font-size: .76rem; }
    .f90-track { animation-duration: 30s; }
}
@media (prefers-reduced-motion: reduce) {
    .f90-inner { transition: none; }
    .f90-track { animation: none; }
    .f90-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .f90-marquee::before, .f90-marquee::after { display: none; }
}

/* ==========================================================================
   45. NUMBERS — animated counters on a dark band
   ========================================================================== */
.num-section {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #0b1226 0%, #0a0f1e 100%);
    padding: clamp(58px, 6vw, 88px) 20px;
}
.num-aurora {
    position: absolute; bottom: -260px; left: 50%; transform: translateX(-50%);
    width: 760px; height: 480px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(ellipse, rgba(6, 214, 160, .16), transparent 70%);
}
.num-section .container { position: relative; z-index: 1; }
.num-intro { text-align: center; margin-bottom: 44px; }
.num-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.num-item {
    text-align: center; padding: 26px 16px; border-radius: 18px;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .3s var(--fx-ease), background .3s var(--fx-ease);
}
.num-item:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .08); }
.num-value {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 0%, #6ee7b7 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}
.num-label { display: block; font-size: .84rem; color: rgba(255, 255, 255, .6); line-height: 1.4; }

@media (max-width: 900px) { .num-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .num-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .num-item { transition: none; } }

/* ==========================================================================
   46. CLOSING CTA BAND — eyebrow, dual action, trust row
   ========================================================================== */
.fcb-eyebrow {
    display: inline-block; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #6ee7b7; margin-bottom: 14px;
}
.fcb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 8px; }
.fcb-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .92rem; font-weight: 700;
    color: #fff; text-decoration: none;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22);
    padding: 15px 26px; border-radius: 50px;
    transition: background .25s var(--fx-ease), border-color .25s var(--fx-ease), gap .25s var(--fx-ease);
}
.fcb-ghost:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .4); gap: 12px; }
.fcb-trust {
    list-style: none; padding: 0; margin: 22px 0 0;
    display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.fcb-trust li {
    position: relative; padding-left: 20px;
    font-size: .84rem; color: rgba(255, 255, 255, .62);
}
.fcb-trust li::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 50%;
    background: #06d6a0; box-shadow: 0 0 0 3px rgba(6, 214, 160, .18);
}
@media (max-width: 560px) {
    .fcb-actions { flex-direction: column; align-items: stretch; }
    .fcb-ghost { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .fcb-ghost { transition: none; } }

/* ==========================================================================
   47. DIRECTIONAL SCROLL REVEAL — shared by the individual service pages.
   data-reveal="left|right|up|down|zoom", optional --rd for stagger delay.
   ========================================================================== */
[data-reveal] {
    opacity: 0;
    transition: opacity .75s var(--fx-ease), transform .75s var(--fx-ease);
    transition-delay: var(--rd, 0s);
    will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-54px); }
[data-reveal="right"] { transform: translateX(54px); }
[data-reveal="up"]    { transform: translateY(46px); }
[data-reveal="down"]  { transform: translateY(-46px); }
[data-reveal="zoom"]  { transform: scale(.9); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   48. INDIVIDUAL SERVICE PAGES — shared shell (sv-) used across every service
   page, but each SECTION below is a deliberately different layout: split hero,
   moving ticker, centre-spine timeline, full-bleed cinema, inline figure row,
   split-half comparison, numbered rail, two-column FAQ, centred close.
   ========================================================================== */

/* --- 1. split hero --- */
.sv-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, #0b1226 0%, #0a0f1e 62%, #0b1a2e 100%);
    padding: clamp(120px, 14vh, 172px) 20px clamp(64px, 8vw, 100px);
    color: #cbd3e6;
}
.sv-hero-glow {
    position: absolute; top: -180px; right: -160px; width: 620px; height: 620px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(6, 214, 160, .18), rgba(37, 99, 235, .10) 45%, transparent 72%);
}
.sv-hero-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 68px); align-items: center;
}
.sv-kicker {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .78rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: #6ee7b7;
    background: rgba(6, 214, 160, .1); border: 1px solid rgba(6, 214, 160, .28);
    padding: 8px 16px; border-radius: 999px; margin-bottom: 22px;
}
.sv-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #06d6a0; animation: heDotPulse 2.4s ease-out infinite; }
.sv-h1 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff;
    font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 20px;
}
.sv-h1 em {
    font-style: normal;
    background: linear-gradient(120deg, #6ee7b7, #60a5fa);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sv-lede { font-size: 1.06rem; line-height: 1.7; color: rgba(255, 255, 255, .68); max-width: 33ch; margin-bottom: 30px; }
.sv-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.sv-textlink {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .92rem;
    color: #6ee7b7; text-decoration: none; transition: gap .25s var(--fx-ease), color .25s var(--fx-ease);
}
.sv-textlink:hover { gap: 12px; color: #a7f3d0; }
.sv-hero-note { margin-top: 22px; font-size: .84rem; color: rgba(255, 255, 255, .42); }

/* live call panel (voice page) */
.vo-call {
    position: relative; border-radius: 26px; padding: 26px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 40px 90px rgba(2, 6, 23, .55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.vo-call-top { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.vo-ring {
    width: 44px; height: 44px; flex: none; border-radius: 50%;
    background: var(--fx-brand-grad); position: relative;
}
.vo-ring::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(6, 214, 160, .5); animation: voRing 1.8s ease-out infinite;
}
@keyframes voRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.vo-call-id strong { display: block; color: #fff; font-size: .96rem; }
.vo-call-id span { display: block; font-size: .8rem; color: rgba(255, 255, 255, .5); }
.vo-tag {
    margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700; color: #6ee7b7;
    background: rgba(6, 214, 160, .12); border: 1px solid rgba(6, 214, 160, .3);
    padding: 6px 11px; border-radius: 999px;
}
.vo-tag i { width: 6px; height: 6px; border-radius: 50%; background: #06d6a0; animation: heDotPulse 1.6s ease-out infinite; }
.vo-visual { display: flex; align-items: center; justify-content: space-between; gap: 3px; height: 92px; margin-bottom: 22px; }
.vo-visual span {
    flex: 1; border-radius: 999px; background: linear-gradient(180deg, #6ee7b7, #2563eb);
    animation: voBar 1.25s ease-in-out infinite;
}
.vo-visual span:nth-child(3n) { animation-delay: .18s; }
.vo-visual span:nth-child(3n+1) { animation-delay: .36s; }
.vo-visual span:nth-child(4n) { animation-delay: .54s; }
@keyframes voBar { 0%, 100% { height: 14%; opacity: .55; } 50% { height: 100%; opacity: 1; } }
.vo-caption { padding: 16px 18px; border-radius: 15px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .08); }
.vo-cap-who { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6ee7b7; margin-bottom: 6px; }
.vo-caption p { margin: 0; color: rgba(255, 255, 255, .88); font-size: .95rem; line-height: 1.55; }
.vo-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: .76rem; color: rgba(255, 255, 255, .45); }

@media (max-width: 940px) {
    .sv-hero-inner { grid-template-columns: 1fr; }
    .sv-lede { max-width: none; }
}

/* --- 2. capability ticker --- */
.sv-ticker {
    overflow: hidden; background: #0a0f1e; border-top: 1px solid rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .07); padding: 18px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sv-ticker-track {
    display: flex; align-items: center; gap: 22px; width: max-content;
    animation: svTick 34s linear infinite;
}
.sv-ticker-track span {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(1rem, 2vw, 1.45rem);
    font-weight: 700; letter-spacing: -.01em; color: rgba(255, 255, 255, .34); white-space: nowrap;
}
.sv-ticker-track i { color: #06d6a0; font-style: normal; font-size: 1.1rem; }
@keyframes svTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sv-ticker:hover .sv-ticker-track { animation-play-state: paused; }

/* --- shared headings --- */
.sv-eyebrow {
    display: inline-block; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #1e40af; margin-bottom: 12px;
}
.sv-eyebrow-light { color: #6ee7b7; }
.sv-h2 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--fx-ink);
    font-size: clamp(1.65rem, 3.3vw, 2.5rem); line-height: 1.18; letter-spacing: -.025em; margin-bottom: 14px;
}
.sv-lead-head { max-width: 660px; margin: 0 auto clamp(44px, 5vw, 66px); text-align: center; }
.sv-lead-head p { color: var(--fx-ink-soft); font-size: 1rem; line-height: 1.65; margin: 0; }

/* --- 3. centre-spine timeline --- */
.vo-ops { background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%); padding: clamp(64px, 7vw, 104px) 20px; }
.vo-spine { position: relative; max-width: 940px; margin: 0 auto; }
.vo-spine::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(37, 99, 235, .3) 8%, rgba(6, 214, 160, .35) 92%, transparent);
}
.vo-beat {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    align-items: center; margin-bottom: 34px;
}
.vo-beat::after {
    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 15px; height: 15px; border-radius: 50%; background: #fff;
    border: 3px solid #06d6a0; box-shadow: 0 0 0 5px rgba(6, 214, 160, .14);
}
.vo-beat-time {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateY(-30px);
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .68rem; font-weight: 800;
    letter-spacing: .08em; color: #94a3b8; background: #fff; padding: 2px 8px; border-radius: 999px;
}
.vo-beat-said { text-align: right; padding-right: 12px; }
.vo-beat-who {
    display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: #1e40af; margin-bottom: 7px;
}
.vo-beat-said p {
    margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.06rem;
    line-height: 1.5; color: var(--fx-ink); font-weight: 600;
}
.vo-beat-did { padding-left: 12px; border-left: 2px solid rgba(6, 214, 160, .3); }
.vo-beat-did b { display: block; font-size: .92rem; color: var(--fx-ink); margin-bottom: 4px; }
.vo-beat-did span { display: block; font-size: .83rem; line-height: 1.5; color: var(--fx-ink-soft); }
/* flipped beats: system on the left, speech on the right */
.vo-beat-flip .vo-beat-said { order: 2; text-align: left; padding-right: 0; padding-left: 12px; }
.vo-beat-flip .vo-beat-did { order: 1; text-align: right; padding-left: 0; padding-right: 12px; border-left: none; border-right: 2px solid rgba(6, 214, 160, .3); }
.vo-beat-end .vo-beat-said p { color: #0f766e; }
.vo-beat-end::after { background: #06d6a0; box-shadow: 0 0 0 7px rgba(6, 214, 160, .18); }

@media (max-width: 780px) {
    .vo-spine::before { left: 9px; }
    .vo-beat { grid-template-columns: 1fr; gap: 12px; padding-left: 34px; margin-bottom: 30px; }
    .vo-beat::after { left: 9px; top: 8px; transform: translate(-50%, 0); }
    .vo-beat-time { position: static; transform: none; display: inline-block; margin-bottom: 8px; background: none; padding: 0; }
    .vo-beat-said, .vo-beat-flip .vo-beat-said { text-align: left; padding: 0; order: 1; }
    .vo-beat-did, .vo-beat-flip .vo-beat-did { text-align: left; order: 2; padding: 0 0 0 12px; border-left: 2px solid rgba(6, 214, 160, .3); border-right: none; }
}

/* --- 4. full-bleed cinema band --- */
.sv-cinema { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 140px) 20px; color: #fff; }
.sv-cinema-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.sv-cinema-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(8, 12, 26, .94) 0%, rgba(8, 12, 26, .82) 45%, rgba(8, 12, 26, .55) 100%);
}
.sv-cinema-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(30px, 5vw, 60px); align-items: center;
}
.sv-cinema-h {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.16; letter-spacing: -.025em; margin-bottom: 14px;
}
.sv-cinema-copy p { color: rgba(255, 255, 255, .72); font-size: 1.02rem; line-height: 1.7; margin: 0; max-width: 46ch; }
.sv-cinema-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.sv-cinema-points li { border-left: 2px solid rgba(110, 231, 183, .55); padding-left: 16px; }
.sv-cinema-points b {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.7rem;
    font-weight: 800; letter-spacing: -.03em; color: #6ee7b7; line-height: 1.1;
}
.sv-cinema-points span { display: block; font-size: .84rem; color: rgba(255, 255, 255, .6); margin-top: 3px; }
@media (max-width: 860px) { .sv-cinema-inner { grid-template-columns: 1fr; } }

/* --- 5. inline figure row --- */
.sv-figures { background: #fff; padding: clamp(52px, 6vw, 78px) 20px; }
.sv-figures-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.sv-fig { padding: 6px 26px; border-left: 1px solid rgba(15, 23, 42, .1); }
.sv-fig:first-child { border-left: none; padding-left: 0; }
.sv-fig b {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
    background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; margin-bottom: 8px;
}
.sv-fig span { display: block; font-size: .88rem; line-height: 1.5; color: var(--fx-ink-soft); }
@media (max-width: 820px) {
    .sv-figures-row { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
    .sv-fig:nth-child(odd) { border-left: none; padding-left: 0; }
}

/* --- 6. split-half comparison --- */
.sv-versus { display: grid; grid-template-columns: 1fr 1fr; }
.sv-versus-half { padding: clamp(52px, 6.5vw, 88px) clamp(26px, 5vw, 70px); }
.sv-versus-before { background: #111827; color: rgba(255, 255, 255, .72); }
.sv-versus-after { background: linear-gradient(150deg, #0b3b8c 0%, #0a7f6b 100%); color: rgba(255, 255, 255, .84); }
.sv-versus-tag {
    display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #fca5a5; background: rgba(248, 113, 113, .12);
    border: 1px solid rgba(248, 113, 113, .3); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.sv-versus-tag-good { color: #6ee7b7; background: rgba(6, 214, 160, .14); border-color: rgba(6, 214, 160, .38); }
.sv-versus-half h3 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -.02em; margin-bottom: 22px;
}
.sv-versus-half ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.sv-versus-half li { position: relative; padding-left: 28px; font-size: .95rem; line-height: 1.6; }
.sv-versus-before li::before {
    content: "✕"; position: absolute; left: 0; top: 0; font-size: .78rem; font-weight: 700; color: #f87171;
}
.sv-versus-after li::before {
    content: "✔"; position: absolute; left: 0; top: 0; font-size: .82rem; color: #6ee7b7;
}
@media (max-width: 820px) { .sv-versus { grid-template-columns: 1fr; } }

/* --- 7. numbered setup rail --- */
.sv-setup { background: #f7f8fb; padding: clamp(64px, 7vw, 100px) 20px; }
.sv-setup-rail {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.sv-setup-rail li { position: relative; padding-top: 30px; }
.sv-setup-rail li::before {
    content: ""; position: absolute; top: 9px; left: 0; right: -26px; height: 2px;
    background: linear-gradient(90deg, rgba(37, 99, 235, .35), rgba(6, 214, 160, .2));
}
.sv-setup-rail li:last-child::before { right: 0; }
.sv-setup-rail li::after {
    content: ""; position: absolute; top: 4px; left: 0; width: 12px; height: 12px;
    border-radius: 50%; background: #fff; border: 3px solid #2563eb;
}
.sv-setup-rail span {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .78rem;
    font-weight: 800; letter-spacing: .1em; color: #2563eb; margin-bottom: 8px;
}
.sv-setup-rail b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.08rem; color: var(--fx-ink); margin-bottom: 8px; }
.sv-setup-rail p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--fx-ink-soft); }
@media (max-width: 860px) {
    .sv-setup-rail { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
}
@media (max-width: 520px) { .sv-setup-rail { grid-template-columns: 1fr; } }

/* --- 8. two-column FAQ --- */
.sv-faq { background: #fff; padding: clamp(64px, 7vw, 100px) 20px; }
.sv-faq-inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.sv-faq-side p { color: var(--fx-ink-soft); font-size: .97rem; line-height: 1.7; margin: 0 0 18px; }
.sv-faq-side .sv-textlink { color: #1e40af; }
.sv-faq-side .sv-textlink:hover { color: #06d6a0; }
.sv-faq-list details {
    border-bottom: 1px solid rgba(15, 23, 42, .1); padding: 4px 0;
}
.sv-faq-list summary {
    list-style: none; cursor: pointer; padding: 18px 34px 18px 0; position: relative;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.02rem; font-weight: 700;
    color: var(--fx-ink); transition: color .25s var(--fx-ease);
}
.sv-faq-list summary::-webkit-details-marker { display: none; }
.sv-faq-list summary:hover { color: #1e40af; }
.sv-faq-list summary::after {
    content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px;
    border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8;
    transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--fx-ease), border-color .3s var(--fx-ease);
}
.sv-faq-list details[open] summary::after { transform: translateY(-20%) rotate(-135deg); border-color: #06d6a0; }
.sv-faq-list details p {
    margin: 0 0 20px; padding-right: 34px; font-size: .94rem; line-height: 1.7; color: var(--fx-ink-soft);
    animation: svFaq .35s var(--fx-ease) both;
}
.sv-faq-list details a { color: #1e40af; font-weight: 600; }
@keyframes svFaq { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .sv-faq-inner { grid-template-columns: 1fr; } }

/* --- 9. closing CTA --- */
.sv-close {
    background: linear-gradient(150deg, #0b1226 0%, #0a0f1e 55%, #072a25 100%);
    padding: clamp(64px, 8vw, 110px) 20px; text-align: center;
}
.sv-close-inner { max-width: 720px; margin: 0 auto; }
.sv-close h2 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: #fff;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.18; letter-spacing: -.025em; margin-bottom: 14px;
}
.sv-close p { color: rgba(255, 255, 255, .65); font-size: 1.02rem; margin-bottom: 32px; }
.sv-close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.sv-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .92rem; font-weight: 700;
    color: #fff; text-decoration: none;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22);
    padding: 15px 30px; border-radius: 50px;
    transition: background .25s var(--fx-ease), border-color .25s var(--fx-ease);
}
.sv-ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); }

@media (prefers-reduced-motion: reduce) {
    .sv-ticker-track, .vo-visual span, .vo-ring::after, .sv-kicker i, .vo-tag i { animation: none; }
    .sv-faq-list details p { animation: none; }
}

/* ==========================================================================
   49. SAMPLE-CALL AUDIO PLAYER — scenario switch, seekable waveform,
   transcript that highlights in time with the recording.
   ========================================================================== */
.ad-section { background: linear-gradient(170deg, #070c18 0%, #0b1226 55%, #08211f 100%); padding: clamp(64px, 7vw, 104px) 20px; }
.ad-shell { max-width: 1080px; margin: 0 auto; }
.ad-scenarios { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 26px; }
.ad-scenario {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .84rem; font-weight: 600; cursor: pointer;
    color: rgba(255, 255, 255, .66); background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .13); padding: 10px 18px; border-radius: 999px;
    transition: color .25s var(--fx-ease), background .25s var(--fx-ease), border-color .25s var(--fx-ease);
}
.ad-scenario:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.ad-scenario.is-active { color: #04231a; background: linear-gradient(120deg, #6ee7b7, #34d399); border-color: transparent; }
.ad-scenario:focus-visible { outline: 2px solid #6ee7b7; outline-offset: 2px; }

.ad-player {
    border-radius: 26px; padding: clamp(20px, 3vw, 32px);
    background: linear-gradient(155deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(12px);
    box-shadow: 0 40px 90px rgba(2, 6, 23, .5);
}
.ad-deck { display: flex; align-items: center; gap: 18px; }
.ad-deck.is-disabled { opacity: .45; pointer-events: none; }
.ad-play {
    width: 58px; height: 58px; flex: none; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; color: #04231a; border: none;
    background: linear-gradient(120deg, #6ee7b7, #34d399);
    box-shadow: 0 10px 26px rgba(6, 214, 160, .35);
    transition: transform .25s var(--fx-ease-spring), box-shadow .25s var(--fx-ease);
}
.ad-play:hover { transform: scale(1.06); box-shadow: 0 14px 32px rgba(6, 214, 160, .5); }
.ad-play:disabled { cursor: not-allowed; filter: grayscale(1); }
.ad-play .ad-ic-pause { display: none; }
.is-playing .ad-play .ad-ic-play { display: none; }
.is-playing .ad-play .ad-ic-pause { display: block; }

.ad-wave {
    --p: 0%;
    position: relative; flex: 1; height: 62px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 2px;
}
.ad-wave:focus-visible { outline: 2px solid #6ee7b7; outline-offset: 6px; border-radius: 8px; }
.ad-wave span {
    flex: 1; border-radius: 999px; min-height: 6px;
    background: rgba(255, 255, 255, .18);
}
/* played portion: an identical bar layer clipped to the progress width */
.ad-wave-fill {
    position: absolute; inset: 0; pointer-events: none;
    display: flex; align-items: center; justify-content: space-between; gap: 2px;
    clip-path: inset(0 calc(100% - var(--p)) 0 0);
}
.ad-wave-fill span { flex: 1; border-radius: 999px; min-height: 6px; background: linear-gradient(180deg, #6ee7b7, #34d399); }
.ad-time {
    flex: none; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .82rem;
    font-weight: 600; color: rgba(255, 255, 255, .6); min-width: 92px; text-align: right;
}
.ad-missing {
    margin: 16px 0 0; padding: 13px 16px; border-radius: 12px; font-size: .86rem; line-height: 1.55;
    color: #fcd9a0; background: rgba(245, 179, 1, .1); border: 1px solid rgba(245, 179, 1, .3);
}
/* the clips are re-enactments read by TTS voices, not recordings of real
   patients — say so plainly under the player rather than in the small print */
.ad-note {
    margin: 14px 0 0; font-size: .76rem; line-height: 1.5;
    color: rgba(255, 255, 255, .42);
}
.ad-body {
    display: grid; grid-template-columns: 1.3fr .7fr; gap: 26px;
    margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.ad-col-label {
    display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: #6ee7b7; margin-bottom: 14px;
}
.ad-transcript p {
    margin: 0 0 13px; font-size: .93rem; line-height: 1.6; color: rgba(255, 255, 255, .42);
    padding-left: 14px; border-left: 2px solid transparent;
    transition: color .3s var(--fx-ease), border-color .3s var(--fx-ease), transform .3s var(--fx-ease);
}
.ad-transcript p b {
    display: block; font-size: .66rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255, 255, 255, .32); margin-bottom: 4px;
}
.ad-transcript p.is-past { color: rgba(255, 255, 255, .58); }
.ad-transcript p.is-active {
    color: #fff; border-left-color: #6ee7b7; transform: translateX(3px);
}
.ad-transcript p.is-active b { color: #6ee7b7; }
.ad-events { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ad-events li {
    position: relative; padding-left: 24px; font-size: .82rem; line-height: 1.5;
    color: rgba(255, 255, 255, .38); transition: color .3s var(--fx-ease);
}
.ad-events li::before {
    content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255, 255, 255, .18); transition: background .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
.ad-events li.is-past { color: rgba(255, 255, 255, .58); }
.ad-events li.is-past::before { background: #34d399; }
.ad-events li.is-active { color: #fff; }
.ad-events li.is-active::before { background: #6ee7b7; box-shadow: 0 0 0 5px rgba(6, 214, 160, .2); }
@media (max-width: 820px) {
    .ad-body { grid-template-columns: 1fr; }
    .ad-time { min-width: 78px; font-size: .76rem; }
    .ad-wave { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
    .ad-transcript p, .ad-events li, .ad-play { transition: none; }
}

/* ==========================================================================
   50. CAPABILITY CONSTELLATION — radial orbit instead of a card grid
   ========================================================================== */
.sv-orbit-section { background: #fff; padding: clamp(64px, 7vw, 104px) 20px; overflow: hidden; }
.sv-orbit {
    position: relative; width: min(660px, 100%); aspect-ratio: 1; margin: 0 auto;
    display: grid; place-items: center;
}
.sv-orbit-ring {
    position: absolute; border-radius: 50%; border: 1px dashed rgba(37, 99, 235, .18);
}
.sv-orbit-ring-1 { inset: 12%; }
.sv-orbit-ring-2 { inset: 26%; animation: svSpin 46s linear infinite; }
@keyframes svSpin { to { transform: rotate(360deg); } }
.sv-orbit-core {
    position: relative; z-index: 2; width: 40%; aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center; text-align: center; padding: 18px;
    background: linear-gradient(150deg, #0b1226, #0a3d3a);
    box-shadow: 0 26px 60px rgba(6, 214, 160, .3);
    color: #fff;
}
.sv-orbit-core strong { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.05rem; font-weight: 800; }
.sv-orbit-core span { display: block; font-size: .76rem; color: rgba(255, 255, 255, .6); margin-top: 4px; }
.sv-orbit-node {
    position: absolute; z-index: 3; width: 132px; text-align: center;
    transform: translate(-50%, -50%);
    left: calc(50% + 42% * var(--x)); top: calc(50% + 42% * var(--y));
}
.sv-orbit-node i {
    display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 9px;
    border-radius: 16px; background: #fff; color: #1e40af;
    border: 1px solid rgba(15, 23, 42, .09); box-shadow: 0 8px 20px rgba(15, 23, 42, .1);
    transition: transform .3s var(--fx-ease-spring), color .3s var(--fx-ease), background .3s var(--fx-ease);
}
.sv-orbit-node:hover i { transform: translateY(-5px); background: var(--fx-brand-grad); color: #fff; }
.sv-orbit-node b { display: block; font-size: .85rem; font-weight: 700; color: var(--fx-ink); line-height: 1.3; }
@media (max-width: 700px) {
    .sv-orbit { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
    .sv-orbit-ring, .sv-orbit-core { display: none; }
    .sv-orbit-node { position: static; transform: none; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .sv-orbit-ring-2 { animation: none; } }

/* ==========================================================================
   51. SERVICE-PAGE OPERATIONAL DEMOS — a different working demo per page:
   chat replay (ch-), booking flow (bk-), pipeline board (cr-), device
   preview (wb-), campaign console (cm-), workflow canvas (au-).
   ========================================================================== */

/* --- channel rail (chat page) — inline, not boxes --- */
.ch-rail { background: #fff; padding: clamp(46px, 5vw, 70px) 20px; }
.ch-rail-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 42px; }
.ch-rail-row div { display: flex; align-items: center; gap: 11px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: var(--fx-ink); }
.ch-rail-row i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(6,214,160,.14)); color: #1e40af; }
.ch-rail-row small { display: block; font-size: .74rem; font-weight: 500; color: var(--fx-ink-soft); }

/* --- chat replay --- */
.ch-demo { background: linear-gradient(170deg, #070c18, #0b1226 60%, #08211f); padding: clamp(64px, 7vw, 104px) 20px; }
.ch-stage { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; max-width: 1020px; margin: 0 auto; align-items: start; }
.ch-window {
    border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px); box-shadow: 0 36px 80px rgba(2,6,23,.5);
}
.ch-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.ch-ava { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fx-brand-grad); color: #fff; font-weight: 800; font-size: .82rem; }
.ch-head strong { display: block; color: #fff; font-size: .94rem; }
.ch-head span { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: #6ee7b7; }
.ch-head span i { width: 6px; height: 6px; border-radius: 50%; background: #06d6a0; }
.ch-feed { padding: 20px; display: flex; flex-direction: column; gap: 11px; min-height: 330px; max-height: 330px; overflow-y: auto; }
.ch-msg {
    max-width: 84%; padding: 11px 15px; border-radius: 16px; font-size: .9rem; line-height: 1.55;
    opacity: 0; transform: translateY(10px); transition: opacity .4s var(--fx-ease), transform .4s var(--fx-ease);
}
.ch-msg.is-in { opacity: 1; transform: none; }
.ch-msg-user { align-self: flex-start; background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); border-bottom-left-radius: 5px; }
.ch-msg-bot { align-self: flex-end; background: var(--fx-brand-grad); color: #fff; border-bottom-right-radius: 5px; }
.ch-typing { align-self: flex-end; display: inline-flex; gap: 5px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.1); }
.ch-typing[hidden] { display: none; }   /* the class alone beats the UA [hidden] default, so restate it explicitly */
.ch-typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.65); animation: demoType 1.3s ease-in-out infinite; }
.ch-typing i:nth-child(2) { animation-delay: .18s; }
.ch-typing i:nth-child(3) { animation-delay: .36s; }
.ch-side { display: grid; gap: 18px; }
.ch-panel { border-radius: 20px; padding: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11); }
.ch-score-bar { display: block; height: 9px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin: 12px 0 8px; }
.ch-score-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg,#2563eb,#06d6a0); transition: width .5s var(--fx-ease); }
.ch-score-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.9rem; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.ch-score-num small { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.45); }
.ch-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ch-step { position: relative; padding-left: 25px; font-size: .84rem; line-height: 1.5; color: rgba(255,255,255,.38); transition: color .35s var(--fx-ease); }
.ch-step::before { content: ""; position: absolute; left: 0; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); transition: background .35s var(--fx-ease), box-shadow .35s var(--fx-ease); }
.ch-step.is-on { color: #fff; }
.ch-step.is-on::before { background: #6ee7b7; box-shadow: 0 0 0 5px rgba(6,214,160,.18); }
.ch-replay {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-top: 4px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .82rem; font-weight: 700; color: #6ee7b7;
    background: rgba(6,214,160,.1); border: 1px solid rgba(6,214,160,.3); padding: 9px 16px; border-radius: 999px;
}
.ch-replay:hover { background: rgba(6,214,160,.18); }
@media (max-width: 880px) { .ch-stage { grid-template-columns: 1fr; } }

/* --- knowledge source diagram (chat page) --- */
.ch-know { background: #f7f8fb; padding: clamp(64px, 7vw, 100px) 20px; }
.ch-know-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px,4vw,48px); align-items: center; max-width: 940px; margin: 0 auto; }
.ch-know-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ch-know-list li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid rgba(15,23,42,.08); font-size: .9rem; color: var(--fx-ink); }
.ch-know-list li b { margin-left: auto; font-size: .72rem; color: #06d6a0; }
.ch-know-core { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 18px; color: #fff; background: linear-gradient(150deg,#0b1226,#0a3d3a); box-shadow: 0 22px 50px rgba(6,214,160,.28); }
.ch-know-core strong { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .95rem; }
.ch-know-core span { font-size: .72rem; color: rgba(255,255,255,.6); }
.ch-know-out { display: grid; gap: 12px; }
.ch-know-out p { margin: 0; padding: 15px 18px; border-radius: 14px; background: #fff; border-left: 3px solid #06d6a0; font-size: .9rem; line-height: 1.55; color: var(--fx-ink-soft); }
@media (max-width: 820px) { .ch-know-flow { grid-template-columns: 1fr; justify-items: center; } }

/* --- booking demo --- */
.bk-demo { background: linear-gradient(180deg,#fff,#f7f8fb); padding: clamp(64px,7vw,104px) 20px; }
.bk-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }
.bk-step { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: #94a3b8; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid rgba(15,23,42,.1); transition: color .3s var(--fx-ease), border-color .3s var(--fx-ease), background .3s var(--fx-ease); }
.bk-step b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e2e8f0; color: #64748b; font-size: .7rem; }
.bk-step.is-on { color: #0f172a; border-color: rgba(6,214,160,.4); background: rgba(6,214,160,.08); }
.bk-step.is-on b { background: var(--fx-brand-grad); color: #fff; }
.bk-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid rgba(15,23,42,.09); border-radius: 22px; padding: clamp(20px,3vw,30px); box-shadow: 0 18px 44px rgba(15,23,42,.07); }
.bk-cal-label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #1e40af; margin-bottom: 14px; }
.bk-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.bk-dow { text-align: center; font-size: .68rem; font-weight: 700; color: #94a3b8; padding-bottom: 4px; }
.bk-day { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; font-size: .84rem; cursor: pointer; background: #f1f5f9; color: #0f172a; border: 1px solid transparent; transition: background .2s var(--fx-ease), color .2s var(--fx-ease), transform .2s var(--fx-ease); }
.bk-day:hover { background: #e0e7ff; transform: translateY(-2px); }
.bk-day.is-picked { background: var(--fx-brand-grad); color: #fff; font-weight: 700; }
.bk-day-off { color: #cbd5e1; background: transparent; cursor: default; }
.bk-day-off:hover { background: transparent; transform: none; }
.bk-slots { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; opacity: .35; pointer-events: none; transition: opacity .35s var(--fx-ease); }
.bk-slots.is-live { opacity: 1; pointer-events: auto; }
.bk-slot { text-align: center; padding: 11px 4px; border-radius: 11px; font-size: .84rem; cursor: pointer; background: #f1f5f9; border: 1px solid rgba(15,23,42,.08); color: #0f172a; transition: background .2s var(--fx-ease), color .2s var(--fx-ease), transform .2s var(--fx-ease); }
.bk-slot:hover { background: #e0e7ff; transform: translateY(-2px); }
.bk-slot.is-picked { background: var(--fx-brand-grad); color: #fff; border-color: transparent; font-weight: 700; }
.bk-slot-taken { opacity: .38; text-decoration: line-through; cursor: default; }
.bk-slot-taken:hover { background: #f1f5f9; transform: none; }
.bk-confirm { margin-top: 18px; display: flex; align-items: flex-start; gap: 12px; padding: 15px; border-radius: 14px; background: rgba(6,214,160,.1); border: 1px solid rgba(6,214,160,.3); animation: svFaq .4s var(--fx-ease) both; }
.bk-confirm[hidden] { display: none; }   /* the class alone beats the UA [hidden] default, so restate it explicitly */
.bk-confirm b { display: block; color: #0f172a; font-size: .92rem; margin-bottom: 3px; }
.bk-confirm > div span { display: block; font-size: .8rem; color: var(--fx-ink-soft); line-height: 1.5; }
.bk-tick { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #06d6a0; color: #04231a; font-weight: 800; font-size: .8rem; }
@media (max-width: 780px) { .bk-panel { grid-template-columns: 1fr; } }

/* --- reminder timeline (booking page) --- */
.bk-remind { background: #0b1226; padding: clamp(60px,6vw,92px) 20px; }
.bk-remind-rail { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; max-width: 1000px; margin: 0 auto; }
.bk-remind-rail li { list-style: none; position: relative; padding-top: 28px; color: rgba(255,255,255,.6); }
.bk-remind-rail li::before { content: ""; position: absolute; top: 8px; left: 0; right: -22px; height: 2px; background: linear-gradient(90deg, rgba(110,231,183,.5), rgba(110,231,183,.15)); }
.bk-remind-rail li:last-child::before { right: 0; }
.bk-remind-rail li::after { content: ""; position: absolute; top: 3px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #0b1226; border: 3px solid #6ee7b7; }
.bk-remind-rail b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; color: #6ee7b7; font-size: .8rem; letter-spacing: .06em; margin-bottom: 7px; }
.bk-remind-rail strong { display: block; color: #fff; font-size: 1rem; margin-bottom: 5px; }
.bk-remind-rail p { margin: 0; font-size: .86rem; line-height: 1.55; }
@media (max-width: 800px) { .bk-remind-rail { grid-template-columns: repeat(2,1fr); gap: 30px 22px; } }

/* --- pipeline board (CRM page) --- */
.cr-demo { background: linear-gradient(180deg,#f7f8fb,#fff); padding: clamp(64px,7vw,104px) 20px; }
.cr-board { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; max-width: 1060px; margin: 0 auto; }
.cr-lane { background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 18px; padding: 16px; min-height: 260px; }
.cr-lane-head { display: flex; align-items: center; justify-content: space-between; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin-bottom: 14px; }
.cr-lane-head b { color: #1e40af; }
.cr-lane-body { display: grid; gap: 10px; align-content: start; min-height: 60px; }
.cr-card { background: #f8fafc; border: 1px solid rgba(15,23,42,.07); border-radius: 12px; padding: 12px 13px; }
.cr-card strong { display: block; font-size: .86rem; color: var(--fx-ink); margin-bottom: 3px; }
.cr-card span { display: block; font-size: .76rem; color: var(--fx-ink-soft); }
.cr-mover { border-color: rgba(37,99,235,.35); background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(6,214,160,.1)); box-shadow: 0 8px 20px rgba(37,99,235,.16); transition: opacity .25s var(--fx-ease), transform .25s var(--fx-ease); }
.cr-mover.is-moving { opacity: 0; transform: translateX(18px) scale(.96); }
.cr-mover.is-won { border-color: rgba(6,214,160,.5); background: rgba(6,214,160,.12); }
@media (max-width: 900px) { .cr-board { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .cr-board { grid-template-columns: 1fr; } .cr-lane { min-height: 0; } }

/* --- record anatomy (CRM page) --- */
.cr-anatomy { background: #0b1226; padding: clamp(64px,7vw,100px) 20px; }
.cr-anat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 1px; max-width: 1040px; margin: 0 auto; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; overflow: hidden; }
.cr-anat-grid > div { background: #0b1226; padding: 26px 22px; }
.cr-anat-grid b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; color: #fff; font-size: .98rem; margin-bottom: 7px; }
.cr-anat-grid p { margin: 0; font-size: .86rem; line-height: 1.6; color: rgba(255,255,255,.55); }
.cr-anat-grid i { display: block; font-style: normal; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6ee7b7; margin-bottom: 10px; }

/* ==========================================================================
   52. WEBSITE BUILDER (wb-), SOCIAL CAMPAIGNS (cm-), AUTOMATION (au-)
   ========================================================================== */

/* --- device preview switcher --- */
.wb-demo { background: linear-gradient(180deg,#f7f8fb,#fff); padding: clamp(64px,7vw,104px) 20px; }
.wb-devs { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; }
.wb-dev {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .84rem; font-weight: 600; color: #64748b;
    background: #fff; border: 1px solid rgba(15,23,42,.1); padding: 10px 18px; border-radius: 999px;
    transition: color .25s var(--fx-ease), border-color .25s var(--fx-ease), background .25s var(--fx-ease);
}
.wb-dev:hover { color: #0f172a; }
.wb-dev.is-active { color: #fff; background: var(--fx-brand-grad); border-color: transparent; }
.wb-stage { display: grid; place-items: center; min-height: 460px; }
.wb-frame {
    width: 100%; max-width: 940px; background: #fff; border-radius: 16px; overflow: hidden;
    border: 1px solid rgba(15,23,42,.12); box-shadow: 0 26px 60px rgba(15,23,42,.14);
    transition: max-width .5s var(--fx-ease-spring), border-radius .4s var(--fx-ease);
}
.wb-stage[data-device="tablet"] .wb-frame { max-width: 560px; }
.wb-stage[data-device="mobile"] .wb-frame { max-width: 300px; border-radius: 26px; }
.wb-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f1f5f9; border-bottom: 1px solid rgba(15,23,42,.08); }
.wb-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.wb-bar span { margin-left: 10px; font-size: .72rem; color: #94a3b8; }
.wb-body { padding: 16px; display: grid; gap: 10px; }
.wb-hero-block { height: 120px; border-radius: 10px; background: linear-gradient(135deg,#1e40af,#06d6a0); position: relative; overflow: hidden; }
.wb-hero-block::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.28), transparent 60%); }
.wb-l { height: 9px; border-radius: 5px; background: #e2e8f0; }
.wb-l.s { width: 60%; }
.wb-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.wb-stage[data-device="mobile"] .wb-row { grid-template-columns: 1fr; }
.wb-box { height: 56px; border-radius: 10px; background: #f1f5f9; }
.wb-cta-block { height: 34px; width: 130px; border-radius: 999px; background: linear-gradient(120deg,#1e40af,#06d6a0); }

/* --- performance gauges --- */
.wb-perf { background: #0b1226; padding: clamp(60px,6vw,92px) 20px; }
.wb-gauges { display: grid; grid-template-columns: repeat(4,1fr); gap: 26px; max-width: 900px; margin: 0 auto; }
.wb-gauge { text-align: center; }
.wb-dial {
    --v: 95;
    width: 116px; height: 116px; margin: 0 auto 14px; border-radius: 50%;
    display: grid; place-items: center; position: relative;
    background: conic-gradient(#06d6a0 calc(var(--v) * 1%), rgba(255,255,255,.1) 0);
}
.wb-dial::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #0b1226; }
.wb-dial b { position: relative; z-index: 1; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.6rem; font-weight: 800; color: #fff; }
.wb-gauge span { display: block; font-size: .86rem; color: rgba(255,255,255,.6); }
@media (max-width: 780px) { .wb-gauges { grid-template-columns: repeat(2,1fr); } }

/* --- campaign console (ads) --- */
.cm-demo { background: linear-gradient(170deg,#070c18,#0b1226 60%,#08211f); padding: clamp(64px,7vw,104px) 20px; }
.cm-console { max-width: 1020px; margin: 0 auto; border-radius: 24px; padding: clamp(20px,3vw,30px);
    background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(12px); }
.cm-top { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px; }
.cm-kpi { padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.cm-kpi span { display: block; font-size: .74rem; color: rgba(255,255,255,.5); margin-bottom: 6px; }
.cm-kpi b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.cm-kpi i { font-style: normal; font-size: .74rem; font-weight: 700; color: #6ee7b7; }
.cm-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; }
.cm-chart { display: flex; align-items: flex-end; gap: 8px; height: 170px; }
.cm-chart span { flex: 1; height: var(--h); border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg,#6ee7b7,#2563eb); }
.cm-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cm-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .86rem; color: rgba(255,255,255,.72); padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.cm-list li:last-child { border: none; padding: 0; }
.cm-list b { color: #6ee7b7; font-size: .82rem; }
@media (max-width: 820px) { .cm-split { grid-template-columns: 1fr; } .cm-top { grid-template-columns: repeat(2,1fr); } }

/* --- acquisition funnel (ads) --- */
.cm-funnel { background: #fff; padding: clamp(64px,7vw,100px) 20px; }
.cm-funnel-rows { max-width: 720px; margin: 0 auto; display: grid; gap: 12px; }
.cm-fr { display: flex; align-items: center; gap: 18px; }
.cm-fr-bar {
    height: 62px; border-radius: 12px; display: flex; align-items: center; padding: 0 22px;
    background: var(--fx-brand-grad); color: #fff; font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em;
}
.cm-fr:nth-child(1) .cm-fr-bar { width: 100%; opacity: .95; }
.cm-fr:nth-child(2) .cm-fr-bar { width: 78%; opacity: .9; }
.cm-fr:nth-child(3) .cm-fr-bar { width: 54%; opacity: .85; }
.cm-fr:nth-child(4) .cm-fr-bar { width: 34%; opacity: .95; }
.cm-fr-side b { display: block; font-size: .9rem; color: var(--fx-ink); }
.cm-fr-side span { display: block; font-size: .78rem; color: var(--fx-ink-soft); }
@media (max-width: 620px) { .cm-fr { flex-direction: column; align-items: flex-start; gap: 6px; } .cm-fr-bar { width: 100% !important; font-size: .95rem; } }

/* --- automation canvas --- */
.au-demo { background: #0b1226; padding: clamp(64px,7vw,104px) 20px; }
.au-canvas {
    position: relative; max-width: 980px; margin: 0 auto; padding: clamp(20px,3vw,34px);
    border-radius: 24px; background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/26px 26px,
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/26px 26px,
        rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.11);
}
.au-flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; align-items: stretch; }
.au-node {
    position: relative; padding: 18px 16px; border-radius: 15px; text-align: center;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
}
.au-node i { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 12px; background: var(--fx-brand-grad); color: #fff; }
.au-node b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: .9rem; color: #fff; margin-bottom: 4px; }
.au-node span { display: block; font-size: .76rem; line-height: 1.45; color: rgba(255,255,255,.52); }
.au-node:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -16px; width: 16px; height: 2px;
    background: repeating-linear-gradient(90deg,#6ee7b7 0 5px,transparent 5px 9px);
    animation: auDash .9s linear infinite;
}
@keyframes auDash { to { background-position: 9px 0; } }
.au-trigger-tag { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6ee7b7; margin-bottom: 8px; }
.au-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 900px; margin: 44px auto 0; }
.au-lists h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; color: #fff; margin-bottom: 14px; }
.au-lists ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.au-lists li { position: relative; padding-left: 22px; font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.62); }
.au-lists li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #6ee7b7; }
@media (max-width: 820px) {
    .au-flow { grid-template-columns: repeat(2,1fr); }
    .au-node:not(:last-child)::after { display: none; }
    .au-lists { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .au-node:not(:last-child)::after { animation: none; } }

/* ==========================================================================
   53. AI VOICE PAGE — bespoke (vx-). Archetypes used ONLY here:
   sticky-scroll storytelling, full-bleed voice spectrum, horizontal-scroll
   scenario rail, oversized typographic statement, curved section dividers.
   ========================================================================== */

/* mesh/aurora backdrop used for this page's light sections */
.vx-mesh {
    position: relative;
    background:
        radial-gradient(58% 44% at 12% 8%, rgba(37,99,235,.16), transparent 62%),
        radial-gradient(46% 40% at 88% 22%, rgba(6,214,160,.18), transparent 64%),
        radial-gradient(52% 46% at 60% 96%, rgba(124,58,237,.12), transparent 62%),
        #f6f8fd;
}
.vx-noise::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* curved divider */
.vx-curve { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }
.vx-curve path { fill: currentColor; }

/* ---------- 1. HERO: off-grid, huge type, floating handset ---------- */
.vx-hero {
    position: relative; overflow: hidden; color: #0b1226;
    padding: clamp(120px,14vh,168px) 20px clamp(50px,6vw,84px);
}
.vx-hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(26px,4vw,56px); align-items: center; position: relative; z-index: 2; }
.vx-badge {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
    font-family: 'Plus Jakarta Sans',sans-serif; font-size: .74rem; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase; color: #0a7f6b;
    background: rgba(255,255,255,.7); border: 1px solid rgba(6,214,160,.35);
    padding: 9px 16px; border-radius: 999px; backdrop-filter: blur(8px);
}
.vx-badge i { width: 7px; height: 7px; border-radius: 50%; background: #06d6a0; animation: heDotPulse 2.2s ease-out infinite; }
.vx-title {
    font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; letter-spacing: -.045em;
    font-size: clamp(2.4rem,6.2vw,4.6rem); line-height: .98; color: #0b1226; margin-bottom: 22px;
}
.vx-title em {
    font-style: normal; display: block;
    background: linear-gradient(100deg,#1e40af,#06d6a0 62%,#7c3aed);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.vx-sub { font-size: 1.08rem; line-height: 1.65; color: #475569; max-width: 40ch; margin-bottom: 30px; }
.vx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.vx-link { display: inline-flex; align-items: center; gap: 7px; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .93rem; color: #1e40af; text-decoration: none; transition: gap .25s var(--fx-ease); }
.vx-link:hover { gap: 12px; }

/* floating handset mockup */
.vx-phone {
    position: relative; width: min(300px,86%); margin: 0 auto; border-radius: 42px; padding: 12px;
    background: linear-gradient(160deg,#161d33,#0b1226); border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 50px 100px rgba(11,18,38,.4), 0 0 0 10px rgba(255,255,255,.5);
    animation: vxFloat 7s ease-in-out infinite;
}
@keyframes vxFloat { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-16px) rotate(1deg); } }
.vx-phone-screen { border-radius: 32px; overflow: hidden; background: linear-gradient(170deg,#0e1730,#071f1c); padding: 26px 20px; text-align: center; }
.vx-notch { width: 92px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.2); margin: 0 auto 22px; }
.vx-caller { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: 1.3rem; background: var(--fx-brand-grad); position: relative; }
.vx-caller::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(6,214,160,.5); animation: voRing 2s ease-out infinite; }
.vx-phone-screen strong { display: block; color: #fff; font-size: 1.02rem; }
.vx-phone-screen small { display: block; color: rgba(255,255,255,.5); font-size: .8rem; margin-bottom: 20px; }
.vx-mini-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 44px; margin-bottom: 20px; }
.vx-mini-wave span { width: 4px; border-radius: 999px; background: linear-gradient(180deg,#6ee7b7,#2563eb); animation: voBar 1.1s ease-in-out infinite; }
.vx-answer { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: #04231a; background: #06d6a0; padding: 9px 18px; border-radius: 999px; }
.vx-orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; z-index: 1; }
.vx-orb-1 { width: 240px; height: 240px; top: 8%; right: 6%; background: radial-gradient(circle,rgba(6,214,160,.28),transparent 68%); animation: vxFloat 9s ease-in-out infinite; }
.vx-orb-2 { width: 300px; height: 300px; bottom: -8%; left: -4%; background: radial-gradient(circle,rgba(37,99,235,.22),transparent 66%); animation: vxFloat 11s ease-in-out infinite reverse; }
@media (max-width: 900px) { .vx-hero-grid { grid-template-columns: 1fr; } .vx-sub { max-width: none; } }

/* ---------- 2. STICKY-SCROLL STORYTELLING ---------- */
.vx-story { background: #0a0f1e; color: #cbd3e6; padding: clamp(56px,6vw,90px) 20px clamp(70px,8vw,120px); }
.vx-story-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(30px,5vw,70px); align-items: start; }
.vx-sticky { position: sticky; top: 120px; }
.vx-sticky-panel {
    border-radius: 26px; padding: 26px; background: linear-gradient(155deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px);
}
.vx-sticky-panel .vx-mini-wave { height: 70px; }
.vx-sticky-panel .vx-mini-wave span { width: 5px; }
.vx-sticky-cap { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); }
.vx-sticky-cap b { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #6ee7b7; margin-bottom: 6px; }
.vx-sticky-cap p { margin: 0; color: rgba(255,255,255,.85); font-size: .92rem; line-height: 1.5; }
.vx-beats { display: grid; gap: clamp(40px,7vh,86px); }
.vx-beat { padding-left: 62px; position: relative; }
.vx-beat-n {
    position: absolute; left: 0; top: 2px; width: 42px; height: 42px; border-radius: 14px;
    display: grid; place-items: center; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800;
    font-size: .88rem; color: #6ee7b7; background: rgba(6,214,160,.12); border: 1px solid rgba(6,214,160,.3);
}
.vx-beat h3 { font-family: 'Plus Jakarta Sans',sans-serif; font-size: clamp(1.25rem,2.4vw,1.7rem); font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 10px; }
.vx-beat p { margin: 0; font-size: .98rem; line-height: 1.7; color: rgba(255,255,255,.6); }
.vx-beat-tag { display: inline-block; margin-top: 12px; font-size: .76rem; color: #6ee7b7; background: rgba(6,214,160,.1); border: 1px solid rgba(6,214,160,.26); padding: 6px 13px; border-radius: 999px; }
@media (max-width: 900px) { .vx-story-grid { grid-template-columns: 1fr; } .vx-sticky { position: static; } }

/* ---------- 3. FULL-BLEED VOICE SPECTRUM ---------- */
.vx-spectrum { position: relative; overflow: hidden; background: linear-gradient(120deg,#04121f,#062b28 55%,#071634); padding: clamp(58px,6vw,92px) 20px; text-align: center; }
.vx-spectrum-bars { display: flex; align-items: center; justify-content: center; gap: 4px; height: clamp(120px,16vw,210px); margin-bottom: 30px; }
.vx-spectrum-bars span {
    flex: 1; max-width: 14px; border-radius: 999px;
    background: linear-gradient(180deg,#a7f3d0,#34d399 40%,#2563eb);
    animation: vxSpec 1.6s ease-in-out infinite;
}
@keyframes vxSpec { 0%,100% { height: 12%; opacity: .5; } 50% { height: 100%; opacity: 1; } }
.vx-spectrum h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.5rem,3.4vw,2.5rem); letter-spacing: -.03em; margin-bottom: 10px; }
.vx-spectrum p { color: rgba(255,255,255,.6); max-width: 56ch; margin: 0 auto; font-size: 1rem; line-height: 1.65; }

/* ---------- 4. HORIZONTAL-SCROLL SCENARIO RAIL ---------- */
.vx-rail-sec { background: #fff; padding: clamp(60px,6vw,96px) 0; }
.vx-rail-head { max-width: 1200px; margin: 0 auto clamp(26px,3vw,40px); padding: 0 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.vx-rail-head h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: clamp(1.5rem,3.2vw,2.4rem); letter-spacing: -.03em; color: #0b1226; margin: 0; }
.vx-rail-hint { font-size: .84rem; color: #64748b; display: inline-flex; align-items: center; gap: 8px; }
.vx-rail {
    display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 6px 20px 22px; scrollbar-width: thin;
}
.vx-rail::-webkit-scrollbar { height: 6px; }
.vx-rail::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.vx-slide {
    scroll-snap-align: center; flex: 0 0 min(360px,80vw);
    border-radius: 22px; padding: 26px 24px; color: #fff; position: relative; overflow: hidden;
    min-height: 260px; display: flex; flex-direction: column; justify-content: space-between;
}
.vx-slide-1 { background: linear-gradient(155deg,#0f2f6b,#123c8a); }
.vx-slide-2 { background: linear-gradient(155deg,#0a5c4e,#0a7f6b); }
.vx-slide-3 { background: linear-gradient(155deg,#3b1d6b,#5b2ea6); }
.vx-slide-4 { background: linear-gradient(155deg,#7a3410,#b4530f); }
.vx-slide-5 { background: linear-gradient(155deg,#123240,#0e5566); }
.vx-slide-time { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.vx-slide q { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.12rem; line-height: 1.45; font-weight: 700; margin: 14px 0 18px; }
.vx-slide-out { font-size: .84rem; line-height: 1.5; opacity: .82; border-top: 1px solid rgba(255,255,255,.2); padding-top: 14px; }
.vx-slide-out b { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: 5px; }

/* ---------- 5. OVERSIZED TYPE STATEMENT ---------- */
.vx-statement { background: #f6f8fd; padding: clamp(70px,8vw,120px) 20px; text-align: center; }
.vx-statement p {
    max-width: 17ch; margin: 0 auto; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800;
    font-size: clamp(2rem,6.4vw,4.4rem); line-height: 1.02; letter-spacing: -.045em; color: #0b1226;
}
.vx-statement p span { background: linear-gradient(100deg,#1e40af,#06d6a0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vx-statement-foot { margin-top: 28px; font-size: .95rem; color: #64748b; }

/* ---------- 6. CLIENT STORY: overlapping photo + floating chips ---------- */
.vx-case { position: relative; padding: clamp(64px,7vw,108px) 20px; overflow: hidden; }
.vx-case-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,5vw,64px); align-items: center; }
.vx-case-media { position: relative; }
.vx-case-media img { width: 100%; border-radius: 24px; display: block; box-shadow: 0 34px 70px rgba(11,18,38,.24); }
.vx-chip {
    position: absolute; background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
    border: 1px solid rgba(15,23,42,.08); border-radius: 16px; padding: 13px 17px;
    box-shadow: 0 16px 34px rgba(11,18,38,.16); animation: vxFloat 8s ease-in-out infinite;
}
.vx-chip b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vx-chip span { display: block; font-size: .74rem; color: #64748b; }
.vx-chip-1 { top: 8%; right: -6%; }
.vx-chip-2 { bottom: 12%; left: -6%; animation-delay: 1.4s; }
.vx-case-quote { font-family: 'Plus Jakarta Sans',sans-serif; font-size: clamp(1.25rem,2.6vw,1.85rem); line-height: 1.4; font-weight: 700; letter-spacing: -.02em; color: #0b1226; margin: 0 0 20px; }
.vx-case-who { display: flex; align-items: center; gap: 13px; }
.vx-case-who i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; background: var(--fx-brand-grad); }
.vx-case-who b { display: block; color: #0b1226; font-size: .95rem; }
.vx-case-who span { display: block; font-size: .82rem; color: #64748b; }
@media (max-width: 900px) {
    .vx-case-grid { grid-template-columns: 1fr; }
    .vx-chip-1 { right: 2%; } .vx-chip-2 { left: 2%; }
}

/* ---------- 7. CALL ANALYTICS PANEL over gradient ---------- */
.vx-analytics { position: relative; overflow: hidden; background: linear-gradient(150deg,#0b1226,#0a2a3f 55%,#07231f); padding: clamp(64px,7vw,104px) 20px; }
.vx-an-wrap { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(26px,4vw,50px); align-items: center; }
.vx-an-copy h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.5rem,3vw,2.2rem); letter-spacing: -.03em; margin-bottom: 12px; }
.vx-an-copy p { color: rgba(255,255,255,.62); line-height: 1.7; margin: 0; }
.vx-an-panel { border-radius: 22px; padding: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(10px); }
.vx-an-top { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
.vx-an-kpi { padding: 14px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.vx-an-kpi span { display: block; font-size: .7rem; color: rgba(255,255,255,.5); margin-bottom: 5px; }
.vx-an-kpi b { font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.35rem; font-weight: 800; color: #fff; }
.vx-hours { display: flex; align-items: flex-end; gap: 5px; height: 130px; }
.vx-hours span { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg,#6ee7b7,#2563eb); opacity: .9; }
.vx-hours span.pk { background: linear-gradient(180deg,#fbbf24,#f97316); }
.vx-an-note { margin-top: 14px; font-size: .78rem; color: rgba(255,255,255,.5); }
@media (max-width: 880px) { .vx-an-wrap { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    .vx-phone, .vx-orb, .vx-chip, .vx-mini-wave span, .vx-spectrum-bars span, .vx-caller::after, .vx-badge i { animation: none; }
}

/* ==========================================================================
   54. AI CHAT PAGE — bespoke (cx-). Archetypes used ONLY here:
   fanned device trio, diagonal split-screen, knowledge-search animation,
   masonry conversation wall, layered overlapping case panels.
   Colour identity: indigo/violet (Voice owns the blue-green mesh).
   ========================================================================== */
.cx-ink { color: #1b1235; }

/* ---------- 1. HERO: violet wash + fanned device trio ---------- */
.cx-hero {
    position: relative; overflow: hidden;
    padding: clamp(118px,13vh,164px) 20px clamp(56px,7vw,96px);
    background:
        radial-gradient(60% 50% at 82% 6%, rgba(139,92,246,.28), transparent 64%),
        radial-gradient(52% 44% at 10% 30%, rgba(56,189,248,.20), transparent 62%),
        linear-gradient(165deg,#160f2e 0%,#1d1440 45%,#0f1030 100%);
}
.cx-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; position: relative; z-index: 2; }
.cx-pill {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
    font-family: 'Plus Jakarta Sans',sans-serif; font-size: .74rem; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase; color: #ddd6fe;
    background: rgba(139,92,246,.18); border: 1px solid rgba(167,139,250,.4);
    padding: 9px 16px; border-radius: 999px;
}
.cx-pill i { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; animation: heDotPulse 2.2s ease-out infinite; }
.cx-h1 {
    font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff;
    font-size: clamp(2.2rem,5.4vw,4rem); line-height: 1.02; letter-spacing: -.04em; margin-bottom: 20px;
}
.cx-h1 span { background: linear-gradient(100deg,#a78bfa,#38bdf8 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cx-lede { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,.66); max-width: 40ch; margin-bottom: 28px; }
.cx-actions { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.cx-btn {
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .94rem; color: #fff;
    background: linear-gradient(120deg,#7c3aed,#38bdf8); padding: 15px 28px; border-radius: 50px;
    box-shadow: 0 14px 34px rgba(124,58,237,.4);
    transition: transform .25s var(--fx-ease-spring), box-shadow .25s var(--fx-ease);
}
.cx-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(124,58,237,.55); }
.cx-ghostlink { display: inline-flex; align-items: center; gap: 7px; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .92rem; color: #c4b5fd; text-decoration: none; transition: gap .25s var(--fx-ease); }
.cx-ghostlink:hover { gap: 12px; color: #ddd6fe; }

/* fanned device trio */
.cx-trio { position: relative; height: clamp(400px,44vw,520px); }
.cx-dev {
    position: absolute; width: clamp(160px,17vw,208px); border-radius: 26px; padding: 8px;
    background: linear-gradient(160deg,#241a45,#140f2c); border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 34px 70px rgba(8,5,22,.6);
}
.cx-dev-screen { border-radius: 20px; overflow: hidden; background: #fff; min-height: 250px; display: flex; flex-direction: column; }
.cx-dev-top { padding: 11px 12px; display: flex; align-items: center; gap: 8px; color: #fff; }
.cx-dev-top b { font-size: .74rem; font-weight: 700; }
.cx-dev-top i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.28); display: grid; place-items: center; font-style: normal; font-size: .6rem; }
.cx-dev-body { flex: 1; padding: 11px; display: flex; flex-direction: column; gap: 7px; background: #f6f7fb; }
.cx-b { max-width: 88%; padding: 7px 10px; border-radius: 11px; font-size: .64rem; line-height: 1.42; }
.cx-b-in { align-self: flex-start; background: #fff; color: #334155; border: 1px solid rgba(15,23,42,.07); }
.cx-b-out { align-self: flex-end; color: #fff; }
.cx-dev-1 { left: 0; top: 8%; transform: rotate(-9deg); z-index: 1; }
.cx-dev-1 .cx-dev-top { background: #075e54; }
.cx-dev-1 .cx-b-out { background: #dcf8c6; color: #1b3a2b; }
.cx-dev-2 { left: 26%; top: 0; transform: rotate(0deg); z-index: 3; }
.cx-dev-2 .cx-dev-top { background: linear-gradient(120deg,#833ab4,#fd1d1d 60%,#fcaf45); }
.cx-dev-2 .cx-b-out { background: linear-gradient(120deg,#833ab4,#c13584); }
.cx-dev-3 { right: 0; top: 14%; transform: rotate(9deg); z-index: 2; }
.cx-dev-3 .cx-dev-top { background: #0084ff; }
.cx-dev-3 .cx-b-out { background: #0084ff; }
.cx-dev { animation: cxBob 8s ease-in-out infinite; }
.cx-dev-2 { animation-delay: .6s; }
.cx-dev-3 { animation-delay: 1.2s; }
@keyframes cxBob { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-14px) rotate(var(--r,0deg)); } }
.cx-dev-1 { --r: -9deg; }
.cx-dev-2 { --r: 0deg; }
.cx-dev-3 { --r: 9deg; }
@media (max-width: 900px) {
    .cx-hero-grid { grid-template-columns: 1fr; }
    .cx-trio { height: 380px; }
    .cx-dev { width: 150px; }
}

/* ---------- 2. DIAGONAL SPLIT-SCREEN ---------- */
.cx-speed { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(300px,36vw,420px); }
.cx-speed-l {
    background: linear-gradient(150deg,#7c3aed,#38bdf8); color: #fff;
    display: grid; place-items: center; text-align: center; padding: clamp(36px,5vw,64px);
}
.cx-speed-l b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: clamp(3.4rem,9vw,7rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; }
.cx-speed-l span { display: block; margin-top: 10px; font-size: .95rem; opacity: .85; letter-spacing: .04em; }
.cx-speed-r {
    background: #12102b; color: rgba(255,255,255,.7);
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(32px,5vw,64px); padding-left: clamp(64px,7vw,100px);
    margin-left: -60px;
    /* diagonal left edge, so the purple panel shows through the notch */
    clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
}
.cx-speed-r h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.4rem,2.8vw,2.1rem); letter-spacing: -.03em; margin-bottom: 12px; }
.cx-speed-r p { margin: 0 0 16px; line-height: 1.7; font-size: .98rem; }
.cx-speed-r ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cx-speed-r li { font-size: .8rem; padding: 7px 14px; border-radius: 999px; background: rgba(167,139,250,.14); border: 1px solid rgba(167,139,250,.3); color: #ddd6fe; }
@media (max-width: 820px) {
    .cx-speed { grid-template-columns: 1fr; }
    .cx-speed-r { margin-left: 0; clip-path: none; padding-left: clamp(32px,5vw,64px); }
}

/* ---------- 3. KNOWLEDGE SEARCH ---------- */
.cx-know2 { background: #f7f5ff; padding: clamp(64px,7vw,104px) 20px; }
.cx-know-wrap { max-width: 780px; margin: 0 auto; }
.cx-search {
    display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 16px;
    background: #fff; border: 1px solid rgba(124,58,237,.22); box-shadow: 0 16px 40px rgba(27,18,53,.1);
}
.cx-search svg { color: #7c3aed; flex: none; }
.cx-search-q { font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1rem; color: #1b1235; font-weight: 600; }
.cx-search-cursor { display: inline-block; width: 2px; height: 1.05em; background: #7c3aed; margin-left: 2px; vertical-align: -2px; animation: cxCaret 1.1s step-end infinite; }
@keyframes cxCaret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.cx-sources { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0; justify-content: center; }
.cx-src {
    display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: #4c1d95;
    background: #fff; border: 1px solid rgba(124,58,237,.2); padding: 8px 14px; border-radius: 999px;
    animation: cxPop .5s var(--fx-ease-spring) both;
}
.cx-src:nth-child(2) { animation-delay: .12s; }
.cx-src:nth-child(3) { animation-delay: .24s; }
.cx-src:nth-child(4) { animation-delay: .36s; }
.cx-src i { width: 6px; height: 6px; border-radius: 50%; background: #7c3aed; font-style: normal; }
@keyframes cxPop { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
.cx-answer {
    background: linear-gradient(150deg,#241a45,#12102b); color: #fff; border-radius: 18px;
    padding: 24px 26px; box-shadow: 0 26px 54px rgba(27,18,53,.28);
}
.cx-answer b { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: #a78bfa; margin-bottom: 10px; }
.cx-answer p { margin: 0; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.86); }
.cx-answer-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: .8rem; color: rgba(255,255,255,.5); }

/* ---------- 4. MASONRY CONVERSATION WALL ---------- */
.cx-wall { background: #12102b; padding: clamp(64px,7vw,104px) 20px; }
.cx-wall-cols { columns: 3; column-gap: 18px; max-width: 1060px; margin: 0 auto; }
.cx-note {
    break-inside: avoid; margin: 0 0 18px; border-radius: 18px; padding: 20px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    transition: transform .3s var(--fx-ease), border-color .3s var(--fx-ease);
}
.cx-note:hover { transform: translateY(-5px); border-color: rgba(167,139,250,.45); }
.cx-note-top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.cx-note-top i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 800; color: #fff; }
.cx-wa i { background: #25d366; }
.cx-ig i { background: linear-gradient(120deg,#833ab4,#fd1d1d); }
.cx-ms i { background: #0084ff; }
.cx-web i { background: #7c3aed; }
.cx-note-top span { font-size: .72rem; color: rgba(255,255,255,.45); }
.cx-note q { display: block; font-size: .92rem; line-height: 1.55; color: #fff; font-style: normal; margin-bottom: 12px; }
.cx-note-reply { font-size: .84rem; line-height: 1.55; color: rgba(255,255,255,.6); padding-left: 12px; border-left: 2px solid rgba(167,139,250,.5); }
.cx-note-meta { margin-top: 12px; font-size: .72rem; color: #a78bfa; }
@media (max-width: 900px) { .cx-wall-cols { columns: 2; } }
@media (max-width: 600px) { .cx-wall-cols { columns: 1; } }

/* ---------- 5. LAYERED CASE PANELS ---------- */
.cx-case { background: #f7f5ff; padding: clamp(64px,7vw,108px) 20px; }
.cx-case-stack { position: relative; max-width: 980px; margin: 0 auto; }
.cx-case-back {
    position: absolute; inset: 22px -14px -18px; border-radius: 26px;
    background: linear-gradient(140deg,rgba(124,58,237,.16),rgba(56,189,248,.14)); z-index: 0;
}
.cx-case-front {
    position: relative; z-index: 1; border-radius: 24px; padding: clamp(26px,4vw,44px);
    background: #fff; border: 1px solid rgba(27,18,53,.08); box-shadow: 0 30px 64px rgba(27,18,53,.14);
    display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px,4vw,48px); align-items: center;
}
.cx-case-logo { width: 100%; max-width: 190px; height: auto; display: block; margin-bottom: 18px; }
.cx-case-metrics { display: flex; gap: 26px; flex-wrap: wrap; }
.cx-case-metrics div b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(120deg,#7c3aed,#38bdf8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cx-case-metrics div span { display: block; font-size: .78rem; color: #6b7280; }
.cx-case-q { font-family: 'Plus Jakarta Sans',sans-serif; font-size: clamp(1.15rem,2.4vw,1.65rem); line-height: 1.45; font-weight: 700; letter-spacing: -.02em; color: #1b1235; margin: 0 0 16px; }
.cx-case-by { font-size: .86rem; color: #6b7280; }
.cx-case-by b { color: #1b1235; }
@media (max-width: 820px) { .cx-case-front { grid-template-columns: 1fr; } }

/* ---------- 6. CLOSE ---------- */
.cx-close { background: linear-gradient(150deg,#160f2e,#1d1440 55%,#0f1030); padding: clamp(64px,8vw,110px) 20px; text-align: center; }
.cx-close h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.7rem,3.6vw,2.6rem); letter-spacing: -.03em; margin-bottom: 14px; }
.cx-close p { color: rgba(255,255,255,.6); font-size: 1.02rem; margin-bottom: 30px; }
.cx-close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
    .cx-dev, .cx-src, .cx-search-cursor, .cx-pill i { animation: none; }
    .cx-note, .cx-btn { transition: none; }
}

/* ==========================================================================
   55. CRM PAGE — bespoke (rx-). Archetypes ONLY here: bento-grid hero,
   full-bleed dashboard frame, progress rings, record table, floating widget
   cluster. Identity: light slate + amber (Voice=blue-green, Chat=violet).
   ========================================================================== */
.rx-grid-bg {
    background-image:
        linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* ---------- 1. BENTO HERO ---------- */
.rx-hero { position: relative; background: #f4f6fa; padding: clamp(112px,13vh,158px) 20px clamp(52px,6vw,84px); }
.rx-bento {
    display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: minmax(112px,auto); gap: 16px;
}
.rx-tile {
    background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 20px; padding: 22px;
    box-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.rx-tile-lead { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(24px,3vw,36px); }
.rx-chip {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-bottom: 16px;
    font-family: 'Plus Jakarta Sans',sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: #b45309; background: #fef3c7; border: 1px solid #fcd34d;
    padding: 8px 14px; border-radius: 8px;
}
.rx-h1 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: clamp(1.9rem,4vw,3rem); line-height: 1.06; letter-spacing: -.035em; color: #0f172a; margin-bottom: 14px; }
.rx-h1 em { font-style: normal; color: #b45309; }
.rx-lede { color: #475569; font-size: 1rem; line-height: 1.65; margin-bottom: 22px; }
.rx-cta { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; text-decoration: none;
    font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .93rem; color: #fff;
    background: #0f172a; padding: 14px 26px; border-radius: 10px; transition: background .25s var(--fx-ease), transform .25s var(--fx-ease); }
.rx-cta:hover { background: #1e293b; transform: translateY(-2px); }
.rx-kpi span { display: block; font-size: .74rem; color: #64748b; margin-bottom: 6px; }
.rx-kpi b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: #0f172a; line-height: 1; }
.rx-kpi i { font-style: normal; font-size: .74rem; font-weight: 700; color: #059669; }
.rx-tile-wide { grid-column: span 2; }
.rx-spark { display: flex; align-items: flex-end; gap: 5px; height: 62px; margin-top: 12px; }
.rx-spark span { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg,#fbbf24,#f59e0b); }
.rx-spark span.b { background: linear-gradient(180deg,#cbd5e1,#94a3b8); }
.rx-avatars { display: flex; margin-top: 12px; }
.rx-avatars i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
    font-size: .7rem; font-weight: 800; color: #fff; border: 2px solid #fff; margin-left: -9px; }
.rx-avatars i:first-child { margin-left: 0; }
.rx-tile-dark { background: #0f172a; border-color: #0f172a; color: #fff; }
.rx-tile-dark span { color: rgba(255,255,255,.55); }
.rx-tile-dark b { color: #fff; }
@media (max-width: 900px) {
    .rx-bento { grid-template-columns: repeat(2,1fr); }
    .rx-tile-lead { grid-column: span 2; grid-row: auto; }
}

/* ---------- 2. FULL-BLEED DASHBOARD FRAME ---------- */
.rx-dash { background: linear-gradient(180deg,#0f172a,#111c33); padding: clamp(60px,7vw,100px) 20px; }
.rx-dash-head { text-align: center; max-width: 640px; margin: 0 auto clamp(30px,4vw,46px); }
.rx-dash-head h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.5rem,3.2vw,2.3rem); letter-spacing: -.03em; margin-bottom: 12px; }
.rx-dash-head p { color: rgba(255,255,255,.6); line-height: 1.65; margin: 0; }
.rx-window { max-width: 1080px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #f8fafc; box-shadow: 0 40px 90px rgba(2,6,23,.5); border: 1px solid rgba(255,255,255,.12); }
.rx-window-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #e2e8f0; border-bottom: 1px solid rgba(15,23,42,.08); }
.rx-window-bar i { width: 10px; height: 10px; border-radius: 50%; }
.rx-window-bar i:nth-child(1) { background: #f87171; }
.rx-window-bar i:nth-child(2) { background: #fbbf24; }
.rx-window-bar i:nth-child(3) { background: #34d399; }
.rx-window-bar span { margin-left: 12px; font-size: .76rem; color: #64748b; font-weight: 600; }
.rx-window-body { padding: clamp(16px,2.4vw,26px); }

/* ---------- 3. PROGRESS RINGS ---------- */
.rx-rings { background: #fff; padding: clamp(60px,7vw,96px) 20px; }
.rx-rings-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; max-width: 940px; margin: 0 auto; }
.rx-ring-item { text-align: center; }
.rx-ring {
    --v: 70; --c: #f59e0b;
    width: 124px; height: 124px; margin: 0 auto 14px; border-radius: 50%; position: relative;
    display: grid; place-items: center;
    background: conic-gradient(var(--c) calc(var(--v)*1%), #e2e8f0 0);
}
.rx-ring::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; }
.rx-ring b { position: relative; z-index: 1; font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.5rem; font-weight: 800; color: #0f172a; }
.rx-ring-item strong { display: block; font-size: .95rem; color: #0f172a; margin-bottom: 4px; }
.rx-ring-item span { display: block; font-size: .82rem; color: #64748b; line-height: 1.5; }
@media (max-width: 780px) { .rx-rings-row { grid-template-columns: repeat(2,1fr); } }

/* ---------- 4. RECORD TABLE ---------- */
.rx-table-sec { background: #f4f6fa; padding: clamp(60px,7vw,96px) 20px; }
.rx-table-wrap { max-width: 1020px; margin: 0 auto; background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(15,23,42,.07); }
.rx-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.rx-table thead th { text-align: left; padding: 14px 18px; background: #f8fafc; color: #64748b; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid rgba(15,23,42,.08); }
.rx-table td { padding: 15px 18px; border-bottom: 1px solid rgba(15,23,42,.06); color: #334155; vertical-align: middle; }
.rx-table tbody tr:last-child td { border-bottom: none; }
.rx-table tbody tr:hover { background: #fcfdff; }
.rx-who { display: flex; align-items: center; gap: 11px; }
.rx-who i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-size: .7rem; font-weight: 800; color: #fff; background: #0f172a; }
.rx-who b { display: block; color: #0f172a; font-size: .9rem; }
.rx-who span { display: block; font-size: .76rem; color: #64748b; }
.rx-tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.rx-tag-new { background: #dbeafe; color: #1d4ed8; }
.rx-tag-book { background: #d1fae5; color: #047857; }
.rx-tag-due { background: #fef3c7; color: #b45309; }
.rx-src { font-size: .78rem; color: #64748b; }
.rx-table-note { padding: 14px 18px; background: #f8fafc; font-size: .8rem; color: #64748b; border-top: 1px solid rgba(15,23,42,.06); }
@media (max-width: 780px) { .rx-hide-sm { display: none; } }

/* ---------- 5. FLOATING WIDGET CLUSTER ---------- */
.rx-widgets { position: relative; overflow: hidden; background: linear-gradient(160deg,#0f172a,#153044 60%,#1c2b1f); padding: clamp(64px,8vw,110px) 20px; }
.rx-wid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,60px); align-items: center; }
.rx-wid-copy h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.5rem,3.2vw,2.3rem); letter-spacing: -.03em; margin-bottom: 14px; }
.rx-wid-copy p { color: rgba(255,255,255,.62); line-height: 1.7; margin: 0 0 18px; }
.rx-wid-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.rx-wid-list li { position: relative; padding-left: 24px; font-size: .92rem; color: rgba(255,255,255,.72); }
.rx-wid-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: #fbbf24; }
.rx-wid-stage { position: relative; min-height: 360px; }
.rx-wid {
    position: absolute; background: rgba(255,255,255,.96); border-radius: 14px; padding: 15px 17px;
    box-shadow: 0 22px 46px rgba(2,6,23,.42); animation: rxDrift 9s ease-in-out infinite;
}
@keyframes rxDrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
.rx-wid b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.3rem; font-weight: 800; color: #0f172a; letter-spacing: -.02em; }
.rx-wid span { display: block; font-size: .74rem; color: #64748b; }
.rx-wid-a { top: 2%; left: 2%; }
.rx-wid-b { top: 28%; right: 0; animation-delay: 1.1s; }
.rx-wid-c { bottom: 16%; left: 12%; animation-delay: 2.2s; }
.rx-wid-d { bottom: 0; right: 14%; animation-delay: 3.1s; }
.rx-wid-bar { width: 120px; height: 7px; border-radius: 999px; background: #e2e8f0; margin-top: 9px; overflow: hidden; }
.rx-wid-bar i { display: block; height: 100%; background: linear-gradient(90deg,#f59e0b,#fbbf24); }
@media (max-width: 900px) { .rx-wid-grid { grid-template-columns: 1fr; } .rx-wid-stage { min-height: 330px; } }

/* ---------- 6. CASE STRIP ---------- */
.rx-case { background: #fff; padding: clamp(60px,7vw,100px) 20px; }
.rx-case-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: clamp(24px,4vw,48px); align-items: center; }
.rx-case-badge { width: 108px; height: 108px; border-radius: 24px; display: grid; place-items: center; background: linear-gradient(150deg,#0f172a,#1e3a5f); color: #fbbf24; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: 1.5rem; }
.rx-case-q { font-family: 'Plus Jakarta Sans',sans-serif; font-size: clamp(1.15rem,2.5vw,1.7rem); line-height: 1.45; font-weight: 700; letter-spacing: -.02em; color: #0f172a; margin: 0 0 14px; }
.rx-case-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.rx-case-meta b { color: #0f172a; font-size: .92rem; }
.rx-case-meta span { font-size: .84rem; color: #64748b; }
.rx-case-meta em { font-style: normal; font-size: .82rem; font-weight: 700; color: #b45309; background: #fef3c7; padding: 5px 11px; border-radius: 999px; }
@media (max-width: 640px) { .rx-case-inner { grid-template-columns: 1fr; } }

/* ---------- 7. CLOSE ---------- */
.rx-close { background: #0f172a; padding: clamp(60px,8vw,104px) 20px; text-align: center; }
.rx-close h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.6rem,3.4vw,2.5rem); letter-spacing: -.03em; margin-bottom: 14px; }
.rx-close p { color: rgba(255,255,255,.6); margin-bottom: 28px; }
.rx-close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.rx-close .rx-cta { background: #fbbf24; color: #451a03; }
.rx-close .rx-cta:hover { background: #fcd34d; }

@media (prefers-reduced-motion: reduce) { .rx-wid { animation: none; } }
.rx-feed { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rx-feed li { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: #475569; }
.rx-feed i { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: .64rem; font-weight: 800; color: #fff; }
.rx-feed b { color: #0f172a; font-weight: 700; }
.rx-feed span { margin-left: auto; font-size: .74rem; color: #94a3b8; }

/* ==========================================================================
   56. SHARED MEDIA COMPONENTS — real client logos, review walls, video bands.
   Logos are normalised to white silhouettes so mixed-colour source files read
   consistently on a dark strip.
   ========================================================================== */
.mx-logos { background: #0b1226; padding: clamp(34px,4vw,52px) 20px; }
.mx-logos-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(26px,5vw,64px); }
.mx-logos-label { width: 100%; text-align: center; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px; }
.mx-logo img {
    height: clamp(24px,3vw,34px); width: auto; display: block;
    filter: brightness(0) invert(1); opacity: .62;
    transition: opacity .3s var(--fx-ease), transform .3s var(--fx-ease);
}
.mx-logo:hover img { opacity: 1; transform: translateY(-3px); }
.mx-logos-light { background: #f4f6fa; }
.mx-logos-light .mx-logos-label { color: #94a3b8; }
.mx-logos-light .mx-logo img { filter: grayscale(1) contrast(.2) brightness(.55); opacity: .8; }
.mx-logos-light .mx-logo:hover img { filter: none; opacity: 1; }

/* --- review wall --- */
.mx-reviews { padding: clamp(60px,7vw,100px) 20px; }
.mx-rev-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.mx-rev {
    background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 18px; padding: 24px;
    display: flex; flex-direction: column; box-shadow: 0 10px 28px rgba(15,23,42,.06);
    transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
.mx-rev:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(15,23,42,.12); }
.mx-rev-stars { display: flex; gap: 3px; color: #f5b301; margin-bottom: 13px; }
.mx-rev p { margin: 0 0 18px; font-size: .95rem; line-height: 1.65; color: #334155; flex: 1; }
.mx-rev-by { display: flex; align-items: center; gap: 12px; }
.mx-rev-by img { height: 26px; width: auto; max-width: 92px; object-fit: contain; }
.mx-rev-by i {
    width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center;
    font-style: normal; font-weight: 800; font-size: .78rem; color: #fff; background: var(--fx-brand-grad);
}
.mx-rev-by b { display: block; font-size: .9rem; color: #0f172a; }
.mx-rev-by span { display: block; font-size: .78rem; color: #64748b; }
/* dark variant */
.mx-reviews-dark { background: #0b1226; }
.mx-reviews-dark .mx-rev { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); box-shadow: none; }
.mx-reviews-dark .mx-rev p { color: rgba(255,255,255,.75); }
.mx-reviews-dark .mx-rev-by b { color: #fff; }
.mx-reviews-dark .mx-rev-by span { color: rgba(255,255,255,.5); }
.mx-reviews-dark .mx-rev-by img { filter: brightness(0) invert(1); opacity: .85; }
@media (max-width: 940px) { .mx-rev-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .mx-rev-grid { grid-template-columns: 1fr; } }

/* --- video background band --- */
.mx-vid { position: relative; overflow: hidden; padding: clamp(70px,9vw,130px) 20px; color: #fff; }
.mx-vid-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mx-vid-scrim { position: absolute; inset: 0; z-index: 1; }
.mx-vid-inner { position: relative; z-index: 2; }
.mx-vid-eyebrow { display: inline-block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.mx-vid h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: clamp(1.7rem,4vw,2.9rem); line-height: 1.12; letter-spacing: -.035em; margin-bottom: 16px; color: #fff; }
.mx-vid p { font-size: 1.04rem; line-height: 1.7; color: rgba(255,255,255,.78); max-width: 52ch; margin: 0; }
.mx-vid-stats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 30px; }
.mx-vid-stats div b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: clamp(1.6rem,3vw,2.3rem); font-weight: 800; letter-spacing: -.03em; }
.mx-vid-stats div span { display: block; font-size: .84rem; color: rgba(255,255,255,.62); }

/* --- photo strip (real client photography) --- */
.mx-photos { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.mx-photo { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.mx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--fx-ease); }
.mx-photo:hover img { transform: scale(1.06); }
.mx-photo figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 16px;
    background: linear-gradient(to top, rgba(8,12,26,.88), transparent);
    color: #fff; font-size: .84rem; font-weight: 600;
}
.mx-photo figcaption span { display: block; font-size: .74rem; font-weight: 400; color: rgba(255,255,255,.7); }
@media (max-width: 900px) { .mx-photos { grid-template-columns: repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce) { .mx-rev, .mx-photo img, .mx-logo img { transition: none; } }

/* ==========================================================================
   57. APPOINTMENT BOOKING PAGE — bespoke (bx-). Archetypes ONLY here:
   large month-calendar hero, availability heatmap, day-schedule timeline,
   reminder message thread. Identity: deep teal + coral on cream.
   ========================================================================== */
.bx-cream { background: #fbf8f4; }

/* ---------- 1. HERO with big calendar ---------- */
.bx-hero { position: relative; overflow: hidden; background: linear-gradient(170deg,#fbf8f4 0%,#f2f7f5 60%,#eef6f3 100%); padding: clamp(116px,13vh,160px) 20px clamp(54px,6vw,88px); }
.bx-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px,4vw,60px); align-items: center; }
.bx-tag {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
    font-family: 'Plus Jakarta Sans',sans-serif; font-size: .73rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: #0f766e; background: #ccfbf1; border: 1px solid #5eead4;
    padding: 9px 16px; border-radius: 999px;
}
.bx-h1 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: clamp(2.1rem,5vw,3.5rem); line-height: 1.03; letter-spacing: -.04em; color: #12332e; margin-bottom: 18px; }
.bx-h1 em { font-style: normal; color: #e76f51; }
.bx-lede { font-size: 1.05rem; line-height: 1.7; color: #4b6360; max-width: 38ch; margin-bottom: 28px; }
.bx-actions { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
.bx-btn {
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .94rem; color: #fff;
    background: #0f766e; padding: 15px 28px; border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15,118,110,.28);
    transition: background .25s var(--fx-ease), transform .25s var(--fx-ease);
}
.bx-btn:hover { background: #115e56; transform: translateY(-2px); }
.bx-link { display: inline-flex; align-items: center; gap: 7px; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .92rem; color: #0f766e; text-decoration: none; transition: gap .25s var(--fx-ease); }
.bx-link:hover { gap: 12px; }

.bx-calcard {
    background: #fff; border-radius: 22px; padding: clamp(20px,2.6vw,28px);
    box-shadow: 0 30px 64px rgba(18,51,46,.14); border: 1px solid rgba(18,51,46,.07);
}
.bx-cal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bx-cal-top b { font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.05rem; color: #12332e; }
.bx-cal-nav { display: flex; gap: 6px; }
.bx-cal-nav i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #f1f5f4; color: #4b6360; font-style: normal; font-size: .8rem; }
.bx-cal-week { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; }
.bx-cal-week .dow { text-align: center; font-size: .68rem; font-weight: 800; color: #94a3a0; padding-bottom: 4px; }
.bx-cal-week span.d { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; font-size: .84rem; color: #12332e; background: #f6faf9; }
.bx-cal-week span.d.off { color: #c3d1ce; background: transparent; }
.bx-cal-week span.d.free { background: #d9f5ef; color: #0f766e; font-weight: 700; }
.bx-cal-week span.d.sel { background: #0f766e; color: #fff; font-weight: 800; box-shadow: 0 8px 18px rgba(15,118,110,.35); }
.bx-cal-legend { display: flex; gap: 16px; margin-top: 16px; font-size: .74rem; color: #4b6360; }
.bx-cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.bx-booked-toast {
    margin-top: 16px; display: flex; align-items: center; gap: 11px; padding: 13px 15px;
    background: #fff4ef; border: 1px solid #ffd9c9; border-radius: 13px;
}
.bx-booked-toast i { width: 26px; height: 26px; flex: none; border-radius: 50%; background: #e76f51; color: #fff; display: grid; place-items: center; font-style: normal; font-size: .78rem; font-weight: 800; }
.bx-booked-toast b { display: block; font-size: .88rem; color: #12332e; }
.bx-booked-toast span { display: block; font-size: .76rem; color: #7a6a63; }
@media (max-width: 900px) { .bx-hero-grid { grid-template-columns: 1fr; } .bx-lede { max-width: none; } }

/* ---------- 2. AVAILABILITY HEATMAP ---------- */
.bx-heat { background: linear-gradient(160deg,#08312c,#0b3f38 60%,#0a2f36); padding: clamp(60px,7vw,100px) 20px; }
.bx-heat-wrap { max-width: 900px; margin: 0 auto; }
.bx-heat-grid { display: grid; grid-template-columns: 54px repeat(12,1fr); gap: 5px; align-items: center; }
.bx-heat-grid .hh { font-size: .64rem; color: rgba(255,255,255,.4); text-align: center; }
.bx-heat-grid .dd { font-size: .72rem; color: rgba(255,255,255,.55); }
.bx-cell { aspect-ratio: 1; border-radius: 5px; background: rgba(255,255,255,.07); }
.bx-cell.l1 { background: rgba(94,234,212,.22); }
.bx-cell.l2 { background: rgba(94,234,212,.42); }
.bx-cell.l3 { background: rgba(94,234,212,.68); }
.bx-cell.l4 { background: #5eead4; }
.bx-cell.cl { background: #d4674c; }
.bx-heat-key { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-size: .78rem; color: rgba(255,255,255,.6); }
.bx-heat-key i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: 7px; vertical-align: -2px; }
@media (max-width: 720px) { .bx-heat-grid { grid-template-columns: 40px repeat(12,1fr); gap: 3px; } .bx-heat-grid .hh { font-size: .52rem; } }

/* ---------- 3. DAY SCHEDULE TIMELINE ---------- */
.bx-day { background: #fbf8f4; padding: clamp(60px,7vw,100px) 20px; }
.bx-day-wrap { max-width: 860px; margin: 0 auto; position: relative; }
.bx-day-wrap::before { content: ""; position: absolute; left: 72px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg,#d9f5ef,#5eead4,#d9f5ef); }
.bx-slot-row { display: grid; grid-template-columns: 62px 1fr; gap: 26px; align-items: start; margin-bottom: 14px; position: relative; }
.bx-slot-time { text-align: right; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .8rem; font-weight: 700; color: #7a8f8b; padding-top: 14px; }
.bx-slot-row::after { content: ""; position: absolute; left: 66px; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: #fbf8f4; border: 3px solid #5eead4; }
.bx-appt { background: #fff; border: 1px solid rgba(18,51,46,.08); border-left: 4px solid #0f766e; border-radius: 12px; padding: 13px 16px; box-shadow: 0 6px 18px rgba(18,51,46,.06); }
.bx-appt b { display: block; font-size: .92rem; color: #12332e; margin-bottom: 3px; }
.bx-appt span { display: block; font-size: .78rem; color: #6b807c; }
.bx-appt-src { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #ecfdf5; color: #0f766e; }
.bx-appt-open { background: #fff7f4; border-left-color: #e76f51; border-style: dashed; }
.bx-appt-open b { color: #b4482e; }
.bx-appt-open .bx-appt-src { background: #ffe8e0; color: #b4482e; }
@media (max-width: 620px) { .bx-day-wrap::before { left: 46px; } .bx-slot-row { grid-template-columns: 40px 1fr; gap: 20px; } .bx-slot-row::after { left: 40px; } }

/* ---------- 4. REMINDER MESSAGE THREAD ---------- */
.bx-thread-sec { background: linear-gradient(160deg,#0b3f38,#12332e); padding: clamp(60px,7vw,100px) 20px; }
.bx-thread-grid { display: grid; grid-template-columns: 1fr .92fr; gap: clamp(28px,5vw,60px); align-items: center; max-width: 1020px; margin: 0 auto; }
.bx-thread-copy h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.5rem,3.2vw,2.3rem); letter-spacing: -.03em; margin-bottom: 14px; }
.bx-thread-copy p { color: rgba(255,255,255,.66); line-height: 1.7; margin: 0 0 20px; }
.bx-thread-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.bx-thread-stats b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.8rem; font-weight: 800; color: #5eead4; letter-spacing: -.03em; }
.bx-thread-stats span { display: block; font-size: .8rem; color: rgba(255,255,255,.55); }
.bx-phone2 { max-width: 320px; margin: 0 auto; background: #0a2723; border: 1px solid rgba(255,255,255,.14); border-radius: 30px; padding: 14px; box-shadow: 0 34px 70px rgba(3,20,17,.6); }
.bx-phone2-head { text-align: center; font-size: .74rem; color: rgba(255,255,255,.45); padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 14px; }
.bx-msg { max-width: 88%; padding: 11px 14px; border-radius: 15px; font-size: .82rem; line-height: 1.5; margin-bottom: 10px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.88); border-bottom-left-radius: 5px; }
.bx-msg-time { display: block; font-size: .64rem; color: rgba(255,255,255,.4); margin-top: 5px; }
.bx-msg-user { margin-left: auto; background: #0f766e; color: #fff; border-bottom-left-radius: 15px; border-bottom-right-radius: 5px; }
@media (max-width: 880px) { .bx-thread-grid { grid-template-columns: 1fr; } }

/* ---------- 5. CLOSE ---------- */
.bx-close { background: #12332e; padding: clamp(60px,8vw,104px) 20px; text-align: center; }
.bx-close h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.6rem,3.4vw,2.5rem); letter-spacing: -.03em; margin-bottom: 14px; }
.bx-close p { color: rgba(255,255,255,.62); margin-bottom: 28px; }
.bx-close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.bx-close .bx-btn { background: #e76f51; box-shadow: 0 12px 28px rgba(231,111,81,.34); }
.bx-close .bx-btn:hover { background: #d85f42; }

/* ==========================================================================
   58. WEBSITE BUILD PAGE — bespoke (wx-). Archetypes ONLY here: editorial
   magazine hero, before/after drag slider, stacked browser windows, lighthouse
   score meters. Identity: ink + electric lime.
   ========================================================================== */
.wx-ink { background: #0b0b0c; }

/* ---------- 1. EDITORIAL HERO ---------- */
.wx-hero { background: #0b0b0c; color: #f4f4f2; padding: clamp(112px,13vh,158px) 20px clamp(52px,6vw,84px); }
.wx-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px,5vw,64px); align-items: end; }
.wx-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #c7f000; }
.wx-kicker::after { content: ""; flex: 1; height: 1px; background: rgba(199,240,0,.35); }
.wx-h1 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: clamp(2.3rem,6vw,4.4rem); line-height: .98; letter-spacing: -.045em; margin-bottom: 0; color: #fff; }
.wx-h1 em { font-style: normal; color: #c7f000; }
.wx-meta { border-top: 1px solid rgba(255,255,255,.16); padding-top: 20px; display: grid; gap: 18px; }
.wx-meta p { margin: 0; font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.62); }
.wx-meta-row { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.wx-meta-row div b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.5rem; font-weight: 800; color: #c7f000; letter-spacing: -.03em; }
.wx-meta-row div span { display: block; font-size: .76rem; color: rgba(255,255,255,.5); }
.wx-btn { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; text-decoration: none;
    font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: .92rem; color: #0b0b0c;
    background: #c7f000; padding: 15px 28px; border-radius: 8px;
    transition: background .25s var(--fx-ease), transform .25s var(--fx-ease); }
.wx-btn:hover { background: #d8ff28; transform: translateY(-2px); }
@media (max-width: 900px) { .wx-hero-grid { grid-template-columns: 1fr; align-items: start; } }

/* ---------- 2. STACKED BROWSER WINDOWS (real client sites) ---------- */
.wx-stack-sec { background: #0b0b0c; padding: clamp(20px,3vw,40px) 20px clamp(60px,7vw,96px); }
.wx-stack { position: relative; max-width: 940px; margin: 0 auto; height: clamp(320px,38vw,470px); }
.wx-win {
    position: absolute; border-radius: 12px; overflow: hidden; background: #15151a;
    border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px rgba(0,0,0,.6);
    transition: transform .4s var(--fx-ease);
}
.wx-win:hover { transform: translateY(-8px) scale(1.015); z-index: 6 !important; }
.wx-win-bar { display: flex; align-items: center; gap: 5px; padding: 8px 11px; background: #1e1e25; }
.wx-win-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); }
.wx-win-bar span { margin-left: 8px; font-size: .66rem; color: rgba(255,255,255,.4); }
.wx-win img { display: block; width: 100%; height: auto; background: #fff; }
.wx-win-1 { width: 60%; left: 0; top: 0; z-index: 3; }
.wx-win-2 { width: 52%; right: 0; top: 12%; z-index: 4; }
.wx-win-3 { width: 44%; left: 14%; bottom: 0; z-index: 5; }
@media (max-width: 760px) {
    .wx-stack { height: auto; display: grid; gap: 16px; }
    .wx-win { position: static; width: 100% !important; }
}

/* ---------- 3. BEFORE / AFTER SLIDER ---------- */
.wx-compare-sec { background: #f4f4f2; padding: clamp(60px,7vw,100px) 20px; }
.wx-cmp {
    --split: 50%;
    position: relative; max-width: 900px; margin: 0 auto; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(11,11,12,.12); box-shadow: 0 24px 54px rgba(11,11,12,.16);
    aspect-ratio: 16/9; background: #fff;
}
.wx-cmp-pane { position: absolute; inset: 0; display: flex; flex-direction: column; }
.wx-cmp-after { clip-path: inset(0 0 0 var(--split)); }
.wx-cmp-label {
    position: absolute; top: 14px; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .68rem;
    font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; z-index: 4;
}
.wx-lbl-before { left: 14px; background: rgba(11,11,12,.8); color: #fff; }
.wx-lbl-after { right: 14px; background: #c7f000; color: #0b0b0c; }
.wx-cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; background: #c7f000; z-index: 5; pointer-events: none; }
.wx-cmp-handle::after {
    content: "⟺"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 40px; height: 40px; border-radius: 50%; background: #c7f000; color: #0b0b0c;
    display: grid; place-items: center; font-size: .9rem; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.wx-cmp-range {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; opacity: 0; cursor: ew-resize; margin: 0;
}
/* mock page innards */
.wx-mock { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; }
.wx-mock-nav { height: 26px; border-radius: 5px; }
.wx-mock-hero { flex: 1; border-radius: 7px; display: grid; place-items: center; text-align: center; padding: 12px; }
.wx-mock-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.wx-mock-row i { height: 34px; border-radius: 5px; display: block; }
.wx-old .wx-mock-nav { background: #d9d9d6; }
.wx-old .wx-mock-hero { background: #ececeb; color: #8a8a86; font-size: .8rem; }
.wx-old .wx-mock-row i { background: #e4e4e2; }
.wx-new .wx-mock-nav { background: #16161a; }
.wx-new .wx-mock-hero { background: linear-gradient(135deg,#16161a,#2b3a09); color: #c7f000; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: .95rem; }
.wx-new .wx-mock-row i { background: #eef3df; }
.wx-new .wx-mock-row i:first-child { background: #c7f000; }
.wx-cmp-note { max-width: 900px; margin: 16px auto 0; font-size: .84rem; color: #5b5b57; text-align: center; }

/* ---------- 4. LIGHTHOUSE METERS ---------- */
.wx-meters { background: #0b0b0c; padding: clamp(60px,7vw,96px) 20px; }
.wx-meter-list { max-width: 760px; margin: 0 auto; display: grid; gap: 22px; }
.wx-meter b { display: flex; justify-content: space-between; align-items: baseline; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .95rem; color: #fff; margin-bottom: 9px; }
.wx-meter b em { font-style: normal; font-size: 1.6rem; font-weight: 800; color: #c7f000; letter-spacing: -.03em; }
.wx-meter-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.wx-meter-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#7ea800,#c7f000); }
.wx-meter span { display: block; margin-top: 8px; font-size: .8rem; color: rgba(255,255,255,.48); }

/* ---------- 5. CLOSE ---------- */
.wx-close { background: #c7f000; padding: clamp(60px,8vw,104px) 20px; text-align: center; }
.wx-close h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #0b0b0c; font-size: clamp(1.7rem,3.6vw,2.7rem); letter-spacing: -.035em; margin-bottom: 14px; }
.wx-close p { color: rgba(11,11,12,.7); margin-bottom: 28px; font-size: 1.02rem; }
.wx-close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.wx-close .wx-btn { background: #0b0b0c; color: #c7f000; }
.wx-close .wx-btn:hover { background: #1c1c1f; }
.wx-close .sv-ghost { border-color: rgba(11,11,12,.3); color: #0b0b0c; background: rgba(11,11,12,.06); }
.wx-close .sv-ghost:hover { background: rgba(11,11,12,.12); }
@media (prefers-reduced-motion: reduce) { .wx-win { transition: none; } }

/* ==========================================================================
   59. SOCIAL CAMPAIGNS PAGE — bespoke (sx-). Archetypes ONLY here: phone feed
   grid, ad-creative gallery, SVG growth curve, ROAS leaderboard.
   Identity: magenta → orange.
   ========================================================================== */
.sx-hero { position: relative; overflow: hidden; padding: clamp(114px,13vh,158px) 20px clamp(54px,6vw,86px);
    background: radial-gradient(60% 46% at 84% 8%, rgba(236,72,153,.22), transparent 62%),
                radial-gradient(50% 42% at 8% 40%, rgba(249,115,22,.18), transparent 62%), #120a16; }
.sx-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,58px); align-items: center; }
.sx-pill { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
    font-family: 'Plus Jakarta Sans',sans-serif; font-size: .73rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: #fbcfe8; background: rgba(236,72,153,.16);
    border: 1px solid rgba(236,72,153,.4); padding: 9px 16px; border-radius: 999px; }
.sx-h1 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff;
    font-size: clamp(2.1rem,5.2vw,3.8rem); line-height: 1.02; letter-spacing: -.04em; margin-bottom: 18px; }
.sx-h1 span { background: linear-gradient(100deg,#f472b6,#fb923c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sx-lede { font-size: 1.04rem; line-height: 1.7; color: rgba(255,255,255,.66); max-width: 40ch; margin-bottom: 28px; }
.sx-btn { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .94rem; color: #fff;
    background: linear-gradient(120deg,#ec4899,#f97316); padding: 15px 28px; border-radius: 50px;
    box-shadow: 0 14px 32px rgba(236,72,153,.36); transition: transform .25s var(--fx-ease-spring); }
.sx-btn:hover { transform: translateY(-3px); }
.sx-link { display: inline-flex; align-items: center; gap: 7px; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .92rem; color: #fbcfe8; text-decoration: none; transition: gap .25s var(--fx-ease); }
.sx-link:hover { gap: 12px; color: #fff; }
.sx-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* phone with feed grid */
.sx-phone { max-width: 300px; margin: 0 auto; background: linear-gradient(160deg,#241428,#140b18);
    border: 1px solid rgba(255,255,255,.16); border-radius: 34px; padding: 12px;
    box-shadow: 0 40px 80px rgba(10,4,14,.6); }
.sx-phone-bar { display: flex; align-items: center; gap: 9px; padding: 6px 6px 12px; }
.sx-phone-bar i { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(120deg,#ec4899,#fb923c); display: grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 800; color: #fff; }
.sx-phone-bar b { color: #fff; font-size: .78rem; }
.sx-phone-bar span { margin-left: auto; font-size: .66rem; color: rgba(255,255,255,.45); }
.sx-feed3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; border-radius: 18px; overflow: hidden; }
.sx-feed3 img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.sx-phone-foot { display: flex; justify-content: space-around; padding: 12px 4px 4px; }
.sx-phone-foot i { width: 18px; height: 18px; border-radius: 5px; background: rgba(255,255,255,.14); }
@media (max-width: 900px) { .sx-hero-grid { grid-template-columns: 1fr; } .sx-lede { max-width: none; } }

/* ---------- creative gallery ---------- */
.sx-creatives { background: #fff; padding: clamp(60px,7vw,100px) 20px; }
.sx-cre-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; max-width: 1100px; margin: 0 auto; }
.sx-cre { border-radius: 16px; overflow: hidden; border: 1px solid rgba(18,10,22,.1); background: #fff;
    box-shadow: 0 10px 26px rgba(18,10,22,.08); transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease); }
.sx-cre:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(18,10,22,.16); }
.sx-cre-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.sx-cre-top i { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(120deg,#ec4899,#fb923c); flex: none; }
.sx-cre-top b { font-size: .74rem; color: #120a16; }
.sx-cre-top span { margin-left: auto; font-size: .64rem; color: #9a8fa0; }
.sx-cre img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.sx-cre-body { padding: 11px 12px 14px; }
.sx-cre-body p { margin: 0 0 9px; font-size: .78rem; line-height: 1.45; color: #453b4b; }
.sx-cre-cta { display: block; text-align: center; font-size: .72rem; font-weight: 800; padding: 8px; border-radius: 7px; background: #120a16; color: #fff; }
.sx-cre-metrics { display: flex; gap: 12px; margin-top: 9px; font-size: .68rem; color: #6b5f71; }
.sx-cre-metrics b { color: #ec4899; }
@media (max-width: 900px) { .sx-cre-grid { grid-template-columns: repeat(2,1fr); } }

/* ---------- growth curve ---------- */
.sx-growth { background: linear-gradient(160deg,#120a16,#1d0f22 60%,#2a1018); padding: clamp(60px,7vw,100px) 20px; }
.sx-growth-wrap { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(26px,4vw,52px); align-items: center; }
.sx-growth h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.5rem,3.2vw,2.3rem); letter-spacing: -.03em; margin-bottom: 14px; }
.sx-growth p { color: rgba(255,255,255,.64); line-height: 1.7; margin: 0 0 18px; }
.sx-growth-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .78rem; color: rgba(255,255,255,.6); }
.sx-growth-legend i { width: 11px; height: 3px; border-radius: 2px; display: inline-block; margin-right: 7px; vertical-align: 3px; }
.sx-chart-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 22px; }
.sx-chart-card svg { width: 100%; height: auto; display: block; }
.sx-chart-x { display: flex; justify-content: space-between; margin-top: 10px; font-size: .68rem; color: rgba(255,255,255,.4); }
@media (max-width: 880px) { .sx-growth-wrap { grid-template-columns: 1fr; } }

/* ---------- ROAS leaderboard ---------- */
.sx-roas { background: #fdf3f7; padding: clamp(60px,7vw,100px) 20px; }
.sx-roas-list { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.sx-roas-row { display: grid; grid-template-columns: 30px 1fr 120px 84px; gap: 16px; align-items: center;
    background: #fff; border: 1px solid rgba(18,10,22,.08); border-radius: 14px; padding: 15px 18px; }
.sx-roas-row b.rank { font-family: 'Plus Jakarta Sans',sans-serif; font-size: .9rem; color: #c4b0c8; }
.sx-roas-name b { display: block; font-size: .92rem; color: #120a16; }
.sx-roas-name span { display: block; font-size: .76rem; color: #7b6d80; }
.sx-roas-bar { display: block; height: 9px; border-radius: 999px; background: #f4e6ee; overflow: hidden; }
.sx-roas-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#ec4899,#fb923c); }
.sx-roas-val { text-align: right; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: 1.1rem; color: #120a16; }
.sx-roas-row.top { border-color: rgba(236,72,153,.4); box-shadow: 0 10px 26px rgba(236,72,153,.14); }
@media (max-width: 700px) { .sx-roas-row { grid-template-columns: 24px 1fr 70px; } .sx-roas-bar { display: none; } }

/* ---------- close ---------- */
.sx-close { background: linear-gradient(120deg,#ec4899,#f97316); padding: clamp(60px,8vw,104px) 20px; text-align: center; }
.sx-close h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.7rem,3.6vw,2.6rem); letter-spacing: -.035em; margin-bottom: 14px; }
.sx-close p { color: rgba(255,255,255,.85); margin-bottom: 28px; font-size: 1.02rem; }
.sx-close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.sx-close .sx-btn { background: #120a16; box-shadow: 0 12px 28px rgba(18,10,22,.3); }
.sx-close .sv-ghost { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
@media (prefers-reduced-motion: reduce) { .sx-cre, .sx-btn { transition: none; } }

/* ==========================================================================
   60. AUTOMATION PAGE — bespoke (ax-). Archetypes ONLY here: zig-zag
   alternating blocks with inline mini-diagrams, layered overlapping panels.
   Identity: deep navy + cyan.
   ========================================================================== */
.ax-hero { position: relative; overflow: hidden; color: #e6f6fb;
    padding: clamp(114px,13vh,158px) 20px clamp(56px,6vw,90px);
    background: radial-gradient(58% 46% at 78% 6%, rgba(34,211,238,.2), transparent 62%),
                radial-gradient(48% 40% at 6% 44%, rgba(59,130,246,.18), transparent 62%),
                linear-gradient(168deg,#050c1c,#0a1836 58%,#071426); }
.ax-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(34,211,238,.06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(34,211,238,.06) 1px, transparent 1px);
    background-size: 34px 34px; }
.ax-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,56px); align-items: center; }
.ax-pill { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
    font-family: 'Plus Jakarta Sans',sans-serif; font-size: .73rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: #a5f3fc; background: rgba(34,211,238,.12);
    border: 1px solid rgba(34,211,238,.36); padding: 9px 16px; border-radius: 6px; }
.ax-pill i { width: 7px; height: 7px; border-radius: 50%; background: #22d3ee; animation: heDotPulse 2.2s ease-out infinite; }
.ax-h1 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff;
    font-size: clamp(2.1rem,5.2vw,3.7rem); line-height: 1.03; letter-spacing: -.04em; margin-bottom: 18px; }
.ax-h1 span { background: linear-gradient(100deg,#22d3ee,#60a5fa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ax-lede { font-size: 1.04rem; line-height: 1.7; color: rgba(230,246,251,.66); max-width: 40ch; margin-bottom: 28px; }
.ax-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ax-btn { display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .94rem; color: #04202b;
    background: #22d3ee; padding: 15px 28px; border-radius: 8px;
    box-shadow: 0 14px 32px rgba(34,211,238,.28); transition: background .25s var(--fx-ease), transform .25s var(--fx-ease); }
.ax-btn:hover { background: #67e8f9; transform: translateY(-2px); }
.ax-link { display: inline-flex; align-items: center; gap: 7px; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .92rem; color: #a5f3fc; text-decoration: none; transition: gap .25s var(--fx-ease); }
.ax-link:hover { gap: 12px; color: #fff; }

/* hero run-log */
.ax-log { border-radius: 18px; padding: 20px; background: rgba(6,20,38,.7); border: 1px solid rgba(34,211,238,.24); backdrop-filter: blur(10px); box-shadow: 0 30px 66px rgba(2,8,20,.6); }
.ax-log-top { display: flex; align-items: center; gap: 9px; padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.1); }
.ax-log-top b { font-family: 'Plus Jakarta Sans',sans-serif; font-size: .84rem; color: #fff; }
.ax-log-top span { margin-left: auto; font-size: .68rem; color: #22d3ee; }
.ax-log-row { display: grid; grid-template-columns: 54px 20px 1fr; gap: 10px; align-items: start; padding: 9px 0; font-size: .82rem; }
.ax-log-row time { font-size: .7rem; color: rgba(230,246,251,.4); font-family: ui-monospace,monospace; }
.ax-log-row i { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-size: .6rem; font-weight: 800; background: rgba(34,211,238,.18); color: #22d3ee; }
.ax-log-row p { margin: 0; color: rgba(230,246,251,.78); line-height: 1.45; }
.ax-log-row p b { color: #fff; }
.ax-log-done { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); font-size: .74rem; color: #22d3ee; }
@media (max-width: 900px) { .ax-hero-grid { grid-template-columns: 1fr; } .ax-lede { max-width: none; } }

/* ---------- ZIG-ZAG BLOCKS ---------- */
.ax-zig { background: #f5f8fb; padding: clamp(56px,6vw,92px) 20px; }
.ax-zig-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,5vw,64px); align-items: center; max-width: 1060px; margin: 0 auto clamp(40px,5vw,72px); }
.ax-zig-row:last-child { margin-bottom: 0; }
.ax-zig-row:nth-child(even) .ax-zig-copy { order: 2; }
.ax-zig-num { display: inline-block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: #0e7490; background: #cffafe; padding: 6px 12px; border-radius: 6px; margin-bottom: 14px; }
.ax-zig-copy h3 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: clamp(1.3rem,2.6vw,1.9rem); letter-spacing: -.03em; color: #08203a; margin-bottom: 12px; }
.ax-zig-copy p { margin: 0 0 14px; color: #4a5f75; line-height: 1.7; font-size: .98rem; }
.ax-zig-copy ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ax-zig-copy li { position: relative; padding-left: 22px; font-size: .9rem; color: #4a5f75; }
.ax-zig-copy li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: #22d3ee; }
.ax-mini { background: #fff; border: 1px solid rgba(8,32,58,.09); border-radius: 18px; padding: 20px; box-shadow: 0 14px 34px rgba(8,32,58,.08); }
.ax-mini-step { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 11px; background: #f7fbfd; border: 1px solid rgba(8,32,58,.07); margin-bottom: 9px; }
.ax-mini-step:last-child { margin-bottom: 0; }
.ax-mini-step i { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-size: .62rem; font-weight: 800; color: #fff; background: linear-gradient(135deg,#0891b2,#3b82f6); }
.ax-mini-step b { display: block; font-size: .84rem; color: #08203a; }
.ax-mini-step span { display: block; font-size: .74rem; color: #6b7f94; }
.ax-mini-arrow { text-align: center; color: #22d3ee; font-size: .8rem; margin: -4px 0 5px; }
@media (max-width: 820px) {
    .ax-zig-row { grid-template-columns: 1fr; }
    .ax-zig-row:nth-child(even) .ax-zig-copy { order: 0; }
}

/* ---------- LAYERED TRIGGER/ACTION PANELS ---------- */
.ax-layers { position: relative; background: linear-gradient(160deg,#050c1c,#0a1836); padding: clamp(60px,7vw,100px) 20px; }
.ax-layer-stack { position: relative; max-width: 980px; margin: 0 auto; }
.ax-layer-b { position: absolute; inset: 26px -16px -20px; border-radius: 24px; background: linear-gradient(140deg,rgba(34,211,238,.14),rgba(59,130,246,.1)); }
.ax-layer-f { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; overflow: hidden; }
.ax-layer-f > div { background: #071426; padding: clamp(24px,3vw,34px); }
.ax-layer-f h3 { font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1rem; color: #fff; margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.ax-layer-f h3 em { font-style: normal; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #22d3ee; background: rgba(34,211,238,.14); padding: 4px 9px; border-radius: 5px; }
.ax-layer-f ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ax-layer-f li { position: relative; padding-left: 24px; font-size: .9rem; line-height: 1.55; color: rgba(230,246,251,.66); }
.ax-layer-f li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; }
@media (max-width: 760px) { .ax-layer-f { grid-template-columns: 1fr; } }

/* ---------- close ---------- */
.ax-close { background: #050c1c; padding: clamp(60px,8vw,104px) 20px; text-align: center; }
.ax-close h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.7rem,3.6vw,2.6rem); letter-spacing: -.035em; margin-bottom: 14px; }
.ax-close p { color: rgba(230,246,251,.6); margin-bottom: 28px; font-size: 1.02rem; }
.ax-close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
@media (prefers-reduced-motion: reduce) { .ax-pill i { animation: none; } }

/* ==========================================================================
   61. SERVICES INDEX GRID (services.html) — links out to each dedicated
   service page, including the two the page never had sections for.
   ========================================================================== */
.svcx { background: linear-gradient(180deg,#0b1226,#0a0f1e); padding: clamp(60px,7vw,100px) 20px; }
.svcx-head { text-align: center; max-width: 640px; margin: 0 auto clamp(32px,4vw,50px); }
.svcx-head h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.5rem,3.2vw,2.3rem); letter-spacing: -.03em; margin-bottom: 12px; }
.svcx-head p { color: rgba(255,255,255,.62); line-height: 1.65; margin: 0; }
.svcx-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; max-width: 1120px; margin: 0 auto; }
.svcx-card {
    position: relative; display: flex; flex-direction: column; text-decoration: none;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px; padding: 22px 20px; overflow: hidden;
    transition: transform .3s var(--fx-ease), border-color .3s var(--fx-ease), background .3s var(--fx-ease);
}
.svcx-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.08); border-color: rgba(110,231,183,.45); }
.svcx-card i { font-style: normal; font-size: 1.5rem; line-height: 1; margin-bottom: 14px; }
.svcx-card b { font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1rem; color: #fff; margin-bottom: 6px; }
.svcx-card span { font-size: .84rem; line-height: 1.55; color: rgba(255,255,255,.58); flex: 1; }
.svcx-go { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-size: .8rem; font-weight: 700; color: #6ee7b7; transition: gap .25s var(--fx-ease); }
.svcx-card:hover .svcx-go { gap: 12px; }
.svcx-card-wide { grid-column: span 2; background: linear-gradient(130deg, rgba(37,99,235,.22), rgba(6,214,160,.16)); border-color: rgba(110,231,183,.3); }
@media (max-width: 980px) { .svcx-grid { grid-template-columns: repeat(2,1fr); } .svcx-card-wide { grid-column: span 2; } }
@media (max-width: 560px) { .svcx-grid { grid-template-columns: 1fr; } .svcx-card-wide { grid-column: span 1; } }
@media (prefers-reduced-motion: reduce) { .svcx-card { transition: none; } }

/* header: "all services" link inside the mega-menu column */
.mn-link-all {
    margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);
    font-weight: 800 !important; color: #06d6a0 !important;
}

/* ==========================================================================
   62. MEGA-MENU FIT — the services column grew to 7 links, which pushed the
   desktop panel past short laptop viewports and overflowed the fixed
   max-height used by the mobile accordion. Tighter rows, a viewport-aware
   cap with internal scrolling, and a content-sized mobile accordion.
   ========================================================================== */

/* --- desktop: tighter rows so all 7 services fit --- */
@media (min-width: 993px) {
    .mn-panel-inner { padding: 16px; gap: 18px; }
    .mn-col-label { margin-bottom: 6px; font-size: .64rem; }
    .mn-link { padding: 6px 9px; gap: 9px; border-radius: 9px; }
    .mn-link b { font-size: .86rem; line-height: 1.25; }
    .mn-link i { font-size: .73rem; line-height: 1.25; }
    .mn-link-plain { padding: 5px 9px; font-size: .84rem; }
    .mn-link-all { margin-top: 6px; padding-top: 9px; }

    /* never taller than the space under the header — scroll inside if it is */
    .mn-panel-inner {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .mn-panel-inner::-webkit-scrollbar { width: 8px; }
    .mn-panel-inner::-webkit-scrollbar-thumb { background: #d8dee9; border-radius: 999px; }

    /* the feature tile doesn't need to be full height once rows are tighter */
    .mn-feature { padding: 16px; }
    .mn-feature strong { font-size: .95rem; }
    .mn-feature-note { font-size: .78rem; line-height: 1.4; }
}

/* --- mobile: accordion sized to its content, drawer scrolls --- */
@media (max-width: 992px) {
    /* grid-rows trick animates to the real content height — no magic number
       that silently clips the last links the way max-height:760px did */
    .mn-panel {
        display: grid; grid-template-rows: 0fr;
        max-height: none;
        transition: grid-template-rows .35s var(--fx-ease);
    }
    .mn-item.is-open .mn-panel { grid-template-rows: 1fr; max-height: none; }
    .mn-panel > .mn-panel-inner { min-height: 0; overflow: hidden; }

    /* the base mobile drawer in style.css is a fixed 200px-wide dropdown built
       for the old simple nav — far too narrow for mega-menu rows with icons and
       two-line labels, so the text was being cut off at the right edge */
    .nav-links.mega-nav {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        /* 7 services + company + CTA is taller than a phone viewport */
        max-height: calc(100vh - 84px);
        max-height: calc(100dvh - 84px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 18px;
    }
    /* tighter rows so more fits before scrolling is needed */
    .mn-panel-inner { gap: 10px; padding: 4px 4px 10px; }
    .mega-nav a.mn-link { padding: 8px 10px; gap: 10px; }
    .mn-link b { font-size: .88rem; }
    .mn-link i { font-size: .75rem; }
    .mn-col-label { margin-bottom: 4px; }
    /* the promo tile costs a lot of height on a phone */
    .mn-feature { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mn-panel { transition: none; }
}

/* ==========================================================================
   63. MEGA-MENU — FIT WITHOUT SCROLLING. Seven services stacked in one column
   made the panel taller than short laptop viewports, so it fell back to an
   internal scrollbar. Splitting the services into two columns halves the
   height and removes the scroll entirely.
   ========================================================================== */
@media (min-width: 993px) {
    /* wider first column so services can sit two-up */
    .mn-panel-3 {
        grid-template-columns: minmax(415px, 1.42fr) minmax(215px, .74fr) minmax(190px, .74fr);
    }
    .mn-panel-inner { max-width: 985px; }
    /* enough room for the longest "Built for" entry without clipping it */
    .mn-panel-3 .mn-col:nth-child(2) .mn-link-plain { line-height: 1.3; }

    /* services column becomes a 2-up grid */
    .mn-panel-3 .mn-col:first-child {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px 8px;
        align-content: start;
    }
    .mn-panel-3 .mn-col:first-child > .mn-col-label,
    .mn-panel-3 .mn-col:first-child > .mn-link-all { grid-column: 1 / -1; }

    /* tighter type + icons so two-up rows stay compact */
    .mn-panel-inner { padding: 14px; gap: 16px; }
    .mn-link { padding: 5px 8px; gap: 8px; }
    .mn-link b { font-size: .81rem; line-height: 1.2; }
    .mn-link i { font-size: .69rem; line-height: 1.2; }
    .mn-col-label { font-size: .61rem; margin-bottom: 5px; padding-left: 8px; }
    .mn-link-plain { padding: 4px 8px; font-size: .81rem; }
    .mn-link-all { margin-top: 4px; padding-top: 7px; font-size: .82rem; }

    .mn-feature { padding: 14px; }
    .mn-feature strong { font-size: .9rem; }
    .mn-feature-note { font-size: .74rem; line-height: 1.35; }
    .mn-feature-tag { font-size: .6rem; }

    /* with two columns it should now fit outright — keep a scroll only as a
       last resort on very short screens */
    .mn-panel-inner { max-height: calc(100vh - 118px); }

    /* the 2-column Company panel doesn't need the extra width */
    .mn-panel-2 { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
}

/* ==========================================================================
   64. HOMEPAGE "OUR SERVICES" — interactive showcase (hx-). A list of all
   seven services on the left morphs a large themed preview on the right as
   you hover; each carries its own service-page accent. Replaces the old
   six-card grid (which showed only 5 services, two of them duplicated).
   ========================================================================== */
.hx-wrap { position: relative; z-index: 1; }
.hx-head { text-align: center; max-width: 640px; margin: 0 auto clamp(20px,2.4vw,30px); }
.hx-eyebrow {
    display: inline-block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .72rem;
    font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #1e40af; margin-bottom: 8px;
}
.hx-title { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #0b1226;
    font-size: clamp(1.6rem,3.2vw,2.4rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 8px; }
.hx-title span { background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hx-sub { color: #4a5670; font-size: .98rem; line-height: 1.55; margin: 0; }

.hx-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(20px,2.5vw,34px); align-items: stretch; max-width: 1120px; margin: 0 auto; }

/* --- list of services --- */
.hx-list { display: flex; flex-direction: column; gap: 6px; }
.hx-row {
    --acc: #2563eb;
    display: grid; grid-template-columns: 26px 36px 1fr 22px; align-items: center; gap: 13px;
    padding: 11px 16px; border-radius: 13px; text-decoration: none;
    background: rgba(255,255,255,.6); border: 1px solid rgba(15,23,42,.08);
    transition: background .3s var(--fx-ease), border-color .3s var(--fx-ease), transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease);
}
.hx-row-main { min-width: 0; }
.hx-row-n { font-family: 'Plus Jakarta Sans',sans-serif; font-size: .82rem; font-weight: 800; color: #b6c0d4; transition: color .3s var(--fx-ease); }
.hx-row-main b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.02rem; font-weight: 700; color: #0b1226; line-height: 1.25; letter-spacing: -.01em; }
.hx-row-main span { display: block; font-size: .82rem; color: #6b7794; margin-top: 2px; }
.hx-row-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 1rem;
    background: #fff; border: 1px solid rgba(15,23,42,.07); transition: transform .3s var(--fx-ease-spring); }
.hx-row-go { color: #b6c0d4; display: grid; place-items: center; transition: color .3s var(--fx-ease), transform .3s var(--fx-ease); }
.hx-row:hover, .hx-row.is-active {
    background: #fff; border-color: color-mix(in srgb, var(--acc) 45%, transparent);
    transform: translateX(4px); box-shadow: 0 12px 30px rgba(15,23,42,.09);
}
.hx-row.is-active .hx-row-n { color: var(--acc); }
.hx-row.is-active .hx-row-ic { transform: scale(1.08) rotate(-4deg); }
.hx-row.is-active .hx-row-go { color: var(--acc); transform: translateX(3px); }

/* --- morphing preview --- */
.hx-preview {
    --acc: #2563eb; --acc2: #06d6a0;
    position: relative; overflow: hidden; border-radius: 20px; min-height: 340px;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(22px,2.6vw,30px); color: #fff;
    background: linear-gradient(150deg, #0b1226 0%, color-mix(in srgb, var(--acc) 55%, #0b1226) 100%);
    box-shadow: 0 30px 70px rgba(11,18,38,.28);
    transition: background .5s var(--fx-ease);
}
.hx-preview::before {
    content: ""; position: absolute; top: -80px; right: -60px; width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--acc2) 55%, transparent), transparent 68%);
    transition: transform .6s var(--fx-ease);
}
.hx-preview.is-swap::before { transform: scale(1.15) rotate(12deg); }
.hx-pv-ic {
    position: relative; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
    font-size: 1.7rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    margin-bottom: auto; backdrop-filter: blur(6px);
}
.hx-pv-body { position: relative; margin-top: 18px; }
.hx-pv-num { display: inline-block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.55); margin-bottom: 9px; }
.hx-pv-name { font-family: 'Plus Jakarta Sans',sans-serif; font-size: clamp(1.4rem,2.4vw,1.85rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin-bottom: 8px; }
.hx-pv-desc { font-size: .96rem; line-height: 1.55; color: rgba(255,255,255,.8); max-width: 44ch; margin-bottom: 15px; }
.hx-pv-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.hx-pv-chips span { font-size: .78rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); padding: 7px 13px; border-radius: 999px; }
.hx-pv-cta {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; text-decoration: none;
    font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .92rem; color: #0b1226;
    background: #fff; padding: 13px 24px; border-radius: 50px;
    transition: gap .25s var(--fx-ease), transform .25s var(--fx-ease-spring), box-shadow .25s var(--fx-ease);
}
.hx-pv-cta:hover { gap: 12px; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.28); }
/* fade content on swap */
.hx-pv-fade { animation: hxFade .45s var(--fx-ease); }
@keyframes hxFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- footer strip: all services + CTA --- */
.hx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin: clamp(18px,2vw,26px) auto 0; }
.hx-foot p { margin: 0; color: #4a5670; font-size: .95rem; }
.hx-foot p b { color: #0b1226; }

@media (max-width: 900px) {
    .hx-grid { grid-template-columns: 1fr; }
    /* on mobile the preview is redundant — rows carry everything and navigate directly */
    .hx-preview { display: none; }
    .hx-row { grid-template-columns: 24px 34px 1fr 20px; padding: 14px 15px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .hx-row, .hx-preview, .hx-preview::before, .hx-row-ic, .hx-pv-cta { transition: none; }
    .hx-pv-fade { animation: none; }
}

/* ==========================================================================
   65. HOMEPAGE "WHY FUNNELUX" — split editorial (wy-). A dark live status
   board on the left literally shows the "can't afford downtime" promise;
   the reasons sit on the right as three themed capability lists with hairline
   dividers — no card grid. Replaces the old 9-card bento.
   ========================================================================== */
.wy-section {
    position: relative; overflow: hidden;
    background:
        radial-gradient(50% 40% at 6% 8%, rgba(37,99,235,.1), transparent 60%),
        radial-gradient(46% 40% at 96% 96%, rgba(6,214,160,.1), transparent 62%),
        linear-gradient(180deg,#f6f9ff 0%,#eef3fb 100%);
    padding: clamp(46px,5vw,72px) 0;
}
.wy-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(26px,3.5vw,52px); align-items: stretch; max-width: 1120px; margin: 0 auto; }

/* --- left: live status board --- */
.wy-board {
    position: relative; overflow: hidden; border-radius: 22px; color: #fff;
    padding: clamp(24px,3vw,34px);
    background: linear-gradient(158deg,#0b1226 0%,#10224a 60%,#08211f 100%);
    box-shadow: 0 30px 70px rgba(11,18,38,.3);
    display: flex; flex-direction: column;
}
.wy-board::before {
    content: ""; position: absolute; top: -70px; right: -50px; width: 250px; height: 250px; border-radius: 50%;
    background: radial-gradient(circle, rgba(6,214,160,.28), transparent 68%); pointer-events: none;
}
.wy-board-eyebrow { position: relative; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #6ee7b7; margin-bottom: 12px; }
.wy-board h2 { position: relative; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.5rem,2.8vw,2.15rem); line-height: 1.12; letter-spacing: -.03em; margin-bottom: 12px; }
.wy-board p { position: relative; color: rgba(255,255,255,.66); font-size: .96rem; line-height: 1.6; margin: 0 0 22px; }
.wy-status { position: relative; display: grid; gap: 10px; margin-bottom: 22px; }
.wy-status li { list-style: none; display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.wy-status .dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #06d6a0; box-shadow: 0 0 0 0 rgba(6,214,160,.6); animation: heDotPulse 2.4s ease-out infinite; }
.wy-status li:nth-child(2) .dot { animation-delay: .5s; }
.wy-status li:nth-child(3) .dot { animation-delay: 1s; }
.wy-status li:nth-child(4) .dot { animation-delay: 1.5s; }
.wy-status b { font-size: .88rem; font-weight: 600; color: #fff; }
.wy-status span { margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #6ee7b7; }
.wy-board-metric { position: relative; margin-top: auto; display: flex; align-items: baseline; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.wy-board-metric b { font-family: 'Plus Jakarta Sans',sans-serif; font-size: clamp(2rem,3.4vw,2.7rem); font-weight: 800; letter-spacing: -.03em; background: linear-gradient(120deg,#fff,#6ee7b7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.wy-board-metric span { font-size: .84rem; color: rgba(255,255,255,.6); line-height: 1.35; }

/* --- right: grouped capability lists --- */
.wy-groups { display: flex; flex-direction: column; gap: clamp(18px,2vw,26px); }
.wy-group-label {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px;
    font-family: 'Plus Jakarta Sans',sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--g, #1e40af);
}
.wy-group-label i { width: 7px; height: 7px; border-radius: 50%; background: var(--g, #1e40af); }
.wy-item {
    --g: #1e40af;
    display: grid; grid-template-columns: 42px 1fr; gap: 15px; align-items: start;
    padding: 12px 12px 12px 14px; border-radius: 12px; position: relative;
    border-bottom: 1px solid rgba(15,23,42,.08);
    transition: background .28s var(--fx-ease), transform .28s var(--fx-ease);
}
.wy-item::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
    background: var(--g); transform: scaleY(0); transform-origin: top; transition: transform .3s var(--fx-ease);
}
.wy-item:hover { background: #fff; transform: translateX(4px); box-shadow: 0 10px 26px rgba(15,23,42,.07); border-bottom-color: transparent; }
.wy-item:hover::before { transform: scaleY(1); }
.wy-item-ic {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    color: var(--g); background: color-mix(in srgb, var(--g) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--g) 22%, transparent);
    transition: transform .3s var(--fx-ease-spring);
}
.wy-item:hover .wy-item-ic { transform: scale(1.08) rotate(-4deg); }
.wy-item b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .98rem; font-weight: 700; color: #0b1226; margin-bottom: 3px; letter-spacing: -.01em; }
.wy-item p { margin: 0; font-size: .86rem; line-height: 1.5; color: #56617a; }
.wy-group-items { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }

@media (max-width: 900px) {
    .wy-grid { grid-template-columns: 1fr; }
    .wy-group-items { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .wy-status .dot { animation: none; }
    .wy-item, .wy-item::before, .wy-item-ic { transition: none; }
}
/* uptime history strip inside the status board */
.wy-uptime { position: relative; margin-top: 20px; }
.wy-uptime-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.wy-uptime-head span { font-size: .74rem; color: rgba(255,255,255,.5); }
.wy-uptime-head b { font-family: 'Plus Jakarta Sans',sans-serif; font-size: .82rem; font-weight: 800; color: #6ee7b7; }
.wy-uptime-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.wy-uptime-bars span { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(180deg,#34d399,#0f9d76); opacity: .85; }
.wy-uptime-bars span.dip { background: linear-gradient(180deg,#fbbf24,#d97706); height: 66%; }

/* ==========================================================================
   66. HOMEPAGE "CLIENT WORK" — compact interactive gallery (cw-). One large
   stage shows the active client (real screenshot + logo + services + metrics
   + testimonial); a thumbnail strip switches between all six. Replaces the
   4,300px stack of alternating left/right project blocks.
   ========================================================================== */
.cw-section {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg,#0a0f1e 0%,#0b1428 55%,#0a1220 100%);
    padding: clamp(34px,3.6vw,52px) 0; color: #fff;
}
.cw-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(8px); }
.cw-glow-1 { width: 460px; height: 460px; top: -180px; left: -120px; background: radial-gradient(circle, rgba(37,99,235,.2), transparent 68%); }
.cw-glow-2 { width: 420px; height: 420px; bottom: -200px; right: -120px; background: radial-gradient(circle, rgba(6,214,160,.16), transparent 70%); }
.cw-section .container { position: relative; z-index: 1; }

.cw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin-bottom: clamp(16px,2vw,24px); max-width: 1080px; margin-left: auto; margin-right: auto; }
.cw-head-l { max-width: 620px; }
.cw-badge { display: inline-flex; align-items: center; gap: 8px; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #6ee7b7; background: rgba(6,214,160,.1); border: 1px solid rgba(6,214,160,.28); padding: 8px 15px; border-radius: 999px; margin-bottom: 14px; }
.cw-head h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.5rem,3vw,2.1rem); line-height: 1.08; letter-spacing: -.03em; margin-bottom: 6px; }
.cw-head p { color: rgba(255,255,255,.6); font-size: .98rem; line-height: 1.55; margin: 0; }
.cw-count { font-family: 'Plus Jakarta Sans',sans-serif; text-align: right; flex: none; }
.cw-count b { display: block; font-size: clamp(2rem,3.4vw,2.8rem); font-weight: 800; letter-spacing: -.03em; background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.cw-count span { display: block; font-size: .8rem; color: rgba(255,255,255,.5); margin-top: 4px; }

/* --- stage --- */
.cw-stage { --acc: #2563eb; display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(20px,2.6vw,34px); align-items: start; max-width: 1080px; margin: 0 auto; }
.cw-shot { display: block; position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #0d1526; box-shadow: 0 30px 66px rgba(2,8,20,.5); }
.cw-shot-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); }
.cw-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
.cw-shot-bar span { margin-left: 10px; font-size: .74rem; color: rgba(255,255,255,.5); }
.cw-shot-img { display: block; position: relative; height: clamp(300px, 40vh, 372px); overflow: hidden; }
.cw-shot-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cw-visit { display: flex; position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; padding: 16px;
    background: linear-gradient(to top, rgba(6,12,26,.55), transparent 45%); opacity: 0; transition: opacity .3s var(--fx-ease); }
.cw-shot:hover .cw-visit { opacity: 1; }
.cw-visit a { display: inline-flex; align-items: center; gap: 7px; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .82rem; font-weight: 700; color: #0b1226; background: #fff; padding: 9px 16px; border-radius: 999px; text-decoration: none; }

.cw-detail { display: flex; flex-direction: column; }
.cw-shot { align-self: stretch; }
.cw-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cw-logo { height: 30px; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.cw-logo-mono { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; background: var(--fx-brand-grad); }
.cw-meta { font-size: .8rem; color: rgba(255,255,255,.55); }
.cw-meta b { display: block; color: #fff; font-size: .92rem; font-weight: 700; }
.cw-quote { position: relative; font-family: 'Plus Jakarta Sans',sans-serif; font-size: clamp(1rem,1.55vw,1.2rem); line-height: 1.4; font-weight: 600; letter-spacing: -.01em; color: #fff; margin: 0 0 14px; padding-left: 16px; border-left: 3px solid var(--acc); }
.cw-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.cw-chips span { font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); padding: 6px 12px; border-radius: 999px; }
.cw-metrics { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.cw-metrics div b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--acc); line-height: 1; }
.cw-metrics div b.lite { background: linear-gradient(120deg,#fff,#6ee7b7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cw-metrics div span { display: block; font-size: .76rem; color: rgba(255,255,255,.55); margin-top: 5px; }
.cw-fade { animation: hxFade .45s var(--fx-ease); }

/* --- thumbnail strip --- */
.cw-thumbs { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; margin-top: clamp(14px,1.8vw,20px); max-width: 1080px; margin-left: auto; margin-right: auto; }
.cw-thumb { position: relative; cursor: pointer; border: none; padding: 0; background: none; border-radius: 12px; overflow: hidden;
    outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .25s var(--fx-ease), transform .25s var(--fx-ease); }
.cw-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: top; display: block; filter: grayscale(.4) brightness(.7); transition: filter .3s var(--fx-ease); }
.cw-thumb::after { content: attr(data-label); position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 7px; font-size: .68rem; font-weight: 700; color: #fff; text-align: center;
    background: linear-gradient(to top, rgba(6,12,26,.9), transparent); opacity: 0; transition: opacity .3s var(--fx-ease); }
.cw-thumb:hover, .cw-thumb.is-active { transform: translateY(-3px); }
.cw-thumb:hover img, .cw-thumb.is-active img { filter: none; }
.cw-thumb:hover::after, .cw-thumb.is-active::after { opacity: 1; }
.cw-thumb.is-active { outline-color: var(--acc, #06d6a0); }

@media (max-width: 860px) {
    .cw-stage { grid-template-columns: 1fr; }
    .cw-thumbs { grid-template-columns: repeat(3,1fr); }
    .cw-count { display: none; }
}
@media (max-width: 480px) { .cw-thumbs { grid-template-columns: repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce) { .cw-thumb, .cw-thumb img, .cw-visit { transition: none; } .cw-fade { animation: none; } }
/* visible "visit site" link in the client-work detail panel */
.cw-visit-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 4px 0 2px;
    font-family: 'Plus Jakarta Sans',sans-serif; font-size: .88rem; font-weight: 700; color: var(--acc); text-decoration: none;
    transition: gap .25s var(--fx-ease); }
.cw-visit-link:hover { gap: 12px; }
/* auto-rotate progress cue on the active client thumbnail */
.cw-thumb.is-active::before {
    content: ""; position: absolute; left: 0; bottom: 0; height: 3px; z-index: 3; width: 0;
    background: var(--acc, #06d6a0); border-radius: 0 3px 3px 0;
    animation: cwProg var(--cw-dur, 4500ms) linear forwards;
}
.cw-thumbs.is-paused .cw-thumb.is-active::before { animation-play-state: paused; }
@keyframes cwProg { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cw-thumb.is-active::before { display: none; } }

/* ==========================================================================
   67. HOMEPAGE "SEE IT WORKING" — horizontal expanding video accordion (va-).
   Seven panels; the active one expands and plays its clip while the rest
   collapse to labelled strips. Auto-cycles when idle, pauses on hover.
   Replaces the flat 4-card video grid.
   ========================================================================== */
.va-section { position: relative; overflow: hidden; background: linear-gradient(180deg,#070c18 0%,#0b1428 60%,#080f1c 100%); padding: clamp(40px,4.4vw,64px) 0; color: #fff; }
.va-head { text-align: center; max-width: 640px; margin: 0 auto clamp(22px,2.6vw,34px); }
.va-eyebrow { display: inline-block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #6ee7b7; margin-bottom: 10px; }
.va-head h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #fff; font-size: clamp(1.5rem,3vw,2.2rem); line-height: 1.1; letter-spacing: -.03em; margin-bottom: 8px; }
.va-head p { color: rgba(255,255,255,.6); font-size: .96rem; line-height: 1.5; margin: 0; }

.va-strip {
    display: flex; gap: 10px; max-width: 1140px; margin: 0 auto;
    height: clamp(320px, 42vh, 440px);
}
.va-panel {
    --acc: #06d6a0;
    position: relative; flex: 0.62; min-width: 0; border-radius: 16px; overflow: hidden;
    cursor: pointer; background: #0d1526; border: 1px solid rgba(255,255,255,.1);
    transition: flex .6s var(--fx-ease-spring), box-shadow .4s var(--fx-ease);
}
.va-panel.is-active { flex: 3.2; box-shadow: 0 26px 60px rgba(2,8,20,.5); border-color: color-mix(in srgb, var(--acc) 45%, transparent); }
.va-panel video, .va-panel .va-poster {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(.5) brightness(.5); transition: filter .5s var(--fx-ease), transform .8s var(--fx-ease);
}
.va-panel.is-active video, .va-panel.is-active .va-poster { filter: none; }
.va-panel .va-poster { z-index: 0; }
.va-panel video { z-index: 1; opacity: 0; transition: opacity .5s var(--fx-ease); }
.va-panel.is-active video { opacity: 1; }
.va-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(6,12,26,.9) 0%, rgba(6,12,26,.35) 45%, transparent 75%); }
.va-panel.is-active .va-scrim { background: linear-gradient(105deg, rgba(6,12,26,.82) 0%, rgba(6,12,26,.45) 42%, transparent 72%); }

/* collapsed: vertical label */
.va-tab { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 16px 12px; display: flex; align-items: center; gap: 10px; }
.va-num { font-family: 'Plus Jakarta Sans',sans-serif; font-size: .74rem; font-weight: 800; color: var(--acc); }
.va-vert { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: .92rem; letter-spacing: .02em; color: #fff; white-space: nowrap; position: absolute; left: 14px; bottom: 46px; transition: opacity .3s var(--fx-ease); }
.va-panel.is-active .va-vert { opacity: 0; }
.va-panel.is-active .va-tab { opacity: 0; pointer-events: none; }
.va-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: .9rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }

/* expanded: full caption */
.va-body { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: clamp(18px,2vw,26px); opacity: 0; transform: translateY(10px); transition: opacity .4s .15s var(--fx-ease), transform .4s .15s var(--fx-ease); pointer-events: none; }
.va-panel.is-active .va-body { opacity: 1; transform: none; pointer-events: auto; }
.va-tag { display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #04231a; background: var(--acc); padding: 5px 11px; border-radius: 999px; margin-bottom: 12px; }
.va-tag i { width: 6px; height: 6px; border-radius: 50%; background: #04231a; animation: heDotPulse 1.6s ease-out infinite; }
.va-body h3 { font-family: 'Plus Jakarta Sans',sans-serif; font-size: clamp(1.2rem,1.9vw,1.6rem); font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: 6px; }
.va-body p { font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.8); margin: 0 0 12px; max-width: 40ch; }
.va-link { display: inline-flex; align-items: center; gap: 7px; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .84rem; font-weight: 700; color: #fff; text-decoration: none; transition: gap .25s var(--fx-ease); }
.va-link:hover { gap: 11px; }
/* progress bar on active while auto-cycling */
.va-prog { position: absolute; z-index: 4; left: 0; top: 0; height: 3px; width: 0; background: var(--acc); }
.va-panel.is-active .va-prog { animation: cwProg var(--va-dur, 3800ms) linear forwards; }
.va-strip.is-paused .va-panel.is-active .va-prog { animation-play-state: paused; }

@media (max-width: 820px) {
    .va-strip { flex-direction: column; height: auto; }
    .va-panel { flex: none; height: 74px; }
    .va-panel.is-active { flex: none; height: clamp(240px,52vw,300px); }
    .va-vert { writing-mode: horizontal-tb; transform: none; position: static; }
    .va-tab { padding: 0 16px; height: 74px; }
    .va-panel.is-active .va-tab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .va-panel, .va-panel video, .va-panel .va-poster, .va-body { transition: none; }
    .va-panel.is-active .va-prog, .va-tag i { animation: none; }
}

/* ==========================================================================
   68. HOMEPAGE "TRUSTED GROWTH PARTNER" — trust pillars + an animated 90-day
   growth journey chart (tp-). The line draws itself and milestone markers pop
   in sequence when the card scrolls into view. Replaces the hub-and-spoke
   diagram whose content duplicated the Services / Why-FunnelUX sections.
   ========================================================================== */
.tp-section { position: relative; overflow: hidden; background: linear-gradient(180deg,#f6f9ff 0%,#eef3fb 100%); padding: clamp(44px,4.6vw,68px) 0; }
.tp-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(6px); }
.tp-glow-1 { width: 420px; height: 420px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(37,99,235,.12), transparent 66%); }
.tp-glow-2 { width: 380px; height: 380px; bottom: -180px; left: -120px; background: radial-gradient(circle, rgba(6,214,160,.12), transparent 68%); }
.tp-section .container { position: relative; z-index: 1; }
.tp-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(26px,3.5vw,52px); align-items: center; max-width: 1120px; margin: 0 auto; }

/* left copy + pillars */
.tp-eyebrow { display: inline-block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #1e40af; margin-bottom: 12px; }
.tp-h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; color: #0b1226; font-size: clamp(1.6rem,3.2vw,2.35rem); line-height: 1.12; letter-spacing: -.03em; margin-bottom: 12px; }
.tp-h2 span { background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tp-lede { color: #4a5670; font-size: 1rem; line-height: 1.6; margin: 0 0 22px; max-width: 44ch; }
.tp-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-bottom: 24px; }
.tp-pillar { display: flex; gap: 11px; align-items: flex-start; }
.tp-pillar i { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #0f9d76; background: rgba(6,214,160,.12); border: 1px solid rgba(6,214,160,.24); }
.tp-pillar b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .9rem; color: #0b1226; margin-bottom: 2px; }
.tp-pillar span { display: block; font-size: .8rem; line-height: 1.45; color: #56617a; }

/* right: growth journey card */
.tp-card { position: relative; border-radius: 22px; overflow: hidden; padding: clamp(20px,2.4vw,28px); color: #fff;
    background: linear-gradient(155deg,#0b1226 0%,#12224a 62%,#08211f 100%); box-shadow: 0 30px 68px rgba(11,18,38,.26); }
.tp-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tp-card-head b { font-family: 'Plus Jakarta Sans',sans-serif; font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.8); }
.tp-card-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 800; color: #6ee7b7; background: rgba(6,214,160,.12); border: 1px solid rgba(6,214,160,.3); padding: 5px 11px; border-radius: 999px; }
.tp-card-badge i { width: 6px; height: 6px; border-radius: 50%; background: #06d6a0; animation: heDotPulse 2.2s ease-out infinite; }
.tp-chart { position: relative; width: 100%; }
.tp-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.tp-grid-line { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.tp-area { fill: url(#tpFill); opacity: 0; transition: opacity .8s .5s var(--fx-ease); }
.tp-line { fill: none; stroke: url(#tpStroke); stroke-width: 3.5; stroke-linecap: round;
    stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.tp-dot { opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box; }
.tp-dot-core { fill: #6ee7b7; }
.tp-dot-ring { fill: none; stroke: #6ee7b7; stroke-width: 2; opacity: .5; }
/* draw-in when the card is revealed */
.tp-card.is-revealed .tp-line { animation: tpDraw 1.8s var(--fx-ease) forwards; }
.tp-card.is-revealed .tp-area { opacity: 1; }
.tp-card.is-revealed .tp-dot { animation: tpPop .5s var(--fx-ease-spring) forwards; }
.tp-card.is-revealed .tp-dot-1 { animation-delay: .5s; }
.tp-card.is-revealed .tp-dot-2 { animation-delay: .85s; }
.tp-card.is-revealed .tp-dot-3 { animation-delay: 1.2s; }
.tp-card.is-revealed .tp-dot-4 { animation-delay: 1.55s; }
.tp-card.is-revealed .tp-dot-5 { animation-delay: 1.9s; }
@keyframes tpDraw { to { stroke-dashoffset: 0; } }
@keyframes tpPop { to { opacity: 1; transform: scale(1); } }
.tp-milestones { display: flex; justify-content: space-between; margin-top: 14px; }
.tp-ms { text-align: center; flex: 1; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--fx-ease), transform .4s var(--fx-ease); }
.tp-card.is-revealed .tp-ms { opacity: 1; transform: none; }
.tp-card.is-revealed .tp-ms:nth-child(1) { transition-delay: .5s; }
.tp-card.is-revealed .tp-ms:nth-child(2) { transition-delay: .85s; }
.tp-card.is-revealed .tp-ms:nth-child(3) { transition-delay: 1.2s; }
.tp-card.is-revealed .tp-ms:nth-child(4) { transition-delay: 1.55s; }
.tp-card.is-revealed .tp-ms:nth-child(5) { transition-delay: 1.9s; }
.tp-ms b { display: block; font-family: 'Plus Jakarta Sans',sans-serif; font-size: .78rem; font-weight: 800; color: #6ee7b7; }
.tp-ms span { display: block; font-size: .66rem; color: rgba(255,255,255,.55); margin-top: 2px; line-height: 1.3; }
.tp-card-foot { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.tp-card-foot b { font-family: 'Plus Jakarta Sans',sans-serif; font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(120deg,#fff,#6ee7b7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.tp-card-foot span { font-size: .82rem; color: rgba(255,255,255,.6); }

@media (max-width: 900px) { .tp-grid { grid-template-columns: 1fr; } .tp-lede { max-width: none; } }
@media (max-width: 460px) { .tp-pillars { grid-template-columns: 1fr; } .tp-ms span { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .tp-line { stroke-dashoffset: 0; }
    .tp-area, .tp-dot, .tp-ms { opacity: 1; transform: none; }
    .tp-card-badge i { animation: none; }
}

/* ==========================================================================
   69. HOMEPAGE NEWSLETTER "STAY AHEAD OF THE GAME" — split layout (nl-). A
   live-feed mockup of scrolling insight snippets (vertical infinite drift,
   same seamless-duplicate technique as the Before/After marquees but on the
   Y axis) sits next to a redesigned, pill-shaped subscribe form with an
   animated subscriber counter and a staggered checklist. Replaces the plain
   centred form + 3 static benefit chips.
   ========================================================================== */
.nl-section { position: relative; overflow: hidden; padding: clamp(48px,5vw,72px) 0; }
.nl-glow-1 { position: absolute; width: 380px; height: 380px; border-radius: 50%; top: -170px; left: -110px;
    background: radial-gradient(circle, rgba(37,99,235,.12), transparent 68%); pointer-events: none; }
.nl-glow-2 { position: absolute; width: 340px; height: 340px; border-radius: 50%; bottom: -160px; right: -100px;
    background: radial-gradient(circle, rgba(6,214,160,.14), transparent 68%); pointer-events: none; }
.nl-section .container { position: relative; z-index: 1; }

.nl-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(28px,4vw,56px); align-items: center; max-width: 1120px; margin: 0 auto; }

/* --- left: live insight feed, drifting upward forever --- */
.nl-feed-label { display: inline-flex; align-items: center; gap: 7px; font-family: 'Plus Jakarta Sans',sans-serif;
    font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1e40af; margin-bottom: 14px; }
.nl-feed-label i { width: 7px; height: 7px; border-radius: 50%; background: #06d6a0; animation: heDotPulse 2.2s ease-out infinite; }
.nl-feed { position: relative; height: 340px; border-radius: 18px; overflow: hidden;
    background: linear-gradient(165deg, #0f1830 0%, #0b1226 100%); box-shadow: 0 24px 54px rgba(11,18,38,.2); }
.nl-feed::before, .nl-feed::after { content: ""; position: absolute; left: 0; right: 0; height: 54px; z-index: 2; pointer-events: none; }
.nl-feed::before { top: 0; background: linear-gradient(180deg, #0b1226, transparent); }
.nl-feed::after { bottom: 0; background: linear-gradient(0deg, #0b1226, transparent); }
.nl-feed-track { display: flex; flex-direction: column; gap: 10px; padding: 16px; width: 100%;
    animation: nlFeedDrift 24s linear infinite; }
.nl-feed:hover .nl-feed-track, .nl-feed:focus-within .nl-feed-track { animation-play-state: paused; }
@keyframes nlFeedDrift { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.nl-item { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 11px 12px; }
.nl-item i { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
    font-size: .95rem; font-style: normal; background: rgba(255,255,255,.08); }
.nl-item b { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6ee7b7; margin-bottom: 2px; }
.nl-item span { display: block; font-size: .78rem; line-height: 1.35; color: rgba(255,255,255,.82); }

/* --- right: subscribe panel --- */
.nl-panel-sub { color: #475569; margin: 10px 0 22px; max-width: 46ch; }

.nl-form { margin-bottom: 20px; }
.nl-input-wrap { position: relative; display: flex; align-items: center; gap: 8px; background: #fff;
    border: 1px solid rgba(15,23,42,.12); border-radius: 999px; padding: 6px 6px 6px 20px;
    box-shadow: var(--fx-shadow-sm); transition: box-shadow .3s var(--fx-ease), border-color .3s var(--fx-ease); }
.nl-input-wrap:focus-within { border-color: #06d6a0; box-shadow: 0 0 0 4px rgba(6,214,160,.15); }
.nl-input-wrap svg { flex: none; color: #64748b; }
.nl-input-wrap input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: .95rem; padding: 11px 0; color: #0f172a; }
.nl-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer;
    border-radius: 999px; padding: 12px 22px; font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700;
    font-size: .9rem; color: #fff; background: var(--fx-brand-grad);
    transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease); }
.nl-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6,214,160,.32); }
.nl-fine-print { font-size: .78rem; color: #94a3b8; margin: 10px 0 0 20px; }

.nl-stat-row { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 24px; }
.nl-stat-num { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em;
    background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nl-stat-label { font-size: .82rem; color: #475569; max-width: 28ch; line-height: 1.4; }

.nl-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.nl-checks li { display: flex; align-items: center; gap: 9px; font-size: .84rem; font-weight: 600; color: #334155;
    opacity: 0; transform: translateX(-10px); animation: nlCheckIn .5s var(--fx-ease) forwards; }
.nl-checks li:nth-child(1) { animation-delay: .1s; }
.nl-checks li:nth-child(2) { animation-delay: .2s; }
.nl-checks li:nth-child(3) { animation-delay: .3s; }
@keyframes nlCheckIn { to { opacity: 1; transform: none; } }
.nl-checks li i { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: rgba(6,214,160,.14); color: #0f9d76; }

@media (max-width: 900px) {
    .nl-grid { grid-template-columns: 1fr; }
    .nl-panel { order: 1; }
    .nl-feed-wrap { order: 2; }
    .nl-feed { height: 220px; }
}
@media (max-width: 480px) {
    .nl-input-wrap { flex-wrap: wrap; border-radius: 20px; padding: 14px 16px; }
    .nl-input-wrap input { flex-basis: 100%; padding: 4px 0 8px; }
    .nl-btn { width: 100%; justify-content: center; }
    .nl-fine-print { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nl-feed-track { animation: none; }
    .nl-feed-label i { animation: none; }
    .nl-checks li { opacity: 1; transform: none; animation: none; }
}

/* ==========================================================================
   70. CAREERS PAGE (jb-) — dedicated hiring page, not a homepage rebuild.
   Hero: CSS-only orbit of department badges circling the brand mark (two
   nested rotations cancel out so labels stay upright; pauses on
   reduced-motion). Why-join: asymmetric bento grid. Roles: numbered native
   <details> accordion — each role expands into a two-column brief plus a
   REAL teammate photo (reuses teams.html's actual staff photos instead of
   a stock headshot). Process: connected step rail with a founder quote.
   Closing: diagonal-glow gradient CTA banner.
   ========================================================================== */

/* shared page rhythm */
.jb-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Plus Jakarta Sans',sans-serif;
    font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-brand-1); margin-bottom: 14px; }
.jb-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--fx-brand-2); animation: jbPulse 2.2s ease-out infinite; }
.jb-section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.jb-section-head h2 { font-size: clamp(1.8rem,3.4vw,2.5rem); font-weight: 800; letter-spacing: -.02em; color: var(--fx-ink); line-height: 1.15; }
.jb-section-head p { margin-top: 12px; color: var(--fx-ink-soft); font-size: 1.02rem; line-height: 1.6; }
@keyframes jbPulse { 0% { box-shadow: 0 0 0 0 rgba(6,214,160,.5); } 70% { box-shadow: 0 0 0 7px rgba(6,214,160,0); } 100% { box-shadow: 0 0 0 0 rgba(6,214,160,0); } }

/* ---- 1. hero: copy + orbiting department badges ---- */
.jb-hero { position: relative; overflow: hidden; padding: 150px 20px clamp(60px,7vw,96px);
    background: radial-gradient(760px 380px at 88% -8%, rgba(6,214,160,.14), transparent 60%), linear-gradient(180deg,#ffffff 0%,#f7f8fb 100%); }
.jb-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px,5vw,64px); align-items: center; }
.jb-hero-copy h1 { font-size: clamp(2.2rem,4.6vw,3.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 18px; color: var(--fx-ink); }
.jb-hero-copy h1 span { background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jb-hero-copy > p { color: var(--fx-ink-soft); font-size: 1.08rem; line-height: 1.65; max-width: 520px; }
.jb-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 30px; }
.jb-hero-stats { display: flex; gap: clamp(20px,3vw,40px); margin-top: 44px; flex-wrap: wrap; }
.jb-stat strong { display: block; font-size: 2rem; font-weight: 800; color: var(--fx-ink); font-family: 'Plus Jakarta Sans',sans-serif; }
.jb-stat span { font-size: .82rem; color: var(--fx-ink-soft); }

.jb-orbit { position: relative; width: min(400px,88vw); aspect-ratio: 1; margin: 0 auto; }
.jb-orbit-ring { position: absolute; inset: 0; border: 1.5px dashed var(--fx-line); border-radius: 50%; }
.jb-orbit-ring.jb-ring-2 { inset: 15%; }
.jb-orbit-core { position: absolute; inset: 37%; border-radius: 50%; background: #fff; box-shadow: var(--fx-shadow-lg);
    display: flex; align-items: center; justify-content: center; z-index: 2; }
.jb-orbit-core img { width: 50%; }
.jb-orbit-track { position: absolute; inset: 0; animation: jbSpin 34s linear infinite; }
.jb-badge-pos { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r,152px)); }
.jb-badge { position: relative; display: flex; align-items: center; gap: 7px; transform: translate(-50%,-50%);
    rotate: calc(-1 * var(--a)); animation: jbSpinRev 34s linear infinite;
    background: #fff; border: 1px solid var(--fx-line); box-shadow: var(--fx-shadow-md); border-radius: 999px;
    padding: 8px 14px; font-size: .76rem; font-weight: 700; color: var(--fx-ink); white-space: nowrap; }
@keyframes jbSpin { to { transform: rotate(360deg); } }
@keyframes jbSpinRev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (max-width: 640px) { .jb-orbit-track { --r: 118px; } }

/* ---- 2. why join: asymmetric bento grid ---- */
.jb-why { padding: clamp(56px,6vw,88px) 20px; background: #fff; }
.jb-bento { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 168px; gap: 18px; }
.jb-bento-item { position: relative; border-radius: 20px; padding: 26px; background: var(--fx-page); border: 1px solid var(--fx-line);
    display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
    transition: transform .35s var(--fx-ease), box-shadow .35s var(--fx-ease); }
.jb-bento-item:hover { transform: translateY(-6px); box-shadow: var(--fx-shadow-lg); }
.jb-bento-item.jb-b-lg { grid-column: span 2; grid-row: span 2; }
.jb-bento-item.jb-b-dark { background: var(--fx-bg); border-color: var(--fx-border); color: #fff; }
.jb-bento-item.jb-b-dark p { color: rgba(255,255,255,.72); }
.jb-bento-icon { font-size: 1.9rem; margin-bottom: 10px; }
.jb-bento-item h3 { font-size: 1.06rem; font-weight: 800; margin-bottom: 6px; color: inherit; }
.jb-bento-item p { font-size: .88rem; line-height: 1.5; color: var(--fx-ink-soft); }
.jb-bento-item.jb-b-lg h3 { font-size: 1.3rem; }
.jb-bento-team { display: flex; margin-bottom: 14px; }
.jb-bento-team img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fx-bg); margin-left: -10px; }
.jb-bento-team img:first-child { margin-left: 0; }

/* ---- 3. open roles: numbered accordion ---- */
.jb-roles { padding: clamp(56px,6vw,90px) 20px; background: var(--fx-page); }
.jb-role-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
details.jb-role { background: #fff; border: 1px solid var(--fx-line); border-radius: 18px; overflow: hidden; box-shadow: var(--fx-shadow-sm); }
details.jb-role[open] { box-shadow: var(--fx-shadow-lg); }
.jb-role summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 22px 26px; }
.jb-role summary::-webkit-details-marker { display: none; }
.jb-role-num { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--fx-line); flex-shrink: 0; width: 34px; }
details.jb-role[open] .jb-role-num { background: var(--fx-brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jb-role-head { flex: 1; min-width: 0; }
.jb-role-title { font-size: 1.12rem; font-weight: 800; color: var(--fx-ink); }
.jb-role-hook { font-size: .86rem; color: var(--fx-ink-soft); margin-top: 3px; }
.jb-role-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.jb-role-tag { font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--fx-page); color: var(--fx-ink-soft); }
.jb-role-chev { flex-shrink: 0; color: var(--fx-ink-soft); transition: transform .3s var(--fx-ease); }
details.jb-role[open] .jb-role-chev { transform: rotate(180deg); color: var(--fx-brand-1); }
.jb-role-body { padding: 0 26px 30px 78px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; animation: jbOpen .35s var(--fx-ease); }
@keyframes jbOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.jb-role-col h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fx-brand-1); margin-bottom: 10px; font-weight: 800; }
.jb-role-col ul { display: flex; flex-direction: column; gap: 8px; }
.jb-role-col li { display: flex; gap: 8px; font-size: .89rem; color: var(--fx-ink-soft); line-height: 1.5; }
.jb-role-col li svg { flex-shrink: 0; margin-top: 3px; color: var(--fx-brand-2); }
.jb-role-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 4px; padding-top: 20px; border-top: 1px dashed var(--fx-line); }
.jb-role-person { display: flex; align-items: center; gap: 10px; }
.jb-role-person img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.jb-role-person strong { display: block; font-size: .86rem; color: var(--fx-ink); }
.jb-role-person span { font-size: .76rem; color: var(--fx-ink-soft); }

/* ---- 4. hiring process rail ---- */
.jb-process { padding: clamp(56px,6vw,90px) 20px; background: #fff; }
.jb-steps { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(5,1fr); gap: 0; position: relative; }
.jb-steps::before { content: ""; position: absolute; top: 26px; left: 10%; right: 10%; height: 2px; background: var(--fx-line); z-index: 0; }
.jb-step { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.jb-step-num { width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid var(--fx-line);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-weight: 800; color: var(--fx-ink-soft);
    transition: all .3s var(--fx-ease); }
.jb-step:hover .jb-step-num { background: var(--fx-brand-grad); border-color: transparent; color: #fff; transform: scale(1.08); }
.jb-step h4 { font-size: .96rem; font-weight: 700; color: var(--fx-ink); margin-bottom: 6px; }
.jb-step p { font-size: .8rem; color: var(--fx-ink-soft); line-height: 1.5; }
.jb-process-quote { max-width: 640px; margin: 50px auto 0; display: flex; align-items: center; gap: 16px;
    background: var(--fx-page); border-radius: 18px; padding: 20px 24px; }
.jb-process-quote img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.jb-process-quote p { font-size: .92rem; color: var(--fx-ink); font-style: italic; line-height: 1.5; }
.jb-process-quote cite { display: block; margin-top: 6px; font-size: .78rem; font-style: normal; color: var(--fx-ink-soft); }

/* ---- 5. closing CTA banner ---- */
.jb-cta-wrap { padding: 70px 20px; background: var(--fx-page); }
.jb-cta { position: relative; overflow: hidden; max-width: 1000px; margin: 0 auto; border-radius: 28px; padding: 56px 40px;
    text-align: center; color: #fff; background: var(--fx-brand-grad); box-shadow: var(--fx-shadow-lg); }
.jb-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 240px at 12% 105%, rgba(255,255,255,.22), transparent 60%); }
.jb-cta-icon { position: absolute; top: 18px; right: 30px; font-size: 2.2rem; opacity: .5; animation: jbBob 4.5s ease-in-out infinite; }
.jb-cta h2 { position: relative; font-size: clamp(1.6rem,3.2vw,2.3rem); font-weight: 800; }
.jb-cta p { position: relative; opacity: .92; margin: 12px auto 26px; max-width: 480px; }
.jb-cta .cta-button-light { position: relative; }
@keyframes jbBob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

@media (max-width: 900px) {
    .jb-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .jb-hero-copy > p { margin-inline: auto; }
    .jb-hero-actions, .jb-hero-stats { justify-content: center; }
    .jb-bento { grid-template-columns: repeat(2,1fr); }
    .jb-bento-item.jb-b-lg { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 760px) {
    .jb-steps { grid-template-columns: 1fr 1fr; row-gap: 30px; }
    .jb-steps::before { display: none; }
}
@media (max-width: 640px) {
    .jb-role-body { grid-template-columns: 1fr; padding-left: 26px; }
    .jb-role-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .jb-orbit-track, .jb-badge, .jb-cta-icon, .jb-eyebrow i { animation: none; }
}

/* ==========================================================================
   71. DE-BRANDED AI VOICE/CHAT MOCKUPS (ai-call-mockup / ai-chat-mockup) —
   replaces third-party ChatGPT/DeepSeek screen-recordings (ai-chat.mp4,
   ai-voice.mp4) everywhere they appeared: the homepage hero slider, the
   services.html demo sections and the projects.html video switcher. Two
   self-contained FunnelUX-branded UI components, reused as-is in all three
   places. Also gives the homepage hero's 4 rotating slides genuinely
   different compositions instead of one repeated "video + text" template:
   voice/chat slides become split copy+mockup layouts, while the two
   remaining real-video slides (Booking CRM, Web Design) get their own
   distinct floating accent (a booking toast / a browser-chrome bar).
   ========================================================================== */

/* --- shared: live/online pulsing dot reuses heDotPulse --- */

/* --- AI Voice: call-in-progress card --- */
.ai-call-mockup { width: 100%; max-width: 340px; margin: 0 auto; background: #12172a; border-radius: 22px;
    padding: 20px; box-shadow: 0 20px 50px rgba(2,6,23,.45); border: 1px solid rgba(255,255,255,.08); }
.ai-call-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ai-call-avatar { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: flex; align-items: center;
    justify-content: center; flex: none; overflow: hidden; }
.ai-call-avatar img { width: 58%; }
.ai-call-who { flex: 1; min-width: 0; }
.ai-call-who strong { display: block; font-size: .86rem; color: #fff; font-weight: 700; }
.ai-call-who span { font-size: .72rem; color: rgba(255,255,255,.55); }
.ai-call-live { display: inline-flex; align-items: center; gap: 6px; font-size: .64rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: #6ee7b7; flex: none; }
.ai-call-live i { width: 7px; height: 7px; border-radius: 50%; background: #06d6a0; animation: heDotPulse 2s ease-out infinite; }
.ai-call-wave { display: flex; align-items: flex-end; gap: 4px; height: 50px; margin-bottom: 18px; padding: 0 4px; }
.ai-call-wave i { flex: 1; min-width: 3px; border-radius: 3px; background: linear-gradient(180deg,#38bdf8,#06d6a0);
    animation: aiWave 1.1s ease-in-out infinite; }
.ai-call-wave i:nth-child(3n) { animation-delay: .15s; animation-duration: .9s; }
.ai-call-wave i:nth-child(4n) { animation-delay: .3s; animation-duration: 1.3s; }
.ai-call-wave i:nth-child(5n) { animation-delay: .45s; }
@keyframes aiWave { 0%,100% { height: 22%; opacity: .6; } 50% { height: 100%; opacity: 1; } }
.ai-call-caption p { font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,.85); margin: 0 0 10px;
    opacity: 0; transform: translateY(6px); animation: aiFadeIn .6s var(--fx-ease) forwards; }
.ai-call-caption p:last-child { margin-bottom: 0; color: #fff; }
.ai-call-caption p:nth-child(1) { animation-delay: .3s; }
.ai-call-caption p:nth-child(2) { animation-delay: 1.5s; }
@keyframes aiFadeIn { to { opacity: 1; transform: none; } }

/* --- AI Chat: live conversation card --- */
.ai-chat-mockup { width: 100%; max-width: 340px; margin: 0 auto; background: #fff; border-radius: 22px; padding: 18px;
    box-shadow: 0 20px 50px rgba(2,6,23,.35); }
.ai-chat-top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px;
    border-bottom: 1px solid var(--fx-line); }
.ai-chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--fx-page); display: flex;
    align-items: center; justify-content: center; overflow: hidden; flex: none; }
.ai-chat-avatar img { width: 58%; }
.ai-chat-who strong { display: block; font-size: .86rem; color: var(--fx-ink); font-weight: 700; }
.ai-chat-who span { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--fx-ink-soft); }
.ai-chat-who span i { width: 6px; height: 6px; border-radius: 50%; background: #06d6a0; animation: heDotPulse 2s ease-out infinite; }
.ai-chat-thread { display: flex; flex-direction: column; gap: 9px; }
.ai-bubble { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: .82rem; line-height: 1.45;
    opacity: 0; animation: aiBubbleIn .5s var(--fx-ease) forwards; }
.ai-bubble-in { align-self: flex-start; background: var(--fx-page); color: var(--fx-ink); border-bottom-left-radius: 4px; transform: translateX(-10px); }
.ai-bubble-out { align-self: flex-end; background: var(--fx-brand-grad); color: #fff; border-bottom-right-radius: 4px; transform: translateX(10px); }
.ai-bubble:nth-child(1) { animation-delay: .2s; }
.ai-bubble:nth-child(2) { animation-delay: 1.05s; }
.ai-bubble:nth-child(3) { animation-delay: 1.9s; }
@keyframes aiBubbleIn { to { opacity: 1; transform: none; } }
.ai-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px; background: var(--fx-page);
    border-radius: 14px; border-bottom-left-radius: 4px; opacity: 0; animation: aiFadeIn .5s var(--fx-ease) forwards; animation-delay: 2.7s; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--fx-ink-soft); animation: aiTyping 1.1s ease-in-out infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aiTyping { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* --- placement 1: homepage hero — split copy+mockup slides --- */
.hero-slide-split .hero-inner { position: relative; z-index: 2; }
.hero-split-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(30px,5vw,64px); width: 100%; }
.hero-slide-split-b .hero-split-grid { grid-template-columns: .95fr 1.05fr; }
.hero-slide-split-b .hero-mockup { order: -1; }
.hero-mockup { animation: auRise .7s .15s var(--fx-ease) both; }

/* --- placement 2: full-bleed video slides — distinct floating accents --- */
.hero-toast { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.97);
    border-radius: 14px; padding: 12px 16px; box-shadow: 0 16px 34px rgba(2,6,23,.32); opacity: 0;
    animation: heroToastCycle 6s ease-in-out infinite; }
.hero-toast-booking { right: 5%; bottom: 118px; }
.hero-toast-ic { font-size: 1.3rem; }
.hero-toast strong { display: block; font-size: .82rem; color: var(--fx-ink); }
.hero-toast span { font-size: .74rem; color: var(--fx-ink-soft); }
@keyframes heroToastCycle { 0%,100% { opacity: 0; transform: translateY(14px); } 12%,78% { opacity: 1; transform: none; } 92% { opacity: 0; transform: translateY(14px); } }

.hero-browser-bar { position: absolute; z-index: 3; top: 138px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; background: rgba(15,23,42,.7); backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 18px;
    animation: heroBrowserFloat 4s ease-in-out infinite; }
.hero-browser-dots { display: flex; gap: 5px; }
.hero-browser-dots i { width: 7px; height: 7px; border-radius: 50%; }
.hero-browser-dots i:nth-child(1) { background: #ef4444; }
.hero-browser-dots i:nth-child(2) { background: #f59e0b; }
.hero-browser-dots i:nth-child(3) { background: #22c55e; }
.hero-browser-url { font-size: .72rem; color: #fff; font-weight: 600; letter-spacing: .02em; }
@keyframes heroBrowserFloat { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }

/* --- placement 3: services.html demo cards (svcd-media) — mockup fills the dark frame --- */
.svcd-media .ai-mockup-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 26px; background: linear-gradient(135deg, #0b1226 0%, #131b33 100%); }
.svcd-media .ai-mockup-wrap .ai-call-mockup, .svcd-media .ai-mockup-wrap .ai-chat-mockup { max-width: 300px; }

/* --- placement 4: projects.html video-switcher stage — toggled by ui.js --- */
.pj-video-stage { background: linear-gradient(135deg, #0b1226 0%, #131b33 100%); }
.pj-video-main.is-hidden { display: none; }
.pj-video-stage .ai-mockup-wrap { position: absolute; inset: 0; z-index: 1; display: none; align-items: center;
    justify-content: center; padding: 34px; }
.pj-video-stage .ai-mockup-wrap.is-active { display: flex; }
.pj-video-stage .ai-mockup-wrap .ai-call-mockup, .pj-video-stage .ai-mockup-wrap .ai-chat-mockup { max-width: 340px; }
.pj-video-caption { z-index: 2; }
.pj-thumb-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; background: linear-gradient(135deg, #131b33, #0b1226); opacity: .68; transition: opacity .25s var(--fx-ease); }
.pj-thumb:hover .pj-thumb-icon, .pj-thumb.is-active .pj-thumb-icon { opacity: 1; }

@media (max-width: 900px) {
    /* the mirrored slide (AI Chat) sets its columns through
       `.hero-slide-split-b .hero-split-grid` (0-2-0) above, which outweighs a
       bare `.hero-split-grid` (0-1-0) even from inside this media query — so
       it alone stayed side-by-side on mobile while the other split slides
       stacked. Both selectors have to be collapsed here. */
    .hero-split-grid,
    .hero-slide-split-b .hero-split-grid { grid-template-columns: 100%; }
    .hero-split-grid { text-align: center; justify-items: center; }
    .hero-slide-split-b .hero-mockup { order: 0; }
    .hero-mockup { margin-top: 22px; }
    /* the hero's own mockup/toast/browser-bar are hidden on mobile in section
       74d — these rules still apply to the same mockups where services.html
       and projects.html reuse them. */
}
@media (max-width: 480px) {
    .ai-call-mockup, .ai-chat-mockup { max-width: 280px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-call-wave i, .ai-typing i, .hero-toast, .hero-browser-bar { animation: none !important; }
    .ai-call-caption p, .ai-bubble, .ai-typing { animation: none !important; opacity: 1 !important; transform: none !important; }
    .hero-toast { opacity: 1; }
}

/* ==========================================================================
   72. HERO SLIDER — ALL 7 SERVICES, one colour identity + layout each (hs-).
   Previously 4 slides sharing a single "video + left copy" template, which
   read as the same service repeated. Now every service in the mega-menu has
   a slide, and each carries its own accent colour (driving the eyebrow dot,
   the headline gradient word and the tint of the scrim over its video) plus
   its own composition, so rotating clearly moves between services:
     1 AI Voice      cyan    · split, call mockup right
     2 AI Chat       teal    · split mirrored, chat mockup left
     3 Booking CRM   violet  · full-bleed, floating confirmation toast
     4 Web Design    amber   · full-bleed, floating browser chrome bar
     5 Ads & Social  rose    · full-bleed, stacked live-metric chips
     6 Appointments  indigo  · split, slot-picker card right
     7 Automation    emerald · full-bleed, horizontal workflow node chain
   Backgrounds reuse the per-service clips in assets/videos/services/ that
   each service page already ships (clean, web-sized, already cached).
   ========================================================================== */

/* --- per-slide accent tokens --- */
.hero-slide { --hs-accent: #06d6a0; --hs-soft: rgba(6,214,160,.20);
    --hs-grad: linear-gradient(100deg,#fff 0%,#6ee7b7 55%,#06d6a0 100%); }
.hs-voice  { --hs-accent: #38bdf8; --hs-soft: rgba(56,189,248,.22);  --hs-grad: linear-gradient(100deg,#fff 0%,#7dd3fc 52%,#38bdf8 100%); }
.hs-chat   { --hs-accent: #06d6a0; --hs-soft: rgba(6,214,160,.22);   --hs-grad: linear-gradient(100deg,#fff 0%,#6ee7b7 52%,#06d6a0 100%); }
.hs-crm    { --hs-accent: #a78bfa; --hs-soft: rgba(167,139,250,.24); --hs-grad: linear-gradient(100deg,#fff 0%,#c4b5fd 52%,#a78bfa 100%); }
.hs-web    { --hs-accent: #fbbf24; --hs-soft: rgba(251,191,36,.22);  --hs-grad: linear-gradient(100deg,#fff 0%,#fcd34d 52%,#fbbf24 100%); }
.hs-ads    { --hs-accent: #fb7185; --hs-soft: rgba(251,113,133,.24); --hs-grad: linear-gradient(100deg,#fff 0%,#fda4af 52%,#fb7185 100%); }
.hs-book   { --hs-accent: #818cf8; --hs-soft: rgba(129,140,248,.24); --hs-grad: linear-gradient(100deg,#fff 0%,#a5b4fc 52%,#818cf8 100%); }
.hs-auto   { --hs-accent: #34d399; --hs-soft: rgba(52,211,153,.22);  --hs-grad: linear-gradient(100deg,#fff 0%,#6ee7b7 52%,#34d399 100%); }

/* accent-tinted scrim replaces the old neutral overlay on slider slides */
.hero-slide .hero-slide-media { background: #080d1a; }
.hero-scrim { position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(760px 430px at 82% 22%, var(--hs-soft), transparent 66%),
        linear-gradient(90deg, rgba(6,10,22,.88) 0%, rgba(6,10,22,.58) 44%, rgba(6,10,22,.10) 78%),
        linear-gradient(180deg, rgba(6,10,22,.34) 0%, transparent 34%, rgba(6,10,22,.46) 100%); }
.hero-slide-split .hero-scrim {
    background:
        radial-gradient(700px 420px at 50% 40%, var(--hs-soft), transparent 68%),
        linear-gradient(90deg, rgba(6,10,22,.90) 0%, rgba(6,10,22,.72) 55%, rgba(6,10,22,.62) 100%); }

/* accent applied to the shared eyebrow + headline */
.hero-slide .hero-eyebrow { border-color: var(--hs-accent); background: rgba(255,255,255,.09); }
.hero-slide .hero-eyebrow .he-dot { background: var(--hs-accent); }
.hero-slide .hero-headline em { font-style: normal; background: var(--hs-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }

/* --- 5. Ads & Social: stacked live-metric chips --- */
.hero-metrics { position: absolute; z-index: 3; right: 5%; top: 46%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 12px; }
.hero-metric { display: flex; align-items: center; gap: 12px; min-width: 210px;
    background: rgba(255,255,255,.97); border-radius: 14px; padding: 12px 16px;
    box-shadow: 0 16px 34px rgba(2,6,23,.34);
    opacity: 0; transform: translateX(18px); animation: hsMetricIn .55s var(--fx-ease) forwards; }
.hero-metric:nth-child(1) { animation-delay: .35s; }
.hero-metric:nth-child(2) { animation-delay: .55s; }
.hero-metric:nth-child(3) { animation-delay: .75s; }
@keyframes hsMetricIn { to { opacity: 1; transform: none; } }
.hero-metric-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
    background: var(--hs-soft); font-size: 1rem; }
.hero-metric b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--fx-ink); line-height: 1.15; }
.hero-metric span { font-size: .74rem; color: var(--fx-ink-soft); }
.hero-metric i { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 800; color: #0f9d76; }

/* --- 6. Appointment Booking: slot-picker card --- */
.hero-slots { width: 100%; max-width: 320px; margin: 0 auto; background: #fff; border-radius: 20px;
    padding: 18px; box-shadow: 0 22px 52px rgba(2,6,23,.4); }
.hero-slots-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hero-slots-head strong { font-size: .9rem; color: var(--fx-ink); font-weight: 800; }
.hero-slots-head span { font-size: .72rem; color: var(--fx-ink-soft); }
.hero-slots-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.hero-slot { padding: 9px 4px; border-radius: 10px; text-align: center; font-size: .78rem; font-weight: 700;
    background: var(--fx-page); color: var(--fx-ink-soft); border: 1.5px solid transparent;
    opacity: 0; animation: hsSlotIn .4s var(--fx-ease) forwards; }
.hero-slot:nth-child(1) { animation-delay: .3s; } .hero-slot:nth-child(2) { animation-delay: .38s; }
.hero-slot:nth-child(3) { animation-delay: .46s; } .hero-slot:nth-child(4) { animation-delay: .54s; }
.hero-slot:nth-child(5) { animation-delay: .62s; } .hero-slot:nth-child(6) { animation-delay: .7s; }
@keyframes hsSlotIn { to { opacity: 1; } }
.hero-slot.is-taken { text-decoration: line-through; opacity: .45; }
.hero-slot.is-picked { background: var(--hs-accent); color: #fff; border-color: var(--hs-accent);
    animation: hsSlotIn .4s var(--fx-ease) .78s forwards, hsSlotPick .5s var(--fx-ease) 1.15s both; }
@keyframes hsSlotPick { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
.hero-slots-foot { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: .76rem;
    font-weight: 700; color: #0f9d76; opacity: 0; animation: hsSlotIn .45s var(--fx-ease) 1.6s forwards; }

/* --- 7. Automation: vertical workflow pipeline, right side.
   Anchored to the right edge (well clear of the left copy column at every
   width — a centred-absolute placement previously collided with the
   "Explore Automation" button). Runs top-to-bottom as a connected pipeline
   so it reads differently from slide 5's right-side metric chips: connector
   rails fill downward in sequence, threading through the icon circles. --- */
.hero-flow { position: absolute; z-index: 3; right: 6%; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.hero-flow-node { display: flex; align-items: center; gap: 11px; min-width: 186px;
    background: rgba(255,255,255,.96); border-radius: 999px; padding: 8px 20px 8px 8px;
    box-shadow: 0 14px 30px rgba(2,6,23,.3);
    font-size: .8rem; font-weight: 700; color: var(--fx-ink); white-space: nowrap;
    opacity: 0; transform: translateX(16px); animation: hsNodeIn .5s var(--fx-ease) forwards; }
.hero-flow-node span { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid;
    place-items: center; background: var(--hs-soft); font-size: .9rem; }
/* nodes and links are all divs, so nth-child (not nth-of-type) is what
   actually targets them: nodes are children 1,3,5,7 and links 2,4,6. */
.hero-flow > .hero-flow-node:nth-child(1) { animation-delay: .30s; }
.hero-flow > .hero-flow-node:nth-child(3) { animation-delay: .75s; }
.hero-flow > .hero-flow-node:nth-child(5) { animation-delay: 1.20s; }
.hero-flow > .hero-flow-node:nth-child(7) { animation-delay: 1.65s; }
@keyframes hsNodeIn { to { opacity: 1; transform: none; } }
/* vertical rail, centred on the 28px icon circle (8px padding + 14px radius) */
.hero-flow-link { width: 2px; height: 22px; flex: none; margin-left: 21px;
    background: rgba(255,255,255,.32); position: relative; overflow: hidden; }
.hero-flow-link::after { content: ""; position: absolute; inset: 0; background: var(--hs-accent);
    transform: scaleY(0); transform-origin: top; animation: hsLinkFill .45s var(--fx-ease) forwards; }
.hero-flow > .hero-flow-link:nth-child(2)::after { animation-delay: .60s; }
.hero-flow > .hero-flow-link:nth-child(4)::after { animation-delay: 1.05s; }
.hero-flow > .hero-flow-link:nth-child(6)::after { animation-delay: 1.50s; }
@keyframes hsLinkFill { to { transform: scaleY(1); } }

@media (max-width: 1100px) {
    .hero-metrics { right: 3%; }
    .hero-metric { min-width: 178px; padding: 10px 13px; }
}
@media (max-width: 900px) {
    /* .hero-metrics / .hero-flow / .hero-slots are hidden on mobile in
       section 74d, which is where that decision now lives. */
    .hero-slots { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-metric, .hero-slot, .hero-flow-node { animation: none !important; opacity: 1 !important; transform: none !important; }
    .hero-flow-link::after { animation: none !important; transform: scaleX(1); }
}

/* ==========================================================================
   73. RESPONSIVE AUDIT PASS — three verified defects found by measuring every
   page at 320–2560px. Everything here is either a breakpoint alignment or a
   hit-area/height increase; no visual redesign of any section.
   ========================================================================== */

/* --- 73a. Tablet header (769–992px) -------------------------------------
   The mega-menu accordion + drawer sizing (sections 37 and 62) are written
   for `max-width: 992px`, but the hamburger and the drawer's own show/hide
   rules lived in base style.css at `max-width: 768px`. In the gap the nav kept
   `display:flex` while `.mega-nav` had already been switched to
   `flex-direction:column`, so the eight nav items rendered as a 290px-tall
   column spilling out of the 60px header bar — with no hamburger to collapse
   it. Measured broken at 800/820/853/912/992px (iPad portrait, iPad Air,
   Surface Duo). The breakpoint itself is fixed at source in style.css so the
   legacy packages/services headers get it too; only the redesigned header's
   own measurements are adjusted here.                                        */
@media (max-width: 992px) {
    /* `.mega-nav { display: flex }` (section 37) and `.nav-links { display:
       none }` (style.css mobile block) are both 0-1-0, and redesign.css loads
       second — so the base rule won and the drawer rendered open on every
       phone and tablet, with no way to close it. Qualifying the selector
       (0-2-0) puts the drawer back under the toggle's control. */
    .nav-links.mega-nav { display: none; }
    .nav-links.mega-nav.active { display: flex; }

    .nav-links { top: 56px; box-shadow: 0 18px 40px rgba(2, 6, 23, .18); }

    /* Collapsed accordion panels were leaking their first line of text: the
       `grid-template-rows: 0fr` trick (section 62) only zeroes the content
       box, so `.mn-panel-inner`'s 4px/10px vertical padding stayed, leaving a
       14px-tall strip that `overflow: hidden` clips to rather than hides. The
       padding has to collapse with the row. */
    .mn-panel > .mn-panel-inner {
        padding-top: 0;
        padding-bottom: 0;
        transition: padding-top .35s var(--fx-ease), padding-bottom .35s var(--fx-ease);
    }
    .mn-item.is-open .mn-panel > .mn-panel-inner {
        padding-top: 4px;
        padding-bottom: 10px;
    }
}

/* --- 73e. Open mega-menu panel ran off the right edge --------------------
   The panel is absolutely positioned at `left: 0` of its trigger, and the nav
   right-aligns, so the trigger always sits ~872px from the viewport edge while
   the 3-column Services panel is 882px wide — a consistent 10px overflow at
   1024px, 1280px and 1366px (it only clears once the 1400px container stops
   growing at 1440px). The panel can't shrink much: its columns already sit at
   their 415/215/190px minimums. Nudging it left is what fits. Measured open,
   which the page-level sweeps never did — they only ever saw it closed.       */
@media (min-width: 993px) and (max-width: 1499px) {
    /* Range extended past 1439px and the nudge deepened from 32px in section
       76: the panel got wider when the icon column was dropped and the text
       was given that space instead, so its right edge landed 5px from the
       viewport at 1024-1366 and 4px at 1440. Measured open at every width. */
    .mn-panel { margin-left: -46px; }
    /* keep the little arrow pointing at the trigger, not at the panel centre */
    .mn-panel::after { margin-left: 40px; }
}

/* --- 73b. Touch targets on coarse-pointer viewports ----------------------
   The shared controls (banner, hamburger, drawer rows, logo link, form
   fields) are handled once in style.css so the legacy packages/services
   pages get them too; what follows only covers selectors that exist on the
   redesigned pages. Scoped to <=992px so desktop keeps its existing compact
   proportions.                                                              */
@media (max-width: 992px) {
    /* the compact 38px announcement bar (section 31) can't hold a 44px close
       button, so the auto-height treatment now covers the tablet range too */
    .offer-banner { height: auto; padding: 4px 52px 4px 14px; }
    header nav { height: 56px; }

    /* the redesigned banner CTA keeps its own horizontal padding */
    .offer-banner .cta-button-outline-white { padding: 5px 15px; }

    /* footer: social buttons were 38x38, link rows 28px tall */
    .ft-social a { width: 44px; height: 44px; }
    .site-footer .footer-col ul li a,
    .site-footer .footer-bottom-links a,
    .site-footer .ft-contact a,
    .site-footer .ft-top {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .site-footer .footer-col ul li { margin-bottom: 0; }

    /* homepage product tabs were 36–39px tall */
    .demo-tab { min-height: 44px; }

    /* standalone call-to-action text links that sit on their own line */
    .cls-cta, .va-link, .cw-visit-link, .au-textlink, .mn-link-all, .au-svc-name,
    .svcd-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* service-detail sticky subnav: pills were 38px, its CTA 40px */
    .svcd-pill, .svcd-nav-cta { min-height: 44px; }

    /* FAQ accordion headers were 33px at 320px */
    .pr-faq summary, .sv-faq-list summary { min-height: 44px; }

    /* breadcrumb and the standalone contact row under the pricing CTA — both
       are their own tap targets, not links running inside a sentence */
    .svcpage-crumbs a, .pr-cta-contact a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .book-modal-close { width: 44px; height: 44px; top: 8px; right: 8px; }
}

/* --- 73c. Booking modal must fit the viewport ----------------------------
   `.book-modal-backdrop` is `position:fixed` and centres its child, and the
   modal had no height cap. At ~450px of content it was taller than a phone
   in landscape (e.g. 853x390) or a short laptop, and because a fixed backdrop
   cannot scroll, the top and bottom were cut off unreachably. Cap the height
   and let the body scroll instead.                                          */
.book-modal-backdrop { overflow-y: auto; }
.book-modal {
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
}
.book-modal-header,
.book-modal-footer { flex: none; }
.book-modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* --- 73d. Hero slider controls: hit area only, no visual change ----------
   The dots render at 9x9 and the arrows at 34–38px. These pseudo-elements
   enlarge only the tappable region; the painted control is untouched, so the
   hero's appearance is byte-identical. Dots are spaced 19px centre-to-centre,
   so widening their targets past that would make neighbours steal each
   other's taps — they get the full spacing plus a 44px vertical reach.       */
.hero-dot { position: relative; }
.hero-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 19px;
    height: 44px;
}
.hero-arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

/* ==========================================================================
   74. HERO TOP CLEARANCE — heroes were rendering underneath the fixed header.
   `header` is position:fixed, so each page's first section pads its own top to
   clear it. Every one of those clearances was a hardcoded constant (117–170px)
   authored against the desktop header (banner 38px + nav 60px = 98px). But the
   header is not a constant: the offer-banner text wraps as the viewport
   narrows, so its real height runs 92px on a wide desktop up to 170px at
   320px. Wherever the constant fell short, the header covered the top of the
   hero — measured as 18–58px of the eyebrow/kicker swallowed on 9 pages at
   320–768px (e.g. book-now's "Free Strategy Call" pill was sliced in half).
   ui.js now measures the header and publishes --fx-header-h, so the clearance
   tracks the real height instead of guessing it. The added offset below each
   selector is that hero's original breathing room above the 98px baseline, so
   desktop rendering is unchanged and only the narrow widths gain the space
   they were always missing.
   Deliberately excluded: index.html (its slider is hidden on mobile and
   .hero-peak already clears the header) and the two legal pages (they carry no
   offer banner — their header is a flat 57px and was never overlapping).
   ========================================================================== */
:root {
    /* fallback for the first paint and for JS-off: the desktop header height */
    --fx-header-h: 98px;
}

.bx-hero,
.ax-hero,
.rx-hero,
.sx-hero,
.wx-hero { padding-top: calc(var(--fx-header-h) + 19px); }

.svcpage-hero,
.pr-hero,
.pj-hero,
.contact-hero,
.book-now-hero,
.cx-hero { padding-top: calc(var(--fx-header-h) + 20px); }

.vx-hero { padding-top: calc(var(--fx-header-h) + 28px); }

.au-hero,
.jb-hero { padding-top: calc(var(--fx-header-h) + 52px); }

.tm-hero { padding-top: calc(var(--fx-header-h) + 72px); }

/* --- 74b. Homepage hero slider on tablet + phone (<=900px) ----------------
   Section 72 rebuilt the hero as a slider whose `.hero-slide`s are all
   `position: absolute; inset: 0` inside an equally absolute `.hero-slides`,
   so nothing inside the hero could contribute height — `min-height: auto`
   from section 14's mobile block resolved to 0 and `overflow: hidden` erased
   the whole slider on every phone. The first repair put only the *active*
   slide back into normal flow, which fixed the blank hero but produced three
   new defects, all reported:
     · `.hero-slide-media` is absolute to its slide, so the video box stopped
       where the active slide's copy stopped while the hero kept its
       `100dvh - var(--cls-h)` floor — the footage ended mid-screen and the
       rest of the hero was flat `#0b0b0c`;
     · each of the 7 slides has a different content height, so rotating
       resized the hero: a short full-bleed slide (Booking CRM, Web Design)
       looked cut in half next to a tall split slide (AI Voice, Booking);
     · anything past that height was clipped by the hero's `overflow: hidden`,
       which is what hid the mockup column / lower CTA on some slides.
   Fixed the standard way: stack the slides in a single CSS grid cell instead
   of stacking them with absolute positioning. Every slide stays in flow, so
   the tallest of the seven sets ONE height they all share (no resize when the
   slider rotates), `align-content: stretch` grows that row to the viewport
   floor, and each slide's media box is therefore always full-bleed. Inactive
   slides still carry opacity/visibility only, so the crossfade, the dot nav
   and the JS are untouched. Applied at 900px to match the breakpoint where
   `.hero-split-grid` collapses to one column (section 71), so tablets get the
   same in-flow sizing rather than the clipped desktop layout.               */
@media (max-width: 900px) {
    .hero.hero-banner {
        min-height: calc(100vh - var(--cls-h));
        min-height: calc(100dvh - var(--cls-h));
    }

    /* the slider is the hero's only flex child: let it fill the hero, then
       layer all 7 slides into one grid cell */
    .hero.hero-banner .hero-slides {
        position: relative;
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: 100%;
        align-content: stretch;
    }
    .hero.hero-banner .hero-slide,
    .hero.hero-banner .hero-slide.is-active {
        position: relative;
        grid-area: 1 / 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    /* `.hero-slide .hero-inner` (0-2-0) sets the desktop 118px top padding, so
       a bare `.hero-inner` (0-1-0) never won and the eyebrow stayed under the
       header — match its specificity. `flex: 1` + the inherited
       `align-items: center` centres the copy in whatever height the tallest
       slide dictates, so short slides don't sit top-heavy. Top padding tracks
       the header ui.js actually measured (the offer banner wraps to 2-3 lines
       below 400px); the bottom padding reserves the dot/arrow control bar so
       the CTA buttons never disappear behind it. */
    .hero-slide .hero-inner {
        height: auto;
        flex: 1 1 auto;
        padding: calc(var(--fx-header-h) + 22px) 0 88px;
    }

    /* One vertical column, centred. Both content wrappers used across the 7
       slides (`.hero-content` on full-bleed slides, `.hero-copy` on split
       ones) are left-aligned on desktop against right-hand artwork; once the
       artwork stacks underneath, left-aligned copy over a centred mockup is
       what read as "one side shows properly and the other doesn't". The h1/p
       rules need `.hero.hero-banner` on them to beat section 14's 0-2-1
       `text-align: left`. */
    .hero.hero-banner .hero-content,
    .hero-split-grid { text-align: center; }
    .hero.hero-banner .hero-content h1,
    .hero.hero-banner .hero-content p,
    .hero.hero-banner .hero-copy h1,
    .hero.hero-banner .hero-copy p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .hero.hero-banner .hero-cta-row { justify-content: center; }
    .hero-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-width: 0;
    }
    .hero-mockup {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
}

/* --- 74c. Phone: type sizing for the copy-only slide ----------------------
   With the visual blocks dropped on mobile (74d) the slide is eyebrow +
   headline + paragraph + CTAs, so the headline gets the room to stay large.  */
@media (max-width: 600px) {
    .hero.hero-banner .hero-headline { font-size: clamp(1.7rem, 7.4vw, 2.2rem); line-height: 1.14; }
    .hero.hero-banner p { font-size: .95rem; line-height: 1.55; max-width: 34ch; }
    .hero-slide .hero-inner { padding: calc(var(--fx-header-h) + 16px) 0 82px; }
}

/* --- 74d. Mobile: the slide ends at the CTA buttons -----------------------
   Every slide carries a visual under its copy — the call mockup, the chat
   thread, the Booking CRM toast, the Web Design browser bar, the Ads metric
   chips, the slot picker, the Automation flow chain. On a phone the fixed
   header (~150px) plus that stack pushed the visual past the fold on all
   seven slides, so the screen showed copy and buttons with a cut-off card
   hanging below. Per the brief the visuals are dropped on mobile rather than
   shrunk: below 900px — the same breakpoint where `.hero-split-grid`
   collapses to one column — the slide is eyebrow, headline, paragraph and the
   two CTAs, over the service's own video. Desktop keeps all of them exactly
   as authored (absolutely positioned for the four full-bleed slides, in the
   grid's second column for the three split ones).                           */
@media (max-width: 900px) {
    .hero-slide .hero-mockup,
    .hero-slide .hero-toast,
    .hero-slide .hero-browser-bar,
    .hero-slide .hero-metrics,
    .hero-slide .hero-flow { display: none; }

    /* the split slides are one column now, so the copy is the whole grid */
    .hero-split-grid { grid-template-rows: auto; }
}

/* ==========================================================================
   75. THE REEL (rl-) — homepage 5-clip story told as a 3D "screening room".
   Deliberately unlike the other video moments on the site: section 24's
   `va-strip` is a flat accordion of expanding panels, `cw-` is a thumbnail
   grid and `pj-video-stage` is a plain switcher. This one is a projector
   room — a perspective deck where the live clip sits front and centre with
   its neighbours angled away into the dark, a light beam and film grain over
   the whole band, and a sprocketed film strip below whose active frame fills
   in time with the clip. Sound and full screen are explicit controls, since
   the clips carry a voiceover.
   Clips: assets/videos/home-page/video-{1..5}.mp4 (1024x576, 10s, with audio)
   Posters: assets/images/home-page/reel-*-poster.jpg, cut from the clips.
   ========================================================================== */
.rl-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(64px, 7vw, 104px) 0 clamp(56px, 6vw, 88px);
    background:
        radial-gradient(120% 70% at 50% -10%, #16233f 0%, #0a1020 45%, #05080f 100%);
    color: #fff;
}

/* projector beam from the top centre — the light the deck sits in */
.rl-beam {
    position: absolute;
    top: -14%;
    left: 50%;
    width: min(1500px, 130%);
    height: 128%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(160, 205, 255, .17) 0%, rgba(120, 180, 255, .05) 42%, transparent 76%);
    clip-path: polygon(47.5% 0, 52.5% 0, 100% 100%, 0 100%);
    filter: blur(6px);
    animation: rlBeam 9s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}
@keyframes rlBeam {
    0%, 100% { opacity: .68; transform: translateX(-50%) skewX(0deg); }
    50%      { opacity: 1;   transform: translateX(-50%) skewX(1.6deg); }
}

/* film grain: two offset dot fields drifting against each other */
.rl-grain {
    position: absolute;
    inset: -60px;
    z-index: 1;
    pointer-events: none;
    opacity: .16;
    background-image:
        radial-gradient(rgba(255, 255, 255, .55) .6px, transparent .7px),
        radial-gradient(rgba(255, 255, 255, .35) .5px, transparent .6px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 2px 1px;
    animation: rlGrain .9s steps(3) infinite;
}
@keyframes rlGrain {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-2px, 1px); }
    66%  { transform: translate(1px, -2px); }
    100% { transform: translate(0, 0); }
}

.rl-glow {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    animation: rlGlow 14s ease-in-out infinite;
}
.rl-glow-a { width: 420px; height: 420px; left: -120px; top: 12%; background: rgba(56, 189, 248, .20); }
.rl-glow-b { width: 480px; height: 480px; right: -160px; bottom: 4%; background: rgba(52, 211, 153, .16); animation-delay: -7s; }
@keyframes rlGlow {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .85; }
    50%      { transform: translate(26px, -22px) scale(1.12); opacity: 1; }
}

.rl-inner { position: relative; z-index: 2; }

/* --- heading --- */
.rl-head { text-align: center; max-width: 720px; margin: 0 auto clamp(34px, 4vw, 52px); }
.rl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #dbe7ff;
    margin-bottom: 16px;
}
/* the "REC" dot */
.rl-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #fb7185; box-shadow: 0 0 0 0 rgba(251, 113, 133, .7); animation: rlRec 1.8s ease-out infinite; }
@keyframes rlRec {
    0%   { box-shadow: 0 0 0 0 rgba(251, 113, 133, .65); }
    70%  { box-shadow: 0 0 0 9px rgba(251, 113, 133, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0); }
}
.rl-head h2 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 14px;
}
.rl-head h2 em {
    font-style: normal;
    background: linear-gradient(100deg, #fff 0%, #7dd3fc 45%, #34d399 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rl-head p { color: rgba(226, 236, 255, .74); font-size: 1.02rem; line-height: 1.65; }

/* --- the perspective deck --- */
.rl-stage { position: relative; }
.rl-deck {
    position: relative;
    height: clamp(232px, 40vw, 500px);
    perspective: 1700px;
    transform-style: preserve-3d;
}
.rl-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(820px, 68%);
    aspect-ratio: 16 / 9;
    margin: 0;
    transform: translate(-50%, -50%);
    transition: transform .85s cubic-bezier(.22, 1, .36, 1),
                opacity .6s var(--fx-ease),
                filter .6s var(--fx-ease);
    will-change: transform;
}
/* the five depth slots the deck rotates cards through */
.rl-card[data-pos="0"]  { transform: translate(-50%, -50%) translateZ(0) scale(1);                                z-index: 5; opacity: 1;   filter: none; cursor: default; }
.rl-card[data-pos="-1"] { transform: translate(-50%, -50%) translateX(-56%) translateZ(-230px) rotateY(28deg)  scale(.95); z-index: 4; opacity: .58; filter: brightness(.48) saturate(.75); cursor: pointer; }
.rl-card[data-pos="1"]  { transform: translate(-50%, -50%) translateX(56%)  translateZ(-230px) rotateY(-28deg) scale(.95); z-index: 4; opacity: .58; filter: brightness(.48) saturate(.75); cursor: pointer; }
.rl-card[data-pos="-2"] { transform: translate(-50%, -50%) translateX(-88%) translateZ(-500px) rotateY(36deg)  scale(.9);  z-index: 3; opacity: .22; filter: brightness(.32) saturate(.6); cursor: pointer; }
.rl-card[data-pos="2"]  { transform: translate(-50%, -50%) translateX(88%)  translateZ(-500px) rotateY(-36deg) scale(.9);  z-index: 3; opacity: .22; filter: brightness(.32) saturate(.6); cursor: pointer; }

.rl-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #05080f;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 40px 90px rgba(2, 6, 23, .68);
    transition: box-shadow .6s var(--fx-ease), border-color .6s var(--fx-ease);
}
/* the live clip gets the accent rim + a bloom in its own colour */
.rl-card[data-pos="0"] .rl-screen {
    border-color: color-mix(in srgb, var(--rl-acc) 55%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--rl-acc) 30%, transparent),
        0 26px 70px color-mix(in srgb, var(--rl-acc) 22%, transparent),
        0 46px 110px rgba(2, 6, 23, .72);
}
.rl-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #05080f; }

.rl-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(4, 8, 17, .5) 0%, transparent 26%, transparent 46%, rgba(4, 8, 17, .88) 100%);
}
/* one slow glass sweep across the live screen */
.rl-sheen {
    position: absolute;
    top: 0;
    left: -40%;
    width: 34%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13) 48%, transparent);
    transform: skewX(-16deg);
    opacity: 0;
}
.rl-card[data-pos="0"] .rl-sheen { animation: rlSheen 6.5s var(--fx-ease) 1.2s infinite; }
@keyframes rlSheen {
    0%       { left: -40%; opacity: 0; }
    12%      { opacity: 1; }
    46%, 100% { left: 118%; opacity: 0; }
}

.rl-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(6, 10, 22, .62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}
.rl-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--rl-acc); animation: heDotPulse 2s ease-out infinite; }

/* caption rides in from the bottom of the live screen only */
.rl-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    padding: 26px clamp(18px, 3vw, 34px) clamp(18px, 2.4vw, 26px);
    text-align: left;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s var(--fx-ease) .18s, transform .5s var(--fx-ease) .18s;
}
.rl-card[data-pos="0"] .rl-caption { opacity: 1; transform: none; }
.rl-caption b {
    display: block;
    font-size: clamp(1.05rem, 2.2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 6px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.rl-caption em {
    display: block;
    font-style: normal;
    font-size: clamp(.8rem, 1.15vw, .95rem);
    line-height: 1.55;
    color: rgba(232, 240, 255, .84);
    max-width: 60ch;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .65);
}

/* --- deck arrows --- */
.rl-nav {
    position: absolute;
    top: 50%;
    z-index: 8;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(10, 16, 32, .55);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background .25s var(--fx-ease), transform .25s var(--fx-ease), border-color .25s var(--fx-ease);
}
.rl-nav:hover { background: rgba(255, 255, 255, .16); border-color: #fff; transform: translateY(-50%) scale(1.09); }
.rl-nav-prev { left: 0; }
.rl-nav-next { right: 0; }

/* --- control bar --- */
.rl-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin: clamp(20px, 2.6vw, 30px) auto 0;
    max-width: min(820px, 68%);
}
.rl-count { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.rl-count b { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.rl-count i { font-style: normal; font-size: .84rem; font-weight: 700; color: rgba(226, 236, 255, .5); }

.rl-actions { display: flex; align-items: center; gap: 10px; }
.rl-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    cursor: pointer;
    transition: background .25s var(--fx-ease), border-color .25s var(--fx-ease), transform .25s var(--fx-ease);
}
.rl-btn:hover { background: rgba(255, 255, 255, .16); border-color: #fff; transform: translateY(-2px); }
.rl-btn-sound[aria-pressed="true"] {
    background: linear-gradient(100deg, #06d6a0, #38bdf8);
    border-color: transparent;
    color: #04121f;
}
/* equaliser: flat while muted, dancing once the sound is on */
.rl-eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.rl-eq i { width: 2.5px; height: 4px; border-radius: 2px; background: currentColor; transition: height .3s var(--fx-ease); }
.rl-btn-sound[aria-pressed="true"] .rl-eq i { animation: rlEq .9s ease-in-out infinite; }
.rl-btn-sound[aria-pressed="true"] .rl-eq i:nth-child(2) { animation-delay: .15s; }
.rl-btn-sound[aria-pressed="true"] .rl-eq i:nth-child(3) { animation-delay: .3s; }
.rl-btn-sound[aria-pressed="true"] .rl-eq i:nth-child(4) { animation-delay: .45s; }
@keyframes rlEq { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* --- film strip --- */
.rl-strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(8px, 1.2vw, 14px);
    margin: clamp(26px, 3.2vw, 40px) auto 0;
    padding: 16px clamp(12px, 1.6vw, 20px);
    border-radius: 16px;
    background: rgba(3, 6, 14, .55);
    border: 1px solid rgba(255, 255, 255, .09);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* sprocket holes down the top and bottom edges — the film-strip tell */
.rl-strip::before,
.rl-strip::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    height: 6px;
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .26) 0 9px, transparent 9px 21px);
    border-radius: 2px;
    pointer-events: none;
}
.rl-strip::before { top: 5px; }
.rl-strip::after { bottom: 5px; }

.rl-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    opacity: .5;
    transition: opacity .35s var(--fx-ease), transform .35s var(--fx-ease);
}
.rl-frame:hover { opacity: .85; transform: translateY(-3px); }
.rl-frame.is-active { opacity: 1; }
.rl-frame-shot {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    transition: border-color .35s var(--fx-ease), box-shadow .35s var(--fx-ease);
}
.rl-frame-shot img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter .45s var(--fx-ease), transform .6s var(--fx-ease); }
.rl-frame:hover .rl-frame-shot img,
.rl-frame.is-active .rl-frame-shot img { filter: none; transform: scale(1.05); }
.rl-frame.is-active .rl-frame-shot {
    border-color: var(--rl-acc);
    box-shadow: 0 0 0 1px var(--rl-acc), 0 12px 26px color-mix(in srgb, var(--rl-acc) 26%, transparent);
}
.rl-frame-txt { display: flex; align-items: baseline; gap: 7px; font-size: .78rem; font-weight: 700; color: rgba(226, 236, 255, .82); line-height: 1.25; }
.rl-frame-txt b { font-size: .7rem; font-weight: 800; letter-spacing: .1em; color: var(--rl-acc); }
.rl-frame-bar { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.rl-frame-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--rl-acc); }

/* full screen: the browser paints its own black backdrop, so let the screen
   letterbox inside it rather than crop */
.rl-screen:fullscreen { border-radius: 0; border: 0; width: 100vw; height: 100vh; }
.rl-screen:fullscreen .rl-video { object-fit: contain; }
.rl-screen:fullscreen .rl-sheen,
.rl-screen:fullscreen .rl-vignette { display: none; }

/* --- responsive --- */
@media (max-width: 1100px) {
    .rl-card { width: min(760px, 76%); }
    .rl-bar { max-width: min(760px, 76%); }
}
@media (max-width: 900px) {
    .rl-deck { height: clamp(210px, 48vw, 340px); }
    .rl-card { width: 84%; }
    .rl-card[data-pos="-1"] { transform: translate(-50%, -50%) translateX(-50%) translateZ(-260px) rotateY(26deg) scale(.94); }
    .rl-card[data-pos="1"]  { transform: translate(-50%, -50%) translateX(50%)  translateZ(-260px) rotateY(-26deg) scale(.94); }
    .rl-card[data-pos="-2"],
    .rl-card[data-pos="2"] { opacity: 0; }
    .rl-bar { max-width: 84%; justify-content: center; }
    .rl-nav { width: 40px; height: 40px; }
    .rl-strip { grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 14px 12px; }
    .rl-frame-txt { font-size: .68rem; flex-direction: column; gap: 2px; }
}
@media (max-width: 620px) {
    .rl-deck { height: clamp(196px, 58vw, 280px); }
    .rl-card { width: 92%; }
    /* neighbours would only peek out by a few pixels at this width — the deck
       reads as a single screen instead, and the strip below carries the
       "there are five of these" message */
    .rl-card[data-pos="-1"], .rl-card[data-pos="1"] { opacity: 0; }
    .rl-nav { width: 36px; height: 36px; }
    .rl-nav-prev { left: -6px; }
    .rl-nav-next { right: -6px; }
    .rl-bar { max-width: 92%; flex-direction: column; gap: 12px; }
    .rl-caption { padding: 20px 16px 14px; }
    .rl-tag { font-size: .6rem; padding: 5px 10px; top: 10px; left: 10px; }
    .rl-strip { grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 13px 9px; }
    .rl-frame-txt { display: none; }
    .rl-frame-shot { border-radius: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    .rl-beam, .rl-grain, .rl-glow, .rl-sheen, .rl-eyebrow i, .rl-eq i { animation: none !important; }
    .rl-card, .rl-caption { transition: none !important; }
    .rl-grain { display: none; }
}

/* ==========================================================================
   76. MEGA-MENU REFRESH — text-first submenu, and a mobile drawer that fits.
   Two things were wrong with the dropdown built in sections 37/62/63:
   · every row led with an emoji in a pastel tile (`.mn-ic`). Emoji render
     differently on every OS, carry no brand, and made a B2B nav look like a
     consumer app. The spans are gone from the markup on all 18 pages; the
     hierarchy is now carried by type — bold label, quiet description — with a
     brand rule and an arrow that appear on hover.
   · on mobile the drawer capped itself at `100dvh - 84px`, but it opens below
     the *measured* header, which is ~150px once the offer banner wraps. Its
     last 60-70px (the Company panel and the "Book a demo" CTA) sat under the
     bottom edge of the screen and could not be scrolled to. The cap now uses
     the same `--fx-header-h` ui.js publishes, and the accordion is rebuilt as
     a plain sheet of rows: one line per link, 46px tap targets, dividers, and
     a nested panel that reads as a sub-list rather than a floating card.
   ========================================================================== */

/* --- the row, both layouts ------------------------------------------------ */
.mn-link {
    position: relative;
    align-items: center;
    padding-left: 15px;
}
/* brand rule that grows on hover — replaces the icon as the row's accent */
.mn-link::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 2px;
    height: 60%;
    border-radius: 2px;
    background: var(--fx-brand-grad);
    opacity: 0;
    transform: translateY(-50%) scaleY(.3);
    transform-origin: center;
    transition: opacity .2s var(--fx-ease), transform .26s var(--fx-ease);
}
.mn-link:hover::before,
.mn-link:focus-visible::before { opacity: 1; transform: translateY(-50%) scaleY(1); }
/* the row no longer slides — the rule + colour shift carry the hover state */
.mn-link:hover { background: #f4f7ff; transform: none; }
.mn-link b { transition: color .2s var(--fx-ease); }
.mn-link:hover b { color: var(--fx-brand-1); }

/* "Built for" rows: same rule, lighter weight */
.mn-link-plain {
    position: relative;
    padding-left: 15px;
    transition: color .2s var(--fx-ease), background .2s var(--fx-ease);
    border-radius: 9px;
}
.mn-link-plain:hover { background: #f4f7ff; }
.mn-link-plain::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 5px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    opacity: .35;
    transform: translateY(-50%);
    transition: width .22s var(--fx-ease), opacity .22s var(--fx-ease);
}
.mn-link-plain:hover::before { width: 9px; opacity: 1; }

/* the "View all services" row sat on a white-on-white rule (it was authored
   for a dark panel) — it never showed */
.mn-link-all {
    border-top: 1px solid var(--fx-line);
    color: var(--fx-brand-1) !important;
}
.mn-link-all::before { display: none; }

/* --- desktop: narrower panel now that the icon column is gone ------------- */
@media (min-width: 993px) {
    /* the two-up services grid (section 63) gave each service ~188px, which
       wrapped half the descriptions and the longest titles onto a second line
       — ragged rows. Without the 28px icon column the panel can spend that
       width on the text instead and every row sits on one line. */
    .mn-panel-3 { grid-template-columns: minmax(424px, 1.46fr) minmax(234px, .78fr) minmax(196px, .66fr); }
    /* the Company panel's two columns were 215px, which wrapped every
       description onto a second line */
    .mn-panel-2 { grid-template-columns: repeat(2, minmax(262px, 1fr)); }
    .mn-panel-inner { max-width: 972px; }
    .mn-link { padding: 7px 10px 7px 15px; }
    .mn-link i { display: block; }
    /* arrow slides in on hover — the row's only ornament */
    .mn-link > span:last-child { position: relative; padding-right: 16px; }
    .mn-link > span:last-child::after {
        content: "→";
        position: absolute;
        right: 0;
        top: 1px;
        font-size: .82rem;
        font-weight: 700;
        color: var(--fx-brand-1);
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity .2s var(--fx-ease), transform .24s var(--fx-ease);
    }
    .mn-link:hover > span:last-child::after { opacity: 1; transform: translateX(0); }
}

/* --- mobile: one full-height sheet, one row per destination --------------
   The floating rounded card that ended halfway down the screen, with 46px
   airy rows, a gradient pill on the current page and an indented sub-list
   behind a rule, read as three different things stacked on top of each other.
   It is one sheet now: it starts at the bottom of the header, runs to the
   bottom of the screen, and holds a single column of plain rows separated by
   hairlines. Expanding a section tints its block and indents its rows — the
   only two signals it uses. The CTA sits on the floor of the sheet.          */
@media (max-width: 992px) {
    .nav-links.mega-nav {
        left: 0;
        right: 0;
        top: 100%;
        width: auto;
        padding: 0;
        border: none;
        border-top: 1px solid var(--fx-line);
        border-radius: 0 0 16px 16px;
        background: #fff;
        box-shadow: 0 26px 44px rgba(2, 6, 23, .18);
        /* sized to its rows, capped at the screen — a fixed full-height sheet
           left a dead white half-screen under four nav items. The cap is
           measured from the header ui.js publishes; the old `100dvh - 84px`
           assumed a header 65px shorter than the real one, which pushed the
           last rows under the bottom edge of the screen. */
        height: auto;
        max-height: calc(100vh - var(--fx-header-h) - 10px);
        max-height: calc(100dvh - var(--fx-header-h) - 10px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* top-level rows. `:not(.mn-cta)` matters — this selector ties with
       `.mega-nav a.mn-cta` (both 0-2-1) and would otherwise win on order and
       strip the gradient off the button. */
    .mega-nav > .mn-item + .mn-item { border-top: 1px solid #eef1f6; }
    .mega-nav > .mn-item > a:not(.mn-cta),
    .mn-trigger {
        min-height: 54px;
        padding: 15px 20px;
        font-size: .98rem;
        font-weight: 600;
        color: #111a33;
        border-radius: 0;
        background: none;
    }
    .mega-nav > .mn-item > a.is-current:not(.mn-cta) {
        /* the gradient pill was the loudest thing in the sheet — a brand rule
           down the left edge says "you are here" without shouting */
        background: none;
        color: var(--fx-brand-1);
        box-shadow: inset 3px 0 0 var(--fx-brand-1);
    }
    .mn-chev { flex: none; color: #9aa4b8; }
    .mn-item.is-open .mn-trigger { color: var(--fx-brand-1); background: none; }
    .mn-item.is-open .mn-chev { color: var(--fx-brand-1); }

    /* the expanded block: tinted, flush, no rule or card of its own */
    .mn-panel-inner {
        gap: 0;
        margin: 0;
        padding: 0;
        border: none;
        background: #f7f9fc;
        box-shadow: inset 0 1px 0 #eef1f6, inset 0 -1px 0 #eef1f6;
    }
    .mn-col-label {
        padding: 12px 20px 4px;
        margin: 0;
        font-size: .6rem;
        letter-spacing: .16em;
        color: #a6b0c0;
    }

    /* one line per link, indented under its group */
    .mega-nav a.mn-link,
    .mega-nav a.mn-link-plain {
        align-items: center;
        min-height: 46px;
        padding: 11px 20px 11px 28px;
        border-radius: 0;
        margin: 0;
        font-size: .93rem;
        font-weight: 500;
        color: #2b3550;
    }
    .mn-link i { display: none; }          /* descriptions belong to desktop */
    .mn-link b { font-size: .93rem; font-weight: 500; color: inherit; }
    .mn-link::before, .mn-link-plain::before { display: none; }
    .mn-link:active, .mn-link-plain:active { background: #edf2fd; }
    .mega-nav a.mn-link-all {
        padding-top: 13px;
        padding-bottom: 15px;
        margin: 0;
        border-top: 1px solid #e6ebf3;
        font-weight: 700 !important;
    }

    /* CTA sits on the floor of the sheet and stays there while it scrolls */
    .mega-nav > .mn-cta-item {
        margin-top: auto;
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #eef1f6;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .mega-nav a.mn-cta {
        width: 100%;
        margin: 0;
        justify-content: center;
        min-height: 50px;
        font-size: .95rem;
    }
}

/* tablets: a full-width sheet of 54px rows reads as a page, not a menu — the
   same sheet, docked to the right half of the header instead */
@media (min-width: 600px) and (max-width: 992px) {
    .nav-links.mega-nav {
        left: auto;
        right: 0;
        width: min(400px, 100vw);
        border-left: 1px solid var(--fx-line);
    }
}

/* the promo tile's scrim was tuned for the old, shorter panel — with the
   rows now one line each the card is taller and its title sat over the light
   part of the screenshot */
.mn-feature-img::after {
    background:
        linear-gradient(to top, rgba(5, 12, 26, .97) 0%, rgba(6, 16, 34, .94) 58%, rgba(9, 21, 46, .8) 82%, rgba(9, 21, 46, .66) 100%),
        linear-gradient(120deg, rgba(6, 30, 26, .3), transparent 55%);
}

@media (prefers-reduced-motion: reduce) {
    .mn-link::before, .mn-link-plain::before, .mn-link > span:last-child::after { transition: none; }
}

/* ==========================================================================
   77. ANNOUNCEMENT BAR — one compact row at every width.
   The bar is the first thing on every page and it feeds `--fx-header-h`, so
   its height is charged to every hero on the site. On a phone it was costing
   92px: `.offer-banner-content` stacked to `flex-direction: column`
   (style.css), which put the "Claim Now" pill on its own line under two lines
   of text, and section 73b's 44px minimums made both of those rows as tall as
   they could be. Measured 92px at 320-390px, 76px at 430-768px — a 149px
   header on a 844px phone.
   It is one row now at every width: text on the left taking the space it
   needs, the pill beside it, the close button in the gutter. The pill is
   painted small but keeps a 44px tap target through a pseudo-element (the
   same trick section 73d uses for the hero dots), and below 360px it drops
   out entirely — the whole bar is already the offer link, so nothing is lost.
   ========================================================================== */
@media (max-width: 992px) {
    .offer-banner {
        height: auto;
        min-height: 40px;
        padding: 6px 44px 6px 14px;
    }

    /* the column stack is what made the bar 92px tall */
    .offer-banner .offer-banner-content {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        /* the pulse animation on a two-line block reads as jitter */
        animation: none;
    }
    .offer-banner .offer-text {
        flex: 1 1 auto;
        min-width: 0;
        font-size: .78rem;
        line-height: 1.3;
        font-weight: 700;
        text-align: center;
    }

    /* painted compact; the 44px target comes from the pseudo-element below */
    .offer-banner .cta-button-outline-white {
        flex: none;
        min-height: 0;
        margin: 0;
        padding: 5px 13px;
        font-size: .72rem;
        line-height: 1.2;
        border-width: 1px;
        box-shadow: none;
        position: relative;
    }
    .offer-banner .cta-button-outline-white::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        min-width: 44px;
        height: 44px;
    }

    .offer-banner .close-banner {
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        padding: 0;
        display: grid;
        place-items: center;
        font-size: 1.05rem;
        line-height: 1;
        border-radius: 50%;
        background: rgba(255, 255, 255, .18) !important;
    }
    .offer-banner .close-banner::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
    }
}

/* phones: the text carries the offer, the pill just repeats what tapping the
   bar already does */
@media (max-width: 480px) {
    .offer-banner .offer-text { font-size: .74rem; }
    .offer-banner .cta-button-outline-white { padding: 4px 11px; font-size: .68rem; }
}
@media (max-width: 380px) {
    .offer-banner { padding-right: 40px; }
    .offer-banner .offer-text { font-size: .72rem; }
    .offer-banner .cta-button-outline-white { display: none; }
}