/* ===========================================================
 * Lumenore — Homepage v2 (Figma: 994-29782)
 * Built on the same architecture as v2o/home.css. Token names
 * mirror the existing Figma-export pattern (var(--Name, #hex)),
 * values come from the Lumenore-New design variables.
 * ----------------------------------------------------------- */

:root{
    /* ---- Royal Blue ramp ---- */
    --Royal-Blue-Blue-50:  #e7eef8;
    --Royal-Blue-Blue-150: #b8d0fd;
    --Royal-Blue-Blue-200: #9fbae4;
    --Royal-Blue-Blue-350: #5886d0;
    --Royal-Blue-Blue-400: #4075c9;
    --Royal-Blue-Blue-450: #2863c3;
    --Royal-Blue-Blue-500: #0e48a5;
    --Royal-Blue-Blue-550: #0c3b87;
    --Royal-Blue-Blue-600: #0a3578;
    --Royal-Blue-Blue-750: #07214b;
    --Royal-Blue-Blue-850: #051A3C;
    --Royal-Blue-Blue-900: #051A3C;

    --Penn-Blue:        #001040;
    --Absolute-Black:   #212121;
    --Base-White:       #fcfcfc;

    /* ---- Violet ramp ---- */
    --Violet-Violet-50:  #f0ebf7;
    --Violet-Violet-250: #b499d7;
    --Violet-Violet-450: #7747b6;
    --Violet-Violet-500: #55298e;
    --Violet-Violet-550: #4d2580;

    /* ---- Sky Blue / Turquoise ---- */
    --SkyBlue-SkyBlue-50:    #e7f8fe;
    --SkyBlue-SkyBlue-500:   #12b6f8;
    --Turquoise-SkyBlue-50:  #e8f6fa;
    --Turquoise-SkyBlue-500: #1ca9c9;

    /* ---- Neutrals ---- */
    --Grey-Grey-100: #fbfbfb;
    --Grey-Grey-200: #f7f7f7;
    --Grey-Grey-600: #bbbbbb;
    --Grey-Grey-700: #8c8c8c;
    --Grey-Grey-800: #5e5e5e;
    --Grey-Grey-900: #2f2f2f;
    --Map-Grey:      #eaeaea;

    --blueGray-50:  #F8FAFC;
    --blueGray-200: #E2E8F0;
    --blueGray-400: #94A3B8;
    --blueGray-500: #64748B;
    --blueGray-600: #475569;
    --blueGray-700: #334155;

    /* Cool greys used in dashboard mock */
    --cool-101828: #101828;
    --cool-99a1af: #99a1af;
    --cool-6a7282: #6a7282;
    --cool-e5e7eb: #e5e7eb;
    --cool-f9fafb: #f9fafb;
    --cool-d1d5dc: #d1d5dc;

    /* ---- Gradients (exact Figma) ---- */
    --AI-Agents-Text: linear-gradient(83.02deg, #4AE7FF 51.42%, #4075C9 63.25%, #E879F9 76.03%);
    --Search-Glow:    linear-gradient(86.83deg, #22d3ee 0.77%, #3b82f6 50%, #e879f9 99.23%);
    --Explore-Button: linear-gradient(270deg, #7747b6 0%, #4075c9 50.7%, #1ca9c9 100%);
    --Compare-Button: linear-gradient(270deg, #7747b6 0%, #4075c9 50.7%, #1ca9c9 100%);
    --Tab-Bar-Bg:     linear-gradient(165.59deg, #ffffff 2.41%, #eef4ff 100.51%);
    --Active-Tab-Bg:  linear-gradient(157.45deg, #e9eff8 2.41%, #d9e3f5 100.51%);

    /* ---- Effects ---- */
    --Card-Shadow:        0 4px 14px 0 rgba(0, 0, 0, 0.25);
    --Card-Shadow-Soft:   0 2px 6px rgba(0, 0, 0, 0.08);
    --Tab-Active-Shadow:  0 10px 15px 0 rgba(0,0,0,.1), 0 4px 6px 0 rgba(0,0,0,.1);
    --Dash-Card-Shadow:   0 20px 25px -5px rgba(16,24,40,.05), 0 8px 10px -6px rgba(16,24,40,.05);
}

/* ===========================================================
 * Base reset + typography
 * ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip (not hidden) — clips horizontal overflow WITHOUT
   promoting html/body to a scroll container. Critical for
   .products-sticky (position: sticky), which silently breaks if
   html/body becomes the scroll container (overflow-x: hidden makes
   overflow-y compute to auto). `clip` does not alter overflow-y. */
html{ overflow-x: clip; }
body{
    margin: 0;
    padding: 0;
    overflow-x: clip;
    font-family: 'Inter', sans-serif;
    color: var(--Base-White, #fcfcfc);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    /* Figma full-page background — navy at top, violet glow at bottom.
       Bottom matches Rectangle 1265: violet-500 #55298e → #031430 → #051A3C */
    background-color: var(--Royal-Blue-Blue-900, #051A3C);
    background-image:
        /* Center-top cyan glow (matches hero's mix-blend-plus-lighter ellipse) */
        radial-gradient(ellipse 1000px 520px at 50% 240px,
            rgba(28, 169, 201, .16) 0%,
            rgba(40, 99, 195, .08) 42%,
            transparent 72%),
        /* Upper-left fuchsia hint */
        radial-gradient(ellipse 700px 600px at 16% 6%,
            rgba(232, 121, 249, .05) 0%,
            transparent 62%),
        /* Upper-right blue hint */
        radial-gradient(ellipse 800px 700px at 84% 5%,
            rgba(64, 117, 201, .07) 0%,
            transparent 62%),
        /* Bottom violet glow (trust + CTA + footer block) */
        radial-gradient(ellipse 1500px 1100px at 50% 86%,
            rgba(85, 41, 142, .55) 0%,
            rgba(85, 41, 142, .22) 34%,
            transparent 62%),
        /* Main vertical depth gradient through the full page */
        linear-gradient(180deg,
            var(--Royal-Blue-Blue-900, #051A3C) 0%,
            var(--Royal-Blue-Blue-850, #051A3C) 7%,
            var(--Royal-Blue-Blue-900, #051A3C) 46%,
            var(--Royal-Blue-Blue-900, #051A3C) 74%,
            var(--Royal-Blue-Blue-850, #051A3C) 88%,
            #051A3C 100%);
}
/* Unified page-wide grain texture overlay (matches Figma "grain" frames at 6% opacity) */
body::before{
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    pointer-events: none;
    z-index: 1;
    opacity: .65;
}
h1, h2, h3, h4{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    color: var(--cool-101828, #101828);
    margin: 0;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
h5, h6, p, a, li, button, input{
    font-family: 'Inter', sans-serif;
    margin: 0;
}
ul{ margin: 0; padding: 0; list-style: none; }
img{ max-width: 100%; }
a{ color: inherit; text-decoration: none; }

.container{
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ===========================================================
 * Site header — hello bar + nav bar (Figma 994:29783)
 * ----------------------------------------------------------- */
.site-top{
    position: sticky;
    top: 0;
    z-index: 200;
    border-bottom: 1px solid rgba(252, 252, 252, .2);
}

/* ── Hello bar ────────────────────────────────────────────── */
.hello-bar{
    background: var(--Royal-Blue-Blue-750, #07214b);
    border-bottom: 1px solid rgba(252, 252, 252, .2);
    padding: 10px 48px 11px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hello-bar .hello-left{
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.hello-bar .hello-badge{
    background: var(--Base-White, #fcfcfc);
    color: var(--Royal-Blue-Blue-500, #0e48a5);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}
.hello-bar .hello-message{
    color: rgba(255, 255, 255, .8);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    white-space: nowrap;
}
.hello-bar .hello-cta{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--Base-White, #fcfcfc);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 16px;
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-thickness: 1px;
    white-space: nowrap;
}
.hello-bar .hello-cta:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }
.hello-bar .hello-cta svg{ width: 14px; height: 14px; }
.hello-bar .hello-login{
    color: rgba(255, 255, 255, .9);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    padding: 8px 0 8px 16px;
    margin-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    white-space: nowrap;
}
.hello-bar .hello-login:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }
.hello-bar .hello-consult{
    color: rgba(255, 255, 255, .9);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    padding: 8px 0;
    white-space: nowrap;
}
.hello-bar .hello-consult:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }

/* ── Main nav bar ─────────────────────────────────────────── */
.site-header{
    position: relative;
    z-index: 20;
    background: var(--Royal-Blue-Blue-900, #051A3C);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    height: 81px;
    padding: 20px 48px 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo: L + UMENORE wordmark + AI superscript */
.site-header .brand-mark{
    display: inline-flex;
    align-items: center;
    height: 44px;
    color: var(--Base-White, #fcfcfc);
    text-decoration: none;
}
.site-header .brand-mark .brand-l{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 30px;
    color: var(--SkyBlue-SkyBlue-500, #12b6f8);
    margin-right: 2px;
}
.site-header .brand-mark .brand-word{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: .12em;
    color: var(--Base-White, #fcfcfc);
    position: relative;
    top: 2px;
}
.site-header .brand-mark .brand-ai{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
    color: var(--SkyBlue-SkyBlue-500, #12b6f8);
    margin-left: 4px;
    align-self: flex-start;
    margin-top: 2px;
}

/* Nav links with dropdown arrows */
.site-header .nav-links{
    display: flex;
    gap: 32px;
    align-items: center;
}
.site-header .nav-links > li > a{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .9);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    white-space: nowrap;
    cursor: pointer;
}
.site-header .nav-links > li > a:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }
.site-header .nav-links > li > a .caret{
    width: 8px;
    height: 4px;
    flex: 0 0 8px;
}
.site-header .nav-links > li > a .nav-ai-icon{
    width: 15px;
    height: 14px;
    flex: 0 0 15px;
}

/* Header CTA buttons */
.site-header .nav-actions{
    display: flex;
    align-items: center;
    gap: 12px;
}
.site-header .btn-demo{
    background:
        linear-gradient(var(--Royal-Blue-Blue-900, #051A3C), var(--Royal-Blue-Blue-900, #051A3C)) padding-box,
        var(--Explore-Button) border-box;
    border: 2px solid transparent;
    color: var(--Base-White, #fcfcfc);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.2;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition:
        transform .22s cubic-bezier(.22, .61, .36, 1),
        box-shadow .22s cubic-bezier(.22, .61, .36, 1),
        background .22s ease;
    white-space: nowrap;
}
.site-header .btn-demo:hover{
    background:
        linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) padding-box,
        var(--Explore-Button) border-box;
    transform: translateY(-1px);
    box-shadow:
        0 8px 24px -8px rgba(64, 117, 201, .55),
        0 2px 10px -2px rgba(119, 71, 182, .4);
}
.site-header .btn-start{
    background: var(--Explore-Button);
    color: var(--Base-White, #fcfcfc);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .25s ease;
}
.site-header .btn-start:hover{ filter: brightness(1.1); }

/* ===========================================================
 * Section: Hero (Figma 994:29786)
 * ----------------------------------------------------------- */
.hero-section{
    position: relative;
    background: var(--Royal-Blue-Blue-900, #051A3C);
    overflow: hidden;
    min-height: 790px;
    padding: 115px 0 120px;
    text-align: center;
    color: var(--Base-White, #fcfcfc);
}
/* Curved arc graphic */
.hero-section .hero-arc{
    position: absolute;
    left: 50%;
    top: 540px;
    transform: translateX(-50%);
    width: 140%;
    height: 480px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: transparent;
    box-shadow: 0 -2px 0 0 rgba(159, 186, 228, .35);
    filter: blur(0.5px);
    pointer-events: none;
}
/* Lighter inner arc */
.hero-section .hero-arc::after{
    content: "";
    position: absolute;
    inset: 14px 0 0 0;
    border-radius: inherit;
    box-shadow: 0 -1px 0 0 rgba(40, 99, 195, .5);
}
/* Cyan central glow */
.hero-section .hero-glow{
    position: absolute;
    left: 50%;
    top: 720px;
    transform: translate(-50%, -50%);
    width: 1100px;
    height: 380px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(28, 169, 201, .35) 0%, rgba(40, 99, 195, .15) 60%, transparent 100%);
    filter: blur(40px);
    pointer-events: none;
    mix-blend-mode: plus-lighter;
}
/* Grain overlay (top→bottom fade) */
.hero-section .hero-grain{
    position: absolute;
    inset: 0;
    opacity: .06;
    background-image: linear-gradient(180deg, #0d0d12 0%, rgba(13, 13, 18, 0) 100%);
    pointer-events: none;
}
.hero-section .container{
    position: relative;
    z-index: 2;
    max-width: 1280px;
}
.hero-content{
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
.hero-section h1{
    font-size: 56px;
    line-height: 64px;
    letter-spacing: -0.8px;
    color: var(--Base-White, #fcfcfc);
    font-weight: 300;
}
.hero-section h1 .ai-agents-gradient{
    background: var(--AI-Agents-Text);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    font-weight: 400;
}
.hero-section .hero-sub{
    color: var(--Base-White, #fcfcfc);
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    max-width: 760px;
    margin: 0 auto;
}

/* Hero search ── two layers: outer glass + inner cyan-bordered box */
.hero-search-wrap{
    position: relative;
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
}
.hero-search-glow{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 652px;
    height: 186px;
    border-radius: 350px;
    background: var(--Search-Glow);
    opacity: .3;
    filter: blur(125px);
    pointer-events: none;
}
.hero-search{
    position: relative;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Motion DNA mirroring .scene-card.sc-1 from the persona section:
       ① transform → mouse parallax (CSS-var driven by JS wireParallax on
          #heroSearchWrap), composed at slightly damped amplitudes since
          this card is larger than the persona scene-card.
       ② translate (independent property) → idle ±8px Y-float, 6.5s
          ease-in-out alternate loop (heroFloat).
       ③ scale (independent property) → reserved for hover lift.
       Three properties stay separate so they NEVER fight each other. */
    transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 4px), 0);
    transition: transform .25s ease-out, box-shadow .4s ease;
    animation:
        heroSearchReveal .65s cubic-bezier(.22, .61, .36, 1) .10s backwards,
        heroFloat 6.5s ease-in-out 1.0s infinite alternate;
    will-change: transform, translate;
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .06),
        0 24px 48px -20px rgba(14, 72, 165, .22),
        0 12px 24px -16px rgba(85, 41, 142, .10),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}
.hero-search-wrap:hover .hero-search{
    scale: 1.005;
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .08),
        0 32px 64px -22px rgba(14, 72, 165, .32),
        0 18px 36px -16px rgba(85, 41, 142, .18),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}
/* One-shot reveal — slide + scale + fade (same recipe as scReveal) */
@keyframes heroSearchReveal{
    from{ opacity: 0; transform: translate3d(0, 22px, 0) scale(.97); }
    to  { opacity: 1; transform: translate3d(0, 0, 0)    scale(1); }
}
/* Idle Y-float using `translate` so it composes with the parallax transform.
   Same ±8px amplitude / 6.5s cadence as .scene-card.sc-1 (scFloat1). */
@keyframes heroFloat{
    0%   { translate: 0 -8px; }
    100% { translate: 0  8px; }
}
@media (prefers-reduced-motion: reduce){
    .hero-search{ animation: none; transform: none; }
    .hero-search-wrap:hover .hero-search{ scale: 1; }
}
.hero-search-inner{
    background: rgba(15, 23, 42, .7);
    border: 1.666px solid var(--Turquoise-SkyBlue-500, #1ca9c9);
    border-radius: 8.884px;
    padding: 13.325px 13.325px 11.104px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 153.241px;
    text-align: left;
}
.hero-search-inner .placeholder-text{
    font-size: 14px;
    line-height: 1.3;
    color: var(--blueGray-200, #E2E8F0);
    letter-spacing: -.28px;
    /* Reserve a baseline so the inner panel doesn't reflow as characters land */
    min-height: 1.3em;
}
/* Blinking caret — pseudo element after the typed text. JS toggles
   .is-typing on the host while characters are streaming, and a separate
   .is-done state once typing finishes (caret keeps blinking). */
.hero-search-inner .placeholder-text::after{
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: -2px;
    background: var(--Turquoise-SkyBlue-500, #1ca9c9);
    border-radius: 1px;
    animation: heroCaretBlink 1s steps(1, end) infinite;
    opacity: 0;
    transition: opacity .15s ease;
}
.hero-search-inner .placeholder-text.is-typing::after,
.hero-search-inner .placeholder-text.is-done::after{
    opacity: 1;
}
/* While actively streaming we hold the caret solid (no blink) so it
   reads as a moving insertion point; on .is-done it returns to blink. */
.hero-search-inner .placeholder-text.is-typing::after{
    animation: none;
}
@keyframes heroCaretBlink{
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}
/* Tag chip hover + active polish — matches Figma royal-blue chip (#2863c3) */
.hero-search-tag{
    transition:
        background .25s cubic-bezier(.22, .61, .36, 1),
        border-color .25s cubic-bezier(.22, .61, .36, 1),
        color .25s ease,
        transform .2s ease;
}
.hero-search-tag:hover{
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}
.hero-search-tag.is-active:hover{
    background: var(--Royal-Blue-Blue-450, #2863c3);
    transform: translateY(-1px);
}
.hero-search-tag.is-active{
    box-shadow: 0 6px 16px -8px rgba(40, 99, 195, .55);
}
@media (prefers-reduced-motion: reduce){
    .hero-search-inner .placeholder-text{ transition: none; }
    .hero-search-inner .placeholder-text::after{ animation: none; opacity: 0; }
    .hero-search-tag{ transition: none; }
}
.hero-search-inner .input-row{
    display: flex;
    align-items: center;
    gap: 6.663px;
    width: 100%;
}
.hero-search-inner .icon-btn{
    width: 35.534px;
    height: 35.534px;
    border-radius: 200px;
    background: var(--blueGray-700, #334155);
    border: none;
    color: var(--Base-White, #fcfcfc);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.hero-search-inner .tools-btn{
    height: 35.534px;
    padding: 0 16px 0 12px;
    border-radius: 50px;
    background: var(--blueGray-700, #334155);
    border: none;
    color: var(--Base-White, #fcfcfc);
    display: inline-flex;
    align-items: center;
    gap: 4.442px;
    font-size: 13.33px;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
    letter-spacing: -.27px;
}
.hero-search-inner .tools-btn svg{ width: 18px; height: 18px; }
.hero-search-inner .spacer{ flex: 1; }
.hero-search-inner .explore-btn{
    background: var(--Explore-Button);
    color: var(--Base-White, #fcfcfc);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 25px;
    cursor: pointer;
}
.hero-search-inner .explore-btn svg{ width: 18px; height: 18px; }

/* Tag chips inside search card */
.hero-search-tags{
    display: flex;
    gap: 10px;
    padding: 4px 0 10px;
}
.hero-search-tag{
    height: 28px;
    padding: 6px 16px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--Grey-Grey-800, #5e5e5e);
    color: var(--Grey-Grey-100, #fbfbfb);
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.hero-search-tag.is-active{
    background: var(--Royal-Blue-Blue-450, #2863c3);
    border-color: transparent;
    color: var(--Base-White, #fcfcfc);
}

/* Footer of hero search: 100+ sources + overlap icons */
.hero-search-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.221px;
}
.hero-search-footer .src-label{
    display: inline-flex;
    align-items: center;
    gap: 6.663px;
    font-size: 13.325px;
    line-height: 1.3;
    color: var(--Base-White, #fcfcfc);
    letter-spacing: -.27px;
}
.hero-search-footer .src-label svg{ width: 20px; height: 20px; }
.hero-search-footer .src-stack{
    display: flex;
    align-items: center;
}
.hero-search-footer .src-stack .src-bubble{
    width: 28.872px;
    height: 28.872px;
    border-radius: 80.199px;
    background: var(--blueGray-600, #475569);
    border: 0.802px solid var(--blueGray-400, #94A3B8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: -4.812px;
    color: var(--Base-White, #fcfcfc);
    font-size: 9px;
    font-weight: 600;
    overflow: hidden;
}
.hero-search-footer .src-stack .src-bubble:last-child{ margin-right: 0; }
.hero-search-footer .src-stack .src-bubble svg{ width: 16px; height: 16px; }

/* ===========================================================
 * Section: Trusted / Logos (dark, matches page background)
 * ----------------------------------------------------------- */
.trusted-section{
    background: #051A3C;
    padding: 65px 0;
    text-align: center;
    position: relative;
    z-index: 2;
}
.trusted-section h2{
    /* Canonical sitewide H2 — Space Grotesk 300 / 44px / 54px / -0.6px tracking.
       Same scale used by features/personas/pricing/success/testimonial. */
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 44px;
    line-height: 54px;
    letter-spacing: -.6px;
    color: var(--Base-White, #fcfcfc);
    text-align: center;
    margin: 0 auto 50px;
    max-width: 920px;
}
.logo-slider{
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    width: 100%;
}
.logo-track{
    display: inline-flex;
    align-items: center;
    animation: scroll-left 50s linear infinite;
}
.logo-track > div{
    flex: 0 0 auto;
    margin: 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-track img{
    max-height: 52px;
    max-width: 180px;
    height: auto;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    opacity: 1;
}
@keyframes scroll-left{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ===========================================================
 * Section: Products — tabbed (Figma 994:29832)
 * ----------------------------------------------------------- */
.section-products{
    /* Solid at top, fades transparent at bottom so features gradient bleeds through */
    background: linear-gradient(180deg,
        #051A3C 0%,
        #051A3C 65%,
        transparent 100%);
    /* Scroll track — the inner .products-sticky pins for (height − 100vh) of
       scrolling, split across the 3 products. 300vh ⇒ ~66vh of scroll each,
       giving the 3rd product enough hold time before exiting. */
    height: 300vh;
    padding: 0;
    position: relative;
    z-index: 3;
    color: var(--Base-White, #fcfcfc);
}
/* Centered section heading + subheading — pinned above the products (Figma 994:29829) */
.products-intro{
    text-align: center;
    margin-bottom: 20px;
}
.products-intro .products-title{
    /* Canonical sitewide H2 — Space Grotesk 300 / 44px / 54px / -0.6px tracking */
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 44px;
    line-height: 54px;
    letter-spacing: -.6px;
    color: var(--Base-White, #fcfcfc);
    text-align: center;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    margin: 0 0 12px;
}
.products-intro .products-subtitle{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.15px;
    color: rgba(255, 255, 255, .8);
    margin: 0;
}

/* Sticky pin — full-screen stage that stays fixed while the track scrolls */
.products-sticky{
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 0;
    box-sizing: border-box;
    overflow: visible;
}
.products-sticky > .container{
    position: relative;
    z-index: 1;
    width: 100%;
}

/* ── Scroll progress dots ───────────────────────────────────── */
.product-progress{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.product-progress .pp-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(252, 252, 252, .2);
    transition: background .35s ease, width .35s ease;
}
.product-progress .pp-dot.is-active{
    width: 26px;
    border-radius: 50px;
    background: var(--SkyBlue-SkyBlue-500, #12b6f8);
}

/* ── Header row: eyebrow + segmented product switcher ───────── */
.section-products .products-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(159, 186, 228, .15);
}
.section-products .ph-eyebrow{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.165px;
    text-transform: uppercase;
    color: var(--SkyBlue-SkyBlue-500, #12b6f8);
    margin: 0;
}

/* Segmented pill switcher (glass on dark) */
.product-tabs{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px;
    background: rgba(252, 252, 252, .06);
    border: 1px solid rgba(159, 186, 228, .25);
    border-radius: 50px;
}
.product-tab{
    background: transparent;
    border: none;
    border-radius: 50px;
    padding: 9px 20px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: rgba(252, 252, 252, .55);
    cursor: pointer;
    white-space: nowrap;
    transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.product-tab:hover{ color: var(--Base-White, #fcfcfc); background: rgba(252,252,252,.07); }
.product-tab.is-active{
    background: rgba(40, 99, 195, .55);
    color: var(--Base-White, #fcfcfc);
    font-weight: 600;
    box-shadow: 0 0 0 1.5px rgba(100, 149, 237, .5), 0 4px 16px rgba(40, 99, 195, .35);
}

/* ── Two-column stage ───────────────────────────────────────── */
.product-stage{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    min-height: 0;
}

/* ── Left column: active product content ────────────────────── */
.product-detail{
    /* Per-product accent — overridden by variant classes below */
    --pd-accent: var(--Violet-Violet-450, #7747b6);
    --pd-accent-bg: rgba(119, 71, 182, .22);
    --pd-accent-border: rgba(119, 71, 182, .55);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Grouped vertical rhythm via per-element margins (see below) rather than a
       single flat gap — keeps the label tight to the heading and separates the
       body / tags / proof groups. */
    gap: 0;
}
.product-detail.is-insights{
    --pd-accent: var(--Royal-Blue-Blue-450, #2863c3);
    --pd-accent-bg: rgba(40, 99, 195, .22);
    --pd-accent-border: rgba(40, 99, 195, .55);
}
.product-detail.is-datamagnet{
    --pd-accent: var(--Turquoise-SkyBlue-500, #1ca9c9);
    --pd-accent-bg: rgba(28, 169, 201, .22);
    --pd-accent-border: rgba(28, 169, 201, .55);
}

/* ── Premium switch animation (staggered slide-fade, no blink) ──
   Each child eases in from below; outgoing content lifts away fast. */
.product-detail > *{
    transition: opacity .22s ease, transform .22s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
.product-detail > *:nth-child(1){ transition-delay: 0s; }
.product-detail > *:nth-child(2){ transition-delay: .02s; }
.product-detail > *:nth-child(3){ transition-delay: .04s; }
.product-detail > *:nth-child(4){ transition-delay: .06s; }
.product-detail > *:nth-child(5){ transition-delay: .08s; }
.product-detail > *:nth-child(6){ transition-delay: .10s; }
/* Outgoing — quick, uniform lift + fade */
.product-detail.is-leaving > *{
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .08s ease-in, transform .08s ease-in;
    transition-delay: 0s;
}
/* Incoming start state — applied instantly, then released to settle in */
.product-detail.is-entering > *{
    opacity: 0;
    transform: translateY(12px);
    transition: none;
}

.product-detail .pd-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pd-accent-bg);
    border: 1px solid var(--pd-accent-border);
    co lor: var(--pd-accent);
    padding: 6px 14px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.165px;
    text-transform: uppercase;
    /* Uniform 34px rhythm between every block in the product-detail panel:
       pill → h3 → paragraph → chips → quote → cta. */
    margin-bottom: 34px;
}
.product-detail .pd-pill::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pd-accent);
}
.product-detail h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.3px;
    color: var(--Base-White, #fcfcfc);
    margin: 0 0 34px;
   
}
.product-detail p{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    color: rgba(252, 252, 252, .72);
    margin: 0 0 34px;
    max-width: 56ch;
}
.product-detail .pd-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}
.product-detail .pd-chip{
    background: var(--pd-accent-bg);
    border: 1px solid var(--pd-accent-border);
    color: #fcfcfc;
    padding: 7px 14px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
}
/* Customer quote — glass card with brand accent rail */
.product-detail .pd-quote{
    margin: 0 0 34px;
    background: rgba(252, 252, 252, .04);
    border: 1px solid rgba(159, 186, 228, .15);
    border-left: 3px solid var(--pd-accent);
    border-radius: 12px;
    padding: 14px 20px;
    max-width: 520px;
}
.product-detail .pd-quote[hidden]{ display: none; }
.product-detail .pd-quote blockquote{
    margin: 0 0 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 15px;
    line-height: 24px;
    color: var(--Base-White, #fcfcfc);
}
.product-detail .pd-quote figcaption{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: rgba(252, 252, 252, .6);
}
/* Explore link — accent text + nudging arrow */
.product-detail .pd-cta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    color: var(--pd-accent);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    text-decoration: none;
    cursor: pointer;
    transition: filter .25s ease;
}
.product-detail .pd-cta:hover{ filter: brightness(1.15); }
.product-detail .pd-cta .pd-cta-arrow{
    transition: transform .25s ease;
}
.product-detail .pd-cta:hover .pd-cta-arrow{ transform: translateX(4px); }

/* ── Right column: product visual ───────────────────────────── */
.product-visual{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: visible;
}
/* Soft accent wash behind the GIF — wide diffuse base layer */
.product-visual::before{
    content: "";
    position: absolute;
    inset: 10% 8%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(60% 60% at 50% 50%,
        var(--pd-glow, rgba(119, 71, 182, .28)) 0%,
        transparent 70%);
    filter: blur(52px);
}
/* ── Per-product orb colors ─────────────────────────────────── */
.product-visual{
    --pv-orb-a: rgba(119, 71, 182, .72);
    --pv-orb-b: rgba(85,  41, 142, .52);
}
.product-detail.is-insights ~ .product-visual,
.product-stage:has(.is-insights) .product-visual{
    --pd-glow:  rgba(40, 99, 195, .30);
    --pv-orb-a: rgba(40, 99, 195, .72);
    --pv-orb-b: rgba(28, 169, 201, .52);
}
.product-stage:has(.is-datamagnet) .product-visual{
    --pd-glow:  rgba(28, 169, 201, .30);
    --pv-orb-a: rgba(28, 169, 201, .72);
    --pv-orb-b: rgba(18, 182, 248, .52);
}

/* ── Animated background orbs — centred on each side edge of the GIF ── */
.pv-orb{
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    will-change: opacity, transform;
    z-index: 0;
    animation: glowBreathe 7s ease-in-out infinite alternate;
    transition: background .55s ease;
}
/* Left-edge orb: centre sits on the left border, half peeks outside */
.pv-orb-a{
    top: 50%;
    left: -18%;
    width: 60%;
    height: 80%;
    translate: 0 -50%;
    background: radial-gradient(circle, var(--pv-orb-a) 0%, transparent 65%);
    transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -6px), 0);
}
/* Right-edge orb: centre sits on the right border, half peeks outside */
.pv-orb-b{
    top: 50%;
    right: -18%;
    width: 60%;
    height: 80%;
    translate: 0 -50%;
    background: radial-gradient(circle, var(--pv-orb-b) 0%, transparent 65%);
    animation-duration: 9s;
    animation-delay: 1.4s;
    transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 5px), 0);
}
.product-visual img{
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    max-height: 52vh;
    object-fit: contain;
    border-radius: 12px;
    mix-blend-mode: lighten;
    /* Float + mouse parallax — same pattern as persona scene cards.
       scFloat1 uses the `translate` independent property so `transform`
       stays free for the mouse-parallax offset. */
    animation: scFloat1 6.5s ease-in-out 0.5s infinite alternate;
    transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 8px), 0);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform, translate;
}
.product-visual.is-leaving img{
    opacity: 0;
    transform: scale(.99) translateY(-5px);
    transition: opacity .08s ease-in, transform .08s ease-in;
}
.product-visual.is-entering img{
    opacity: 0;
    transform: scale(.99) translateY(10px);
    transition: none;
}

/* Respect reduced-motion — fade only, no movement */
@media (prefers-reduced-motion: reduce){
    .product-detail > *,
    .product-visual img{
        transition: opacity .2s ease !important;
        transform: none !important;
        transition-delay: 0s !important;
    }
    .product-detail.is-entering > *,
    .product-visual.is-entering img{ transform: none !important; }
}

/* ===========================================================
 * Section: Features & Capabilities (Figma 994:29843)
 * Horizontal-scroll of light cards on dark, fading into personas
 * ----------------------------------------------------------- */
.section-features{
    position: relative;
    padding: 120px 0 150px;
    background: transparent;
    z-index: 2;
}
/* Gradient bridge extends up into the Products section and fades in from a
   transparent navy (matching the dark page canvas) so there's no hard edge —
   then ramps navy → violet → royal blue → pale blue into Features. The final
   stop is a pale brand tint (NOT pure white) so the Personas section can pick
   up exactly that colour at its top and resolve to white inside — making the
   whole flow look like one continuous gradient with no visible seam. */
.section-features::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -220px;
    bottom: 0;
    /* Stops spread evenly so the bottom half ramps gently from sky-blue
       through pale brand into the Royal-Blue-Blue-50 anchor that the
       Personas fade picks up — no crowded band of light blue near the
       boundary, no visible stripe. */
    background: linear-gradient(180deg,
        #051A3C  0%,
        #1a1e52 24%,
        #32216e 36%,
        #55298e 48%,
        #2863c5 62%,
        #5886d0 73%,
        #9fbae4 83%,
        #c8d8ee 92%,
        var(--Royal-Blue-Blue-50, #e7eef8) 100%);
    z-index: -1;
    pointer-events: none;
}
.section-features .container{
    position: relative;
    z-index: 1;
}

/* Premium intro — eyebrow pill (on-dark variant), Space Grotesk h2 with
   gradient accent on the key phrase, muted-white sub. Matches the
   Persona / Pricing / Success intro pattern, retuned for dark bg. */
.features-intro{
    text-align: center;
    max-width: 880px;
    margin: 0 auto 56px;
}
.features-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--SkyBlue-SkyBlue-300, #67d3ff);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    padding: 7px 16px;
    border-radius: 50px;
    margin: 0 0 22px;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.features-eyebrow .fe-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--SkyBlue-SkyBlue-500, #12b6f8) 0%, var(--Violet-Violet-450, #7747b6) 100%);
    box-shadow: 0 0 0 3px rgba(18, 182, 248, .18);
}
.section-features h2{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 44px;
    line-height: 54px;
    color: var(--Base-White, #fcfcfc);
    text-align: center;
    margin: 0 0 18px;
    letter-spacing: -.6px;
    max-width: none;
  
    
}
.section-features h2 .fh-accent{
    /* Plain white — matches the rest of the heading. Italic stays for
       typographic emphasis. The parent h2's text-shadow now applies
       directly (no background-clip transparency to break it). */
    color: var(--Base-White, #fcfcfc);
    font-style: italic;
}
.section-features .section-sub{
    font-family: 'inter', serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────
   FEATURES MARQUEE — single horizontal track, RIGHT → LEFT auto-scroll.
   All 12 feature cards live in one track. No clones — the JS handler
   shuffles cards through the DOM as they scroll past: when a card
   fully exits the left edge, it's appended to the end of the track
   and the track's translateX is shifted by exactly one card-width so
   the visual position is unchanged. Result: a true infinite loop
   with no visible duplication of any blog. Edges fade via mask-image
   so cards enter/exit smoothly. Hover pauses the scroll. */
.features-marquee{
    position: relative;
    overflow: hidden;
    margin: 0 -16px;
    padding: 14px 16px 28px;
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%);
            mask-image: linear-gradient(90deg,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%);
}
.features-track{
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}

/* Feature card — light grey with violet border */
.feature-card{
    flex: 0 0 313px;
    width: 313px;
    height: 278px;
    background: var(--Grey-Grey-200, #f7f7f7);
    border: 1px solid var(--Violet-Violet-250, #b499d7);
    border-radius: 8px;
    padding: 32px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .12));
    transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(85, 41, 142, .18);
}
.feature-card .fc-icon{
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--Royal-Blue-Blue-50, #e7eef8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--Royal-Blue-Blue-500, #0e48a5);
    flex: 0 0 52px;
}
.feature-card .fc-icon svg{ width: 24px; height: 24px; }
.feature-card h5{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: var(--Absolute-Black, #242424);
    margin: 0;
    min-width: 100%;
}
.feature-card p{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    color: var(--Absolute-Black, #242424);
    margin: 0;
}

/* ===========================================================
 * Section: Personas (Figma 994:29844)
 * ----------------------------------------------------------- */
/* Per-active-persona accent — set on .section-personas via JS. Defaults shown. */
.section-personas{
    --pa-accent: var(--Royal-Blue-Blue-500, #0e48a5);
    --pa-accent-secondary: var(--Violet-Violet-450, #7747b6);
    --pa-accent-glow-a: rgba(40, 99, 195, .55);
    --pa-accent-glow-b: rgba(119, 71, 182, .40);
    --pa-accent-glow-c: rgba(28, 169, 201, .25);
    --pa-accent-soft:  rgba(40, 99, 195, .08);
    --pa-accent-border: rgba(40, 99, 195, .40);

    background: var(--Base-White, #fcfcfc);
    color: var(--cool-101828, #101828);
    padding: 96px 0 132px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    isolation: isolate;
}

/* Soft entry fade — smooths the dark→light transition above into white.
   Starts a hair ABOVE the section so it overlaps where the Features
   bridge ends (both sit at --Royal-Blue-Blue-50 there), then resolves
   to pure white over ~560px with many graduated stops so no band is
   visible. Reads as one continuous ramp from dark canvas → pale tint
   → white with zero seam between the sections. */
.section-personas .personas-fade{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 560px;
    background: linear-gradient(180deg,
        /* Pin the top edge to EXACTLY #e7eef8 so the pixel at y=0 of
           Personas matches the pixel at the bottom of Features — zero
           subpixel mismatch, no visible boundary line. */
        var(--Royal-Blue-Blue-50, #e7eef8) 0%,
        rgba(231, 238, 248, 1) 6%,
        rgba(231, 238, 248, .92) 16%,
        rgba(231, 238, 248, .78) 28%,
        rgba(231, 238, 248, .62) 40%,
        rgba(231, 238, 248, .46) 52%,
        rgba(231, 238, 248, .30) 65%,
        rgba(231, 238, 248, .18) 77%,
        rgba(231, 238, 248, .08) 87%,
        rgba(231, 238, 248, .03) 94%,
        rgba(231, 238, 248, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Content sits above the fade */
.section-personas .container{
    position: relative;
    z-index: 1;
}

/* ── Intro: eyebrow + heading + sub ─────────────────────────────
   Editorial composition: a small dotted eyebrow above a Space Grotesk
   headline whose tail picks up a brand-color gradient. */
.personas-intro{
    text-align: center;
    max-width: 840px;
    margin: 0 auto 80px;
}
.personas-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--Royal-Blue-Blue-500, #0e48a5);
    background: linear-gradient(135deg, rgba(40, 99, 195, .08) 0%, rgba(119, 71, 182, .08) 100%);
    border: 1px solid rgba(40, 99, 195, .14);
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 24px;
}
.personas-eyebrow .pe-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        var(--Royal-Blue-Blue-500, #0e48a5) 0%,
        var(--Violet-Violet-450, #7747b6) 100%);
    box-shadow: 0 0 0 3px rgba(40, 99, 195, .12);
}
.section-personas h2{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 44px;
    line-height: 54px;
    text-align: center;
    color: var(--cool-101828, #101828);
    margin: 0 0 18px;
    letter-spacing: -.6px;
}
/* Gradient-text accent on the trailing portion of the headline */
.section-personas h2 .ph-accent{
    background: linear-gradient(135deg,
        var(--Royal-Blue-Blue-500, #0e48a5) 0%,
        var(--Violet-Violet-450, #7747b6) 55%,
        var(--Turquoise-SkyBlue-500, #1ca9c9) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    font-style: italic;
}
.section-personas .section-sub{
    font-family: 'inter', serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 30px;
    color: #4a5568;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

/* ── Persona Explorer: stepper (left) + dashboard showcase (right) ── */
/* ── Persona Explorer: content (left) + animated scene stage (right) ──
   The right stage holds four absolute-positioned scenes, one per persona.
   On persona change, the active scene fades + slides in while its layered
   cards stagger up sequentially — a content-first storytelling reveal. */
.persona-explorer{
    display: grid;
    grid-template-columns: minmax(320px, .95fr) minmax(0, 1.15fr);
    gap: 80px;
    align-items: center;
    position: relative;
}

/* LEFT column ───────────────────────────────────────────────── */
.pex-content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* Compact horizontal persona selector at the top of the left column */
.pex-selector{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    background: #f1f5f9;
    border: none;
    box-shadow:
        inset 0 1px 2px rgba(16, 24, 40, .05),
        0 1px 3px rgba(16, 24, 40, .04);
    border-radius: 50px;
    margin-bottom: 32px;
}
.px-tab{
    border: none;
    background: transparent;
    color: #475467;
    padding: 9px 17px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    letter-spacing: .1px;
    transition: color .3s ease, background .3s ease, box-shadow .35s ease,
                transform .35s cubic-bezier(.22, .61, .36, 1), border-color .3s ease;
    position: relative;
}
.px-tab:hover{
    color: var(--cool-101828, #101828);
    transform: translateY(-1px);
}
.px-tab.is-active{
    /* Filled brand gradient pill with glow shadow — strong hierarchy */
    background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
    color: #ffffff;
    font-weight: 600;
    transform: scale(1.05);
    box-shadow:
        0 8px 22px -8px var(--pa-accent-glow-a, rgba(40, 99, 195, .55)),
        0 3px 6px -3px var(--pa-accent-glow-b, rgba(119, 71, 182, .35)),
        inset 0 1px 0 rgba(255, 255, 255, .30);
}
.px-tab.is-active:hover{
    transform: scale(1.05) translateY(-1px);
    color: #ffffff;
}
.pex-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.pex-role-label{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--pa-accent, #0e48a5);
    margin-bottom: 18px;
    transition: color .35s ease;
}
.pex-role-label::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pa-accent);
    box-shadow: 0 0 8px var(--pa-accent);
    transition: background .35s ease, box-shadow .35s ease;
}
.pex-text h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    color: var(--cool-101828, #101828);
    margin: 0 0 22px;
    letter-spacing: -0.3px;
    max-width: 22ch;
}
.pex-text h3 .pquote{
    color: var(--pa-accent);
    opacity: .5;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 34px;
    line-height: 1;
    margin: 0 1px;
    transition: color .35s ease;
}
.pex-text p{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    color: #4a5568;
    margin: 0 0 24px;
    max-width: 48ch;
}
.persona-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.persona-chips .chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 50px;
    background: var(--pa-accent-soft, rgba(40, 99, 195, .08));
    border: 1px solid var(--pa-accent-border, rgba(40, 99, 195, .35));
    color: var(--pa-accent, #0e48a5);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    line-height: 16px;
    box-shadow: 0 1px 3px rgba(14, 72, 165, .08);
    transition: background .25s ease, border-color .25s ease, color .35s ease, box-shadow .25s ease;
}
.persona-chips .chip:hover{
    background: var(--pa-accent-soft, rgba(40, 99, 195, .14));
    border-color: var(--pa-accent, rgba(40, 99, 195, .55));
    box-shadow: 0 2px 8px rgba(14, 72, 165, .14);
}
.persona-chips .chip svg{ width: 12px; height: 12px; }

/* RIGHT column ─────────────────────────────────────────────── */
.pex-stage{
    position: relative;
    width: 100%;
    min-height: 380px;
    aspect-ratio: 4 / 3;
    isolation: isolate;
}

/* Each scene stacks at the same coordinates; only the active is visible.
   Outgoing scene slides up + fades; incoming scene fades + slides in,
   then its inner cards stagger up sequentially — Lemni-style storytelling. */
.persona-scene,
.plan-scene{
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .55s;
    pointer-events: none;
}
.persona-scene.is-on,
.plan-scene.is-on{
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .45s ease, transform .55s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
    pointer-events: auto;
}

/* Soft glowing gradient orbs INSIDE the scene — image background treatment.
   They retune per active persona via --pa-accent-glow-* and parallax-shift. */
.scene-glow{
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    will-change: transform, background;
    z-index: 0;
    transition: background .55s ease;
}
.scene-glow-a{
    top: -12%;
    left: -10%;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, var(--pa-accent-glow-a) 0%, transparent 70%);
}
.scene-glow-b{
    bottom: -12%;
    right: -8%;
    width: 64%;
    height: 64%;
    background: radial-gradient(circle, var(--pa-accent-glow-b) 0%, transparent 70%);
}

/* ── Scene cards: base "glass" panel ─────────────────────────
   White card with brand-tinted layered shadow + hairline border.
   Floats above the glow. Three animation layers compose:
     • `transform`  → mouse parallax (CSS-var-driven via .pex-stage --mx/--my)
     • `translate`  → idle "float" keyframe (independent CSS property, composes
                      with transform — see scFloat1/2/3 below)
     • `animation:scReveal` → one-shot stagger reveal when scene becomes active
*/
.scene-card{
    position: absolute;
    z-index: 1;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
            backdrop-filter: saturate(140%) blur(14px);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .06),
        0 24px 48px -20px rgba(14, 72, 165, .22),
        0 12px 24px -16px rgba(85, 41, 142, .10),
        inset 0 1px 0 rgba(255, 255, 255, .6);
    color: var(--pa-accent);
    opacity: 0;
    /* Default off-state — mouse parallax baseline (mx/my default 0) */
    transform: translate3d(0, 0, 0);
    transition: transform .25s ease-out, box-shadow .4s ease;
    will-change: opacity, transform, translate;
}
/* Active scene: each card mouse-tracks at a different amplitude, plays the
   stagger reveal, then begins a slow infinite float — all composed cleanly. */
.persona-scene.is-on .scene-card,
.plan-scene.is-on    .scene-card{
    opacity: 1;
}
.persona-scene.is-on .scene-card.sc-1,
.plan-scene.is-on    .scene-card.sc-1{
    /* `backwards` (not `both`) so the reveal's from-state applies during the
       stagger delay, but the rule's transform reclaims control afterwards —
       letting the mouse-parallax CSS-var translate take effect post-reveal. */
    transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px), 0);
    animation:
        scReveal .55s cubic-bezier(.22, .61, .36, 1) 0s backwards,
        scFloat1 6.5s ease-in-out 0.7s infinite alternate;
}
.persona-scene.is-on .scene-card.sc-2,
.plan-scene.is-on    .scene-card.sc-2{
    transform: translate3d(calc(var(--mx, 0) * -9px), calc(var(--my, 0) * 6px), 0);
    animation:
        scReveal .55s cubic-bezier(.22, .61, .36, 1) .10s backwards,
        scFloat2 7.5s ease-in-out 0.8s infinite alternate;
}
.persona-scene.is-on .scene-card.sc-3,
.plan-scene.is-on    .scene-card.sc-3{
    transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * -7px), 0);
    animation:
        scReveal .55s cubic-bezier(.22, .61, .36, 1) .18s backwards,
        scFloat3 8s   ease-in-out 0.9s infinite alternate;
}

/* Card positions — balanced layered cluster.
   Cards are stacked diagonally (top-left → mid-right → bottom-center) and
   *touch* with only a small overlap zone at each junction so the layered
   feel is preserved without obscuring content. sc-2 is also slimmer so it
   covers only the right edge of sc-1, never its primary content area. */
.scene-card.sc-1{ top: 0;    left: 0;    width: 70%; }
.scene-card.sc-2{ top: 28%;  right: 0;   width: 44%; }
.scene-card.sc-3{ top: 58%;  left: 18%;  width: 56%; }

/* ── One-shot reveal: slide + scale + fade ─────────────────── */
@keyframes scReveal{
    from{ opacity: 0; transform: translate3d(0, 22px, 0) scale(.97); }
    to  { opacity: 1; transform: translate3d(0, 0, 0)    scale(1); }
}
/* ── Idle float — uses `translate` (independent) so it composes with the
   mouse-parallax `transform` without overwriting it. */
@keyframes scFloat1{
    0%   { translate: 0 -8px; }
    100% { translate: 0  8px; }
}
@keyframes scFloat2{
    0%   { translate: 0  9px; }
    100% { translate: 0 -7px; }
}
@keyframes scFloat3{
    0%   { translate: -6px 0; }
    100% { translate:  6px 0; }
}

/* ── Stage perspective + depth backdrop ─────────────────────
   Perspective primes 3D-feel composition; the ::before adds a soft
   dot-grid texture behind the cards (5–10% opacity, masked toward the
   center) for premium depth without clutter. */
.pex-stage{
    perspective: 1400px;
    transform-style: preserve-3d;
}
.pex-stage::before{
    content: "";
    position: absolute;
    inset: -10% -6%;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(40, 99, 195, .055) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 30%, transparent 80%);
            mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, #000 30%, transparent 80%);
    opacity: .9;
}

/* ── Breathing glows — slow infinite scale + opacity pulse ──
   Uses `scale` (independent property) so it composes with the JS-driven
   parallax `transform: translate3d(...)` instead of overwriting it. */
.scene-glow{
    animation: glowBreathe 7s ease-in-out infinite alternate;
}
.scene-glow-b{ animation-duration: 8.5s; animation-delay: 1.2s; }
@keyframes glowBreathe{
    0%   { scale: 1;    opacity: 1; }
    100% { scale: 1.08; opacity: .82; }
}

/* ── Chart content animations — fire when scene becomes active ── */

/* Sparkline draws on like ink across paper */
.persona-scene.is-on .sc-spark .draw-line{
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation: drawLine 1.4s cubic-bezier(.22, .61, .36, 1) .55s forwards;
}
@keyframes drawLine{ to{ stroke-dashoffset: 0; } }

/* Top-quarter / goal bars sweep in from the left */
.persona-scene.is-on .sc-bar i,
.persona-scene.is-on .sc-progress i{
    transform-origin: left center;
    animation: barGrow 1s cubic-bezier(.22, .61, .36, 1) .55s backwards;
}
@keyframes barGrow{
    from{ transform: scaleX(0); }
    to  { transform: scaleX(1); }
}

/* ── Idle "blink" indicator on active pipeline node + KPI dots ── */
.persona-scene.is-on .sc-node-active{
    animation: nodePulseGlow 2.6s ease-in-out infinite;
}
@keyframes nodePulseGlow{
    0%, 100% { box-shadow: 0 6px 14px -6px var(--pa-accent-glow-a, rgba(40,99,195,.45)); }
    50%      { box-shadow: 0 10px 22px -6px var(--pa-accent-glow-a, rgba(40,99,195,.7)); }
}

/* ── Stage hover: deeper shadow + intensified glow ────────── */
.pex-stage:hover .scene-card,
.px-stage:hover  .scene-card{
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .08),
        0 32px 64px -22px rgba(14, 72, 165, .32),
        0 18px 36px -16px rgba(85, 41, 142, .18),
        inset 0 1px 0 rgba(255, 255, 255, .7);
}
.pex-stage:hover .scene-glow-a,
.px-stage:hover  .scene-glow-a{ opacity: 1.08; }
.pex-stage:hover .scene-glow-b,
.px-stage:hover  .scene-glow-b{ opacity: 1.08; }

/* ── Reduced-motion: keep the reveal but suppress infinite motion ── */
@media (prefers-reduced-motion: reduce){
    .persona-scene.is-on .scene-card.sc-1,
    .persona-scene.is-on .scene-card.sc-2,
    .persona-scene.is-on .scene-card.sc-3,
    .plan-scene.is-on    .scene-card.sc-1,
    .plan-scene.is-on    .scene-card.sc-2,
    .plan-scene.is-on    .scene-card.sc-3{
        animation: scReveal .35s ease-out both;
        transform: none !important;
    }
    .scene-glow,
    .persona-scene.is-on .sc-node-active{ animation: none !important; }
    .persona-scene.is-on .sc-spark .draw-line{ animation: none; stroke-dashoffset: 0; }
    .persona-scene.is-on .sc-bar i,
    .persona-scene.is-on .sc-progress i{ animation: none; transform: none; }
}

/* ── Card interior atoms ─────────────────────────────────── */
.sc-hd{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sc-eyebrow{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 14px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--pa-accent);
    opacity: .85;
}
.sc-pill{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 10.5px;
    color: var(--cool-99a1af, #99a1af);
    background: rgba(40, 99, 195, .06);
    border-radius: 50px;
    padding: 3px 9px;
}

/* Stat row used by the trend card */
.sc-stat-row{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sc-num{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 1.05;
    color: var(--cool-101828, #101828);
    letter-spacing: -.5px;
}
.sc-num-sm{ font-size: 22px; }
.sc-delta{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    color: #009966;
    background: rgba(0, 153, 102, .10);
    border-radius: 50px;
    padding: 3px 8px;
}
.sc-delta svg{ display: block; }
.sc-spark{ width: 100%; height: 56px; color: var(--pa-accent); display: block; }

/* Row list used by Top Quarters / Models / Jobs */
.sc-rows{ list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.sc-rows li{
    display: grid;
    grid-template-columns: 76px 1fr auto;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #4a5568;
}
.sc-rl{ color: var(--cool-101828, #101828); font-weight: 500; }
.sc-rv{ font-weight: 600; color: var(--cool-101828, #101828); font-size: 12px; }
.sc-bar{
    display: block;
    height: 5px;
    background: rgba(40, 99, 195, .08);
    border-radius: 50px;
    overflow: hidden;
}
.sc-bar i{
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
    border-radius: 50px;
}

/* Insight & alert cards — single line of copy with a pulsing accent dot */
.sc-insight, .sc-alert{
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(248,250,253,.95) 100%);
}
.sc-pulse{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pa-accent);
    box-shadow: 0 0 0 4px var(--pa-accent-soft);
    flex: 0 0 8px;
    margin-top: 7px;
    animation: scPulse 2.2s ease-in-out infinite;
}
.sc-pulse-warn{ background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .14); }
@keyframes scPulse{
    0%,100%{ transform: scale(1); opacity: 1; }
    50%    { transform: scale(1.25); opacity: .8; }
}
.sc-text{
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: var(--cool-101828, #101828);
}
.sc-text strong{ color: var(--pa-accent); font-weight: 700; }

/* KPI grid used by Business Leader's pulse card */
/* Business KPI grid — 1x4 horizontal row.
   A single row keeps the Business hero card the same height as the other
   personas' sc-1 cards, so the diagonal cluster overlap stays consistent
   across all scenes rather than ballooning for the 2×2 layout. */
.sc-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.sc-kpi{
    padding: 10px 10px;
    background: linear-gradient(135deg, rgba(255,255,255,.65) 0%, var(--pa-accent-soft) 100%);
    border: 1px solid var(--pa-accent-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.sc-kpi .sc-num-sm{ font-size: 19px; line-height: 1.1; }
.sc-kpi .sc-lbl{ font-size: 10px; }
.sc-lbl{ font-family: 'Inter', sans-serif; font-size: 10.5px; color: var(--cool-99a1af, #99a1af); letter-spacing: .3px; }

/* Goal progress bar */
.sc-goal{ padding: 16px 18px; }
.sc-progress{
    height: 8px;
    background: rgba(40, 99, 195, .08);
    border-radius: 50px;
    overflow: hidden;
    margin: 6px 0 8px;
}
.sc-progress i{
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
    border-radius: 50px;
}
.sc-meta{ font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--cool-99a1af, #99a1af); }
.sc-meta-r{ font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--pa-accent); }

/* Checklist for "this week's focus" */
.sc-checks{ list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.sc-checks li{
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--cool-101828, #101828);
}
.sc-check{
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
    position: relative;
    flex: 0 0 14px;
}
.sc-check::after{
    content: "";
    position: absolute;
    top: 3px;
    left: 4px;
    width: 5px;
    height: 8px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
}

/* Pipeline node strip — Model / ETL pipelines */
.sc-pipeline{ padding: 18px 18px 22px; }
.sc-nodes{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.sc-node{
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 10px 8px;
    background: rgba(40, 99, 195, .05);
    border: 1px solid var(--pa-accent-border);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--pa-accent);
    position: relative;
}
.sc-node + .sc-node::before{
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    width: 8px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--pa-accent));
    opacity: .5;
    transform: translateY(-50%);
}
.sc-node-active{
    background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px -6px var(--pa-accent-glow-a, rgba(40,99,195,.45));
}

/* Accuracy badges for the Models list */
.sc-badge{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 50px;
}
.sc-good{ background: rgba(0, 153, 102, .12); color: #009966; }
.sc-mid { background: rgba(245, 158, 11, .14); color: #b45309; }

/* Status pills for Job Health */
.sc-status{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 50px;
    text-transform: lowercase;
    letter-spacing: .3px;
}
.sc-ok  { background: rgba(0, 153, 102, .12); color: #009966; }
.sc-warn{ background: rgba(245, 158, 11, .14); color: #b45309; }

/* Big-number metric card used by Engineer's latency */
.sc-metric{
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sc-metric-num{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 40px;
    line-height: 1;
    color: var(--cool-101828, #101828);
    letter-spacing: -.5px;
}
.sc-metric-num small{
    font-size: 16px;
    color: var(--cool-99a1af, #99a1af);
    margin-left: 4px;
}
.sc-metric-foot{
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: var(--cool-99a1af, #99a1af);
}

/* ===========================================================
 * Section: Pricing — Explore (Figma 994:29853 / 401:16954)
 * ----------------------------------------------------------- */
/* Per-active-plan accent palette — JS swaps these on .section-pricing on tab change.
   Defaults match Freemium (Turquoise → Sky Blue). */
.section-pricing{
    --pa-accent: var(--Turquoise-SkyBlue-500, #1ca9c9);
    --pa-accent-secondary: var(--SkyBlue-SkyBlue-500, #12b6f8);
    --pa-accent-glow-a: rgba(28, 169, 201, .50);
    --pa-accent-glow-b: rgba(18, 182, 248, .35);
    --pa-accent-glow-c: rgba(40, 99, 195, .20);
    --pa-accent-soft:  rgba(28, 169, 201, .08);
    --pa-accent-border: rgba(28, 169, 201, .25);

    background: var(--Base-White, #fcfcfc);
    padding: 96px 0 132px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    isolation: isolate;
}

/* Desktop spacing tightening — no longer locked to 100vh so the
   section sizes to its content and doesn't add empty viewport space. */
@media (min-width: 992px){
    .section-pricing{
        padding-top: 72px;
        padding-bottom: 72px;
    }
    .section-pricing .pricing-intro{ margin-bottom: 64px; }
    .section-pricing .pricing-switcher{ margin-bottom: 64px; }
}

/* ── Intro: eyebrow + Space Grotesk heading with gradient accent + sub ─── */
.pricing-intro{
    text-align: center;
    max-width: 840px;
    margin: 0 auto 72px;
}
.pricing-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--pa-accent);
    background: linear-gradient(135deg, rgba(28, 169, 201, .08) 0%, rgba(18, 182, 248, .08) 100%);
    border: 1px solid rgba(28, 169, 201, .14);
    padding: 7px 16px;
    border-radius: 50px;
    margin-bottom: 24px;
    transition: color .4s ease;
}
.pricing-eyebrow .pe-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
    box-shadow: 0 0 0 3px rgba(28, 169, 201, .12);
    transition: background .4s ease;
}
.section-pricing h2{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 44px;
    line-height: 54px;
    text-align: center;
    color: var(--cool-101828, #101828);
    margin: 0 0 18px;
    letter-spacing: -.6px;
}
.section-pricing h2 .ph-accent{
    background: linear-gradient(135deg,
        var(--pa-accent) 0%,
        var(--pa-accent-secondary) 55%,
        var(--Violet-Violet-450, #7747b6) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    font-style: italic;
}
.section-pricing .section-sub{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 19px;
    line-height: 30px;
    color: #4a5568;
    text-align: center;
    margin: 0 auto;
    max-width: 720px;
}

/* ═══════════════════════════════════════════════════════════════════
   PRICING COMPRESSION SHOWCASE — fresh, content-first layout
   No persona copy: vertical flow → big plan toggle → compression banner
   → 3+2 feature grid → centered CTA. All accents drive off --pa-accent-*.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 2) Big plan toggle ─────────────────────────────────────────
   Centered, oversized pill switcher. Active state is the unmissable
   focal point: gradient fill + glow halo + slight scale up. */
.pricing-switcher{
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 7px;
    background: #ffffff;
    border: 1px solid rgba(40, 99, 195, .12);
    border-radius: 50px;
    margin: 0 auto 64px;
    width: fit-content;
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .04),
        0 14px 32px -16px rgba(14, 72, 165, .15);
}
.ps-pill{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px 12px 16px;
    border-radius: 50px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #4a5568;
    transition:
        background .35s ease,
        color .3s ease,
        box-shadow .35s ease,
        transform .35s cubic-bezier(.22, .61, .36, 1);
}
.ps-pill:hover{
    color: var(--cool-101828, #101828);
    transform: translateY(-1px);
}
.ps-pill.is-active{
    background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
    color: #ffffff;
    transform: scale(1.03);
    box-shadow:
        0 12px 28px -8px var(--pa-accent-glow-a),
        0 4px 8px -3px var(--pa-accent-glow-b),
        inset 0 1px 0 rgba(255, 255, 255, .30);
}
.ps-pill.is-active:hover{ transform: scale(1.03) translateY(-1px); color: #fff; }
.ps-icon{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pa-accent-soft);
    color: var(--pa-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    transition: background .35s ease, color .35s ease;
}
.ps-pill.is-active .ps-icon{
    background: rgba(255, 255, 255, .22);
    color: #ffffff;
}
.ps-label{ display: flex; flex-direction: column; text-align: left; line-height: 1; }
.ps-name{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
}
.ps-pill.is-active .ps-name{ font-weight: 700; }
.ps-caption{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11.5px;
    line-height: 15px;
    margin-top: 2px;
    opacity: .85;
}

/* ── Showcase panel: TWO premium cards in a left/right split.
   LEFT  = plan decision area (title, note, 5 numbered bullets, CTA)
   RIGHT = supporting story (eyebrow, h4, sub-bullets, stat + GIF)
   A small "→" flow indicator visually bridges them, communicating
   the compression story (this plan → this outcome). */
/* No panel box, no divider — two zones sit directly on the section
   background, separated only by the column gap. */
.pricing-showcase{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr);
    column-gap: 56px;
    align-items: stretch;
    position: relative;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Comparison-flow indicator floats over the seam between the two cards.
   Absolute-centered so the cards keep their clean rectangular silhouettes,
   while the icon visually links them as a "compression flow" cue. */
.ps-flow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, var(--pa-accent-soft) 100%);
    border: 1px solid var(--pa-accent-border);
    color: var(--pa-accent);
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .06),
        0 10px 22px -8px var(--pa-accent-glow-a);
    z-index: 3;
    animation: psFlowFloat 4.5s ease-in-out infinite alternate;
    transition: background .4s ease, border-color .4s ease, color .4s ease;
}
@keyframes psFlowFloat{
    0%   { transform: translate(-50%, -50%) translateX(-3px); }
    100% { transform: translate(-50%, -50%) translateX(3px); }
}

/* LEFT zone — premium floating box wrapping the whole plan summary.
   Soft white surface, 1px pale border, multi-layer shadow with subtle
   brand-tinted depth, gentle idle Y-float so it feels alive.
   On hover the whole box lifts, glows with brand-accent shadow, gets
   a soft accent border + glassy inset top-edge highlight.
   Three motion channels compose without conflict:
     · translate (individual)  — idle Y-float
     · transform               — hover lift (translateY)
     · scale (individual)      — hover slight scale-up
   Children (the chip cards) consume the --mx / --my parallax vars set
   on this container by the JS handler, so the chips inside still drift
   with cursor while the box itself stays anchored. */
.ps-left{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 32px 32px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(228, 232, 243, .85);
    border-radius: 24px;
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .04),
        0 18px 40px -20px rgba(14, 72, 165, .12),
        0 10px 22px -14px rgba(85, 41, 142, .06);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    will-change: translate, transform, scale, box-shadow;
    animation: psLeftIdleFloat 7.5s ease-in-out 1.4s infinite alternate;
    transition:
        transform .55s cubic-bezier(.22, .61, .36, 1),
        scale .45s cubic-bezier(.22, .61, .36, 1),
        box-shadow .55s cubic-bezier(.22, .61, .36, 1),
        border-color .4s ease,
        background .4s ease;
}
.ps-left::before{ content: none; }

@keyframes psLeftIdleFloat{
    0%   { translate: 0 -3px; }
    100% { translate: 0  3px; }
}

.ps-left:hover{
    transform: translateY(-4px);
    scale: 1.005;
    border-color: var(--pa-accent-border);
    background: rgba(255, 255, 255, .99);
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .05),
        0 32px 64px -24px var(--pa-accent-glow-a),
        0 18px 36px -18px var(--pa-accent-glow-b),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}
.ps-left-head{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
/* Plan tag — small uppercase pill, soft brand fill */
.ps-plan-tag{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 50px;
    background: var(--pa-accent-soft);
    border: 1px solid var(--pa-accent-border);
    color: var(--pa-accent);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: color .4s ease, background .4s ease, border-color .4s ease;
}
.ps-title{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -.3px;
    color: var(--cool-101828, #101828);
    margin: 0 0 14px;
    max-width: 22ch;
    transition: color .35s ease;
}
.ps-note{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: var(--cool-101828, #101828);
    margin: 0 0 28px;
    letter-spacing: -.1px;
}
/* "What's included" eyebrow — tiny uppercase label above the bullets,
   with a subtle gradient tail mark so it reads as a section delimiter. */
.ps-included-eyebrow{
    margin: 0 0 12px;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color .4s ease;
}
.ps-included-eyebrow > span{ flex: 0 0 auto; }
.ps-included-eyebrow::after{
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(228, 232, 243, .9), transparent);
    opacity: .9;
}
/* Light, minimal bullet rows — no per-row card styling, no heavy active fill.
   Inactive = muted grey body text with a small number marker.
   Active   = brand-colored text + brand-gradient number marker + soft accent rail.
   Hover    = subtle text darken + faint accent background.
   The bullets read as a clean vertical text list, not card-like blocks. */
/* ─────────────────────────────────────────────────────────────────
   FLOATING CHIP BULLETS — Launch-Strategy-inspired clickable cards.
   Each chip is a soft white floating surface with its own shadow,
   border, and depth. Active state lights up with brand-soft gradient
   + accent text + brand-glow shadow. Three composing motions:
     · translate (individual)  — idle Y-drift  (varied rhythm)
     · transform               — mouse parallax (varied intensity)
     · scale (individual)      — hover lift
   --mx / --my come from the parallax handler on .ps-left.
   ───────────────────────────────────────────────────────────────── */
.ps-bullets{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
    width: 100%;
    perspective: 1000px;
}
.psb{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(228, 232, 243, .85);
    color: var(--cool-101828, #101828);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 20px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    position: relative;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 6px 16px -10px rgba(14, 72, 165, .10);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    will-change: translate, transform, scale;
    /* --psb-hover-lift is 0 by default, -4px on hover. It rides inside the
       parallax transform so the lift composes with cursor parallax without
       fighting it. Idle (translate) and scale (hover) live on their own
       individual properties — three independent motion channels. */
    --psb-hover-lift: 0px;
    transform: translate3d(
        calc(var(--mx, 0) * var(--psb-parax-x, 4px)),
        calc(var(--my, 0) * var(--psb-parax-y, 2px) + var(--psb-hover-lift)),
        0
    );
    transition:
        transform .5s cubic-bezier(.22, .61, .36, 1),
        scale .4s cubic-bezier(.22, .61, .36, 1),
        box-shadow .5s cubic-bezier(.22, .61, .36, 1),
        background .4s ease,
        border-color .4s ease,
        color .35s ease;
    /* Stagger reveal + gentle idle Y-float. nth-child rules below tune
       both the reveal delay and the idle rhythm per chip. */
    animation:
        psbEnter .55s cubic-bezier(.22, .61, .36, 1) var(--psb-enter-delay, 0s) backwards,
        psbIdleFloat var(--psb-idle-dur, 6s) ease-in-out var(--psb-idle-delay, 1s) infinite alternate;
}
.psb-text{ flex: 1 1 auto; min-width: 0; }
/* Right-edge arrow — faint by default, animates in on hover/active.
   Sits on a brand-accent color so it harmonises with the active state. */
.psb-arrow{
    flex: 0 0 auto;
    margin-left: 8px;
    color: var(--pa-accent);
    font-size: 15px;
    line-height: 1;
    opacity: .35;
    will-change: transform, opacity;
    transition:
        transform .35s cubic-bezier(.22, .61, .36, 1),
        opacity .3s ease,
        color .35s ease;
}
.psb:hover .psb-arrow{
    opacity: .9;
    transform: translateX(3px);
}
.psb.is-active .psb-arrow{
    opacity: 1;
    transform: translateX(2px);
}
.psb.is-active:hover .psb-arrow{
    transform: translateX(4px);
}

/* Stagger + idle rhythms — different per chip = layered depth */
.psb:nth-child(1){ --psb-enter-delay: 0s;    --psb-idle-dur: 5.5s; --psb-idle-delay: 1s;   --psb-parax-x: 6px; --psb-parax-y: 3px; }
.psb:nth-child(2){ --psb-enter-delay: .07s;  --psb-idle-dur: 6.2s; --psb-idle-delay: 1.2s; --psb-parax-x: 4px; --psb-parax-y: 2px; }
.psb:nth-child(3){ --psb-enter-delay: .14s;  --psb-idle-dur: 5.8s; --psb-idle-delay: 1.4s; --psb-parax-x: 2px; --psb-parax-y: 1px; }
.psb:nth-child(4){ --psb-enter-delay: .21s;  --psb-idle-dur: 6.5s; --psb-idle-delay: 1.6s; --psb-parax-x: 5px; --psb-parax-y: 2px; }
.psb:nth-child(5){ --psb-enter-delay: .28s;  --psb-idle-dur: 6s;   --psb-idle-delay: 1.8s; --psb-parax-x: 7px; --psb-parax-y: 3px; }

/* Premium hover: lift, slight scale-up, deeper brand-glow shadow,
   accent border, and a soft inset top-edge highlight that gives the
   chip a glassy "lit-from-above" look. All transitions are smoothed
   on a single cubic-bezier curve so the lift / glow / scale move in
   lockstep. */
.psb:hover{
    --psb-hover-lift: -4px;
    scale: 1.025;
    border-color: var(--pa-accent-border);
    background: rgba(255, 255, 255, .98);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 24px 48px -16px var(--pa-accent-glow-a),
        0 12px 24px -10px var(--pa-accent-glow-b),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

.psb.is-active{
    bac kground: var(--pa-accent-soft);
    border-color: var(--pa-accent-border);
    color: var(--pa-accent);
    font-weight: 500;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 18px 36px -14px var(--pa-accent-glow-a),
        0 8px 18px -8px var(--pa-accent-glow-b),
        inset 0 1px 0 rgba(255, 255, 255, .85);
}
.psb.is-active:hover{
    --psb-hover-lift: -4px;
    scale: 1.03;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .07),
        0 28px 56px -16px var(--pa-accent-glow-a),
        0 14px 28px -10px var(--pa-accent-glow-b),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

@keyframes psbEnter{
    from { opacity: 0; translate: -8px 4px; scale: .98; }
    to   { opacity: 1; translate: 0 0;      scale: 1;   }
}
@keyframes psbIdleFloat{
    0%   { translate: 0 -2px; }
    100% { translate: 0  2px; }
}

.ps-cta{
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 22px;
    text-decoration: none;
    box-shadow:
        0 10px 24px -10px var(--pa-accent-glow-a),
        0 3px 6px -3px var(--pa-accent-glow-b),
        inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .3s ease, box-shadow .35s ease;
    cursor: pointer;
}
.ps-cta:hover{
    transform: translateY(-2px);
    box-shadow:
        0 16px 32px -12px var(--pa-accent-glow-a),
        0 6px 10px -4px var(--pa-accent-glow-b);
}
.ps-cta .ps-cta-arrow{ display: inline-flex; transition: transform .3s ease; }
.ps-cta:hover .ps-cta-arrow{ transform: translateX(4px); }

/* RIGHT zone — content-only column inside the unified panel.
   No card border, no card shadow, no background — just content. */
.ps-right{
    position: relative;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.ps-right::before{ content: none; }
.ps-right > *{ position: relative; z-index: 1; }

/* Mid-swap state — JS adds .is-swapping briefly, swaps content, removes class.
   Content fades + lifts during the swap so the change feels intentional. */
.ps-right .psr-eyebrow,
.ps-right .psr-title,
.ps-right .psr-comp-chip,
.ps-right .psr-bullets,
.ps-right .psr-stat,
.ps-right .psr-stage{
    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.22, .61, .36, 1);
}
.ps-right.is-swapping .psr-eyebrow,
.ps-right.is-swapping .psr-title,
.ps-right.is-swapping .psr-comp-chip,
.ps-right.is-swapping .psr-bullets,
.ps-right.is-swapping .psr-stat,
.ps-right.is-swapping .psr-stage{
    opacity: 0;
    transform: translateY(8px);
}
/* Staggered reveal — when .is-swapping is removed, content blocks fade
   back in one after another for a premium cascade. */
.ps-right .psr-eyebrow   { transition-delay: 0s;    }
.ps-right .psr-title     { transition-delay: .04s;  }
.ps-right .psr-comp-chip { transition-delay: .08s;  }
.ps-right .psr-bullets   { transition-delay: .12s;  }
.ps-right .psr-stat      { transition-delay: .18s;  }
.ps-right .psr-stage     { transition-delay: .24s;  }
/* But during the leaving (is-swapping ON) state, kill the delays so the
   exit is uniform-quick — only the entrance is staggered. */
.ps-right.is-swapping .psr-eyebrow,
.ps-right.is-swapping .psr-title,
.ps-right.is-swapping .psr-comp-chip,
.ps-right.is-swapping .psr-bullets,
.ps-right.is-swapping .psr-stat,
.ps-right.is-swapping .psr-stage{
    transition-delay: 0s;
}

.psr-eyebrow{
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--pa-accent);
    margin-bottom: 14px;
    transition: color .4s ease;
}
.psr-title{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 32px;
    color: var(--cool-101828, #101828);
    margin: 0 0 18px;
    letter-spacing: -.2px;
    
}
.psr-bullets{
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.psr-bullets li{
    position: relative;
    padding-left: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #4a5568;
}
.psr-bullets li::before{
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
    box-shadow: 0 0 0 3px var(--pa-accent-soft);
    transition: background .4s ease, box-shadow .4s ease;
}

/* Legacy .psr-bottom wrapper (no longer used in markup, but retained for any
   stragglers); kept neutral so it doesn't paint or layout. */
.psr-bottom{
    display: contents;
}
.psr-bottom::after{ content: none; }
/* Comp-chip caption — equal visual weight to the bullet list. Same Inter
   400 14/22 grey body text, no italic, no box, no arrow. Sits between h4
   and the bulleted list as a one-line "from/to" context line. */
.psr-comp-chip{
    display: block;
    margin: 0 0 12px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    color: #4a5568;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
}
.psr-comp-chip strong{
    color: inherit;
    font-weight: inherit;
    font-style: inherit;
    background: none;
    padding: 0;
}

/* Stat — flat inline row beneath the GIF. Brand-accent serif number on the
   left, muted body caption on the right. No rail, no eyebrow, no box. */
.psr-stat{
    position: relative;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: baseline;
    gap: 16px;
    box-shadow: none;
    transition: color .4s ease;
}
.psr-stat::before{ content: none; }
.psr-stat-num{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 36px;
    line-height: 1;
    margin: 0;
    letter-spacing: -.5px;
    color: var(--pa-accent);
    flex: 0 0 auto;
    transition: color .4s ease;
    /* Brief scale-pulse on each new render so the number "lands" */
    animation: psrStatNumPulse .9s cubic-bezier(.22, .61, .36, 1) both;
    transform-origin: left center;
}
.psr-stat-num small{
    font-size: 20px;
    margin-left: 2px;
    opacity: .7;
    font-weight: 300;
    color: var(--pa-accent);
}
.psr-stat-cap{
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 19px;
    color: #4a5568;
    margin: 0;
    flex: 1 1 auto;
    align-self: center;
    max-width: none;
}
@keyframes psrStatNumPulse{
    0%   { opacity: 0; transform: translateY(6px) scale(.96); }
    60%  { opacity: 1; transform: translateY(0)   scale(1.02); }
    100% { opacity: 1; transform: translateY(0)   scale(1); }
}
/* ─────────────────────────────────────────────────────────────────
   LAYERED VISUAL STAGE — premium "Launch-Strategy"-style composition.
   The stage is a relative container holding:
     · .psr-stage-bg   — ambient brand-tinted backdrop (breathes)
     · .psr-media      — main GIF visual hero (idle Y-float, mouse parallax)
     · .psr-float-top  — floating "live sync" chip overlapping top-right
     · .psr-float-bottom — floating mini-metric card overlapping bottom-left
   Each layer animates on a different rhythm and parallaxes at a
   different intensity, producing layered z-depth.
   --mx / --my are CSS variables set by the parallax JS handler in
   the [-0.5, 0.5] range.
   ───────────────────────────────────────────────────────────────── */
.psr-stage{
    position: relative;
    margin-top: 22px;
    padding: 10px 10px 14px;
    isolation: isolate;
}

/* Ambient brand-tinted backdrop — soft radial wash behind the GIF.
   Counter-parallax (moves opposite cursor) for furthest-back depth. */
.psr-stage-bg{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 50% 55%, var(--pa-accent-soft) 0%, transparent 72%);
    filter: blur(8px);
    opacity: .55;
    z-index: 0;
    pointer-events: none;
    border-radius: 24px;
    transform: translate3d(
        calc(var(--mx, 0) * -4px),
        calc(var(--my, 0) * -3px),
        0
    );
    animation: psrStageBreathe 8s ease-in-out infinite alternate;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
@keyframes psrStageBreathe{
    0%   { opacity: .42; scale: .96; }
    100% { opacity: .68; scale: 1.04; }
}

/* Main GIF — matches the Persona scene-card "sc-1" motion DNA:
     · transform   → mouse parallax CO-direction with cursor (10px × mx,
                     8px × my) so it reads as the foreground layer.
     · translate   → idle Y-float ±8px, 6.5s ease-in-out infinite alternate
                     (mirror of scFloat1).
     · scale + translate via psrMediaEnter → one-shot slide-up + scale-up
                     reveal (22px / .97), backwards fill so the from-state
                     applies during the .10s pre-delay.
   These three motion channels live on three different CSS properties
   (transform, translate, scale) so they compose without fighting. */
.psr-media{
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    backg round: linear-gradient(135deg, var(--pa-accent-soft) 0%, rgba(255, 255, 255, 1) 100%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .06),
        0 24px 48px -20px rgba(14, 72, 165, .22),
        0 12px 24px -16px rgba(85, 41, 142, .10),
        inset 0 1px 0 rgba(255, 255, 255, .6);
    animation:
        psrMediaEnter .65s cubic-bezier(.22, .61, .36, 1) .10s backwards,
        psrMediaFloat 6.5s ease-in-out 1s infinite alternate;
    will-change: translate, transform, box-shadow;
    transform: translate3d(
        calc(var(--mx, 0) * 10px),
        calc(var(--my, 0) *  8px),
        0
    );
    transition:
        box-shadow .4s ease,
        transform .25s ease-out;
}
.psr-media:hover{
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .08),
        0 32px 60px -20px rgba(14, 72, 165, .28),
        0 18px 34px -16px rgba(85, 41, 142, .14),
        inset 0 1px 0 rgba(255, 255, 255, .7);
}
@keyframes psrMediaEnter{
    from { opacity: 0; translate: 0 22px; scale: .97; }
    to   { opacity: 1; translate: 0 0;    scale: 1;   }
}
@keyframes psrMediaFloat{
    0%   { translate: 0 -8px; }
    100% { translate: 0  8px; }
}
.psr-media img,
.psr-media video{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .35s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}
.ps-right.is-swapping .psr-media img,
.ps-right.is-swapping .psr-media video{
    opacity: 0;
    transform: scale(.985);
}

/* Swap state — fade the ambient backdrop alongside the GIF. */
.ps-right.is-swapping .psr-stage-bg{
    opacity: 0;
    transition: opacity .3s ease;
}

/* Reduced-motion — strip all idle/parallax/pulse animation in the stage. */
@media (prefers-reduced-motion: reduce){
    .ps-right .psr-eyebrow,
    .ps-right .psr-title,
    .ps-right .psr-comp-chip,
    .ps-right .psr-bullets,
    .ps-right .psr-stat,
    .ps-right .psr-stage,
    .psr-media img,
    .psr-media video{
        transition: opacity .2s ease !important;
        transform: none !important;
    }
    .psr-media,
    .psr-stage-bg{
        animation: none !important;
        transform: none !important;
    }
    /* Strip the left-chip motion suite too — keep static chips */
    .psb{
        animation: none !important;
        transform: none !important;
        translate: 0 0 !important;
        scale: 1 !important;
        transition: background .2s ease, color .2s ease, border-color .2s ease !important;
    }
    /* And the left box's idle float + hover lift — keep static */
    .ps-left{
        animation: none !important;
        transform: none !important;
        translate: 0 0 !important;
        scale: 1 !important;
        transition: box-shadow .2s ease, border-color .2s ease, background .2s ease !important;
    }
    /* Success + Testimonial — kill idle/parallax/reveal animations */
    .story-card,
    .testimonial-card,
    .testimonial-tab{
        animation: none !important;
        transform: none !important;
        translate: 0 0 !important;
        scale: 1 !important;
        opacity: 1 !important;
    }
    /* Features marquee — stop the infinite loop; let the track scroll
       horizontally instead so the cards remain accessible. */
    .features-track{
        animation: none !important;
        transform: none !important;
    }
    .features-marquee{
        overflow-x: auto;
        -webkit-mask-image: none !important;
                mask-image: none !important;
    }
}

/* ===========================================================
 * Section: Success Stories — carousel (Figma 994:29866)
 * ----------------------------------------------------------- */
/* ─────────────────────────────────────────────────────────────────
   SUCCESS STORIES — premium SaaS theme. Brand palette (Turquoise /
   SkyBlue) drives accent on the eyebrow, gradient on the headline,
   and the glow tints inside card shadows.
   Cards use the same motion DNA as Persona scene cards:
     · transform   → mouse parallax co-direction
     · translate   → idle Y-float (varied rhythms via nth-child)
     · scale       → hover lift
   Stagger reveal fires when the carousel enters the viewport. */
.section-success{
    --ss-accent: var(--Turquoise-SkyBlue-500, #1ca9c9);
    --ss-accent-secondary: var(--SkyBlue-SkyBlue-500, #12b6f8);
    --ss-accent-glow-a: rgba(28, 169, 201, .22);
    --ss-accent-glow-b: rgba(18, 182, 248, .14);
    --ss-accent-soft:  rgba(28, 169, 201, .08);
    --ss-accent-border: rgba(28, 169, 201, .22);

    background: var(--Base-White, #fcfcfc);
    padding: 88px 0 96px;
    position: relative;
    z-index: 2;
    isolation: isolate;
}
.success-intro{
    text-align: center;
    max-width: 840px;
    margin: 0 auto 48px;
}
.success-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ss-accent);
    background: linear-gradient(135deg, var(--ss-accent-soft) 0%, rgba(18, 182, 248, .08) 100%);
    border: 1px solid var(--ss-accent-border);
    padding: 7px 16px;
    border-radius: 50px;
    margin: 0 0 22px;
}
.success-eyebrow .se-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ss-accent) 0%, var(--ss-accent-secondary) 100%);
    box-shadow: 0 0 0 3px rgba(28, 169, 201, .12);
}
.section-success h2{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 44px;
    line-height: 54px;
    text-align: center;
    color: var(--cool-101828, #101828);
    margin: 0 0 18px;
    letter-spacing: -.6px;
}
.section-success h2 .sh-accent{
    background: linear-gradient(135deg,
        var(--ss-accent) 0%,
        var(--ss-accent-secondary) 55%,
        var(--Violet-Violet-450, #7747b6) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    font-style: italic;
}
.section-success .section-sub{
    font-family: 'inter', serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    color: #4a5568;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

/* Carousel container — keeps grid layout; sets --mx/--my for cards. */
.stories-carousel{
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    gap: 28px;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

/* "See all case studies" CTA — centered below the carousel (Figma 994:29867).
   The button itself is .btn-primary (canonical gradient pill); this wrapper
   only handles centering and top spacing so the CTA breathes from the cards. */
.success-cta{
    display: flex;
    justify-content: center;
    margin-top: 36px;
    /* Subtle entry — fades and slides up when the section scrolls into view,
       reusing the storiesCarousel reveal trigger (.is-revealed sets on the
       carousel; we tie the CTA's transition to it via the parent .container). */
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity .55s cubic-bezier(.22, .61, .36, 1) .35s,
        transform .55s cubic-bezier(.22, .61, .36, 1) .35s;
}
.stories-carousel.is-revealed ~ .success-cta,
.section-success .stories-carousel.is-revealed + .success-cta{
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
    .success-cta{ opacity: 1; transform: none; transition: none; }
}

/* Premium round arrow buttons — soft white surface, brand-glow shadow,
   hover lift + scale matching the chip/box hover language. */
.stories-arrow{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(228, 232, 243, .85);
    color: var(--ss-accent);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .05),
        0 8px 18px -10px var(--ss-accent-glow-a);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    transition:
        transform .4s cubic-bezier(.22, .61, .36, 1),
        scale .35s cubic-bezier(.22, .61, .36, 1),
        box-shadow .4s ease,
        border-color .35s ease,
        color .35s ease;
}
.stories-arrow:hover{
    scale: 1.06;
    transform: translateY(-2px);
    border-color: var(--ss-accent-border);
    color: var(--ss-accent-secondary);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .07),
        0 16px 30px -12px var(--ss-accent-glow-a),
        0 8px 18px -8px var(--ss-accent-glow-b);
}
.stories-arrow:disabled,
.stories-arrow.is-disabled{
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}
.stories-arrow svg{ width: 16px; height: 16px; }

.stories-viewport{
    overflow: hidden;
    padding: 8px 4px 32px; /* room for hover lift + idle float */
    margin: -8px -4px -32px;
}
.stories-track{
    display: flex;
    gap: 24px;
    transition: transform .65s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

/* Story card — premium floating card with multi-layer brand-tinted
   shadow + bright white border for that glassy "lit-from-above" feel.
   Idle Y-float on `translate`, mouse parallax on `transform`, hover
   lift via `scale` + an extra translateY ride inside the parallax calc
   through `--story-hover-lift`. */
.story-card{
    flex: 0 0 360px;
    width: 360px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    position: relative;
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .05),
        0 18px 36px -18px rgba(14, 72, 165, .14),
        0 10px 22px -14px rgba(85, 41, 142, .08),
        inset 0 1px 0 rgba(255, 255, 255, .6);
    --story-hover-lift: 0px;
    transform: translate3d(
        calc(var(--mx, 0) * 6px),
        calc(var(--my, 0) * 4px + var(--story-hover-lift)),
        0
    );
    transition:
        transform .55s cubic-bezier(.22, .61, .36, 1),
        scale .4s cubic-bezier(.22, .61, .36, 1),
        box-shadow .5s cubic-bezier(.22, .61, .36, 1),
        border-color .4s ease;
    /* Reveal hidden until the carousel enters the viewport */
    opacity: 0;
    translate: 0 18px;
    will-change: translate, transform, scale, box-shadow;
}
/* Once the JS adds .is-revealed on the carousel, cards stagger in
   with their own delay AND begin a gentle idle Y-float on different
   rhythms — borrowed straight from the Persona scene-card pattern. */
.stories-carousel.is-revealed .story-card{
    animation:
        storyCardReveal .7s cubic-bezier(.22, .61, .36, 1) var(--story-enter-delay, 0s) forwards,
        storyCardIdle var(--story-idle-dur, 6.5s) ease-in-out var(--story-idle-delay, 1.4s) infinite alternate;
}
.story-card:nth-child(1){ --story-enter-delay:  0s;    --story-idle-dur: 6.4s; --story-idle-delay: 1.2s; }
.story-card:nth-child(2){ --story-enter-delay:  .08s;  --story-idle-dur: 7.0s; --story-idle-delay: 1.4s; }
.story-card:nth-child(3){ --story-enter-delay:  .16s;  --story-idle-dur: 6.6s; --story-idle-delay: 1.6s; }
.story-card:nth-child(4){ --story-enter-delay:  .24s;  --story-idle-dur: 7.4s; --story-idle-delay: 1.8s; }
.story-card:nth-child(5){ --story-enter-delay:  .32s;  --story-idle-dur: 6.8s; --story-idle-delay: 2.0s; }

@keyframes storyCardReveal{
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0;    }
}
@keyframes storyCardIdle{
    0%   { translate: 0 -4px; }
    100% { translate: 0  4px; }
}

.story-card:hover{
    --story-hover-lift: -4px;
    scale: 1.015;
    border-color: var(--ss-accent-border);
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .07),
        0 28px 56px -20px var(--ss-accent-glow-a),
        0 16px 32px -16px var(--ss-accent-glow-b),
        inset 0 1px 0 rgba(255, 255, 255, .8);
}

.story-card .story-image{
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ss-accent-soft) 0%, rgba(255, 255, 255, 1) 100%);
    position: relative;
}
.story-card .story-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: scale .6s cubic-bezier(.22, .61, .36, 1);
}
.story-card:hover .story-image img{
    scale: 1.04;
}
.story-card .story-body{
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
}
.story-card .story-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 16px;
    color: var(--ss-accent);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 0 0 14px;
}
.story-card .story-eyebrow .story-eyebrow-dot{
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ss-accent) 0%, var(--ss-accent-secondary) 100%);
    box-shadow: 0 0 0 3px var(--ss-accent-soft);
}
.story-card .story-title{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 28px;
    color: var(--cool-101828, #101828);
    letter-spacing: -.3px;
    margin: 0 0 22px;
    flex: 1;
}
.story-card .story-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--ss-accent);
    letter-spacing: -.1px;
    align-self: flex-start;
    transition: color .35s ease, gap .35s cubic-bezier(.22, .61, .36, 1);
}
.story-card:hover .story-link{
    color: var(--ss-accent-secondary);
    gap: 12px;
}
.story-card .story-link svg{
    width: 14px;
    height: 14px;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.story-card:hover .story-link svg{ transform: translateX(2px); }

/* ===========================================================
 * Section: Testimonials — tabs + big quote (Figma 994:29873)
 * ----------------------------------------------------------- */
/* ─────────────────────────────────────────────────────────────────
   TESTIMONIALS — premium SaaS theme. Brand palette: Royal Blue +
   Violet. Outer card is a single floating glass surface; tabs are
   chip cards (mirroring the pricing .psb hover/active language);
   quote text is Space Grotesk serif for editorial weight. Auto-tab
   rotation in JS triggers a fade swap via .is-swapping. */
.section-testimonial{
    --ts-accent: var(--Royal-Blue-Blue-500, #0e48a5);
    --ts-accent-secondary: var(--Violet-Violet-450, #7747b6);
    --ts-accent-glow-a: rgba(14, 72, 165, .18);
    --ts-accent-glow-b: rgba(85, 41, 142, .14);
    --ts-accent-soft:  rgba(14, 72, 165, .07);
    --ts-accent-border: rgba(14, 72, 165, .22);

    /* Long, many-stop fade from solid white to fully transparent —
       gives the blurred Figma gradient (painted by .page-finale::before
       extending up into this zone) plenty of runway to bloom through
       gradually. No abrupt opacity step = no perceptible band. */
    background: linear-gradient(180deg,
        var(--Base-White, #fcfcfc) 0%,
        var(--Base-White, #fcfcfc) 58%,
        rgba(252, 252, 252, .92) 68%,
        rgba(252, 252, 252, .75) 76%,
        rgba(252, 252, 252, .55) 83%,
        rgba(252, 252, 252, .35) 89%,
        rgba(252, 252, 252, .18) 94%,
        rgba(252, 252, 252, .06) 97%,
        rgba(252, 252, 252, 0) 100%);
    padding: 96px 0 180px;
    position: relative;
    /* Higher than .page-finale so the testimonial card paints over
       the page-finale's blurred ::before that reaches up into here. */
    z-index: 3;
    isolation: isolate;
}
.section-testimonial::after{ content: none; }
.testimonial-intro{
    text-align: center;
    max-width: 840px;
    margin: 0 auto 56px;
    position: relative;
    z-index: 2;
}
.testimonial-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ts-accent);
    background: linear-gradient(135deg, var(--ts-accent-soft) 0%, rgba(85, 41, 142, .06) 100%);
    border: 1px solid var(--ts-accent-border);
    padding: 7px 16px;
    border-radius: 50px;
    margin: 0 0 22px;
}
.testimonial-eyebrow .te-dot{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ts-accent) 0%, var(--ts-accent-secondary) 100%);
    box-shadow: 0 0 0 3px rgba(14, 72, 165, .12);
}
.section-testimonial h2{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 44px;
    line-height: 54px;
    text-align: center;
    color: var(--cool-101828, #101828);
    margin: 0 0 18px;
    letter-spacing: -.6px;
}
.section-testimonial h2 .th-accent{
    background: linear-gradient(135deg,
        var(--ts-accent) 0%,
        var(--ts-accent-secondary) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    font-style: italic;
}
.section-testimonial .section-sub{
    font-family: 'inter', serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    color: #4a5568;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

/* Outer testimonial card — premium floating glass surface with
   multi-layer brand-tinted shadow + bright white inset highlight.
   Gentle idle Y-float so it feels alive, and a subtle cursor parallax
   driven by --mx / --my (set by the JS handler attached to this card). */
.testimonial-card{
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 28px;
    padding: 56px 56px 52px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 44px;
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .05),
        0 32px 64px -28px var(--ts-accent-glow-a),
        0 18px 36px -22px var(--ts-accent-glow-b),
        inset 0 1px 0 rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    will-change: translate, transform, box-shadow;
    transform: translate3d(
        calc(var(--mx, 0) * 6px),
        calc(var(--my, 0) * 4px),
        0
    );
    animation: testimonialCardIdle 8s ease-in-out 1.5s infinite alternate;
    transition:
        transform .55s cubic-bezier(.22, .61, .36, 1),
        box-shadow .5s cubic-bezier(.22, .61, .36, 1),
        border-color .4s ease;
}
@keyframes testimonialCardIdle{
    0%   { translate: 0 -3px; }
    100% { translate: 0  3px; }
}
.testimonial-card:hover{
    border-color: var(--ts-accent-border);
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .06),
        0 40px 80px -28px var(--ts-accent-glow-a),
        0 22px 44px -22px var(--ts-accent-glow-b),
        inset 0 1px 0 rgba(255, 255, 255, .85);
}

/* ── Tabs row — chip cards mirroring the pricing .psb hover language ── */
.testimonial-tabs{
    display: flex;
    gap: 12px;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    flex-wrap: wrap;
}
.testimonial-tab{
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(228, 232, 243, .85);
    border-radius: 14px;
    padding: 12px 16px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 240px;
    flex: 0 1 auto;
    position: relative;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 6px 16px -10px var(--ts-accent-glow-a);
    --tt-hover-lift: 0px;
    transform: translate3d(0, var(--tt-hover-lift), 0);
    transition:
        transform .5s cubic-bezier(.22, .61, .36, 1),
        scale .4s cubic-bezier(.22, .61, .36, 1),
        box-shadow .45s cubic-bezier(.22, .61, .36, 1),
        background .4s ease,
        border-color .4s ease,
        color .35s ease;
}
.testimonial-tab .tt-name{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--cool-101828, #101828);
    white-space: nowrap;
    transition: color .35s ease;
}
.testimonial-tab .tt-role{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #4a5568;
    white-space: nowrap;
}
.testimonial-tab:hover:not(.is-active){
    --tt-hover-lift: -3px;
    scale: 1.02;
    border-color: var(--ts-accent-border);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .05),
        0 14px 28px -12px var(--ts-accent-glow-a),
        0 6px 14px -8px var(--ts-accent-glow-b);
}
.testimonial-tab.is-active{
    backg round: var(--ts-accent-soft);
    border-color: var(--ts-accent-border);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .05),
        0 18px 36px -14px var(--ts-accent-glow-a),
        0 8px 18px -8px var(--ts-accent-glow-b),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}
.testimonial-tab.is-active .tt-name{
    color: var(--ts-accent);
    font-weight: 600;
}

/* ── Quote body — editorial Space Grotesk text, brand-gradient quote mark ── */
.testimonial-body{
    display: flex;
    gap: 36px;
    align-items: flex-start;
    width: 100%;
    transition:
        opacity .4s ease,
        transform .5s cubic-bezier(.22, .61, .36, 1);
}
.testimonial-card.is-swapping .testimonial-body{
    opacity: 0;
    transform: translateY(8px);
}
.testimonial-body .quote-mark{
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    color: var(--ts-accent);
    opacity: .35;
    /* Brand-gradient via mask so the SVG fill becomes a gradient */
    background: linear-gradient(135deg, var(--ts-accent) 0%, var(--ts-accent-secondary) 100%);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path d='M22 12c-7.2 0-13 5.8-13 13 0 7.2 5.8 13 13 13 1.4 0 2.7-.2 4-.6-1.5 6.2-6 11.4-12.2 13.6L18 60c12-3 21-13.4 21-26V25c0-7.2-5.8-13-13-13h-4zm32 0c-7.2 0-13 5.8-13 13 0 7.2 5.8 13 13 13 1.4 0 2.7-.2 4-.6-1.5 6.2-6 11.4-12.2 13.6L50 60c12-3 21-13.4 21-26V25c0-7.2-5.8-13-13-13h-4z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path d='M22 12c-7.2 0-13 5.8-13 13 0 7.2 5.8 13 13 13 1.4 0 2.7-.2 4-.6-1.5 6.2-6 11.4-12.2 13.6L18 60c12-3 21-13.4 21-26V25c0-7.2-5.8-13-13-13h-4zm32 0c-7.2 0-13 5.8-13 13 0 7.2 5.8 13 13 13 1.4 0 2.7-.2 4-.6-1.5 6.2-6 11.4-12.2 13.6L50 60c12-3 21-13.4 21-26V25c0-7.2-5.8-13-13-13h-4z' fill='black'/></svg>");
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: .85;
}
.testimonial-body .quote-mark svg{ display: none; }
.testimonial-body .quote-content{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.testimonial-body .quote-text{
    font-family: 'inter', serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 36px;
    color: var(--cool-101828, #101828);
    margin: 0;
    letter-spacing: -.2px;
    white-space: pre-wrap;
	font-style: italic;
}
.testimonial-body .quote-meta{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.testimonial-body .quote-stars{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 14px;
    margin-bottom: 8px;
}
.testimonial-body .quote-stars svg{
    width: 14px;
    height: 14px;
    color: var(--ts-accent);
    filter: drop-shadow(0 1px 2px var(--ts-accent-glow-a));
}
.testimonial-body .quote-name{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    color: var(--cool-101828, #101828);
    margin: 0;
}
.testimonial-body .quote-role{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 22px;
    color: #4a5568;
    margin: 0;
}

/* ===========================================================
 * Section: Trust / Before You Decide / CTA  (Figma 994:29874)
 * ----------------------------------------------------------- */
/* Page finale wrapper — reproduces Figma Rectangle 1265 (node 994:29996)
   EXACTLY: a tall violet→navy linear gradient rectangle with
   `filter: blur(100px)` that physically extends ABOVE the page-finale
   into the testimonial's transparent bottom zone. The heavy blur
   diffuses the rectangle's top edge softly across the section
   boundary, so the transition from white → violet → navy reads as one
   continuous Gaussian wash with zero separation line. */
.page-finale{
    position: relative;
    z-index: 2;
    /* No solid bg — the blurred ::before is the sole gradient paint
       across the section so there's no "solid-vs-blurred" color
       mismatch at the testimonial boundary. Body's dark navy bg sits
       behind it as a fallback, fully obscured by ::before. */
    background: transparent;
    overflow: visible;
    isolation: isolate;
}
.page-finale::before{
    content: "";
    position: absolute;
    /* Stays within page-finale's width — blur diffuses ~100px outward,
       which the body's overflow-x: hidden clips harmlessly. */
    left: 0;
    right: 0;
    /* Extends UP further into the testimonial's transparent zone so
       the ::before's own top blur-edge is well above where it becomes
       visible — by the time the testimonial reveals it, the gradient
       is at fully-saturated solid violet, no top-edge softening. */
    top: -400px;
    /* Stops at page-finale's bottom — no off-screen extension below
       (the gradient is already at solid #051A3C here, so the blur edge
       blends invisibly into the body's dark navy bg). Saves 240px of
       extra scroll height at the bottom of the page. */
    bottom: 0;
    /* Exact Figma stops (Rectangle 1265, node 994:29996) */
    background: linear-gradient(179deg,
        #55298E 0%,
        #55298E 16.14%,
        #031430 58.228%,
        #051A3C 78.04%,
        #051A3C 100%);
    /* Heavy Gaussian blur — matches Figma's filter: blur(100px). */
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

.section-trust{
    position: relative;
    background: transparent;
    color: var(--Base-White, #fcfcfc);
    padding: 80px 0 64px;
    overflow: hidden;
    z-index: 2;
}
.section-trust .container{ position: relative; z-index: 2; }
.trust-row{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 56px;
    align-items: center;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(159, 186, 228, .15);
}
.trust-row h2{
    /* Canonical sitewide H2 — Space Grotesk 300 / 44px / 54px / -0.6px tracking.
       Alignment stays left here because this H2 sits in a 2-column grid
       beside the compliance badges, not a centered heading layout. */
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 44px;
    line-height: 54px;
    letter-spacing: -.6px;
    color: var(--Base-White, #fcfcfc);
    margin: 0;
}
.trust-badges{
    display: flex;
    gap: 28px;
    align-items: center;
}
.trust-badges img{
    width: 140px;
    height: 140px;
    object-fit: contain;
    display: block;
}
.before-decide{
    display: grid;
    /* Intro stays compact on the left; FAQ takes whatever remains of
       the container width. Drops the previous 370+590 fixed-width
       cluster so the whole row spans the full container. */
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 64px;
    padding: 56px 0 0;
    border-bottom: none;
    align-items: start;
}
.before-decide .bd-intro{
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.before-decide h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.3px;
    color: var(--Base-White, #fcfcfc);
    margin: 0;
}
.before-decide .lead{
    color: var(--Map-Grey, #eaeaea);
    font-size: 15px;
    line-height: 26px;
    margin: 0;
}

/* FAQ accordion (right column) */
.bd-faq{
    width: 100%;
}
.bd-faq .faq-item{
    border-top: 1px solid rgba(251, 251, 251, .22);
    padding: 24px 0;
}
.bd-faq .faq-item:last-child{
    border-bottom: 1px solid rgba(251, 251, 251, .22);
}
.bd-faq .faq-q{
    display: flex;
    gap: 31px;
    align-items: flex-start;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
}
.bd-faq .faq-num{
    flex: 0 0 32px;
    width: 32px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    color: var(--Base-White, #fcfcfc);
}
.bd-faq .faq-text{
    flex: 1;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    color: var(--Grey-Grey-100, #fbfbfb);
}
.bd-faq .faq-toggle{
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    position: relative;
    transition: transform .25s ease;
    color: var(--Base-White, #fcfcfc);
}
.bd-faq .faq-toggle::before,
.bd-faq .faq-toggle::after{
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 2px;
}
.bd-faq .faq-toggle::before{ /* horizontal bar */
    top: 50%;
    left: 0;
    width: 16px;
    height: 2px;
    transform: translateY(-50%);
}
.bd-faq .faq-toggle::after{ /* vertical bar */
    left: 50%;
    top: 0;
    width: 2px;
    height: 16px;
    transform: translateX(-50%);
    transition: opacity .25s ease;
}
.bd-faq .faq-item.is-open .faq-toggle::after{ opacity: 0; }
.bd-faq .faq-answer{
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s ease, opacity .3s ease;
    opacity: 0;
    padding-left: 63px;
}
.bd-faq .faq-item.is-open .faq-answer{
    max-height: 320px;
    opacity: 1;
    padding-top: 16px;
}
.bd-faq .faq-answer p{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    color: var(--Map-Grey, #eaeaea);
    margin: 0;
}
/* ===========================================================
 * Section: Footer (now contains the "Got more questions?" banner)
 * ----------------------------------------------------------- */
.site-footer{
    background: transparent;
    color: var(--Base-White, #fcfcfc);
    padding: 72px 0 32px;
    position: relative;
    z-index: 2;
}

/* Footer CTA banner — premium glass panel with brand-tinted background,
   pale brand-blue border, soft violet halo behind, and a sparkle eyebrow.
   Was washing out at 18-22% opacity against the navy footer; bumped to
   richer brand gradient + brighter border + radial halo glow so the
   panel clearly reads as a CTA without competing with the body copy. */
.footer-cta{
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
    padding: 36px 44px;
    border-radius: 22px;
    background:
        linear-gradient(135deg,
            rgba(85, 41, 142, .42) 0%,
            rgba(14, 72, 165, .36) 50%,
            rgba(28, 169, 201, .26) 100%);
    border: 1px solid rgba(159, 186, 228, .35);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .25),
        0 24px 56px -22px rgba(85, 41, 142, .55),
        0 8px 24px -10px rgba(28, 169, 201, .25),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 0 0 1px rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    margin-bottom: 64px;
    overflow: hidden;
    transition:
        transform .35s cubic-bezier(.22, .61, .36, 1),
        border-color .35s ease,
        box-shadow .45s ease;
}
/* Decorative soft halo — large radial gradient that bleeds violet light
   into the bottom-left corner. Pure decoration; pointer-events off. */
.footer-cta-halo{
    position: absolute;
    z-index: -1;
    inset: -40% -10% -10% -10%;
    background:
        radial-gradient(ellipse 55% 70% at 20% 80%, rgba(119, 71, 182, .35) 0%, transparent 60%),
        radial-gradient(ellipse 50% 65% at 85% 25%, rgba(28, 169, 201, .22) 0%, transparent 60%);
    filter: blur(20px);
    pointer-events: none;
    opacity: .9;
    transition: opacity .45s ease;
}
/* Subtle moving shimmer along the top edge — animates 10s, very gentle */
.footer-cta::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(255, 255, 255, .06) 50%,
        transparent 70%);
    background-size: 220% 100%;
    background-position: 0% 0%;
    pointer-events: none;
    animation: footerCtaShimmer 11s ease-in-out infinite;
    z-index: 0;
}
@keyframes footerCtaShimmer{
    0%, 100% { background-position: -120% 0%; opacity: .6; }
    50%      { background-position: 120% 0%; opacity: 1; }
}
.footer-cta:hover{
    transform: translateY(-2px);
    border-color: rgba(159, 186, 228, .55);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .28),
        0 32px 68px -22px rgba(85, 41, 142, .68),
        0 12px 30px -10px rgba(28, 169, 201, .32),
        inset 0 1px 0 rgba(255, 255, 255, .2),
        inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.footer-cta:hover .footer-cta-halo{ opacity: 1; }
.footer-cta-text{
    flex: 1 1 auto;
    min-width: 280px;
    position: relative;
    z-index: 1;
}
/* Eyebrow chip — sparkle + label, sets visual hierarchy and signals "this
   is a CTA, not body copy" before the heading even reads. */
.footer-cta-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(159, 186, 228, .28);
    color: #cfe2ff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .35px;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.footer-cta-eyebrow svg{
    color: var(--Turquoise-SkyBlue-500, #1ca9c9);
    animation: footerCtaSparkle 3.6s linear infinite;
}
@keyframes footerCtaSparkle{
    0%, 100% { transform: rotate(0); opacity: 1; }
    50%      { transform: rotate(180deg); opacity: .7; }
}
.footer-cta-text h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
    /* Tiny shadow lifts the white off the busy backdrop without looking heavy */
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.footer-cta-text p{
    color: rgba(255, 255, 255, .86);
    font-size: 15px;
    line-height: 24px;
    margin: 0;
    max-wi dth: 560px;
}
/* The Get-in-Touch CTA inside the banner sits above all decorative layers */
.footer-cta .footer-cta-button{ position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
    .footer-cta::before{ animation: none; opacity: .4; }
    .footer-cta-eyebrow svg{ animation: none; }
    .footer-cta:hover{ transform: none; }
}
.footer-cta-button{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--Base-White, #fcfcfc);
    color: var(--Royal-Blue-Blue-700, #0a2d68);
    padding: 12px 22px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 20px;
    border: 1px solid transparent;
    text-decoration: none;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .12),
        0 10px 24px -10px rgba(14, 72, 165, .45);
    transition:
        transform .35s cubic-bezier(.22, .61, .36, 1),
        box-shadow .4s ease,
        background .35s ease,
        color .35s ease;
    white-space: nowrap;
}
.footer-cta-button svg{ transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.footer-cta-button:hover{
    transform: translateY(-2px);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .14),
        0 16px 30px -10px rgba(14, 72, 165, .55);
}
.footer-cta-button:hover svg{ transform: translateX(3px); }

.site-footer .footer-nav{
    display: grid;
    grid-template-columns: 1.3fr repeat(5, 1fr);
    gap: 40px;
    padding-top: 56px;
    border-top: 1px solid rgba(159, 186, 228, .12);
}
.brand-col .brand-logo{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.brand-col .brand-logo-img{
    height: 32px;
    width: auto;
    display: block;
}
.brand-col .gptw-badge{
    height: 48px;
    width: auto;
    display: block;
}
.ask-ai-box{
    background: rgba(252, 252, 252, .04);
    border: 1px solid rgba(159, 186, 228, .15);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 28px;
    max-width: 220px;
}
.ask-ai-box .ask-ai-label{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 18px;
    line-height: 26px;
    color: var(--Base-White, #fcfcfc);
    margin-bottom: 14px;
}
.ask-ai-icons{ display: flex; gap: 8px; }
.ask-ai-icons a{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(159, 186, 228, .12);
    transition: background .25s ease;
}
.ask-ai-icons a:hover{ background: rgba(255, 255, 255, .1); }
.follow-us-label{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(252, 252, 252, .6);
    margin: 0 0 14px;
}
.social-list{ display: flex; gap: 10px; }
.social-list a{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(159, 186, 228, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--Base-White, #fcfcfc);
    transition: background .25s ease;
}
.social-list a:hover{ background: var(--Royal-Blue-Blue-500, #0e48a5); }
.footer-col h4{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--SkyBlue-SkyBlue-500, #12b6f8);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(159, 186, 228, .12);
}
.footer-col h4.col-spaced{ margin-top: 32px; }
.footer-col ul li{ margin-bottom: 10px; }
.footer-col ul li a{
    color: var(--Base-White, #fcfcfc);
    font-size: 14px;
    line-height: 20px;
    transition: color .2s ease;
}
.footer-col ul li a:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }
.copyright{
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(159, 186, 228, .12);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.copyright p{
    color: rgba(252, 252, 252, .7);
    font-size: 14px;
}
.legal-links{ display: flex; gap: 26px; }
.legal-links a{
    color: rgba(252, 252, 252, .7);
    font-size: 14px;
}
.legal-links a:hover{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }

/* ===========================================================
 * Responsive
 * ----------------------------------------------------------- */
@media (max-width: 1199px){
    .site-footer .footer-nav{ grid-template-columns: 1fr repeat(3, 1fr); row-gap: 48px; }
    .brand-col{ grid-column: 1 / -1; }
    .product-stage{ gap: 40px; }
}
@media (max-width: 991px){
    /* Previously hid .hello-message/.hello-cta outright to avoid
       overflowing this nowrap row — but that left just a lone "Webinar"
       badge with no text or link on real phone widths, which read as
       broken/missing content. Wrapping instead keeps the full promo
       message + Register Now visible on every width. */
    /* This file has duplicate copies of this same @media block further
       down (leftover from a bundle rebuild) that redeclare
       .hello-bar{ padding } at equal specificity — a doubled class
       selector here beats them regardless of source order. */
    .hello-bar.hello-bar{ padding: 18px 24px 20px !important; flex-wrap: wrap; row-gap: 12px; }
    .hello-bar .hello-left{ flex-wrap: wrap; row-gap: 12px; }
    /* Unconditional .hello-bar .hello-badge rules elsewhere in this file
       already force font-size/padding with !important at every width —
       matching !important plus an extra class here is required to win
       regardless of source order. */
    .hello-bar .hello-badge.hello-badge{ font-size: 10px !important; padding: 3px 8px !important; }
    .hello-bar .hello-msg-group{ flex-wrap: wrap; row-gap: 6px; }
    .hello-bar .hello-message{ white-space: normal; }
    /* Reachable inside the mobile-nav-panel instead, as a plain nav item. */
    .hello-bar .hello-login{ display: none; }
    .site-header{ padding: 14px 24px; height: auto; }
    .site-header .nav-links{ display: none; }
    .site-header .btn-demo{ display: none; }
    /* Still reachable as a full-width CTA inside the mobile-nav-panel
       (.mnp-actions) — just decluttering the header row itself.
       Needs 3-class specificity (.btn-start also carries .btn-primary)
       to beat the later .btn-primary.btn-primary{ display:inline-flex }
       rule near the end of this file, which otherwise wins on source
       order at equal (0,2,0) specificity. */
    .site-header .btn-start.btn-primary{ display: none; }
    .hero-section{ padding: 70px 0 90px; min-height: auto; }
    .hero-section h1{ font-size: 44px; line-height: 54px; }
    .hero-section .hero-sub{ font-size: 17px; line-height: 26px; }
    .hero-search-wrap{ width: 100%; }
    .hero-search-inner{ min-height: auto; gap: 14px; }
    .hero-search-footer{ flex-direction: column; gap: 12px; align-items: flex-start; }
    /* Un-pin the product section on tablet/mobile — a 100vh pin would clip stacked content */
    .section-products{ height: auto; }
    .products-intro{ margin-bottom: 28px; }
    .products-sticky{ position: static; height: auto; min-height: 0; padding: 64px 0; overflow: visible; }
    .product-progress{ display: none; }
    .product-stage{ grid-template-columns: 1fr; gap: 40px; min-height: 0; }
    .product-detail{ padding: 0; }
    .product-detail h3{ font-size: 24px; line-height: 32px; }
    .trusted-section h3{ font-size: 24px; line-height: 32px; }
    .products-head{ margin-bottom: 40px; }
    .feature-grid,
    .story-grid{ grid-template-columns: 1fr; }
    .persona-explorer{ grid-template-columns: 1fr; gap: 48px; }
    .pex-stage{ min-height: 380px; aspect-ratio: auto; }
    .pex-text h3{ font-size: 24px; line-height: 32px; }
    .px-tab{ font-size: 12.5px; padding: 7px 14px; }
    .personas-intro{ margin-bottom: 56px; }
    .pricing-switcher{ flex-wrap: wrap; margin-bottom: 48px; }
    .ps-pill{ padding: 10px 18px 10px 12px; gap: 10px; }
    .ps-name{ font-size: 14px; }
    .ps-caption{ font-size: 11px; }
    /* Showcase stacks vertically on tablet. No panel, no divider. */
    .pricing-showcase{
        grid-template-columns: 1fr;
        row-gap: 36px;
        column-gap: 0;
        padding: 0;
    }
    .ps-flow{ display: none; }
    .ps-left{ padding: 30px 28px 28px; border-radius: 20px; }
    .ps-right{ padding: 0; }
    .ps-title{ font-size: 26px; line-height: 36px; }
    .pricing-intro{ margin-bottom: 56px; }
    /* Unified tablet H2 sizing for every section, matching the canonical
       site-wide H2 scale (44px desktop → 34px tablet → 26px mobile). */
    .trusted-section h2,
    .products-intro .products-title,
    .section-features h2,
    .section-personas h2,
    .section-pricing h2,
    .section-success h2,
    .section-testimonial h2,
    .trust-row h2{ font-size: 34px; line-height: 44px; }
    .success-intro,
    .testimonial-intro,
    .features-intro{ margin-bottom: 44px; }
    .features-track{ gap: 18px; animation-duration: 72s; }
    .stories-carousel{ grid-template-columns: 40px 1fr 40px; gap: 20px; }
    .story-card{ flex: 0 0 320px; width: 320px; }
    .testimonial-card{ padding: 44px 36px 40px; border-radius: 22px; }
    .testimonial-body{ flex-direction: column; gap: 24px; }
    .testimonial-body .quote-mark{ flex: 0 0 56px; width: 56px; height: 56px; }
    .testimonial-body .quote-text{ font-size: 15px; line-height: 32px; }
    .trust-row{ grid-template-columns: 1fr; text-align: center; }
    .trust-badges{ justify-content: center; }
    .before-decide{ grid-template-columns: 1fr; gap: 32px; }
    .before-decide ul{ grid-template-columns: 1fr; }
    .site-footer .footer-nav{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px){
    .container{ padding: 0 20px; }
    .hello-bar.hello-bar{ padding: 18px 20px 20px !important; gap: 12px; row-gap: 12px; }
    .hello-bar .hello-consult{ display: none; }
    .site-header{ padding: 12px 20px; }
    .site-header .brand-mark .brand-word{ font-size: 15px; }
    .hero-section h1{ font-size: 34px; line-height: 44px; }
    .hero-section .hero-sub{ font-size: 15px; line-height: 24px; }
    .trusted-section h2,
    .section-products h2,
    .products-intro .products-title,
    .section-features h2,
    .section-personas h2,
    .section-pricing h2,
    .section-success h2,
    .section-testimonial h2,
    .trust-row h2{ font-size: 26px; line-height: 36px; }
    .before-decide h3,
    .footer-cta-text h3,
    .trusted-section h3{ font-size: 20px; line-height: 28px; }
    .product-detail h3{ font-size: 20px; line-height: 28px; }
    .product-tab{ font-size: 13px; padding: 8px 14px; }
    .pex-stage{ min-height: 360px; aspect-ratio: auto; }
    .pex-text h3{ font-size: 20px; line-height: 28px; }
    .scene-card{ padding: 14px 16px; border-radius: 14px; }
    .scene-card.sc-1{ width: 72%; }
    .scene-card.sc-2{ width: 60%; }
    .scene-card.sc-3{ width: 70%; }
    /* On tiny screens, the 1×4 KPI row gets too cramped — fall back to 2×2 */
    .sc-grid{ grid-template-columns: 1fr 1fr; gap: 8px; }
    .sc-num{ font-size: 24px; }
    .sc-metric-num{ font-size: 32px; }
    .sc-spark{ height: 44px; }
    /* Pricing — mobile compaction */
    /* Pricing — mobile compaction */
    .pricing-switcher{ width: 100%; padding: 5px; }
    .ps-pill{ flex: 1; justify-content: center; padding: 10px 12px; }
    .pricing-showcase{ padding: 0; }
    .ps-left{ padding: 24px 22px 22px; border-radius: 18px; }
    .ps-title{ font-size: 22px; line-height: 32px; }
    .psr-title{ font-size: 19px; line-height: 28px; }
    .psr-stat-num{ font-size: 32px; }
    .psr-stat-num small{ font-size: 20px; }
    .psr-stat{ gap: 12px; }
    .ps-cta{ width: 100%; justify-content: center; }
    .psr-stage{ padding: 6px 4px 10px; margin-top: 16px; }
    /* Success Stories — mobile compaction */
    .success-intro,
    .testimonial-intro,
    .features-intro{ margin-bottom: 32px; }
    .features-track{ gap: 14px; animation-duration: 80s; }
    .features-marquee{ padding: 12px 12px 22px; margin: 0 -12px; }
    .stories-carousel{
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "viewport viewport"
            "prev next";
        column-gap: 12px;
        row-gap: 14px;
        align-items: center;
    }
    .stories-viewport{
        grid-area: viewport;
        padding: 8px 4px 24px;
        margin: -8px -4px -24px;
    }
    .stories-arrow{
        width: 40px;
        height: 40px;
        position: relative;
        z-index: 2;
    }
    .stories-arrow.is-prev{ grid-area: prev; justify-self: end; }
    .stories-arrow.is-next{ grid-area: next; justify-self: start; }
    .story-card{ flex: 0 0 min(280px, 100%); width: min(280px, 100%); border-radius: 16px; }
    .story-card .story-image{ height: 168px; }
    .story-card .story-body{ padding: 18px; }
    .story-card .story-title{ font-size: 16px; line-height: 24px; }
    .testimonial-card{ padding: 32px 24px 28px; border-radius: 18px; gap: 32px; }
    .testimonial-tab{ min-width: 100%; }
    .testimonial-body .quote-text{ font-size: 15px; line-height: 28px; }
    .testimonial-body .quote-mark{ flex: 0 0 48px; width: 48px; height: 48px; }
    .footer-cta{ flex-direction: column; align-items: flex-start; padding: 28px; margin-bottom: 48px; }
    .footer-cta-button{ width: 100%; justify-content: center; }
    .site-footer .footer-nav{ padding-top: 48px; }
    .site-footer .footer-nav{ grid-template-columns: 1fr; }
    .copyright{ flex-direction: column; align-items: flex-start; }
    .legal-links{ flex-wrap: wrap; gap: 16px; }
}

/* ===================================================================
   EXPLORE OVERLAY — "Click to explore" → Ask Me demo
   Mirrors the Figma prototype (node 801:13966): 10-scene storyboard
   showing the simulated Ask Me AI workflow, ending in a free-message
   paywall + signup modal.

   Layout: full-viewport fixed overlay → 240px sidebar + flexible main
   pane → top bar / scrollable canvas / composer. Brand palette
   (royal blue → violet → turquoise) used for accents; backgrounds are
   the same dark navy stack used in the page-finale / Trusted band.
   =================================================================== */
.explore-overlay{
    position: fixed; inset: 0;
    z-index: 9000;
    background: #0B1124;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s cubic-bezier(.22,.61,.36,1), visibility 0s linear .35s;
    color: #e2e8f0;
    font-family: 'Inter', system-ui, sans-serif;
}
.explore-overlay.is-open{
    opacity: 1; visibility: visible;
    transition: opacity .35s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
body.explore-locked{ overflow: hidden; }

.explore-shell{
    position: relative;
    width: 100%; height: 100%;
    display: grid;
    grid-template-columns: 240px 1fr;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(85,41,142,.22) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(14,72,165,.18) 0%, transparent 60%),
        linear-gradient(180deg, #0B1124 0%, #0A0F22 100%);
}

/* ---------- Sidebar ---------- */
.ex-sidebar{
    position: relative;
    border-right: 1px solid rgba(255,255,255,.06);
    padding: 18px 12px;
    display: flex; flex-direction: column; gap: 24px;
}
.ex-sidebar-top{
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 6px;
}
.ex-brand{
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; letter-spacing: 1.5px; font-size: 12px;
}
.ex-brand-mark{
    width: 22px; height: 22px; display: grid; place-items: center;
    border-radius: 5px;
    background: linear-gradient(135deg, #7747B6, #4075C9 55%, #1CA9C9);
    color: #fff; font-weight: 800; font-size: 13px;
}
.ex-brand-text{ color: #cbd5e1; font-weight: 600; }
.ex-sidebar-collapse{
    width: 26px; height: 26px;
    background: transparent; border: 0; color: #94a3b8; cursor: pointer;
    border-radius: 6px;
}
.ex-sidebar-collapse:hover{ background: rgba(255,255,255,.04); color: #e2e8f0; }
.ex-nav{ display: flex; flex-direction: column; gap: 4px; }
.ex-nav-item{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: transparent; border: 0;
    color: #cbd5e1; font-size: 13px; text-align: left; cursor: pointer;
    border-radius: 8px;
    transition: background .18s, color .18s;
}
.ex-nav-item:hover{ background: rgba(255,255,255,.04); color: #fff; }
.ex-nav-item.is-active{
    background: rgba(64,117,201,.16);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(64,117,201,.32);
}

/* ---------- Main pane ---------- */
.ex-main{
    display: grid;
    grid-template-rows: 56px 1fr auto;
    min-height: 0;
    position: relative;
}
.ex-topbar{
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    background: rgba(11,17,36,.4);
    backdrop-filter: blur(8px);
}
.ex-back{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #cbd5e1; font-size: 13px;
    border-radius: 999px; cursor: pointer;
    transition: background .18s, color .18s, transform .18s;
}
.ex-back:hover{ background: rgba(255,255,255,.08); color: #fff; transform: translateX(-2px); }
.ex-top-actions{ display: inline-flex; gap: 8px; }
.ex-top-btn{
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: transform .18s, box-shadow .18s, background .18s;
    border: 1px solid transparent;
}
.ex-signin{
    background: transparent; color: #e2e8f0;
    border-color: rgba(255,255,255,.14);
}
.ex-signin:hover{ background: rgba(255,255,255,.06); }
.ex-signup{
    background: linear-gradient(90deg, #4075C9 0%, #1CA9C9 100%);
    color: #fff; font-weight: 600;
    box-shadow: 0 6px 18px -8px rgba(28,169,201,.55);
}
.ex-signup:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(28,169,201,.7); }

/* ---------- Chat canvas ---------- */
.ex-canvas{
    overflow-y: auto;
    padding: 28px 0 16px;
    scroll-behavior: smooth;
}
.ex-stream{
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex; flex-direction: column; gap: 18px;
}

/* Row + bubble */
.ex-row{ display: flex; }
.ex-row--user{ justify-content: flex-end; }
.ex-row--ai{ justify-content: flex-start; }
.ex-bubble{
    max-width: 70%;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 14px; line-height: 1.55;
    color: #e6edf7;
}
.ex-bubble--user{
    background: rgba(64,117,201,.18);
    border: 1px solid rgba(64,117,201,.32);
    border-bottom-right-radius: 4px;
}
.ex-bubble--small{ font-size: 13px; padding: 10px 14px; }
.ex-source-chip{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px 4px 4px;
    margin-bottom: 8px;
    background: rgba(34,197,94,.14);
    border: 1px solid rgba(34,197,94,.22);
    border-radius: 999px;
    font-size: 11px; color: #86efac; font-weight: 600;
}
.ex-source-chip svg{ width: 12px; height: 12px; padding: 2px; background: rgba(34,197,94,.18); border-radius: 50%; }
.ex-source-x{ color: #86efac; opacity: .7; font-weight: 400; }
.ex-bubble-text{ color: #f1f5f9; }

/* Processing pill */
.ex-process{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    font-size: 13px; color: #cbd5e1;
}
.ex-process--inline{ background: transparent; border: 0; padding: 4px 0; color: #94a3b8; font-size: 13px; }
.ex-spark{
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    color: #1CA9C9;
    animation: exSparkSpin 3.6s linear infinite;
}
.ex-process-dots{ display: inline-flex; gap: 3px; }
.ex-process-dots i{
    width: 4px; height: 4px; border-radius: 50%;
    background: #64748b;
    animation: exDot 1.2s ease-in-out infinite;
}
.ex-process-dots i:nth-child(2){ animation-delay: .15s; }
.ex-process-dots i:nth-child(3){ animation-delay: .30s; }
.ex-process-chev{ color: #64748b; }
@keyframes exSparkSpin{ from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes exDot{
    0%, 100% { opacity: .35; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.1); background: #1CA9C9; }
}

/* AI cards */
.ex-card{
    width: 100%;
    max-width: 100%;
    padding: 18px 20px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    font-size: 14px; line-height: 1.6; color: #cbd5e1;
}
.ex-card-title{
    margin: 0 0 8px;
    font-size: 15px; color: #fff; font-weight: 600;
    display: flex; align-items: baseline; gap: 8px;
}
.ex-card-title--mt{ margin-top: 20px; }
.ex-card-meta{ font-size: 12px; font-weight: 400; color: #94a3b8; }
.ex-card-lead{ margin: 0 0 8px; color: #cbd5e1; }
.ex-card-lead--mt{ margin-top: 14px; }
.ex-card-note{ margin: 10px 0 0; color: #94a3b8; font-size: 13px; font-style: italic; }
.ex-card em{ font-style: normal; color: #fde68a; font-weight: 500; }
.ex-bullets{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ex-bullets li{ display: flex; align-items: center; gap: 10px; }
.ex-bullets--plain li{ padding-left: 16px; position: relative; }
.ex-bullets--plain li::before{
    content: ""; position: absolute; left: 0; top: .65em;
    width: 5px; height: 5px; border-radius: 50%; background: #64748b;
}
.ex-bullets strong{ color: #fff; font-weight: 600; }
.ex-dot{
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ex-dot--up{ background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.ex-dot--down{ background: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.18); }

/* Action groups (Recommended Actions) */
.ex-action-group{ margin-top: 10px; }
.ex-action-head{
    margin: 0 0 4px;
    color: #e2e8f0; font-weight: 500;
    display: flex; align-items: center; gap: 6px;
}
.ex-check{
    display: inline-grid; place-items: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(34,197,94,.18); color: #22c55e;
    font-size: 10px; font-weight: 700;
}

/* Follow-up chips */
.ex-followups{
    margin-top: 16px;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.ex-followup{
    padding: 8px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(64,117,201,.28);
    border-radius: 999px;
    color: #c7d4e8; font-size: 12.5px; cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.ex-followup:hover{
    background: rgba(64,117,201,.18);
    border-color: rgba(64,117,201,.55);
    color: #fff;
    transform: translateY(-1px);
}

/* Chart card */
.ex-card--chart{ padding: 18px 20px 20px; }
.ex-chart-head{
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.ex-chart-legend{
    display: inline-flex; gap: 14px;
    font-size: 11.5px; color: #94a3b8;
}
.ex-chart-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.ex-leg{ width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.ex-leg--gain{ background: #4075C9; }
.ex-leg--loss{ background: #f97316; }
.ex-chart-wrap{
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 20px;
    align-items: stretch;
}
.ex-chart{
    display: grid;
    grid-template-columns: 36px 1fr;
    height: 220px;
    background: rgba(255,255,255,.015);
    border-radius: 10px;
    padding: 10px 12px 28px;
    position: relative;
}
.ex-chart-y{
    display: flex; flex-direction: column; justify-content: space-between;
    font-size: 10px; color: #64748b;
    padding-right: 8px;
    text-align: right;
}
.ex-chart-bars{
    display: flex; align-items: flex-end; justify-content: space-around;
    gap: 16px;
    border-left: 1px solid rgba(255,255,255,.08);
    padding-left: 6px;
    position: relative;
}
.ex-chart-bars::before,
.ex-chart-bars::after{
    content: ""; position: absolute; left: 6px; right: 0;
    height: 1px; background: rgba(255,255,255,.04);
}
.ex-chart-bars::before{ top: 25%; }
.ex-chart-bars::after{ top: 50%; }
.ex-bar-col{
    display: flex; flex-direction: column; align-items: center;
    flex: 1; height: 100%;
    justify-content: flex-end;
    position: relative;
}
.ex-bar{
    width: 100%;
    max-width: 48px;
    height: var(--ex-h, 50%);
    border-radius: 4px 4px 0 0;
    position: relative;
    background: linear-gradient(180deg, #5694e5 0%, #4075C9 100%);
    box-shadow: 0 0 0 1px rgba(64,117,201,.22) inset, 0 6px 14px -8px rgba(64,117,201,.6);
    animation: exBarRise .9s cubic-bezier(.22,.61,.36,1) backwards;
}
.ex-bar--loss{
    background: linear-gradient(180deg, #fb923c 0%, #f97316 100%);
    box-shadow: 0 0 0 1px rgba(249,115,22,.28) inset, 0 6px 14px -8px rgba(249,115,22,.6);
}
.ex-bar-col:nth-child(1) .ex-bar{ animation-delay: .05s; }
.ex-bar-col:nth-child(2) .ex-bar{ animation-delay: .15s; }
.ex-bar-col:nth-child(3) .ex-bar{ animation-delay: .25s; }
.ex-bar-col:nth-child(4) .ex-bar{ animation-delay: .35s; }
.ex-bar-col:nth-child(5) .ex-bar{ animation-delay: .45s; }
@keyframes exBarRise{
    from{ transform: scaleY(0); opacity: 0; }
    to{ transform: scaleY(1); opacity: 1; }
}
.ex-bar{ transform-origin: bottom; }
.ex-bar-lbl{
    position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
    font-size: 10.5px; color: #cbd5e1; font-weight: 600;
}
.ex-bar-x{
    position: absolute; bottom: -22px;
    font-size: 11px; color: #94a3b8;
}

/* Data summary side panel */
.ex-data-summary{
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 14px;
    font-size: 11.5px;
    color: #94a3b8;
}
.ex-data-summary h5{
    margin: 0 0 6px;
    font-size: 12px; color: #cbd5e1; font-weight: 600;
}
.ex-ds-meta{ margin: 0 0 10px; color: #94a3b8; }
.ex-ds-meta strong{ color: #e2e8f0; }
.ex-ds-group{ margin: 10px 0 4px; }
.ex-ds-tag{
    display: inline-block;
    padding: 2px 8px;
    background: rgba(119,71,182,.18);
    border: 1px solid rgba(119,71,182,.3);
    border-radius: 999px;
    color: #c4b5fd; font-size: 10px; font-weight: 600; letter-spacing: .2px;
}
.ex-ds-list{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ex-ds-list li{ display: flex; justify-content: space-between; gap: 8px; line-height: 1.4; }
.ex-ds-k{ color: #cbd5e1; }
.ex-ds-v{ color: #1CA9C9; font-weight: 500; }
.ex-card-interp{
    margin: 14px 0 0; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 13px; color: #cbd5e1;
}
.ex-card-interp strong{ color: #fff; }

/* Reveal animation for any block appended after the sequence starts */
.ex-reveal{
    animation: exReveal .55s cubic-bezier(.22,.61,.36,1) backwards;
}
@keyframes exReveal{
    from{ opacity: 0; transform: translateY(10px); }
    to{ opacity: 1; transform: translateY(0); }
}

/* ---------- Composer ---------- */
.ex-composer{
    padding: 16px 24px 12px;
    border-top: 1px solid rgba(255,255,255,.05);
    background: rgba(11,17,36,.55);
    backdrop-filter: blur(6px);
}
.ex-composer-row{
    max-width: 880px; margin: 0 auto;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.ex-input-text{ color: #64748b; font-size: 13.5px; }
.ex-composer-actions{
    max-width: 880px; margin: 0 auto;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ex-comp-btn{
    width: 30px; height: 30px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    color: #cbd5e1; cursor: pointer;
    display: inline-grid; place-items: center;
    transition: background .18s, color .18s;
}
.ex-comp-btn:hover{ background: rgba(255,255,255,.08); color: #fff; }
.ex-comp-pill{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(64,117,201,.16);
    border: 1px solid rgba(64,117,201,.28);
    border-radius: 999px;
    color: #c7d4e8; font-size: 12px; cursor: pointer;
    transition: background .18s;
}
.ex-comp-pill:hover{ background: rgba(64,117,201,.24); }
.ex-comp-spacer{ flex: 1; }
.ex-comp-preview{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    color: #94a3b8; font-size: 12px; cursor: pointer;
    transition: color .18s, border-color .18s;
}
.ex-comp-preview:hover{ color: #e2e8f0; border-color: rgba(255,255,255,.2); }
.ex-comp-microcopy{
    max-width: 880px; margin: 8px auto 0;
    font-size: 11px; color: #475569; text-align: center;
}
.ex-comp-microcopy a{ color: #64748b; text-decoration: underline; }

/* ---------- Paywall (free message limit) ---------- */
.ex-paywall{
    position: absolute; inset: 56px 0 0 240px;
    display: flex; align-items: flex-end; justify-content: center;
    background: linear-gradient(180deg, rgba(11,17,36,0) 0%, rgba(11,17,36,.7) 50%, rgba(11,17,36,.92) 100%);
    backdrop-filter: blur(6px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s cubic-bezier(.22,.61,.36,1);
    padding-bottom: 140px;
    z-index: 4;
}
.ex-paywall.is-open{ opacity: 1; pointer-events: auto; }
.ex-paywall-card{
    max-width: 460px; width: 90%;
    padding: 22px 24px;
    background: rgba(15,23,42,.88);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
    transform: translateY(20px);
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.ex-paywall.is-open .ex-paywall-card{ transform: translateY(0); }
.ex-paywall-spark{
    display: inline-grid; place-items: center;
    width: 36px; height: 36px;
    margin-bottom: 10px;
    color: #1CA9C9;
}
.ex-paywall-title{ margin: 0 0 6px; font-size: 17px; color: #fff; font-weight: 600; }
.ex-paywall-sub{ margin: 0 0 14px; font-size: 13px; color: #94a3b8; }
.ex-paywall-actions{ display: inline-flex; gap: 10px; }
.ex-paywall-btn{
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px; cursor: pointer; font-weight: 500;
    background: transparent;
    border: 1px solid rgba(255,255,255,.16);
    color: #e2e8f0;
    transition: background .18s, transform .18s;
}
.ex-paywall-btn:hover{ background: rgba(255,255,255,.06); }
.ex-paywall-btn--primary{
    background: linear-gradient(90deg, #4075C9 0%, #1CA9C9 100%);
    border-color: transparent; color: #fff; font-weight: 600;
    box-shadow: 0 6px 18px -8px rgba(28,169,201,.55);
}
.ex-paywall-btn--primary:hover{ transform: translateY(-1px); }

/* ---------- Sign in / Sign up modal ---------- */
.ex-modal{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(2,6,23,.65);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s cubic-bezier(.22,.61,.36,1);
    z-index: 5;
}
.ex-modal.is-open{ opacity: 1; pointer-events: auto; }
.ex-modal-card{
    position: relative;
    width: 90%; max-width: 380px;
    padding: 28px 28px 24px;
    background: #0f1a32;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(64,117,201,.1);
    transform: translateY(16px) scale(.96);
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.ex-modal.is-open .ex-modal-card{ transform: translateY(0) scale(1); }
.ex-modal-close{
    position: absolute; top: 12px; right: 12px;
    width: 28px; height: 28px; border-radius: 8px;
    background: transparent; border: 0;
    color: #94a3b8; cursor: pointer;
    display: grid; place-items: center;
    transition: background .18s, color .18s;
}
.ex-modal-close:hover{ background: rgba(255,255,255,.06); color: #fff; }
.ex-modal-spark{
    display: inline-grid; place-items: center;
    margin-bottom: 6px;
}
.ex-modal-title{ margin: 0 0 6px; font-size: 18px; color: #fff; font-weight: 600; }
.ex-modal-sub{ margin: 0 0 18px; font-size: 12.5px; color: #94a3b8; line-height: 1.5; }
.ex-social-btn{
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color: #e2e8f0; font-size: 13px; cursor: pointer;
    transition: background .18s, border-color .18s;
}
.ex-social-btn:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.ex-or{
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0;
    color: #475569; font-size: 11px;
}
.ex-or::before, .ex-or::after{
    content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08);
}
.ex-more-options{
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color: #cbd5e1; font-size: 13px; cursor: pointer;
    transition: background .18s, color .18s;
}
.ex-more-options:hover{ background: rgba(255,255,255,.06); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
    .explore-shell{ grid-template-columns: 60px 1fr; }
    .ex-brand-text{ display: none; }
    .ex-nav-item span, .ex-nav-item{ font-size: 0; }
    .ex-nav-item svg{ width: 18px; height: 18px; }
    .ex-paywall{ inset: 56px 0 0 60px; }
    .ex-chart-wrap{ grid-template-columns: 1fr; }
    .ex-data-summary{ font-size: 11px; }
}
@media (max-width: 600px){
    .ex-topbar{ padding: 0 12px; }
    .ex-stream{ padding: 0 14px; }
    .ex-card{ padding: 14px; }
    .ex-bubble{ max-width: 85%; }
    .ex-composer{ padding: 12px 14px 10px; }
    .ex-modal-card{ padding: 22px 18px 18px; }
}

@media (prefers-reduced-motion: reduce){
    .explore-overlay, .ex-paywall, .ex-paywall-card, .ex-modal, .ex-modal-card{ transition: none !important; }
    .ex-reveal, .ex-bar, .ex-spark, .ex-process-dots i{ animation: none !important; }
    .ex-bar{ transform: none !important; }
}

/* ===================================================================
   CANONICAL PRIMARY BUTTON — .btn-primary
   One signature CTA used everywhere a high-emphasis action lives:
   top nav "Start for Free", hero "Click to explore", product CTA,
   pricing CTA, footer banner, overlay top, paywall.
   Visual language: violet → royal-blue → turquoise gradient pill
   (the brand's signature mix), white bold text, optional arrow that
   slides on hover.
   Motion (theme-matched, easing cubic-bezier(.22,.61,.36,1)):
     ① Breathing gradient — background-position pans subtly to feel alive
     ② Hover sheen sweep — diagonal white highlight crosses the surface
     ③ Hover lift -2px + intensified brand-violet glow shadow
     ④ Arrow slides +4px right (matches existing .pd-cta / .ps-cta pattern)
   Selector specificity uses :where() so it overrides via cascade-position
   only — keeps existing per-section rules intact unless they specifically
   conflict. Placed at end of stylesheet to sit last in the cascade.
   =================================================================== */
:where(.btn-primary){
    /* Reset across <a> and <button> hosts */
    -webkit-appearance: none; appearance: none;
    border: 0; outline: 0;
    cursor: pointer; user-select: none;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
}
/* Doubled-class selector .btn-primary.btn-primary bumps specificity to (0,2,0)
   so it beats per-section rules like .site-header .btn-start and
   .product-detail .pd-cta on cascade order. */
.btn-primary.btn-primary{
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 22px;
    min-height: 42px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.1px;
    color: #fff;
    white-space: nowrap;
    /* Brand gradient — exact Figma 994:29784 "Start for Free" button spec:
       linear-gradient(to left, #7747B6 0%, #4075C9 50.718%, #1CA9C9 100%).
       Direction `to left` matches Figma's bg-gradient-to-l: turquoise on
       the left, royal-blue at the 50.718% middle stop, violet on the right. */
    background-image: linear-gradient(to left,
        #7747B6 0%,
        #4075C9 50.718%,
        #1CA9C9 100%);
    background-color: transparent;
    background-size: 100% 100%;
    background-position: 50% 50%;
    box-shadow:
        0 8px 22px -10px rgba(64, 117, 201, .55),
        0 2px 8px -2px rgba(119, 71, 182, .35),
        inset 0 1px 0 rgba(255, 255, 255, .14);
    transition:
        transform .25s cubic-bezier(.22, .61, .36, 1),
        box-shadow .25s cubic-bezier(.22, .61, .36, 1),
        filter .35s cubic-bezier(.22, .61, .36, 1);
    /* Subtle brightness pulse — keeps the button feeling alive without
       drifting the colors away from the Figma spec (no gradient pan). */
    animation: btnBreathe 6s ease-in-out infinite;
    overflow: hidden;
}
/* Sheen sweep — a diagonal white highlight that crosses the button on hover */
.btn-primary.btn-primary::before{
    content: "";
    position: absolute;
    top: -50%; bottom: -50%;
    left: -120%;
    width: 60%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, .35) 50%,
        rgba(255, 255, 255, 0) 65%,
        transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: -1;
    transition: left .9s cubic-bezier(.22, .61, .36, 1);
}
.btn-primary.btn-primary:hover{
    transform: translateY(-2px);
    /* Slightly brighten on hover (overrides per-section :hover filters
       like .product-detail .pd-cta:hover and .site-header .btn-start:hover
       so the primary motion language is the only thing that fires). */
    filter: brightness(1.06) !important;
    box-shadow:
        0 14px 32px -10px rgba(64, 117, 201, .7),
        0 6px 14px -4px rgba(119, 71, 182, .45),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary.btn-primary:hover::before{ left: 130%; }
.btn-primary.btn-primary:active{ transform: translateY(0); transition-duration: .1s; }
.btn-primary.btn-primary:focus-visible{
    outline: 2px solid #c4b5fd;
    outline-offset: 3px;
}
/* Arrow icon (any nested SVG or arrow span) — slides on hover */
.btn-primary.btn-primary svg,
.btn-primary.btn-primary .btn-arrow,
.btn-primary.btn-primary .pd-cta-arrow,
.btn-primary.btn-primary .ps-cta-arrow{
    display: inline-flex;
    align-items: center;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.btn-primary.btn-primary:hover svg,
.btn-primary.btn-primary:hover .btn-arrow,
.btn-primary.btn-primary:hover .pd-cta-arrow,
.btn-primary.btn-primary:hover .ps-cta-arrow{
    transform: translateX(4px);
}
/* Size variants */
.btn-primary.btn-primary.btn-primary--sm{
    padding: 8px 18px;
    min-height: 36px;
    font-size: 13.5px;
    gap: 8px;
}
.btn-primary.btn-primary.btn-primary--lg{
    padding: 14px 30px;
    min-height: 52px;
    font-size: 16px;
    gap: 12px;
}
/* Ghost variant — neutral pill for placements where the gradient would
   compete with surrounding accent. Same shape + sheen, no gradient. */
.btn-primary.btn-primary.btn-primary--ghost{
    background-image: none;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #f1f5f9;
    animation: none;
    box-shadow: none;
}
.btn-primary.btn-primary.btn-primary--ghost:hover{
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}
/* Breathing pulse — gentle brightness oscillation (1.0 → 1.03 → 1.0).
   Replaces the previous background-position pan so the gradient colors
   stay locked to the Figma spec at every frame; only the overall
   luminance breathes. */
@keyframes btnBreathe{
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.03); }
}
@media (prefers-reduced-motion: reduce){
    .btn-primary{ animation: none !important; transition: none !important; }
    .btn-primary::before{ display: none; }
    .btn-primary:hover{ transform: none; }
    .btn-primary:hover svg,
    .btn-primary:hover .btn-arrow,
    .btn-primary:hover .pd-cta-arrow,
    .btn-primary:hover .ps-cta-arrow{ transform: none; }
}



/* ════════════════════════════════════════════════════════════════
   HOME.HTML INLINE STYLES — moved from inline <style> block
   These overrides were previously embedded inside home.html's <head>.
   Source order: this block sits at the END of index.css so it wins
   the cascade against earlier rules (same behaviour as when these
   styles were inline after the <link> tag in home.html).
   ════════════════════════════════════════════════════════════════ */
/* Desktop content width */
.container{ max-width: 1500px; padding: 0 40px; }

/* Hello bar + nav: full-width background, content aligned to the 1500px container.
   Gutter = centering offset for a 1500px zone + the container's 40px inner padding. */
.hello-bar{ padding: 10px max(40px, calc((100% - 1500px) / 2 + 40px)) 11px; }
.site-header{ padding: 20px max(40px, calc((100% - 1500px) / 2 + 40px)) 21px; }

/* Hello bar gaps match Figma exactly: badge → message-group = 10px; message → Register Now = 20px */
.hello-bar .hello-left{ gap: 10px; }
.hello-bar .hello-msg-group{
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

/* Ideal section spacing — modern SaaS rhythm (Stripe / Linear / Vercel).
   Most content sections get 96px top + 96px bottom = 192px between
   any two consecutive sections. Hero gets extra bottom for the CTA
   to breathe, the logo band is compact, and the testimonial keeps
   its long bottom runway for the blurred page-finale gradient bleed.
   Special: .section-products is a scroll-pinned 220vh track and
   stays at 0. */
.hero-section{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 96px 0 120px;
}
.trusted-section{ padding: 80px 0; }
.section-products{ padding: 0; }
.section-features{ padding: 96px 0; }
.section-personas{ padding: 96px 0; }
.section-pricing{ padding: 96px 0; }
.section-success{ padding: 96px 0; }
.section-testimonial{ padding: 96px 0 180px; }
.section-trust{ padding: 96px 0; }
.site-footer{ padding: 64px 0 24px; }

/* Standardised heading → content gap inside every section.
   Each section has its own *-intro (or .{section}-intro) wrapper that
   holds eyebrow + h2 + section-sub. Force a single bottom-margin so
   the gap from copy to first content block is identical everywhere. */
.success-intro,
.testimonial-intro,
.personas-intro,
.products-intro{ margin-bottom: 56px; }

/* Calmer heading-to-content gaps */
.trusted-section h2{ margin-bottom: 40px; }

/* Uniform client-logo sizing — auto-width so wide wordmarks are never clipped */
.logo-track > div{
    margin: 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-track img{
    max-height: 48px;
    max-width: 180px;
    height: auto;
    width: auto;
    object-fit: contain;
}
/* Drop the per-logo inline height override (e.g. TechnoDuxx) so all match */
.logo-track img[style]{ height: auto !important; }
.section-products .products-head{ margin-bottom: 28px; }
.section-personas .section-sub{ margin-bottom: 0; }
.section-pricing h2{ margin-bottom: 18px; }

/* Keep the big hero/section headings from feeling oversized on laptop displays */
        

/* ════════════ PREMIUM FEATURE CARDS (index.html only) ════════════
   Cards only — the section background is intentionally left untouched.
   Clean white surface, layered depth shadows, a gradient icon chip, an
   animated gradient top-accent, and a soft corner glow on hover. */
.section-features .feature-card{
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(85, 41, 142, .10);
    border-radius: 18px;
    padding: 30px 26px 28px;
    filter: none; /* replace the old flat drop-shadow with layered box-shadows */
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 12px 30px -14px rgba(14, 72, 165, .20);
    transition:
        transform .45s cubic-bezier(.22, .61, .36, 1),
        box-shadow .45s cubic-bezier(.22, .61, .36, 1),
        border-color .45s ease;
}
/* Soft diagonal glow in the top-right corner — adds depth, intensifies on hover */
.section-features .feature-card::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(125% 90% at 100% 0%,
        rgba(18, 182, 248, .10) 0%,
        rgba(85, 41, 142, .06) 32%,
        transparent 62%);
    opacity: .75;
    transition: opacity .45s ease;
}
/* Thin gradient accent that wipes across the top edge on hover */
.section-features .feature-card::after{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, #12b6f8 0%, #2863c5 48%, #7747b6 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
/* Keep card content above the corner glow */
.section-features .feature-card > *{ position: relative; z-index: 1; }

.section-features .feature-card:hover{
    transform: translateY(-6px);
    border-color: rgba(85, 41, 142, .20);
    box-shadow:
        0 2px 4px rgba(16, 24, 40, .05),
        0 22px 48px -18px rgba(40, 99, 195, .38);
}
.section-features .feature-card:hover::before{ opacity: 1; }
.section-features .feature-card:hover::after{ transform: scaleX(1); }

/* Gradient icon chip with white glyph + soft colored glow */
.section-features .feature-card .fc-icon{
    border-radius: 14px;
    background: linear-gradient(135deg, #0e48a5 0%, #2863c5 52%, #7747b6 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px -8px rgba(40, 99, 195, .55);
    transition:
        transform .45s cubic-bezier(.22, .61, .36, 1),
        box-shadow .45s ease;
}
.section-features .feature-card:hover .fc-icon{
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 12px 24px -8px rgba(85, 41, 142, .6);
}

/* Type refinement: strong heading, softer slate body for clean hierarchy */
.section-features .feature-card h5{
    color: #101828;
    letter-spacing: -.01em;
}
.section-features .feature-card p{ color: #475467; }

@media (max-width: 991px){
    .container{ padding: 0 24px; }
    .hello-bar{ padding: 10px 24px 11px; }
    .site-header{ padding: 14px 24px; }
          
    .hero-section{ padding: 64px 0 80px; }
    .section-products{ padding: 0; }
    .section-features{ padding: 72px 0; }
    .section-personas{ padding: 72px 0; }
    .section-pricing{ padding: 72px 0; }
    .section-success{ padding: 72px 0; }
    .section-testimonial{ padding: 72px 0 120px; }
    .section-trust{ padding: 72px 0; }
    .trusted-section{ padding: 56px 0; }
    .success-intro,
    .testimonial-intro,
    .personas-intro,
    .products-intro{ margin-bottom: 40px; }
    .hero-section h1{ font-size: 44px; line-height: 54px; }
}
@media (max-width: 575px){
    .container{ padding: 0 18px; }
    .hello-bar{ padding: 8px 18px; }
    .site-header{ padding: 12px 18px; }
    .hero-section h1{ font-size: 34px; line-height: 44px; }
}

/* ── Nav logo (SVG) ───────────────────────────────────── */
.site-header .brand-mark{ height: 44px; }
.site-header .nav-logo-img{
    height: 42px;
    width: auto;
    display: block;
    /* Keep the logo crisp and clearly visible over the busy hero canvas in full-screen */
    filter: drop-shadow(0 2px 10px rgba(3, 13, 30, .55));
}
/* No borders on the bars — use a soft colored glow under the nav for separation.
   .site-top wraps both bars, so its bottom hairline must go too; otherwise a
   faint line still renders directly under the nav. */
.site-top{ border-bottom: none; }
.hello-bar{ border-bottom: none; }
.site-header{
    border-bottom: none;
    /* Subtle, soft, hero-toned glow (cyan → violet) instead of a hard line */
    box-shadow:
        0 12px 28px -20px rgba(18, 182, 248, .30),
        0 6px 16px -14px rgba(85, 41, 142, .22);
}

/* ── Hello bar motion ─────────────────────────────────── */
/* Gentle pulsing glow on the "Webinar" badge */
.hello-bar .hello-badge{
    animation: badgePulse 2.4s ease-in-out infinite;
    will-change: transform, box-shadow;
}
@keyframes badgePulse{
    0%, 100%{
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(252, 252, 252, .45);
    }
    50%{
        transform: scale(1.06);
        box-shadow: 0 0 0 6px rgba(252, 252, 252, 0);
    }
}
/* Subtle shimmer sweeping across the message text */
.hello-bar .hello-message{
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .8) 0%,
        rgba(255, 255, 255, .8) 35%,
        #ffffff 50%,
        rgba(255, 255, 255, .8) 65%,
        rgba(255, 255, 255, .8) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: shimmer 4s linear infinite;
}
@keyframes shimmer{
    0%{ background-position: 120% 0; }
    100%{ background-position: -120% 0; }
}
/* Looping nudge on the Register Now arrow */
.hello-bar .hello-cta svg{
    animation: arrowNudge 1.6s ease-in-out infinite;
}
@keyframes arrowNudge{
    0%, 100%{ transform: translateX(0); }
    50%{ transform: translateX(4px); }
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
    .hello-bar .hello-badge,
    .hello-bar .hello-message,
    .hello-bar .hello-cta svg{ animation: none; }
    .hello-bar .hello-message{
        -webkit-text-fill-color: rgba(255, 255, 255, .8);
        color: rgba(255, 255, 255, .8);
    }
}

/* ════════════ HERO PREMIUM EFFECTS (index.html only) ════════════ */

/* Low-opacity tech grid overlay, faded toward the edges */
.hero-grid{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(159, 186, 228, .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(159, 186, 228, .055) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(125% 85% at 50% 28%, #000 0%, rgba(0,0,0,.55) 55%, transparent 80%);
            mask-image: radial-gradient(125% 85% at 50% 28%, #000 0%, rgba(0,0,0,.55) 55%, transparent 80%);
}

/* Glowing gradient orbs toward the bottom */
.hero-orbs{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    will-change: transform;
}
.hero-orb{
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    will-change: transform;
    mix-blend-mode: screen;
}
.hero-orb.orb-violet{
    width: 460px; height: 460px;
    left: 6%; bottom: -180px;
    background: radial-gradient(circle at 50% 50%,
        rgba(119, 71, 182, .95) 0%, rgba(85, 41, 142, .5) 45%, transparent 70%);
    animation: orbFloat 11s ease-in-out infinite;
}
.hero-orb.orb-cyan{
    width: 380px; height: 380px;
    left: 45%; bottom: -210px;
    background: radial-gradient(circle at 50% 50%,
        rgba(28, 169, 201, .85) 0%, rgba(18, 182, 248, .4) 45%, transparent 70%);
    animation: orbFloat 13s ease-in-out infinite .8s;
}
.hero-orb.orb-blue{
    width: 430px; height: 430px;
    right: 4%; bottom: -185px;
    background: radial-gradient(circle at 50% 50%,
        rgba(64, 117, 201, .9) 0%, rgba(14, 72, 165, .45) 45%, transparent 70%);
    animation: orbFloat 12s ease-in-out infinite .4s;
}
@keyframes orbFloat{
    0%, 100%{ transform: translate3d(0, 0, 0) scale(1); }
    50%{ transform: translate3d(0, -28px, 0) scale(1.06); }
}

/* Small floating glowing particles */
.hero-particles{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.hero-particles .particle{
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(231, 248, 254, .95);
    box-shadow: 0 0 8px 2px rgba(18, 182, 248, .55);
    opacity: .6;
    animation: particleFloat 9s ease-in-out infinite, particlePulse 3.2s ease-in-out infinite;
}
.hero-particles .particle:nth-child(1){ left: 10%; top: 26%; animation-duration: 10s, 3s;   animation-delay: 0s, 0s; }
.hero-particles .particle:nth-child(2){ left: 20%; top: 58%; width: 3px; height: 3px; animation-duration: 12s, 3.6s; animation-delay: 1.1s, .4s; }
.hero-particles .particle:nth-child(3){ left: 32%; top: 38%; animation-duration: 8.5s, 2.8s; animation-delay: .6s, .9s; }
.hero-particles .particle:nth-child(4){ left: 41%; top: 70%; width: 5px; height: 5px; animation-duration: 11s, 3.4s; animation-delay: 2s, .2s; }
.hero-particles .particle:nth-child(5){ left: 52%; top: 30%; width: 3px; height: 3px; animation-duration: 9.5s, 3.1s; animation-delay: .3s, 1.3s; }
.hero-particles .particle:nth-child(6){ left: 60%; top: 64%; animation-duration: 13s, 3.8s; animation-delay: 1.6s, .6s; }
.hero-particles .particle:nth-child(7){ left: 68%; top: 42%; width: 3px; height: 3px; animation-duration: 10.5s, 2.9s; animation-delay: .9s, 1.1s; }
.hero-particles .particle:nth-child(8){ left: 76%; top: 72%; width: 5px; height: 5px; animation-duration: 12.5s, 3.5s; animation-delay: 2.3s, .3s; }
.hero-particles .particle:nth-child(9){ left: 84%; top: 34%; animation-duration: 9s, 3.2s; animation-delay: .5s, .8s; }
.hero-particles .particle:nth-child(10){ left: 90%; top: 60%; width: 3px; height: 3px; animation-duration: 11.5s, 3.7s; animation-delay: 1.4s, .5s; }
.hero-particles .particle:nth-child(11){ left: 15%; top: 46%; width: 3px; height: 3px; animation-duration: 10s, 3s; animation-delay: 1.9s, 1s; }
.hero-particles .particle:nth-child(12){ left: 47%; top: 50%; animation-duration: 12s, 3.3s; animation-delay: .8s, .2s; }
@keyframes particleFloat{
    0%, 100%{ transform: translate3d(0, 0, 0); }
    50%{ transform: translate3d(6px, -24px, 0); }
}
@keyframes particlePulse{
    0%, 100%{ opacity: .25; }
    50%{ opacity: .85; }
}

/* Hero stage — nav bar + hero share one continuous premium canvas.
   Bars and hero go transparent so the grid/orbs/particles flow through. */
.hero-stage{
    position: relative;
    overflow-x: clip;
    background: transparent;
    /* Full-screen: nav + hero together fill exactly one viewport */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
.hero-stage .site-top{ position: sticky; top: 0; z-index: 200; background: transparent; }
.hero-st age .hello-bar{ background: transparent; }
.hero-stage .site-header{ background: transparent; }
.hero-stage .hero-section{
    position: relative;
    z-index: 3;
    background: transparent;
}
/* Grid now spans nav → hero: fade softly at the very top and into the logos below */
.hero-grid{
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 18%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 18%, #000 78%, transparent 100%);
}

@media (prefers-reduced-motion: reduce){
    .hero-orb,
    .hero-particles .particle{ animation: none; }
    .hero-orbs{ transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   UNIFIED THEME OVERRIDE — home.html only
   Every section previously had its own accent palette (Royal Blue
   on personas/testimonial, Turquoise on pricing/success, etc.).
   Here we pin every section to ONE canonical brand palette so the
   page reads as a single design language end-to-end:

     Primary    Royal Blue  #2863c3  (center of brand gradient)
     Secondary  Violet      #7747b6  (warm complement)
     Tertiary   Turquoise   #1ca9c9  (cool complement)

   Specificity uses the standard selector — these rules sit at the
   bottom of the inline <style> block (loaded AFTER index.css), so
   they win the cascade over the per-section defaults in the
   stylesheet by being defined later.
   ════════════════════════════════════════════════════════════════ */

/* ── Personas / Pricing share `--pa-accent*` variables ── */
.section-personas,
.section-pricing{
    --pa-accent: #2863c3;
    --pa-accent-secondary: #7747b6;
    --pa-accent-glow-a: rgba(40, 99, 195, .42);
    --pa-accent-glow-b: rgba(119, 71, 182, .30);
    --pa-accent-glow-c: rgba(28, 169, 201, .20);
    --pa-accent-soft:  rgba(40, 99, 195, .08);
    --pa-accent-border: rgba(40, 99, 195, .40);
}

/* ── Success uses its own `--ss-accent*` variables ── */
.section-success{
    --ss-accent: #2863c3;
    --ss-accent-secondary: #7747b6;
    --ss-accent-glow-a: rgba(40, 99, 195, .22);
    --ss-accent-glow-b: rgba(119, 71, 182, .14);
    --ss-accent-soft:  rgba(40, 99, 195, .08);
    --ss-accent-border: rgba(40, 99, 195, .22);
}

/* ── Testimonial uses its own `--ts-accent*` variables ── */
.section-testimonial{
    --ts-accent: #2863c3;
    --ts-accent-secondary: #7747b6;
    --ts-accent-glow-a: rgba(40, 99, 195, .18);
    --ts-accent-glow-b: rgba(119, 71, 182, .14);
    --ts-accent-soft:  rgba(40, 99, 195, .07);
    --ts-accent-border: rgba(40, 99, 195, .22);
}

/* ── H2 gradient accents — unify the .ph-accent / .sh-accent /
      .th-accent gradient text to the canonical brand gradient
      (matches .btn-primary's violet→royal-blue→turquoise sweep).

      IMPORTANT: use `background-image` (not `background` shorthand) —
      the shorthand resets `background-clip` back to `border-box`,
      which would render the gradient as a solid rectangle instead
      of being clipped to the text glyphs. background-image keeps
      the clip intact. ── */
.section-personas h2 .ph-accent,
.section-pricing h2 .ph-accent,
.section-success h2 .sh-accent,
.section-testimonial h2 .th-accent{
    background-image: linear-gradient(135deg,
        #7747b6 0%,
        #2863c3 50%,
        #1ca9c9 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}
/* Remove italic from every H2 gradient accent across the page.
   The original .X-accent rules in index.css set `font-style: italic`
   for editorial emphasis — overridden here to keep the H2 reading
   upright across all sections. */
.section-features h2 .fh-accent,
.section-personas h2 .ph-accent,
.section-pricing h2 .ph-accent,
.section-success h2 .sh-accent,
.section-testimonial h2 .th-accent{
    font-style: normal;
}

/* ── Pricing-plan switcher (.ps-pill) — Apple-style segmented control.
      The earlier attempt left both pills looking nearly identical
      on reload because (a) parent was white + active pill was
      white = invisible elevation, and (b) inactive text was
      slate-with-blue-undertone which read as the same hue family
      as the brand-blue active state.

      Fix:
      · Parent container tinted soft slate (#f1f5f9) so the
        white active pill clearly LIFTS off the surface
      · Inactive uses TRUE neutral grays (no blue undertone)
      · Active uses brand royal-blue everywhere
      · 88px breathing room below the switcher group. ── */
.pricing-switcher{
    background: #f1f5f9;
    border-color: rgba(15, 23, 42, .06);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
    margin-bottom: 88px;
}

/* INACTIVE — truly neutral, distinctly "not selected" */
.ps-pill{ color: #1f2937; }
.ps-pill .ps-icon{
    background: #ffffff;
    color: #9ca3af;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}
.ps-pill .ps-name{
    color: #1f2937;
    font-weight: 600;
}
.ps-pill .ps-caption{
    color: #6b7280;
}

/* ACTIVE — clean white card with brand-blue identity */
.ps-pill.is-active{
    background: #ffffff;
    color: var(--pa-accent);
    transform: none;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 10px 22px -10px rgba(15, 23, 42, .14),
        inset 0 0 0 1px rgba(40, 99, 195, .28);
}
.ps-pill.is-active:hover{
    transform: translateY(-1px);
    color: var(--pa-accent);
}
.ps-pill.is-active .ps-icon{
    background: var(--pa-accent-soft);
    color: var(--pa-accent);
    box-shadow: none;
}
.ps-pill.is-active .ps-name{
    color: var(--pa-accent);
    font-weight: 600;
}
.ps-pill.is-active .ps-caption{
    color: rgba(40, 99, 195, .72);
}

/* ── Section eyebrows — unify dot/border/text colors so every chip
      reads as one component family rather than 5 variants. ── */
.personas-eyebrow .pe-dot,
.pricing-eyebrow .pre-dot,
.success-eyebrow .se-dot,
.testimonial-eyebrow .te-dot{
    background: linear-gradient(135deg, #2863c3 0%, #7747b6 100%) !important;
    box-shadow: 0 0 0 3px rgba(40, 99, 195, .14) !important;
}
.personas-eyebrow,
.pricing-eyebrow,
.success-eyebrow,
.testimonial-eyebrow{
    color: #2863c3 !important;
    border-color: rgba(40, 99, 195, .22) !important;
    background: rgba(40, 99, 195, .07) !important;
}

/* ── Product variants — each one gets its own brand-color identity,
      matching the testimonial / persona tab pattern. Three products,
      three brand colors:

        Ask Me        (default)        → Violet      #7747b6
        Insights      (.is-insights)   → Royal Blue  #2863c3
        Data Magnet   (.is-datamagnet) → Turquoise   #1ca9c9

      The .product-detail variant class is added by JS when you
      switch tabs. All eyebrow/pill/chip/quote/CTA accents inside
      the panel read from --pd-accent / --pd-accent-bg /
      --pd-accent-border, so swapping the variable trio is enough. ── */
.product-detail{
    /* Ask Me default — Violet */
    --pd-accent: #7747b6;
    --pd-accent-bg: rgba(119, 71, 182, .22);
    --pd-accent-border: rgba(119, 71, 182, .55);
}
.product-detail.is-insights{
    /* Insights — Royal Blue */
    --pd-accent: #2863c3;
    --pd-accent-bg: rgba(40, 99, 195, .22);
    --pd-accent-border: rgba(40, 99, 195, .55);
}
.product-detail.is-datamagnet{
    /* Data Magnet — Turquoise */
    --pd-accent: #1ca9c9;
    --pd-accent-bg: rgba(28, 169, 201, .22);
    --pd-accent-border: rgba(28, 169, 201, .55);
}

/* ── Product switcher tabs (top of the products section) — each
      tab now paints with its product's accent when active, so
      the tab row itself shows three distinct colors instead of
      a generic white-tint pill regardless of selection. ── */
.product-tab[data-product="askme"].is-active{
    background: rgba(119, 71, 182, .16);
    color: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(119, 71, 182, .42),
        0 6px 18px -8px rgba(119, 71, 182, .55);
}
.product-tab[data-product="insights"].is-active{
    background: rgba(40, 99, 195, .16);
    color: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(40, 99, 195, .42),
        0 6px 18px -8px rgba(40, 99, 195, .55);
}
.product-tab[data-product="datamagnet"].is-active{
    background: rgba(28, 169, 201, .16);
    color: #ffffff;
    box-shadow:
        inset 0 0 0 1px rgba(28, 169, 201, .42),
        0 6px 18px -8px rgba(28, 169, 201, .55);
}

/* ── Pricing-plan switcher (.psb hover/active idle) — unify
      variants Freemium/Enterprise so chips don't flip identity. ── */
.psb,
.psb.is-active,
.ps-pill.is-active{
    --psb-accent: #2863c3;
    --psb-accent-secondary: #7747b6;
}

/* ── Story-card eyebrow dot — unify the per-card colour rotation
      (was healthcare/manufacturing/agriculture variants in different
      hues) so every story chip reads with the same brand dot. ── */
.story-card .story-eyebrow-dot{
    background: linear-gradient(135deg, #2863c3 0%, #7747b6 100%) !important;
}
.story-card .story-link{
    color: #2863c3 !important;
}

/* ── Testimonial tabs — give each tab its own accent identity
      when active, mirroring the product-section pattern where
      Insights / Ask Me / Data Magnet each have distinct colors.
      Tab 1 (Arvind) → Royal Blue, Tab 2 (Vicente) → Violet,
      Tab 3 (Sara) → Turquoise. The whole .testimonial-tab.is-active
      styling already uses --ts-accent* variables, so we just
      redefine them per nth-child. ── */
.testimonial-tab:nth-child(1){
    --ts-accent: #2863c3;            /* Royal Blue 450 */
    --ts-accent-secondary: #7747b6;
    --ts-accent-glow-a: rgba(40, 99, 195, .35);
    --ts-accent-glow-b: rgba(40, 99, 195, .22);
    --ts-accent-soft:  rgba(40, 99, 195, .08);
    --ts-accent-border: rgba(40, 99, 195, .30);
}
.testimonial-tab:nth-child(2){
    --ts-accent: #7747b6;            /* Violet 450 */
    --ts-accent-secondary: #2863c3;
    --ts-accent-glow-a: rgba(119, 71, 182, .35);
    --ts-accent-glow-b: rgba(119, 71, 182, .22);
    --ts-accent-soft:  rgba(119, 71, 182, .08);
    --ts-accent-border: rgba(119, 71, 182, .30);
}
.testimonial-tab:nth-child(3){
    --ts-accent: #1ca9c9;            /* Turquoise/SkyBlue 500 */
    --ts-accent-secondary: #12b6f8;
    --ts-accent-glow-a: rgba(28, 169, 201, .35);
    --ts-accent-glow-b: rgba(28, 169, 201, .22);
    --ts-accent-soft:  rgba(28, 169, 201, .08);
    --ts-accent-border: rgba(28, 169, 201, .30);
}

/* ── Personas role tabs (Analyst / Leader / Scientist / Engineer)
      — each tab gets a distinct brand-color identity when active,
      same pattern as the testimonial tabs above. .px-tab.is-active
      uses `linear-gradient(135deg, var(--pa-accent), var(--pa-accent-secondary))`
      for its filled pill background plus shadow glows from the
      --pa-accent-glow-* tokens, so redefining those tokens per
      :nth-child swaps the entire active appearance. ── */
.px-tab:nth-child(1){
    --pa-accent: #2863c3;            /* Royal Blue 450 */
    --pa-accent-secondary: #7747b6;  /* → Violet 450 */
    --pa-accent-glow-a: rgba(40, 99, 195, .55);
    --pa-accent-glow-b: rgba(119, 71, 182, .35);
}
.px-tab:nth-child(2){
    --pa-accent: #7747b6;            /* Violet 450 */
    --pa-accent-secondary: #a855f7;  /* → lighter violet */
    --pa-accent-glow-a: rgba(119, 71, 182, .55);
    --pa-accent-glow-b: rgba(168, 85, 247, .35);
}
.px-tab:nth-child(3){
    --pa-accent: #1ca9c9;            /* Turquoise/SkyBlue 500 */
    --pa-accent-secondary: #12b6f8;  /* → SkyBlue 500 */
    --pa-accent-glow-a: rgba(28, 169, 201, .55);
    --pa-accent-glow-b: rgba(18, 182, 248, .35);
}
.px-tab:nth-child(4){
    --pa-accent: #12b6f8;            /* SkyBlue 500 */
    --pa-accent-secondary: #2863c3;  /* → Royal Blue 450 */
    --pa-accent-glow-a: rgba(18, 182, 248, .55);
    --pa-accent-glow-b: rgba(40, 99, 195, .35);
}

/* ── Personas LEFT column — uniform 34px rhythm between every block,
      same pattern as the product-detail panel:
        tabs row → eyebrow → headline → description → chips.
      The chips row is the last item, so no margin-bottom on it. ── */
.pex-selector{ margin-bottom: 34px; }
.pex-role-label{ margin-bottom: 34px; }
.pex-text h3{ margin: 0 0 34px; }
.pex-text p{ margin: 0 0 34px; }


/* ════════════════════════════════════════════════════════════════
   SITE NAV — frosted-glass treatment
   Replace the solid dark navy bar with a translucent, blurred,
   subtly brand-tinted glass surface so the page content shows
   through (premium SaaS feel, matches the dropdown panels).
   Adds:
     · semi-transparent navy fill + 16px Gaussian backdrop blur
     · 1px white inner-highlight rim along the top edge
     · 1px brand-gradient hairline along the bottom edge
     · soft brand glow shadow beneath
   Doubled-class selector ensures we beat the linked stylesheet's
   equal-specificity `background: #051A3C` solid fill.
   ════════════════════════════════════════════════════════════════ */
.site-top.site-top{
    position: sticky;
    top: 0;
    z-index: 200;
    background: transparent;
    border-bottom: none;
}
.hello-bar.hello-bar{
    background: rgba(7, 33, 75, .55);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.site-header.site-header{
    position: relative;
    background: rgba(3, 13, 30, .55);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
            backdrop-filter: blur(18px) saturate(155%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 8px 24px -16px rgba(0, 0, 0, .35);
}
/* Subtle brand-gradient hairline along the bottom edge of the
   main nav — ties the header to the same accent language used on
   every dropdown's top edge. */
.site-header.site-header::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(119, 71, 182, .35) 22%,
        rgba(40, 99, 195, .42) 50%,
        rgba(28, 169, 201, .35) 78%,
        transparent 100%);
    pointer-events: none;
}
/* When the user scrolls, the existing JS adds .is-scrolled — bump
   the opacity slightly so the glass reads cleanly on lighter
   sections below the hero. */
.site-header.is-scrolled.is-scrolled{
    background: rgba(5, 20, 55, .95);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
/* Hero stage's transparent override (line 387 in this file) would
   strip our glass on the hero — re-apply the glass background and
   keep the stacking high enough to sit above hero orbs. */
.hero-stage .site-top{
    background: transparent;
}
.hero-stage .site-header{ z-index: 60; }

/* ════════════════════════════════════════════════════════════════
   NAV MEGA-MENU DROPDOWNS
   Each top-level nav <li.has-dropdown> contains a positioned
   .nav-mega panel that fades + slides in on hover/focus. Three
   layouts:
     .nav-mega--1col → simple list (Pricing, Company)
     .nav-mega--2col → two columns (Solutions)
     .nav-mega--3col → three columns (Platform, Resources)
   The .nav-mega-list--2col modifier splits any list into two
   CSS columns for dense link sets (Capabilities, Industries).
   ════════════════════════════════════════════════════════════════ */
.nav-links{ position: relative; }
/* Wide megas need .site-header as their containing block, so override
   .nav-links back to static inside the header. */
.site-header .nav-links{ position: static; }
.nav-item{
    position: relative;
}
/* Hover bridge — invisible padding under each trigger so the cursor
   can travel from the trigger down into the dropdown without losing
   hover state. */
.nav-item.has-dropdown::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 18px;
    pointer-events: none;
}
.nav-item.has-dropdown:hover::after,
.nav-item.has-dropdown:focus-within::after{
    pointer-events: auto;
}
/* Wide-mega nav-items must not be positioned ancestors so .site-header
   becomes the containing block — top:100% on the mega then lands
   exactly at the header's bottom edge with zero gap. */
.nav-item--platform,
.nav-item--solutions,
.nav-item--resources,
.nav-item--company {
    position: static;
}
/* No CSS hover bridge needed for wide megas — the mega starts flush
   at the header bottom; the JS 200ms delay handles traversal. */
.nav-item--platform.has-dropdown::after,
.nav-item--solutions.has-dropdown::after,
.nav-item--resources.has-dropdown::after,
.nav-item--company.has-dropdown::after {
    display: none;
}
.nav-trigger .caret{
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.nav-item.has-dropdown:hover .nav-trigger .caret,
.nav-item.has-dropdown:focus-within .nav-trigger .caret{
    transform: rotate(180deg);
}

.nav-mega{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 280px;
    /* Roomier padding — 32px sides + 28px top/bottom — lets the
       link list breathe and stops the menu reading as a tight block. */
    padding: 28px 32px;
    background: rgba(7, 14, 32, .96);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .35),
        0 30px 60px -20px rgba(0, 0, 0, .55),
        0 12px 30px -10px rgba(85, 41, 142, .22),
        inset 0 1px 0 rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 50;
    transition:
        opacity .25s cubic-bezier(.22, .61, .36, 1),
        transform .25s cubic-bezier(.22, .61, .36, 1),
        visibility 0s linear .25s;
    overflow: hidden;
}
/* Transparent bridge fills the gap between trigger and menu */
.nav-mega::after{ content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; background: transparent; }
/* Subtle brand-gradient accent on the top edge — same violet→royal-blue→turquoise
   sweep as .btn-primary. Ties the dropdown visually to the site's primary
   CTA language without overwhelming the menu. */
.nav-mega::before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(119, 71, 182, .55) 25%,
        rgba(40, 99, 195, .55) 50%,
        rgba(28, 169, 201, .55) 75%,
        transparent 100%);
    pointer-events: none;
}
.nav-item.has-dropdown:hover > .nav-mega,
.nav-item.has-dropdown:focus-within > .nav-mega,
.nav-item.has-dropdown.is-open > .nav-mega{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition:
        opacity .25s cubic-bezier(.22, .61, .36, 1),
        transform .25s cubic-bezier(.22, .61, .36, 1),
        visibility 0s;
}

/* Layout variants — widened for cleaner reading */
.nav-mega--1col{
    min-width: 260px;
    padding: 22px 28px;
}
.nav-mega--2col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    min-width: 640px;
}
.nav-mega--3col{
    display: grid;
    grid-template-columns: 1fr 1.7fr 1.4fr;
    gap: 44px;
    min-width: 860px;
}

/* Column titles + links */
.nav-mega-title{
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}
.nav-mega-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Dense 2-column list (Capabilities, By Industry) — keep a calm
   row gap and a generous column gap so it doesn't read as a wall. */
.nav-mega-list--2col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 32px;
}
.nav-mega-list li a{
    display: block;
    padding: 9px 12px;
    margin: 0 -12px;
    color: rgba(255, 255, 255, .82);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 20px;
    text-decoration: none;
    border-radius: 8px;
    transition: background .18s ease, color .18s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
    white-space: nowrap;
}
.nav-mega-list li a:hover,
.nav-mega-list li a:focus-visible{
    background: rgba(64, 117, 201, .14);
    color: #ffffff;
    transform: translateX(2px);
}

/* Allow the Recent Releases / similar long-text links to wrap
   instead of trying to fit on one line in a narrow column. */
.nav-mega-col .nav-mega-list li a{
    white-space: nowrap;
}
.nav-mega--3col .nav-mega-col:last-child .nav-mega-list li a{
    white-space: normal;
    line-height: 19px;
}

/* On smaller widths, scale down the wide mega layouts so they
   don't exceed the viewport. The 3-col Platform/Resources menus
   are the widest; they shrink first. */
@media (max-width: 1280px){
    .nav-mega--3col{ min-width: 760px; grid-template-columns: 1fr 1.5fr 1.2fr; gap: 32px; padding: 24px 28px; }
    .nav-mega--2col{ min-width: 560px; gap: 36px; }
}
@media (max-width: 1100px){
    .nav-mega--3col{ min-width: 660px; gap: 24px; padding: 22px 24px; }
    .nav-mega--2col{ min-width: 480px; gap: 28px; }
}
@media (max-width: 991px){
    /* Below desktop, the nav-links container hides under the mobile
       menu (existing behavior); the mega-menus follow it out of view. */
    .nav-mega{ display: none; }
}

/* ════════════════════════════════════════════════════════════════
   PLATFORM MEGA-MENU — 3-column rich layout
     Col 1 (240px) — Products + Capabilities nav list
     Col 2 (1fr)    — Dynamic detail panel (JS swaps content)
     Col 3 (280px) — Recent Releases sidebar with View All CTA
   Hovering any item in Col 1 fires platformShow(key) which
   re-renders Col 2's innerHTML from the platformData object.
   ════════════════════════════════════════════════════════════════ */
.nav-mega--platform,
.nav-mega--solutions,
.nav-mega--resources{
    display: grid;
    gap: 0;
    padding: 0;
    /* Wide megas live as direct children of .site-header (position:relative)
       so top:100% always lands exactly at the header's bottom edge —
       no JS measurement needed. */
    position: absolute;
    top: 100%;
    left:  max(40px, calc((100vw - 1500px) / 2 + 40px));
    right: max(40px, calc((100vw - 1500px) / 2 + 40px));
    min-width: 0;
    width: auto;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    transform: translateY(-6px);
}
/* The nav bar's brand-gradient hairline now visually seams the two
   together — drop the dropdown's own ::before accent so we don't
   double up two lines at the same edge. */
.nav-mega--platform::before,
.nav-mega--solutions::before,
.nav-mega--resources::before{
    display: none;
}
/* 3-col layout for Platform / Solutions */
.nav-mega--platform,
.nav-mega--solutions{ grid-template-columns: 240px 1fr 280px; }
/* 2-col layout for Resources — wide nav block | sidebar */
.nav-mega--resources{ grid-template-columns: 1fr 320px; }
/* Resources Col 1 — Watch / Read / Learn as three equal columns
   with subtle vertical dividers between them so each group reads
   as its own distinct section. Double-class selector
   (.np-nav.np-nav--wide) bumps specificity to (0,2,0) so it
   beats the base .np-nav rule (which sets display:flex/column). */
.np-nav.np-nav--wide{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    padding: 28px 0;
    border-right: 1px solid rgba(255, 255, 255, .06);
}
.np-nav.np-nav--wide .np-nav-section{
    gap: 0;
    padding: 0 32px;
    border-right: 1px solid rgba(255, 255, 255, .06);
}
.np-nav.np-nav--wide .np-nav-section:last-child{
    border-right: none;
}

/* Re-bind the show/hide transform for the fixed-position panels
   (the base rule used translateX -50% which we no longer want). */
/* Wide megas are children of .site-header; use :has() to show them */
.site-header:has(.nav-item--platform:hover)       #platformMega,
.site-header:has(.nav-item--platform:focus-within) #platformMega,
.site-header:has(.nav-item--platform.is-open)      #platformMega,
.site-header:has(.nav-item--solutions:hover)        #solutionMega,
.site-header:has(.nav-item--solutions:focus-within) #solutionMega,
.site-header:has(.nav-item--solutions.is-open)      #solutionMega,
.site-header:has(.nav-item--resources:hover)        #resourcesMega,
.site-header:has(.nav-item--resources:focus-within) #resourcesMega,
.site-header:has(.nav-item--resources.is-open)      #resourcesMega,
.site-header:has(.nav-item--company:hover)          #companyMega,
.site-header:has(.nav-item--company:focus-within)   #companyMega,
.site-header:has(.nav-item--company.is-open)        #companyMega{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity .25s cubic-bezier(.22, .61, .36, 1),
        transform .25s cubic-bezier(.22, .61, .36, 1),
        visibility 0s;
}
/* Tablet step — when the hello-bar is hidden or header tightens,
   the top offset shrinks accordingly. */
/* No hard-coded tablet step needed — JS-measured --nav-height
   already adapts to whatever the actual rendered nav height is. */
/* Column 1 — nav list */
.np-nav{
    padding: 28px 22px 28px 28px;
    border-right: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.np-nav-section{
    display: flex;
    flex-direction: column;
}
.np-nav-title{
    margin: 0 0 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}
.np-nav-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.np-nav-list a{
    display: block;
    padding: 8px 12px;
    margin: 0 -12px;
    color: rgba(255, 255, 255, .78);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
    border-radius: 8px;
    transition: background .18s ease, color .18s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
    position: relative;
}
.np-nav-list a:hover,
.np-nav-list a.is-active{
    background: rgba(64, 117, 201, .16);
    color: #ffffff;
    transform: translateX(2px);
}
/* Active indicator — small brand bar on the left of the active item */
.np-nav-list a.is-active::before{
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, #7747b6 0%, #2863c3 50%, #1ca9c9 100%);
}
/* Capabilities "see-all" link — arrow on the right, hairline above
   the section to set it apart from the Products section. */
.np-nav-section:has(.np-cap-link){
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.np-nav-list a.np-cap-link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
}
.np-nav-list a.np-cap-link svg{
    color: rgba(255, 255, 255, .42);
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), color .25s ease;
}
.np-nav-list a.np-cap-link:hover svg,
.np-nav-list a.np-cap-link.is-active svg{
    color: #67d3ff;
    transform: translateX(2px);
}

/* Column 2 — capability grid (all 12 at a glance) */
.np-detail{
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    min-height: 360px;
    min-width: 0;
}
.np-grid-title{
    margin-bottom: 16px;
}
.np-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
/* HTML's `hidden` attribute defaults to display:none, but an
   explicit `display: grid/flex` on the element overrides it.
   Force-hide the grid + grid title + product pane when their
   `hidden` attribute is set so the swap actually works. */
.np-grid[hidden],
.np-grid-title[hidden],
.np-product-pane[hidden]{
    display: none;
}
.np-grid-card{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .88);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    line-height: 16px;
    text-decoration: none;
    transition:
        background .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .25s cubic-bezier(.22, .61, .36, 1);
}
.np-grid-card .np-grid-ic{
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(40, 99, 195, .12);
    color: #aec7f0;
    transition: background .22s ease, color .22s ease;
}
.np-grid-card:hover,
.np-grid-card.is-active{
    background: rgba(64, 117, 201, .14);
    border-color: rgba(64, 117, 201, .38);
    color: #ffffff;
    transform: translateY(-1px);
}
.np-grid-card:hover .np-grid-ic,
.np-grid-card.is-active .np-grid-ic{
    background: rgba(40, 99, 195, .24);
    color: #ffffff;
}
.np-pane{
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity .22s cubic-bezier(.22, .61, .36, 1),
        transform .22s cubic-bezier(.22, .61, .36, 1);
}
.np-pane.is-entering{
    opacity: 1;
    transform: translateY(0);
}
.np-pane-kind{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 10px;
    background: rgba(40, 99, 195, .12);
    border: 1px solid rgba(40, 99, 195, .28);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #aec7f0;
    margin-bottom: 14px;
}
.np-pane-kind .np-kind-dot{
    width: 5px; height: 5px; border-radius: 50%;
    background: linear-gradient(135deg, #7747b6, #2863c3, #1ca9c9);
}
.np-pane-title{
    margin: 0 0 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -.4px;
    color: #ffffff;
}
.np-pane-tagline{
    margin: 0 0 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .25px;
    text-transform: uppercase;
    color: #67d3ff;
}
.np-pane-desc{
    margin: 0 0 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 22px;
    color: rgba(255, 255, 255, .72);
    max-width: 460px;
}
/* Inline "Learn more →" text link — sits right under the description
   as a secondary, contextual action. Visually subtle so the bottom
   Start Free / Pricing CTAs remain the primary destinations. */
.np-learn-more{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
    padding: 0;
    color: #67d3ff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
    border-bottom: 1px solid rgba(103, 211, 255, .22);
    padding-bottom: 2px;
    align-self: flex-start;
    transition: color .25s ease, border-color .25s ease, gap .25s cubic-bezier(.22, .61, .36, 1);
}
.np-learn-more:hover{
    color: #ffffff;
    border-color: rgba(255, 255, 255, .55);
    gap: 10px;
}
/* Product CTAs row */
.np-pane-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}
.np-cta{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
}
.np-cta--primary{
    background-image: linear-gradient(to left, #7747b6 0%, #4075c9 50.718%, #1ca9c9 100%);
    background-color: transparent;
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 6px 16px -8px rgba(40, 99, 195, .55);
}
.np-cta--primary:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.np-cta--secondary{
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .88);
}
.np-cta--secondary:hover{
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .26);
}
/* Capability sub-feature list */
.np-pane-features{
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
}
.np-pane-features li{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: rgba(255, 255, 255, .82);
}
.np-pane-features li::before{
    content: "";
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 7px;
    background: linear-gradient(135deg, #2863c3, #7747b6);
}

/* Column 3 — Recent Releases */
.np-releases{
    background: rgba(0, 0, 0, .18);
    border-left: 1px solid rgba(255, 255, 255, .06);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.np-release{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    margin: 0 -6px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .2s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
}
.np-release:hover{
    background: rgba(64, 117, 201, .12);
    transform: translateX(2px);
}
.np-release-tag{
    align-self: flex-start;
    padding: 2px 7px;
    background: linear-gradient(135deg, #1ca9c9, #2863c3);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: .8px;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 2px;
}
.np-release-title{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    color: #ffffff;
}
.np-release-sub{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11.5px;
    line-height: 16px;
    color: rgba(255, 255, 255, .56);
}
.np-view-all{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #67d3ff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    transition: color .25s ease, gap .25s ease;
}
.np-view-all:hover{
    color: #ffffff;
    gap: 10px;
}

/* Tighter responsive: scale column widths on smaller desktops */
@media (max-width: 1280px){
    .nav-mega--platform,
    .nav-mega--solutions{ grid-template-columns: 220px 1fr 250px; }
    .nav-mega--resources{ grid-template-columns: 1fr 290px; }
    .np-pane-title{ font-size: 24px; line-height: 30px; }
}
@media (max-width: 1100px){
    .nav-mega--platform,
    .nav-mega--solutions{ grid-template-columns: 200px 1fr 230px; }
    .nav-mega--resources{ grid-template-columns: 1fr 260px; }
    .np-nav{ padding: 22px 16px 22px 22px; }
    .np-nav.np-nav--wide{ grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 22px 0; }
    .np-nav.np-nav--wide .np-nav-section{ padding: 0 22px; }
    .np-detail{ padding: 24px 22px; }
    .np-releases{ padding: 22px 18px; }
}


/* ════════════════════════════════════════════════════════════════
   PRICING — asymmetric split layout (Lumenore SaaS comparison)
     LEFT (1fr)   main panel: plan switcher + tag + heading + sub
                  + capability cards (2-col grid, plan-driven count)
                  + Compare Plans CTA
     RIGHT (360px) column of 3 stacked insight cards:
                  Value (h4 + 3 checked sub-bullets — swaps per cap)
                  KPI (stat number + caption — swaps per cap)
                  Workflow (static 4-node pipeline visual)
   Active capability card has a brand-gradient border via masked
   ::after; the workflow line pulses with a brand-gradient highlight.
   ════════════════════════════════════════════════════════════════ */
.pricing-grid{
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 24px;
    margin-top: 48px;
    align-items: stretch;
}

/* ── LEFT — main pricing panel ───────────────────────────── */
.pricing-main{
    position: relative;
    isolation: isolate;
    padding: 32px 36px 36px;
    border-radius: 28px;
    background:
        radial-gradient(ellipse 80% 60% at 0% 0%, rgba(40, 99, 195, .05) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(28, 169, 201, .04) 0%, transparent 60%),
        linear-gradient(155deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid rgba(40, 99, 195, .08);
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .04),
        0 24px 56px -28px rgba(40, 99, 195, .14);
    display: flex;
    flex-direction: column;
}

/* Plan switcher — compact pill, two chips inline */
.pm-switcher{
    display: inline-flex;
    align-self: flex-start;
    padding: 4px;
    margin-bottom: 28px;
    background: #f1f5f9;
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
}
.pm-plan{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: transparent;
    border: none;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #475467;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.pm-plan svg{ color: #9ca3af; transition: color .25s ease; }
.pm-plan:hover{ color: #1f2937; }
.pm-plan.is-active{
    background: #ffffff;
    color: #2863c3;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 4px 12px -6px rgba(40, 99, 195, .25),
        inset 0 0 0 1px rgba(40, 99, 195, .22);
}
.pm-plan.is-active svg{ color: #2863c3; }

.pm-tag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 14px;
    background: rgba(40, 99, 195, .08);
    border: 1px solid rgba(40, 99, 195, .18);
    border-radius: 999px;
    color: #2863c3;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.pm-tag-dot{
    width: 6px; height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1ca9c9, #7747b6);
    box-shadow: 0 0 8px rgba(40, 99, 195, .55);
}
.pm-title{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 42px;
    color: #101828;
    margin: 0 0 28px;
    max-width: 540px;
    letter-spacing: -.4px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    transition: opacity .22s ease;
}
.pm-sub{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    color: #101828;
    margin: 0 0 28px;
    max-width: 520px;
    transition: opacity .22s ease;
}

/* Capability cards — 2-col grid, count is driven by plan */
.pm-cards{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 28px;
}
.pm-card{
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
    transition:
        transform .35s cubic-bezier(.22, .61, .36, 1),
        box-shadow .35s cubic-bezier(.22, .61, .36, 1),
        border-color .25s ease;
}
.pm-card::after{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #1ca9c9 0%, #4075c9 50%, #7747b6 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 1;
}
.pm-card-num{
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(40, 99, 195, .08);
    color: #2863c3;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .3px;
    transition: background .25s ease, color .25s ease;
}
.pm-card-title{
    flex: 1;
    color: #101828;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 19px;
}
.pm-card-arrow{
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: #98a2b3;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), color .25s ease;
}
.pm-card:hover{
    transform: translateY(-3px) scale(1.01);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 18px 36px -16px rgba(40, 99, 195, .22),
        0 8px 18px -10px rgba(119, 71, 182, .12);
    border-color: transparent;
}
.pm-card:hover::after,
.pm-card.is-active::after{ opacity: 1; }
.pm-card:hover .pm-card-arrow,
.pm-card.is-active .pm-card-arrow{
    transform: translateX(3px);
    color: #2863c3;
}
.pm-card.is-active{
    transform: translateY(-2px);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 16px 32px -14px rgba(40, 99, 195, .26),
        0 8px 18px -10px rgba(119, 71, 182, .16);
    border-color: transparent;
}
.pm-card.is-active .pm-card-num{
    background: linear-gradient(135deg, #1ca9c9 0%, #4075c9 50%, #7747b6 100%);
    color: #ffffff;
    box-shadow: 0 6px 14px -6px rgba(40, 99, 195, .55);
}

.pm-cta{ align-self: flex-start; margin-top: auto; }

/* ── RIGHT — 3 stacked cards ─────────────────────────────── */
.pricing-aside{
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 16px;
}
.pa-card{
    position: relative;
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 22px;
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .04),
        0 12px 28px -16px rgba(15, 23, 42, .08);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}
.pa-card:hover{
    transform: translateY(-2px);
    box-shadow:
        0 1px 3px rgba(16, 24, 40, .05),
        0 18px 36px -16px rgba(40, 99, 195, .14);
}
.pa-label{
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #2863c3;
    margin-bottom: 10px;
}
.pa-title{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -0.2px;
    color: #101828;
    margin: 0 0 14px;
    transition: opacity .22s ease;
}
/* GIF preview inside the Value card — sits at the top, swaps when the
   active capability changes. Image scales to a 16:10-ish container with
   rounded corners and a subtle brand-tinted backdrop. */
.pa-card--value .pa-media{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    margin: 0 0 16px;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(40, 99, 195, .08) 0%, transparent 70%),
        #f7faff;
    border: 1px solid rgba(40, 99, 195, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: opacity .22s ease;
}
.pa-card--value .pa-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.pa-media-lottie{
    width: 100%;
    height: 100%;
    display: none;
}
.pa-media-lottie svg{ width: 100%; height: 100%; }
/* Swap-fade applies to the media too */
.is-swapping .pa-media{ opacity: 0; }

.pa-card--value .pa-checklist{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity .22s ease;
}
.pa-card--value .pa-checklist li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 20px;
    color: #344054;
}
.pa-check{
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1ca9c9, #4075c9);
    color: #ffffff;
}

.pa-card--kpi{
    padding: 24px 26px;
    background:
        radial-gradient(ellipse 80% 80% at 100% 0%, rgba(28, 169, 201, .08) 0%, transparent 60%),
        #ffffff;
}
.pa-kpi-icon{
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(40, 99, 195, .08);
    color: #2863c3;
    margin-bottom: 12px;
}
.pa-kpi-icon svg{ width: 18px; height: 18px; }
.pa-kpi-stat{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 52px;
    line-height: 56px;
    color: #101828;
    margin: 0 0 6px;
    letter-spacing: -1.5px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    background: linear-gradient(135deg, #2863c3 0%, #7747b6 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    transition: opacity .22s ease;
}
.pa-kpi-stat > span:last-child{
    font-size: 32px;
    margin-left: 2px;
    -webkit-text-fill-color: transparent;
            color: transparent;
}
.pa-kpi-cap{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #475467;
    margin: 0;
    transition: opacity .22s ease;
}

.pa-card--flow{ overflow: hidden; }
.pa-flow{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px 6px;
}
.pa-flow-line{
    position: absolute;
    left: 18px;
    right: 18px;
    top: 50%;
    transform: translateY(calc(-50% - 8px));
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg,
        rgba(28, 169, 201, .25) 0%,
        rgba(64, 117, 201, .35) 50%,
        rgba(119, 71, 182, .25) 100%);
    z-index: 0;
    overflow: hidden;
}
.pa-flow-line::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, .9) 50%,
        transparent 100%);
    transform: translateX(-100%);
    animation: paFlowPulse 3.6s ease-in-out infinite;
}
@keyframes paFlowPulse{
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}
.pa-flow-node{
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: paFlowFloat 4s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * .35s);
}
@keyframes paFlowFloat{
    0%   { translate: 0 -2px; }
    100% { translate: 0  2px; }
}
.pa-flow-node svg{
    width: 18px;
    height: 18px;
    padding: 8px;
    box-sizing: content-box;
    border-radius: 50%;
    background: #ffffff;
    color: #2863c3;
    box-shadow:
        0 0 0 1px rgba(40, 99, 195, .14),
        0 4px 10px -4px rgba(40, 99, 195, .22);
}
.pa-flow-node span{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 10.5px;
    color: #475467;
    letter-spacing: .2px;
}

/* Swap fade — when content changes, briefly fade content opacity */
.is-swapping .pm-title,
.is-swapping .pm-sub,
.is-swapping .pm-cards,
.is-swapping .pa-title,
.is-swapping .pa-checklist,
.is-swapping .pa-kpi-stat,
.is-swapping .pa-kpi-cap{
    opacity: 0;
}

/* Soft fade-in on first paint */
.pricing-main, .pricing-aside .pa-card{
    opacity: 0;
    translate: 0 8px;
    animation: pricingFadeIn .65s cubic-bezier(.22, .61, .36, 1) forwards;
}
.pricing-aside .pa-card:nth-child(1){ animation-delay: .08s; }
.pricing-aside .pa-card:nth-child(2){ animation-delay: .18s; }
.pricing-aside .pa-card:nth-child(3){ animation-delay: .28s; }
@keyframes pricingFadeIn{
    from { opacity: 0; translate: 0 8px; }
    to   { opacity: 1; translate: 0 0; }
}

/* Responsive */
@media (max-width: 1100px){
    .pricing-grid{ grid-template-columns: 2fr 3fr; gap: 20px; }
    .pricing-main{ padding: 28px 28px 28px; }
    .pm-title{ font-size: 28px; line-height: 38px; }
}
@media (max-width: 900px){
    .pricing-grid{ grid-template-columns: 1fr; }
    /* Only 2 cards exist (.pa-card--value, .pa-card--kpi) — the 3rd
       column here was always empty dead space at this width. */
    .pricing-aside{ grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
    .pm-cards{ grid-template-columns: 1fr; }
    .pricing-aside{ grid-template-columns: 1fr; }
    .pm-title{ font-size: 26px; line-height: 34px; }
}

@media (prefers-reduced-motion: reduce){
    .pricing-main, .pricing-aside .pa-card, .pa-flow-node, .pa-flow-line::before{
        animation: none !important;
        opacity: 1 !important;
        translate: 0 0 !important;
    }
}


/* ════════════════════════════════════════════════════════════════
   PRICING — per-plan color theming + GIF float animation
   Variables on .section-pricing[data-active-plan="..."] swap the
   pricing UI's accent palette:
     Freemium    → Turquoise + Sky-Blue (fresh, individual feel)
     Enterprise  → Violet + Royal-Blue  (premium, organizational feel)
   The data attribute is updated by setPlan() in home.html, so all
   variable-bound rules retune together on plan switch.
   Selectors below use `.section-pricing` ancestor scope so they
   beat the earlier hardcoded-color rules at equal specificity.
   ════════════════════════════════════════════════════════════════ */

/* Default (Freemium) palette */
.section-pricing[data-active-plan="freemium"]{
    --pp-accent:    #1ca9c9;
    --pp-accent-2:  #12b6f8;
    --pp-grad:      linear-gradient(135deg, #1ca9c9 0%, #12b6f8 100%);
    --pp-grad-text: linear-gradient(135deg, #1ca9c9 0%, #2863c3 100%);
    --pp-soft:      rgba(28, 169, 201, .08);
    --pp-soft-2:    rgba(18, 182, 248, .14);
    --pp-border:    rgba(28, 169, 201, .25);
    --pp-glow:      rgba(28, 169, 201, .28);
    --pp-glow-2:    rgba(18, 182, 248, .18);
}
/* Enterprise palette */
.section-pricing[data-active-plan="enterprise"]{
    --pp-accent:    #7747b6;
    --pp-accent-2:  #2863c3;
    --pp-grad:      linear-gradient(135deg, #7747b6 0%, #2863c3 100%);
    --pp-grad-text: linear-gradient(135deg, #2863c3 0%, #7747b6 100%);
    --pp-soft:      rgba(119, 71, 182, .08);
    --pp-soft-2:    rgba(40, 99, 195, .14);
    --pp-border:    rgba(119, 71, 182, .25);
    --pp-glow:      rgba(119, 71, 182, .30);
    --pp-glow-2:    rgba(40, 99, 195, .20);
}

/* Switcher active pill — color + inset border use plan accent */
.section-pricing .pm-plan.is-active{
    color: var(--pp-accent);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 4px 12px -6px var(--pp-glow),
        inset 0 0 0 1px var(--pp-border);
    transition:
        background .25s ease,
        color .35s ease,
        box-shadow .35s ease;
}
.section-pricing .pm-plan.is-active svg{
    color: var(--pp-accent);
    transition: color .35s ease;
}

/* Tag pill — softer plan tint */
.section-pricing .pm-tag{
    background: var(--pp-soft);
    border-color: var(--pp-border);
    color: var(--pp-accent);
    transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.section-pricing .pm-tag-dot{
    background: var(--pp-grad);
    box-shadow: 0 0 8px var(--pp-glow);
    transition: background .35s ease, box-shadow .35s ease;
}

/* Capability card hover & active — gradient border uses plan grad */
.section-pricing .pm-card::after{
    background: var(--pp-grad);
}
.section-pricing .pm-card:hover{
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 18px 36px -16px var(--pp-glow),
        0 8px 18px -10px var(--pp-glow-2);
}
.section-pricing .pm-card:hover .pm-card-arrow,
.section-pricing .pm-card.is-active .pm-card-arrow{
    color: var(--pp-accent);
}
.section-pricing .pm-card.is-active{
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 16px 32px -14px var(--pp-glow),
        0 8px 18px -10px var(--pp-glow-2);
}
.section-pricing .pm-card.is-active .pm-card-num{
    background: var(--pp-grad);
    box-shadow: 0 6px 14px -6px var(--pp-glow);
    transition: background .35s ease, box-shadow .35s ease;
}

/* Right column — Value card label + checks + KPI stat + card backdrops */
.section-pricing .pa-label{
    color: var(--pp-accent);
    transition: color .35s ease;
}
.section-pricing .pa-check{
    background: var(--pp-grad);
    transition: background .35s ease;
}
.section-pricing .pa-kpi-stat{
    background: var(--pp-grad-text);
    -webkit-background-clip: text;
            background-clip: text;
    transition: background .35s ease;
}
.section-pricing .pa-card--kpi{
    background:
        radial-gradient(ellipse 80% 80% at 100% 0%, var(--pp-soft-2) 0%, transparent 60%),
        #ffffff;
    transition: background .35s ease;
}

/* Value-card GIF backdrop picks up a faint plan tint too */
.section-pricing .pa-card--value .pa-media{
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, var(--pp-soft-2) 0%, transparent 70%),
        #f7faff;
    border-color: var(--pp-border);
    transition: background .35s ease, border-color .35s ease, opacity .22s ease;
}

/* ════════════════════════════════════════════════════════════════
   GIF FLOATING ANIMATION — mirrors the persona section's motion DNA
   Three independent motion channels compose without colliding:
     ① transform → mouse parallax (mx/my CSS vars set by wireParallax
        on #paValueCard, propagates to the .pa-media descendant)
     ② translate → idle ±6px Y-float keyframe, 6.5s ease-in-out
     ③ scale     → reserved for hover lift (untouched)
   ════════════════════════════════════════════════════════════════ */
.section-pricing .pa-card--value .pa-media{
    transform: translate3d(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 6px), 0);
    animation: paMediaFloat 6.5s ease-in-out 1s infinite alternate;
    will-change: transform, translate;
}
@keyframes paMediaFloat{
    0%   { translate: 0 -6px; }
    100% { translate: 0  6px; }
}

@media (prefers-reduced-motion: reduce){
    .section-pricing .pa-card--value .pa-media{
        animation: none;
        transform: none;
        translate: 0 0;
    }
}


/* ════════════════════════════════════════════════════════════════
   PRICING — Larger, more prominent plan switcher
   Overrides the earlier compact pill design. Each pill is now a
   sizable two-line chip (icon + name + sub) so Freemium ↔ Enterprise
   reads as a deliberate "choose your plan" UI element rather than a
   small toggle. Active pill lifts visibly on a layered shadow and
   shows a colored icon disc in the plan's accent.
   ════════════════════════════════════════════════════════════════ */
.section-pricing .pm-switcher{
    display: inline-flex;
    align-self: flex-start;
    gap: 6px;
    padding: 6px;
    margin-bottom: 32px;
    background: #f1f5f9;
    border-radius: 16px;
    box-shadow:
        inset 0 1px 2px rgba(16, 24, 40, .05),
        0 1px 3px rgba(16, 24, 40, .04);
}
.section-pricing .pm-plan{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 12px;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #475467;
    font-family: 'Inter', sans-serif;
    transition:
        background .25s ease,
        color .35s ease,
        box-shadow .35s ease,
        transform .25s cubic-bezier(.22, .61, .36, 1);
}
.section-pricing .pm-plan-icon{
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: #ffffff;
    color: #9ca3af;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        inset 0 0 0 1px rgba(15, 23, 42, .04);
    transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
.section-pricing .pm-plan-label{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    line-height: 1;
    text-align: left;
}
.section-pricing .pm-plan-name{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #1f2937;
    transition: color .35s ease;
}
.section-pricing .pm-plan-sub{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11.5px;
    color: #6b7280;
    transition: color .35s ease;
}
.section-pricing .pm-plan:hover{
    background: rgba(255, 255, 255, .55);
}
.section-pricing .pm-plan:hover .pm-plan-icon{
    color: var(--pp-accent);
}
.section-pricing .pm-plan:hover .pm-plan-name{
    color: #0f172a;
}

/* ── Active state — stronger contrast, plan-accent icon, lifted ── */
.section-pricing .pm-plan.is-active{
    background: #ffffff;
    color: var(--pp-accent);
    transform: translateY(-1px);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 8px 22px -10px var(--pp-glow),
        inset 0 0 0 1px var(--pp-border);
}
.section-pricing .pm-plan.is-active .pm-plan-icon{
    background: var(--pp-grad);
    color: #ffffff;
    box-shadow:
        0 6px 14px -6px var(--pp-glow),
        inset 0 1px 0 rgba(255, 255, 255, .25);
}
.section-pricing .pm-plan.is-active .pm-plan-name{
    color: var(--pp-accent);
    font-weight: 700;
}
.section-pricing .pm-plan.is-active .pm-plan-sub{
    color: var(--pp-accent);
    opacity: .78;
}
.section-pricing .pm-plan.is-active svg{
    color: #ffffff;
}

/* ── Responsive — stack the pills on narrow viewports ───────────── */
@media (max-width: 700px){
    .section-pricing .pm-switcher{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
    }
    .section-pricing .pm-plan{
        padding: 10px 14px 10px 10px;
        justify-content: flex-start;
    }
    .section-pricing .pm-plan-sub{ font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce){
    .section-pricing .pm-plan,
    .section-pricing .pm-plan-icon{
        transition: none !important;
    }
    .section-pricing .pm-plan.is-active{ transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   HOME PAGE — page-scoped overrides (moved from home.html <style>)
   ════════════════════════════════════════════════════════════════ */
/* Desktop content width */
.container{ max-width: 1500px; padding: 0 40px; }

/* Hello bar + nav: full-width background, content aligned to the 1500px container.
   Gutter = centering offset for a 1500px zone + the container's 40px inner padding. */
.hello-bar{ padding: 10px max(40px, calc((100% - 1500px) / 2 + 40px)) 11px; }
.site-header{ padding: 20px max(40px, calc((100% - 1500px) / 2 + 40px)) 21px; }

/* Hello bar gaps match Figma exactly: badge → message-group = 10px; message → Register Now = 20px */
.hello-bar .hello-left{ gap: 10px; }
.hello-bar .hello-msg-group{
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

/* Ideal section spacing — modern SaaS rhythm (Stripe / Linear / Vercel).
   Most content sections get 96px top + 96px bottom = 192px between
   any two consecutive sections. Hero gets extra bottom for the CTA
   to breathe, the logo band is compact, and the testimonial keeps
   its long bottom runway for the blurred page-finale gradient bleed.
   Special: .section-products is a scroll-pinned 220vh track and
   stays at 0. */
.hero-section{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 96px 0 120px;
}
.trusted-section{ padding: 80px 0; background: #051A3C; }
.section-products{ padding: 0; }
.section-features{ padding: 96px 0; }
.section-personas{ padding: 96px 0; }
.section-pricing{ padding: 96px 0; }
.section-success{ padding: 96px 0; }
.section-testimonial{ padding: 96px 0 180px; }
.section-trust{ padding: 96px 0; }
.site-footer{ padding: 64px 0 24px; }

/* Standardised heading → content gap inside every section.
   Each section has its own *-intro (or .{section}-intro) wrapper that
   holds eyebrow + h2 + section-sub. Force a single bottom-margin so
   the gap from copy to first content block is identical everywhere. */
.success-intro,
.testimonial-intro,
.personas-intro,
.products-intro{ margin-bottom: 56px; }

/* Calmer heading-to-content gaps */
.trusted-section h2{ margin-bottom: 40px; }

/* Uniform client-logo sizing — auto-width so wide wordmarks are never clipped */
.logo-track > div{
    margin: 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-track img{
    max-height: 48px;
    max-width: 180px;
    height: auto;
    width: auto;
    object-fit: contain;
}
/* Drop the per-logo inline height override (e.g. TechnoDuxx) so all match */
.logo-track img[style]{ height: auto !important; }
.section-products .products-head{ margin-bottom: 28px; }
.section-personas .section-sub{ margin-bottom: 0; }
.section-pricing h2{ margin-bottom: 18px; }

/* Keep the big hero/section headings from feeling oversized on laptop displays */


/* ════════════ PREMIUM FEATURE CARDS (index.html only) ════════════
   Cards only — the section background is intentionally left untouched.
   Clean white surface, layered depth shadows, a gradient icon chip, an
   animated gradient top-accent, and a soft corner glow on hover. */
.section-features .feature-card{
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(85, 41, 142, .10);
    border-radius: 18px;
    padding: 30px 26px 28px;
    filter: none; /* replace the old flat drop-shadow with layered box-shadows */
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 12px 30px -14px rgba(14, 72, 165, .20);
    transition:
        transform .45s cubic-bezier(.22, .61, .36, 1),
        box-shadow .45s cubic-bezier(.22, .61, .36, 1),
        border-color .45s ease;
}
/* Soft diagonal glow in the top-right corner — adds depth, intensifies on hover */
.section-features .feature-card::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(125% 90% at 100% 0%,
        rgba(18, 182, 248, .10) 0%,
        rgba(85, 41, 142, .06) 32%,
        transparent 62%);
    opacity: .75;
    transition: opacity .45s ease;
}
/* Thin gradient accent that wipes across the top edge on hover */
.section-features .feature-card::after{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2;
    background: linear-gradient(90deg, #12b6f8 0%, #2863c5 48%, #7747b6 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
/* Keep card content above the corner glow */
.section-features .feature-card > *{ position: relative; z-index: 1; }

.section-features .feature-card:hover{
    transform: translateY(-6px);
    border-color: rgba(85, 41, 142, .20);
    box-shadow:
        0 2px 4px rgba(16, 24, 40, .05),
        0 22px 48px -18px rgba(40, 99, 195, .38);
}
.section-features .feature-card:hover::before{ opacity: 1; }
.section-features .feature-card:hover::after{ transform: scaleX(1); }

/* Gradient icon chip with white glyph + soft colored glow */
.section-features .feature-card .fc-icon{
    border-radius: 14px;
    background: linear-gradient(135deg, #0e48a5 0%, #2863c5 52%, #7747b6 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px -8px rgba(40, 99, 195, .55);
    transition:
        transform .45s cubic-bezier(.22, .61, .36, 1),
        box-shadow .45s ease;
}
.section-features .feature-card:hover .fc-icon{
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 12px 24px -8px rgba(85, 41, 142, .6);
}

/* Type refinement: strong heading, softer slate body for clean hierarchy */
.section-features .feature-card h5{
    color: #101828;
    letter-spacing: -.01em;
}
.section-features .feature-card p{ color: #475467; }

@media (max-width: 991px){
    .container{ padding: 0 24px; }
    .hello-bar{ padding: 10px 24px 11px; }
    .site-header{ padding: 14px 24px; }
  
    .hero-section{ padding: 64px 0 80px; }
    .section-products{ padding: 0; }
    .section-features{ padding: 72px 0; }
    .section-personas{ padding: 72px 0; }
    .section-pricing{ padding: 72px 0; }
    .section-success{ padding: 72px 0; }
    .section-testimonial{ padding: 72px 0 120px; }
    .section-trust{ padding: 72px 0; }
    .trusted-section{ padding: 56px 0; }
    .success-intro,
    .testimonial-intro,
    .personas-intro,
    .products-intro{ margin-bottom: 40px; }
    .hero-section h1{ font-size: 44px; line-height: 54px; }
}
@media (max-width: 575px){
    .container{ padding: 0 18px; }
    .hello-bar{ padding: 8px 18px; }
    .site-header{ padding: 12px 18px; }
    .hero-section h1{ font-size: 34px; line-height: 44px; }
}

/* ── Nav logo (SVG) ───────────────────────────────────── */
.site-header .brand-mark{ height: 44px; }
.site-header .nav-logo-img{
    height: 42px;
    width: auto;
    display: block;
    /* Keep the logo crisp and clearly visible over the busy hero canvas in full-screen */
    filter: drop-shadow(0 2px 10px rgba(3, 13, 30, .55));
}
/* No borders on the bars — use a soft colored glow under the nav for separation.
   .site-top wraps both bars, so its bottom hairline must go too; otherwise a
   faint line still renders directly under the nav. */
.site-top{ border-bottom: none; }
.hello-bar{ border-bottom: none; }
.site-header{
    border-bottom: none;
    /* Subtle, soft, hero-toned glow (cyan → violet) instead of a hard line */
    box-shadow:
        0 12px 28px -20px rgba(18, 182, 248, .30),
        0 6px 16px -14px rgba(85, 41, 142, .22);
}

/* ── Hello bar motion ─────────────────────────────────── */
/* Gentle pulsing glow on the "Webinar" badge */
.hello-bar .hello-badge{
    animation: badgePulse 2.4s ease-in-out infinite;
    will-change: transform, box-shadow;
}
@keyframes badgePulse{
    0%, 100%{
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(252, 252, 252, .45);
    }
    50%{
        transform: scale(1.06);
        box-shadow: 0 0 0 6px rgba(252, 252, 252, 0);
    }
}
/* Subtle shimmer sweeping across the message text */
.hello-bar .hello-message{
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .8) 0%,
        rgba(255, 255, 255, .8) 35%,
        #ffffff 50%,
        rgba(255, 255, 255, .8) 65%,
        rgba(255, 255, 255, .8) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    animation: shimmer 4s linear infinite;
}
@keyframes shimmer{
    0%{ background-position: 120% 0; }
    100%{ background-position: -120% 0; }
}
/* Looping nudge on the Register Now arrow */
.hello-bar .hello-cta svg{
    animation: arrowNudge 1.6s ease-in-out infinite;
}
@keyframes arrowNudge{
    0%, 100%{ transform: translateX(0); }
    50%{ transform: translateX(4px); }
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
    .hello-bar .hello-badge,
    .hello-bar .hello-message,
    .hello-bar .hello-cta svg{ animation: none; }
    .hello-bar .hello-message{
        -webkit-text-fill-color: rgba(255, 255, 255, .8);
        color: rgba(255, 255, 255, .8);
    }
}

/* ════════════ HERO PREMIUM EFFECTS (index.html only) ════════════ */

/* Low-opacity tech grid overlay, faded toward the edges */
.hero-grid{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(159, 186, 228, .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(159, 186, 228, .055) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(125% 85% at 50% 28%, #000 0%, rgba(0,0,0,.55) 55%, transparent 80%);
            mask-image: radial-gradient(125% 85% at 50% 28%, #000 0%, rgba(0,0,0,.55) 55%, transparent 80%);
}

/* Glowing gradient orbs toward the bottom */
.hero-orbs{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    will-change: transform;
}
.hero-orb{
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .55;
    will-change: transform;
    mix-blend-mode: screen;
}
.hero-orb.orb-violet{
    width: 460px; height: 460px;
    left: 6%; bottom: -180px;
    background: radial-gradient(circle at 50% 50%,
        rgba(119, 71, 182, .95) 0%, rgba(85, 41, 142, .5) 45%, transparent 70%);
    animation: orbFloat 11s ease-in-out infinite;
}
.hero-orb.orb-cyan{
    width: 380px; height: 380px;
    left: 45%; bottom: -210px;
    background: radial-gradient(circle at 50% 50%,
        rgba(28, 169, 201, .85) 0%, rgba(18, 182, 248, .4) 45%, transparent 70%);
    animation: orbFloat 13s ease-in-out infinite .8s;
}
.hero-orb.orb-blue{
    width: 430px; height: 430px;
    right: 4%; bottom: -185px;
    background: radial-gradient(circle at 50% 50%,
        rgba(64, 117, 201, .9) 0%, rgba(14, 72, 165, .45) 45%, transparent 70%);
    animation: orbFloat 12s ease-in-out infinite .4s;
}
@keyframes orbFloat{
    0%, 100%{ transform: translate3d(0, 0, 0) scale(1); }
    50%{ transform: translate3d(0, -28px, 0) scale(1.06); }
}

/* Small floating glowing particles */
.hero-particles{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.hero-particles .particle{
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(231, 248, 254, .95);
    box-shadow: 0 0 8px 2px rgba(18, 182, 248, .55);
    opacity: .6;
    animation: particleFloat 9s ease-in-out infinite, particlePulse 3.2s ease-in-out infinite;
}
.hero-particles .particle:nth-child(1){ left: 10%; top: 26%; animation-duration: 10s, 3s;   animation-delay: 0s, 0s; }
.hero-particles .particle:nth-child(2){ left: 20%; top: 58%; width: 3px; height: 3px; animation-duration: 12s, 3.6s; animation-delay: 1.1s, .4s; }
.hero-particles .particle:nth-child(3){ left: 32%; top: 38%; animation-duration: 8.5s, 2.8s; animation-delay: .6s, .9s; }
.hero-particles .particle:nth-child(4){ left: 41%; top: 70%; width: 5px; height: 5px; animation-duration: 11s, 3.4s; animation-delay: 2s, .2s; }
.hero-particles .particle:nth-child(5){ left: 52%; top: 30%; width: 3px; height: 3px; animation-duration: 9.5s, 3.1s; animation-delay: .3s, 1.3s; }
.hero-particles .particle:nth-child(6){ left: 60%; top: 64%; animation-duration: 13s, 3.8s; animation-delay: 1.6s, .6s; }
.hero-particles .particle:nth-child(7){ left: 68%; top: 42%; width: 3px; height: 3px; animation-duration: 10.5s, 2.9s; animation-delay: .9s, 1.1s; }
.hero-particles .particle:nth-child(8){ left: 76%; top: 72%; width: 5px; height: 5px; animation-duration: 12.5s, 3.5s; animation-delay: 2.3s, .3s; }
.hero-particles .particle:nth-child(9){ left: 84%; top: 34%; animation-duration: 9s, 3.2s; animation-delay: .5s, .8s; }
.hero-particles .particle:nth-child(10){ left: 90%; top: 60%; width: 3px; height: 3px; animation-duration: 11.5s, 3.7s; animation-delay: 1.4s, .5s; }
.hero-particles .particle:nth-child(11){ left: 15%; top: 46%; width: 3px; height: 3px; animation-duration: 10s, 3s; animation-delay: 1.9s, 1s; }
.hero-particles .particle:nth-child(12){ left: 47%; top: 50%; animation-duration: 12s, 3.3s; animation-delay: .8s, .2s; }
@keyframes particleFloat{
    0%, 100%{ transform: translate3d(0, 0, 0); }
    50%{ transform: translate3d(6px, -24px, 0); }
}
@keyframes particlePulse{
    0%, 100%{ opacity: .25; }
    50%{ opacity: .85; }
}

/* Hero stage — nav bar + hero share one continuous premium canvas.
   Bars and hero go transparent so the grid/orbs/particles flow through. */
.hero-stage{
    position: relative;
    overflow-x: clip;
    background: transparent;
    /* Full-screen: nav + hero together fill exactly one viewport */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
.hero-stage .site-top{ position: sticky; top: 0; z-index: 200; background: transparent; }
.hero-st age .hello-bar{ background: transparent; }
.hero-stage .site-header{ background: transparent; }
.hero-stage .hero-section{
    position: relative;
    z-index: 3;
    background: transparent;
}
/* Grid now spans nav → hero: fade softly at the very top and into the logos below */
.hero-grid{
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 18%, #000 78%, transparent 100%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, #000 18%, #000 78%, transparent 100%);
}

@media (prefers-reduced-motion: reduce){
    .hero-orb,
    .hero-particles .particle{ animation: none; }
    .hero-orbs{ transform: none !important; }
}

/* ── Hello bar — reduced height only ── */
.hello-bar{
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

/* ── Hero stage — full viewport height across all devices ── */
.hero-stage{
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}
.hero-stage .hero-section{
    flex: 1;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
}
.hero-stage .hero-section .container{
    width: 100%;
}

/* Null out all breakpoint padding overrides so flex-fill stays intact */
@media (max-width: 1199px){ .hero-stage .hero-section{ padding: 0 !important; } }
@media (max-width: 991px) { .hero-stage .hero-section{ padding: 0 !important; } }
@media (max-width: 767px) { .hero-stage .hero-section{ padding: 0 !important; } }
@media (max-width: 575px) { .hero-stage .hero-section{ padding: 0 !important; } }

#personaSection{
    background: #fcfcfc !important;
    color: #101828;
    padding: 96px 0 0;
    position: relative !important;
    z-index: 2;
    overflow: hidden;
    isolation: isolate;
}
#personaSection .personas-fade{
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 280px;
    background: linear-gradient(180deg,
        rgba(231,238,248,1) 0%,
        rgba(231,238,248,.65) 25%,
        rgba(231,238,248,.22) 52%,
        rgba(231,238,248,.05) 70%,
        transparent 88%);
    pointer-events: none;
    z-index: 0;
}
#personaSection .personas-fade-bottom{
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 320px;
    background: linear-gradient(0deg,
        rgba(252,252,252,1) 0%,
        rgba(252,252,252,.90) 25%,
        rgba(252,252,252,.50) 60%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
}
#personaSection::after{
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(252,252,252,.55) 40%,
        rgba(252,252,252,.90) 72%,
        #fcfcfc 100%);
    pointer-events: none;
    z-index: 10;
}
#personaSection .container{ position: relative; z-index: 1; }
#personaSection .personas-intro{ margin-bottom: 96px !important; }
#personaSection .persona-explorer{
    display: grid !important;
    grid-template-columns: minmax(320px, .95fr) minmax(0, 1.15fr) !important;
    gap: 80px;
    align-items: stretch;
    position: relative;
}
#personaSection .pex-content{
    height: 100%;
}
#personaSection .pex-stage{
    position: relative !important;
    width: 100%;
    height: 100%;
    min-height: 380px;
    isolation: isolate;
}
#personaSection .persona-scene{
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s linear .55s;
}
#personaSection .persona-scene.is-on{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none;
    transition: opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}
#personaSection .persona-chips{
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
}
#personaSection .scene-card.sc-1{ top: 0;   left: 0;   width: 70%; }
#personaSection .scene-card.sc-2{ top: 20%;  right: 0;  width: 44%; }
#personaSection .scene-card.sc-3{ top: 42%; left: 18%; width: 56%; }
@media (max-width: 991px){
    #personaSection .persona-explorer{ grid-template-columns: 1fr !important; gap: 48px; }
    #personaSection .pex-stage{ min-height: 380px; }
}
@media (max-width: 575px){
    #personaSection .pex-stage{ min-height: 360px; }
}
.section-products .products-head{ justify-content: flex-end !important; }
.section-products .products-intro{ margin-bottom: 56px !important; }
.section-products .personas-eyebrow{
    color: #12b6f8 !important;
    background: rgba(18, 182, 248, .10) !important;
    border-color: rgba(18, 182, 248, .25) !important;
}
.section-products .personas-eyebrow .pe-dot{
    background: linear-gradient(135deg, #12b6f8 0%, #1ca9c9 100%) !important;
    box-shadow: 0 0 0 3px rgba(18, 182, 248, .18) !important;
}

.product-detail > *{
    transition: opacity .28s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.product-detail > *:nth-child(1){ transition-delay: 0s; }
.product-detail > *:nth-child(2){ transition-delay: .03s; }
.product-detail > *:nth-child(3){ transition-delay: .06s; }
.product-detail > *:nth-child(4){ transition-delay: .09s; }
.product-detail > *:nth-child(5){ transition-delay: .12s; }
.product-detail > *:nth-child(6){ transition-delay: .15s; }
.product-detail.is-leaving > *{
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .08s ease-in, transform .08s ease-in;
    transition-delay: 0s !important;
}
.product-detail.is-entering > *{
    opacity: 0;
    transform: translateY(14px);
    transition: none !important;
}
.product-visual img{
    transition: opacity .28s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
}
.product-visual.is-leaving img{
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .08s ease-in, transform .08s ease-in;
}
.product-visual.is-entering img{
    opacity: 0;
    transform: translateY(14px);
    transition: none !important;
}
.testimonial-body .quote-text{
    line-height: 26px !important;
}
.trusted-section h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.3px;
    color: var(--Base-White, #fcfcfc);
    text-align: center;
    margin: 0 auto 40px;
    max-width: 920px;
}

/* ── Trusted logos ──
   #logoFlipGrid (desktop, >991px): original 8-card staggered flip
   grid, unaffected by anything below — restored after an earlier
   revision accidentally replaced this globally instead of mobile-only.
   .logo-scroll-row (≤991px, see CSS further down): a completely
   separate continuous-scroll marquee of individual logos. Both reuse
   the .lf-card class name for the shared card look, but every rule
   here is scoped to one container or the other so a future change to
   one can never leak into the other again. */
.logo-flip-row{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 14px;
    padding: 4px 0;
}
#logoFlipGrid .lf-card{
    perspective: 700px;
    flex: 1 1 0;
    min-width: 0;
    height: 96px;
}
#logoFlipGrid .lf-inner{
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .9s cubic-bezier(.4, 0, .2, 1);
}
#logoFlipGrid .lf-card.is-flipped .lf-inner{
    transform: rotateY(180deg);
}
#logoFlipGrid .lf-face{
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    padding: 14px 22px;
    transition: background .3s ease, border-color .3s ease;
}
#logoFlipGrid .lf-face:hover{
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .20);
}
#logoFlipGrid .lf-back{
    transform: rotateY(180deg);
}
#logoFlipGrid .lf-face img{
    max-height: 42px;
    max-width: 126px;
    height: auto;
    width: auto;
    object-fit: contain;
    opacity: .90;
    transition: opacity .3s ease;
}
#logoFlipGrid .lf-face:hover img{ opacity: 1; }
#logoFlipGrid .lf-card:nth-child(4n+1) .lf-face{
    background: linear-gradient(135deg, rgba(119,71,182,.20) 0%, rgba(40,99,197,.12) 100%);
    border-color: rgba(119,71,182,.32);
}
#logoFlipGrid .lf-card:nth-child(4n+2) .lf-face{
    background: linear-gradient(135deg, rgba(40,99,197,.20) 0%, rgba(18,182,248,.12) 100%);
    border-color: rgba(40,99,197,.32);
}
#logoFlipGrid .lf-card:nth-child(4n+3) .lf-face{
    background: linear-gradient(135deg, rgba(18,182,248,.16) 0%, rgba(119,71,182,.20) 100%);
    border-color: rgba(18,182,248,.28);
}
#logoFlipGrid .lf-card:nth-child(4n+4) .lf-face{
    background: linear-gradient(135deg, rgba(119,71,182,.12) 0%, rgba(18,182,248,.20) 100%);
    border-color: rgba(40,99,197,.32);
}
#logoFlipGrid .lf-card:nth-child(4n+1) .lf-face:hover{
    background: linear-gradient(135deg, rgba(119,71,182,.36) 0%, rgba(40,99,197,.24) 100%);
    border-color: rgba(119,71,182,.52);
}
#logoFlipGrid .lf-card:nth-child(4n+2) .lf-face:hover{
    background: linear-gradient(135deg, rgba(40,99,197,.36) 0%, rgba(18,182,248,.24) 100%);
    border-color: rgba(40,99,197,.52);
}
#logoFlipGrid .lf-card:nth-child(4n+3) .lf-face:hover{
    background: linear-gradient(135deg, rgba(18,182,248,.30) 0%, rgba(119,71,182,.36) 100%);
    border-color: rgba(18,182,248,.48);
}
#logoFlipGrid .lf-card:nth-child(4n+4) .lf-face:hover{
    background: linear-gradient(135deg, rgba(119,71,182,.24) 0%, rgba(18,182,248,.36) 100%);
    border-color: rgba(40,99,197,.52);
}

/* Mobile-only marquee container — hidden here, shown + animated only
   inside the @media(max-width:991px) block further down this file. */
.logo-scroll-row{ display: none; }
.logo-scroll-row .lf-track{
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
}
.logo-scroll-row .lf-card{
    flex: 1 1 0;
    min-width: 0;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    padding: 14px 22px;
    /* img's max-width (126px) is wider than the card at mobile sizes
       (120px/104px) — without this, a wide logo overflows past the
       card's rounded border into its neighbor instead of being clipped. */
    overflow: hidden;
    transition: background .3s ease, border-color .3s ease;
}
.logo-scroll-row .lf-card:hover{
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .20);
}
.logo-scroll-row .lf-card img{
    max-height: 42px;
    max-width: 126px;
    height: auto;
    width: auto;
    object-fit: contain;
    opacity: .90;
    transition: opacity .3s ease;
}
.logo-scroll-row .lf-card:hover img{ opacity: 1; }
.logo-scroll-row .lf-card--clone{ display: none; }
.logo-scroll-row .lf-card:nth-child(4n+1){
    background: linear-gradient(135deg, rgba(119,71,182,.20) 0%, rgba(40,99,197,.12) 100%);
    border-color: rgba(119,71,182,.32);
}
.logo-scroll-row .lf-card:nth-child(4n+2){
    background: linear-gradient(135deg, rgba(40,99,197,.20) 0%, rgba(18,182,248,.12) 100%);
    border-color: rgba(40,99,197,.32);
}
.logo-scroll-row .lf-card:nth-child(4n+3){
    background: linear-gradient(135deg, rgba(18,182,248,.16) 0%, rgba(119,71,182,.20) 100%);
    border-color: rgba(18,182,248,.28);
}
.logo-scroll-row .lf-card:nth-child(4n+4){
    background: linear-gradient(135deg, rgba(119,71,182,.12) 0%, rgba(18,182,248,.20) 100%);
    border-color: rgba(40,99,197,.32);
}
.logo-scroll-row .lf-card:nth-child(4n+1):hover{
    background: linear-gradient(135deg, rgba(119,71,182,.36) 0%, rgba(40,99,197,.24) 100%);
    border-color: rgba(119,71,182,.52);
}
.logo-scroll-row .lf-card:nth-child(4n+2):hover{
    background: linear-gradient(135deg, rgba(40,99,197,.36) 0%, rgba(18,182,248,.24) 100%);
    border-color: rgba(40,99,197,.52);
}
.logo-scroll-row .lf-card:nth-child(4n+3):hover{
    background: linear-gradient(135deg, rgba(18,182,248,.30) 0%, rgba(119,71,182,.36) 100%);
    border-color: rgba(18,182,248,.48);
}
.logo-scroll-row .lf-card:nth-child(4n+4):hover{
    background: linear-gradient(135deg, rgba(119,71,182,.24) 0%, rgba(18,182,248,.36) 100%);
    border-color: rgba(40,99,197,.52);
}

/* ── Product section — numbered progress tab design ── */
.section-products .product-stage{
    grid-template-columns: 1fr 1.15fr !important;
    gap: clamp(48px, 5.5vw, 96px) !important;
    align-items: stretch !important;
    height: clamp(420px, 50vh, 560px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.section-products .products-head{
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom-color: rgba(159,186,228,.20) !important;
    padding-bottom: 20px !important;
    margin-bottom: 28px !important;
    min-height: 52px;
}
.section-products .products-intro{
    margin-bottom: clamp(52px, 7vh, 80px) !important;
    text-align: center;
}
.products-sticky{
    justify-content: flex-start !important;
    padding: clamp(24px, 3vh, 40px) 0 !important;
}
.products-sticky > .container{
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 0 !important;
}
.products-head .pd-name{
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: var(--Base-White, #fcfcfc);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
    transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.pd-num{
    font-family: 'Inter', sans-serif;
    font-size: .6em;
    font-weight: 700;
    letter-spacing: .06em;
    color: #12b6f8;
    vertical-align: baseline;
    margin-right: 4px;
}
.pd-sep{
    color: rgba(252,252,252,.22);
    margin: 0 8px 0 2px;
    font-weight: 300;
}
.products-head.is-leaving .pd-name{
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .08s ease-in, transform .08s ease-in;
}
.products-head.is-entering .pd-name{
    opacity: 0;
    transform: translateY(10px);
    transition: none !important;
}
.product-detail h3.pd-tagline{
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(18px, 2vw, 24px) !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    letter-spacing: -.2px !important;
    color: rgba(252,252,252,.80) !important;
    margin: 0 0 36px !important;
    font-variation-settings: 'SOFT' 0, 'WONK' 1 !important;
}
.pd-prog{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: clamp(200px, 22vw, 300px);
    flex-shrink: 0;
}
.pd-prog-track{
    width: 100%;
    height: 3px;
    background: rgba(159,186,228,.14);
    border-radius: 3px;
    overflow: hidden;
}
.pd-prog-fill{
    height: 100%;
    width: 33.33%;
    background: linear-gradient(90deg, #1ca9c9 0%, #12b6f8 100%);
    border-radius: 3px;
    transition: width .55s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 0 8px rgba(18,182,248,.45);
}
.pd-prog-steps{
    display: flex;
    justify-content: space-between;
    gap: 4px;
}
.pd-prog-steps .product-tab{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    cursor: pointer !important;
    opacity: .35;
    transition: opacity .25s ease !important;
}
.pd-prog-steps .product-tab .pt-num{
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: rgba(252,252,252,.6);
    line-height: 1;
    transition: color .25s ease;
}
.pd-prog-steps .product-tab .pt-name{
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(252,252,252,.6);
    line-height: 1.2;
    white-space: nowrap;
    transition: color .25s ease;
}
.pd-prog-steps .product-tab.is-active{
    opacity: 1 !important;
    box-shadow: none !important;
    background: none !important;
}
.pd-prog-steps .product-tab.is-active .pt-num{
    color: #12b6f8;
}
.pd-prog-steps .product-tab.is-active .pt-name{
    color: #fff;
    font-weight: 500;
}
.pd-prog-steps .product-tab:hover:not(.is-active){
    opacity: .65 !important;
    background: none !important;
    border: none !important;
}
.product-detail{
    overflow: hidden !important;
}
.product-detail p{ margin-bottom: 40px !important; }
.product-detail .pd-chips{ margin-bottom: 32px !important; }
.product-detail .pd-quote{ margin: 0 0 36px !important; }
.product-visual{
    position: relative;
    height: 100%;
}

/* ── Lottie card ── */
#pdLottie{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 280px;
    border-radius: 16px;
    background: rgba(5,26,60,.55);
    border-top:    1px solid rgba(255,255,255,.18);
    border-left:   1px solid rgba(255,255,255,.12);
    border-right:  1px solid rgba(0,0,0,.30);
    border-bottom: 1px solid rgba(0,0,0,.22);
    box-shadow:
        5px  4px 0 rgba(0,0,0,.50),
        9px  7px 0 rgba(0,0,0,.32),
        13px 10px 0 rgba(0,0,0,.16),
        0 24px 64px rgba(0,0,0,.55),
        0 48px 100px rgba(0,0,0,.28),
        0 0 80px rgba(18,182,248,.10);
    transform: perspective(1000px) rotateY(-12deg) rotateX(4deg);
    transform-origin: center center;
    transition: opacity .28s ease, transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .55s ease;
    will-change: opacity, transform;
    overflow: hidden;
}
#pdLottie::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 30%, transparent 58%);
    pointer-events: none;
    z-index: 2;
}
#pdLottie svg{
    width: 100% !important;
    height: 100% !important;
}
.product-visual.is-leaving #pdLottie{
    opacity: 0;
    transform: perspective(1000px) rotateY(-12deg) rotateX(4deg) translateY(-10px);
    transition: opacity .08s ease-in, transform .08s ease-in;
}
.product-visual.is-entering #pdLottie{
    opacity: 0;
    transform: perspective(1000px) rotateY(-12deg) rotateX(4deg) translateY(14px);
    transition: none !important;
}
.product-visual.is-insights #pdLottie{
    box-shadow:
        5px  4px 0 rgba(0,0,0,.50),
        9px  7px 0 rgba(0,0,0,.32),
        13px 10px 0 rgba(0,0,0,.16),
        0 24px 64px rgba(0,0,0,.55),
        0 48px 100px rgba(0,0,0,.28),
        0 0 80px rgba(139,92,246,.13);
}
.product-visual.is-datamagnet #pdLottie{
    box-shadow:
        5px  4px 0 rgba(0,0,0,.50),
        9px  7px 0 rgba(0,0,0,.32),
        13px 10px 0 rgba(0,0,0,.16),
        0 24px 64px rgba(0,0,0,.55),
        0 48px 100px rgba(0,0,0,.28),
        0 0 80px rgba(16,185,129,.12);
}
.product-visual::before{
    content: '';
    position: absolute;
    inset: -32px;
    background: radial-gradient(ellipse at 50% 45%, rgba(18,182,248,.13) 0%, transparent 62%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.product-visual.is-insights::before{
    background: radial-gradient(ellipse at 50% 45%, rgba(139,92,246,.14) 0%, transparent 62%);
}
.product-visual.is-datamagnet::before{
    background: radial-gradient(ellipse at 50% 45%, rgba(16,185,129,.13) 0%, transparent 62%);
}

/* ── Scroll-reveal animations ── */
.reveal-block{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.reveal-block.is-visible{ opacity: 1; transform: none; }
.reveal-left{
    opacity: 0;
    transform: translateX(-44px);
    transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.reveal-left.is-visible{ opacity: 1; transform: none; }
.reveal-right{
    opacity: 0;
    transform: translateX(44px);
    transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.reveal-right.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
    .reveal-block, .reveal-left, .reveal-right{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   PRICING SECTION
   ════════════════════════════════════════════════════════════════════ */

.section-pricing .pricing-main{
    background: #ffffff !important;
    border: 1px solid rgba(40,99,195,.16) !important;
    box-shadow:
        0 1px 3px rgba(16,24,40,.04),
        0 32px 72px -28px rgba(40,99,195,.18) !important;
    min-height: 700px;
}

.section-pricing .pm-card .pm-card-title{
    color: rgba(15,23,42,.50) !important;
}

.section-pricing .pa-card--value .pa-media{
    border: 1px solid rgba(40,99,195,.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.70),
        0 6px 20px rgba(40,99,195,.10) !important;
}

.section-pricing .pa-kpi-eyebrow{
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(40,99,195,.65);
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.section-pricing .pa-card--kpi{
    background:
        radial-gradient(ellipse 110% 140% at 95% -15%, rgba(28,169,201,.22) 0%, transparent 55%),
        radial-gradient(ellipse 90% 90% at 5% 115%, rgba(119,71,182,.16) 0%, transparent 55%),
        linear-gradient(155deg, #f0f8ff 0%, #f5f0ff 100%);
    border: 1px solid rgba(40,99,195,.20);
    box-shadow:
        0 4px 28px rgba(40,99,195,.14),
        0 1px 3px rgba(0,0,0,.04);
    padding: 28px 32px;
}

.section-pricing .pa-kpi-stat{
    position: relative;
    z-index: 1;
    font-size: clamp(72px, 7vw, 96px) !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    letter-spacing: -3px !important;
    background: var(--pp-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    margin-bottom: 10px !important;
}

.section-pricing .pa-kpi-stat > span:last-child{
    font-size: clamp(44px, 4vw, 56px) !important;
}

.section-pricing .pa-kpi-cap{
    position: relative;
    z-index: 1;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #374151 !important;
    font-weight: 500 !important;
}

.pricing-grid{
    grid-template-columns: 55fr 45fr !important;
    align-items: stretch !important;
}

@media (max-width: 1199px){
    .pricing-grid{ grid-template-columns: 55fr 45fr !important; }
}

.section-pricing .pricing-aside{
    grid-template-rows: 1fr auto !important;
    height: 100%;
}

.section-pricing .pa-card--value{
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}

.section-pricing .pricing-aside .pa-card--value{
    display: flex;
    flex-direction: column;
}

.section-pricing .pm-cards{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 28px;
    position: relative;
    padding-left: 0 !important;
}

.section-pricing .pm-cards::before{
    content: '';
    position: absolute;
    left: 25px;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--pp-soft);
    border-radius: 2px;
    z-index: 0;
    transition: background .35s ease;
}

.section-pricing .pm-card{
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 14px 16px 14px 62px !important;
    gap: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative;
    z-index: 1;
    transition: background .25s ease, box-shadow .25s ease !important;
    cursor: pointer;
}

.section-pricing .pm-card.is-active{
    background: #ffffff !important;
    border: none !important;
    box-shadow:
        0 1px 4px rgba(15,23,42,.06),
        0 6px 20px rgba(15,23,42,.08) !important;
}

.section-pricing .pm-card:hover:not(.is-active){
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
    opacity: 1;
}

.section-pricing .pm-card::after{ display: none !important; }
.section-pricing .pm-card .pm-card-arrow{ display: none !important; }

.section-pricing .pm-card::before{
    content: '';
    position: absolute;
    left: 16px;
    top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at center, var(--pp-soft-2) 22%, transparent 23%), #ffffff;
    border: 2px solid var(--pp-border);
    z-index: 2;
    transition: all .3s ease;
}

.section-pricing .pm-card.is-active::before{
    background: var(--pp-grad);
    border-color: transparent;
    opacity: .55;
    box-shadow: 0 0 0 3px var(--pp-glow);
}

.section-pricing .pm-card:hover:not(.is-active)::before{
    border-color: var(--pp-border);
    box-shadow: none;
}

.section-pricing .pm-card .pm-card-title{
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #344054 !important;
    transition: color .25s ease;
    margin-bottom: 0;
    line-height: 1.45;
}

.section-pricing .pm-card.is-active .pm-card-title,
.section-pricing .pm-card:hover .pm-card-title{
    color: #344054 !important;
    font-weight: 400 !important;
}

/* ── Pricing section mobile fixes ──
   Positioned after the rules above (and using matching !important where
   they used it) so these actually win — this file has several earlier,
   non-!important mobile breakpoints for .pricing-grid/.pricing-main
   that would otherwise lose to the unconditional rules above. */
/* Hidden by default (desktop) — index.js renders this into every
   .pm-card unconditionally, but it's only meant to appear on mobile,
   and only for whichever card is currently active. */
.pm-card-desc{ display: none; }
@media (max-width: 900px){
    /* 48px never shrank alongside the intro heading (44px→26px), so it
       read as a proportionally oversized gap on phones. */
    .pricing-grid{ margin-top: 24px; }
    /* .pricing-main's min-height:700px (set above) was sized for the
       desktop two-column layout sitting flush with .pricing-aside —
       once stacked to one column on mobile, the switcher + a handful of
       short capability cards + CTA don't come close to filling 700px,
       leaving a large empty gap at the bottom of the card. */
    .section-pricing .pricing-main{ min-height: auto !important; }
    /* Mobile redesign: each capability's description now lives inside
       its own .pm-card (the sibling .pm-card-desc rendered right after
       it) instead of in the separate .pa-card--value box, which is
       hidden here — its GIF, title, and checklist were duplicating the
       exact same content in a second box. .pa-card--kpi (the stat
       number) now also has a compact version rendered inline via
       .pm-card-desc-kpi (see below), so it's redundant here too. */
    .section-pricing .pa-card--value{ display: none !important; }
    .section-pricing .pa-card--kpi{ display: none !important; }
    .section-pricing .pm-card.is-active + .pm-card-desc{
        display: block;
        padding: 4px 12px 16px 48px;
    }
    .pm-card-desc-title{
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 1.4;
        color: #101828;
        margin: 0 0 10px;
    }
    .pm-card-desc-list{
        display: flex;
        flex-direction: column;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .pm-card-desc-list li{
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 13.5px;
        line-height: 1.5;
        color: #475467;
    }
    .pm-card-desc-list .pa-check{
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin-top: 2px;
        /* --pp-grad is a linear-gradient(), not a color — invalid (and
           silently dropped) on the `color` property. */
        color: #2863c3;
    }
    /* Compact stand-in for the desktop KPI card's 72-96px animated
       number — a small pill + one-line caption, so the stat is present
       without competing with the checklist above it for attention. */
    .pm-card-desc-kpi{
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(15,23,42,.08);
    }
    .pm-card-desc-kpi-num{
        flex: 0 0 auto;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 1;
        color: #fff;
        background: var(--pp-grad, linear-gradient(135deg, #7747b6, #2863c3));
        padding: 5px 10px;
        border-radius: 8px;
        white-space: nowrap;
    }
    .pm-card-desc-kpi-cap{
        font-family: 'Inter', sans-serif;
        font-size: 12.5px;
        line-height: 1.4;
        color: #667085;
    }
}
@media (max-width: 575px){
    /* 62px of that was a fixed left indent reserved for the timeline
       dot icon (positioned at left:16px, 20px wide) regardless of
       screen width — on a 375px phone that alone eats ~16% of the
       card's width before any text starts. */
    .section-pricing .pm-card{ padding: 12px 12px 12px 48px !important; }
    .section-pricing .pm-card.is-active + .pm-card-desc{ padding-left: 48px; }
}

.pm-card-progress{
    position: absolute;
    left: 24px;
    top: calc(50% + 11px);
    width: 2px;
    height: calc(50% + 3px + 6px);
    background: var(--pp-grad);
    opacity: .45;
    transform: scaleY(0);
    transform-origin: center top;
    pointer-events: none;
    z-index: 2;
    border-radius: 0 0 2px 2px;
    transition: background .35s ease;
}

.pm-card.is-active .pm-card-progress{
    animation: pmProgress 6.5s linear forwards;
}

@keyframes pmProgress{
    from{ transform: scaleY(0); }
    to  { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce){
    .pm-card.is-active .pm-card-progress{
        animation: none;
        transform: scaleY(1);
    }
}


/* ── Hero browser frame ── */
.hero-browser-wrap{
    position: relative;
    margin-top: 8px;
}

.hero-browser-glow{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 280px;
    background:
        radial-gradient(ellipse 55% 80% at 28% 55%, rgba(119,71,182,.40) 0%, transparent 68%),
        radial-gradient(ellipse 55% 80% at 72% 55%, rgba(28,169,201,.32) 0%, transparent 68%);
    filter: blur(64px);
    pointer-events: none;
    z-index: 0;
}

.hero-browser{
    position: relative;
    z-index: 1;
    background: rgba(6,16,42,.95);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 32px 80px rgba(0,0,0,.55),
        0 8px 24px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.09);
}

.hero-browser-bar{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(4,12,34,.97);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.hb-dots{
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.hb-dot{
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.hb-dot--red   { background: #ff5f57; }
.hb-dot--yellow{ background: #febc2e; }
.hb-dot--green { background: #28c840; }

.hb-url{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 5px;
    padding: 3px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: rgba(255,255,255,.38);
    max-width: 260px;
    margin: 0 auto;
    letter-spacing: .01em;
}

.hb-url svg{ opacity: .45; flex-shrink: 0; }

.hb-spacer{ flex-shrink: 0; width: 50px; }

.hero-browser-screen{
    display: block;
    line-height: 0;
}

.hero-banner-video{
    display: block;
    width: 100%;
    height: auto;
}

/* ── Testimonial tabs — enhanced highlight ── */

/* Inactive — slightly muted so active pops */
.testimonial-tab{
    opacity: .72;
    transition:
        opacity .35s ease,
        transform .5s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s cubic-bezier(.22,.61,.36,1),
        background .4s ease,
        border-color .4s ease !important;
}
.testimonial-tab:hover:not(.is-active){
    opacity: .90 !important;
}

/* Active — full opacity + strong brand highlight */
.testimonial-tab.is-active{
    opacity: 1 !important;
    background: linear-gradient(135deg,
        rgba(14,72,165,.16) 0%,
        rgba(119,71,182,.10) 100%) !important;
    border-color: rgba(14,72,165,.50) !important;
    transform: translateY(-3px);
    box-shadow:
        0 1px 2px rgba(16,24,40,.06),
        0 8px 24px -6px rgba(14,72,165,.30),
        0 16px 32px -12px rgba(119,71,182,.18),
        inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.testimonial-tab.is-active .tt-name{
    color: var(--ts-accent) !important;
    font-weight: 700 !important;
}
.testimonial-tab.is-active .tt-role{
    color: #374151 !important;
}
.testimonial-tab.is-active .tt-company{
    color: #2863c5 !important;
}

/* ── Testimonial — company name accent line ── */
.testimonial-body .quote-company{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 22px;
    color: #2863c5;
    margin: 0;
}

.testimonial-tab .tt-company{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: #2863c5;
    white-space: nowrap;
}

/* ── Features nav buttons ── */
.features-nav{
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}
.fn-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(5,26,60,.08);
    border: 1.5px solid rgba(5,26,60,.22);
    color: rgba(5,26,60,.70);
    cursor: pointer;
    transition: background .22s ease, border-color .22s ease, color .22s ease, transform .18s ease;
    flex-shrink: 0;
}
.fn-btn:hover{
    background: rgba(5,26,60,.14);
    border-color: rgba(5,26,60,.40);
    color: rgba(5,26,60,.95);
    transform: scale(1.08);
}
.fn-btn:active{
    transform: scale(0.96);
}
.fn-btn svg{
    display: block;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER LAYOUT
   ════════════════════════════════════════════════════════════════════ */

.footer-top{
    display: flex;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 0;
    padding-bottom: 64px;
}

.footer-top .brand-col{
    flex: 0 0 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
    padding: 36px 0;
    background: none;
    border: none;
    border-radius: 0;
}

.footer-top .brand-logo-img{ height: 64px; }
.footer-top .gptw-badge    { height: 72px; }
.footer-top .brand-logo    { margin-bottom: 0; align-items: center; }

.footer-top .ask-ai-box{
    max-width: none;
    margin-bottom: 0;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.footer-top .ask-ai-box .ask-ai-label{ margin-bottom: 12px; }

.footer-top .ask-ai-icons{ gap: 10px; }
.footer-top .ask-ai-icons a{
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: linear-gradient(135deg,
        rgba(85,41,142,.42) 0%,
        rgba(14,72,165,.36) 50%,
        rgba(28,169,201,.26) 100%);
    border: 1px solid rgba(159,186,228,.35);
    box-shadow:
        0 1px 2px rgba(0,0,0,.25),
        0 6px 16px -4px rgba(85,41,142,.45),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 0 0 1px rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease;
}
.footer-top .ask-ai-icons a:hover{
    border-color: rgba(159,186,228,.6);
    box-shadow:
        0 1px 2px rgba(0,0,0,.28),
        0 10px 22px -4px rgba(85,41,142,.6),
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 0 0 1px rgba(255,255,255,.06);
    transform: translateY(-2px);
}
.footer-top .ask-ai-icons a img,
.footer-top .ask-ai-icons a svg{
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(62%) sepia(72%) saturate(500%) hue-rotate(172deg) brightness(108%);
    transition: filter .25s ease;
}
.footer-top .ask-ai-icons a:hover img,
.footer-top .ask-ai-icons a:hover svg{
    filter: brightness(0) saturate(100%) invert(100%);
}

.copyright{
    justify-content: space-between;
    align-items: center;
}

.copyright-social{
    display: flex;
    align-items: center;
    gap: 8px;
}
.copyright-social a{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(159,186,228,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.55);
    transition: background .25s ease, color .25s ease;
}
.copyright-social a:hover{
    background: rgba(119,71,182,.25);
    color: #fff;
    border-color: rgba(119,71,182,.45);
}

.footer-top .footer-cta{
    flex: 1 1 auto;
    margin-top: 36px;
    margin-bottom: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 28px;
    padding: 32px 36px;
    overflow: hidden;
    position: relative;
}

.footer-top .footer-cta .footer-cta-halo,
.footer-top .footer-cta .footer-cta-text,
.footer-top .footer-cta .footer-cta-button{ position: relative; z-index: 1; }

.footer-top .footer-cta-text{ min-width: unset; flex: 1; }
.footer-top .footer-cta-text h3{ font-size: 22px; line-height: 30px; margin-bottom: 6px; }
.footer-top .footer-cta-text p { font-size: 13.5px; line-height: 20px; max-width: 340px; margin: 0; }
.footer-top .footer-cta-eyebrow{ margin-bottom: 8px; }
.footer-top .footer-cta-button { padding: 12px 24px; font-size: 13.5px; flex-shrink: 0; white-space: nowrap; }

.site-footer .footer-nav{
    grid-template-columns: repeat(5, 1fr);
    padding-top: 36px;
    border-top: none;
    position: relative;
}
.site-footer .footer-nav::before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(119,71,182,.45) 20%,
        rgba(61,72,171,.55) 50%,
        rgba(40,99,197,.45) 80%,
        transparent 100%);
}

.site-footer .footer-nav .footer-col h4{
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 16px;
}
.site-footer .footer-nav .footer-col h4::after{
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #7747b6, #2863c5);
}

.site-footer{ padding-top: 64px; }

@media (max-width: 1160px){
    .footer-top{ gap: 32px; }
    .footer-top .brand-col{ flex: 0 0 380px; }
    .site-footer .footer-nav{ grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
}
@media (max-width: 768px){
    .footer-top{ flex-direction: column; align-items: stretch; }
    .footer-top .brand-col{ flex: none; }
    .footer-top .footer-cta{ padding: 28px; flex-direction: column; text-align: center; gap: 20px; }
    .footer-top .footer-cta-text p{ margin: 0 auto; }
    .site-footer .footer-nav{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
    .site-footer .footer-nav{ grid-template-columns: 1fr; }
}
/* ── Hello bar — reduced height only ── */
.hello-bar{
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

/* ── Hero stage — full viewport ── */
.hero-stage{
    min-height: 0 !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
}
.hero-stage .hero-section{
    min-height: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    display: flex;
    align-items: center;
}
.hero-stage .hero-section .container{ width: 100%; }
@media (max-width: 1199px){ .hero-stage .hero-section{ padding: 0 !important; } }
@media (max-width: 991px) { .hero-stage .hero-section{ padding: 0 !important; } }
@media (max-width: 767px) { .hero-stage .hero-section{ padding: 0 !important; } }
@media (max-width: 575px) { .hero-stage .hero-section{ padding: 0 !important; } }

/* ─────────────────────────────────────────────
   HERO DATA-STREAM TRACES
───────────────────────────────────────────── */
#heroTraceCanvas{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────
   HERO SPLIT LAYOUT
───────────────────────────────────────────── */
.hero-stage .hero-section{ text-align: left; }

.hero-split{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 48px 0;
}

.hero-left{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
}
.hero-eyebrow-tag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
}
.het-dot{
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #1ca9c9;
    box-shadow: 0 0 8px rgba(28,169,201,0.8);
    flex-shrink: 0;
}
.hg-agentic{
    font-style: normal;
    background: linear-gradient(90deg, #4ae7ff 0%, #4075c9 48%, #e879f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hero-split .hero-sub{
    max-width: 440px !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 28px !important;
    color: rgba(255,255,255,0.72) !important;
}
.hero-split .explore-btn{
    background: var(--Explore-Button, linear-gradient(90deg,#0e48a5,#7747b6));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity .2s;
    box-shadow: 0 4px 20px rgba(119,71,182,0.35);
}
.hero-split .explore-btn:hover{ opacity: .88; }
.hero-right{ position: relative; }

/* ─────────────────────────────────────────────
   ORB SCENE
───────────────────────────────────────────── */
.orb-scene{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 460px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── The 3D sphere ── */
.orb-body{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -58%);
    width: 220px; height: 220px;
}

.orb-sphere{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #c4b5fd 0%, #7c3aed 42%, #1e1044 85%, #0d0820 100%);
    box-shadow:
        inset -28px -28px 70px rgba(0,0,0,0.70),
        inset 12px 12px 40px rgba(196,181,253,0.20),
        0 0  60px rgba(124,58,237,0.50),
        0 0 120px rgba(124,58,237,0.22),
        0 24px 60px rgba(0,0,0,0.55);
    transition: background 0.7s ease, box-shadow 0.7s ease;
    z-index: 2;
}
.orb-sphere::before{
    content: '';
    position: absolute;
    top: 12%; left: 16%;
    width: 34%; height: 28%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.32) 0%, transparent 100%);
    filter: blur(7px);
}

[data-state="analyze"] .orb-sphere{
    background: radial-gradient(circle at 36% 30%, #ede9fe 0%, #8b5cf6 40%, #2e1065 85%, #100830 100%);
    box-shadow:
        inset -28px -28px 70px rgba(0,0,0,0.60),
        inset 12px 12px 50px rgba(237,233,254,0.22),
        0 0  80px rgba(139,92,246,0.60),
        0 0 150px rgba(139,92,246,0.25),
        0 24px 60px rgba(0,0,0,0.50);
}
[data-state="detect"] .orb-sphere{
    background: radial-gradient(circle at 36% 30%, #fca5a5 0%, #ef4444 42%, #450a0a 85%, #1a0000 100%);
    box-shadow:
        inset -28px -28px 70px rgba(0,0,0,0.70),
        inset 12px 12px 40px rgba(252,165,165,0.15),
        0 0  60px rgba(239,68,68,0.55),
        0 0 120px rgba(239,68,68,0.22),
        0 24px 60px rgba(0,0,0,0.55);
}
[data-state="act"] .orb-sphere{
    background: radial-gradient(circle at 36% 30%, #bbf7d0 0%, #22c55e 42%, #052e16 85%, #00100a 100%);
    box-shadow:
        inset -28px -28px 70px rgba(0,0,0,0.65),
        inset 12px 12px 40px rgba(187,247,208,0.18),
        0 0  60px rgba(34,197,94,0.55),
        0 0 120px rgba(34,197,94,0.22),
        0 24px 60px rgba(0,0,0,0.50);
}

/* ── Orbit rings ── */
.orb-rw{
    position: absolute;
    inset: -32px;
    border-radius: 50%;
}
.orb-rw--1{ transform: rotateX(72deg); }
.orb-rw--2{ transform: rotateX(72deg) rotateZ(58deg); }
.orb-rw--3{ transform: rotateX(58deg) rotateZ(-30deg); }

.orb-ring-i{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(139,92,246,0.28);
    animation: orb-spin 5s linear infinite;
    transition: border-color 0.6s ease;
}
.orb-rw--2 .orb-ring-i{ animation-duration: 8s; animation-direction: reverse; }
.orb-rw--3 .orb-ring-i{ animation-duration: 13s; border-color: rgba(28,169,201,0.22); }

[data-state="analyze"] .orb-rw--1 .orb-ring-i{ animation-duration: 2.5s; border-color: rgba(167,139,250,0.55); }
[data-state="analyze"] .orb-rw--2 .orb-ring-i{ animation-duration: 4s;   border-color: rgba(167,139,250,0.40); }
[data-state="analyze"] .orb-rw--3 .orb-ring-i{ animation-duration: 6s;   border-color: rgba(196,181,253,0.30); }
[data-state="detect"]  .orb-ring-i{ border-color: rgba(239,68,68,0.32) !important; }
[data-state="act"]     .orb-ring-i{ border-color: rgba(34,197,94,0.35) !important; }

@keyframes orb-spin{ to{ transform: rotateZ(360deg); } }

.orb-dot{
    position: absolute;
    top: -5px; left: 50%;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #ede9fe 0%, #a78bfa 60%);
    box-shadow: 0 0 10px rgba(167,139,250,1), 0 0 24px rgba(167,139,250,0.55);
    transform: translateX(-50%);
    transition: background 0.5s ease, box-shadow 0.5s ease;
}
[data-state="detect"] .orb-dot{
    background: #f87171;
    box-shadow: 0 0 10px rgba(248,113,113,1), 0 0 22px rgba(248,113,113,0.5);
}
[data-state="act"] .orb-dot{
    background: #4ade80;
    box-shadow: 0 0 10px rgba(74,222,128,1), 0 0 22px rgba(74,222,128,0.5);
}

/* ── Success ripples ── */
.orb-ripple{
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1.5px solid rgba(34,197,94,0.60);
    opacity: 0;
    pointer-events: none;
}
.orb-ripple--b{ inset: -20px; }
[data-state="act"] .orb-ripple  { animation: orb-ripple-out 2.2s ease-out infinite; }
[data-state="act"] .orb-ripple--b{ animation: orb-ripple-out 2.2s ease-out .7s infinite; }
@keyframes orb-ripple-out{
    0%  { opacity: 0.7; transform: scale(1);   }
    100%{ opacity: 0;   transform: scale(1.9); }
}

/* ── Floating context cards ── */
.orb-ctx{
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity .40s ease, transform .40s ease;
    z-index: 10;
}
.orb-ctx.is-active{ opacity: 1; pointer-events: auto; }

#octxAsk{
    bottom: 6%; left: 50%;
    transform: translateX(-50%) translateY(12px);
}
#octxAsk.is-active{ transform: translateX(-50%) translateY(0); }

#octxAnalyze{
    top: 20%; right: 0;
    transform: translateX(12px);
}
#octxAnalyze.is-active{ transform: translateX(0); }

#octxDetect{
    top: 4%; right: 4%;
    transform: translateY(-12px);
}
#octxDetect.is-active{ transform: translateY(0); }

#octxAct{
    bottom: 6%; left: 2%;
    transform: translateY(12px);
}
#octxAct.is-active{ transform: translateY(0); }

/* Ask — query chip */
.orb-query-chip{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(124,58,237,0.15);
    border: 1px solid rgba(167,139,250,0.45);
    border-top-color: rgba(196,181,253,0.60);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    max-width: 220px;
    min-width: 180px;
    line-height: 1.5;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 4px 16px rgba(0,0,0,0.45),
        0 0 30px rgba(124,58,237,0.20);
}
.orb-qic{
    color: #c4b5fd;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1.2;
    text-shadow: 0 0 10px rgba(196,181,253,0.8);
}
.orb-cursor{
    display: inline-block;
    width: 1.5px; height: 12px;
    background: #a78bfa;
    box-shadow: 0 0 6px rgba(167,139,250,0.9);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: orb-blink .7s step-end infinite;
}
@keyframes orb-blink{ 0%,100%{opacity:1} 50%{opacity:0} }

/* Analyze — agent rows */
.orb-ac-row{
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-top-color: rgba(255,255,255,0.16);
    border-radius: 7px;
    padding: 8px 12px;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    min-width: 190px;
    margin-bottom: 5px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .28s ease, transform .28s ease, border-color .3s, color .3s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.35);
}
.orb-ac-row.is-visible{ opacity: 1; transform: translateX(0); }
.orb-ac-row.is-done{
    color: rgba(255,255,255,0.80);
    border-color: rgba(34,197,94,0.30);
    border-top-color: rgba(34,197,94,0.48);
    box-shadow: inset 0 1px 0 rgba(34,197,94,0.15), 0 3px 8px rgba(0,0,0,0.35);
}
.orb-ac-ic{
    width: 13px; height: 13px;
    border-radius: 50%;
    border: 1.5px solid rgba(139,92,246,0.65);
    border-top-color: transparent;
    animation: orb-spin .85s linear infinite;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}
.orb-ac-ic.done{
    animation: none;
    border: 1px solid rgba(34,197,94,0.50);
    border-top-color: rgba(74,222,128,0.70);
    background: radial-gradient(circle at 40% 35%, rgba(74,222,128,0.30) 0%, rgba(34,197,94,0.12) 100%);
    color: #4ade80;
    box-shadow: inset 0 1px 1px rgba(74,222,128,0.25), 0 0 6px rgba(34,197,94,0.35);
    text-shadow: 0 0 5px rgba(74,222,128,0.8);
}

/* Detect — alert card */
.orb-alert-card{
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.35);
    border-top-color: rgba(248,113,113,0.55);
    border-radius: 10px;
    padding: 11px 14px;
    max-width: 200px;
    box-shadow:
        inset 0 1px 0 rgba(255,150,150,0.15),
        0 4px 16px rgba(0,0,0,0.40),
        0 0 24px rgba(239,68,68,0.12);
}
.orb-alert-ico{
    width: 26px; height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #fca5a5 0%, #ef4444 60%, #7f1d1d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    box-shadow: inset 0 1px 2px rgba(255,200,200,0.4), 0 0 10px rgba(239,68,68,0.6);
}
.orb-alert-ttl{ font-size: 11px; font-weight: 700; color: #f87171; text-shadow: 0 0 10px rgba(248,113,113,0.6); }
.orb-alert-sub{ font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 2px; }

/* Act — result card */
.orb-result-card{
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.30);
    border-top-color: rgba(74,222,128,0.50);
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 190px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    box-shadow:
        inset 0 1px 0 rgba(74,222,128,0.20),
        0 4px 16px rgba(0,0,0,0.40),
        0 0 30px rgba(34,197,94,0.08);
}
.orb-result-head{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    color: #4ade80;
    text-shadow: 0 0 12px rgba(74,222,128,0.55);
}
.orb-result-chk{
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, rgba(74,222,128,0.55) 0%, rgba(34,197,94,0.25) 60%);
    border: 1px solid rgba(74,222,128,0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(34,197,94,0.40);
}
.orb-result-conf{ display: flex; align-items: center; gap: 8px; }
.orb-rconf-track{
    flex: 1; height: 4px; border-radius: 4px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.45);
}
.orb-rconf-fill{
    height: 100%; width: 0; border-radius: 4px;
    background: linear-gradient(90deg, #7747b6 0%, #4ade80 100%);
    transition: width 1.1s cubic-bezier(.4,0,.2,1) .15s;
    box-shadow: 0 0 8px rgba(155,111,232,0.70), 0 0 18px rgba(74,222,128,0.35);
}
.orb-rconf-fill.is-active{ width: 92%; }
.orb-rconf-pct{ font-size: 10px; font-weight: 700; color: #4ade80; flex-shrink: 0; text-shadow: 0 0 8px rgba(74,222,128,0.60); }

/* ── Step track ── */
.orb-track{
    position: absolute;
    bottom: 3%; left: 0; right: 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.orb-step{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.orb-step span{
    font-size: 8px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    color: rgba(255,255,255,0.22);
    transition: color .35s ease, text-shadow .35s ease;
    white-space: nowrap;
}
.orb-step.is-active span{
    color: rgba(255,255,255,0.85);
    text-shadow: 0 0 10px rgba(167,139,250,0.50);
}
.orb-sdot{
    width: 10px; height: 10px; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.15) 0%, transparent 70%);
    border: 1.5px solid rgba(119,71,182,0.35);
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.10), 0 2px 5px rgba(0,0,0,0.40);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.orb-step.is-active .orb-sdot{
    background: radial-gradient(circle at 35% 28%, #d4b8ff 0%, #9b6fe8 45%, #4a18a0 100%);
    border-color: #9b6fe8;
    box-shadow: inset 0 1px 3px rgba(255,255,255,0.45), 0 0 10px rgba(155,111,232,0.85), 0 3px 7px rgba(0,0,0,0.50);
    transform: scale(1.25);
}
.orb-tseg{
    flex: 1; height: 2px;
    background: rgba(119,71,182,0.22); border-radius: 2px;
    position: relative; overflow: hidden;
    margin: 0 8px; margin-bottom: 13px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.40);
}
.orb-tseg.is-done{
    background: rgba(155,111,232,0.55);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.20), 0 0 6px rgba(155,111,232,0.50);
}
.orb-tpulse{
    position: absolute;
    top: -1px; bottom: -1px;
    width: 36px; left: -36px;
    background: linear-gradient(90deg, transparent, #c4b5fd, transparent);
    opacity: 0; filter: blur(1px);
}
.orb-tpulse.is-traveling{
    opacity: 1;
    animation: orb-travel 500ms ease-in forwards;
}
@keyframes orb-travel{ from{ left: -36px; } to{ left: 100%; } }

/* ── Responsive ── */
@media (max-width: 991px){
    .hero-split{
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 56px 0 40px;
    }
    .hero-stage .hero-section{ text-align: center; }
    .hero-left{ align-items: center; }
    .hero-split .hero-sub{ max-width: 560px !important; }
    .orb-scene{ max-width: 360px; }
}



#personaSection{
    color: #101828;
    padding: 96px 0 160px;
    position: relative !important;
    z-index: 2;
    overflow: hidden;
    isolation: isolate;
}
#personaSection .personas-fade{
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 280px;
    pointer-events: none;
    z-index: 0;
}
#personaSection .personas-fade-bottom{
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 320px;
    pointer-events: none;
    z-index: 0;
}
#personaSection::after{
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(252,252,252,.55) 40%,
        rgba(252,252,252,.90) 72%,
        #fcfcfc 100%);
    pointer-events: none;
    z-index: 10;
}
#personaSection .container{
    position: relative;
    z-index: 12;
    max-width: 100% !important;
    padding-left: max(32px, calc((100vw - 1500px) / 2 + 32px)) !important;
    padding-right: max(32px, calc((100vw - 1500px) / 2 + 32px)) !important;
}
#personaSection .personas-intro{ margin-bottom: 96px !important; }
#personaSection .persona-explorer{
    display: grid !important;
    grid-template-columns: minmax(340px, 0.8fr) minmax(0, 1fr) !important;
    gap: 0 !important;
    align-items: stretch;
    position: relative;
    /* Extend right column back to viewport edge, undoing the container's right padding */
    margin-right: calc(-1 * max(32px, calc((100vw - 1500px) / 2 + 32px)));
    width: calc(100% + max(32px, calc((100vw - 1500px) / 2 + 32px)));
}
#personaSection .pex-content{
    height: auto;
    padding: 40px 48px 40px 0;
    justify-content: center;
}
#personaSection .pex-stage{
    position: relative !important;
    width: 100%;
    height: 100%;
    min-height: 600px;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: auto !important;
}
#personaSection .pex-stage::before{ display: none !important; }
#personaSection .pex-stage::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: none;
}
#personaSection .scene-glow{ display: none !important; }
#personaSection .persona-scene{
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s linear .55s;
}
#personaSection .persona-scene.is-on{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none;
    transition: opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}
#personaSection .persona-chips{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100%;
}
#personaSection .scene-card.sc-1{ top: 0;   left: 0;   width: 70%; }
#personaSection .scene-card.sc-2{ top: 20%;  right: 0;  width: 44%; }
#personaSection .scene-card.sc-3{ top: 42%; left: 18%; width: 56%; }

/* ── Left column text — Figma 1266:24597 ── */
#personaSection .pex-text{
    gap: 28px;
    display: flex;
    flex-direction: column;
}
/* Tab pill: snap background immediately so gradient never lags behind accent change */
#personaSection .px-tab{ transition: color .3s ease, transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }

/* Role label: dot + uppercase text, no pill */
#personaSection .pex-role-label{
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 10px;
    color: var(--pa-accent);
    letter-spacing: 0.88px;
    margin-bottom: 0;
    transition: color .35s ease;
}
#personaSection .pex-role-label::before{
    width: 8px;
    height: 8px;
    background: var(--pa-accent);
    box-shadow: 0 0 8px var(--pa-accent-glow-a);
    transition: background .35s ease, box-shadow .35s ease;
}
/* Heading: 38px Space Grotesk Light, tighter leading */
#personaSection .pex-text h3{
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 0;
    max-width: 520px;
}
#personaSection .pex-text h3 .pquote{
    color: #101828;
    opacity: 1;
    font-size: 38px;
}
/* Body text */
#personaSection .pex-text p{
    color: #405270;
    line-height: 1.68;
    margin-bottom: 0;
    max-width: 520px;
}
#personaSection .pex-text p .desc-lead{
    color: #101828;
    font-weight: 600;
    font-style: normal;
}
/* Chips: vertical stack, full-width pills */
#personaSection .persona-chips .chip{
    display: flex;
    align-items: flex-start;
    padding: 10px 14px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 400;
    color: var(--pa-accent);
    background: var(--pa-accent-soft);
    border: 1px solid var(--pa-accent-border);
    box-shadow: none;
    gap: 10px;
    width: 100%;
    transition: background .35s ease, border-color .35s ease, color .35s ease;
}
#personaSection .persona-chips .chip svg{ display: none; }
#personaSection .persona-chips .chip::before{
    content: '';
    min-width: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pa-accent);
    flex-shrink: 0;
    margin-top: 4px;
    transition: background .35s ease;
}

/* Business Leader — layered image visual (Figma 1266:24597) */
.lv-wrap{
    position: absolute;
    inset: 0;
}
.lv-scene{
    position: absolute;
    inset: 0;
}

.lv-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 10px;
    object-fit: cover;
    object-position: left top;
    display: block;
    max-width: none;
    z-index: 1;
    filter:
        drop-shadow(1px 0 0 color-mix(in srgb, var(--pa-accent) 20%, transparent))
        drop-shadow(-1px 0 0 color-mix(in srgb, var(--pa-accent) 20%, transparent))
        drop-shadow(0 1px 0 color-mix(in srgb, var(--pa-accent) 20%, transparent))
        drop-shadow(0 -1px 0 color-mix(in srgb, var(--pa-accent) 20%, transparent))
        drop-shadow(0 0 5px color-mix(in srgb, var(--pa-accent) 12%, transparent))
        drop-shadow(0 0 10px color-mix(in srgb, var(--pa-accent) 6%, transparent));
}
/* ── fg wrap — takes over the absolute position ── */
.lv-fg-wrap{
    position: absolute;
    width: 65%;
    top: 28%;
    left: -2%;
    z-index: 2;
}
.lv-fg{
    position: relative;
    width: 100%;
    display: block;
    border-radius: 8px;
    max-width: none;
    filter:
        drop-shadow(1px 0 0 color-mix(in srgb, var(--pa-accent) 20%, transparent))
        drop-shadow(-1px 0 0 color-mix(in srgb, var(--pa-accent) 20%, transparent))
        drop-shadow(0 1px 0 color-mix(in srgb, var(--pa-accent) 20%, transparent))
        drop-shadow(0 -1px 0 color-mix(in srgb, var(--pa-accent) 20%, transparent))
        drop-shadow(0 0 5px color-mix(in srgb, var(--pa-accent) 12%, transparent))
        drop-shadow(0 0 10px color-mix(in srgb, var(--pa-accent) 6%, transparent));
}

/* ── overlay — sits over the card's content list area ── */
.lv-fg-overlay{
    position: absolute;
    /* SVG content list bounds: x 10.7%–83% , y 30.2%–81% of SVG dims */
    left: 10.7%;
    top: 30.2%;
    width: 72%;
    bottom: 19%;
    overflow: hidden;
    /* Match the card's baked-in matrix tilt */
    transform: matrix(0.997239,-0.0742625,0.136637,0.990621,0,0);
    transform-origin: 0 0;
    background: #fff;
    border-radius: 2px;
}

/* ── scrolling list ── */
.lv-fg-list{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 6px 10px 10px;
    will-change: transform;
}
.lv-item{
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
}
.lv-item:last-child{ border-bottom: none; }
.lv-spark{
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}
.lv-item-body{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.lv-item-text{
    margin: 0;
    font-size: 9.5px;
    line-height: 1.45;
    color: #1E293B;
    font-family: Inter, sans-serif;
}
@media (max-width: 991px){
    #personaSection .persona-explorer{ grid-template-columns: 1fr !important; gap: 20px !important; }
    #personaSection .pex-content{ padding: 0 0 8px; }
    /* .persona-img fills .pex-stage at width:100%; height:100% with
       object-fit:contain, and since it's position:absolute it doesn't
       contribute to .pex-stage's own height — so the box is exactly
       whatever min-height says, regardless of the image's actual
       rendered size. 420px was roughly double what any of the 4 persona
       images (aspect ratios ~1.40–1.93, so ~175–240px tall at a ~335px
       phone-width column) actually need, so most of that box was
       invisible letterboxing against the matching #fcfcfc background —
       reading as a big empty gap before the image. */
    #personaSection .pex-stage{ min-height: 260px; }
    /* Was vertically centered (top:50%), splitting the leftover
       letterbox space evenly above and below — anchoring to the top
       instead removes the gap above the image; any remaining slack
       (the box is still slightly taller than the tallest-ratio image
       needs) collects below instead, which reads less like a mistake. */
    /* !important: the base rule (same selector, same specificity) sits
       later in this file at line ~13154, so without it that rule would
       win by source order and silently cancel this override. */
    .section-personas .persona-img{ top: 0 !important; transform: translateX(-50%) !important; }
    /* #personaSection .personas-intro{ margin-bottom:96px !important }
       and #personaSection .pex-text{ gap:28px } (both earlier in this
       file) never scaled down at any breakpoint — same "fixed gap next
       to shrinking type" bug as the hero section. Matching !important +
       later position here is what actually wins. */
    #personaSection .personas-intro{ margin-bottom: 48px !important; }
    #personaSection .pex-text{ gap: 20px !important; }
    /* #personaSection{ padding:96px 0 160px } is an ID selector, higher
       specificity than any class-based mobile override in this file
       (including the correctly-written .section-personas{padding:72px 0}
       at ≤991px) — so the section kept its full desktop-sized gap
       above/below on every phone regardless. Matching ID specificity
       here is what actually wins. */
    #personaSection{ padding: 72px 0 96px; }
}
@media (max-width: 575px){
    #personaSection .pex-stage{ min-height: 240px; }
    /* 9px vertical padding + 13px line-height was a ~31px tap target */
    .px-tab{ padding: 13px 17px; }
    #personaSection .personas-intro{ margin-bottom: 32px !important; }
    #personaSection .pex-text{ gap: 16px !important; }
    #personaSection{ padding: 56px 0 72px; }
}
.section-products .products-head{ justify-content: flex-end !important; }
.section-products .products-intro{ margin-bottom: 56px !important; }
.section-products .personas-eyebrow{
    color: #12b6f8 !important;
    background: rgba(18, 182, 248, .10) !important;
    border-color: rgba(18, 182, 248, .25) !important;
}
.section-products .personas-eyebrow .pe-dot{
    background: linear-gradient(135deg, #12b6f8 0%, #1ca9c9 100%) !important;
    box-shadow: 0 0 0 3px rgba(18, 182, 248, .18) !important;
}

.product-detail > *{
    transition: opacity .28s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}
.product-detail > *:nth-child(1){ transition-delay: 0s; }
.product-detail > *:nth-child(2){ transition-delay: .03s; }
.product-detail > *:nth-child(3){ transition-delay: .06s; }
.product-detail > *:nth-child(4){ transition-delay: .09s; }
.product-detail > *:nth-child(5){ transition-delay: .12s; }
.product-detail > *:nth-child(6){ transition-delay: .15s; }
.product-detail.is-leaving > *{
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .08s ease-in, transform .08s ease-in;
    transition-delay: 0s !important;
}
.product-detail.is-entering > *{
    opacity: 0;
    transform: translateY(14px);
    transition: none !important;
}
.product-visual img{
    transition: opacity .28s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
}
.product-visual.is-leaving img{
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .08s ease-in, transform .08s ease-in;
}
.product-visual.is-entering img{
    opacity: 0;
    transform: translateY(14px);
    transition: none !important;
}
.testimonial-body .quote-text{
    line-height: 26px !important;
}
.trusted-section h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.3px;
    color: var(--Base-White, #fcfcfc);
    text-align: center;
    margin: 0 auto 40px;
    max-width: 920px;
}

/* ── Trusted logos ──
   #logoFlipGrid (desktop, >991px): original 8-card staggered flip
   grid, unaffected by anything below — restored after an earlier
   revision accidentally replaced this globally instead of mobile-only.
   .logo-scroll-row (≤991px, see CSS further down): a completely
   separate continuous-scroll marquee of individual logos. Both reuse
   the .lf-card class name for the shared card look, but every rule
   here is scoped to one container or the other so a future change to
   one can never leak into the other again. */
.logo-flip-row{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 14px;
    padding: 4px 0;
}
#logoFlipGrid .lf-card{
    perspective: 700px;
    flex: 1 1 0;
    min-width: 0;
    height: 96px;
}
#logoFlipGrid .lf-inner{
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .9s cubic-bezier(.4, 0, .2, 1);
}
#logoFlipGrid .lf-card.is-flipped .lf-inner{
    transform: rotateY(180deg);
}
#logoFlipGrid .lf-face{
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    padding: 14px 22px;
    transition: background .3s ease, border-color .3s ease;
}
#logoFlipGrid .lf-face:hover{
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .20);
}
#logoFlipGrid .lf-back{
    transform: rotateY(180deg);
}
#logoFlipGrid .lf-face img{
    max-height: 42px;
    max-width: 126px;
    height: auto;
    width: auto;
    object-fit: contain;
    opacity: .90;
    transition: opacity .3s ease;
}
#logoFlipGrid .lf-face:hover img{ opacity: 1; }
#logoFlipGrid .lf-card:nth-child(4n+1) .lf-face{
    background: linear-gradient(135deg, rgba(119,71,182,.20) 0%, rgba(40,99,197,.12) 100%);
    border-color: rgba(119,71,182,.32);
}
#logoFlipGrid .lf-card:nth-child(4n+2) .lf-face{
    background: linear-gradient(135deg, rgba(40,99,197,.20) 0%, rgba(18,182,248,.12) 100%);
    border-color: rgba(40,99,197,.32);
}
#logoFlipGrid .lf-card:nth-child(4n+3) .lf-face{
    background: linear-gradient(135deg, rgba(18,182,248,.16) 0%, rgba(119,71,182,.20) 100%);
    border-color: rgba(18,182,248,.28);
}
#logoFlipGrid .lf-card:nth-child(4n+4) .lf-face{
    background: linear-gradient(135deg, rgba(119,71,182,.12) 0%, rgba(18,182,248,.20) 100%);
    border-color: rgba(40,99,197,.32);
}
#logoFlipGrid .lf-card:nth-child(4n+1) .lf-face:hover{
    background: linear-gradient(135deg, rgba(119,71,182,.36) 0%, rgba(40,99,197,.24) 100%);
    border-color: rgba(119,71,182,.52);
}
#logoFlipGrid .lf-card:nth-child(4n+2) .lf-face:hover{
    background: linear-gradient(135deg, rgba(40,99,197,.36) 0%, rgba(18,182,248,.24) 100%);
    border-color: rgba(40,99,197,.52);
}
#logoFlipGrid .lf-card:nth-child(4n+3) .lf-face:hover{
    background: linear-gradient(135deg, rgba(18,182,248,.30) 0%, rgba(119,71,182,.36) 100%);
    border-color: rgba(18,182,248,.48);
}
#logoFlipGrid .lf-card:nth-child(4n+4) .lf-face:hover{
    background: linear-gradient(135deg, rgba(119,71,182,.24) 0%, rgba(18,182,248,.36) 100%);
    border-color: rgba(40,99,197,.52);
}

/* Mobile-only marquee container — hidden here, shown + animated only
   inside the @media(max-width:991px) block further down this file. */
.logo-scroll-row{ display: none; }
.logo-scroll-row .lf-track{
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
}
.logo-scroll-row .lf-card{
    flex: 1 1 0;
    min-width: 0;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
    padding: 14px 22px;
    /* img's max-width (126px) is wider than the card at mobile sizes
       (120px/104px) — without this, a wide logo overflows past the
       card's rounded border into its neighbor instead of being clipped. */
    overflow: hidden;
    transition: background .3s ease, border-color .3s ease;
}
.logo-scroll-row .lf-card:hover{
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .20);
}
.logo-scroll-row .lf-card img{
    max-height: 42px;
    max-width: 126px;
    height: auto;
    width: auto;
    object-fit: contain;
    opacity: .90;
    transition: opacity .3s ease;
}
.logo-scroll-row .lf-card:hover img{ opacity: 1; }
.logo-scroll-row .lf-card--clone{ display: none; }
.logo-scroll-row .lf-card:nth-child(4n+1){
    background: linear-gradient(135deg, rgba(119,71,182,.20) 0%, rgba(40,99,197,.12) 100%);
    border-color: rgba(119,71,182,.32);
}
.logo-scroll-row .lf-card:nth-child(4n+2){
    background: linear-gradient(135deg, rgba(40,99,197,.20) 0%, rgba(18,182,248,.12) 100%);
    border-color: rgba(40,99,197,.32);
}
.logo-scroll-row .lf-card:nth-child(4n+3){
    background: linear-gradient(135deg, rgba(18,182,248,.16) 0%, rgba(119,71,182,.20) 100%);
    border-color: rgba(18,182,248,.28);
}
.logo-scroll-row .lf-card:nth-child(4n+4){
    background: linear-gradient(135deg, rgba(119,71,182,.12) 0%, rgba(18,182,248,.20) 100%);
    border-color: rgba(40,99,197,.32);
}
.logo-scroll-row .lf-card:nth-child(4n+1):hover{
    background: linear-gradient(135deg, rgba(119,71,182,.36) 0%, rgba(40,99,197,.24) 100%);
    border-color: rgba(119,71,182,.52);
}
.logo-scroll-row .lf-card:nth-child(4n+2):hover{
    background: linear-gradient(135deg, rgba(40,99,197,.36) 0%, rgba(18,182,248,.24) 100%);
    border-color: rgba(40,99,197,.52);
}
.logo-scroll-row .lf-card:nth-child(4n+3):hover{
    background: linear-gradient(135deg, rgba(18,182,248,.30) 0%, rgba(119,71,182,.36) 100%);
    border-color: rgba(18,182,248,.48);
}
.logo-scroll-row .lf-card:nth-child(4n+4):hover{
    background: linear-gradient(135deg, rgba(119,71,182,.24) 0%, rgba(18,182,248,.36) 100%);
    border-color: rgba(40,99,197,.52);
}

/* ── Product section — numbered progress tab design ── */
.section-products .product-stage{
    grid-template-columns: 1fr 1.15fr !important;
    gap: clamp(48px, 5.5vw, 96px) !important;
    align-items: stretch !important;
    height: clamp(420px, 50vh, 560px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.section-products .products-head{
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom-color: rgba(159,186,228,.20) !important;
    padding-bottom: 20px !important;
    margin-bottom: 28px !important;
    min-height: 52px;
}
.section-products .products-intro{
    margin-bottom: clamp(52px, 7vh, 80px) !important;
    text-align: center;
}
.products-sticky{
    justify-content: flex-start !important;
    padding: clamp(24px, 3vh, 40px) 0 !important;
}
.products-sticky > .container{
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 0 !important;
}
.products-head .pd-name{
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: var(--Base-White, #fcfcfc);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
    transition: opacity .28s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.pd-icon{
    height: .75em;
    width: auto;
    vertical-align: baseline;
    margin-right: 4px;
    display: inline-block;
}
.pd-sep{
    color: rgba(252,252,252,.22);
    margin: 0 8px 0 2px;
    font-weight: 300;
}
.products-head.is-leaving .pd-name{
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .08s ease-in, transform .08s ease-in;
}
.products-head.is-entering .pd-name{
    opacity: 0;
    transform: translateY(10px);
    transition: none !important;
}
.product-detail h3.pd-tagline{
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(18px, 2vw, 24px) !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    letter-spacing: -.2px !important;
    color: rgba(252,252,252,.80) !important;
    margin: 0 0 36px !important;
    font-variation-settings: 'SOFT' 0, 'WONK' 1 !important;
}
.pd-prog{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: clamp(200px, 22vw, 300px);
    flex-shrink: 0;
}
.pd-prog-track{
    width: 100%;
    height: 3px;
    background: rgba(159,186,228,.14);
    border-radius: 3px;
    overflow: hidden;
}
.pd-prog-fill{
    height: 100%;
    width: 33.33%;
    background: linear-gradient(90deg, #1ca9c9 0%, #12b6f8 100%);
    border-radius: 3px;
    transition: width .55s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 0 8px rgba(18,182,248,.45);
}
.pd-prog-steps{
    display: flex;
    justify-content: space-between;
    gap: 4px;
}
.pd-prog-steps .product-tab{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    cursor: pointer !important;
    opacity: .35;
    transition: opacity .25s ease !important;
}
.pd-prog-steps .product-tab .pt-icon{
    height: 14px;
    width: auto;
    display: block;
    opacity: .6;
    transition: opacity .25s ease;
}
.pd-prog-steps .product-tab .pt-name{
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(252,252,252,.6);
    line-height: 1.2;
    white-space: nowrap;
    transition: color .25s ease;
}
.pd-prog-steps .product-tab.is-active{
    opacity: 1 !important;
    box-shadow: none !important;
    background: none !important;
}
.pd-prog-steps .product-tab.is-active .pt-icon{
    opacity: 1;
}
.pd-prog-steps .product-tab.is-active .pt-name{
    color: #fff;
    font-weight: 500;
}
.pd-prog-steps .product-tab:hover:not(.is-active){
    opacity: .65 !important;
    background: none !important;
    border: none !important;
}
.product-detail{
    overflow: hidden !important;
}
.product-detail p{ margin-bottom: 40px !important; }
.product-detail .pd-chips{ margin-bottom: 32px !important; }
.product-detail .pd-quote{ margin: 0 0 36px !important; }
.product-visual{
    position: relative;
    height: 100%;
}

/* ── Lottie card ── */
#pdLottie{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 280px;
    border-radius: 16px;
    background: rgba(5,26,60,.55);
    border-top:    1px solid rgba(255,255,255,.18);
    border-left:   1px solid rgba(255,255,255,.12);
    border-right:  1px solid rgba(0,0,0,.30);
    border-bottom: 1px solid rgba(0,0,0,.22);
    box-shadow:
        5px  4px 0 rgba(0,0,0,.50),
        9px  7px 0 rgba(0,0,0,.32),
        13px 10px 0 rgba(0,0,0,.16),
        0 24px 64px rgba(0,0,0,.55),
        0 48px 100px rgba(0,0,0,.28),
        0 0 80px rgba(18,182,248,.10);
    transform: perspective(1000px) rotateY(-12deg) rotateX(4deg);
    transform-origin: center center;
    transition: opacity .28s ease, transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .55s ease;
    will-change: opacity, transform;
    overflow: hidden;
}
#pdLottie::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 30%, transparent 58%);
    pointer-events: none;
    z-index: 2;
}
#pdLottie svg{
    width: 100% !important;
    height: 100% !important;
}
.product-visual.is-leaving #pdLottie{
    opacity: 0;
    transform: perspective(1000px) rotateY(-12deg) rotateX(4deg) translateY(-10px);
    transition: opacity .08s ease-in, transform .08s ease-in;
}
.product-visual.is-entering #pdLottie{
    opacity: 0;
    transform: perspective(1000px) rotateY(-12deg) rotateX(4deg) translateY(14px);
    transition: none !important;
}
.product-visual.is-insights #pdLottie{
    box-shadow:
        5px  4px 0 rgba(0,0,0,.50),
        9px  7px 0 rgba(0,0,0,.32),
        13px 10px 0 rgba(0,0,0,.16),
        0 24px 64px rgba(0,0,0,.55),
        0 48px 100px rgba(0,0,0,.28),
        0 0 80px rgba(139,92,246,.13);
}
.product-visual.is-datamagnet #pdLottie{
    box-shadow:
        5px  4px 0 rgba(0,0,0,.50),
        9px  7px 0 rgba(0,0,0,.32),
        13px 10px 0 rgba(0,0,0,.16),
        0 24px 64px rgba(0,0,0,.55),
        0 48px 100px rgba(0,0,0,.28),
        0 0 80px rgba(16,185,129,.12);
}
.product-visual::before{
    content: '';
    position: absolute;
    inset: -32px;
    background: radial-gradient(ellipse at 50% 45%, rgba(18,182,248,.13) 0%, transparent 62%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.product-visual.is-insights::before{
    background: radial-gradient(ellipse at 50% 45%, rgba(139,92,246,.14) 0%, transparent 62%);
}
.product-visual.is-datamagnet::before{
    background: radial-gradient(ellipse at 50% 45%, rgba(16,185,129,.13) 0%, transparent 62%);
}

/* ── Scroll-reveal animations ── */
.reveal-block{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.reveal-block.is-visible{ opacity: 1; transform: none; }
.reveal-left{
    opacity: 0;
    transform: translateX(-44px);
    transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.reveal-left.is-visible{ opacity: 1; transform: none; }
.reveal-right{
    opacity: 0;
    transform: translateX(44px);
    transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}
.reveal-right.is-visible{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
    .reveal-block, .reveal-left, .reveal-right{
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   PRICING SECTION
   ════════════════════════════════════════════════════════════════════ */

.section-pricing .pricing-main{
    background: #ffffff !important;
    border: 1px solid rgba(40,99,195,.16) !important;
    box-shadow:
        0 1px 3px rgba(16,24,40,.04),
        0 32px 72px -28px rgba(40,99,195,.18) !important;
    min-height: 700px;
}

.section-pricing .pm-card .pm-card-title{
    color: rgba(15,23,42,.50) !important;
}

.section-pricing .pa-card--value .pa-media{
    border: 1px solid rgba(40,99,195,.14) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.70),
        0 6px 20px rgba(40,99,195,.10) !important;
}

.section-pricing .pa-kpi-eyebrow{
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(40,99,195,.65);
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}

.section-pricing .pa-card--kpi{
    background:
        radial-gradient(ellipse 110% 140% at 95% -15%, rgba(28,169,201,.22) 0%, transparent 55%),
        radial-gradient(ellipse 90% 90% at 5% 115%, rgba(119,71,182,.16) 0%, transparent 55%),
        linear-gradient(155deg, #f0f8ff 0%, #f5f0ff 100%);
    border: 1px solid rgba(40,99,195,.20);
    box-shadow:
        0 4px 28px rgba(40,99,195,.14),
        0 1px 3px rgba(0,0,0,.04);
    padding: 28px 32px;
}

.section-pricing .pa-kpi-stat{
    position: relative;
    z-index: 1;
    font-size: clamp(72px, 7vw, 96px) !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    letter-spacing: -3px !important;
    background: var(--pp-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    margin-bottom: 10px !important;
}

.section-pricing .pa-kpi-stat > span:last-child{
    font-size: clamp(44px, 4vw, 56px) !important;
}

.section-pricing .pa-kpi-cap{
    position: relative;
    z-index: 1;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #374151 !important;
    font-weight: 500 !important;
}

.pricing-grid{
    grid-template-columns: 55fr 45fr !important;
    align-items: stretch !important;
}

@media (max-width: 1199px){
    .pricing-grid{ grid-template-columns: 55fr 45fr !important; }
}

.section-pricing .pricing-aside{
    grid-template-rows: 1fr auto !important;
    height: 100%;
}

.section-pricing .pa-card--value{
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}

.section-pricing .pricing-aside .pa-card--value{
    display: flex;
    flex-direction: column;
}

.section-pricing .pm-cards{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 28px;
    position: relative;
    padding-left: 0 !important;
}

.section-pricing .pm-cards::before{
    content: '';
    position: absolute;
    left: 25px;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--pp-soft);
    border-radius: 2px;
    z-index: 0;
    transition: background .35s ease;
}

.section-pricing .pm-card{
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 14px 16px 14px 62px !important;
    gap: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative;
    z-index: 1;
    transition: background .25s ease, box-shadow .25s ease !important;
    cursor: pointer;
}

.section-pricing .pm-card.is-active{
    background: #ffffff !important;
    border: none !important;
    box-shadow:
        0 1px 4px rgba(15,23,42,.06),
        0 6px 20px rgba(15,23,42,.08) !important;
}

.section-pricing .pm-card:hover:not(.is-active){
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
    opacity: 1;
}

.section-pricing .pm-card::after{ display: none !important; }
.section-pricing .pm-card .pm-card-arrow{ display: none !important; }

.section-pricing .pm-card::before{
    content: '';
    position: absolute;
    left: 16px;
    top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at center, var(--pp-soft-2) 22%, transparent 23%), #ffffff;
    border: 2px solid var(--pp-border);
    z-index: 2;
    transition: all .3s ease;
}

.section-pricing .pm-card.is-active::before{
    background: var(--pp-grad);
    border-color: transparent;
    opacity: .55;
    box-shadow: 0 0 0 3px var(--pp-glow);
}

.section-pricing .pm-card:hover:not(.is-active)::before{
    border-color: var(--pp-border);
    box-shadow: none;
}

.section-pricing .pm-card .pm-card-title{
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #344054 !important;
    transition: color .25s ease;
    margin-bottom: 0;
    line-height: 1.45;
}

.section-pricing .pm-card.is-active .pm-card-title,
.section-pricing .pm-card:hover .pm-card-title{
    color: #344054 !important;
    font-weight: 400 !important;
}

/* ── Pricing section mobile fixes ──
   Positioned after the rules above (and using matching !important where
   they used it) so these actually win — this file has several earlier,
   non-!important mobile breakpoints for .pricing-grid/.pricing-main
   that would otherwise lose to the unconditional rules above. */
/* Hidden by default (desktop) — index.js renders this into every
   .pm-card unconditionally, but it's only meant to appear on mobile,
   and only for whichever card is currently active. */
.pm-card-desc{ display: none; }
@media (max-width: 900px){
    /* 48px never shrank alongside the intro heading (44px→26px), so it
       read as a proportionally oversized gap on phones. */
    .pricing-grid{ margin-top: 24px; }
    /* .pricing-main's min-height:700px (set above) was sized for the
       desktop two-column layout sitting flush with .pricing-aside —
       once stacked to one column on mobile, the switcher + a handful of
       short capability cards + CTA don't come close to filling 700px,
       leaving a large empty gap at the bottom of the card. */
    .section-pricing .pricing-main{ min-height: auto !important; }
    /* Mobile redesign: each capability's description now lives inside
       its own .pm-card (the sibling .pm-card-desc rendered right after
       it) instead of in the separate .pa-card--value box, which is
       hidden here — its GIF, title, and checklist were duplicating the
       exact same content in a second box. .pa-card--kpi (the stat
       number) now also has a compact version rendered inline via
       .pm-card-desc-kpi (see below), so it's redundant here too. */
    .section-pricing .pa-card--value{ display: none !important; }
    .section-pricing .pa-card--kpi{ display: none !important; }
    .section-pricing .pm-card.is-active + .pm-card-desc{
        display: block;
        padding: 4px 12px 16px 48px;
    }
    .pm-card-desc-title{
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 1.4;
        color: #101828;
        margin: 0 0 10px;
    }
    .pm-card-desc-list{
        display: flex;
        flex-direction: column;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .pm-card-desc-list li{
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 13.5px;
        line-height: 1.5;
        color: #475467;
    }
    .pm-card-desc-list .pa-check{
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin-top: 2px;
        /* --pp-grad is a linear-gradient(), not a color — invalid (and
           silently dropped) on the `color` property. */
        color: #2863c3;
    }
    /* Compact stand-in for the desktop KPI card's 72-96px animated
       number — a small pill + one-line caption, so the stat is present
       without competing with the checklist above it for attention. */
    .pm-card-desc-kpi{
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(15,23,42,.08);
    }
    .pm-card-desc-kpi-num{
        flex: 0 0 auto;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 600;
        font-size: 18px;
        line-height: 1;
        color: #fff;
        background: var(--pp-grad, linear-gradient(135deg, #7747b6, #2863c3));
        padding: 5px 10px;
        border-radius: 8px;
        white-space: nowrap;
    }
    .pm-card-desc-kpi-cap{
        font-family: 'Inter', sans-serif;
        font-size: 12.5px;
        line-height: 1.4;
        color: #667085;
    }
}
@media (max-width: 575px){
    /* 62px of that was a fixed left indent reserved for the timeline
       dot icon (positioned at left:16px, 20px wide) regardless of
       screen width — on a 375px phone that alone eats ~16% of the
       card's width before any text starts. */
    .section-pricing .pm-card{ padding: 12px 12px 12px 48px !important; }
    .section-pricing .pm-card.is-active + .pm-card-desc{ padding-left: 48px; }
}

.pm-card-progress{
    position: absolute;
    left: 24px;
    top: calc(50% + 11px);
    width: 2px;
    height: calc(50% + 3px + 6px);
    background: var(--pp-grad);
    opacity: .45;
    transform: scaleY(0);
    transform-origin: center top;
    pointer-events: none;
    z-index: 2;
    border-radius: 0 0 2px 2px;
    transition: background .35s ease;
}

.pm-card.is-active .pm-card-progress{
    animation: pmProgress 6.5s linear forwards;
}

@keyframes pmProgress{
    from{ transform: scaleY(0); }
    to  { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce){
    .pm-card.is-active .pm-card-progress{
        animation: none;
        transform: scaleY(1);
    }
}


/* ── Hero browser frame ── */
.hero-browser-wrap{
    position: relative;
    margin-top: 8px;
}

.hero-browser-glow{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 280px;
    background:
        radial-gradient(ellipse 55% 80% at 28% 55%, rgba(119,71,182,.40) 0%, transparent 68%),
        radial-gradient(ellipse 55% 80% at 72% 55%, rgba(28,169,201,.32) 0%, transparent 68%);
    filter: blur(64px);
    pointer-events: none;
    z-index: 0;
}

.hero-browser{
    position: relative;
    z-index: 1;
    background: rgba(6,16,42,.95);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 32px 80px rgba(0,0,0,.55),
        0 8px 24px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.09);
}

.hero-browser-bar{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(4,12,34,.97);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.hb-dots{
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.hb-dot{
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.hb-dot--red   { background: #ff5f57; }
.hb-dot--yellow{ background: #febc2e; }
.hb-dot--green { background: #28c840; }

.hb-url{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 5px;
    padding: 3px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: rgba(255,255,255,.38);
    max-width: 260px;
    margin: 0 auto;
    letter-spacing: .01em;
}

.hb-url svg{ opacity: .45; flex-shrink: 0; }

.hb-spacer{ flex-shrink: 0; width: 50px; }

.hero-browser-screen{
    display: block;
    line-height: 0;
}

.hero-banner-video{
    display: block;
    width: 100%;
    height: auto;
}

/* ── Testimonial tabs — enhanced highlight ── */

/* Inactive — slightly muted so active pops */
.testimonial-tab{
    opacity: .72;
    transition:
        opacity .35s ease,
        transform .5s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s cubic-bezier(.22,.61,.36,1),
        background .4s ease,
        border-color .4s ease !important;
}
.testimonial-tab:hover:not(.is-active){
    opacity: .90 !important;
}

/* Active — full opacity + strong brand highlight */
.testimonial-tab.is-active{
    opacity: 1 !important;
    background: linear-gradient(135deg,
        rgba(14,72,165,.16) 0%,
        rgba(119,71,182,.10) 100%) !important;
    border-color: rgba(14,72,165,.50) !important;
    transform: translateY(-3px);
    box-shadow:
        0 1px 2px rgba(16,24,40,.06),
        0 8px 24px -6px rgba(14,72,165,.30),
        0 16px 32px -12px rgba(119,71,182,.18),
        inset 0 1px 0 rgba(255,255,255,.85) !important;
}
.testimonial-tab.is-active .tt-name{
    color: var(--ts-accent) !important;
    font-weight: 700 !important;
}
.testimonial-tab.is-active .tt-role{
    color: #374151 !important;
}
.testimonial-tab.is-active .tt-company{
    color: #2863c5 !important;
}

/* ── Testimonial — company name accent line ── */
.testimonial-body .quote-company{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 22px;
    color: #2863c5;
    margin: 0;
}

.testimonial-tab .tt-company{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: #2863c5;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   Testimonial — new two-column layout (Figma 1515:30533)
   ══════════════════════════════════════════════════════════════ */
.section-testimonial{
    /* White at top, fades transparent at bottom so page-finale bleed shows through */
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 78%, transparent 100%);
    position: relative;
    z-index: 3;
}
.section-testimonial .ts-layout{
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    min-height: 580px;
    position: relative;
    z-index: 2;
    background: transparent;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: none;
}
/* ── Testimonial animations ── */

/* 1. Orbit ring rotation */
@keyframes ts-spin-cw  { to { transform: rotate( 360deg); } }
@keyframes ts-spin-ccw { to { transform: rotate(-360deg); } }

.ts-ring-outer{
    transform-box: fill-box;
    transform-origin: center;
    animation: ts-spin-cw  80s linear infinite;
}
.ts-ring-mid{
    transform-box: fill-box;
    transform-origin: center;
    animation: ts-spin-ccw 55s linear infinite;
}
.ts-ring-inner{
    transform-box: fill-box;
    transform-origin: center;
    animation: ts-spin-cw  35s linear infinite;
}

/* 2. Central glow breathe */
@keyframes ts-breathe {
    0%,100% { opacity: .75; }
    50%     { opacity: 1;   }
}
.ts-glow-ellipse{
    animation: ts-breathe 5s ease-in-out infinite;
}

/* 3. Inactive card float (uses standalone translate to compose with transform) */
@keyframes ts-float {
    0%,100% { translate: 0 0px; }
    50%     { translate: 0 -8px; }
}
.ts-p0:not(.is-active){ animation: ts-float 4.4s ease-in-out infinite; }
.ts-p1:not(.is-active){ animation: ts-float 4.4s ease-in-out infinite; animation-delay: -1.6s; }
.ts-p2:not(.is-active){ animation: ts-float 4.4s ease-in-out infinite; animation-delay: -3.1s; }

/* 4. Active card glow pulse */
@keyframes ts-glow-pulse {
    0%,100% { box-shadow: 0 4px 6px rgba(0,0,0,.10), 0 10px 15px rgba(0,0,0,.10), 0 0 0   0px rgba(14,72,165,.22); }
    50%     { box-shadow: 0 4px 6px rgba(0,0,0,.10), 0 10px 15px rgba(0,0,0,.10), 0 0 22px 5px rgba(14,72,165,.16); }
}
.ts-person.is-active{
    animation: ts-glow-pulse 3s ease-in-out infinite;
}

/* 5. Quote text slide-up on exit (entrance handled by JS double-rAF) */
.ts-layout.is-swapping .ts-text,
.ts-layout.is-swapping .ts-byline{
    opacity: 0;
    transform: translateY(-10px);
}

/* Accessibility: disable all motion when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ts-ring-outer, .ts-ring-mid, .ts-ring-inner,
    .ts-glow-ellipse,
    .ts-p0:not(.is-active), .ts-p1:not(.is-active), .ts-p2:not(.is-active),
    .ts-person.is-active { animation: none; }
    .ts-orb-outer, .ts-orb-mid, .ts-orb-inner { display: none; }
}

/* ── Left: orbital visual column ── */
.ts-visual{
    position: relative;
    overflow: hidden;
    background: transparent;
    min-height: 580px;
}
.ts-orb-wrap{
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%);
    mask-image: linear-gradient(to right, transparent 0%, black 22%);
}
.ts-orb-svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── Person cards (floating, absolute) ── */
.ts-person{
    position: absolute;
    background: #fff;
    border: 1.5px solid rgba(119,71,182,.14);
    border-radius: 16px;
    padding: 14px 20px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 4px 20px rgba(14,72,165,.08), 0 1px 4px rgba(0,0,0,.05);
    /* Center the card on its orbit point */
    transform: translate(-50%, -50%);
    transition:
        top .45s cubic-bezier(.22,.61,.36,1),
        left .45s cubic-bezier(.22,.61,.36,1),
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
    min-width: 200px;
    max-width: 260px;
    overflow: hidden;
}

/*
 * Static positions are FALLBACK only — JS (placeInactiveCards) overrides
 * them immediately on load and on every switch.
 * JS always places inactive[0] → top (8%, 50%), inactive[1] → bottom (84%, 50%).
 * Active card → CSS .is-active: top 50%, left 50% (center).
 */
.ts-p0{ top: 50%; left: 50%; }
.ts-p1{ top:  8%; left: 50%; }
.ts-p2{ top: 84%; left: 50%; }

/* Active card — snaps to visual-column center, larger size */
.ts-person.is-active{
    top: 50% !important;
    left: 68% !important;
    transform: translate(-50%, -50%) !important;
    background: var(--Royal-Blue-Blue-50, #e7eef8);
    border: 2px solid var(--Royal-Blue-Blue-500, #0e48a5);
    box-shadow:
        0 4px 6px rgba(0,0,0,.10),
        0 10px 15px rgba(0,0,0,.10);
    z-index: 2;
    min-width: 280px;
    max-width: 340px;
    padding: 20px 28px;
}
.ts-person.is-active .ts-pname{
    font-size: 16px;
    line-height: 22px;
}
.ts-person.is-active .ts-prole{
    font-size: 13px;
    line-height: 18px;
}
.ts-person.is-active .ts-pco{
    font-size: 12px;
    line-height: 16px;
}

.ts-person:hover:not(.is-active){
    transform: translate(-50%, -54%);
    box-shadow: 0 8px 24px rgba(14,72,165,.14), 0 2px 6px rgba(0,0,0,.06);
}
.ts-pname{
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    color: #0f1c3f;
    display: block;
    white-space: normal;
    word-break: break-word;
}
.ts-person.is-active .ts-pname{ color: #0e48a5; }
.ts-prole{
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 15px;
    color: #7747b6;
    display: block;
}
.ts-pco{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 10.5px;
    line-height: 14px;
    color: #6b7280;
    display: block;
}

/* ── Right: quote content column ── */
.ts-content{
    position: relative;
    padding: 64px 60px 52px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
}
.ts-qm{
    position: absolute;
    top: 32px;
    right: 48px;
    width: 76px;
    height: 76px;
    opacity: .28;
    pointer-events: none;
}
.ts-qm svg{ width: 100%; height: 100%; }

.ts-text{
    margin: 0;
    transition: opacity .28s ease, transform .28s ease;
}
.ts-text p{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 26px;
    color: #242424;
    margin: 0 0 14px;
}
.ts-text p:last-child{ margin-bottom: 0; }

.ts-stars{
    display: flex;
    gap: 3px;
    align-items: center;
}
.ts-stars svg{
    width: 16px;
    height: 16px;
    color: #f59e0b;
    flex-shrink: 0;
}

.ts-byline{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    transition: opacity .28s ease;
}
.ts-byline-name{
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #0e48a5;
}
.ts-byline-sep{
    color: rgba(0,0,0,.25);
    font-size: 13px;
    line-height: 1;
}
.ts-byline-role{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #6b7280;
}

.ts-nav{
    display: flex;
    gap: 14px;
    align-items: center;
}
.ts-nav-btn{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0e48a5;
    background: transparent;
    color: #0e48a5;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, transform .2s ease;
    flex-shrink: 0;
}
.ts-nav-btn:hover{
    background: #0e48a5;
    color: #fff;
    transform: scale(1.06);
}
.ts-next-btn{
    background: #0e48a5;
    color: #fff;
}
.ts-next-btn:hover{ background: #0d3f93; }
.ts-nav-btn svg{
    width: 20px;
    height: 20px;
}

/* ── Features nav buttons ── */
.features-nav{
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}
.fn-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(5,26,60,.08);
    border: 1.5px solid rgba(5,26,60,.22);
    color: rgba(5,26,60,.70);
    cursor: pointer;
    transition: background .22s ease, border-color .22s ease, color .22s ease, transform .18s ease;
    flex-shrink: 0;
}
.fn-btn:hover{
    background: rgba(5,26,60,.14);
    border-color: rgba(5,26,60,.40);
    color: rgba(5,26,60,.95);
    transform: scale(1.08);
}
.fn-btn:active{
    transform: scale(0.96);
}
.fn-btn svg{
    display: block;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   PAGE FINALE — plain gradient, colour-matched to where the testimonial
   section's own background ends (#55298e — see .section-testimonial's
   opaque colour ramp above).

   Previously this was a blurred rectangle offset upward, bleeding through
   testimonial's transparent bottom so the two sections would appear to
   blend. That relied on the blurred box's edge-fade finishing (going from
   invisible to fully opaque) before it became visible through testimonial
   — several tuning passes (-280px/blur 80px, then -500px/blur 120px)
   still left a faint but real colour/opacity mismatch right at the DOM
   boundary between the sections, which is what kept reading as a harsh
   line no matter how the individual curves were eased.

   Now testimonial paints its own full white→violet transition (opaque,
   ending at #55298e) and this element starts at that exact same colour
   at its own top (y:0, no offset, no blur needed) — the seam is a flat
   colour match by construction instead of a tuned visual approximation. */
.page-finale{
    background: transparent;
    overflow: visible;
}
.page-finale::before{
    top: 0;
    bottom: 0;
    height: auto;
    background: linear-gradient(180deg,
        #55298e 0%,
        #55298e 15%,
        #031430 55%,
        #051a3c 100%);
    /* The base rule (line ~3744) sets filter: blur(100px) for the old
       bleed-through technique. CSS cascade only overrides properties a
       later rule explicitly re-declares — omitting `filter` here left
       that 100px blur silently still active, softening this element's
       own top edge against the dark body background behind it and
       producing a translucent, muddier band exactly where it meets the
       testimonial section. Explicitly cancel it now that this element
       is a plain, un-blurred gradient starting flush at top:0. */
    filter: none;
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER LAYOUT
   ════════════════════════════════════════════════════════════════════ */

.footer-top{
    display: flex;
    align-items: flex-start;
    gap: 48px;
    margin-bottom: 0;
    padding-bottom: 64px;
}

.footer-top .brand-col{
    flex: 0 0 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
    padding: 36px 0;
    background: none;
    border: none;
    border-radius: 0;
}

.footer-top .brand-logo-img{ height: 64px; }
.footer-top .gptw-badge    { height: 72px; }
.footer-top .brand-logo    { margin-bottom: 0; align-items: center; }

.footer-top .ask-ai-box{
    max-width: none;
    margin-bottom: 0;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.footer-top .ask-ai-box .ask-ai-label{ margin-bottom: 12px; }

.footer-top .ask-ai-icons{ gap: 10px; }
.footer-top .ask-ai-icons a{
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: linear-gradient(135deg,
        rgba(85,41,142,.42) 0%,
        rgba(14,72,165,.36) 50%,
        rgba(28,169,201,.26) 100%);
    border: 1px solid rgba(159,186,228,.35);
    box-shadow:
        0 1px 2px rgba(0,0,0,.25),
        0 6px 16px -4px rgba(85,41,142,.45),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 0 0 1px rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease;
}
.footer-top .ask-ai-icons a:hover{
    border-color: rgba(159,186,228,.6);
    box-shadow:
        0 1px 2px rgba(0,0,0,.28),
        0 10px 22px -4px rgba(85,41,142,.6),
        inset 0 1px 0 rgba(255,255,255,.2),
        inset 0 0 0 1px rgba(255,255,255,.06);
    transform: translateY(-2px);
}
.footer-top .ask-ai-icons a img,
.footer-top .ask-ai-icons a svg{
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(62%) sepia(72%) saturate(500%) hue-rotate(172deg) brightness(108%);
    transition: filter .25s ease;
}
.footer-top .ask-ai-icons a:hover img,
.footer-top .ask-ai-icons a:hover svg{
    filter: brightness(0) saturate(100%) invert(100%);
}

.copyright{
    justify-content: space-between;
    align-items: center;
}

.copyright-social{
    display: flex;
    align-items: center;
    gap: 8px;
}
.copyright-social a{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(159,186,228,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.55);
    transition: background .25s ease, color .25s ease;
}
.copyright-social a:hover{
    background: rgba(119,71,182,.25);
    color: #fff;
    border-color: rgba(119,71,182,.45);
}

.footer-top .footer-cta{
    flex: 1 1 auto;
    margin-top: 36px;
    margin-bottom: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 28px;
    padding: 32px 36px;
    overflow: hidden;
    position: relative;
}

.footer-top .footer-cta .footer-cta-halo,
.footer-top .footer-cta .footer-cta-text,
.footer-top .footer-cta .footer-cta-button{ position: relative; z-index: 1; }

.footer-top .footer-cta-text{ min-width: unset; flex: 1; }
.footer-top .footer-cta-text h3{ font-size: 22px; line-height: 30px; margin-bottom: 6px; }
.footer-top .footer-cta-text p { font-size: 13.5px; line-height: 20px; max-width: 340px; margin: 0; }
.footer-top .footer-cta-eyebrow{ margin-bottom: 8px; }
.footer-top .footer-cta-button { padding: 12px 24px; font-size: 13.5px; flex-shrink: 0; white-space: nowrap; }

.site-footer .footer-nav{
    grid-template-columns: repeat(5, 1fr);
    padding-top: 36px;
    border-top: none;
    position: relative;
}
.site-footer .footer-nav::before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(119,71,182,.45) 20%,
        rgba(61,72,171,.55) 50%,
        rgba(40,99,197,.45) 80%,
        transparent 100%);
}

.site-footer .footer-nav .footer-col h4{
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 16px;
}
.site-footer .footer-nav .footer-col h4::after{
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #7747b6, #2863c5);
}

.site-footer{ padding-top: 64px; }

@media (max-width: 1160px){
    .footer-top{ gap: 32px; }
    .footer-top .brand-col{ flex: 0 0 380px; }
    .site-footer .footer-nav{ grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
}
@media (max-width: 768px){
    .footer-top{ flex-direction: column; align-items: stretch; }
    .footer-top .brand-col{ flex: none; }
    .footer-top .footer-cta{ padding: 28px; flex-direction: column; text-align: center; gap: 20px; }
    .footer-top .footer-cta-text p{ margin: 0 auto; }
    .site-footer .footer-nav{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
    /* Was 1fr (every column stacked full-width, one under the next —
       5 columns' worth of links made for a lot of scrolling). Keeping
       the same 2-column grid used at ≤768px instead pairs columns up
       (3 rows of 2, then the last column alone) and cuts that height
       roughly in half. */
    .site-footer .footer-nav{ grid-template-columns: 1fr 1fr; row-gap: 32px; column-gap: 16px; }
}
@media (max-width: 575px){
    /* .hero-bg-page .container gives only 16px of horizontal padding at
       every width (same bug found in the testimonial section) — add a
       little extra inset here so footer content doesn't sit flush
       against the screen edge on phones. */
    /* !important: .hero-bg-page .container (same 0,2,0 specificity)
       sits later in this file at line ~12570, so without it that rule
       would win by source order and silently cancel this override —
       same trap as the earlier hello-bar/testimonial padding fixes. */
    .site-footer .container{ padding-left: 8px !important; padding-right: 8px !important; }
    /* 64px was the same top padding as desktop; nothing here scaled it
       down for phones. */
    .site-footer{ padding-top: 40px; }
    .footer-top{ padding-bottom: 40px; }
    /* .footer-top .footer-cta-text h3{font-size:22px} above is
       unconditional and higher-specificity than the dead 20px mobile
       override elsewhere in this file (a plain `.footer-cta-text h3`
       rule that never had a chance of winning) — matching selector +
       later position is what actually overrides it. */
    .footer-top .footer-cta-text h3{ font-size: 19px; line-height: 26px; }
    /* Fixed-height brand lockup (64px logo + 72px GPTW badge) never
       scaled down; on the narrowest phones it left very little slack
       against the tight container padding above. */
    .footer-top .brand-logo-img{ height: 44px; }
    .footer-top .gptw-badge{ height: 52px; }
}
/* ════════════════════════════════════════════════════════
   FEATURES & CAPABILITIES — standalone section
   File: assets/css/v2o/features-capabilities.css
   ════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.fc-preview {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #051A3C;
}

/* ── Section (gradient background — exact from Figma node 1266:24573) ── */
.fc-section {
    background: linear-gradient(180deg,
        #051a3c  0%,
        #1a1e52  14.24%,
        #32216e  29.65%,
        #55298e  45.91%,
        #3d48ab  60.37%,
        #2863c5  74.52%,
        #5886d0  88.01%,
        #9fbae4  100%
    );
    padding: 112px 0 80px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.fc-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ══════════════════════════
   HEADER
══════════════════════════ */
.fc-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
}

.fc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #67d3ff;
    border: 1px solid rgba(255,255,255,0.14);
    padding: 7px 16px;
    border-radius: 50px;
    margin: 0 0 24px;
    background: rgba(255,255,255,0.06);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}

.fc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #12b6f8 0%, #7747b6 100%);
    flex: 0 0 6px;
}

.fc-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 44px;
    line-height: 54px;
    color: #fcfcfc;
    letter-spacing: -0.6px;
    margin: 0 0 16px;
}

.fc-accent { font-style: italic; color: #fcfcfc; }

.fc-sub {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 28px;
    color: rgba(255,255,255,0.82);
}

/* ══════════════════════════
   SLIDES
══════════════════════════ */
.fc-slider-wrap { position: relative; }
.fc-slide { display: none; }
.fc-slide.is-active { display: block; }

/* ══════════════════════════
   GRID
══════════════════════════ */
.fc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
}

/* ══════════════════════════
   COLUMN — dark translucent backing so white text reads on the pale-blue gradient bottom
══════════════════════════ */
.fc-col {
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    border-radius: 10px 10px 8px 8px;
}

.fc-col-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Per-column top indicator line */
.fc-col::before {
    content: '';
    display: block;
    height: 2px;
    flex: 0 0 2px;
    background-image: repeating-linear-gradient(
        to right,
        rgba(255,255,255,0.28) 0, rgba(255,255,255,0.28) 3px,
        transparent 3px, transparent 9px
    );
    transition: background-image 0.4s, background-color 0.4s;
}

.fc-col.is-active::before {
    background-image: none;
    background-color: #2563eb;
}

@keyframes fcLineSweep {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.fc-col:hover::before {
    background-image: none;
    background-color: #1CA9C9;
    transform-origin: left center;
    animation: fcLineSweep 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Top row: icon · name · arrow ── */
.fc-col-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 28px 0 28px;
}

.fc-col:first-child .fc-col-top { padding-left: 0; }
.fc-col:last-child  .fc-col-top { padding-right: 0; }

/* Icon box */
.fc-col-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 5px;
    background: rgba(255,255,255,0.12);
    transition: border-color 0.4s, background 0.4s;
}

.fc-col-icon svg { width: 20px; height: 20px; }

.fc-col.is-active .fc-col-icon {
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.14);
}

/* Column name */
.fc-col-name {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: #ffffff;
    flex: 1;
    line-height: 1.35;
}

/* Arrow button */
.fc-col-arrow {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.45);
    transition: background 0.35s, border-color 0.35s, color 0.35s;
    padding: 0;
}

.fc-col-arrow svg { width: 14px; height: 14px; }

.fc-col.is-active .fc-col-arrow,
.fc-col-arrow:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* Description */
.fc-col-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 21px;
    color: rgba(255,255,255,0.85);
    padding: 16px 28px 28px 28px;
    flex: 0 0 auto;
}

.fc-col:first-child .fc-col-desc { padding-left: 0; }
.fc-col:last-child  .fc-col-desc { padding-right: 0; }

/* ══════════════════════════
   VISUAL CARD (dark glassmorphism)
══════════════════════════ */
.fc-visual {
    flex: 0 0 260px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(28,169,201,0.35);
    border-radius: 0 0 8px 8px;
}

/* ─── Scan line ─── */
.fc-visual::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(37,99,235,0.55) 25%,
        rgba(37,99,235,0.85) 50%,
        rgba(37,99,235,0.55) 75%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.5s;
}

.fc-col:not(.is-active) .fc-visual::after {
    top: 26%;
    opacity: 0.35;
}

.fc-col.is-active .fc-visual::after {
    top: 26%;
    opacity: 1;
    animation: fcScanPulse 2.4s ease-in-out infinite;
}

@keyframes fcScanPulse {
    0%, 100% { opacity: 0.75; box-shadow: 0 0 5px 1px rgba(37,99,235,0.20); }
    50%       { opacity: 1;    box-shadow: 0 0 14px 4px rgba(37,99,235,0.45); }
}

/* ─── SVG inner: floats gently when active ─── */
.fc-vis-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fc-col.is-active .fc-vis-inner {
    animation: fcVisFloat 3s ease-in-out infinite;
}

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

.fc-vis-svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: filter 0.35s ease;
}

.fc-col:hover .fc-vis-svg {
    filter: brightness(0) invert(1);
}

/* ══════════════════════════
   SLIDE NAVIGATION — bottom center (round buttons, prev dimmed / next violet)
══════════════════════════ */
.fc-slide-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.fc-snav-btn {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.90);
    transition: background 0.2s, opacity 0.2s;
    padding: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.fc-snav-btn svg { width: 20px; height: 20px; }

/* Prev: dimmed */
#fcPrev { opacity: 0.35; }
#fcPrev:not(:disabled):hover { opacity: 0.70; }

/* Next: violet filled */
#fcNext {
    background: #55298e;
    box-shadow: 0 2px 6px rgba(0,0,0,0.30);
}
#fcNext:not(:disabled):hover { background: #6b35b0; }

.fc-snav-btn:disabled {
    opacity: 0.20;
    cursor: default;
}

.fc-snav-count {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.5px;
    min-width: 28px;
    text-align: center;
}

/* ══════════════════════════
   RESPONSIVE
══════════════════════════ */
@media (max-width: 1100px) {
    .fc-container { padding: 0 32px; }
    .fc-heading { font-size: 38px; line-height: 48px; }
    .fc-col-top { padding: 20px 18px 0 18px; }
    .fc-col-desc { padding: 14px 18px 22px 18px; }
    .fc-col:first-child .fc-col-top,
    .fc-col:first-child .fc-col-desc { padding-left: 0; }
    .fc-col:last-child .fc-col-top,
    .fc-col:last-child .fc-col-desc { padding-right: 0; }
}

@media (max-width: 860px) {
    .fc-grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 20px; }
    .fc-section { padding: 80px 0 60px; }
    .fc-heading { font-size: 32px; line-height: 42px; }
    .fc-header { margin-bottom: 48px; }
}

@media (max-width: 575px) {
    /* One-feature-at-a-time horizontal scroll instead of stacking all 4
       columns of the active slide vertically + jumping a whole slide (4
       features) per Prev/Next click. .fc-slide/.fc-grid go display:contents
       — same DOM, no nodes moved — so their 12 .fc-col children (across
       all 3 slides at once, is-active gating no longer applies) become
       direct flex items of #fcTrack, the actual scroll track. #fcTrack
       gets translateX(-offset) from JS, exactly like the Success Stories
       carousel (#storiesTrack); .fc-slider-wrap is its fixed, clipped
       viewport. See the fc-section IIFE in index.js. */
    .fc-slider-wrap{ overflow: hidden; }
    .fc-track{
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        width: max-content;
    }
    /* .fc-slide.is-active{ display:block } (0,2,0) elsewhere in this file
       otherwise beats the plain .fc-slide rule below (0,1,0) — without
       this, the active slide alone stays a block box instead of also
       flattening to contents, breaking the uniform flex-item row. */
    .fc-slide,
    .fc-slide.is-active{ display: contents; }
    .fc-grid{ display: contents; }
    .fc-col{
        flex: 0 0 82vw;
        max-width: 320px;
    }
    .fc-container { padding: 0 20px; }
    .fc-heading { font-size: 28px; line-height: 38px; }
    .fc-section { padding: 64px 0 48px; }
    /* first/last-child zero out left/right padding for a 4-across row —
       once stacked to 1 column those are just top/bottom cards, so
       restore the normal side padding used by the 2 middle cards. */
    .fc-col:first-child .fc-col-top,
    .fc-col:last-child  .fc-col-top { padding-left: 18px; padding-right: 18px; }
    .fc-col:first-child .fc-col-desc,
    .fc-col:last-child  .fc-col-desc { padding-left: 18px; padding-right: 18px; }
}
/* fc-accent is an <em> — remove default italic */
.fc-accent { font-style: normal !important; }

/* ── Product stage — Figma flat layout ── */
.section-products .product-stage {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 520px !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}
.product-detail {
    width: 47% !important;
    position: relative !important;
    z-index: 2 !important;
}
.product-visual {
    position: absolute !important;
    left: 47% !important;
    top: 32px !important;
    width: 70% !important;
    height: auto !important;
    overflow: visible !important;
    z-index: 1 !important;
}
.pv-orb { display: none !important; }

/* ── pdLottie — flat image container, no chrome ── */
#pdLottie {
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
}
#pdLottie::before { display: none !important; }

/* ── Remove slide animation on product switch ── */
.product-visual.is-leaving #pdLottie,
.product-visual.is-entering #pdLottie {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}
.product-visual.is-leaving,
.product-visual.is-entering {
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════════
   HELLO BAR — vibrant redesign
══════════════════════════════════════════════════ */
.hello-bar {
    background:
        linear-gradient(90deg,
            #040c24  0%,
            #160840  18%,
            #2d1272  36%,
            #1e3bab  54%,
            #0d2260  72%,
            #040c24  100%
        ) !important;
    border-bottom: 1px solid rgba(100, 150, 255, 0.22) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Slow shimmer sweep */
.hello-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent      0%,
        rgba(119,71,182,0.10) 30%,
        rgba(28,169,201,0.18) 50%,
        rgba(119,71,182,0.10) 70%,
        transparent      100%
    );
    animation: hbShimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes hbShimmer {
    0%   { transform: translateX(-60%); opacity: 0.5; }
    50%  { opacity: 1; }
    100% { transform: translateX(60%);  opacity: 0.5; }
}

/* All bar children above shimmer */
.hello-bar > * { position: relative; z-index: 1; }

/* Badge — gradient pill with live pulse dot */
.hello-bar .hello-badge {
    background: var(--grad-brand) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 4px 12px 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.hello-bar .hello-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
    animation: hbPulse 1.8s ease-out infinite;
}
@keyframes hbPulse {
    0%   { box-shadow: 0 0 0 0   rgba(255,255,255,0.7); }
    70%  { box-shadow: 0 0 0 5px rgba(255,255,255,0);   }
    100% { box-shadow: 0 0 0 0   rgba(255,255,255,0);   }
}

/* Message text */
.hello-bar .hello-message {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 500 !important;
}

/* Register Now — plain text link */
.hello-bar .hello-cta {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    transition: color 0.2s !important;
}
.hello-bar .hello-cta:hover {
    color: #12b6f8 !important;
    box-shadow: none !important;
}
.hello-bar .hello-cta svg { width: 13px !important; height: 13px !important; }

/* Free Consultation — plain text link */
.hello-bar .hello-consult {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,0.88) !important;
    font-size: 13px !important;
    transition: color 0.2s !important;
}
.hello-bar .hello-consult:hover {
    color: #12b6f8 !important;
}

/* Log in */
.hello-bar .hello-login {
    color: rgba(255,255,255,0.75) !important;
    border-left-color: rgba(255,255,255,0.15) !important;
    font-size: 13px !important;
}
.hello-bar .hello-login:hover { color: #12b6f8 !important; }

/* ── Hero stage — reduced height + bottom merge ── */
.hero-stage {
    height: auto !important;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%,   rgba(8, 26, 72, 0.80) 0%, transparent 70%),
        radial-gradient(ellipse 50% 45% at 15% 100%, rgba(5, 14, 42, 0.72) 0%, transparent 65%),
        radial-gradient(ellipse 45% 40% at 85% 90%,  rgba(4, 10, 32, 0.76) 0%, transparent 60%),
        linear-gradient(170deg, #04102E 0%, #030C1E 45%, #020A18 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ── Canvas layer ── */
#bgCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: block;
}

/* ── Cards layer ── */
.bg-cards-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ── Individual card ── */
.bg-card {
    position: absolute;
    box-sizing: border-box;
    border-radius: 14px;
    background: radial-gradient(ellipse at center,
        transparent 0%,
        rgba(4, 14, 42, 0.65) 55%,
        rgba(2, 8, 28, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 2px 12px rgba(0,0,0,0.28);
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.13;
    will-change: opacity;
    transition:
        border-color 0.38s ease,
        box-shadow   0.38s ease;
    z-index: 2;
}

/* Dark-edge vignette — transparent in centre, dark at edges */
.bg-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 50%,
        transparent 18%,
        rgba(3, 11, 28, 0.88) 74%);
    opacity: 0;
    transition: opacity 0.38s ease;
    pointer-events: none;
    z-index: 2;
}
.bg-card.bc-violet::before {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(85, 41, 142, 0.06) 0%,
        transparent 26%,
        rgba(3, 11, 28, 0.88) 74%);
}
.bg-card.bc-cyan::before {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(28, 169, 201, 0.06) 0%,
        transparent 26%,
        rgba(3, 11, 28, 0.88) 74%);
}
.bg-card:hover::before { opacity: 1; }

/* ── Hover: stroke glow only, no background fill ── */
.bg-card:hover {
    z-index: 30 !important;
}
.bg-card.bc-cyan:hover {
    border-color: rgba(28, 169, 201, 0.65) !important;
    box-shadow:
        0 0 14px rgba(28, 169, 201, 0.28),
        0 0  2px rgba(28, 169, 201, 0.50),
        inset 0 0 14px rgba(28, 169, 201, 0.06);
}
.bg-card.bc-violet:hover {
    border-color: rgba(85, 41, 142, 0.65) !important;
    box-shadow:
        0 0 14px rgba(85, 41, 142, 0.32),
        0 0  2px rgba(85, 41, 142, 0.55),
        inset 0 0 14px rgba(85, 41, 142, 0.07);
}

/* ── SVG wrapper — sits below the vignette ── */
.bc-svg-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bc-svg-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── SVG animation keyframes ── */
@keyframes bNP { 0%,100%{opacity:.25} 50%{opacity:.82} }
@keyframes bLD { to{stroke-dashoffset:-24} }
@keyframes bSW { to{transform:rotate(360deg)} }
@keyframes bGP { 0%,100%{opacity:.28} 50%{opacity:.72} }

.bnp { animation: bNP 2.3s ease-in-out infinite; }
.bld { stroke-dasharray: 7 5; animation: bLD 3s linear infinite; }
.bsw { animation: bSW 7s linear infinite; }
.bgp { animation: bGP 2.1s ease-in-out infinite; }

/* ── Foreground layers ── */
.hero-grid,
.hero-orbs,
.hero-particles,
.site-top,
.hero-section {
    position: relative;
    z-index: 10;
}

.hero-orb { opacity: 0.30 !important; }

/* Sections need stacking context but NOT overflow:hidden
   so beam canvases are positioned correctly              */
.section-products,
.section-personas,
.section-pricing,
.section-success,
.section-testimonial,
.section-trust { position: relative; }

/* Block body violet glow from bleeding through transparent product section bottom */
.section-products { background: #051A3C !important; }

/* Match testimonial background to the Trusted section it merges into.
   Same colours/easing as the Figma reference frame (node 2972:28429 /
   "Group 2085665041"), but the whole ramp is shifted later (hold-white
   ends at 65% instead of 49.74%) so the violet bleed sits lower in the
   section per feedback — still ends at #55298e, the exact colour
   .page-finale::before opens with. */
.section-testimonial {
    background: linear-gradient(180deg,
        #fcfcfc 0%,
        #fcfcfc 65%,
        #f2eef8 69.9%,
        #d7c7e7 75.6%,
        #b99cd5 81.1%,
        #9870bd 86.9%,
        #7e4fa7 91.2%,
        #653797 95.1%,
        #55298e 100%) !important;
}

/* ── Per-section beam canvas ── */
.page-beam-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
}
/* Content sits above beam canvas — z-index only, no position override */
.section-features  .container,
.section-personas  .container,
.section-pricing   .container,
.section-success   .container,
.section-testimonial .container,
.section-trust     .container {
    position: relative;
    z-index: 1;
}
.page-finale > .section-trust,
.page-finale > footer { position: relative; z-index: 1; }

/* fc-accent is an <em> — remove default italic */
.fc-accent { font-style: normal !important; }

/* ── Product stage — Figma flat layout ── */
.section-products .product-stage {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 520px !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
}
.product-detail {
    width: 47% !important;
    position: relative !important;
    z-index: 2 !important;
}
.product-visual {
    position: absolute !important;
    left: 47% !important;
    top: 32px !important;
    width: 70% !important;
    height: auto !important;
    overflow: visible !important;
    z-index: 1 !important;
}
.pv-orb { display: none !important; }

/* ── pdLottie — flat image container, no chrome ── */
#pdLottie {
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
}
#pdLottie::before { display: none !important; }

/* ── Remove slide animation on product switch ── */
.product-visual.is-leaving #pdLottie,
.product-visual.is-entering #pdLottie {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}
.product-visual.is-leaving,
.product-visual.is-entering {
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════════
   HELLO BAR — vibrant redesign
══════════════════════════════════════════════════ */
.hello-bar {
    background:
        linear-gradient(90deg,
            #040c24  0%,
            #160840  18%,
            #2d1272  36%,
            #1e3bab  54%,
            #0d2260  72%,
            #040c24  100%
        ) !important;
    border-bottom: 1px solid rgba(100, 150, 255, 0.22) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Slow shimmer sweep */
.hello-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent      0%,
        rgba(119,71,182,0.10) 30%,
        rgba(28,169,201,0.18) 50%,
        rgba(119,71,182,0.10) 70%,
        transparent      100%
    );
    animation: hbShimmer 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes hbShimmer {
    0%   { transform: translateX(-60%); opacity: 0.5; }
    50%  { opacity: 1; }
    100% { transform: translateX(60%);  opacity: 0.5; }
}

/* All bar children above shimmer */
.hello-bar > * { position: relative; z-index: 1; }

/* Badge — gradient pill with live pulse dot */
.hello-bar .hello-badge {
    background: var(--grad-brand) !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 4px 12px 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.hello-bar .hello-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
    animation: hbPulse 1.8s ease-out infinite;
}
@keyframes hbPulse {
    0%   { box-shadow: 0 0 0 0   rgba(255,255,255,0.7); }
    70%  { box-shadow: 0 0 0 5px rgba(255,255,255,0);   }
    100% { box-shadow: 0 0 0 0   rgba(255,255,255,0);   }
}

/* Message text */
.hello-bar .hello-message {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 500 !important;
}

/* Register Now — plain text link */
.hello-bar .hello-cta {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    transition: color 0.2s !important;
}
.hello-bar .hello-cta:hover {
    color: #12b6f8 !important;
    box-shadow: none !important;
}
.hello-bar .hello-cta svg { width: 13px !important; height: 13px !important; }

/* Free Consultation — plain text link */
.hello-bar .hello-consult {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,0.88) !important;
    font-size: 13px !important;
    transition: color 0.2s !important;
}
.hello-bar .hello-consult:hover {
    color: #12b6f8 !important;
}

/* Log in */
.hello-bar .hello-login {
    color: rgba(255,255,255,0.75) !important;
    border-left-color: rgba(255,255,255,0.15) !important;
    font-size: 13px !important;
}
.hello-bar .hello-login:hover { color: #12b6f8 !important; }

/* ── Hero stage — reduced height + bottom merge ── */
.hero-stage {
    height: auto !important;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%,   rgba(8, 26, 72, 0.80) 0%, transparent 70%),
        radial-gradient(ellipse 50% 45% at 15% 100%, rgba(5, 14, 42, 0.72) 0%, transparent 65%),
        radial-gradient(ellipse 45% 40% at 85% 90%,  rgba(4, 10, 32, 0.76) 0%, transparent 60%),
        linear-gradient(170deg, #04102E 0%, #030C1E 45%, #020A18 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ── Canvas layer ── */
#bgCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: block;
}

/* ── Cards layer ── */
.bg-cards-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ── Individual card ── */
.bg-card {
    position: absolute;
    box-sizing: border-box;
    border-radius: 14px;
    background: radial-gradient(ellipse at center,
        transparent 0%,
        rgba(4, 14, 42, 0.65) 55%,
        rgba(2, 8, 28, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 2px 12px rgba(0,0,0,0.28);
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.13;
    will-change: opacity;
    transition:
        border-color 0.38s ease,
        box-shadow   0.38s ease;
    z-index: 2;
}

/* Dark-edge vignette — transparent in centre, dark at edges */
.bg-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 50%,
        transparent 18%,
        rgba(3, 11, 28, 0.88) 74%);
    opacity: 0;
    transition: opacity 0.38s ease;
    pointer-events: none;
    z-index: 2;
}
.bg-card.bc-violet::before {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(85, 41, 142, 0.06) 0%,
        transparent 26%,
        rgba(3, 11, 28, 0.88) 74%);
}
.bg-card.bc-cyan::before {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(28, 169, 201, 0.06) 0%,
        transparent 26%,
        rgba(3, 11, 28, 0.88) 74%);
}
.bg-card:hover::before { opacity: 1; }

/* ── Hover: stroke glow only, no background fill ── */
.bg-card:hover {
    z-index: 30 !important;
}
.bg-card.bc-cyan:hover {
    border-color: rgba(28, 169, 201, 0.65) !important;
    box-shadow:
        0 0 14px rgba(28, 169, 201, 0.28),
        0 0  2px rgba(28, 169, 201, 0.50),
        inset 0 0 14px rgba(28, 169, 201, 0.06);
}
.bg-card.bc-violet:hover {
    border-color: rgba(85, 41, 142, 0.65) !important;
    box-shadow:
        0 0 14px rgba(85, 41, 142, 0.32),
        0 0  2px rgba(85, 41, 142, 0.55),
        inset 0 0 14px rgba(85, 41, 142, 0.07);
}

/* ── SVG wrapper — sits below the vignette ── */
.bc-svg-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bc-svg-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── SVG animation keyframes ── */
@keyframes bNP { 0%,100%{opacity:.25} 50%{opacity:.82} }
@keyframes bLD { to{stroke-dashoffset:-24} }
@keyframes bSW { to{transform:rotate(360deg)} }
@keyframes bGP { 0%,100%{opacity:.28} 50%{opacity:.72} }

.bnp { animation: bNP 2.3s ease-in-out infinite; }
.bld { stroke-dasharray: 7 5; animation: bLD 3s linear infinite; }
.bsw { animation: bSW 7s linear infinite; }
.bgp { animation: bGP 2.1s ease-in-out infinite; }

/* ── Foreground layers ── */
.hero-grid,
.hero-orbs,
.hero-particles,
.site-top,
.hero-section {
    position: relative;
    z-index: 10;
}

.hero-orb { opacity: 0.30 !important; }

/* Sections need stacking context but NOT overflow:hidden
   so beam canvases are positioned correctly              */
.section-products,
.section-personas,
.section-pricing,
.section-success,
.section-testimonial,
.section-trust { position: relative; }

/* Block body violet glow from bleeding through transparent product section bottom */
.section-products { background: #051A3C !important; }

/* Match testimonial background to the Trusted section it merges into.
   Same colours/easing as the Figma reference frame (node 2972:28429 /
   "Group 2085665041"), but the whole ramp is shifted later (hold-white
   ends at 65% instead of 49.74%) so the violet bleed sits lower in the
   section per feedback — still ends at #55298e, the exact colour
   .page-finale::before opens with. */
.section-testimonial {
    background: linear-gradient(180deg,
        #fcfcfc 0%,
        #fcfcfc 65%,
        #f2eef8 69.9%,
        #d7c7e7 75.6%,
        #b99cd5 81.1%,
        #9870bd 86.9%,
        #7e4fa7 91.2%,
        #653797 95.1%,
        #55298e 100%) !important;
}

/* ── Per-section beam canvas ── */
.page-beam-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
}
/* Content sits above beam canvas — z-index only, no position override */
.section-features  .container,
.section-personas  .container,
.section-pricing   .container,
.section-success   .container,
.section-testimonial .container,
.section-trust     .container {
    position: relative;
    z-index: 1;
}
.page-finale > .section-trust,
.page-finale > footer { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════
   Responsive container component  (scoped to this page only)
   Single reusable .container used by every section. Bootstrap-
   style breakpoint ladder, capped at 1320px. The hero keeps its
   own full-width override (.hero-section .container, 1500px).
   ════════════════════════════════════════════════════════════ */
.hero-bg-page .container {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}
@media (min-width: 576px)  { .hero-bg-page .container { max-width: 540px; } }
@media (min-width: 768px)  { .hero-bg-page .container { max-width: 720px; } }
@media (min-width: 992px)  { .hero-bg-page .container { max-width: 960px; } }
@media (min-width: 1200px) { .hero-bg-page .container { max-width: 1140px; } }
@media (min-width: 1400px) { .hero-bg-page .container { max-width: 1320px; } }

/* Slide nav sits above the fade */
.fc-slide-nav { position: relative; z-index: 5; }

/* ── Slide nav buttons: prev (secondary/outlined) vs next (primary/filled) ──
   Matches the testimonial carousel's tsPrev/tsNext pattern: next is the
   active, solid-gradient button; prev is a lighter, gradient-outlined
   secondary so the pair reads as forward/backward, not two identical
   buttons. */
.fc-snav-btn {
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    transition: filter .2s ease, opacity .2s ease, box-shadow .2s ease !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* Next: solid brand-gradient fill, white chevron — primary/active */
#fcNext {
    background: var(--grad-brand-btn) !important;
    box-shadow: 0 2px 14px rgba(119, 71, 182, 0.45) !important;
}
/* Prev: white fill, gradient border + gradient chevron — secondary */
#fcPrev {
    background: linear-gradient(#fff, #fff) padding-box,
                var(--grad-brand-btn) border-box !important;
    border: 1.5px solid transparent !important;
    color: #7747b6 !important;
    box-shadow: 0 2px 10px rgba(119, 71, 182, 0.22) !important;
}
.fc-snav-btn:not(:disabled):hover {
    filter: brightness(1.12) !important;
    box-shadow: 0 2px 18px rgba(119, 71, 182, 0.60) !important;
}
.fc-snav-btn:disabled {
    background: rgba(15, 30, 70, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    opacity: 0.4 !important;
    cursor: default !important;
}

/* ── Features visual cards: remove scan line + floating animation on hover ── */
/* Remove the horizontal gradient scan line */
.fc-visual::after {
    display: none !important;
}
/* Stop the card content from bobbing up/down when active/hovered */
.fc-col.is-active .fc-vis-inner,
.fc-col:hover .fc-vis-inner {
    animation: none !important;
    transform: none !important;
}
/* Hover: SVG turns white — kept intentionally */

/* ── Features: hide arrow button on all cards ── */
.fc-col-arrow { display: none !important; }

/* ── Features .fc-visual area: dark 18% background + 8px border-radius all sides ── */
.fc-visual {
    background: rgba(0, 0, 0, 0.18) !important;
    border-radius: 8px !important;
}

/* ── Dot-grid texture — same as product section, all sections ── */
.fc-section::before,
#personaSection::before,
.section-pricing::before,
.section-success::before,
.section-testimonial::before,
.section-trust::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-size: 24px 24px;
}
/* Dark sections — subtle light dots with edge fade */
/* fc-section: dots fade in from top so seam with product section is invisible */
.fc-section::before {
    background-image: radial-gradient(rgba(160,200,255,.18) 1px, transparent 1px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 22%);
}
.section-trust::before {
    background-image: radial-gradient(rgba(160,200,255,.18) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(ellipse 88% 78% at 50% 50%, #000 35%, transparent 82%);
            mask-image: radial-gradient(ellipse 88% 78% at 50% 50%, #000 35%, transparent 82%);
}
/* Light sections — no mask, higher opacity so dots read on white bg */
#personaSection::before,
.section-pricing::before,
.section-success::before,
.section-testimonial::before {
    background-image: radial-gradient(rgba(40,99,195,.14) 1px, transparent 1px);
    -webkit-mask-image: none;
            mask-image: none;
}

/* ── fc-section: updated gradient + soft bottom dissolve ── */
.fc-section {
    overflow: visible !important;
    margin-top: -1px !important;
    background: linear-gradient(180deg,
        #051a3c  0%,
        #1a1e52  22.24%,
        #32216e  36.65%,
        #55298e  60.91%,
        #3d48ab  70.37%,
        #2863c5  90%,
        #5886d0  100%,
        #9fbae4  100%
    ) !important;
}
.fc-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 200px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(159,186,228,1) 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* ── Personas: close gap + carry blue gradient into heading ── */
#personaSection { margin-top: -1px !important; }

/* Restore vertical centering — homepage.css forces align-items:stretch which top-aligns the image */
#personaSection .persona-explorer {
    align-items: center !important;
}
.section-personas .pex-stage {
    align-self: center !important;
}
#personaSection .personas-fade-bottom { background: none !important; }
#personaSection .personas-fade {
    height: 580px !important;
    background: linear-gradient(180deg,
        rgba(159,186,228,1)    0%,
        rgba(155,182,226,0.88) 2%,
        rgba(148,175,222,0.72) 5%,
        rgba(138,166,218,0.52) 10%,
        rgba(125,155,213,0.30) 20%,
        rgba(110,142,208,0.12) 30%,
        rgba( 95,130,203,0.03) 40%,
        transparent            50%
    ) !important;
}

/* (Removed the #personaSection::before suppressor — the persona section now
   keeps the same dot-grid as pricing/success/testimonial, per the shared
   "Dot-grid texture — all sections" block above. The unrelated .pex-stage
   inner dot-grid stays stripped further down.) */

/* Persona → pricing seam: drop the 120px fade-to-white overlay pinned to the
   persona section's bottom (declared twice earlier in this bundle). It sat
   at z-index 10 above the dot grid and blanked the dots at the boundary —
   the visible "gap" between the two sections' textures. With dots on both
   sides the seam needs no blending. */
#personaSection::after { content: none !important; }

/* Features → persona seam: the 580px .personas-fade blend at the persona
   section's top painted above the dot grid (same z, later in DOM), blanking
   the dots for the section's whole first screen. Lift the dots one layer —
   still far below the content at z-index 12 — so the texture runs from the
   very top of the section. The blend gradient itself is unchanged. */
#personaSection::before { z-index: 1 !important; }

/* Pricing: once the visitor clicks a tab/card the rotation holds
   (index.js adds .is-held) — hide the auto-advance progress bar so the
   card doesn't promise a switch that won't come. */
.section-pricing.is-held .pm-card-progress { display: none !important; }

/* Trusted logos — Ducont: a colored PNG that read dim and small beside the
   white SVG marks. Force it white (black-crush + invert keeps the PNG's
   transparency). Sizing: the trimmed 151×35 asset is wide, so cap to the
   card's own content box (min with 126px, the shared logo cap) — never
   wider than the card, no bleed past the rounded border. Covers the
   desktop flip grid and the mobile marquee. */
#logoFlipGrid .lf-face img[src*="Ducont"],
.logo-scroll-row .lf-card img[src*="Ducont"]{
    filter: brightness(0) invert(1);
    max-height: 42px;
    max-width: min(100%, 126px);
}

/* All trusted logos: the shared 126px cap can exceed a narrow card's content
   box, and the card's overflow:hidden then slices the logo's edge (seen on
   Briminc Softech). Fit-to-card instead — wide marks scale down, never clip. */
#logoFlipGrid .lf-face img,
.logo-scroll-row .lf-card img{
    max-width: min(100%, 126px);
}

/* Tighten the persona → pricing gap on desktop: the section carried 160px
   bottom padding + pricing's 72px top padding on top of the stage's own
   leftover height — reading as a big empty band between the sections. */
@media (min-width: 992px) {
    #personaSection { padding-bottom: 64px !important; }
    .section-pricing { padding-top: 48px !important; }
}

/* ── Bottom fade — hero blends into trusted section ── */
.hero-stage::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(to bottom, transparent 0%, #051A3C 100%);
    pointer-events: none;
    z-index: 3;
}
/* Hero content container must sit above the bottom fade (z-index 3) so the
   CTA button is never obscured by the hero-stage::after gradient. */
.hero-bg-page .hero-section .container {
    position: relative;
    z-index: 4;
}

/* ── Trusted section — match top color for seamless merge ── */
.trusted-section {
    background: #051A3C !important;
    padding-top: 8px !important;
}

/* ── Trusted section accent ── */
.ah-accent {
    background-image: linear-gradient(135deg, #7747b6 0%, #2863c3 50%, #1ca9c9 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
}


/* ── Hero stage — content anchored near top, not centered ── */
.hero-stage {
    min-height: 88vh !important;
    display: flex !important;
    flex-direction: column !important;
}
.hero-stage .hero-section {
    flex: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 48px !important;
}

/* ── Hero 2-column split layout ── */
.hero-split {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 0 0 60px;
    width: 100%;
}
.hero-split__text {
    flex: 0 0 38%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: left;
}
.hero-split__text h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 56px;
    line-height: 64px;
    color: #fcfcfc;
    font-weight: 300;
    letter-spacing: -0.8px;
    margin: 0;
}
.hero-split__text .hero-sub {
    color: rgba(252, 252, 252, 0.72);
    font-size: 17px;
    line-height: 27px;
    font-weight: 400;
    margin: 0 !important;
    text-align: left;
    max-width: 520px;
}
.hero-split__ctas {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}
.hero-split__ctas .explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 26px;
    cursor: pointer;
    border: none;
}
.hero-split__visual {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Dark backdrop behind browser — lifts GIF off the card grid */
.hero-split__visual::before {
    content: '';
    position: absolute;
    inset: -60px -80px;
    background: radial-gradient(ellipse at 55% 50%,
        rgba(1, 5, 18, 0.88) 0%,
        rgba(1, 5, 18, 0.60) 45%,
        transparent 75%);
    pointer-events: none;
    z-index: 0;
}
.hero-split__visual .hero-browser-wrap { position: relative; z-index: 1; width: 100%; }

/* Dark backdrop behind hero text — readability over card grid */
.hero-split__text {
    position: relative;
    z-index: 5;
}
.hero-split__text::before {
    content: '';
    position: absolute;
    inset: -60px -40px 0px -80px;
    background: transparent;
    pointer-events: none;
    z-index: -1;
}

/* ── Browser mockup — constrain height, fill with video ── */
.hero-split__visual .hero-browser {
    max-height: 380px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.07),
        0 24px 80px rgba(0,0,0,0.75),
        0 8px 32px rgba(0,0,0,0.55) !important;
}
.hero-split__visual .hero-browser-screen {
    max-height: 330px;
    overflow: hidden;
}
.hero-split__visual .hero-banner-video {
    width: 100%;
    height: 330px;
    object-fit: cover;
    object-position: top center;
}
/* Banner inside the browser frame — show full preview */
.hero-split__visual .hero-browser { max-height: none; }
.hero-split__visual .hero-browser-screen { max-height: none; overflow: hidden; }
.hero-split__visual .hero-banner-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
}
/* Lottie animation banner — matches the 1440x832 composition, no letterboxing */
.hero-split__visual .hero-banner-lottie {
    display: block;
    width: 100%;
    aspect-ratio: 1440 / 832;
    background: transparent;
    overflow: hidden;
    position: relative;
}
/* Force the Lottie-injected SVG/canvas to stay inside the container */
.hero-split__visual .hero-banner-lottie svg,
.hero-split__visual .hero-banner-lottie canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* ── Hero text entrance animations ── */
/* ── Word stagger — fade + rise ── */
.hw-outer {
    display: inline-block;
    vertical-align: bottom;
}
.hw {
    display: inline-block;
    opacity: 0;
    animation: heroWordIn 0.60s ease forwards;
}
@keyframes heroWordIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.hero-split__text .hero-sub {
    opacity: 0;
    animation: heroFadeUp 0.55s cubic-bezier(.22, .61, .36, 1) forwards;
}
.hero-split__ctas {
    opacity: 0;
    animation: heroFadeUp 0.55s cubic-bezier(.22, .61, .36, 1) forwards;
}
.hero-split__visual {
    opacity: 0;
    animation: heroFadeUp 0.60s cubic-bezier(.22, .61, .36, 1) forwards;
}

/* ── Testimonial: Figma two-column layout ── */
.ts-wrap {
    display: flex;
    gap: 64px;
    align-items: center;
    padding-top: 56px;
}
.ts-cards {
    flex: 0 0 460px;
    position: relative;
    height: 415px;
}
.ts-pcard {
    position: absolute;
    width: 370px;
    background: #fcfcfc;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
    padding: 18px 20px;
    cursor: pointer;
    border: none;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: background 0.28s, box-shadow 0.28s, left 0.3s;
    outline-offset: 2px;
}
.ts-pcard:nth-child(1) { top: 0; }
.ts-pcard:nth-child(2) { top: 152px; }
.ts-pcard:nth-child(3) { top: 304px; }
/* Default left:0 on all; active shifts right */
.ts-pcard { left: 0; }
.ts-pcard.is-active { left: 90px; }
.ts-pcard.is-active {
    box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
.ts-pcard.is-active::before {
    content: '';
    position: absolute;
    right: 0; left: auto; top: 0; bottom: 0;
    width: 4px;
    border-radius: 0 12px 12px 0;
    background: var(--grad-brand-v);
}
/* Per-person active themes */
.ts-pcard[data-ts="0"].is-active { background: #e7eef8; }
.ts-pcard[data-ts="1"].is-active { background: #e8f6fa; }
.ts-pcard[data-ts="2"].is-active { background: #f0ebf7; }
.ts-pcard[data-ts="3"].is-active { background: #eef1f9; }
.ts-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #fff;
    font-family: 'Inter', sans-serif;
}
.ts-av0 { background: linear-gradient(135deg, #7347B6, #2863C3); }
.ts-av1 { background: linear-gradient(135deg, #1CA9C9, #1687a1); }
.ts-av2 { background: linear-gradient(135deg, #2863C3, #1CA9C9); }
.ts-av3 { background: linear-gradient(135deg, #7347B6, #1CA9C9); }
.ts-pinfo { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ts-pname {
    font-size: 16px; font-weight: 700;
    color: #242424; line-height: 1.3;
}
.ts-pcard[data-ts="0"].is-active .ts-pname { color: #0e48a5; }
.ts-pcard[data-ts="1"].is-active .ts-pname { color: #1687a1; }
.ts-pcard[data-ts="2"].is-active .ts-pname { color: #442172; }
.ts-pcard[data-ts="3"].is-active .ts-pname { color: #5b3f8f; }
.ts-prole { font-size: 13px; color: #505050; line-height: 1.4; }
.ts-qicon {
    position: absolute; top: 14px; right: 16px;
    width: 18px; height: 18px; color: #b0bec5;
}
.ts-panel {
    flex: 1; position: relative;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding: 48px 0 48px 48px;
}
.ts-dquote {
    position: absolute; top: 12px; left: 0;
    width: 220px; height: 165px;
    color: #e8edf5; pointer-events: none;
    z-index: 0; opacity: 0.7;
}
.ts-qtext {
    font-size: 16px; line-height: 1.8;
    color: #242424;
    white-space: pre-line;
    transition: opacity 0.22s, transform 0.22s;
    margin: 0;
    position: relative; z-index: 1;
    padding-top: 16px;
}
.ts-qtext.is-swapping { opacity: 0; transform: translateY(6px); }
.ts-bottom {
    display: flex; align-items: center;
    justify-content: space-between;
    position: relative; z-index: 1;
}
.ts-stars { display: flex; gap: 5px; color: #f5a623; }
.ts-stars svg { width: 18px; height: 18px; }
.ts-nav { display: flex; gap: 12px; }
.ts-nav-btn {
    border: none; background: none; cursor: pointer;
    padding: 0; line-height: 0; border-radius: 50%;
    transition: transform 0.18s;
}
.ts-nav-btn svg { width: 48px; height: 48px; display: block; }

/* ══════════════════════════════════════════════════
   PERSONA SECTION — Figma layout overrides
══════════════════════════════════════════════════ */

/* Heading: unified sub-heading scale (28px/36px) */
.pex-text h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    line-height: 36px !important;
    margin: 0 0 20px !important;
    letter-spacing: -0.3px !important;
}

/* Chips: vertical bullet list, not horizontal pills */
.persona-chips {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
}
.persona-chips .chip {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    border-radius: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #405270 !important;
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
}
.persona-chips .chip:hover {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.chip-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pa-accent, #4f39f6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    box-shadow: 0 1px 1.5px var(--pa-accent-glow-a, rgba(79,57,246,0.3)),
                0 1px 1px   var(--pa-accent-glow-a, rgba(79,57,246,0.3));
    transition: background .35s ease, box-shadow .35s ease;
}
.chip-icon svg,
.chip-icon img { display: block; }
.chip-text {
    padding-top: 2px;
    max-width: 595px;
}

/* ── Remove the auto-generated dot before the role label ── */
.pex-role-label::before {
    display: none;
}

/* ── Remove the homepage.css ::before dot injected on each chip ── */
#personaSection .persona-chips .chip::before {
    display: none;
}

/* ── Persona section — remove ALL gradient orbs completely ── */

/* 1. Hide the scene-glow orb elements in every persona scene */
.section-personas .scene-glow,
#personaSection .scene-glow {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. Strip the pex-stage dot-grid — content:none is more reliable than display:none on ::before */
.section-personas .pex-stage::before,
#personaSection .pex-stage::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* 3. Transparent stage — the old solid #fcfcfc backing (needed when glows
   bled through from behind; those are stripped above) blanked out the
   section's dot-grid across the whole image column. */
.section-personas .pex-stage {
    background: transparent !important;
}

/* ── Business Leader dashboard image layout ── */
/* pex-stage overflow visible so widget can extend below */
.section-personas .pex-stage {
    overflow: visible !important;
}

/* ── Business Leader scene: image layout (pixel-exact from Figma 742×557px container) ── */
.lv-dashboard-wrap {
    position: absolute;
    inset: 0;
    overflow: visible;
}

/* Intentional purple + blue glow orbs behind the images (Figma-spec) */
.lv-glow {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
}
.lv-glow-purple {
    left: -80px;
    top: -71px;
    width: 531px;
    height: 398px;
    background: radial-gradient(circle at center,
        rgba(119,71,182,0.55)  0%,
        rgba(89,53,137,0.41)  17.5%,
        rgba(60,36,91,0.28)   35%,
        transparent           70%
    );
    filter: blur(82px);
    opacity: 0.96;
}
.lv-glow-blue {
    left: 337px;
    top: 155px;
    width: 477px;
    height: 357px;
    background: radial-gradient(circle at center,
        rgba(40,99,195,0.4)  0%,
        rgba(20,50,98,0.2)   35%,
        transparent          70%
    );
    filter: blur(80px);
    opacity: 0.99;
}

/* Main dashboard image wrapper — 839×602px, starts at (61,29) within 742×557 stage */
.lv-dash-main-wrap {
    position: absolute;
    left: 61px;
    top: 29px;
    width: 839px;
    height: 602px;
    border: 1px solid #0e48a5;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
}
.lv-dash-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    border: none;
}
/* Figma overlay: transparent at top-left corner → white toward bottom-right */
.lv-dash-main-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 105% 105% at 2% 3%,
        transparent          12%,
        rgba(252,252,252,0.5) 48%,
        rgba(252,252,252,0.85) 72%,
        rgba(252,252,252,1)  88%
    );
}

/* Dataset Insights card — 376×232px at (117,229) */
.lv-dash-card {
    position: absolute;
    left: 117px;
    top: 229px;
    width: 376px;
    height: 232px;
    border: 1px solid #0e48a5;
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    display: block;
    object-fit: cover;
    z-index: 2;
}

/* Ask-Me widget — 559×193px at (390,480), extends below stage */
.lv-dash-widget {
    position: absolute;
    left: 390px;
    top: 480px;
    width: 559px;
    height: 193px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    display: block;
    object-fit: cover;
    z-index: 3;
}
/* ── Scientist scene: dashboard image layout (Figma node 1776-34698, 965×571 container) ── */
.sc-dashboard-wrap {
    position: absolute;
    inset: 0;
    overflow: visible;
}

/* Main dashboard (965×571) with fade overlay */
.sc-dash-main-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 965px;
    height: 571px;
    border: 1px solid #0e48a5;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
}
.sc-dash-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    border: none;
}
/* Transparent at top-left corner → white toward bottom-right, same pattern as leader */
.sc-dash-main-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 105% 105% at 1% 1%,
        transparent          10%,
        rgba(252,252,252,0.5) 45%,
        rgba(252,252,252,0.85) 70%,
        rgba(252,252,252,1)  85%
    );
}

/* Analytics types panel (252×606) — right side of dashboard, extends below */
.sc-dash-panel {
    position: absolute;
    left: 710px;
    top: 0;
    width: 252px;
    height: 606px;
    display: block;
    object-fit: cover;
    z-index: 2;
}

/* Data-point tooltip card (300×82) with teal border */
.sc-dash-tooltip {
    position: absolute;
    left: 390px;
    top: 215px;
    width: 300px;
    height: 82px;
    border: 2px solid #1ca9c9;
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    display: block;
    object-fit: cover;
    z-index: 3;
}

/* === Glow orbs for SVG-based persona scenes (Scientist / Engineer / Analyst) === */
.scene-orb {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
}
.scene-orb-a {
    left: -80px;
    top: -71px;
    width: 531px;
    height: 398px;
    background: radial-gradient(circle at center,
        var(--pa-accent-glow-a, rgba(119,71,182,0.55))  0%,
        transparent                                       70%
    );
    filter: blur(82px);
    opacity: 0.96;
}
.scene-orb-b {
    left: 337px;
    top: 155px;
    width: 477px;
    height: 357px;
    background: radial-gradient(circle at center,
        var(--pa-accent-glow-b, rgba(40,99,195,0.4))  0%,
        transparent                                     70%
    );
    filter: blur(80px);
    opacity: 0.99;
}
/* === SVG scene images (Scientist / Engineer / Analyst) === */
.persona-scene-svg {
    position: absolute;
    left: 61px;
    top: 29px;
    height: 602px;   /* matches Leader main image height exactly */
    width: auto;
    max-width: none;
    display: block;
    border: none;
    z-index: 1;
}
/* Analyst SVG: at height:602px its 61px internal offset scales to 56px → left: 61-56 = 5px */
.an-scene-svg {
    left: 5px;
}

/* ── Persona scenes: single product image per role (fills the stage) ── */
.section-personas .persona-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    border: none;
    z-index: 1;
}

/* ── Engineer scene: dashboard image layout (Figma node 1805-25168) ── */
.en-dashboard-wrap {
    position: absolute;
    inset: 0;
    overflow: visible;
}

/* Main pipeline builder (988×571) with fade overlay */
.en-dash-main-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 988px;
    height: 571px;
    border: 1px solid #0e48a5;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
}
.en-dash-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    border: none;
}
.en-dash-main-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 105% 105% at 1% 1%,
        transparent           18%,
        rgba(252,252,252,0.5)  50%,
        rgba(252,252,252,0.85) 72%,
        rgba(252,252,252,1)   88%
    );
}

/* Lumenore Connect large panel (454×325) — lower-right, behind front panel */
.en-dash-sidebar {
    position: absolute;
    left: 522px;
    top: 318px;
    width: 454px;
    height: 325px;
    border: 1px solid #0e48a5;
    border-radius: 8px;
    display: block;
    object-fit: cover;
    z-index: 2;
}

/* Lumenore Connect front panel (410×243) — in front of sidebar, lower-right */
.en-dash-overlay {
    position: absolute;
    left: 522px;
    top: 318px;
    width: 410px;
    height: 243px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    display: block;
    object-fit: cover;
    z-index: 3;
}

/* Narrow left nav panel (145×410) — Figma crop: inner img zoomed 151×136% offset -44%/-36% */
.en-dash-nav-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 145px;
    height: 410px;
    border: 1px solid #0e48a5;
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    overflow: hidden;
    z-index: 4;
}
.en-dash-nav {
    position: absolute;
    width: 151.38%;
    height: 136.27%;
    left: -43.68%;
    top: -36.27%;
    object-fit: cover;
    display: block;
}

/* === Analyst / Data Analyst Scene === */
.an-dashboard-wrap {
    position: absolute;
    inset: 0;
}

/* Background: full Lumenore dashboard (1121.5×609.45) */
.an-dash-main-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 1121px;
    height: 609px;
    border: 1px solid #55298e;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
}
.an-dash-main { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; border: none; }
.an-dash-main-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 100% 120% at 43% 2%,
        transparent            18%,
        rgba(252,252,252,0.5)  52%,
        rgba(252,252,252,0.88) 72%,
        rgba(252,252,252,1)    88%
    );
}

/* Chart configuration panel (559.4×284.1, 2px purple border) — lower-left */
.an-dash-chart {
    position: absolute;
    left: 0;
    top: 302px;
    width: 559px;
    height: 284px;
    border: 2px solid #55298e;
    border-radius: 8px;
    display: block;
    object-fit: cover;
    z-index: 2;
}

/* Visualization Agent form (442.7×317.3, purple border + shadow) — center-right */
.an-dash-agent {
    position: absolute;
    left: 544px;
    top: 242px;
    width: 442px;
    height: 317px;
    border: 1px solid #55298e;
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    display: block;
    object-fit: cover;
    z-index: 3;
}

/* Tiny accent bar (71.2×9.4) — sits at top of chart panel */
.an-dash-bar {
    position: absolute;
    left: 0;
    top: 302px;
    width: 71px;
    height: 9px;
    border: 1px solid #55298e;
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
    display: block;
    object-fit: cover;
    z-index: 4;
}

/* Small icon (24×26) — top-left corner */
.an-dash-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 26px;
    display: block;
    object-fit: cover;
    z-index: 5;
}

.ts-nav-btn:hover { transform: scale(1.08); }

/* ════════════════════════════════════════════════════════════
   Core Modules — Retool-style sticky scroll
   Sticky left list (active item expands) synced to a scrolling
   stack of preview cards on the right. Scoped to this page.
   ════════════════════════════════════════════════════════════ */

/* Drop the legacy 300vh scroll-pin track — natural height now */
.hero-bg-page #productSection { height: auto !important; }
.hero-bg-page #productSection .container {
    padding-top: 88px;
    padding-bottom: 88px;
    position: relative;
    z-index: 1;
}

.hero-bg-page .cm-intro { margin-bottom: 16px; }
.hero-bg-page .cm-intro .personas-eyebrow { margin-bottom: 0; }

.hero-bg-page .cm-scroll {
    display: grid;
    /* Left column stays container-aligned; right column takes the rest and
       bleeds to the viewport's right edge via the negative margin below. */
    grid-template-columns: minmax(340px, 460px) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    /* Full-bleed right: (100% - 100vw)/2 == distance from the container's
       right content edge to the viewport's right edge (negative value). */
    margin-right: calc((100% - 100vw) / 2);
}

/* ── Left: heading + subheading scroll away with the page; only the product
   list below them sticks. The aside stretches to the full row height
   (overriding the grid's align-items: start) so the sticky list has room
   to travel while the preview cards scroll past on the right. ── */
.hero-bg-page .cm-aside {
    align-self: stretch;
    min-width: 0;
}
.hero-bg-page .cm-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    font-size: 34px;
    line-height: 42px;
    letter-spacing: -.6px;
    color: #fcfcfc;
    margin: 0 0 16px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.hero-bg-page .cm-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 23px;
    color: rgba(255, 255, 255, .68);
    margin: 0 0 24px;
    max-width: 46ch;
}

.hero-bg-page .cm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: sticky;
    /* Pin from the list's top rule (the first item's border-top): once that
       line scrolls up to just below the fixed header (81px tall), the list
       holds there while the preview cards scroll past on the right. 120px
       keeps the rule clearly visible with breathing room under the header. */
    top: 120px;
}
.hero-bg-page .cm-item { border-top: 1px solid rgba(255, 255, 255, .14); }
.hero-bg-page .cm-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }

.hero-bg-page .cm-item-btn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 30px 0;
    color: inherit;
    font: inherit;
}
/* In the expanded item, tuck the tagline closer to the name row; collapsed
   rows keep the full 30px rhythm between products. */
.hero-bg-page .cm-item.is-active .cm-item-btn { padding-bottom: 16px; }
.hero-bg-page .cm-item-head { display: flex; align-items: center; gap: 14px; }
.hero-bg-page .cm-item-icon {
    width: 26px; height: 26px;
    flex: 0 0 auto;
    opacity: .5;
    transition: opacity .3s ease;
}
.hero-bg-page .cm-item-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: -.2px;
    color: rgba(255, 255, 255, .5);
    transition: color .3s ease;
}
.hero-bg-page .cm-item.is-active .cm-item-icon { opacity: 1; }
.hero-bg-page .cm-item.is-active .cm-item-name { color: #fcfcfc; }
.hero-bg-page .cm-item-btn:hover .cm-item-name { color: rgba(255, 255, 255, .85); }

/* Expanding body — grid-rows 0fr→1fr height animation */
.hero-bg-page .cm-item-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    /* Kept short: animating grid-template-rows relayouts the pinned list
       every frame, which competes with scrolling. */
    transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
}
.hero-bg-page .cm-item-inner { overflow: hidden; min-height: 0; }
.hero-bg-page .cm-item.is-active .cm-item-body { grid-template-rows: 1fr; opacity: 1; }

.hero-bg-page .cm-item-inner {
    padding-left: 40px;
}
.hero-bg-page .cm-item.is-active .cm-item-inner { padding-bottom: 26px; }

.hero-bg-page .cm-item-tagline {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    color: #8FB7FF;
    margin: 0 0 12px;
}
.hero-bg-page .cm-item-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: rgba(255, 255, 255, .72);
    margin: 0 0 16px;
}
.hero-bg-page .cm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.hero-bg-page .cm-chip {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    color: rgba(255, 255, 255, .82);
}
/* CTA carries .btn-primary in the markup — the site's canonical gradient
   button (see the CANONICAL PRIMARY BUTTON block) — so it matches every
   other CTA on the page. Only override: the breathing filter animation is
   disabled here, because it forces a repaint inside the pinned list on
   every frame while the user scrolls the section. */
.hero-bg-page .cm-item-cta.btn-primary { animation: none; }

/* ── Right: scroll track with a pinned, crossfading visual frame ── */
.hero-bg-page .cm-previews {
    position: relative;
    /* Scroll track: this height (minus the frame) is split into three equal
       bands by index.js — each product's card holds through its band. Taller
       track = longer hold per product. */
    min-height: 220vh;
}
.hero-bg-page .cm-visual-sticky {
    position: sticky;
    /* Pinned at the viewport's vertical centre: index.js measures the frame
       and sets the exact centred `top` (min 120px for header clearance);
       16vh is only the pre-JS fallback (≈ centred for a 68vh-tall frame).
       The margin-top ≈ the title+subtitle block above the list, so frame
       and list arrive at their pin lines together. */
    top: 16vh;
    margin-top: 170px;
}
.hero-bg-page .cm-frame {
    position: relative;
    /* Native ratio of the Lottie comps (1440×832), capped so the whole frame
       always fits in the viewport below the pin line. */
    aspect-ratio: 1440 / 832;
    max-height: min(68vh, 620px);
    /* Shadow lives on the frame, not the cards — animating a 90px shadow on
       every crossfade forced large repaints and janked scrolling. */
    border-radius: 18px 0 0 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
}
.hero-bg-page .cm-card {
    position: absolute;
    inset: 0;
    /* Flush against the viewport's right edge: round the left only */
    border-radius: 18px 0 0 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-right: 0;
    /* Black tint backing so the UI graphic reads clearly (was a faint white wash) */
    background: rgba(0, 0, 0, .5);
    /* inset sizing wins while stacked in the frame; the ratio only takes
       effect on mobile where the card flows statically. */
    aspect-ratio: 1440 / 832;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.975);
    pointer-events: none;
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
}
.hero-bg-page .cm-card.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border-color: rgba(255, 255, 255, .22);
}
.hero-bg-page .cm-card img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}
/* Lottie containers (#askMeLottie / #insightsLottie / #dataMagnetLottie) —
   explicit size so the injected SVG fills the card instead of relying on
   the SVG's intrinsic-ratio fallback. */
.hero-bg-page .cm-card > div {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.hero-bg-page .cm-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
    opacity: .55;
    /* Own compositor layer: the 60px blur rasterizes once instead of being
       repainted with every card crossfade. */
    transform: translateZ(0);
}
.hero-bg-page .cm-orb-a { width: 320px; height: 320px; background: rgba(119, 71, 182, .55); top: -80px; right: -60px; }
.hero-bg-page .cm-orb-b { width: 280px; height: 280px; background: rgba(60, 110, 220, .5); bottom: -90px; left: -70px; }

/* ── Tablet / mobile: stack, expand all, drop sticky sync ── */
@media (max-width: 991px) {
    .hero-bg-page .cm-scroll { grid-template-columns: 1fr; gap: 44px; margin-right: 0; }
    .hero-bg-page .cm-aside { position: static; top: auto; align-self: auto; }
    .hero-bg-page .cm-list { position: static; top: auto; }
    .hero-bg-page .cm-item-body { grid-template-rows: 1fr; opacity: 1; }
    .hero-bg-page .cm-item.is-active .cm-item-inner,
    .hero-bg-page .cm-item-inner { padding-bottom: 24px; }
    .hero-bg-page .cm-item-icon { opacity: 1; }
    .hero-bg-page .cm-item-name { color: #fcfcfc; }
    /* No scroll track or pinned frame on mobile — each card flows statically
       inside its own item (index.js moves them there). */
    .hero-bg-page .cm-previews { min-height: 0; }
    .hero-bg-page .cm-visual-sticky { position: static; top: auto; margin-top: 0; }
    .hero-bg-page .cm-frame { aspect-ratio: auto; max-height: none; }
    .hero-bg-page .cm-card {
        position: static; inset: auto;
        min-height: 0; opacity: 1; transform: none; box-shadow: none;
        pointer-events: auto;
        border-radius: 16px; border-right: 1px solid rgba(255, 255, 255, .12);
    }
    /* index.js moves each .cm-card to be the last child of its matching
       .cm-item on mobile, so the GIF/Lottie preview sits directly under
       that product's own text instead of all three previews stacking in
       a separate group below all three text blocks. Needs its own
       spacing here since it's no longer relying on #cmPreviews' gap. */
    .hero-bg-page .cm-item > .cm-card { margin: 0 0 32px; }
    .hero-bg-page #productSection .container { padding-top: 64px; padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg-page .cm-item-body { transition: none; }
    .hero-bg-page .cm-card { transition: opacity .2s ease; transform: none; }
}

/* ════════════════════════════════════════════════════════════
   Trusted logos — mobile/tablet only (≤991px): swap the desktop
   #logoFlipGrid (8-card flip animation, untouched, hidden here) for
   .logo-scroll-row's one-card-per-logo continuous marquee. index.js
   builds #lfMobileTrack's 16 logos once, then appends a second
   aria-hidden copy (.lf-card--clone) right after, so a
   translateX(-50%) loop lands exactly back at the start with no
   visible seam — same technique as the existing (unused)
   .logo-slider/.logo-track marquee elsewhere in this file.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    #logoFlipGrid{ display: none; }
    .logo-scroll-row{ display: block; overflow: hidden; }
    .hero-bg-page .logo-scroll-row .lf-track {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: max-content;
        gap: 14px;
        animation: lf-marquee 32s linear infinite;
    }
    .hero-bg-page .logo-scroll-row:hover .lf-track,
    .hero-bg-page .logo-scroll-row:focus-within .lf-track {
        animation-play-state: paused;
    }
    .hero-bg-page .logo-scroll-row .lf-card {
        flex: 0 0 120px;
        height: 84px;
        padding: 12px 14px;
    }
    .hero-bg-page .logo-scroll-row .lf-card--clone{ display: flex; }
    .hero-bg-page .logo-scroll-row .lf-card img{ max-width: 88px; max-height: 38px; }
}
@media (max-width: 600px) {
    .hero-bg-page .logo-scroll-row .lf-card { flex: 0 0 104px; height: 76px; padding: 10px 12px; }
    .hero-bg-page .logo-scroll-row .lf-track { animation-duration: 26s; }
    .hero-bg-page .logo-scroll-row .lf-card img{ max-width: 74px; max-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-bg-page .logo-scroll-row .lf-track{ animation: none; }
}
@keyframes lf-marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}

/* ════════════════════════════════════════════════════════════
   BRAND GRADIENT TOKENS — single source of truth for every
   violet → royal-blue → turquoise accent on this page: gradient
   headings, primary buttons, the explore/compare CTAs, the hero
   "Agentic Analytics" wordmark, the badge and accent lines.
   Matches the "Data-to-Decision Journey" heading.

   To restyle EVERY brand gradient at once, edit one line —
   --grad-brand-stops. Everything else derives from it.
   ════════════════════════════════════════════════════════════ */
.hero-bg-page {
    /* The canonical color stops (Data-to-Decision Journey gradient) */
    --grad-brand-stops: #7747b6 0%, #2863c3 50%, #1ca9c9 100%;

    /* Angle variants, all built from the shared stops */
    --grad-brand:     linear-gradient(135deg,    var(--grad-brand-stops)); /* default / headings */
    --grad-brand-h:   linear-gradient(90deg,     var(--grad-brand-stops)); /* horizontal text   */
    --grad-brand-btn: linear-gradient(to left,   var(--grad-brand-stops)); /* buttons (teal L)  */
    --grad-brand-v:   linear-gradient(to bottom, var(--grad-brand-stops)); /* vertical accents  */

    /* Re-point the upstream brand-gradient variables (defined in
       index.css :root) so every consumer on the homepage unifies
       to the canonical gradient — hero wordmark, explore/compare
       buttons, search glow — without touching the shared file. */
    --AI-Agents-Text: var(--grad-brand-h);
    --Explore-Button: var(--grad-brand-btn);
    --Compare-Button: var(--grad-brand-btn);
    --Search-Glow:    var(--grad-brand-btn);
}

/* Primary buttons carry a literal gradient in index.css — re-point
   to the token. background-image (not the shorthand) preserves the
   button's box-shadow, background-color and gradient clip. */
.hero-bg-page .btn-primary.btn-primary {
    background-image: var(--grad-brand-btn);
}

/* Gradient-text H2 accents across the page — unify to the token.
   background-image keeps `background-clip: text` intact. */
.hero-bg-page .fh-accent,
.hero-bg-page .ph-accent,
.hero-bg-page .sh-accent,
.hero-bg-page .th-accent {
    background-image: var(--grad-brand) !important;
}

/* ── Persona section: match standard responsive container (overrides homepage.css 1500px base) ── */
.hero-bg-page #personaSection .container {
    max-width: 100% !important;
    padding-left:  1rem !important;
    padding-right: 1rem !important;
}
@media (min-width: 576px)  { .hero-bg-page #personaSection .container { max-width: 540px  !important; } }
@media (min-width: 768px)  { .hero-bg-page #personaSection .container { max-width: 720px  !important; } }
@media (min-width: 992px)  { .hero-bg-page #personaSection .container { max-width: 960px  !important; } }
@media (min-width: 1200px) { .hero-bg-page #personaSection .container { max-width: 1140px !important; } }
@media (min-width: 1400px) { .hero-bg-page #personaSection .container { max-width: 1320px !important; } }
/* Right-bleed: extend pex-stage image to viewport edge while left stays container-aligned */
.hero-bg-page #personaSection .persona-explorer {
    margin-right: calc((100% - 100vw) / 2) !important;
    width: auto !important;
}

/* ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — hero-bg-concept.css
   ════════════════════════════════════════════════════════════ */

/* ── Tablet (≤991px) ── */
@media (max-width: 991px) {

    /* Hero: reduce top padding */
    .hero-bg-page .hero-stage .hero-section {
        padding-top: 32px !important;
    }

    /* Hero: stack columns vertically */
    .hero-bg-page .hero-split {
        flex-direction: column;
        gap: 28px;
        padding: 0 0 48px;
    }
    .hero-bg-page .hero-split__text {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        text-align: center;
        /* The 32px gap (base rule) sits between h1/paragraph/CTA at any
           font size — with the heading already down to 44px here, that
           fixed gap starts reading as oversized whitespace. Scale it
           down with the type. */
        gap: 24px;
    }
    .hero-bg-page .hero-split__text h1 {
        font-size: 44px;
        line-height: 54px;
    }
    .hero-bg-page .hero-split__text .hero-sub {
        max-width: 560px;
        margin: 0 auto !important;
        font-size: 16px !important;
        line-height: 26px !important;
    }
    .hero-bg-page .hero-split__ctas {
        justify-content: center;
        margin-top: 4px;
    }
    .hero-bg-page .hero-split__visual {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }
    /* Contain dark backdrops within column on tablet */
    .hero-bg-page .hero-split__text::before {
        inset: -40px -20px 0px -20px;
    }
    .hero-bg-page .hero-split__visual::before {
        inset: -40px -20px;
    }

    /* Persona: cancel right-bleed on tablet */
    .hero-bg-page #personaSection .persona-explorer {
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* Testimonials: stack side-by-side columns */
    .ts-wrap {
        flex-direction: column;
        gap: 16px;
        padding-top: 32px;
        /* .hero-bg-page .container (this page's actual container rule)
           only gives 16px of horizontal padding, and neither the card
           nor the quote text added any inset of their own on top of
           that — both ran right up to that tight edge. */
        padding-left: 10px;
        padding-right: 10px;
    }
    /* Only the active person's card is shown — not all 3 stacked — so
       there's no more fixed absolute `top`-offset stacking for text to
       overflow out of in the first place. #tsPrev/#tsNext (in .ts-panel)
       already drive the exact same showTs()/is-active state independently
       of the cards themselves, so switching people still works with the
       other two hidden. */
    .ts-cards {
        flex: 0 0 auto;
        position: static;
        width: 100%;
        max-width: 420px;
        height: auto;
        margin: 0 auto;
    }
    .ts-pcard {
        display: none;
        width: 100%;
        max-width: none;
    }
    .ts-pcard.is-active {
        display: flex;
        /* relative, not static — same normal-flow layout, but keeps the
           card as the positioning context for its own children/
           pseudo-element (.ts-qicon, ::before below). static broke that,
           which is also why the quote-mark icon (.ts-qicon, absolute
           top:14px/right:16px relative to the card) was rendering up
           near the top of the whole section instead of inside the card. */
        position: relative;
        left: 0;
        /* Unlike static, relative DOES respect top/left offsets — and
           the base rule sets top:152px / top:304px per nth-child(2)/(3)
           for the old stacked layout. Whichever person is active would
           inherit that offset and visibly shift down into the quote
           text below it. All 3 must render at the same top:0 spot now
           that only one card shows at a time. */
        top: 0;
    }
    /* .ts-pcard.is-active::before (base rule) is a 4px accent stripe
       positioned absolute against the card itself — meant to run only
       the card's own height. Since .ts-pcard.is-active is position:static
       here (needed for the single-tab layout above), that absolute
       positioning now escapes to the next positioned ancestor up the
       tree (.section-testimonial .container, which spans the whole
       section) instead, rendering as one long line down the entire
       section instead of a small stripe on the card. */
    .ts-pcard.is-active::before { display: none; }
    .ts-panel {
        padding: 12px 0 24px;
        gap: 20px;
    }
    .ts-qtext { padding-top: 0; }
    /* Decorative — collides with the quote text once .ts-panel's 48px
       left inset (which it was positioned against) drops to 0 here. */
    .ts-dquote { display: none; }
}

/* ── Mobile (≤575px) ── */
@media (max-width: 575px) {

    /* Hero: tighter top gap */
    .hero-bg-page .hero-stage .hero-section {
        padding-top: 20px !important;
    }

    /* Hero heading: scale down for phones */
    .hero-bg-page .hero-split__text h1 {
        font-size: 34px;
        line-height: 44px;
        letter-spacing: -0.8px;
    }
    .hero-bg-page .hero-split__text .hero-sub {
        font-size: 14px !important;
        line-height: 23px !important;
    }
    .hero-bg-page .hero-split__text {
        gap: 18px;
    }
    .hero-bg-page .hero-split {
        gap: 20px;
    }

    /* Testimonial cards: fit phone width. (No stacking offsets needed
       here anymore — only the single active card renders, per the
       ≤991px rules above.) */
    .ts-cards {
        max-width: 100%;
    }

    /* Product suite heading: only h2 on the page that never joined the
       site-wide 44px → 34px → 26px scale (its 34px size is set via a
       .hero-bg-page-scoped rule with higher specificity than the older
       ".section-products h2" responsive rule, so it never shrank). */
    .hero-bg-page .cm-title {
        font-size: 26px;
        line-height: 36px;
    }

    /* Trust badges (HIPAA/GDPR/SOC2): fixed 140x140px images with no
       responsive handling wrapped into a squeezed row on phones. */
    .trust-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
    .trust-badges img {
        width: 96px;
        height: 96px;
    }

    /* Pricing grid: an unscoped `.pricing-grid{ grid-template-columns:
       55fr 45fr !important }` added later in this file (see the two
       "!important" declarations above) clobbers the original 1-column
       mobile stack, which only had normal specificity. Restore the
       stack at phone width with matching specificity + !important so
       it wins on both counts. */
    .hero-bg-page .pricing-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===========================================================
 * Mobile hamburger nav (index.html only) — ≤575px
 * Markup is built by assets/js/index-mobile-nav.js from the
 * existing .nav-links / mega-menus / header CTAs, so there's one
 * source of truth for nav content. Every selector here is either
 * scoped to new classes (.nav-toggle / .mobile-nav-panel / .mnp-*,
 * unused anywhere else) or wrapped in the ≤575px query below, so
 * ≥576px layout (tablet + desktop) is untouched. The toggle button
 * itself is display:none outside that query — the panel can't be
 * opened on wider screens even if something else went wrong.
 * ----------------------------------------------------------- */
/* Mobile browsers flash a translucent tap-highlight overlay on any
   clickable element by default — reads as an unwanted "blink" on the
   toggle and every link/button inside the panel. */
.nav-toggle,
.mobile-nav-panel a,
.mobile-nav-panel button{
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle{
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    cursor: pointer;
}
.nav-toggle-bar{
    display: block;
    width: 16px;
    height: 1.5px;
    border-radius: 1px;
    background: var(--Base-White, #fcfcfc);
    transition: transform .25s ease, opacity .25s ease;
}
body.mobile-nav-open .nav-toggle-bar:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
body.mobile-nav-open .nav-toggle-bar:nth-child(2){ opacity: 0; }
body.mobile-nav-open .nav-toggle-bar:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

.mnp-backdrop{
    position: fixed;
    /* --mnp-offset is the live-measured height of .site-top (hello-bar +
       site-header), set by index-mobile-nav.js right before opening —
       keeps the header out from under the backdrop/panel so it stays
       visible and clickable (its toggle button included) the whole
       time the menu is open, instead of being covered by z-index. */
    top: var(--mnp-offset, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9500;
    background: rgba(3, 9, 22, .55);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
body.mobile-nav-open .mnp-backdrop{ opacity: 1; pointer-events: auto; }

.mobile-nav-panel{
    position: fixed;
    top: var(--mnp-offset, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9600;
    width: 100%;
    background: var(--Royal-Blue-Blue-900, #051A3C);
    box-shadow: 0 24px 64px -24px rgba(3, 9, 22, .6);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
body.mobile-nav-open .mobile-nav-panel{ transform: translateX(0); }

.mnp-scroll{
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.mnp-list{ display: flex; flex-direction: column; }
.mnp-item{ border-bottom: 1px solid rgba(255, 255, 255, .1); }
.mnp-link,
.mnp-trigger{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 2px;
    background: none;
    border: none;
    color: var(--Base-White, #fcfcfc);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}
/* .mnp-trigger is a <button> — unstyled buttons keep a sliver of native
   platform "appearance" inset even with explicit padding set, which was
   nudging "Solutions" etc. out of alignment with the <a>-based sub-items
   below it. Stripping appearance makes both start at the same x. */
.mnp-trigger{
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.mnp-link:hover,
.mnp-link:focus-visible{ color: var(--SkyBlue-SkyBlue-500, #12b6f8); }
.mnp-trigger .mnp-caret{
    width: 9px;
    height: 5px;
    flex: 0 0 9px;
    color: rgba(255, 255, 255, .55);
    transition: transform .2s ease;
}
.mnp-item--accordion.is-open .mnp-trigger .mnp-caret{ transform: rotate(180deg); }
.mnp-sublist{
    display: flex;
    flex-direction: column;
    padding: 8px 0 8px;
}
/* Author CSS always beats the UA [hidden]{display:none} rule regardless
   of specificity, so the unconditional display:flex above would keep
   every sublist open even while JS sets/toggles the hidden attribute —
   this restores the collapsed state until an accordion item is opened. */
.mnp-sublist[hidden]{ display: none; }
/* Colors below match the desktop mega-menu's own palette (.np-nav-list /
   .np-grid-card) instead of a custom mobile-only theme, so hover/active
   states, text opacity, and icon tinting feel like the same component
   at both breakpoints. */
.mnp-sublist a{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 2px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .78);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    transition: background .15s ease, color .15s ease;
}
.mnp-sublist a:hover{
    background: rgba(64, 117, 201, .16);
    color: #ffffff;
}
.mnp-item-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    color: #aec7f0;
}
.mnp-sublist a:hover .mnp-item-icon{ color: #ffffff; }
.mnp-item-icon svg{ width: 100%; height: 100%; }
.mnp-item-label{ flex: 1; }
/* Category headings — matches the desktop mega-menu's .np-nav-title
   visual language (same rgba(255,255,255,.42) label color, same subtle
   rgba(255,255,255,.06) hairline divider), so Products/Capabilities/etc.
   read as the same component on mobile as on desktop, blended into the
   panel instead of a separate light card. Each one is also its own
   collapsed-by-default accordion trigger, so a long group (e.g. the 11
   capability links) doesn't force a long scroll. */
.mnp-subgroup{ margin-top: 12px; }
.mnp-sublist > .mnp-subgroup:first-child{ margin-top: 0; }
.mnp-subgroup-trigger{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 12px 2px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    cursor: pointer;
}
.mnp-subgroup-trigger:hover,
.mnp-subgroup-trigger:focus-visible{ color: rgba(255, 255, 255, .65); }
.mnp-caret--plus{
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    color: rgba(255, 255, 255, .42);
}
/* Plus → minus: the vertical stroke collapses away on open, leaving
   just the horizontal one, instead of a rotating chevron. */
.mnp-caret--plus .mnp-caret-v{
    transform-origin: center;
    transition: transform .2s ease;
}
.mnp-subgroup.is-open .mnp-caret--plus .mnp-caret-v{ transform: scaleY(0); }
.mnp-subgroup-list[hidden]{ display: none; }
.mnp-subgroup-list{ padding: 4px 0 4px; }

.mnp-actions{ display: flex; flex-direction: column; gap: 10px; }
.mnp-actions .btn-primary{ width: 100%; }

@media (prefers-reduced-motion: reduce){
    .nav-toggle-bar,
    .mnp-backdrop,
    .mobile-nav-panel{ transition: none; }
}

@media (max-width: 991px){
    /* Matches the breakpoint where .site-header .nav-links is hidden
       (line ~4246) — without the toggle here too, 576-991px viewports
       (tablets, iPad portrait) would have no way to open navigation. */
    .nav-toggle{ display: inline-flex; }
}
body.agentic-popup-open {
    overflow: hidden;
}

.agentic-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
}

.agentic-popup.is-open {
    opacity: 1;
    pointer-events: auto;
}

.agentic-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 10, 25, .72);
    backdrop-filter: blur(14px);
}

.agentic-popup__dialog {
    position: relative;
    width: min(620px, 100%);
    max-height: calc(100vh - 36px);
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 0%, rgba(28, 169, 201, .24), transparent 34%),
        radial-gradient(circle at 90% 12%, rgba(119, 71, 182, .3), transparent 32%),
        linear-gradient(135deg, #55298E 0%, #2A3F8F 38%, #0E2252 68%, #051A3C 100%);
    box-shadow: 0 34px 80px rgba(0, 0, 0, .42);
    transform: translateY(18px) scale(.98);
    transition: transform .24s ease;
}

.agentic-popup.is-open .agentic-popup__dialog {
    transform: translateY(0) scale(1);
}

.agentic-popup__content {
    padding: 34px;
}

.agentic-popup__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-bottom: 12px;
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(252, 252, 252, .86);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.agentic-popup h2 {
    max-width: 520px;
    margin: 0 0 10px;
    color: #FFFFFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 34px;
    font-weight: 300;
    line-height: 42px;
    letter-spacing: -.6px;
}

.agentic-popup p {
    max-width: 520px;
    margin: 0 0 18px;
    color: rgba(252, 252, 252, .74);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
}

.agentic-popup__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}

.agentic-popup__close:hover {
    border-color: rgba(255, 255, 255, .36);
    background: rgba(255, 255, 255, .14);
    transform: translateY(-1px);
}

.agentic-popup__close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #FFFFFF;
    transform-origin: center;
}

.agentic-popup__close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.agentic-popup__close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.agentic-popup__form {
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    padding: 18px;
}

.agentic-popup__form .hs-form-field label,
.agentic-popup__form .hs-form-field legend {
    color: #101828;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.agentic-popup__form .hs-form-field,
.agentic-popup__form .hs_submit,
.agentic-popup__form .actions {
    margin-bottom: 10px !important;
}

.agentic-popup__form input,
.agentic-popup__form select,
.agentic-popup__form textarea {
    width: 100% !important;
    border-radius: 8px !important;
    min-height: 40px !important;
}

.agentic-popup__form textarea {
    min-height: 72px !important;
}

.agentic-popup__form .hs-button {
    border: 0 !important;
    border-radius: 6px !important;
    background: linear-gradient(to left, #7747B6 0%, #4075C9 50.718%, #1CA9C9 100%) !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    min-height: 44px;
    padding: 10px 22px !important;
}

@media (max-width: 767px) {
    .agentic-popup {
        padding: 10px;
    }

    .agentic-popup__dialog {
        border-radius: 20px;
        max-height: calc(100vh - 20px);
    }

    .agentic-popup__content {
        padding: 32px 16px 18px;
    }

    .agentic-popup h2 {
        font-size: 26px;
        line-height: 34px;
    }

    .agentic-popup p {
        font-size: 15px;
        line-height: 25px;
    }

    .agentic-popup__form {
        padding: 14px;
    }
}