/* ============================================================
   ask-me-bundle.css
   Single bundled stylesheet for lumenore-ask-me.html
   Sources (in cascade order):
     1. index.css
     2. ask-me.css
   ============================================================ */

/* ── 1. index.css ─────────────────────────────────────────── */
/* ===========================================================
 * 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;
}

/* Bootstrap-style 1320px ladder — matches index.html / final-home-bundle */
.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; } }

/* ===========================================================
 * 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;
    color: var(--Base-White, #fcfcfc);
}
.hero-section .container{
    position: relative;
    z-index: 2;
}
.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;
    /* Kept within the finale (small negative just softens its own top
       edge). The old -400px pushed the violet up into the now-removed
       testimonial zone; with that section gone it bled into the bottom of
       the light Blogs section above (page-finale paints over it), showing a
       lavender haze band — so the upward extension is removed. */
    top: -40px;
    /* 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){
    /* Wrap instead of hiding — keeps the full promo message + Register
       Now link visible on every width (matches index.html's pattern). */
    .hello-bar{ padding: 10px 24px 11px; flex-wrap: wrap; row-gap: 6px; }
    .hello-bar .hello-left{ flex-wrap: wrap; row-gap: 6px; }
    .hello-bar .hello-msg-group{ flex-wrap: wrap; row-gap: 4px; }
    .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; }
    /* Doubled class needed: header.css's `.site-header .nav-actions > a`
       (2 classes + 1 element) outranks a plain `.site-header .btn-demo`
       (2 classes) here, so the hide never actually applied — the button
       stayed visible, pushed nav-actions past the header's edge, and
       shoved the hamburger off-screen, causing horizontal scroll on
       every mobile width. `.btn-start` next to it already had 3 classes
       so its own hide rule wasn't affected. */
    .site-header .btn-demo.btn-demo{ display: none; }
    /* Still reachable as a full-width CTA inside the mobile-nav-panel —
       just decluttering the header row itself (matches index.html). */
    .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: 19px; line-height: 28px; }
    .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; }
    /* 3 fixed 140px badges + 28px gaps = 476px, wider than any phone/tablet
       container — the third badge (AICPA SOC 2) was getting cropped at the
       edge. Shrink + wrap so all three stay fully visible. */
    .trust-badges{ justify-content: center; flex-wrap: wrap; gap: 20px; row-gap: 16px; }
    .trust-badges img{ width: 100px; height: 100px; }
    .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{ padding: 8px 20px; 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: 36px 1fr 36px; gap: 12px; }
    .stories-arrow{ width: 36px; height: 36px; }
    .story-card{ flex: 0 0 280px; width: 280px; 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: 48px;
    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: 48px;
    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;
}
/* .is-scrolled — solid, no blur. */
.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: 400;
    font-size: 18px;
    line-height: 26px;
    color: #101828;
    margin: 0 0 14px;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    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;
}
/* 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; }
    .pricing-aside{ grid-template-rows: none; grid-template-columns: 1fr 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; }
}


/* ── 2. ask-me.css ────────────────────────────────────────── */
/* ════════════ Layout width (common with home.html) ════════════ */
.container{ max-width: 1500px; padding: 0 40px; }
.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 .hello-left{ gap: 10px; }
.hello-bar .hello-msg-group{ display: flex; align-items: center; gap: 20px; min-width: 0; }

/* Section rhythm — same family as home.html (96px standard) */
.hero-section{
    flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center;
    min-height: 0;
    padding: 80px 0 96px;
}
.trusted-section{ padding: 80px 0; background: #051A3C; }
.section-aiagent{ padding: 96px 0; }
.section-askcards{ padding: 96px 0; }
.section-features{ padding: 96px 0; }
.section-resources{ padding: 96px 0; }
.section-products-other{ padding: 0 0 96px; }
.section-trust{ padding: 96px 0; }
.trust-row h2{ font-size: 44px; line-height: 54px; letter-spacing: -0.6px; }
/* ════════════ Footer layout — ported from home.css ════════════ */
.site-footer{ padding-top: 64px; }

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

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

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

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

@media (max-width: 1160px){
    .footer-top{ gap: 32px; }
    .footer-top .brand-col{ flex: 0 0 380px; }
}
@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; }
}
@media (max-width: 480px){
    .site-footer .footer-nav{ grid-template-columns: 1fr; }
}

.trusted-row{
    display: flex;
    align-items: center;
    gap: 32px;
}

.trusted-section h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 28px;
    letter-spacing: -0.3px;
    color: var(--Base-White, #fcfcfc);
    text-align: left;
    margin: 0;
    flex: 0 0 320px;
    max-width: 320px;
}

.trusted-divider{
    flex: 0 0 1px;
    align-self: stretch;
    background: rgba(255,255,255,.22);
}

@media (max-width: 767px){
    .trusted-row{ flex-direction: column; align-items: stretch; gap: 20px; }
    .trusted-section h3{ text-align: center; max-width: none; flex: none; }
    .trusted-divider{ display: none; }
}

/* ── Trusted logos — simple continuous scroll (Ask Me only, not the index flip-grid) ── */
.trusted-marquee{
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.trusted-marquee__track{
    display: flex;
    align-items: center;
    width: max-content;
    gap: 14px;
    animation: trustedMarqueeScroll 70s linear infinite;
}

.trusted-marquee:hover .trusted-marquee__track{
    animation-play-state: paused;
}

@keyframes trustedMarqueeScroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}

.trusted-marquee__item{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    height: 96px;
    padding: 0 22px;
}

.trusted-marquee__item img{
    grid-area: 1 / 1;
    max-height: 42px;
    max-width: 126px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.trusted-marquee__item .tm-logo--active{ opacity: 0; }
.trusted-marquee__item:hover .tm-logo--inactive{ opacity: 0; }
.trusted-marquee__item:hover .tm-logo--active{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
    .trusted-marquee__track{ animation: none; }
}

.hero-section h1{ font-size: 56px; line-height: 64px; }

/* ════════════ Premium feature cards — dark glass on navy canvas ════════════ */
.section-features .feature-card{
    position: relative; overflow: hidden;
    background: linear-gradient(148deg, rgba(255,255,255,.06) 0%, rgba(14,72,165,.07) 60%, rgba(255,255,255,.02) 100%) !important;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px; padding: 30px 26px 28px; filter: none;
    box-shadow: 0 4px 24px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.06) inset;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s cubic-bezier(.22, .61, .36, 1), border-color .45s ease;
}
.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(119, 71, 182, .07) 40%, transparent 65%);
    opacity: .6; transition: opacity .45s ease;
}
.section-features .feature-card::after{
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; 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);
}
.section-features .feature-card > *{ position: relative; z-index: 1; }
.section-features .feature-card:hover{
    transform: translateY(-6px); border-color: rgba(255,255,255,.2);
    box-shadow: 0 8px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(18,182,248,.12);
}
.section-features .feature-card:hover::before{ opacity: 1; }
.section-features .feature-card:hover::after{ transform: scaleX(1); }
.section-features .feature-card .fc-icon{
    width: 50px; height: 50px; border-radius: 14px;
    background: linear-gradient(135deg, #0e48a5 0%, #2863c5 52%, #7747b6 100%);
    color: #ffffff; display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 8px 18px -8px rgba(40, 99, 195, .6);
    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(119, 71, 182, .7); }
.section-features .feature-card .fc-icon svg{ width: 24px; height: 24px; }
.section-features .feature-card h5{ color: #ffffff; letter-spacing: -.01em; font-family: 'Space Grotesk', sans-serif; font-weight: 400; font-size: 20px; line-height: 28px; margin: 0 0 8px; }
.section-features .feature-card p{ color: rgba(202,213,226,.75); font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 23px; margin: 0; }

/* ════════════ Nav logo + glow (common with home.html) ════════════ */
.site-header .brand-mark{ height: 44px; }
.site-header .nav-logo-img{
    height: 42px; width: auto; display: block;
    filter: drop-shadow(0 2px 10px rgba(3, 13, 30, .55));
}
.site-top{ border-bottom: none; }
.hello-bar{ border-bottom: none; }
.site-header{
    border-bottom: none;
    box-shadow:
        0 12px 28px -20px rgba(18, 182, 248, .30),
        0 6px 16px -14px rgba(85, 41, 142, .22);
}
.site-header .nav-links > li > a:hover{ color: rgba(255, 255, 255, .9); }

/* ── Hello bar motion ─────────────────────────────────── */
.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); }
}
.hello-bar .hello-message{
    background: linear-gradient(90deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.8) 35%, #fff 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; } }
.hello-bar .hello-cta svg{ animation: arrowNudge 1.6s ease-in-out infinite; }
@keyframes arrowNudge{ 0%, 100%{ transform: translateX(0); } 50%{ transform: translateX(4px); } }

/* ════════════ HERO STAGE — premium dark canvas (common theme) ════════════ */
.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: 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%);
}
.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); } }

.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{
    position: relative; overflow: hidden; background: transparent;
    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-stage .hero-section{ position: relative; z-index: 3; background: transparent; }


/* ════════════ Reveal-on-scroll utility ════════════
   Matches home.html's .reveal-block exactly (40px rise, 1.1s,
   cubic-bezier(.22,1,.36,1)) so every section enters the same way
   site-wide, not just within this page. */
.reveal{ opacity: 0; transform: translateY(40px); transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible{ opacity: 1; transform: none; }
.reveal-group.is-visible > *{ animation: riseIn .65s cubic-bezier(.22,.61,.36,1) backwards; }
.reveal-group.is-visible > *:nth-child(2){ animation-delay: .09s; }
.reveal-group.is-visible > *:nth-child(3){ animation-delay: .18s; }
.reveal-group.is-visible > *:nth-child(4){ animation-delay: .27s; }
.reveal-group.is-visible > *:nth-child(5){ animation-delay: .36s; }
@keyframes riseIn{ from{ opacity:0; transform: translateY(22px); } to{ opacity:1; transform:none; } }

/* ════════════ HERO — Ask Me (split 2-col layout) ════════════
   Compact, content-driven height like eula.html's pp-hero */
.hero-stage .hero-section{
    min-height: 0;
    padding: 72px 0;
    background: var(--Royal-Blue-Blue-900, #051A3C);
    overflow: hidden;
}
.hero-section .container{ position: relative; z-index: 2; }

/* ── Hero background — matches about-us.html pattern ── */

/* 56px crosshatch grid, fades from top (elliptical mask) */
/* ── Hero section background — exact port of eula.html pp-hero ── */
.hero-section .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(ellipse 120% 100% at 50% 0%, #000 0%, rgba(0,0,0,.55) 55%, transparent 85%);
            mask-image: radial-gradient(ellipse 120% 100% at 50% 0%, #000 0%, rgba(0,0,0,.55) 55%, transparent 85%);
}
.hero-section .hero-orbs {
    position: absolute; inset: 0; overflow: visible; z-index: 0; pointer-events: none;
}
.hero-section .hero-orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: .55;
    mix-blend-mode: screen; will-change: transform;
}
.hero-section .orb-violet {
    left: -4%; top: 5%; bottom: auto; width: 440px; height: 440px;
    background: radial-gradient(circle at 50% 50%, rgba(119,71,182,.95) 0%, rgba(85,41,142,.5) 45%, transparent 70%);
}
.hero-section .orb-cyan {
    left: 50%; top: 15%; bottom: auto; transform: translateX(-50%); width: 560px; height: 440px;
    background: radial-gradient(circle at 50% 50%, rgba(28,169,201,.85) 0%, rgba(18,182,248,.4) 45%, transparent 70%);
}
.hero-section .orb-blue {
    right: -4%; top: 5%; bottom: auto; width: 440px; height: 440px;
    background: radial-gradient(circle at 50% 50%, rgba(64,117,201,.9) 0%, rgba(14,72,165,.45) 45%, transparent 70%);
}
.hero-section .hero-particles {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.pp-hero__glow {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 760px; height: 340px; z-index: 2;
    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) — matches index.html's hero-grain */
.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;
}

/* 2-column grid: text left, visual right */
.hero-inner{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* ── Text column ── */
.hero-text-col{
    display: flex; flex-direction: column;
    align-items: flex-start; gap: 18px;
    text-align: left;
}

/* Eyebrow — dark section tokens per design guidelines */
.hero-section .hero-eyebrow{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: 50px;
    background: rgba(252,252,252,.06);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
    color: #67d3ff;
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11px; line-height: 16px;
    letter-spacing: 1.6px; text-transform: uppercase;
}
.hero-section .hero-eyebrow svg{ flex-shrink: 0; }

.hero-section h1{
    margin: 0; letter-spacing: -0.8px;
    font-size: 56px; line-height: 64px;
}
.hero-section .hero-sub{
    /* Subpage convention (matches about-us hero desc): 17px @ 72% white —
       the 20px/full-white variant is homepage-hero-only. */
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 17px; line-height: 28px;
    color: rgba(252,252,252,.72); margin: 0;
}

/* CTA row */
.hero-cta-row{
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.hero-btn-outline{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 28px; min-height: 48px; border-radius: 6px;
    /* Frosted-glass ghost fill — matches .btn-primary--ghost (releases.html
       "View Latest") instead of a fully transparent outline. */
    border: 1px solid rgba(255,255,255,.14); background-color: rgba(255,255,255,.06);
    color: #fcfcfc; font-family: 'Inter', sans-serif;
    font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.hero-btn-outline:hover{ background-color: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #12b6f8; transform: translateY(-1px); }
.hero-btn-outline svg{ transition: transform .22s ease; }
.hero-btn-outline:hover svg{ transform: translateX(3px); }

/* ── Visual column ── */
.hero-visual-col{
    position: relative;
}
.hero-visual-glow{
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 85%; height: 65%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(40,99,195,.45) 0%, rgba(119,71,182,.25) 50%, transparent 80%);
    filter: blur(70px);
    pointer-events: none; z-index: 0;
}
.hero-visual-frame{
    position: relative; z-index: 1;
    border-radius: 0; overflow: hidden;
    border: 1px solid rgba(159,186,228,.22);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.06),
        0 32px 80px -20px rgba(14,72,165,.45),
        0 8px 20px rgba(0,0,0,.3);
    animation: heroFloat 6.5s ease-in-out 1s infinite alternate;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce){ .hero-visual-frame{ animation: none; } }
.hero-visual-frame img{
    display: block; width: 100%; height: auto;
}
/* Lottie container has no intrinsic size like an <img> did, so it needs
   an explicit ratio (matches the animation's native 1440x832 canvas) or
   it'd collapse to 0 height. */
.hero-visual-frame #heroAskMeLottie{
    width: 100%; aspect-ratio: 1440 / 832;
}
.hero-visual-frame #heroAskMeLottie svg{ display: block; }

/* Responsive */
@media (max-width: 991px){
    .hero-inner{
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }
    .hero-text-col{ align-items: center; }
    .hero-section h1{ font-size: 44px; line-height: 54px; }
}
@media (max-width: 575px){
    .hero-stage .hero-section{ padding: 56px 0 64px; }
    .hero-section h1{ font-size: 34px; line-height: 44px; }
}

/* ════════════ YOUR VERY OWN CONVERSATIONAL AI AGENT (light, white cards) ════════════ */
.section-aiagent{ position: relative; text-align: center; background: #ffffff; }
.section-aiagent .container{ position: relative; z-index: 1; }
.section-aiagent .ai-eyebrow{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px; border-radius: 50px;
    background: rgba(40, 99, 195, .08);
    border: 1px solid rgba(40, 99, 195, .22);
    color: #2863c3;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase;
}
.section-aiagent .ai-eyebrow .ae-dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, #2863c3 0%, #7747b6 100%);
    box-shadow: 0 0 0 3px rgba(40, 99, 195, .14);
}
.section-aiagent h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; color: var(--cool-101828, #101828);
    margin: 18px 0 14px; letter-spacing: -0.6px;
}
h2 .ah-accent, h3 .ah-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;
}
.ah-accent-white{
    background-image: none !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}
.section-aiagent .section-sub{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 17px; line-height: 28px; color: #4a5568;
    max-width: 820px; margin: 0 auto 56px;
}
.aiagent-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.aiagent-item{
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 14px;
    background: #ffffff;
    border: 1px solid var(--cool-e5e7eb, #e5e7eb);
    border-radius: 20px; padding: 32px 28px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 30px -18px rgba(14, 72, 165, .16);
    transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .45s ease, box-shadow .45s ease;
}
.aiagent-item::before{
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(130% 80% at 100% 0%, rgba(119, 71, 182, .10) 0%, transparent 60%);
    opacity: 0; transition: opacity .45s ease;
}
.aiagent-item:hover{ transform: translateY(-6px); border-color: rgba(85, 41, 142, .22); box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 24px 48px -20px rgba(40, 99, 195, .34); }
.aiagent-item:hover::before{ opacity: 1; }
.aiagent-item > *{ position: relative; z-index: 1; }
.aiagent-item .ai-icon{
    width: 54px; height: 54px; 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);
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 54px;
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.aiagent-item:hover .ai-icon{ transform: translateY(-2px) scale(1.06); }
.aiagent-item .ai-icon svg{ width: 26px; height: 26px; }
.aiagent-item h5{ font-family:'Space Grotesk',serif; font-weight:400; font-size:21px; line-height:30px; color: var(--cool-101828, #101828); margin: 4px 0 0; letter-spacing:-.01em; }
.aiagent-item p{ font-family:'Inter',sans-serif; font-weight:400; font-size:15px; line-height:25px; color: #4a5568; margin: 0; }

/* ════════════ JUST ASK — stepper showcase (dark) ════════════ */
.section-askcards{
    background: linear-gradient(160deg, #071e45 0%, #051a3c 40%, #071d42 75%, #0a2150 100%);
    position: relative;
    overflow: hidden;
    padding: 96px 0;
}
.section-askcards::before{
    content: '';
    position: absolute;
    width: 860px; height: 760px;
    left: -180px; top: -220px;
    background: radial-gradient(ellipse, rgba(119,71,182,.28) 0%, rgba(40,99,197,.12) 45%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.section-askcards::after{
    content: '';
    position: absolute;
    width: 720px; height: 640px;
    right: -100px; bottom: -180px;
    background: radial-gradient(ellipse, rgba(18,182,248,.18) 0%, rgba(40,99,197,.12) 45%, transparent 68%);
    pointer-events: none; z-index: 0;
}
.section-askcards .container{ position: relative; z-index: 1; }

/* Centred section header — above the two-column grid */
.ja-intro{
    display: flex; flex-direction: column;
    align-items: center; gap: 18px;
    text-align: center;
    margin-bottom: 56px;
}

.ja-eyebrow{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 50px;
    background: rgba(252,252,252,.06);
    border: 1px solid rgba(159,186,228,.18);
    color: rgba(202,213,226,.9);
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11px; line-height: 16px;
    letter-spacing: .08em; text-transform: uppercase;
}
.ja-eyebrow svg{ color: #12b6f8; flex-shrink: 0; }

.ja-heading{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; letter-spacing: -.01em;
    color: #fff; margin: 0;
    max-width: 680px;
}

.ja-accent{
    display: block;
    background: linear-gradient(90deg, #12b6f8 0%, #2863c5 48%, #7747b6 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* Two-column grid — stepper left, panel right */
.ja-wrap{
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 56px;
    align-items: stretch; /* both columns always the same height */
}

/* ── Left column: stepper only ── */
.ja-col-left{
    position: sticky; top: 40px;
    display: flex; flex-direction: column;
}

/* ── Stepper ── */
.ja-stepper{
    flex: 1; /* fills the full left-column height */
    position: relative;
    display: flex; flex-direction: column;
}

.ja-line-track{
    position: absolute;
    left: 15px; top: 20px; bottom: 20px;
    width: 1px;
    background: rgba(255,255,255,.09);
}

.ja-line-fill{
    position: absolute; top: 0; left: 0;
    width: 100%; height: 5.5%;
    background: linear-gradient(to bottom, #12b6f8 0%, #2863c5 50%, #7747b6 100%);
    transition: height .45s cubic-bezier(.22,.61,.36,1);
    border-radius: 1px;
}

.ja-step{
    position: relative; z-index: 1;
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 0; padding-left: 0;
    background: none; border: none; cursor: pointer;
    text-align: left; width: 100%;
}
.ja-step:focus-visible{ outline: 2px solid rgba(18,182,248,.5); outline-offset: 2px; border-radius: 6px; }

.ja-dot{
    flex-shrink: 0;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(14,72,165,.25);
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.45);
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}

.ja-step.is-active .ja-dot{
    background: linear-gradient(135deg, #12b6f8 0%, #2863c5 50%, #7747b6 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(18,182,248,.14), 0 6px 18px -4px rgba(119,71,182,.5);
}

.ja-step:hover:not(.is-active) .ja-dot{
    border-color: rgba(255,255,255,.28);
    color: rgba(255,255,255,.65);
}

.ja-step-text{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 22px;
    color: rgba(255,255,255,.35);
    padding-top: 5px;
    transition: color .25s ease, font-weight .2s ease;
}

.ja-step.is-active .ja-step-text{
    color: #fff; font-weight: 600;
}

.ja-step:hover:not(.is-active) .ja-step-text{
    color: rgba(255,255,255,.65);
}

/* ── Right column ── */
.ja-col-right{
    min-width: 0;
    display: flex; flex-direction: column;
}

/* Individual panel */
.ja-panel{
    display: none;
    flex-direction: column;
    gap: 0;
}

.ja-panel.is-active{
    display: flex;
    flex: 1; /* fills .ja-col-right so both columns match height */
    animation: jaPanelIn .35s cubic-bezier(.22,.61,.36,1);
}

@keyframes jaPanelIn{
    from{ opacity: 0; transform: translateY(10px); }
    to{   opacity: 1; transform: none; }
}

/* Glass card wrapping all panel content */
.ja-panel-header,
.ja-panel-content,
.ja-panel-visual{
    position: relative; z-index: 1;
}

/* Glass card container */
.ja-panel > *{
    background: none;
}

/* Wrapper to apply the card shell */
.ja-panel{
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(148deg, rgba(255,255,255,.07) 0%, rgba(14,72,165,.08) 60%, rgba(255,255,255,.02) 100%);
    overflow: hidden;
    padding: 36px 36px 0;
    gap: 28px;
}

/* Inner ambient glows (pseudo on the panel) */
.ja-panel::before{
    content: '';
    position: absolute; top: -90px; right: -60px;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(119,71,182,.22) 0%, transparent 68%);
    filter: blur(60px); pointer-events: none; z-index: 0;
}

.ja-panel::after{
    content: '';
    position: absolute; bottom: -80px; left: -50px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(18,182,248,.14) 0%, transparent 68%);
    filter: blur(54px); pointer-events: none; z-index: 0;
}

/* Panel header row */
.ja-panel-header{
    display: flex; align-items: center; justify-content: space-between;
}

.ja-panel-meta{
    display: flex; align-items: center; gap: 12px;
}

.ja-panel-icon{
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, #12b6f8 0%, #2863c5 50%, #7747b6 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 6px 18px -4px rgba(119,71,182,.5);
}

.ja-panel-counter{
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(144,161,185,.85);
}

.ja-demo-btn{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 50px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.88);
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 13px; line-height: 1;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.ja-demo-btn:hover{
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.22);
    color: #fff;
}

.ja-demo-btn svg{ flex-shrink: 0; }

/* Panel text content */
.ja-panel-content{
    display: flex; flex-direction: column; gap: 10px;
}

.ja-panel-title{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 28px; line-height: 37px; letter-spacing: -.01em;
    color: #fff; margin: 0;
}

.ja-panel-desc{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15px; line-height: 26px;
    color: rgba(202,213,226,.8); margin: 0;
    max-width: 640px;
}

/* Panel visual — grows to fit main image naturally; min-height ensures portrait floats fit */
.ja-panel-visual{
    position: relative;
    flex: 1 1 auto;
    min-height: 320px;
    margin-top: 4px;
    /* no overflow:hidden here — the panel card's own overflow:hidden handles boundary clipping */
}

/* ── Main screenshot — in-flow so container grows to its natural height ── */
.ja-vis-main{
    position: relative;   /* in-flow: sets container height to image height */
    display: block;
    width: 76%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(18,182,248,.65);
    box-shadow:
        0 0 0 1px rgba(18,182,248,.12),
        0 0 26px rgba(18,182,248,.45),
        0 0 80px rgba(18,182,248,.12),
        0 22px 64px rgba(0,0,0,.72);
    z-index: 1;
}

/* ── Float screenshot — absolute, overlaps right side of main image ── */
.ja-vis-float{
    position: absolute;
    top: 18%; right: 2%;
    width: 48%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(119,71,182,.62);
    box-shadow:
        0 0 0 1px rgba(119,71,182,.12),
        0 0 22px rgba(119,71,182,.42),
        0 0 68px rgba(119,71,182,.1),
        0 16px 48px rgba(0,0,0,.68);
    z-index: 2;
}

/* Portrait float — narrow width keeps it short enough to sit within the 320px min visual area */
.ja-vis-float--portrait{
    top: auto;
    bottom: 0; right: 3%;
    width: 26%;
}

/* Reveal + idle float animations */
.ja-panel.is-active .ja-vis-main{
    animation: jaImgReveal .5s cubic-bezier(.22,.61,.36,1) backwards,
               jaFloat1 8s ease-in-out .6s infinite alternate;
}
.ja-panel.is-active .ja-vis-float{
    animation: jaImgReveal .5s cubic-bezier(.22,.61,.36,1) .12s backwards,
               jaFloat2 9s ease-in-out .9s infinite alternate;
}

@keyframes jaImgReveal{
    from{ opacity: 0; transform: translateY(14px); }
    to{   opacity: 1; transform: none; }
}
@keyframes jaFloat1{
    0%  { transform: translateY(0); }
    100%{ transform: translateY(-5px); }
}
@keyframes jaFloat2{
    0%  { transform: translateY(0); }
    100%{ transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce){
    .ja-panel.is-active .ja-vis-main,
    .ja-panel.is-active .ja-vis-float,
    .ja-panel.is-active .ja-vis-float2,
    .ja-panel.is-active .ja-vis-nlq-phone,
    .ja-panel.is-active .ja-vis-nlq-chart,
    .ja-panel.is-active .ja-vis-rca-top,
    .ja-panel.is-active .ja-vis-rca-q1,
    .ja-panel.is-active .ja-vis-rca-q2,
    .ja-panel.is-active .ja-vis-rca-bot{ animation: none; }
}

/* ── NLQ panel — phone portrait centred + chart card top-right ── */
.ja-panel-visual--nlq{
    min-height: 420px;
    border-radius: 12px;
    border: 1px solid rgba(18,182,248,.3);
    background: rgba(6,13,30,.55);
    box-shadow:
        0 0 0 1px rgba(18,182,248,.08),
        0 0 24px rgba(18,182,248,.12),
        0 16px 48px rgba(0,0,0,.6);
    overflow: hidden;
}

.ja-vis-nlq-phone{
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    height: 88%;
    width: auto;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 20px rgba(18,182,248,.25);
    z-index: 1;
}

.ja-vis-nlq-chart{
    position: absolute;
    top: 10%; right: 6%;
    width: 38%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(119,71,182,.55);
    box-shadow:
        0 0 0 1px rgba(119,71,182,.1),
        0 0 18px rgba(119,71,182,.35),
        0 8px 24px rgba(0,0,0,.5);
    z-index: 2;
}

/* ── Triple panel (Insights) — main in-flow + two absolute floats ── */
.ja-panel-visual--triple{
    /* main is in-flow (same as base), floats overlap; panel overflow:hidden clips bounds */
}

.ja-vis-float2{
    position: absolute;
    top: 22%; left: 2%;
    width: 44%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(18,182,248,.5);
    box-shadow:
        0 0 0 1px rgba(18,182,248,.1),
        0 0 20px rgba(18,182,248,.3),
        0 0 60px rgba(18,182,248,.08),
        0 14px 40px rgba(0,0,0,.65);
    z-index: 3;
}

/* ── RCA panel — 4 screenshots in conversation flow ── */
.ja-panel-visual--rca{
    min-height: 420px;
    overflow: hidden;
}

.ja-vis-rca-top{
    position: absolute;
    top: 0; left: 0;
    width: 80%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(18,182,248,.6);
    box-shadow:
        0 0 0 1px rgba(18,182,248,.1),
        0 0 24px rgba(18,182,248,.4),
        0 20px 56px rgba(0,0,0,.7);
    z-index: 1;
}

.ja-vis-rca-q1{
    position: absolute;
    top: 8%; right: 2%;
    width: 28%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(119,71,182,.5);
    box-shadow: 0 0 14px rgba(119,71,182,.3), 0 6px 20px rgba(0,0,0,.5);
    z-index: 2;
}

.ja-vis-rca-q2{
    position: absolute;
    top: 32%; right: 2%;
    width: 28%;
    height: auto;
    border-radius: 6px;
    border: 1px solid rgba(119,71,182,.5);
    box-shadow: 0 0 14px rgba(119,71,182,.3), 0 6px 20px rgba(0,0,0,.5);
    z-index: 2;
}

.ja-vis-rca-bot{
    position: absolute;
    bottom: 0; left: 8%;
    width: 62%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(18,182,248,.45);
    box-shadow:
        0 0 0 1px rgba(18,182,248,.08),
        0 0 20px rgba(18,182,248,.3),
        0 12px 36px rgba(0,0,0,.65);
    z-index: 3;
}

/* Multi-image panels (DIY, AI Agents) — same flex-grow, no fixed aspect-ratio */
.ja-panel-visual--multi,
.ja-panel-visual--agents{
    border-radius: 12px;
    border: 1px solid rgba(119,71,182,.45);
    background: rgba(6,13,30,.55);
    box-shadow:
        0 0 0 1px rgba(119,71,182,.12),
        0 0 24px rgba(119,71,182,.2),
        0 16px 48px rgba(0,0,0,.6);
    overflow: hidden;
}

.ja-vis-multi{
    position: absolute;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25), 0 0 10px rgba(18,182,248,.12);
    height: auto;
}

.ja-vis-multi--tl{ left: 8%; top: 8%; width: 50%; }
.ja-vis-multi--bl{ left: 8%; bottom: 8%; width: 50%; }
.ja-vis-multi--tr{ right: 6%; top: 18%; width: 34%; }
.ja-vis-multi--br{ right: 6%; bottom: 12%; width: 34%; }

/* Reveal animations on new image variants */
.ja-panel.is-active .ja-vis-float2{
    animation: jaImgReveal .5s cubic-bezier(.22,.61,.36,1) .18s backwards,
               jaFloat1 8s ease-in-out 1s infinite alternate;
}
.ja-panel.is-active .ja-vis-nlq-phone{
    animation: jaImgReveal .5s cubic-bezier(.22,.61,.36,1) backwards,
               jaFloat1 9s ease-in-out .6s infinite alternate;
}
.ja-panel.is-active .ja-vis-nlq-chart{
    animation: jaImgReveal .5s cubic-bezier(.22,.61,.36,1) .14s backwards,
               jaFloat2 8s ease-in-out .9s infinite alternate;
}
.ja-panel.is-active .ja-vis-rca-top{
    animation: jaImgReveal .5s cubic-bezier(.22,.61,.36,1) backwards,
               jaFloat1 9s ease-in-out .6s infinite alternate;
}
.ja-panel.is-active .ja-vis-rca-q1{
    animation: jaImgReveal .45s cubic-bezier(.22,.61,.36,1) .1s backwards;
}
.ja-panel.is-active .ja-vis-rca-q2{
    animation: jaImgReveal .45s cubic-bezier(.22,.61,.36,1) .2s backwards;
}
.ja-panel.is-active .ja-vis-rca-bot{
    animation: jaImgReveal .5s cubic-bezier(.22,.61,.36,1) .25s backwards,
               jaFloat2 8s ease-in-out 1s infinite alternate;
}

/* ── Responsive ── */
@media (max-width: 1199px){
    .ja-wrap{ grid-template-columns: 320px 1fr; gap: 48px; }
    .ja-heading{ font-size: 36px; line-height: 46px; }
}
@media (max-width: 1023px){
    .ja-wrap{ grid-template-columns: 1fr; gap: 40px; align-items: start; }
    .ja-col-left{ position: static; }
    .ja-stepper{ flex: none; flex-direction: row; flex-wrap: wrap; gap: 0; padding-left: 0; }
    .ja-line-track{ display: none; }
    .ja-step{ flex: 0 0 auto; padding: 8px 14px; border-radius: 50px; }
    .ja-step.is-active{ background: rgba(255,255,255,.06); }
    .ja-dot{ width: 26px; height: 26px; }
    .ja-step-text{ font-size: 13px; padding-top: 3px; }
    .ja-panel-title{ font-size: 24px; line-height: 33px; }
    .ja-panel.is-active{ flex: none; }
    .ja-panel-visual--multi,
    .ja-panel-visual--agents,
    .ja-panel-visual--nlq,
    .ja-panel-visual--rca{ min-height: 280px; }
}
@media (max-width: 767px){
    .section-askcards{ padding: 72px 0; }
    .ja-heading{ font-size: 28px; line-height: 38px; }
    .ja-step-text{ font-size: 12px; }
    .ja-panel{ padding: 28px 24px 0; }
    .ja-panel-title{ font-size: 21px; line-height: 30px; }
    .ja-panel-desc{ font-size: 14px; line-height: 24px; }
    .ja-vis-main{ width: 90%; }
    .ja-vis-float{ width: 56%; top: 16%; }
    .ja-vis-float--portrait{ width: 30%; }
    .ja-panel-visual--multi,
    .ja-panel-visual--agents,
    .ja-panel-visual--nlq,
    .ja-panel-visual--rca{ min-height: 240px; }
}

/* ════════════ FEATURES — no background, inherits page background ════════════ */
.section-features{
    position: relative;
    background: transparent !important;
}
.section-features::before,
.section-features::after{
    content: none !important;
    display: none !important;
    background: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.section-features .container{ position: relative; z-index: 1; }
.section-features .features-head{ display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 44px; }
.section-features .features-head h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; color: #ffffff;
    margin: 0; letter-spacing: -.01em; text-align: center;
}
.section-features .features-viewport{
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    padding: 8px 0;
}
.section-features .features-track{
    display: flex; gap: 20px;
    width: max-content;
    animation: featuresScroll 38s linear infinite;
    will-change: transform;
}
.section-features .features-viewport:hover .features-track{ animation-play-state: paused; }
.section-features .feature-card{ flex: 0 0 313px; width: 313px; }
@keyframes featuresScroll{
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
    .section-features .features-track{ animation: none; }
}

/* ════════════ RESOURCES ════════════ */
.section-resources{
    position: relative; background: #ffffff;
    --ss-accent: var(--Royal-Blue-Blue-500, #0e48a5);
    --ss-accent-secondary: var(--Violet-Violet-450, #7747b6);
    --ss-accent-soft: rgba(40, 99, 195, .08);
    --ss-accent-border: rgba(40, 99, 195, .25);
    --ss-accent-glow-a: rgba(40, 99, 195, .20);
    --ss-accent-glow-b: rgba(119, 71, 182, .12);
}
.section-resources .container{ position: relative; z-index: 1; }
.section-resources h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px;
    color: var(--cool-101828, #101828);
    text-align: center; margin: 0 auto 56px; letter-spacing: -.01em;
}
.resources-grid{
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px; max-width: 1120px; margin: 0 auto;
}
.section-resources .story-card{
    flex: initial; width: auto;
    opacity: 1; translate: 0 0; transform: none;
    animation: none;
    border: 0.5px solid var(--Map-Grey, #eaeaea);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.section-resources .story-card:hover{ transform: translateY(-4px); scale: 1; }
.section-resources .story-card .story-image{
    height: 200px;
    background: linear-gradient(135deg, rgba(40, 99, 195, .05) 0%, #ffffff 100%);
}
.section-resources .story-card .story-body{
    padding: 16px;
    gap: 8px; flex: initial;
}
.section-resources .story-eyebrow{
    color: var(--Royal-Blue-Blue-500, #0e48a5);
    text-transform: none; letter-spacing: 0;
    font-weight: 400; font-size: 12px; line-height: 16px;
    margin: 0; gap: 8px; align-items: center;
}
.section-resources .story-eyebrow .se-sep{
    width: 1px; height: 12px;
    background: var(--Royal-Blue-Blue-500, #0e48a5);
    opacity: .55;
}
.section-resources .story-title{
    font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: 15px; line-height: 25px;
    color: var(--Absolute-Black, #242424);
    letter-spacing: 0; margin: 0;
    flex: initial;
}

/* ════════════ OTHER PRODUCTS — horizontal split rows ════════════ */
.section-products-other{
    position: relative; z-index: 3;
    background: #ffffff;
    padding: 96px 0;
}
.section-products-other .container{ position: relative; z-index: 1; }

.op-intro{ text-align: center; margin-bottom: 64px; }
.op-intro h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; letter-spacing: -.01em;
    color: var(--cool-101828, #101828); margin: 0 0 12px;
}
.op-intro p{
    font-family: 'Inter', sans-serif; font-size: 16px;
    line-height: 26px; color: #4a5568;
    margin: 0 auto; max-width: 560px;
}

.op-cards{
    display: flex; flex-direction: column;
    gap: 28px;
}

.op-card{
    display: flex; flex-direction: row;
    border-radius: 20px; overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 1px 3px rgba(16,24,40,.04), 0 8px 28px -8px rgba(16,24,40,.09);
    transition: box-shadow .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
    min-height: 340px;
}
.op-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(16,24,40,.05), 0 24px 52px -12px rgba(16,24,40,.13);
}

.op-card--magnet{ flex-direction: row-reverse; }

.op-visual{
    position: relative; overflow: hidden;
    flex: 0 0 46%;
    display: flex; align-items: center; justify-content: center;
    padding: 44px 36px;
}
.op-card--insights .op-visual{
    background: linear-gradient(145deg, #d8e8fb 0%, #e8f2ff 45%, #f3f8ff 100%);
}
.op-card--magnet .op-visual{
    background: linear-gradient(145deg, #c2eaf6 0%, #d8f3fb 45%, #edfafd 100%);
}
.op-visual::before{
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(circle, rgba(40,99,195,.14) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, #000 20%, transparent 100%);
            mask-image: radial-gradient(ellipse 90% 85% at 50% 50%, #000 20%, transparent 100%);
}
.op-card--magnet .op-visual::before{
    background-image: radial-gradient(circle, rgba(28,169,201,.17) 1px, transparent 1px);
}

.op-card-img{
    position: relative; z-index: 1;
    width: 84%; max-width: 420px; min-width: 180px;
    height: auto; display: block;
    filter: drop-shadow(0 16px 36px rgba(40,99,195,.20));
    animation: opImgFloat 6.5s ease-in-out infinite alternate;
    will-change: translate;
}
.op-card--magnet .op-card-img{
    filter: drop-shadow(0 16px 36px rgba(28,169,201,.22));
}
@keyframes opImgFloat{
    0%   { translate: 0 -9px; }
    100% { translate: 0  9px; }
}
@media (prefers-reduced-motion: reduce){ .op-card-img{ animation: none; } }

.op-body{
    flex: 1; min-width: 0;
    padding: 52px 56px;
    display: flex; flex-direction: column;
    justify-content: center;
}
.op-body-top{
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 24px;
}
.op-icon{
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.op-card--insights .op-icon{
    background: linear-gradient(135deg, #0e48a5 0%, #2863c5 100%);
    box-shadow: 0 6px 18px -6px rgba(40,99,195,.48);
}
.op-card--magnet .op-icon{
    background: linear-gradient(135deg, #12b6f8 0%, #1ca9c9 100%);
    box-shadow: 0 6px 18px -6px rgba(28,169,201,.48);
}
.op-icon svg{ width: 22px; height: 22px; color: #fff; }

.op-pill{
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11px; line-height: 1; letter-spacing: .12em;
    text-transform: uppercase; padding: 5px 12px; border-radius: 50px;
}
.op-card--insights .op-pill{ color: #2863c3; background: rgba(40,99,195,.08); border: 1px solid rgba(40,99,195,.20); }
.op-card--magnet  .op-pill{ color: #1ca9c9; background: rgba(28,169,201,.08); border: 1px solid rgba(28,169,201,.20); }
.op-pill::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.op-card--insights .op-pill::before{ background: #2863c3; }
.op-card--magnet  .op-pill::before{ background: #1ca9c9; }

.op-body h3{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 28px; line-height: 36px; letter-spacing: -0.3px;
    color: #101828; margin: 0 0 12px;
}
.op-body > p{
    font-family: 'Inter', sans-serif; font-size: 14.5px;
    line-height: 25px; color: #4a5568; margin: 0 0 22px;
}

.op-feats{
    list-style: none; margin: 0 0 28px; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.op-feats li{
    display: flex; align-items: center; gap: 10px;
    font-family: 'Inter', sans-serif; font-size: 13.5px;
    line-height: 20px; color: #344054;
}
.op-feats li::before{
    content: ""; flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%;
    background-size: 11px; background-position: center; background-repeat: no-repeat;
}
.op-card--insights .op-feats li::before{
    background-color: rgba(40,99,195,.10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%232863c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1.5 5 4 7.5 8.5 2'/%3E%3C/svg%3E");
}
.op-card--magnet .op-feats li::before{
    background-color: rgba(28,169,201,.10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%231ca9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1.5 5 4 7.5 8.5 2'/%3E%3C/svg%3E");
}

.op-body .btn-primary{ align-self: flex-start; }

@media (max-width: 991px){
    .op-card, .op-card--magnet{ flex-direction: column; }
    .op-visual{ flex: 0 0 auto; height: 260px; padding: 32px 24px; }
    .op-body{ padding: 36px 32px 40px; justify-content: flex-start; }
}
@media (max-width: 575px){
    .op-intro h2{ font-size: 26px; line-height: 36px; }
    .op-visual{ height: 220px; }
    .op-body{ padding: 28px 24px 32px; }
    .op-body h3{ font-size: 20px; line-height: 28px; }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
    .hero-orb, .hero-particles .particle{ animation: none; }
    .hero-orbs{ transform: none !important; }
    .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); }
    .dp-illus-core{ transition: opacity .3s ease; }
    .qs-shot{ transition: none !important; }
    .mcp-drag-shot{ transition: opacity .2s ease !important; clip-path: none !important; }
    .mcp-drag-info.is-active .mcp-drag-info-head,
    .mcp-drag-info.is-active p,
    .mcp-drag-info.is-active .mcp-drag-more{ animation: none !important; }
    .mcp-drag-card{ transition: none !important; }
    .mcp-drag-tilt{ transition: none !important; }
    .mcp-drag-progress-fill{ transition: none !important; }
    .mcp-drag-more{ transition: none !important; }
    .am-fc-grid{ transition: none !important; }
    .reveal, .reveal-group.is-visible > *{ opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}
@media (max-width: 1199px){
    .resources-grid{ grid-template-columns: repeat(2, 1fr); }
}
@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; }
    .trusted-section{ padding: 56px 0; }
    .section-aiagent, .section-askcards, .section-features, .section-resources{ padding: 72px 0; }
    .section-products-other{ padding: 0 0 72px; }
    .section-trust{ padding: 72px 0; }
    .hero-section h1{ font-size: 44px; line-height: 54px; }
    .trusted-section h3{ font-size: 24px; line-height: 32px; white-space: normal; }
    .section-aiagent h2,
    .section-features .features-head h2,
    .section-resources h2, .section-products-other h2,
    .trust-row h2{ font-size: 34px; line-height: 44px; }
    .ja-heading{ font-size: 28px; line-height: 38px; }
    .section-features .features-head{ flex-direction: column; align-items: flex-start; }
    .aiagent-grid{ grid-template-columns: 1fr; gap: 20px; }
    .resources-grid{ grid-template-columns: 1fr; }
    .section-products-other .products-head{ flex-direction: column; align-items: flex-start; }
    .section-products-other .product-stage{ grid-template-columns: 1fr; gap: 36px; }
    .section-products-other .products-title{ font-size: 28px; line-height: 38px; }
}
@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; }
    .trusted-section h3{ font-size: 20px; line-height: 28px; white-space: normal; }
    .section-aiagent h2,
    .section-features .features-head h2,
    .section-resources h2,
    .section-products-other h2,
    .trust-row h2{ font-size: 26px; line-height: 36px; }
    .ja-heading{ font-size: 24px; line-height: 34px; }
    .ja-showcase-title{ font-size: 21px; line-height: 29px; }
    .ja-showcase-desc{ font-size: 14px; line-height: 24px; }
}

/* ════════════════════════════════════════════════════════════════
   STATS (4-col modifier on existing aiagent-grid)
   ════════════════════════════════════════════════════════════════ */
.aiagent-grid--4col{ grid-template-columns: repeat(4, 1fr); }
.stat-item{ text-align: center; align-items: center; gap: 10px; }
.section-aiagent .section-sub{ margin: 0 auto 60px; } /* fix: was 56px */
.stat-number{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 52px; line-height: 1;
    background: linear-gradient(135deg, #7747b6 0%, #2863c3 50%, #1ca9c9 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    letter-spacing: -1px; display: block;
}
/* Same visual treatment as .stat-number so all stat tiles match */
.stat-label{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 52px; line-height: 1;
    background: linear-gradient(135deg, #7747b6 0%, #2863c3 50%, #1ca9c9 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    letter-spacing: -1px; display: block;
}
.stat-item p{ font-size: 14px; color: #4a5568; margin: 0; text-align: center; }

/* ── Stats: centered intro + 4-col stat row ── */
.section-stats{ text-align: center; }
.stats-intro-tile{
    text-align: center; max-width: 680px; margin: 0 auto 52px;
}
.stats-intro-tile .ai-eyebrow{ margin-bottom: 18px; }
.stats-intro-tile h2{ margin: 0 0 16px; }
.stats-intro-tile .section-sub{ margin: 0 auto; max-width: 560px; }
.stats-tiles{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.stat-tile{
    background: #ffffff; border: 1px solid var(--cool-e5e7eb, #e5e7eb);
    border-radius: 20px; padding: 32px 24px; text-align: center;
    display: flex; flex-direction: column; gap: 10px; align-items: center;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 30px -18px rgba(14,72,165,.16);
    transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .3s ease;
}
.stat-tile:hover{
    transform: translateY(-6px); border-color: rgba(85,41,142,.22);
    box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 24px 48px -20px rgba(40,99,195,.30);
}
.stat-tile .stat-number,
.stat-tile .stat-label{ text-align: center; }
.stat-tile p{ font-size: 14px; line-height: 22px; color: #4a5568; margin: 0; text-align: center; }

/* ════════════════════════════════════════════════════════════════
   DATA POOL SECTION (light, Scroll 5)
   ════════════════════════════════════════════════════════════════ */
.section-datapool{
    position: relative; overflow: hidden;
    background: #ffffff;
    padding: 96px 0;
    text-align: center;
}
/* White section dot-grid per §9: rgba(40,99,195,.14), 24px */
.section-datapool::before{
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(40,99,195,.14) 1px, transparent 1px);
    background-size: 24px 24px;
}
.section-datapool .container{ position: relative; z-index: 1; }
/* Soft light-tint orbs */
.dp-orb{
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    filter: blur(80px);
}
.dp-orb--left{
    width: 640px; height: 560px; left: -200px; top: -120px;
    background: radial-gradient(ellipse, rgba(119,71,182,.08) 0%, transparent 70%);
}
.dp-orb--right{
    width: 520px; height: 460px; right: -140px; bottom: -100px;
    background: radial-gradient(ellipse, rgba(18,182,248,.07) 0%, transparent 70%);
}
/* Light-section eyebrow override (base .dp-eyebrow stays dark for MCP/FB) */

/* Light-section eyebrow override (base .dp-eyebrow stays dark for MCP/FB) */
.section-datapool .dp-eyebrow{
    background: #ffffff;
    border-color: rgba(40,99,195,.14);
    color: var(--Royal-Blue-Blue-500, #0e48a5);
    backdrop-filter: none;
}
.section-datapool .dp-dot{
    background: linear-gradient(135deg, #2863c3 0%, #7747b6 100%);
    box-shadow: 0 0 0 3px rgba(40,99,195,.14);
}

/* Dark-section eyebrow — per DESIGN_GUIDELINES §12.1:
   color #67d3ff, border rgba(255,255,255,.14), backdrop-filter blur(6px),
   letter-spacing 1.6px, padding 7px 16px */
.dp-eyebrow{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: 50px;
    background: rgba(252,252,252,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: #67d3ff;
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11px; line-height: 16px;
    letter-spacing: 1.6px; text-transform: uppercase;
    backdrop-filter: blur(6px);
    margin-bottom: 20px;
}
.dp-dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, #12b6f8 0%, #7747b6 100%);
    box-shadow: 0 0 0 3px rgba(18,182,248,.18);
    display: inline-block; flex-shrink: 0;
}
.section-datapool h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; color: var(--cool-101828, #101828);
    margin: 0 0 20px; letter-spacing: -.6px;
}
.dp-accent{
    background: linear-gradient(90deg, #12b6f8 0%, #2863c5 48%, #7747b6 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
/* ── Centered heading + subtitle, full width above the two-column row ── */
.dp-story-intro-wrap{
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.dp-story-intro{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px;
    color: #4a5568;
    margin: 0;
}

/* ── Two-column storytelling layout — illustration aligns to the
   feature list beside it now that the heading sits above both. ── */
.dp-story{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
    text-align: left;
}

/* ── Expandable feature list — one open at a time, fade+slide on switch ── */
.dp-feat-list{
    display: flex; flex-direction: column;
    border-top: 1px solid rgba(40,99,195,.14);
}
.dp-feat-item{ border-bottom: 1px solid rgba(40,99,195,.14); }
.dp-feat-head{
    width: 100%;
    display: flex; align-items: center; gap: 14px;
    background: none; border: none; padding: 20px 2px;
    cursor: pointer; text-align: left;
    font-family: inherit;
}
.dp-feat-title{
    flex: 1;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 18px; color: #6b7280; letter-spacing: -.2px;
    transition: color .35s ease;
}
.dp-feat-item.is-active .dp-feat-title{ color: #101828; }
.dp-feat-chevron{
    width: 16px; height: 16px; color: #9aa5b1; flex-shrink: 0;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), color .35s ease;
}
.dp-feat-item.is-active .dp-feat-chevron{ transform: rotate(180deg); color: #2863c3; }

.dp-feat-body{
    /* Grid-rows accordion — animates 0fr -> 1fr to the content's exact
       height with no JS measurement and no dead zone (buttery smooth). */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
    opacity: 0;
}
.dp-feat-body-inner{ overflow: hidden; min-height: 0; }
.dp-feat-item.is-active .dp-feat-body{ grid-template-rows: 1fr; opacity: 1; }
.dp-feat-body p{
    margin: 0; padding: 0 26px 22px 22px;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14.5px; line-height: 23px; color: #4a5568;
}
/* Mobile-only per-item illustration — desktop keeps the single sticky
   crossfading .dp-illus-stage panel instead, so this stays hidden there. */
.dp-feat-img{ display: none; }

/* ── Illustration stage — a static vector image per feature, swapped
   with a crossfade/scale/rotate transition; a soft ambient glow sits
   behind the image itself for depth. ── */
.dp-story-right{ display: flex; justify-content: center; }
.dp-illus-stage{
    position: relative;
    width: 100%; max-width: 600px;
    /* matches the new Figma illustrations' native 1125×942 canvas —
       these are self-contained navy cards (own bg + rounded corners),
       not wide light-pastel scenes, so the stage is sized to fit them
       edge-to-edge instead of leaving dead space on the sides. */
    aspect-ratio: 1125 / 942;
}
/* Each feature's illustration is absolutely stacked; only the active one
   is visible — the opacity/scale/rotate transition is the "morph" as
   the static image swaps for the next feature's static image. */
.dp-illus-core-stage{ position: absolute; inset: 0; z-index: 1; }
.dp-illus-core{
    position: absolute; inset: 0;
    opacity: 0;
    transform: scale(.9) rotate(-8deg);
    pointer-events: none;
    will-change: opacity, transform;
    transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
}
.dp-illus-core.is-active{
    opacity: 1;
    transform: scale(1) rotate(0deg);
    pointer-events: auto;
}
.dp-illus-core img{
    display: block;
    width: 100%; height: 100%;
    object-fit: contain;
    /* lifts the navy card off the white section instead of sitting flat */
    filter: drop-shadow(0 20px 44px rgba(13,27,46,.16));
}

/* ════════════════════════════════════════════════════════════════
   CONVERSATION INTELLIGENCE (light, Scroll 6)
   ════════════════════════════════════════════════════════════════ */
.section-conv-intel{
    /* Pale brand gradient — same cyan → blue → violet direction as the
       accent gradients used throughout the page, just at tint strength */
    background: linear-gradient(135deg,
        var(--Turquoise-SkyBlue-50, #e8f6fa) 0%,
        var(--Royal-Blue-Blue-50, #e7eef8) 55%,
        var(--Violet-Violet-50, #f0ebf7) 100%);
    padding: 96px 0; position: relative;
}
/* Light section dot-grid — matches the Data Pool section's convention */
.section-conv-intel::before{
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(40,99,195,.14) 1px, transparent 1px);
    background-size: 24px 24px;
}
.section-conv-intel .container{ position: relative; z-index: 1; }
.ci-intro{
    text-align: center; max-width: 680px; margin: 0 auto 56px;
}
/* Light-section eyebrow per §12.2: color #0e48a5, border rgba(40,99,195,.14), letter-spacing 1.6px */
.section-conv-intel .ai-eyebrow,
.section-steps .ai-eyebrow{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: 50px;
    background: rgba(40,99,195,.08);
    border: 1px solid rgba(40,99,195,.14);
    color: var(--Royal-Blue-Blue-500, #0e48a5);
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11px; line-height: 16px;
    letter-spacing: 1.6px; text-transform: uppercase;
    margin-bottom: 20px;
}
.section-conv-intel .ae-dot,
.section-steps .ae-dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, #2863c3 0%, #7747b6 100%);
    box-shadow: 0 0 0 3px rgba(40,99,195,.14);
    display: inline-block; flex-shrink: 0;
}
/* Dark-section override — .section-steps (Quick Start) sits on a dark
   background, so it repoints the shared light rule above. */
.section-steps .ai-eyebrow{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
    color: #67d3ff;
}
.section-steps .ae-dot{
    background: linear-gradient(135deg, #12b6f8 0%, #7747b6 100%);
    box-shadow: 0 0 0 3px rgba(18,182,248,.18);
}
.section-conv-intel h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; color: var(--cool-101828, #101828);
    margin: 0 0 16px; letter-spacing: -.6px;
}
.ci-sub{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px; color: #4a5568;
    margin: 0;
}
.ci-cards{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.ci-card{
    background: #fff;
    border: 1px solid rgba(40,99,195,.14);
    border-radius: 16px;
    padding: 36px 32px;
    display: flex; flex-direction: column;
    box-shadow: 0 4px 24px rgba(40,99,195,.08);
    transition: box-shadow .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s ease;
}
.ci-card:hover{
    box-shadow: 0 8px 40px -12px rgba(40,99,195,.28);
    border-color: rgba(40,99,195,.28);
    transform: translateY(-3px);
}
.ci-card-icon{
    width: 52px; height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0e48a5 0%, #2863c5 52%, #7747b6 100%);
    display: flex; align-items: center; justify-content: center;
    color: #ffffff;
    box-shadow: 0 6px 16px -6px rgba(40,99,195,.45);
    margin-bottom: 22px; flex-shrink: 0;
}
.ci-card-icon svg{ width: 22px; height: 22px; }
.ci-card h5{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 18px; line-height: 26px; color: var(--cool-101828, #101828);
    margin: 0 0 10px; letter-spacing: -.3px;
}
.ci-card p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15px; line-height: 24px; color: #4a5568; margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   MCP-POWERED BI (dark, Scroll 7)
   ════════════════════════════════════════════════════════════════ */
.section-mcp{
    position: relative; overflow: hidden;
    background: var(--Base-White, #fcfcfc);
    padding: 96px 0;
    text-align: center;
}
.section-mcp .container{ position: relative; z-index: 1; }
/* Light-section eyebrow/dot override (base .dp-eyebrow stays dark) */
.section-mcp .dp-eyebrow{
    background: rgba(40,99,195,.08);
    border-color: rgba(40,99,195,.14);
    color: var(--Royal-Blue-Blue-500, #0e48a5);
    backdrop-filter: none;
}
.section-mcp .dp-dot{
    background: linear-gradient(135deg, #2863c3 0%, #7747b6 100%);
    box-shadow: 0 0 0 3px rgba(40,99,195,.14);
}
.mcp-intro{ margin-bottom: 60px; }
.mcp-intro h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; color: var(--cool-101828, #101828);
    margin: 0 0 20px; letter-spacing: -.6px;
}
.section-mcp .section-sub{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 17px; line-height: 28px; color: #4a5568;
    max-width: 840px; margin: 0 auto;
}

/* ── Drag cards + tilt screenshot — the capability strip is a free
   grab-and-throw list (pointer-driven drag + momentum decay, no snap
   grid) for a tactile, app-like feel. The product screen sits in a
   card that tilts toward the cursor (perspective parallax) and swaps
   with a circular mask reveal expanding from center. ── */
.mcp-drag{ text-align: left; }

.mcp-drag-viewport{
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    padding: 20px 0 28px;
    cursor: grab;
    touch-action: pan-y;
    /* fade the strip's edges so the drag reads as an unbounded list */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.mcp-drag-viewport::-webkit-scrollbar{ display: none; }
.mcp-drag-viewport.is-grabbing{ cursor: grabbing; }
.mcp-drag-track{
    display: flex; gap: 18px; width: max-content;
    padding-inline: 8px;
}
.mcp-drag-card{
    flex: 0 0 auto;
    padding: 11px 22px;
    background: #fff;
    border: 1px solid rgba(40,99,195,.16);
    border-radius: 50px;
    cursor: pointer; font-family: inherit;
    -webkit-user-select: none; user-select: none;
    transition: box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.mcp-drag-card:focus-visible{ outline: 2px solid rgba(28,169,201,.5); outline-offset: 2px; }
.mcp-drag-card.is-active{
    border-color: transparent;
    background: linear-gradient(135deg, #1CA9C9 0%, #2863c3 50%, #55298E 100%);
    box-shadow: 0 14px 30px -14px rgba(40,99,195,.5);
}
.mcp-drag-name{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 15px; line-height: 21px; color: var(--cool-101828, #101828);
    white-space: nowrap;
    pointer-events: none;
    transition: color .35s ease;
}
.mcp-drag-card.is-active .mcp-drag-name{ color: #fff; }

/* Progress bar — fills to reflect how far along the 7 capabilities we are */
.mcp-drag-progress{
    position: relative;
    height: 3px; border-radius: 3px;
    background: rgba(40,99,195,.12);
    max-width: 1400px; margin: 8px auto 40px;
    overflow: hidden;
}
.mcp-drag-progress-fill{
    position: absolute; inset: 0 auto 0 0;
    width: 14.28%; border-radius: 3px;
    background-image: linear-gradient(90deg, #1CA9C9 0%, #2863c3 50%, #55298E 100%);
    transition: width .5s cubic-bezier(.22,.61,.36,1);
}

/* ── Detail stage — two columns: content on the left, image on the right ── */
.mcp-drag-stage{
    display: grid; grid-template-columns: minmax(0,0.7fr) minmax(0,1.3fr);
    align-items: center; gap: 56px;
    max-width: 1400px; margin: 0 auto;
}
.mcp-drag-info{ display: none; position: relative; padding-left: 30px; }
.mcp-drag-info.is-active{ display: block; }

/* Vertical dot + dashed-line marker beside the heading/CTA */
.mcp-drag-marker{ position: absolute; left: 0; top: 6px; bottom: 6px; width: 12px; }
.mcp-drag-marker::before{
    content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1px;
    background-image: repeating-linear-gradient(to bottom, rgba(40,99,195,.35) 0 4px, transparent 4px 9px);
}
.mcp-drag-dot{
    position: absolute; left: 0; width: 11px; height: 11px; border-radius: 50%;
    background-image: linear-gradient(135deg, #1CA9C9 0%, #55298E 100%);
    box-shadow: 0 0 0 4px rgba(40,99,195,.12);
}
.mcp-drag-dot--top{ top: 0; }
.mcp-drag-dot--bottom{ bottom: 0; }

.mcp-drag-info-head{ display: flex; flex-direction: column-reverse; gap: 12px; }
.mcp-drag-info-head h3{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 30px; line-height: 38px; letter-spacing: -.3px;
    color: var(--cool-101828, #101828); margin: 0;
}
.mcp-drag-count{
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 13px; letter-spacing: 1.5px;
    background-image: linear-gradient(90deg, #1CA9C9 0%, #55298E 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.mcp-drag-info p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px; color: #4a5568;
    margin: 16px 0 0;
}
.mcp-drag-more{
    display: inline-flex; align-items: center;
    margin-top: 24px; padding: 11px 26px;
    border-radius: 6px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
    color: #fff; text-decoration: none;
    background-image: linear-gradient(135deg, #1CA9C9 0%, #2863c3 55%, #55298E 100%);
    box-shadow: 0 14px 30px -14px rgba(40,99,195,.5);
    transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.mcp-drag-more:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(40,99,195,.6); }
.mcp-drag-info.is-active .mcp-drag-info-head{ animation: mcpDragRise .45s cubic-bezier(.22,.61,.36,1) .05s backwards; }
.mcp-drag-info.is-active p{                   animation: mcpDragRise .45s cubic-bezier(.22,.61,.36,1) .14s backwards; }
.mcp-drag-info.is-active .mcp-drag-more{      animation: mcpDragRise .45s cubic-bezier(.22,.61,.36,1) .22s backwards; }
@keyframes mcpDragRise{
    from{ opacity: 0; transform: translateY(12px); }
    to{   opacity: 1; transform: none; }
}

/* Product screen — floating card with perspective; mouse-driven tilt via JS */
.mcp-drag-visual{ min-width: 0; }
.mcp-drag-screen{ perspective: 900px; }
.mcp-drag-tilt{
    position: relative;
    aspect-ratio: 16 / 8.2;
    border-radius: 16px; overflow: hidden; /* clips the mask-reveal transition */
    transition: transform .25s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}
.mcp-drag-shot{
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none;
    clip-path: circle(0% at 50% 50%);
    transition: clip-path .6s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
.mcp-drag-shot.is-active{
    opacity: 1; pointer-events: auto;
    clip-path: circle(150% at 50% 50%);
}
.mcp-drag-shot img{
    display: block; width: 100%; height: 100%;
    object-fit: contain;
}

/* ════════════════════════════════════════════════════════════════
   QUICK START (dark, Scroll 8) — thread-line steps + sticky visual
   (Yavar-style: steps scroll normally down the left on a continuous
   line; the right panel is sticky and crossfades per step)
   ════════════════════════════════════════════════════════════════ */
.section-steps{
    background: linear-gradient(160deg, #071e45 0%, #051a3c 45%, #0a1e3d 80%, #071840 100%);
    padding: 64px 0 120px; position: relative;
}
/* Dark section dot-grid */
.section-steps::before{
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 24px 24px;
}
.section-steps .container{ position: relative; z-index: 1; }

/* Left-aligned section head */
.qs-head{
    display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
    margin-bottom: 72px;
}
/* Dark-section eyebrow — per site convention (matches .dp-eyebrow) */
.qs-eyebrow{
    display: inline-flex; align-items: center;
    padding: 7px 16px; border-radius: 50px;
    background: rgba(252,252,252,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: #67d3ff;
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11px; line-height: 16px;
    letter-spacing: 1.6px; text-transform: uppercase;
}
.qs-head h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; color: #fcfcfc;
    margin: 0; letter-spacing: -.6px;
}
/* Accent keeps the heading's own light weight — matches dp-accent/ah-accent */
.qs-accent{
    background-image: linear-gradient(90deg, #12b6f8 0%, #2863c5 48%, #7747b6 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* Two columns: scrolling steps left, sticky visual right.
   NOTE: columns must STRETCH (grid default) — the visual column needs the
   full row height for its sticky child to travel; align-items:start would
   collapse it to the frame's own height and kill the stickiness. */
.qs-wrap{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 80px;
}

/* ── Steps column — continuous thread line through the number circles ── */
.qs-steps{ position: relative; }
.qs-line{
    position: absolute; left: 17px; top: 44px; bottom: 44px;
    width: 1px;
    background: rgba(159,186,228,.22);
}
.qs-step{
    position: relative;
    display: flex; align-items: flex-start; gap: 26px;
    min-height: 40vh;
    padding: 8px 0;
}
.qs-step:last-child{ min-height: 40vh; }
.qs-num{
    position: relative; z-index: 1; flex: 0 0 34px;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #071c40;
    border: 1px solid rgba(159,186,228,.35);
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 14px; color: rgba(252,252,252,.75);
    transition: border-color .35s ease, box-shadow .35s ease, color .35s ease;
}
.qs-step.is-active .qs-num{
    border-color: rgba(18,182,248,.75);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(18,182,248,.14), 0 0 18px rgba(18,182,248,.35);
}
.qs-step-body{ display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }
.qs-step-body h5{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 26px; line-height: 34px; color: rgba(252,252,252,.55);
    margin: 0; letter-spacing: -.3px;
    transition: color .35s ease;
}
.qs-step.is-active .qs-step-body h5{ color: #fcfcfc; }
.qs-step-body p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15.5px; line-height: 26px; color: rgba(252,252,252,.55); margin: 0;
    max-width: 400px;
    transition: color .35s ease;
}
.qs-step.is-active .qs-step-body p{ color: rgba(252,252,252,.75); }
/* Mobile-only per-step screenshot — desktop keeps the single sticky
   crossfading .qs-visual panel instead, so this stays hidden there. */
.qs-step-img{ display: none; }

/* Icon chips — small bordered tiles with tiny uppercase labels */
.qs-chips{ display: flex; gap: 18px; margin-top: 8px; }
.qs-chip{
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.qs-chip-tile{
    width: 56px; height: 56px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(159,186,228,.28);
    background: rgba(252,252,252,.03);
    color: rgba(202,213,226,.85);
    transition: border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.qs-chip-tile svg{ width: 24px; height: 24px; }
.qs-step.is-active .qs-chip-tile{
    border-color: rgba(119,71,182,.55);
    color: #cdb7f5;
    box-shadow: 0 0 16px -4px rgba(119,71,182,.4);
}
.qs-chip-label{
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 10.5px; letter-spacing: 1.2px;
    color: rgba(202,213,226,.6);
}

/* ── Sticky visual — neon-framed panel, shots crossfade per step ── */
.qs-visual{ min-width: 0; position: relative; }
/* Reference behavior: the frame starts level with step 1 (natural flow),
   scrolls with the page until it reaches the vertical center of the
   viewport, sticks there while the remaining steps pass, then releases
   and scrolls out with the last step. The exact centered `top` offset
   depends on the frame's rendered height, so JS measures and sets it;
   this value is only the pre-JS fallback. */
.qs-visual-sticky{
    position: sticky; top: 25vh;
}
/* Soft ambient glow behind the GIF — the frame itself stays box-free, but
   this lifts the dark negative space around it instead of leaving a flat,
   featureless void against the section background. Below 991px the
   sticky wrapper drops to position:static, so this pseudo-element falls
   back to anchoring against .qs-visual (kept position:relative for
   exactly that case) instead of mis-positioning against the container. */
.qs-visual-sticky::before{
    content: "";
    position: absolute;
    inset: -48px;
    background: radial-gradient(ellipse at center,
        rgba(28,169,201,.22) 0%,
        rgba(40,99,195,.14) 42%,
        transparent 72%);
    filter: blur(48px);
    z-index: -1;
    pointer-events: none;
}
.qs-frame{
    position: relative;
    aspect-ratio: 4 / 3;   /* matches the Figma step cards so nothing is cropped */
    border-radius: 12px; overflow: hidden; /* clips the slide motion */
}
/* Directional swap: incoming GIF slides up from below; the outgoing one
   (tagged .is-leaving by JS for the transition's duration) exits upward —
   an unmistakable motion cue that the visual changed with the step. */
.qs-shot{
    position: absolute; inset: 0;
    border-radius: 12px; overflow: hidden;
    opacity: 0; transform: translateY(56px);
    pointer-events: none;
    transition: opacity .4s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
}
.qs-shot.is-active{ opacity: 1; transform: none; }
.qs-shot.is-leaving{ opacity: 0; transform: translateY(-56px); }
.qs-shot img{
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center;   /* cards are ~4:3, so the 4:3 frame fills with no content cut */
}

/* Scroll hint + step numbering under the GIF */
/* Grid keeps the step label at the left edge while the progress bars sit
   at the true horizontal center of the GIF */
.qs-progress{
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px; margin-top: 18px;
}
.qs-progress-count{ justify-self: start; }
.qs-progress-dots{ grid-column: 2; justify-self: center; }
.qs-progress-dots{ display: flex; gap: 6px; }
.qs-progress-dot{
    width: 26px; height: 3px; border-radius: 50px;
    background: rgba(255,255,255,.18);
    transition: background .35s ease;
}
.qs-progress-dot.is-active{
    background: linear-gradient(90deg, #12b6f8 0%, #2863c5 50%, #7747b6 100%);
}
.qs-progress-count{
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 12.5px; letter-spacing: 1.5px;
    color: #fcfcfc;
}

/* ════════════════════════════════════════════════════════════════
   FEATURES & BENEFITS (dark, Scroll 9)
   ════════════════════════════════════════════════════════════════ */
.section-feat-benefits{
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, #051a3c 0%, #061830 50%, #040f26 100%);
    padding: 96px 0; text-align: center;
}
.section-feat-benefits .container{ position: relative; z-index: 1; }
.fb-orb{
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    filter: blur(100px);
}
.fb-orb--tl{
    width: 580px; height: 520px; left: -160px; top: -140px;
    background: radial-gradient(ellipse, rgba(85,41,142,.30) 0%, transparent 70%);
}
.fb-orb--br{
    width: 500px; height: 440px; right: -120px; bottom: -100px;
    background: radial-gradient(ellipse, rgba(14,72,165,.25) 0%, transparent 70%);
}
.fb-intro{ margin-bottom: 60px; }
.fb-intro h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; color: #fcfcfc;
    margin: 0 0 20px; letter-spacing: -.6px;
}
.section-feat-benefits .section-sub{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 17px; line-height: 28px; color: rgba(252,252,252,.72);
    max-width: 720px; margin: 0 auto;
}
/* ── Brick mosaic: 6-col grid, three rows of varied-width tiles ── */
.fb-brick{
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
    text-align: left;
}
.fb-card--w4{ grid-column: span 4; }
.fb-card--w3{ grid-column: span 3; }
.fb-card--w2{ grid-column: span 2; }
.fb-card{
    position: relative; overflow: hidden;
    background: rgba(252,252,252,.05);
    border: 1px solid rgba(159,186,228,.12);
    border-radius: 18px; padding: 28px 24px;
    display: flex; flex-direction: column; gap: 12px;
    transition: border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
/* Wider bricks lay icon + text side-by-side for horizontal balance */
.fb-card--w4{
    flex-direction: row; align-items: flex-start; gap: 20px;
    background:
        radial-gradient(100% 130% at 0% 0%, rgba(85,41,142,.12) 0%, rgba(14,72,165,.06) 45%, transparent 72%),
        rgba(252,252,252,.05);
    border-color: rgba(119,71,182,.24);
}
.fb-card--w4 .fb-text{ display: flex; flex-direction: column; gap: 8px; }
.fb-card--w4 h5{ font-size: 20px; line-height: 28px; }
.fb-card--w4 p{ font-size: 15px; line-height: 24px; }
.fb-card:hover{
    background: rgba(252,252,252,.08);
    border-color: rgba(119,71,182,.38);
    transform: translateY(-4px);
}
.fb-icon{
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(14,72,165,.5) 0%, rgba(119,71,182,.4) 100%);
    border: 1px solid rgba(119,71,182,.28);
    display: inline-flex; align-items: center; justify-content: center;
    color: #12b6f8;
}
.fb-icon svg{ width: 22px; height: 22px; }
.fb-card h5{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 17px; line-height: 25px; color: #fcfcfc;
    margin: 0; letter-spacing: -.3px;
}
.fb-card p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 23px; color: rgba(252,252,252,.72); margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   PLATFORM CAPABILITIES — fc-section (mirrors index.html design)
   ════════════════════════════════════════════════════════════════ */
.am-fc-section{
    background: var(--Base-White, #fcfcfc);
    padding: 112px 0 80px; position: relative; overflow: hidden; z-index: 4;
}
.am-fc-section .fc-header{ text-align: center; max-width: 720px; margin: 0 auto 60px; }
.am-fc-section .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: var(--Royal-Blue-Blue-500, #0e48a5);
    border: 1px solid rgba(40,99,195,.14); padding: 7px 16px; border-radius: 50px;
    margin: 0 0 24px; background: rgba(40,99,195,.08);
}
.am-fc-section .fc-dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(135deg, #12b6f8 0%, #7747b6 100%); flex: 0 0 6px;
}
.am-fc-section .fc-heading{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; color: var(--cool-101828, #101828); letter-spacing: -.6px; margin: 0 0 16px;
}
.am-fc-section .fc-accent{
    font-style: normal;
    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;
}
.am-fc-section .fc-sub{
    font-family: 'Inter', sans-serif; font-size: 15px; line-height: 28px;
    color: #4a5568;
}

/* Track — all 9 capabilities in one continuous row; prev/next pages it by
   a full group at a time (3 desktop / 2 tablet / 1 mobile, measured live
   off the actual card width). .fc-slider-wrap is the clipping viewport. */
.fc-slider-wrap{ overflow: hidden; }
.am-fc-grid{
    display: flex; flex-wrap: nowrap;
    column-gap: 20px; row-gap: 0;
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.am-fc-grid .fc-col{ flex: 0 0 calc((100% - 40px) / 3); }

/* Column — transparent, sits on section bg like the index dark version */
.am-fc-grid .fc-col{
    display: flex; flex-direction: column; position: relative;
    cursor: pointer; background: transparent;
}
.am-fc-grid .fc-col-content{ flex: 1; display: flex; flex-direction: column; }

/* Top indicator line — full-width, no card rounding */
.am-fc-grid .fc-col::before{
    content: ''; display: block; height: 2px; flex: 0 0 2px;
    background-image: repeating-linear-gradient(to right,
        rgba(40,99,195,.22) 0, rgba(40,99,195,.22) 3px, transparent 3px, transparent 9px);
    transition: background-image .4s, background-color .4s;
}
.am-fc-grid .fc-col.is-active::before{ background-image: none; background-color: #2563eb; }
.am-fc-grid .fc-col:hover::before{
    background-image: none; background-color: #1CA9C9;
    transform-origin: left center;
    animation: amFcLineSweep .5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes amFcLineSweep{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

/* Top row: icon + name + arrow — edge-flush on first/last col */
.am-fc-grid .fc-col-top{
    display: flex; align-items: center; gap: 12px; padding: 24px 28px 0;
}
.am-fc-grid .fc-col:first-child .fc-col-top{ padding-left: 0; }
.am-fc-grid .fc-col:last-child  .fc-col-top{ padding-right: 0; }

.am-fc-grid .fc-col-icon{
    width: 40px; height: 40px; flex: 0 0 40px;
    display: flex; align-items: center; justify-content: center;
    color: #2863c3; border: 1px solid rgba(40,99,195,.22); border-radius: 5px;
    background: rgba(40,99,195,.07);
    transition: border-color .4s, background .4s, color .4s;
}
.am-fc-grid .fc-col-icon svg{ width: 20px; height: 20px; }
.am-fc-grid .fc-col.is-active .fc-col-icon,
.am-fc-grid .fc-col:hover .fc-col-icon{
    border-color: #2863c3; background: #2863c3; color: #fff;
}
.am-fc-grid .fc-col-name{
    font-family: 'Inter', sans-serif; font-size: 14.5px; font-weight: 500;
    color: #0d1b2e; flex: 1; line-height: 1.35;
}
.am-fc-grid .fc-col-arrow{
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 6px; border: 1px solid rgba(40,99,195,.20);
    background: rgba(40,99,195,.06);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: rgba(13,27,46,.4); padding: 0;
    transition: background .3s, border-color .3s, color .3s;
}
.am-fc-grid .fc-col-arrow svg{ width: 14px; height: 14px; }
.am-fc-grid .fc-col.is-active .fc-col-arrow,
.am-fc-grid .fc-col-arrow:hover{
    background: #2863c3; border-color: #2863c3; color: #fff;
}

.am-fc-grid .fc-col-desc{
    font-family: 'Inter', sans-serif; font-size: 13px; line-height: 21px;
    color: rgba(13,27,46,.62); padding: 16px 28px 28px;
}
.am-fc-grid .fc-col:first-child .fc-col-desc{ padding-left: 0; }
.am-fc-grid .fc-col:last-child  .fc-col-desc{ padding-right: 0; }

/* Illustration card — pale brand-tint bg; the SVGs' accent colors (cyan,
   blue, violet) were designed against dark navy, so any neutral/white
   detail lines within them were recolored to a dark-navy tint to keep
   reading correctly now that the card itself is light. */
.am-fc-grid .fc-visual{
    flex: 0 0 240px; position: relative; overflow: hidden;
    border-radius: 8px; margin-top: 20px;
    border: 1px solid rgba(40,99,195,.16);
    background: linear-gradient(145deg,
        var(--Turquoise-SkyBlue-50, #e8f6fa) 0%,
        var(--Royal-Blue-Blue-50, #e7eef8) 55%,
        var(--Violet-Violet-50, #f0ebf7) 100%);
    box-shadow: 0 2px 12px rgba(40,99,195,.08);
    transition: border-color .3s, box-shadow .3s;
}
.am-fc-grid .fc-col.is-active .fc-visual{
    border-color: rgba(40,99,195,.42);
    box-shadow: 0 4px 20px rgba(40,99,195,.16);
}
.am-fc-grid .fc-col:hover .fc-visual{
    border-color: rgba(40,99,195,.5);
    box-shadow: 0 6px 24px rgba(40,99,195,.2);
}
.am-fc-grid .fc-vis-inner{
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center;
}
.am-fc-grid .fc-col.is-active .fc-vis-inner,
.am-fc-grid .fc-col:hover .fc-vis-inner{ animation: amFcVisFloat 3s ease-in-out infinite; }
@keyframes amFcVisFloat{
    0%,100%{ transform: translateY(-4px); }
    50%    { transform: translateY(-10px); }
}
.am-fc-grid .fc-vis-svg{ width: 100%; height: 100%; display: block; }

/* ── Slide navigation ── */
.am-fc-slide-nav{
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin-top: 36px;
}
.am-fc-slide-nav .fc-snav-btn{
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(40,99,195,.28);
    background: #fff;
    color: rgba(13,27,46,.7);
    cursor: pointer; padding: 0;
    box-shadow: 0 2px 10px rgba(13,27,46,.10);
    transition: background .2s, border-color .2s, color .2s, opacity .2s;
}
.am-fc-slide-nav .fc-snav-btn svg{ width: 20px; height: 20px; }
/* Prev: dimmed */
#amFcPrev{ opacity: .45; }
#amFcPrev:not(:disabled):hover{ opacity: .85; }
/* Next: brand filled */
#amFcNext{
    background: #2863c3; border-color: #2863c3; color: #fff;
    box-shadow: 0 4px 14px rgba(40,99,195,.35);
}
#amFcNext:not(:disabled):hover{ background: #1f52a8; border-color: #1f52a8; }
.am-fc-slide-nav .fc-snav-btn:disabled{ opacity: .20; cursor: default; }
.am-fc-slide-nav .fc-snav-count{
    font-family: 'Inter', sans-serif;
    font-size: 12px; letter-spacing: .5px;
    color: rgba(13,27,46,.5); min-width: 28px; text-align: center;
}

/* Responsive — 2 cards per page on tablet, 1 (one capability at a time,
   matching lumenore-insights-new.html) on mobile. */
@media (max-width: 991px){
    .am-fc-grid .fc-col{ flex: 0 0 calc((100% - 20px) / 2); }
    .am-fc-section .fc-heading{ font-size: 34px; line-height: 44px; }
}
@media (max-width: 600px){
    .am-fc-grid .fc-col{ flex: 0 0 100%; }
    .am-fc-section{ padding: 80px 0 60px; }
    .am-fc-section .fc-heading{ font-size: 28px; line-height: 38px; }
}

/* ════════════════════════════════════════════════════════════════
   MCP-CTA — "Transform Business Questions" (contained card, sits after
   the Platform Capabilities carousel, before the page-finale). Reuses
   the .bcta-wrap/.bcta-actions typography and button styles built for
   the page-finale bottom CTA. Unlike a full-bleed section, the dark
   gradient lives on an inset rounded card so the surrounding section
   keeps the page's normal (light) background on either side of it.
   ════════════════════════════════════════════════════════════════ */
/* position+z-index above 3 needed so this opaque background actually
   occludes .page-finale::before — that pseudo-element extends 400px
   above its own section with a heavy blur and its own stacking context
   (.page-finale has z-index:2), so without competing here the glow
   painted over this section regardless of DOM order. */
.section-mcp-cta{
    position: relative; z-index: 3;
    background: var(--Base-White, #fcfcfc); padding: 32px 0 96px;
}
.mcp-cta-card{
    position: relative; overflow: hidden;
    border-radius: 28px;
    padding: 48px 56px 52px;   /* site-wide CTA card standard */
    /* Richer violet → navy diagonal (same family as the page-finale
       gradient) instead of four near-identical navy stops, which read
       as a flat solid color rather than a gradient. */
    background: linear-gradient(135deg, #55298e 0%, #2a3f8f 38%, #0e2252 68%, #051a3c 100%);
    box-shadow: 0 30px 60px -30px rgba(7,30,69,.45);
}
.mcp-cta-card-grid{
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 24px 24px;
}
.mcp-cta-card .bcta-wrap{ position: relative; z-index: 1; text-align: center; }

/* ════════════════════════════════════════════════════════════════
   BOTTOM CTA (inside page-finale)
   ════════════════════════════════════════════════════════════════ */
.section-bottom-cta{
    padding: 96px 0 80px;
    text-align: center;
}
.bcta-wrap{
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.bcta-wrap h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; color: #fcfcfc;
    margin: 0; letter-spacing: -.6px;
}
.bcta-wrap p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 17px; line-height: 28px; color: rgba(252,252,252,.72);
    max-width: 620px; margin: 0;
}
.bcta-actions{
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;
    margin-top: 8px;
}
.btn-primary--lg{ padding: 12px 28px; font-size: 16px; }
/* Request a Demo — mirrors the site nav's .btn-demo (header.css): solid
   navy padding-box fill + 2px brand-gradient border via the border-box trick. */
.btn-demo--lg{
    padding: 12px 30px; min-height: 48px; font-size: 16px; line-height: 1.2;   /* size-matched to .btn-primary--lg */
    background:
        linear-gradient(var(--Royal-Blue-Blue-900, #051A3C), var(--Royal-Blue-Blue-900, #051A3C)) padding-box,
        var(--Explore-Button, linear-gradient(270deg,#7747b6,#4075c9,#1ca9c9)) border-box;
    border: 2px solid transparent;
    color: #fcfcfc; font-family: 'Inter', sans-serif; font-weight: 700;
    border-radius: 6px; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    transition:
        transform .22s cubic-bezier(.22, .61, .36, 1),
        box-shadow .22s cubic-bezier(.22, .61, .36, 1),
        background .22s ease;
}
.btn-demo--lg:hover{
    background:
        linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) padding-box,
        var(--Explore-Button, linear-gradient(270deg,#7747b6,#4075c9,#1ca9c9)) 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);
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — new sections
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 991px){
    .aiagent-grid--4col{ grid-template-columns: repeat(2, 1fr); }
    .stats-tiles{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .stats-intro-tile{ margin-bottom: 36px; }
    .dp-story{ grid-template-columns: 1fr; gap: 40px; }
    /* One shared crossfading panel below the whole list doesn't map to
       "an image per point" — hide it in favour of .dp-feat-img inline
       inside each expanded accordion item below. */
    .dp-story-right{ display: none; }
    .dp-feat-img{
        display: block;
        /* Matches .dp-feat-body p/.am-chips' "aligned under the title"
           indent (4 + 42 + 16 = 62px) that's still active in this range —
           the ≤767px block below switches both to match its unindented layout. */
        margin: 14px 24px 0 62px;
        max-width: 320px;
        aspect-ratio: 1125 / 942;
    }
    .dp-feat-img img{
        display: block; width: 100%; height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 20px 44px rgba(13,27,46,.16));
    }
    .ci-cards{ grid-template-columns: 1fr; gap: 20px; }
    .mcp-drag-stage{ grid-template-columns: 1fr; gap: 32px; }
    .fb-brick{ grid-template-columns: repeat(2, 1fr); }
    .fb-brick .fb-card{ grid-column: auto !important; }
    .fb-card--w4{ flex-direction: column; gap: 12px; }
    .section-datapool h2, .mcp-intro h2, .bcta-wrap h2,
    .section-conv-intel h2, .fb-intro h2{ font-size: 34px; line-height: 44px; }
    /* Sticky preview doesn't fit below desktop — steps stack normally,
       compact heights, and each step now carries its own static
       screenshot right after its content instead of one shared panel. */
    .qs-wrap{ grid-template-columns: 1fr; gap: 48px; }
    .qs-step{ min-height: 0; padding: 26px 0; }
    .qs-step:last-child{ min-height: 0; }
    .qs-line{ top: 34px; bottom: 34px; }
    .qs-head h2{ font-size: 34px; line-height: 44px; }
    /* One shared crossfading panel doesn't map to "an image per step" —
       hide it in favour of the per-step .qs-step-img below. */
    .qs-visual{ display: none; }
    .qs-step-img{
        display: block;
        margin-top: 4px;
        border-radius: 12px;
        overflow: hidden;
        aspect-ratio: 4 / 3;
    }
    .qs-step-img img{
        display: block; width: 100%; height: 100%;
        object-fit: cover; object-position: center;
    }
}
@media (max-width: 767px){
    .fb-brick{ grid-template-columns: 1fr; }
    .qs-head h2{ font-size: 26px; line-height: 36px; }
    .qs-step-body h5{ font-size: 20px; line-height: 28px; }
    .qs-chip-tile{ width: 48px; height: 48px; }
    .mcp-drag-card{ padding: 9px 16px; }
    .mcp-drag-name{ font-size: 13.5px; }
    .mcp-drag-track{ gap: 10px; }
    .mcp-drag-info-head h3{ font-size: 22px; line-height: 30px; }
    .mcp-drag-info p{ font-size: 14.5px; line-height: 23px; }
    .mcp-drag-tilt{ aspect-ratio: 4 / 3; }
    .dp-illus-stage{ max-width: 520px; }
    .dp-feat-title{ font-size: 16px; }
    .mcp-cta-card{ padding: 48px 28px; border-radius: 20px; }
}
@media (max-width: 575px){
    .aiagent-grid--4col{ grid-template-columns: 1fr; }
    .stats-tiles{ grid-template-columns: 1fr; gap: 14px; }
    .bcta-actions{ flex-direction: column; }
    .dp-illus-stage{ max-width: 400px; }
    .section-datapool h2, .mcp-intro h2, .bcta-wrap h2,
    .section-conv-intel h2, .fb-intro h2{ font-size: 26px; line-height: 36px; }
    .stat-number, .stat-label{ font-size: 40px; }
}

/* Trusted logo marquee — smaller tiles on narrow viewports */
@media (max-width: 600px){
    .trusted-marquee__item{ height: 72px; padding: 0 16px; }
    .trusted-marquee__item img{ max-height: 32px; max-width: 96px; height: auto; width: auto; }
}

/* ═══════════════════════════════════════════════════
   Hero-stage canvas + bg-cards animation
   (mirrors final-home-bundle.css — required for index.js)
   ═══════════════════════════════════════════════════ */

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

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

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

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

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

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

@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 stacking: grid, particles, nav, and hero section sit above the canvas/cards */
.hero-stage > .hero-grid,
.hero-stage > .hero-particles,
.site-top,
.hero-section {
    position: relative;
    z-index: 10;
}

/* ══════════════════════════════════════════════════
   BRAND GRADIENT TOKENS — ported from final-home-bundle
══════════════════════════════════════════════════ */
.hero-bg-page {
    --grad-brand-stops: #7747b6 0%, #2863c3 50%, #1ca9c9 100%;
    --grad-brand:     linear-gradient(135deg,    var(--grad-brand-stops));
    --grad-brand-h:   linear-gradient(90deg,     var(--grad-brand-stops));
    --grad-brand-btn: linear-gradient(to left,   var(--grad-brand-stops));
    --grad-brand-v:   linear-gradient(to bottom, var(--grad-brand-stops));

    /* Re-point the upstream brand-gradient variables (defined in index.css)
       to the canonical gradient, matching index.html. */
    --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);
}
/* Canonical re-point for the shared .btn-primary gradient itself (matches
   index.html's final-home-bundle.css) — without this, .btn-primary keeps
   the older pre-unification gradient stop defined earlier in this file. */
.hero-bg-page .btn-primary.btn-primary { background-image: var(--grad-brand-btn); }

/* ══════════════════════════════════════════════════
   HELLO BAR — vibrant redesign (matches index.html)
══════════════════════════════════════════════════ */
.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 — layered gradient background, compact height like eula.html
      (kills the min-height:100vh rules earlier in this file) ── */
.hero-stage {
    height: auto !important;
    min-height: 0 !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;
}

/* ── Hello bar — slim height (matches index.html) ── */
.hello-bar{
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

/* ════════════════════════════════════════════════════════════════
   NEW-CONTENT ADDITIONS (Ask Me V1.0) — chips, MCP grid, features
   grid wrapper, product CTAs, testimonials, blogs. Appended below
   the shared design so the original sections are untouched.
   ════════════════════════════════════════════════════════════════ */

/* ── Chips (used in How-It-Works drag info + Data Foundation accordion) ── */
.am-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.am-chip{
    display: inline-flex; align-items: center;
    padding: 6px 13px; border-radius: 50px;
    background: rgba(40,99,195,.07);
    border: 1px solid rgba(40,99,195,.16);
    color: #0e48a5;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 12.5px; line-height: 16px; letter-spacing: .1px;
    white-space: nowrap;
}
.dp-feat-body .am-chips{ margin-top: 14px; }
.dp-feat-body .am-chip{ background: rgba(40,99,195,.06); }

/* Step 7 CTA row inside the drag info panel */
.mcp-drag-cta{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.mcp-drag-cta .mcp-drag-more{ margin-top: 0; }

/* ════════════ MODEL CONTEXT PROTOCOL — 8-card grid (light) ════════════ */
.section-mcpgrid{
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
    padding: 96px 0; text-align: center;
}
.section-mcpgrid::before{
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(40,99,195,.12) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
            mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%);
}
.section-mcpgrid .container{ position: relative; z-index: 1; }
.mcpg-orb{ position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; opacity: .5; }
.mcpg-orb--left{ width: 420px; height: 420px; left: -160px; top: 40px; background: rgba(40,99,195,.14); }
.mcpg-orb--right{ width: 380px; height: 380px; right: -140px; bottom: 20px; background: rgba(119,71,182,.12); }
.mcpg-intro{ margin: 0 auto 56px; max-width: 900px; }
.section-mcpgrid .dp-eyebrow{
    background: rgba(40,99,195,.08); border-color: rgba(40,99,195,.14);
    color: #0e48a5; backdrop-filter: none;
}
.section-mcpgrid .dp-dot{
    background: linear-gradient(135deg, #2863c3 0%, #7747b6 100%);
    box-shadow: 0 0 0 3px rgba(40,99,195,.14);
}
.mcpg-cards{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: left;
}
.mcpg-card{
    background: #fff; border: 1px solid rgba(40,99,195,.14);
    border-radius: 16px; padding: 28px 24px;
    display: flex; flex-direction: column;
    box-shadow: 0 4px 22px rgba(40,99,195,.07);
    transition: box-shadow .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s ease;
}
.mcpg-card:hover{
    box-shadow: 0 10px 40px -12px rgba(40,99,195,.28);
    border-color: rgba(40,99,195,.28); transform: translateY(-3px);
}
.mcpg-icon{
    width: 46px; height: 46px; border-radius: 12px;
    background: linear-gradient(135deg, #0e48a5 0%, #2863c5 52%, #7747b6 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 6px 16px -6px rgba(40,99,195,.45);
    margin-bottom: 18px; flex-shrink: 0;
}
.mcpg-icon svg{ width: 21px; height: 21px; }
.mcpg-card h5{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 17px; line-height: 24px; color: #101828;
    margin: 0 0 9px; letter-spacing: -.3px;
}
.mcpg-card p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 23px; color: #4a5568; margin: 0;
}

/* ════════════ FEATURES & CAPABILITIES — marquee wrapper (light) ════════════ */
.section-featgrid{
    position: relative; background: #ffffff; padding: 96px 0; text-align: center;
}
.section-featgrid .container{ position: relative; z-index: 1; }
.fg-head{ margin: 0 auto 40px; max-width: 900px; }
.fg-nav{ display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; }
.fg-nav-btn{
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(40,99,195,.2); background: #fff; color: #0e48a5;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 4px 14px rgba(40,99,195,.10);
    transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.fg-nav-btn svg{ width: 20px; height: 20px; }
.fg-nav-btn:hover{
    background: linear-gradient(135deg, #0e48a5 0%, #2863c5 52%, #7747b6 100%);
    color: #fff; border-color: transparent; transform: translateY(-2px);
}

/* ════════════ PRODUCT PAGE CTAs (light) ════════════ */
.section-prodcta{
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%);
    padding: 96px 0; text-align: center;
}
.section-prodcta .container{ position: relative; z-index: 1; }
.prodcta-head{ margin: 0 auto 52px; max-width: 820px; }
.section-prodcta .dp-eyebrow{
    background: rgba(40,99,195,.08); border-color: rgba(40,99,195,.14);
    color: #0e48a5; backdrop-filter: none;
}
.section-prodcta .dp-dot{
    background: linear-gradient(135deg, #2863c3 0%, #7747b6 100%);
    box-shadow: 0 0 0 3px rgba(40,99,195,.14);
}
.prodcta-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; text-align: left; }
.prodcta-card{
    background: #fff; border: 1px solid rgba(40,99,195,.14); border-radius: 20px;
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 6px 30px rgba(40,99,195,.08);
    transition: box-shadow .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease;
}
.prodcta-card:hover{
    box-shadow: 0 16px 50px -16px rgba(40,99,195,.30);
    border-color: rgba(40,99,195,.26); transform: translateY(-4px);
}
.prodcta-media{
    background: linear-gradient(135deg, #eef3fb 0%, #f4eefb 100%);
    padding: 28px 28px 0; overflow: hidden;
}
.prodcta-media img{ width: 100%; height: auto; display: block; border-radius: 12px 12px 0 0; box-shadow: 0 12px 30px -18px rgba(14,72,165,.4); }
.prodcta-body{ padding: 28px 30px 32px; display: flex; flex-direction: column; align-items: flex-start; }
.prodcta-icon{
    width: 48px; height: 48px; border-radius: 12px; background: #e7eef8;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.prodcta-icon img{ width: 26px; height: 26px; }
.prodcta-body h3{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 22px; line-height: 30px; color: #101828; margin: 0 0 10px; letter-spacing: -.3px;
}
.prodcta-body p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15px; line-height: 25px; color: #4a5568; margin: 0 0 20px;
}
.prodcta-link{
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
    color: #0e48a5; text-decoration: none; margin-top: auto;
    transition: gap .2s ease, color .2s ease;
}
.prodcta-link:hover{ color: #7747b6; }

/* ════════════ CLIENT TESTIMONIALS (light) ════════════ */
.section-testi{
    position: relative; background: #ffffff; padding: 96px 0; text-align: center;
}
.section-testi .container{ position: relative; z-index: 1; }
.testi-head{ margin: 0 auto 52px; max-width: 820px; }
.testi-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; text-align: left; }
.testi-card{
    background: #fff; border: 1px solid rgba(40,99,195,.14); border-radius: 18px;
    padding: 30px 28px; display: flex; flex-direction: column; margin: 0;
    box-shadow: 0 4px 24px rgba(40,99,195,.07);
    transition: box-shadow .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s ease;
}
.testi-card:hover{
    box-shadow: 0 12px 44px -14px rgba(40,99,195,.26);
    border-color: rgba(40,99,195,.26); transform: translateY(-3px);
}
.testi-stars{ color: #f5a623; font-size: 16px; letter-spacing: 2px; margin-bottom: 14px; }
.testi-quote{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15.5px; line-height: 26px; color: #333c4d; margin: 0 0 22px; flex: 1 1 auto;
}
.testi-person{ display: flex; align-items: center; gap: 14px; }
.testi-avatar{
    width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: #eef3fb; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(40,99,195,.14);
}
.testi-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.testi-meta{ display: flex; flex-direction: column; }
.testi-name{ font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 15px; color: #101828; }
.testi-role{ font-family: 'Inter', sans-serif; font-weight: 400; font-size: 13px; color: #6b7280; }

/* ════════════ FROM THE BLOGS (light grey) ════════════ */
.section-blogs{
    position: relative; overflow: hidden;
    background: #ffffff;
    padding: 96px 0; text-align: center;
}
.section-blogs .container{ position: relative; z-index: 1; }
.blogs-head{ margin: 0 auto 52px; max-width: 820px; }
.section-blogs .dp-eyebrow{
    background: rgba(40,99,195,.08); border-color: rgba(40,99,195,.14);
    color: #0e48a5; backdrop-filter: none;
}
.section-blogs .dp-dot{
    background: linear-gradient(135deg, #2863c3 0%, #7747b6 100%);
    box-shadow: 0 0 0 3px rgba(40,99,195,.14);
}
.blogs-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; text-align: left; }
.blog-card{
    background: #fff; border: 1px solid rgba(40,99,195,.14); border-radius: 18px;
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 4px 24px rgba(40,99,195,.07);
    transition: box-shadow .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s ease;
}
.blog-card:hover{
    box-shadow: 0 12px 44px -14px rgba(40,99,195,.26);
    border-color: rgba(40,99,195,.26); transform: translateY(-4px);
}
.blog-thumb{ display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #eef3fb; }
.blog-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-thumb img{ transform: scale(1.05); }
.blog-body{ padding: 22px 24px 26px; display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; }
.blog-tag{
    display: inline-flex; padding: 5px 12px; border-radius: 50px;
    background: rgba(40,99,195,.07); border: 1px solid rgba(40,99,195,.16);
    color: #0e48a5; font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 14px;
}
.blog-body h3{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 18px; line-height: 26px; margin: 0 0 18px; letter-spacing: -.2px;
}
.blog-body h3 a{ color: #101828; text-decoration: none; transition: color .2s ease; }
.blog-body h3 a:hover{ color: #0e48a5; }
.blog-link{
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
    color: #0e48a5; text-decoration: none; margin-top: auto; transition: color .2s ease;
}
.blog-link:hover{ color: #7747b6; }

/* Shared heading style for the new sections (mirrors .mcp-intro h2) */
.mcpg-intro h2, .fg-head h2, .prodcta-head h2, .testi-head h2, .blogs-head h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; color: #101828;
    margin: 0 0 20px; letter-spacing: -.6px;
}
.section-mcpgrid .section-sub, .section-featgrid .section-sub,
.section-prodcta .section-sub, .section-testi .section-sub, .section-blogs .section-sub{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 17px; line-height: 28px; color: #4a5568; max-width: 840px; margin: 0 auto;
}

/* ── Responsive ── */
@media (max-width: 1100px){
    .mcpg-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
    .prodcta-grid{ grid-template-columns: 1fr; }
    .testi-grid{ grid-template-columns: 1fr; }
    .blogs-grid{ grid-template-columns: 1fr; }
    .mcpg-intro h2, .fg-head h2, .prodcta-head h2, .testi-head h2, .blogs-head h2{ font-size: 34px; line-height: 44px; }
}
@media (max-width: 560px){
    .mcpg-cards{ grid-template-columns: 1fr; }
    .section-mcpgrid, .section-featgrid, .section-prodcta, .section-testi, .section-blogs{ padding: 72px 0; }
}

/* ── How It Works (QUICK START reuse) — dark-section adaptations for the
   V1.0 content: intro sub-paragraph, text-pill chips on dark bg, step CTA ── */
.qs-sub{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 17px; line-height: 28px; color: rgba(252,252,252,.72);
    margin: 0; max-width: 660px;
}
.section-steps .am-chips{ margin-top: 4px; }
.section-steps .am-chip{
    background: rgba(252,252,252,.05);
    border-color: rgba(159,186,228,.28);
    color: rgba(202,213,226,.85);
    transition: border-color .35s ease, color .35s ease, background .35s ease;
}
.qs-step.is-active .am-chip{
    border-color: rgba(119,71,182,.5);
    background: rgba(119,71,182,.12);
    color: #cdb7f5;
}
.qs-step-cta{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }

/* ════════════════════════════════════════════════════════════════
   CONTINUOUS INDEX-STYLE GRADIENT: hero → steps
   The <body> already carries index.html's exact full-page gradient
   (navy #051A3C + cyan/violet radial glows). The in-range sections were
   opaque (white "Why Ask Me", plus the steps section's own separate navy
   gradient), which broke the flow into dark→white→dark bands. Making them
   transparent lets that ONE shared gradient show through unbroken — matching
   how index.html fades .section-products to transparent. The "Why Ask Me"
   copy + stat tiles are restyled for the dark backdrop.
   ════════════════════════════════════════════════════════════════ */

/* WHY ASK ME (stats) — transparent so the body gradient shows through */
.section-stats{ background: transparent !important; }
/* dark-section eyebrow (was a light blue pill) */
.section-stats .ai-eyebrow{
    background: rgba(252, 252, 252, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #67d3ff;
}
/* heading + sub read on dark (accent span keeps its own gradient fill) */
.section-stats .stats-intro-tile h2{ color: #fcfcfc; }
.section-stats .section-sub{ color: rgba(252, 252, 252, .72); }
/* stat tiles → dark glass; the gradient numbers/labels already read on dark */
.section-stats .stat-tile{
    background: rgba(252, 252, 252, .045);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .20), 0 14px 30px -18px rgba(0, 0, 0, .55);
}
.section-stats .stat-tile:hover{
    border-color: rgba(103, 211, 255, .35);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 24px 48px -20px rgba(18, 182, 248, .30);
}
.section-stats .stat-tile p{ color: rgba(252, 252, 252, .68); }

/* HOW IT WORKS (steps) — index-style smooth dark→light blend. Mirrors
   index.html's .fc-section: a multi-stop 180deg gradient that stays dark
   (navy → indigo → violet → blue) through the content, then lightens to
   light blue across the empty lower area, with a bottom ::after fade that
   melts into the light Data Foundation section below — one continuous blend,
   no hard dark/light seam. The sections above (hero, trusted, Why) sit on
   the same navy, so the whole hero → steps span reads as one gradient. */
.section-steps{
    /* Stays dark through ALL 7 steps (step 7 sits ~85–90% down, so the
       lightening is compressed into the last ~8%); Data Foundation's own
       42% white runway continues the blend, keeping the seam smooth. */
    background: linear-gradient(180deg,
        #051a3c 0%,
        #0a1c42 20%,
        #131f50 40%,
        #1e2060 56%,
        #2a2673 70%,
        #2e3282 80%,
        #33418f 86%,
        #3f57a6 90%,
        #5273bd 93.5%,
        #6b90d0 96.5%,
        #85a7dc 98.5%,
        #9fbae4 100%
    ) !important;
}
/* Bottom fade — transparent → light blue, so the last of the gradient melts
   into Data Foundation instead of ending on a line (matches .fc-section::after). */
.section-steps::after{
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 380px; pointer-events: none; z-index: 0;
    /* Eased fade (not linear) — soft onset, fuller finish */
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(159,186,228,.18) 32%,
        rgba(159,186,228,.55) 62%,
        rgba(159,186,228,.85) 84%,
        #9fbae4 100%);
}
/* Data Foundation begins from that light blue and resolves to white across a
   long runway (~40% of the section, like index's fc-section → personas seam),
   so the steps → Data-Foundation boundary is one continuous blend — the
   intro heading intentionally sits on the tail of the blue tint, exactly as
   index carries its gradient into the personas heading. */
.section-datapool{
    background: linear-gradient(180deg,
        #9fbae4 0%,
        #c6d9f1 12%,
        #e9f2fb 26%,
        #ffffff 42%
    ) !important;
}

/* ── Step-7 CTA — same pair as the site nav (header.css):
   .btn-primary = nav's gradient-fill Start button; .qs-btn-demo mirrors
   .site-header .btn-demo — dark navy padding-box fill with a 2px
   brand-gradient border (border-box trick), white 700 label, radius 6. ── */
.qs-btn-demo{
    position: relative; z-index: 0;   /* stacking context so ::before sits BEHIND the label */
    display: inline-flex; align-items: center; justify-content: center;
    /* Blank fill — the section gradient shows through; only the stroke paints */
    background: transparent;
    border: none;
    color: var(--Base-White, #fcfcfc);
    font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: 15px; line-height: 1.2;
    padding: 14px 28px; border-radius: 6px;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition:
        transform .22s cubic-bezier(.22, .61, .36, 1),
        box-shadow .22s cubic-bezier(.22, .61, .36, 1),
        background .22s ease;
}
/* Gradient stroke on a transparent body — mask-composite ring: the brand
   gradient paints the full box, then everything inside the 2px border zone
   is masked away, leaving only the stroke. */
.qs-btn-demo::before{
    content: ''; position: absolute; inset: 0; z-index: -1;   /* behind the label — text stays visible even if the mask ring doesn't render */
    border-radius: inherit; padding: 2px;
    background: var(--Explore-Button);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
    pointer-events: none;
}
.qs-btn-demo:hover{
    background: rgba(255, 255, 255, .07);
    transform: translateY(-1px);
    box-shadow:
        0 8px 24px -8px rgba(64, 117, 201, .55),
        0 2px 10px -2px rgba(119, 71, 182, .4);
}

/* ════════════════════════════════════════════════════════════════
   WHY LUMENORE ASK ME — clean centered grid (heading + 4 value cards).
   Sits transparent on the shared dark body gradient.
   ════════════════════════════════════════════════════════════════ */
.section-why{
    position: relative;
    background: transparent;
    padding: 100px 0 104px;
    text-align: center;
}
.why-head{ max-width: 760px; margin: 0 auto 56px; }
.why-head .ai-eyebrow{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px; border-radius: 50px;
    background: rgba(252,252,252,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: #67d3ff;
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 11px; line-height: 16px;
    letter-spacing: 1.6px; text-transform: uppercase;
    margin-bottom: 22px;
}
.why-head .ai-eyebrow .ae-dot{
    width: 7px; height: 7px; border-radius: 50%;
    background: linear-gradient(135deg, #12b6f8 0%, #7747b6 100%);
    box-shadow: 0 0 10px rgba(18,182,248,.8);
}
.why-head h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; color: #fcfcfc;
    margin: 0; letter-spacing: -.6px;
}
.why-desc{
    margin: 18px auto 0; max-width: 640px;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 18px; line-height: 30px;
    color: rgba(252,252,252,.72);
}

/* 4-up grid (2x2 on tablet, 1-col on mobile) */
.why-grid{
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 22px; text-align: left;
}
.why-card{
    position: relative;
    padding: 28px 26px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(36,58,110,.42) 0%, rgba(14,28,62,.55) 100%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 40px -20px rgba(0,0,0,.6);
    transition: transform .28s cubic-bezier(.22,.61,.36,1), border-color .28s ease, box-shadow .28s ease;
    overflow: hidden;
}
/* faint cyan->violet gradient edge (mask ring) */
.why-card::before{
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, rgba(18,182,248,.5) 0%, rgba(119,71,182,.38) 55%, rgba(18,182,248,.10) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
    pointer-events: none; opacity: .5; transition: opacity .28s ease;
}
.why-card:hover{
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 20px 50px -20px rgba(18,182,248,.32);
}
.why-card:hover::before{ opacity: 1; }
.why-card-icon{
    width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(18,182,248,.16) 0%, rgba(119,71,182,.20) 100%);
    border: 1px solid rgba(103,211,255,.28);
    color: #67d3ff;
    margin-bottom: 18px;
}
.why-card-icon svg{ width: 22px; height: 22px; }
.why-card-label{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 22px; line-height: 28px; letter-spacing: -.4px;
    background: linear-gradient(90deg, #12b6f8 0%, #67d3ff 45%, #cdb7f5 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    margin: 0 0 8px;
}
.why-card p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14.5px; line-height: 23px;
    color: rgba(252,252,252,.70); margin: 0;
}

@media (max-width: 1024px){
    .why-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px){
    .why-head h2{ font-size: 34px; line-height: 44px; }
    .why-desc{ font-size: 17px; line-height: 28px; }
}
@media (max-width: 560px){
    .section-why{ padding: 72px 0 76px; }
    .why-grid{ grid-template-columns: 1fr; gap: 16px; }
    .why-head h2{ font-size: 27px; line-height: 36px; }
    .why-card{ padding: 22px 22px; }
}

/* ── Customer strip: tighter vertical rhythm ── */
.trusted-section{ padding: 44px 0; }
@media (max-width: 767px){
    .trusted-section{ padding: 32px 0; }
}

/* ── Data Foundation accordion — clean, modern, whitespace-driven:
   no card boxes; hairline separators, ghost icon tiles that fill with the
   brand gradient when active, plain chevron. ── */
.dp-feat-list{ border-top: none; gap: 0; }
.dp-feat-item{
    position: relative;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(16,24,40,.08);
    border-radius: 0;
    box-shadow: none;
    transition: none;
}
.dp-feat-item:last-child{ border-bottom: none; }
.dp-feat-item.is-active{
    background: transparent;
    border-color: rgba(16,24,40,.08);
    box-shadow: none;
}
.dp-feat-head{ padding: 24px 4px; gap: 16px; }

/* ghost icon tile → gradient fill when active */
.dp-feat-icon{
    width: 42px; height: 42px; border-radius: 12px; flex: 0 0 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(16,24,40,.12);
    color: #6b7280;
    transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.dp-feat-icon svg{ width: 20px; height: 20px; }
.dp-feat-head:hover .dp-feat-icon{ border-color: rgba(40,99,195,.35); color: #2863c3; }
.dp-feat-item.is-active .dp-feat-icon{
    background: linear-gradient(135deg, #0e48a5 0%, #2863c5 52%, #7747b6 100%);
    border-color: transparent; color: #ffffff;
    box-shadow: 0 8px 18px -8px rgba(40,99,195,.55);
}

/* plain minimal chevron */
.dp-feat-chevron{
    width: 18px; height: 18px; padding: 0; border: none; border-radius: 0;
    background: none; color: #9aa5b1;
}
.dp-feat-item.is-active .dp-feat-chevron{
    background: none; border: none; color: #2863c3;
    transform: rotate(180deg);
}

/* content aligned under the title column (4 + 42 + 16 = 62) */
.dp-feat-body p{ padding: 0 24px 16px 62px; }
.dp-feat-body .am-chips{ margin: 0; padding: 0 24px 26px 62px; }

@media (max-width: 767px){
    .dp-feat-head{ padding: 18px 2px; }
    .dp-feat-icon{ width: 38px; height: 38px; flex-basis: 38px; }
    .dp-feat-body p{ padding: 0 12px 14px 0; }
    .dp-feat-body .am-chips{ padding: 0 12px 20px 0; }
    .dp-feat-img{ margin: 14px 12px 0 0; }
}


/* ── MCP section: light pastel gradient (matches the insights-new
   enterprise section) — ice-blue → pale blue → lilac + blue dot grid. ── */
.section-mcp{
    background: linear-gradient(135deg,
        var(--Turquoise-SkyBlue-50, #e8f6fa) 0%,
        var(--Royal-Blue-Blue-50, #e7eef8) 55%,
        var(--Violet-Violet-50, #f0ebf7) 100%);
}
.section-mcp::before{
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(40,99,195,.14) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ── Product CTA cards — replicated from insights-new's li2-productcta
   design: pastel violet→blue→cyan tint card, gradient-pill product name,
   plain arrow link, small illustration right. ── */
.pcta-grid{
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 20px; text-align: left;
}
.pcta-card{
    display: flex; align-items: center; gap: 24px;
    padding: 38px 30px 31px;
    border: 1px solid rgba(13,19,33,.1);
    border-radius: 18px;
    background: linear-gradient(90deg,
        rgba(119,71,182,.12) 0%,
        rgba(64,117,201,.12) 50.7%,
        rgba(28,169,201,.12) 100%);
}
.pcta-copy{ flex: 1 1 auto; min-width: 0; }
.pcta-pill{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 17px; border-radius: 50px;
    background: var(--Explore-Button, linear-gradient(270deg, #7747b6, #4075c9, #1ca9c9));
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(40,99,195,.55);
    font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
    margin-bottom: 12px;
}
.pcta-card p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15px; line-height: 26px;
    color: var(--cool-101828, #101828);
    margin: 0 0 13px;
}
.pcta-btn{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0; border: 0; background: none;
    color: var(--Royal-Blue-Blue-400, #4075c9);
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px;
    text-decoration: none;
    transition: color .2s ease;
}
.pcta-btn:hover{ color: var(--Royal-Blue-Blue-500, #0e48a5); }
.pcta-btn svg{ width: 14px; height: 14px; transition: transform .22s ease; }
.pcta-btn:hover svg{ transform: translateX(3px); }
.pcta-img{
    flex: 0 1 auto;
    width: min(38%, 241px);
    height: auto;
    border-radius: 8px;
}
@media (max-width: 900px){
    .pcta-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
    .pcta-card{ flex-direction: column; align-items: flex-start; }
    .pcta-img{ width: min(100%, 293px); align-self: center; }
}

/* Product CTA section: plain white — no gradient band (cards carry their
   own pastel tint; transparent isn't an option here since the dark body
   gradient would bleed through this light stretch of the page). */
.section-prodcta{ background: #ffffff; }

/* ════════════════════════════════════════════════════════════════
   DATA FOUNDATION — polish pass (motion is layout-safe: nothing here
   changes the reserved column height, so the section stays smooth).
   ════════════════════════════════════════════════════════════════ */
/* active title picks up the brand gradient, tying it to the icon accent */
.dp-feat-item.is-active .dp-feat-title{
    background: linear-gradient(90deg, #0e48a5 0%, #2863c5 50%, #7747b6 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
/* icon gives a soft pop the moment it becomes active */
.dp-feat-item.is-active .dp-feat-icon{ animation: dpIconPop .5s cubic-bezier(.22,.61,.36,1); }
@keyframes dpIconPop{ 0%{ transform: scale(.85); } 55%{ transform: scale(1.08); } 100%{ transform: scale(1); } }

/* chips stagger in as the panel opens (fade + rise), fade out on close */
.dp-feat-body .am-chip{
    opacity: 0; transform: translateY(8px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.dp-feat-item.is-active .dp-feat-body .am-chip{ opacity: 1; transform: none; }
.dp-feat-item.is-active .dp-feat-body .am-chip:nth-child(1){ transition-delay: .10s; }
.dp-feat-item.is-active .dp-feat-body .am-chip:nth-child(2){ transition-delay: .16s; }
.dp-feat-item.is-active .dp-feat-body .am-chip:nth-child(3){ transition-delay: .22s; }
.dp-feat-item.is-active .dp-feat-body .am-chip:nth-child(4){ transition-delay: .28s; }
.dp-feat-item.is-active .dp-feat-body .am-chip:nth-child(5){ transition-delay: .34s; }

/* illustration: soft ambient halo behind + gentle float */
.dp-illus-stage::before{
    content: ''; position: absolute; inset: -18% -12%; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(40,99,195,.16) 0%, rgba(119,71,182,.09) 46%, transparent 72%);
    filter: blur(18px);
}
.dp-illus-core-stage{ animation: dpFloat 6s ease-in-out infinite; }
@keyframes dpFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce){
    .dp-feat-item.is-active .dp-feat-icon{ animation: none; }
    .dp-illus-core-stage{ animation: none; }
    .dp-feat-body .am-chip{ transition: none; opacity: 1; transform: none; }
}

/* ── Hero "Request a Demo" — mirrors the site nav's .btn-demo
   (header.css): dark navy padding-box fill + 2px brand-gradient border via
   the border-box trick, white 700 label. Paired with .btn-primary (Start),
   which is the nav's gradient-fill button. ── */
.hero-btn-demo{
    display: inline-flex; align-items: center; justify-content: center;
    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: 15px; line-height: 1.2;
    /* 10px (not 12px) so the 2px gradient border fits inside the same 42px
       box as the .btn-primary it sits beside: 18px line + 20px padding +
       4px border = 42. At 12px it rendered 46px against the sibling's 42. */
    padding: 10px 26px; min-height: 48px; border-radius: 6px;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition:
        transform .22s cubic-bezier(.22, .61, .36, 1),
        box-shadow .22s cubic-bezier(.22, .61, .36, 1),
        background .22s ease;
}
.hero-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);
}

/* ── Animated overlays on the step illustrations (steps 1-6; step 7 has none).
   The SVG shares the PNG's 877×658 coordinate space, so elements align 1:1.
   Only the ACTIVE shot's overlay renders (SMIL pauses when display:none). ── */
.qs-fx{
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 2; pointer-events: none; overflow: visible;
}
.qs-shot:not(.is-active) .qs-fx{ display: none; }
/* glowing flow dots */
.qs-fx-dot circle{ fill: #93c1ec; filter: drop-shadow(0 0 3px rgba(120,175,235,.75)); }
.qs-fx-ring{ filter: drop-shadow(0 0 3px rgba(103,211,255,.6)); }
@media (prefers-reduced-motion: reduce){
    .qs-fx{ display: none !important; }
}

.qs-fx-flow path{ filter: drop-shadow(0 0 1.5px rgba(120,150,210,.45)); }

/* ── Steps visual: reduced size — frame + progress capped and centred ── */
.qs-frame{ max-width: 520px; margin: 0 auto; }
.qs-progress{ max-width: 520px; margin-left: auto; margin-right: auto; }

/* Insights CTA illustration is portrait — cap by height so both platform
   cards stay the same height. */
.pcta-img--tall{ width: auto; max-height: 190px; }

/* ════════════════════════════════════════════════════════════════
   PAGE POLISH — hero aliveness + light-section rhythm (visual only,
   no content changes).
   ════════════════════════════════════════════════════════════════ */

/* ── Hero: the aura behind the product frame gently breathes, giving the
   agent a living/"thinking" presence. Orbs + frame get cursor-reactive
   depth via JS (transform), which composes with heroFloat's `translate`. ── */
.hero-visual-glow{ animation: heroAura 5.5s ease-in-out infinite; will-change: transform, opacity; }
@keyframes heroAura{
    0%, 100%{ transform: translate(-50%, -50%) scale(1);     opacity: .82; }
    50%     { transform: translate(-50%, -50%) scale(1.12);  opacity: 1; }
}
/* transform is driven per-frame by the JS lerp loop (no CSS transition, or
   it would double-smooth and feel laggy) */
@media (prefers-reduced-motion: reduce){
    .hero-visual-glow{ animation: none; }
}

/* ── Section rhythm: the run of light sections after MCP was flat white.
   The Capabilities section becomes a soft cool gradient-mesh band so the
   eye gets a beat (mcp pastel → capabilities tint → white → white),
   without touching any copy. Product CTAs / Blogs stay white as set. ── */
.section-featgrid{
    background:
        radial-gradient(1100px 540px at 18% -6%, rgba(40,99,195,.07) 0%, transparent 62%),
        radial-gradient(920px 540px at 90% 110%, rgba(119,71,182,.06) 0%, transparent 60%),
        linear-gradient(180deg, #f3f6fc 0%, #f6f8fd 100%) !important;
}

/* ════════════════════════════════════════════════════════════════
   TIER-2 CARD POLISH — Why cards, trust logos, product-CTA & blog cards
   (visual/interaction only; no copy changes).
   ════════════════════════════════════════════════════════════════ */

/* ── WHY cards: icon tile pops + fills on hover; the gradient label carries
   a slow AI "sheen" so the section feels alive on the dark band. ── */
.why-card-icon{
    transition: transform .28s cubic-bezier(.22,.61,.36,1), background .28s ease,
                border-color .28s ease, color .28s ease, box-shadow .28s ease;
}
.why-card:hover .why-card-icon{
    transform: scale(1.08);
    background: linear-gradient(135deg, #12b6f8 0%, #2863c5 55%, #7747b6 100%);
    border-color: transparent; color: #fff;
    box-shadow: 0 8px 22px -8px rgba(18,182,248,.6);
}
.why-card-label{ background-size: 220% 100%; animation: whyLabelSheen 6.5s ease-in-out infinite; }
@keyframes whyLabelSheen{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }

/* ── TRUST logos: bigger for confidence, a touch brighter at rest.
   Scoped to desktop/tablet so the ≤767px compact size is preserved. ── */
@media (min-width: 768px){
    .trusted-marquee__item img{ max-height: 50px; max-width: 148px; }
}

/* ── PRODUCT-CTA cards: were static — add lift, glow, and image zoom. ── */
.pcta-card{ transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease; }
.pcta-card:hover{
    transform: translateY(-5px);
    border-color: rgba(40,99,195,.3);
    box-shadow: 0 26px 62px -26px rgba(40,99,195,.36);
}
.pcta-img{ transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.pcta-card:hover .pcta-img{ transform: scale(1.045); }

/* ── BLOG cards: colour-code the category tag per card so the three read
   as distinct at a glance (AI Agent = cyan, BI = violet, Data Mgmt = teal). ── */
.blogs-grid .blog-card:nth-child(1) .blog-tag{
    background: rgba(18,182,248,.10); border-color: rgba(18,182,248,.32); color: #0a7fa8;
}
.blogs-grid .blog-card:nth-child(2) .blog-tag{
    background: rgba(119,71,182,.10); border-color: rgba(119,71,182,.30); color: #6d3bb0;
}
.blogs-grid .blog-card:nth-child(3) .blog-tag{
    background: rgba(20,160,140,.11); border-color: rgba(20,160,140,.32); color: #0f8f7c;
}

@media (prefers-reduced-motion: reduce){
    .why-card-label{ animation: none; }
    .why-card-icon, .pcta-card, .pcta-img{ transition: none; }
}

/* ==== CTA & BUTTON STANDARD (site-wide) ==== */
/* Every action button on the site shares one size: 48px tall, 30px side
   padding, 16px label. The height comes from min-height plus centring,
   not vertical padding, so 0/1/2px borders all land on exactly 48px.
   The header and the mobile nav keep their compact buttons. The same
   block is copied into every page bundle; keep the copies identical. */
body :is(.btn-primary:not(.btn-primary--sm), .btn-demo--lg, .au-btn-demo--lg,
    .btn-ghost, .ab-btn-ghost, .ld-btn-ghost, .ld-btn-outline, .ind-btn-ghost,
    .fi-btn-ghost, .hr-btn-ghost, .mk-btn-ghost, .sl-btn-ghost,
    .hero-btn-outline, .hero-btn-demo, .dm2-ghost-btn, .explore-btn,
    .pr-btn-gradient, .pr-btn-outline, .pr-btn-ghost, .pr-tbl-plan__cta,
    .cs-form__submit, .ct-form__submit, .rd-form__submit, .pt-form__submit,
    .rls-signin, .footer-cta-button):not(.site-header *, header *, .mobile-nav-panel *){
    box-sizing: border-box;
    height: auto;
    min-height: 48px;
    padding: 0 30px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;   /* one weight for every CTA — matches the homepage */
    align-items: center;
    justify-content: center;
}
/* Buttons that were plain blocks need flex so the label centres vertically. */
body :is(.btn-ghost, .pr-btn-gradient, .pr-btn-outline, .pr-btn-ghost, .pr-tbl-plan__cta):not(.site-header *, header *, .mobile-nav-panel *){
    display: flex;
}

/* End-of-page CTA card: one height on every page (460px on desktop, 570px
   on tablet where the copy wraps more), copy centred vertically, width
   follows the container. */
@media (min-width: 768px){
    .mcp-cta-card, .au-cta__card, .di-final-cta__card, .ld-cta__card{
        box-sizing: border-box;
        min-height: 460px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
@media (min-width: 768px) and (max-width: 1023px){
    .mcp-cta-card, .au-cta__card, .di-final-cta__card, .ld-cta__card{ min-height: 570px; }
}
/* 128px of clear space above and below this page's CTA card. */
@media (min-width: 768px){
    .section-mcp-cta{ padding-top: 32px; padding-bottom: 128px; }
}

/* Secondary CTA appearance — the geometry above only unified SIZE, which is
   why these still looked different page to page. The gradient border uses the
   padding-box / border-box layer pair so it respects border-radius.
   --cta-surface is the colour the button sits ON; set it (and --cta-ink) on a
   light section so the inner fill and label stay legible there. */
body :is(.btn-demo--lg, .au-btn-demo--lg, .btn-ghost, .ab-btn-ghost, .ld-btn-ghost,
    .ind-btn-ghost, .fi-btn-ghost, .hr-btn-ghost, .mk-btn-ghost, .sl-btn-ghost,
    .hero-btn-outline, .hero-btn-demo, .dm2-ghost-btn):not(.site-header *, header *, .mobile-nav-panel *,
    .au-cta__card *, .di-final-cta__card *, .dm2-res-cta *, .mcp-cta-card *) {
    border: 2px solid transparent;
    border-radius: 6px;
    background:
        linear-gradient(var(--cta-surface, #051A3C), var(--cta-surface, #051A3C)) padding-box,
        var(--Explore-Button, linear-gradient(270deg, #7747b6 0%, #4075c9 50.7%, #1ca9c9 100%)) border-box;
    color: var(--cta-ink, #fcfcfc);
    font-family: 'Inter', sans-serif;
    font-weight: 600;   /* matches the primary — homepage CTA is the source of truth */
    text-decoration: none;
    transition: filter .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
body :is(.btn-demo--lg, .au-btn-demo--lg, .btn-ghost, .ab-btn-ghost, .ld-btn-ghost,
    .ind-btn-ghost, .fi-btn-ghost, .hr-btn-ghost, .mk-btn-ghost, .sl-btn-ghost,
    .hero-btn-outline, .hero-btn-demo, .dm2-ghost-btn):not(.site-header *, header *, .mobile-nav-panel *,
    .au-cta__card *, .di-final-cta__card *, .dm2-res-cta *, .mcp-cta-card *):hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
/* ==== /CTA & BUTTON STANDARD ==== */