/* ============================================================
   embedded-analytics.css
   Single bundled stylesheet for embedded-analytics.html
   Sources (in cascade order):
     1. index.css
     2. ask-me.css
     3. the shared product-page component sets (dm2-*, dv-*, aa-*,
        mcp-drag-*, mcp-cta, FAQ finale)
     4. the .ea-* page block at the end of this file
   ============================================================ */

/* ── 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; }
}

/* The three product-theme controls belong to the dashboard illustration;
   they do not alter the surrounding section, cards or page layout. */
#your-product-your-experience .ea-native-theme{
    appearance: none;
    cursor: pointer;
    animation: none;
    opacity: .48;
    transition: opacity .25s ease, transform .25s ease, color .25s ease,
        border-color .25s ease, box-shadow .25s ease;
}
#your-product-your-experience .ea-native-theme:hover,
#your-product-your-experience .ea-native-theme:focus-visible{ opacity: 1; transform: translateY(-1px); }
#your-product-your-experience .ea-native-theme:focus-visible{ outline: 2px solid #2863c3; outline-offset: 2px; }
#your-product-your-experience .ea-native-theme.is-active{
    opacity: 1;
    color: #101828;
    border-color: rgba(40,99,195,.24);
    box-shadow: 0 7px 18px rgba(40,99,195,.1);
}
#your-product-your-experience .ea-native-brand{
    position: absolute;
    z-index: 4;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(40,99,195,.14);
    box-shadow: 0 15px 28px rgba(16,24,40,.16);
    color: #7747b6;
}
#your-product-your-experience .ea-native-brand svg{ width: 29px; height: 29px; display: block; }
#your-product-your-experience .ea-native-brand small{
    color: #101828;
    font: 600 7px/1 'JetBrains Mono', monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
#your-product-your-experience .ea-native-palette{
    position: absolute;
    z-index: 5;
    left: -10px;
    top: 47%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 38px;
    padding: 9px 5px;
    border-radius: 20px;
    color: #101828;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(40,99,195,.12);
    box-shadow: 0 14px 28px rgba(16,24,40,.16);
}
#your-product-your-experience .ea-native-palette svg{ width: 15px; height: 15px; margin-bottom: 1px; }
#your-product-your-experience .ea-native-palette i{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2863c3;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(16,24,40,.13);
    transition: background .4s ease;
}
#your-product-your-experience .ea-native-palette i:nth-of-type(2){ background: #9fbae4; }
#your-product-your-experience .ea-native-palette i:nth-of-type(3){ background: #7747b6; }
#your-product-your-experience .ea-native-palette i:nth-of-type(4){ background: #101828; }
#your-product-your-experience[data-native-palette="2"] .ea-native-palette i:nth-of-type(1){ background: #7747b6; }
#your-product-your-experience[data-native-palette="2"] .ea-native-palette i:nth-of-type(2){ background: #b79bff; }
#your-product-your-experience[data-native-palette="2"] .ea-native-palette i:nth-of-type(3){ background: #6253a8; }
#your-product-your-experience[data-native-palette="3"] .ea-native-palette i:nth-of-type(1){ background: #1ca9c9; }
#your-product-your-experience[data-native-palette="3"] .ea-native-palette i:nth-of-type(2){ background: #a9dbe8; }
#your-product-your-experience[data-native-palette="3"] .ea-native-palette i:nth-of-type(3){ background: #0f7f99; }
#your-product-your-experience .ea-nv-skin{ opacity: 0; animation: none; transition: opacity .45s ease; pointer-events: none; }
#your-product-your-experience .ea-nv-skin.is-active{ opacity: 1; }
@media (max-width: 767px){
    #your-product-your-experience .ea-native-brand{ top: 42px; transform: translateX(-50%) scale(.76); transform-origin: top center; }
    #your-product-your-experience .ea-native-palette{ left: -4px; transform: translateY(-50%) scale(.74); }
}
.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: flex-start;
    cursor: pointer;
}
.hero-search-inner .tools-btn{
    height: 35.534px;
    padding: 0 16px 0 12px;
    border-radius: 50px;
    background: var(--blueGray-700, #334155);
    border: none;
    color: var(--Base-White, #fcfcfc);
    display: inline-flex;
    align-items: center;
    gap: 4.442px;
    font-size: 13.33px;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
    letter-spacing: -.27px;
}
.hero-search-inner .tools-btn svg{ width: 18px; height: 18px; }
.hero-search-inner .spacer{ flex: 1; }
.hero-search-inner .explore-btn{
    background: var(--Explore-Button);
    color: var(--Base-White, #fcfcfc);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 25px;
    cursor: pointer;
}
.hero-search-inner .explore-btn svg{ width: 18px; height: 18px; }

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

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

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

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

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

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

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

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

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

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

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

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

.product-detail .pd-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pd-accent-bg);
    border: 1px solid var(--pd-accent-border);
    co lor: var(--pd-accent);
    padding: 6px 14px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.165px;
    text-transform: uppercase;
    /* Uniform 34px rhythm between every block in the product-detail panel:
       pill → h3 → paragraph → chips → quote → cta. */
    margin-bottom: 34px;
}
.product-detail .pd-pill::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pd-accent);
}
.product-detail h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.3px;
    color: var(--Base-White, #fcfcfc);
    margin: 0 0 34px;

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

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

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

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

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

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


}
.section-features h2 .fh-accent{
    /* Plain white — matches the rest of the heading. Italic stays for
       typographic emphasis. The parent h2's text-shadow now applies
       directly (no background-clip transparency to break it). */
    color: var(--Base-White, #fcfcfc);
    font-style: italic;
}
.section-features .section-sub{
    font-family: 'inter', serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 28px;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.psr-eyebrow{
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--pa-accent);
    margin-bottom: 14px;
    transition: color .4s ease;
}
.psr-title{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 32px;
    color: var(--cool-101828, #101828);
    margin: 0 0 18px;
    letter-spacing: -.2px;

}
.psr-bullets{
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.psr-bullets li{
    position: relative;
    padding-left: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #4a5568;
}
.psr-bullets li::before{
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pa-accent) 0%, var(--pa-accent-secondary) 100%);
    box-shadow: 0 0 0 3px var(--pa-accent-soft);
    transition: background .4s ease, box-shadow .4s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===========================================================
 * Responsive
 * ----------------------------------------------------------- */
@media (max-width: 1199px){
    .site-footer .footer-nav{ grid-template-columns: 1fr repeat(3, 1fr); row-gap: 48px; }
    .brand-col{ grid-column: 1 / -1; }
    .product-stage{ gap: 40px; }
}
@media (max-width: 991px){
    /* 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; }
    .site-header .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; }
    .trust-badges{ justify-content: center; }
    .before-decide{ grid-template-columns: 1fr; gap: 32px; }
    .before-decide ul{ grid-template-columns: 1fr; }
    .site-footer .footer-nav{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px){
    .container{ padding: 0 20px; }
    .hello-bar{ 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: 42px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.1px;
    color: #fff;
    white-space: nowrap;
    /* Brand gradient — exact Figma 994:29784 "Start for Free" button spec:
       linear-gradient(to left, #7747B6 0%, #4075C9 50.718%, #1CA9C9 100%).
       Direction `to left` matches Figma's bg-gradient-to-l: turquoise on
       the left, royal-blue at the 50.718% middle stop, violet on the right. */
    background-image: linear-gradient(to left,
        #7747B6 0%,
        #4075C9 50.718%,
        #1CA9C9 100%);
    background-color: transparent;
    background-size: 100% 100%;
    background-position: 50% 50%;
    box-shadow:
        0 8px 22px -10px rgba(64, 117, 201, .55),
        0 2px 8px -2px rgba(119, 71, 182, .35),
        inset 0 1px 0 rgba(255, 255, 255, .14);
    transition:
        transform .25s cubic-bezier(.22, .61, .36, 1),
        box-shadow .25s cubic-bezier(.22, .61, .36, 1),
        filter .35s cubic-bezier(.22, .61, .36, 1);
    /* Subtle brightness pulse — keeps the button feeling alive without
       drifting the colors away from the Figma spec (no gradient pan). */
    animation: btnBreathe 6s ease-in-out infinite;
    overflow: hidden;
}
/* Sheen sweep — a diagonal white highlight that crosses the button on hover */
.btn-primary.btn-primary::before{
    content: "";
    position: absolute;
    top: -50%; bottom: -50%;
    left: -120%;
    width: 60%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, .35) 50%,
        rgba(255, 255, 255, 0) 65%,
        transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: -1;
    transition: left .9s cubic-bezier(.22, .61, .36, 1);
}
.btn-primary.btn-primary:hover{
    transform: translateY(-2px);
    /* Slightly brighten on hover (overrides per-section :hover filters
       like .product-detail .pd-cta:hover and .site-header .btn-start:hover
       so the primary motion language is the only thing that fires). */
    filter: brightness(1.06) !important;
    box-shadow:
        0 14px 32px -10px rgba(64, 117, 201, .7),
        0 6px 14px -4px rgba(119, 71, 182, .45),
        inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary.btn-primary:hover::before{ left: 130%; }
.btn-primary.btn-primary:active{ transform: translateY(0); transition-duration: .1s; }
.btn-primary.btn-primary:focus-visible{
    outline: 2px solid #c4b5fd;
    outline-offset: 3px;
}
/* Arrow icon (any nested SVG or arrow span) — slides on hover */
.btn-primary.btn-primary svg,
.btn-primary.btn-primary .btn-arrow,
.btn-primary.btn-primary .pd-cta-arrow,
.btn-primary.btn-primary .ps-cta-arrow{
    display: inline-flex;
    align-items: center;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.btn-primary.btn-primary:hover svg,
.btn-primary.btn-primary:hover .btn-arrow,
.btn-primary.btn-primary:hover .pd-cta-arrow,
.btn-primary.btn-primary:hover .ps-cta-arrow{
    transform: translateX(4px);
}
/* Size variants */
.btn-primary.btn-primary.btn-primary--sm{
    padding: 8px 18px;
    min-height: 36px;
    font-size: 13.5px;
    gap: 8px;
}
.btn-primary.btn-primary.btn-primary--lg{
    padding: 14px 30px;
    min-height: 52px;
    font-size: 16px;
    gap: 12px;
}
/* Ghost variant — neutral pill for placements where the gradient would
   compete with surrounding accent. Same shape + sheen, no gradient. */
.btn-primary.btn-primary.btn-primary--ghost{
    background-image: none;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #f1f5f9;
    animation: none;
    box-shadow: none;
}
.btn-primary.btn-primary.btn-primary--ghost:hover{
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}
/* Breathing pulse — gentle brightness oscillation (1.0 → 1.03 → 1.0).
   Replaces the previous background-position pan so the gradient colors
   stay locked to the Figma spec at every frame; only the overall
   luminance breathes. */
@keyframes btnBreathe{
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.03); }
}
@media (prefers-reduced-motion: reduce){
    .btn-primary{ animation: none !important; transition: none !important; }
    .btn-primary::before{ display: none; }
    .btn-primary:hover{ transform: none; }
    .btn-primary:hover svg,
    .btn-primary:hover .btn-arrow,
    .btn-primary:hover .pd-cta-arrow,
    .btn-primary:hover .ps-cta-arrow{ transform: none; }
}



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

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

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

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

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

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

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

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


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

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

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

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

@media (max-width: 991px){
    .container{ padding: 0 24px; }
    .hello-bar{ padding: 10px 24px 11px; }
    .site-header{ padding: 14px 24px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ════════════════════════════════════════════════════════════════
   SITE NAV — frosted-glass treatment
   Replace the solid dark navy bar with a translucent, blurred,
   subtly brand-tinted glass surface so the page content shows
   through (premium SaaS feel, matches the dropdown panels).
   Adds:
     · semi-transparent navy fill + 16px Gaussian backdrop blur
     · 1px white inner-highlight rim along the top edge
     · 1px brand-gradient hairline along the bottom edge
     · soft brand glow shadow beneath
   Doubled-class selector ensures we beat the linked stylesheet's
   equal-specificity `background: #051A3C` solid fill.
   ════════════════════════════════════════════════════════════════ */
.site-top.site-top{
    position: sticky;
    top: 0;
    z-index: 200;
    background: transparent;
    border-bottom: none;
}
.hello-bar.hello-bar{
    background: rgba(7, 33, 75, .55);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
            backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.site-header.site-header{
    position: relative;
    background: rgba(3, 13, 30, .55);
    -webkit-backdrop-filter: blur(18px) saturate(155%);
            backdrop-filter: blur(18px) saturate(155%);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 8px 24px -16px rgba(0, 0, 0, .35);
}
/* Subtle brand-gradient hairline along the bottom edge of the
   main nav — ties the header to the same accent language used on
   every dropdown's top edge. */
.site-header.site-header::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(119, 71, 182, .35) 22%,
        rgba(40, 99, 195, .42) 50%,
        rgba(28, 169, 201, .35) 78%,
        transparent 100%);
    pointer-events: none;
}
/* .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: 500;
    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: 12px 28px; 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; 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: 20px; 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: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
}

.op-card{
    display: flex; flex-direction: column;
    border-radius: 20px;
    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);
    padding: 20px 20px 32px;
    transition: box-shadow .4s ease, transform .4s cubic-bezier(.22,.61,.36,1), border-color .3s ease;
}
.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);
}

/* ── Floating tilt-frame — same cursor-tilt technique as the Process
   Automation screenshots (.pi-visual), applied to the whole browser-chrome
   mockup instead of a bare image so the frame + GIF tilt as one rigid card. ── */
.op-tilt-frame{
    border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 8px 24px -10px rgba(16,24,40,.18);
    margin-bottom: 28px;
    transition: transform .25s ease-out, box-shadow .25s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}
.op-card:hover .op-tilt-frame{ box-shadow: 0 14px 34px -10px rgba(16,24,40,.24); }
.op-frame-bar{
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    background: #f4f6fa;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.op-frame-dot{ width: 9px; height: 9px; border-radius: 50%; }
.op-frame-dot--red{ background: #ff5f57; }
.op-frame-dot--yellow{ background: #febc2e; }
.op-frame-dot--green{ background: #28c840; }
.op-frame-shot{
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #f4f6fa;
}
.op-frame-shot img{
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: top;
}
.op-frame-lottie{ width: 100%; height: 100%; }
.op-frame-lottie svg{ display: block; }
@media (prefers-reduced-motion: reduce){ .op-tilt-frame{ transition: none; } }

.op-body{ padding: 0 8px; }
.op-body-top{
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
}
.op-icon{
    width: 44px; height: 44px; border-radius: 12px; 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--askme .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: 20px; height: 20px; 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--askme  .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--askme  .op-pill::before{ background: #1ca9c9; }

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

.op-link{
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14.5px;
}
.op-card--insights .op-link{ color: #2863c3; }
.op-card--askme .op-link{ color: #1ca9c9; }
.op-link svg{ transition: transform .25s ease; }
.op-card:hover .op-link svg{ transform: translateX(3px); }

@media (max-width: 767px){
    .op-cards{ grid-template-columns: 1fr; }
}
@media (max-width: 575px){
    .op-intro h2{ font-size: 26px; line-height: 36px; }
    .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; }
    .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: 21px; }
    .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{
    overflow: hidden;
    max-height: 0; opacity: 0; transform: translateY(-6px);
    transition: max-height .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease, transform .3s ease;
}
.dp-feat-item.is-active .dp-feat-body{
    max-height: 160px; opacity: 1; transform: translateY(0);
    transition: max-height .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease .08s, transform .4s ease .08s;
}
.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;
}

/* ── 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 Figma cards' 341×219 proportions */
    aspect-ratio: 341 / 219;
}
/* 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;
}

/* ════════════════════════════════════════════════════════════════
   PROCESS AUTOMATION — Figma "info split" pattern
   (figma.com/design/UwNoD3i1IN0dtK5sJStZBJ?node-id=2889-38002).
   lumenore-data-magnet.html only. One centered intro, then 4 full-width
   rows — one per pipeline stage (Extract/Transform/Load/Build) — each a
   text column (accent line + h3 + paragraph) beside a real product
   screenshot (the glow/border treatment is already baked into the PNG
   export, so .pi-visual just floats the image, no extra card chrome).
   Rows alternate text/image sides and step through the site's existing
   brand-tint ramp: white → blue-50 → violet-50 → turquoise-50, matching
   the 4 background swatches shown in the Figma exploration frame.
   ════════════════════════════════════════════════════════════════ */
/* overflow MUST stay visible — any ancestor with overflow != visible
   breaks position:sticky on the .pi-card children below. */
.section-process{ background: var(--Base-White, #fcfcfc); padding: 96px 0 0; }
.pi-intro{ text-align: center; max-width: 680px; margin: 0 auto 72px; }
.pi-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;
    letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 20px;
}
.pi-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;
}
.pi-intro h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; letter-spacing: -.6px;
    color: var(--cool-101828, #101828); margin: 0 0 16px;
}
.pi-intro p{
    font-family: 'Inter', sans-serif; font-size: 16px; line-height: 27px; color: #4a5568; margin: 0;
}

/* ── Scroll-driven deck (figma.com/design/UwNoD3i1IN0dtK5sJStZBJ?node-id=2896-51157) ──
   NOTE: an earlier version of this gave EACH step its own
   `position:sticky` element sharing one `top`. Verified via headless
   Chrome (Playwright) that this does NOT hand off cleanly — without a
   dedicated scroll "runway" per sibling, adjacent sticky elements catch
   up to the same offset and stay stuck together indefinitely instead of
   releasing in sequence. The reliable pattern (same one this file's own
   qs-visual-sticky/"Quick Start" section already uses) is ONE sticky
   container whose CONTENT is swapped by scroll progress through a tall
   wrapper — .pi-deck provides that scroll distance, .pi-deck-inner is
   the single sticky element, and script at the bottom of the page picks
   which .pi-active step is shown and which .pi-peek steps (remaining,
   heading-only, stacked below it) are visible, based on how far the
   user has scrolled through .pi-deck. */
.pi-deck{ position: relative; height: 360vh; }
/* The sticky container itself is the width-constrainer (like a .container)
   so it reads as a boxed column, not a full-bleed strip — page background
   stays visible on either side at wide viewports. Fixed to (most of) the
   viewport height and laid out as a flex column so the active step
   (flex:1) fills whatever room the compact peek strips below it don't
   use — the two together always fill the full available height, closing
   the dead space a shorter fixed-height panel would leave beneath it. */
/* top/height use 132px, not the site's usual 96-ish assumption — measured
   the actual sticky nav (.site-top: hello-bar 44px + site-header 81px) at
   125px tall via headless Chrome; the nav's z-index:200 was rendering on
   top of and clipping the tab bar when this used a shorter offset. */
.pi-deck-inner{
    position: sticky;
    top: 132px;
    height: calc(100vh - 132px - 32px);
    max-width: 1320px; margin: 0 auto; padding: 0 32px;
    display: flex; flex-direction: column;
}

/* Tab bar now lives inside the sticky column (see HTML) so it pins
   together with the active card/peeks instead of scrolling away on its
   own — it takes a fixed slice of the same viewport-height budget, so
   its own padding/margins are tightened from the standalone-section
   values .mcp-drag-* normally ships with. */
#piTabs{ flex: 0 0 auto; }
#piDeck .mcp-drag-viewport{ padding: 4px 0 12px; }
#piDeck .mcp-drag-progress{ margin: 0 auto 16px; }

/* Every step — active or peek — is its OWN independently rounded card,
   but instead of sitting apart with a gap, each waiting step is pulled
   UP (negative margin-top) to tuck partway behind the one above it —
   only its bottom portion (the heading) stays visible, peeking out from
   under the active card's/previous peek's bottom edge. z-index keeps the
   stack order correct: peeks draw IN FRONT of the active card (and of
   each other, later peek over earlier peek) — the active card sits
   furthest back, overlapped from below. */
.pi-active,
.pi-peek{
    border-radius: 20px;
    box-shadow: 0 10px 30px -12px rgba(13,27,46,.14);
    position: relative;
}
/* Peeks tuck flush under the card above with no gap — a rounded top edge
   would show as a stray curve against that flat seam, so only the
   bottom corners (the visible "lip") stay rounded. */
/* Stronger, tighter shadow than the shared .pi-active one — peeks only
   expose a thin strip, so the softer/wider shared shadow barely read at
   that scale. This one is tuned to be visible within that small band. */
.pi-peek{ border-radius: 0 0 20px 20px; box-shadow: 0 10px 18px -6px rgba(13,27,46,.28), 0 3px 8px rgba(13,27,46,.12); }
/* Subtle border — without it the white-tint step has no visible edge
   against the section's own white background (shadow was doing all the
   work); a faint border keeps it defined even where color contrast can't help. */
.pi-active{ display: none; flex: 1 1 auto; min-height: 0; overflow: hidden; z-index: 1; border: 1px solid rgba(40,99,195,.12); }
.pi-text-body .mcp-drag-count{ display: block; margin: 0 0 6px; }
.pi-active.is-current{ display: flex; align-items: center; }
.pi-active .pi-row-inner{ width: 100%; padding: 28px 40px; }
.pi-active--tint-white{     background: var(--Base-White, #fcfcfc); }
.pi-active--tint-blue{      background: var(--Royal-Blue-Blue-50, #e7eef8); }
.pi-active--tint-violet{    background: var(--Violet-Violet-50, #f0ebf7); }
.pi-active--tint-turquoise{ background: var(--Turquoise-SkyBlue-50, #e8f6fa); }

.pi-row-inner{
    display: grid; grid-template-columns: minmax(0,380px) minmax(0,1fr);
    gap: 40px; align-items: center;
}
.pi-active--reverse .pi-row-inner{ grid-template-columns: minmax(0,1fr) minmax(0,380px); }
.pi-active--reverse .pi-text{ order: 2; }
.pi-active--reverse .pi-visual{ order: 1; }

/* Dot + dashed vertical line marker beside the heading — reuses
   .mcp-drag-marker/.mcp-drag-dot verbatim from ask-me.html's "Beyond AI
   Chat" section (defined further down this file) instead of the plain
   solid gradient bar .pi-line used previously. */
.pi-text{ position: relative; padding-left: 30px; }
.pi-text-body h3{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 28px; line-height: 34px; letter-spacing: -.4px;
    color: var(--cool-101828, #101828); margin: 0 0 12px;
}
.pi-text-body p{
    font-family: 'Inter', sans-serif; font-size: 15px; line-height: 24px; color: #4a5568; margin: 0;
}

/* Cursor-tilt — same technique as ask-me.html's .mcp-drag-tilt (Beyond AI
   Chat section): JS sets rotateX/rotateY on mousemove based on cursor
   position within the image, easing back to flat on mouseleave. Swapped
   in for the plain float-bob this used before, since a bob animation
   would fight the JS-driven transform on the same element. */
.pi-visual{ display: flex; justify-content: center; perspective: 900px; }
.pi-visual img{
    display: block; width: 100%; max-width: 640px; height: auto;
    filter: drop-shadow(0 20px 40px rgba(13,27,46,.14));
    transition: transform .25s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Remaining (not-yet-active) steps — compact heading-only cards, stacked
   directly below the active one inside the same sticky column, all
   simultaneously visible. */
.pi-peek-list{ display: flex; flex-direction: column; flex: 0 0 auto; }
.pi-peek{ display: none; flex: 0 0 auto; overflow: hidden; margin-top: -26px; }
.pi-peek.is-visible{ display: block; }
/* Uniform margin-top on every .pi-peek (rather than gap, or a rule keyed
   off :first-child) so the overlap amount stays consistent no matter
   which step is first-visible — :first-child/gap would only "know" about
   DOM position, not which peeks are currently display:none. */
.pi-peek:nth-of-type(1){ z-index: 2; }
.pi-peek:nth-of-type(2){ z-index: 3; }
.pi-peek:nth-of-type(3){ z-index: 4; }
.pi-peek-inner{ padding: 22px 32px; }
.pi-peek h4{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 22px; line-height: 28px; letter-spacing: -.3px;
    color: var(--cool-101828, #101828); margin: 0;
}
.pi-peek--tint-white{     background: var(--Base-White, #fcfcfc); }
.pi-peek--tint-blue{      background: var(--Royal-Blue-Blue-50, #e7eef8); }
.pi-peek--tint-violet{    background: var(--Violet-Violet-50, #f0ebf7); }
.pi-peek--tint-turquoise{ background: var(--Turquoise-SkyBlue-50, #e8f6fa); }

@media (prefers-reduced-motion: reduce){
    /* Scroll-driven swapping is a motion effect in itself — fall back to
       a plain stacked list of all 4 full steps, no pinning/JS stepping. */
    .pi-deck{ height: auto; }
    .pi-deck-inner{ position: static; height: auto; display: block; }
    .pi-active{ display: flex !important; margin-bottom: 14px; }
    .pi-peek-list{ display: none !important; }
}

@media (max-width: 991px){
    .pi-row-inner,
    .pi-active--reverse .pi-row-inner{ grid-template-columns: 1fr; gap: 28px; }
    .pi-active--reverse .pi-text{ order: 1; }
    .pi-active--reverse .pi-visual{ order: 2; }
    .pi-intro h2{ font-size: 34px; line-height: 44px; }
    .pi-active .pi-row-inner{ padding: 40px 32px; }
}
@media (max-width: 600px){
    .section-process{ padding: 72px 0 0; }
    .pi-intro{ margin-bottom: 48px; }
    .pi-deck-inner{ height: calc(100vh - 132px - 32px); padding: 0 16px; }
    .pi-active .pi-row-inner{ padding: 28px 20px; }
    .pi-peek-inner{ padding: 16px 20px; }
    .pi-text-body h3{ font-size: 26px; line-height: 32px; }
    .pi-peek h4{ font-size: 19px; line-height: 24px; }
}

/* ════════════════════════════════════════════════════════════════
   CONVERSATION INTELLIGENCE (light, Scroll 6)
   ════════════════════════════════════════════════════════════════ */
.section-conv-intel{
    /* Plain background — was a pale brand-gradient tint + dot-grid; removed
       so the section reads as an open, uncolored area. Cards now carry all
       the visual weight/separation via shadow + border below, since they
       no longer sit against a distinct tinted backdrop. */
    background: var(--Base-White, #fcfcfc);
    padding: 96px 0; position: relative;
}
.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;
}
/* Enhanced since the section background was removed — cards now sit on
   plain white, so a bigger ambient shadow + more rounded corners carry
   the "floating card" separation that the tinted backdrop used to help
   with, instead of the tighter, flatter shadow this had before. */
.ci-card{
    background: #fff;
    border: 1px solid rgba(40,99,195,.10);
    border-radius: 22px;
    padding: 40px 36px;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 48px -24px rgba(13,27,46,.18), 0 2px 10px rgba(13,27,46,.05);
    transition: box-shadow .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease;
}
.ci-card:hover{
    box-shadow: 0 30px 60px -20px rgba(40,99,195,.3), 0 6px 16px rgba(13,27,46,.08);
    border-color: rgba(40,99,195,.26);
    transform: translateY(-5px);
}
.ci-card-icon{
    width: 58px; height: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2863c5 0%, #4c3bc7 55%, #7747b6 100%);
    display: flex; align-items: center; justify-content: center;
    color: #ffffff;
    box-shadow: 0 12px 24px -8px rgba(40,60,195,.5);
    margin-bottom: 26px; flex-shrink: 0;
}
.ci-card-icon svg{ width: 24px; height: 24px; }
.ci-card h5{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 19px; line-height: 27px; 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;
    /* No edge-fade mask here (unlike the ask-me source): with only 6
       short pills the strip rarely overflows, so the fade just clipped
       the first/last pill's own left/right edge into a blurry sliver
       instead of reading as "more content to scroll". */
}
.mcp-drag-viewport::-webkit-scrollbar{ display: none; }
.mcp-drag-viewport.is-grabbing{ cursor: grabbing; }
/* Only 6 short pills here (vs. ask-me's 8 longer ones), so the strip
   rarely overflows its container — center it instead of hugging left
   with dead space on the right. "safe" keeps it left-aligned/scrollable
   on narrow viewports where the pills DO overflow, instead of clipping
   the first pill off-screen the way plain "center" would. */
#dmCapDrag .mcp-drag-viewport,
#eaCapDrag .mcp-drag-viewport{ display: flex; justify-content: safe center; }
.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: 96px 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); }

/* 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: 16 / 10.5;
    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: top center;
}

/* 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;
}

/* Grid — 4 columns, 4 cards per slide (lumenore-data-magnet.html) */
.am-fc-grid{ display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 16px; row-gap: 0; }

/* 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; }

/* ── Carousel slide show/hide ── */
.am-fc-slide{ display: none; }
.am-fc-slide.is-active{ 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 */
@media (max-width: 1199px){
    .am-fc-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px){
    .am-fc-grid{ grid-template-columns: repeat(2, 1fr); }
    .am-fc-section .fc-heading{ font-size: 34px; line-height: 44px; }
}
@media (max-width: 600px){
    .am-fc-grid{ grid-template-columns: 1fr; }
    .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: #fff; padding: 32px 0 96px;
}
.mcp-cta-card{
    position: relative; overflow: hidden;
    border-radius: 28px;
    padding: 48px 56px 52px;
    /* 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; }

/* ── Final CTA card enrichment — the wide card read as empty around its
   short centred copy, so two blurred brand glow orbs (cyan top-left,
   violet bottom-right) sit behind the dot grid for ambient depth, and an
   eyebrow pill (docx Scroll 10's own "Get Started" label) tops the stack.
   Same orb recipe as the Insights mid CTA. ── */
.section-mcp-cta .mcp-cta-card::before,
.section-mcp-cta .mcp-cta-card::after{
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
}
.section-mcp-cta .mcp-cta-card::before{
    width: 460px; height: 320px;
    top: -120px; left: 4%;
    background: rgba(28,169,201,.28);
}
.section-mcp-cta .mcp-cta-card::after{
    width: 500px; height: 340px;
    bottom: -150px; right: 3%;
    background: rgba(119,71,182,.34);
}
.dm2-cta-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);
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 11px; line-height: 16px; letter-spacing: 1.6px;
    text-transform: uppercase; color: #67d3ff;
}
.dm2-cta-eyebrow-dot{
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #1ca9c9 0%, #7747b6 100%);
    box-shadow: 0 0 0 3px rgba(255,255,255,.1);
}

/* ════════════════════════════════════════════════════════════════
   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: 780px; 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; }
/* Inverted gradient-border button on dark bg per §8: dark inner fill + --Explore-Button border */
.btn-demo--lg{
    padding: 12px 28px; font-size: 16px;
    background: var(--Explore-Button, linear-gradient(270deg,#7747b6,#4075c9,#1ca9c9)) border-box,
                rgba(0,0,0,.25) padding-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;
    transition: filter .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.btn-demo--lg:hover{ filter: brightness(1.1); transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════════
   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; }
    .dp-illus-stage{ max-width: 520px; margin: 0 auto; }
    .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, visual panel becomes a static block below them. */
    .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-visual-sticky{ position: static; height: auto; display: block; transform: none !important; }
    .qs-head h2{ font-size: 34px; line-height: 44px; }
}
@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: 440px; }
    .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: 340px; }
    .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; }
}

/* ═══════════════════════════════════════════════════
   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;
}

/* ════════════════════════════════════════════════════════════════
   OTHER PRODUCTS (light) — lumenore-data-magnet.html only.
   Reuses the .ci-intro/.ai-eyebrow heading pattern for the intro, and
   the .op-cards/.op-card--insights/.op-card--askme GIF-visual split-row
   pattern (defined earlier, §OTHER PRODUCTS — horizontal split rows)
   for the cards themselves — same component the rest of the bundle
   already ships, just not wired into this page's markup until now.
   ════════════════════════════════════════════════════════════════ */
.section-other-products{
    background: var(--Base-White, #fcfcfc);
    padding: 32px 0 96px;
    position: relative; z-index: 3;
}
.section-other-products .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-other-products .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;
}
.op-intro{ text-align: center; max-width: 680px; margin: 0 auto 48px; }

/* ════════════════════════════════════════════════════════════════════════
   PRODUCT CTA — "Explore the Lumenore Platform" (Scroll 11)
   Ported verbatim (selectors, values, breakpoints) from
   assets/css/v2o/ask-me-new.css's .section-prodcta/.pcta-* block, which is
   itself reused as-is on lumenore-ask-me-new.html — same component, same
   look, on a third page. Not part of the copied data-magnet-bundle.css
   above; this is new, sourced from the ask-me stylesheet instead of
   hand-authored, hence its own banner rather than folding into the
   bundle-copy note above or the page's own .dm2-* rules below.
   ════════════════════════════════════════════════════════════════════════ */
.section-prodcta{
    position: relative; overflow: hidden;
    background: #ffffff;
    padding: 96px 0; text-align: center;
}
.section-prodcta .container{ position: relative; z-index: 1; }
.prodcta-head{ text-align: center; max-width: 680px; margin: 0 auto 60px; }
/* was unstyled — falling back to the browser's default h2 size (~24-32px,
   serif-leaning metrics), which is why it read small/plain next to every
   other section heading on this page. Matches this page's own established
   H2 scale (.dm2-head h2) instead. */
.prodcta-head h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; letter-spacing: -.6px;
    color: var(--cool-101828, #101828);
    margin: 0;
}
.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%);
    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-card:hover .pcta-img{ transform: scale(1.045); }
.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: 0 0 14px;
}
/* card heading — identical font spec to the original .op-body h3 */
.pcta-copy h3{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 24px; line-height: 32px; letter-spacing: -0.3px;
    color: #101828; margin: 0 0 10px;
}
.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;
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.pcta-img--tall{ width: auto; max-height: 190px; }
@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; }
}
@media (prefers-reduced-motion: reduce){
    .pcta-card, .pcta-img{ transition: none; }
    .pcta-card:hover{ transform: none; }
    .pcta-card:hover .pcta-img{ transform: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   LUMENORE DATA MAGNET — NEW PAGE (lumenore-data-magnet-new.html) ONLY
   ────────────────────────────────────────────────────────────────────────
   Everything above this banner is a verbatim copy of
   assets/css/v2o/data-magnet-bundle.css (the ORIGINAL
   lumenore-data-magnet.html's stylesheet), taken so the new page is fully
   self-contained and the original page/bundle stay untouched.

   The rules below are new: they style the sections that only exist in the
   rewritten content (Content/Lumenore Data Magnet Website content
   Final.docx) — Capabilities-with-bullets (Scroll 5), Data Flow (Scroll 6),
   Why Data Magnet (Scroll 7), Resources (Scroll 9), Platform tags
   (Scroll 11) and Testimonials (Scroll 12). They deliberately reuse the
   bundle's tokens (Space Grotesk headings / Inter body, #0e48a5 eyebrows,
   the violet→blue→cyan brand gradient, 22px white cards with an ambient
   shadow) so the new bands read as the same design system as the reused
   ones (.ci-cards, .pi-deck, .op-cards, .section-mcp-cta, .section-trust).
   All new selectors are namespaced .dm2-* — nothing above is overridden.
   ════════════════════════════════════════════════════════════════════════ */

/* ── shared band + centered intro (same rhythm as .section-conv-intel/.ci-intro) ── */
.dm2-section{
    background: var(--Base-White, #fcfcfc);
    padding: 96px 0;
    position: relative;
    z-index: 3;
}

.dm2-head{
    text-align: center;
    max-width: 780px;
    margin: 0 auto 56px;
}
.dm2-head--wide{ max-width: 900px; }

.dm2-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: 500;
    font-size: 11px; line-height: 16px;
    letter-spacing: 1.6px; text-transform: uppercase;
    margin-bottom: 20px;
}
.dm2-eyebrow .dm2-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;
}
.dm2-head h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; letter-spacing: -.6px;
    color: var(--cool-101828, #101828);
    margin: 0 0 16px;
}
.dm2-head p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px; color: #4a5568;
    margin: 0;
}

/* ════════════ SCROLL 5 — CAPABILITIES: bullet checklist (shared by the
   tabbed showcase slides below) ════════════ */
.dm2-cap-list{
    list-style: none; margin: 20px 0 0; padding: 20px 0 0;
    border-top: 1px dashed rgba(40,99,195,.16);
    display: grid; gap: 11px;
}
.dm2-cap-list li{
    position: relative; padding-left: 26px;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 22px; color: #4a5568;
}
/* check bullet drawn in CSS (a tinted disc + a rotated corner) so 30+
   list items don't each need an inline SVG */
.dm2-cap-list li::before{
    content: ''; position: absolute; left: 0; top: 4px;
    width: 15px; height: 15px; border-radius: 50%;
    background: linear-gradient(135deg, #2863c3 0%, #7747b6 100%);
    opacity: .16;
}
.dm2-cap-list li::after{
    content: ''; position: absolute; left: 4.5px; top: 8.6px;
    width: 5px; height: 2.6px;
    border-left: 1.7px solid #2863c3; border-bottom: 1.7px solid #2863c3;
    transform: rotate(-45deg);
}

/* ════════════ SCROLL 6 — DATA FLOW ════════════
   Ported from the Figma exploration (UwNoD3i1IN0dtK5sJStZBJ, node
   3627:38108 "Section - FLOW (DARK)"): JetBrains Mono labels/chips over a
   near-black indigo canvas (#080c22), small-radius chips instead of full
   pills, and a 3-column layout — Connect + the Magnet card run full
   height, Deliver/Consume stack in the right column joined by a short
   dotted connector. All new selectors are namespaced .dm2-flow2-* so
   nothing here touches the rest of the page. */
.dm2-flow2{
    position: relative; overflow: hidden;
    background: #080c22;
    padding: 48px 0;
}
.dm2-flow2-glow{
    position: absolute; left: 50%; top: 220px;
    width: 760px; height: 620px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(109,58,240,.16);
    filter: blur(160px);
    mix-blend-mode: screen;
    pointer-events: none;
}
.dm2-flow2 .container{ position: relative; z-index: 1; }

/* ── header — same eyebrow/H2/body recipe as every other section on this
   page (.dm2-eyebrow / .dm2-head h2 / .dm2-head p), just re-pointed to the
   dark-canvas palette (matches .hero-section .hero-eyebrow) instead of the
   light-section tint. Previously used JetBrains Mono/bold/tighter tracking
   for the eyebrow+heading and a near-invisible #48546f body color — both
   inconsistent with the rest of the page's typography. */
.dm2-flow2-head{ max-width: 640px; margin: 0 auto 24px; text-align: center; }
.dm2-flow2-eyebrow{
    display: inline-flex; align-items: center; justify-content: 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);
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 11px; line-height: 16px; letter-spacing: 1.6px;
    text-transform: uppercase; color: #67d3ff;
    margin-bottom: 20px;
}
.dm2-flow2-dot{
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #1ca9c9 0%, #7747b6 100%);
    box-shadow: 0 0 0 3px rgba(255,255,255,.1);
}
.dm2-flow2-head h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; letter-spacing: -.6px;
    color: #fff; margin: 0 0 16px;
}
.dm2-flow2-accent{
    background-image: linear-gradient(90deg, #b79bff 0%, #7fa8ff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.dm2-flow2-head p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px; color: rgba(252,252,252,.72); margin: 0;
}

/* ── grid: Connect | pipe | Magnet | pipe | right column (Deliver/Consume) ── */
.dm2-flow2-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.12fr) auto minmax(0, 1fr);
    /* no column gap — the 64px-wide pipe column IS the gap between boxes,
       so the curve's own edges sit flush against the box borders instead
       of floating with extra empty space on either side */
    gap: 0;
    align-items: stretch;
}

/* ── side boxes ──
   min-width:0 on both the grid item AND the box itself — without it, a
   `1fr` grid track defaults to min-width:auto, i.e. it grows to fit its
   content's max-content width (driven by the widest single nowrap chip,
   e.g. "Change Data Capture (CDC)") instead of shrinking to the track's
   fair share. At narrower "full screen" desktop widths that pushed the
   grid wider than the viewport — and since both .dm2-flow2 and body/html
   use overflow:hidden/clip (not auto), the overflow was silently clipped
   off-screen with no scrollbar, instead of just squishing/wrapping. */
.dm2-flow2-col{ min-width: 0; }
.dm2-flow2-box{
    min-width: 0;
    /* flex column + centred so the content block sits in the middle of the
       card instead of stacking at the top and leaving a dead void beneath
       it — the right column (Deliver+Consume stacked) is the tallest, and
       align-items:stretch forces the other two columns to match its height. */
    display: flex; flex-direction: column; justify-content: center;
    /* layered: a soft top-light sheen over the base glass fill */
    background:
        linear-gradient(180deg, rgba(255,255,255,.05) 0%, transparent 130px),
        rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 22px;
    padding: 12px 14px 14px;
    transition: border-color .3s ease;
}
.dm2-flow2-box:hover{ border-color: rgba(140,110,255,.28); }
.dm2-flow2-kicker{
    display: block; text-align: center;
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    font-size: 11px; line-height: 12px; letter-spacing: 1.92px;
    text-transform: uppercase; color: #9aa3c6;
    margin-bottom: 5px;
}
.dm2-flow2-title{
    text-align: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: 15px; line-height: 21px; color: #fff;
    margin: 0 0 10px;
}
.dm2-flow2-group{ margin-top: 8px; }
.dm2-flow2-group:first-of-type{ margin-top: 0; }
.dm2-flow2-group + .dm2-flow2-group{
    padding-top: 8px;
    border-top: 1px dashed rgba(159,186,228,.14);
}
.dm2-flow2-group h4{
    display: flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    font-size: 11px; line-height: 15px; letter-spacing: 0.6px;
    text-transform: uppercase; color: #c9cfe8;
    margin: 0 0 6px;
}
/* icon sits in a small brand-tinted tile so each group header reads as a
   labelled block rather than a loose glyph */
.dm2-flow2-group h4 svg{
    width: 13px; height: 13px; flex-shrink: 0;
    box-sizing: content-box; padding: 4px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(140,110,255,.20) 0%, rgba(79,123,255,.12) 100%);
    color: #b79bff;
}
.dm2-flow2-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.dm2-flow2-chip{
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    font-size: 10px; line-height: 15.4px;
    padding: 4px 8px; border-radius: 6px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #d7dbee; white-space: nowrap;
    transition: border-color .2s ease, background .2s ease, color .2s ease,
                transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease;
}
.dm2-flow2-chip:hover{
    border-color: rgba(103,211,255,.5);
    background: rgba(103,211,255,.08);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -6px rgba(103,211,255,.5);
}

/* ── centre Magnet card ── */
.dm2-flow2-box--core{
    /* soft top-light sheen layered over the violet→navy body */
    background:
        linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 170px),
        linear-gradient(180deg, #1a1447 0%, #0b1433 100%);
    border-color: rgba(140,110,255,.4);
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    padding: 20px 20px 18px;
    text-align: center;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
/* ── core icon tile ──
   Scaled up from 96px to 124px so it anchors the centre card, and given a
   three-part idle animation: the tile itself breathes (scale + shadow
   bloom), its gradient drifts across the surface, and two aura rings pulse
   outward from behind it — the rings are pseudo-elements on the tile, so no
   extra markup. All motion is idle/ambient (no hover needed) and stops
   entirely under prefers-reduced-motion. */
.dm2-flow2-core-icon{
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 124px; height: 124px; margin: 0 auto 14px;
    border-radius: 32px;
    background: linear-gradient(135deg, #6d3af0 0%, #3d5cf3 55%, #2e6bf6 100%);
    background-size: 180% 180%;
    box-shadow: 0 0 0 6px rgba(140,110,255,.14), 0 20px 50px rgba(78,54,220,.5);
    color: #fff;
    animation: dm2CoreBreathe 6s ease-in-out infinite,
               dm2CoreGradient 9s ease-in-out infinite;
}
/* aura rings — expand + fade outward, offset so they read as a pulse pair */
.dm2-flow2-core-icon::before,
.dm2-flow2-core-icon::after{
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    border: 1.5px solid rgba(140,110,255,.55);
    pointer-events: none;
    animation: dm2CoreAura 3.4s cubic-bezier(.22,.61,.36,1) infinite;
}
.dm2-flow2-core-icon::after{ animation-delay: 1.7s; }
.dm2-flow2-core-icon svg{
    position: relative; z-index: 1;
    width: 58px; height: 58px;
}
@keyframes dm2CoreBreathe{
    0%, 100% { transform: scale(1);
               box-shadow: 0 0 0 6px rgba(140,110,255,.14), 0 20px 50px rgba(78,54,220,.5); }
    50%      { transform: scale(1.045);
               box-shadow: 0 0 0 9px rgba(140,110,255,.2), 0 26px 62px rgba(78,54,220,.65); }
}
@keyframes dm2CoreGradient{
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 100% 100%; }
}
@keyframes dm2CoreAura{
    0%   { transform: scale(1);    opacity: .8; }
    70%  { opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}
.dm2-flow2-core-title{
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: 20px; line-height: 32px; color: #fff; margin: 0;
}
.dm2-flow2-core-tagline{
    display: block;
    font-family: 'JetBrains Mono', monospace; font-weight: 400;
    font-size: 10.5px; line-height: 16.8px; letter-spacing: 0.63px;
    text-transform: uppercase; color: #9aa3c6;
    margin: 4px 0 12px;
}
.dm2-flow2-pills{
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.dm2-flow2-pill{
    /* same size recipe as .dm2-flow2-chip (Connect/Deliver/Consume boxes)
       so all tabs across the Data Flow columns share one height */
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    font-size: 10px; line-height: 15.4px;
    padding: 4px 8px; border-radius: 6px;
    background: rgba(140,110,255,.16);
    border: 1px solid rgba(140,110,255,.3);
    color: #eae6ff; white-space: nowrap;
    transition: border-color .2s ease, background .2s ease;
}
.dm2-flow2-pill:hover{
    border-color: rgba(103,211,255,.55);
    background: rgba(103,211,255,.14);
}

/* ── connectors between the 3 main columns: a small fixed-size gradient
   "S" curve — the exact vector data from the Figma reference (nodes
   3627:38177 / 3627:38209), not a hand-drawn zigzag: one bezier arc drawn
   twice (mirrored top/bottom) so the two halves meet at a soft vertex in
   the middle. Centred vertically within the connector's full-height
   column, which is otherwise empty above/below it — matching the
   reference, where the curve only occupies the middle band of the gap. ── */
.dm2-flow2-pipe{
    align-self: stretch;
    width: 64px;
    display: flex; align-items: center; justify-content: center;
}
.dm2-flow2-curve{ flex-shrink: 0; }
/* "marching ants" — the dash pattern itself flows continuously along each
   path (stroke-dashoffset animating by exactly one dash+gap cycle, so the
   loop has no visible seam) rather than a single dot riding the line. Every
   arm on the page uses the same duration and no delay offset, so the whole
   diagram reads as one continuous, synchronized current. Direction: each
   path is drawn from the pivot (the S-curve's shared vertex / the top of
   the vertical link) toward its far end, and a NEGATIVE offset animates
   dashes in the direction of that draw — so flow reads Connect→Magnet,
   Magnet→Deliver/Consume, and Deliver→Consume, matching the data-flow
   direction of the section itself. */
.dm2-flow2-curve-path{
    animation: dm2FlowMarch 1.1s linear infinite;
}
.dm2-flow2-curve-path--v{
    stroke-dasharray: 3 4;
    animation-name: dm2FlowMarchV;
    animation-duration: .6s;
}
@keyframes dm2FlowMarch{ to{ stroke-dashoffset: -32; } }
@keyframes dm2FlowMarchV{ to{ stroke-dashoffset: -7; } }

/* ── right column: Deliver (top) + short dotted link + Consume (bottom) ── */
.dm2-flow2-col{ display: flex; flex-direction: column; }
.dm2-flow2-box--short{ padding-bottom: 24px; }
.dm2-flow2-vpipe{ align-self: center; }

/* ── bottom highlight strip ── */
.dm2-flow2-strip{
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-top: 20px;
}
.dm2-flow2-strip-item{
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    /* brand-tinted glass instead of neutral white-on-dark — royal-blue wash
       with a violet-leaning border, per theme */
    background: rgba(64,117,201,.10);
    border: 1px solid rgba(119,71,182,.30);
    border-radius: 16px;
    transition: border-color .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.dm2-flow2-strip-item:hover{
    border-color: rgba(28,169,201,.55);
    transform: translateY(-2px);
}
.dm2-flow2-strip-icon{
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    /* brand CTA gradient tile with white glyph — same treatment as the
       Opportunity cards' .dm2-opp-icon */
    background: var(--Explore-Button, linear-gradient(270deg,#7747b6,#4075c9,#1ca9c9));
    box-shadow: 0 10px 22px -10px rgba(40,99,195,.55);
    color: #fff;
}
.dm2-flow2-strip-icon svg{ width: 22px; height: 22px; }
.dm2-flow2-strip-item span:last-child{
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    font-size: 15.5px; line-height: 18.6px; color: #fff;
}

/* ── responsive ── */
@media (max-width: 1360px){
    /* Stacked layout: the curve reads as a horizontal wire between
       full-width boxes, so it's rotated 90° into the vertical gap and
       scaled down to fit the shorter 60px space between stacked boxes. */
    .dm2-flow2-grid{ grid-template-columns: 1fr; gap: 26px 0; }
    .dm2-flow2-pipe{ width: auto; height: 60px; align-self: auto; }
    .dm2-flow2-curve{ transform: rotate(90deg) scale(.55); }
    .dm2-flow2-box--short{ padding-bottom: 26px; }
}
@media (max-width: 1200px){
    .dm2-flow2-strip{ grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
}
@media (max-width: 991px){
    .dm2-flow2{ padding: 36px 0; }
    .dm2-flow2-head h2{ font-size: 34px; line-height: 44px; }
    .dm2-flow2-core-title{ font-size: 18px; line-height: 26px; }
}
@media (max-width: 575px){
    .dm2-flow2-strip{ grid-template-columns: 1fr; }
    .dm2-flow2-head h2{ font-size: 26px; line-height: 36px; }
}
@media (prefers-reduced-motion: reduce){
    .dm2-flow2-strip-item, .dm2-flow2-chip, .dm2-flow2-box{ transition: none; }
    .dm2-flow2-strip-item:hover, .dm2-flow2-chip:hover{ transform: none; }
    .dm2-flow2-curve-path{ animation: none; }
    .dm2-flow2-core-icon{ animation: none; transform: none; }
    .dm2-flow2-core-icon::before,
    .dm2-flow2-core-icon::after{ animation: none; opacity: 0; }
}

/* ── short-viewport laptops (e.g. 1366×768, 1440×900) ──
   Gated to min-width:1361px so it only ever touches the 3-column grid
   layout above, never the stacked mobile/tablet view. At those widths the
   diagram was taller than the visible viewport, forcing a scroll to see
   the whole "Connect → Magnet → Deliver/Consume" flow on one screen.
   Trims section padding, type scale, box padding, chip/pill size and the
   core icon so the whole grid + bottom strip fits one laptop screen. */
@media (max-height: 900px) and (min-width: 1361px){
    .dm2-flow2{ padding: 28px 0; }

    .dm2-flow2-box{ padding: 9px 11px 10px; }
    .dm2-flow2-kicker{ margin-bottom: 3px; }
    .dm2-flow2-title{ font-size: 13px; line-height: 18px; margin-bottom: 6px; }
    .dm2-flow2-group{ margin-top: 5px; }
    .dm2-flow2-group + .dm2-flow2-group{ padding-top: 5px; }
    .dm2-flow2-group h4{ font-size: 9.5px; line-height: 13px; margin-bottom: 3px; }
    .dm2-flow2-group h4 svg{ width: 11px; height: 11px; padding: 3px; }
    .dm2-flow2-chips{ gap: 4px; }
    .dm2-flow2-chip{ font-size: 9px; line-height: 13px; padding: 3px 6px; }

    .dm2-flow2-box--core{ padding: 14px 14px 12px; }
    .dm2-flow2-core-icon{ width: 76px; height: 76px; margin-bottom: 8px; border-radius: 22px; }
    .dm2-flow2-core-icon svg{ width: 38px; height: 38px; }
    .dm2-flow2-core-title{ font-size: 15px; line-height: 21px; }
    .dm2-flow2-core-tagline{ font-size: 9px; line-height: 14px; margin: 3px 0 8px; }
    .dm2-flow2-pills{ gap: 4px; }
    .dm2-flow2-pill{ font-size: 9px; line-height: 13px; padding: 3px 6px; }

    .dm2-flow2-box--short{ padding-bottom: 10px; }
    .dm2-flow2-vpipe{ margin: -2px 0; }
    /* the connector curve's own 217px SVG height otherwise sets a hard
       floor under the row's stretched height (align-items:stretch sizes
       every column to the tallest item) — shrink the rendered SVG box
       itself (not a transform, which wouldn't reduce its layout size) so
       the row can actually get shorter than 217px. Aspect ratio holds via
       the SVG's own viewBox, so the curve just scales down cleanly. */
    .dm2-flow2-pipe{ width: 44px; }
    .dm2-flow2-curve{ width: 32px; height: 130px; }

    .dm2-flow2-strip{ margin-top: 14px; gap: 10px; }
    .dm2-flow2-strip-item{ padding: 8px 10px; gap: 10px; }
    .dm2-flow2-strip-icon{ width: 28px; height: 28px; border-radius: 8px; }
    .dm2-flow2-strip-icon svg{ width: 16px; height: 16px; }
    .dm2-flow2-strip-item span:last-child{ font-size: 12px; line-height: 15px; }
}

/* ════════════ SCROLL 7 — WHY LUMENORE DATA MAGNET (4 cards) ════════════ */
.dm2-why-grid{
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px;
}
.dm2-why-card{
    position: relative; overflow: hidden;
    background: #fff;
    border: 1px solid rgba(40,99,195,.10);
    border-radius: 22px;
    padding: 36px 34px 34px;
    box-shadow: 0 24px 48px -24px rgba(13,27,46,.18), 0 2px 10px rgba(13,27,46,.05);
    transition: box-shadow .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease;
}
.dm2-why-card::before{
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #7747b6 0%, #2863c3 52%, #1ca9c9 100%);
    opacity: .9;
}
.dm2-why-card:hover{
    box-shadow: 0 30px 60px -20px rgba(40,99,195,.3), 0 6px 16px rgba(13,27,46,.08);
    border-color: rgba(40,99,195,.26);
    transform: translateY(-5px);
}
.dm2-why-top{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.dm2-why-icon{
    width: 46px; height: 46px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(40,99,195,.12) 0%, rgba(119,71,182,.14) 100%);
    border: 1px solid rgba(40,99,195,.16);
    color: #2863c3; flex-shrink: 0;
}
.dm2-why-icon svg{ width: 22px; height: 22px; }
.dm2-why-card h3{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 21px; line-height: 21px; letter-spacing: -.3px;
    color: var(--cool-101828, #101828); margin: 0;
}
.dm2-why-card p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15.5px; line-height: 26px; color: #4a5568; margin: 0;
}

/* ════════════ SCROLL 9 — RESOURCES CURATED FOR YOU ════════════
   Card grid ported from lumenore-ask-me-new.html's "From the Blogs"
   section (.blog-card/.blog-thumb/.blog-tag/.blog-link), namespaced
   .dm2-blog-* to match this page's convention. */
.dm2-blog-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; text-align: left; }
.dm2-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;
}
.dm2-blog-card:hover{
    box-shadow: 0 12px 44px -14px rgba(40,99,195,.26);
    border-color: rgba(40,99,195,.26); transform: translateY(-4px);
}
.dm2-blog-thumb{ display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #eef3fb; }
.dm2-blog-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dm2-blog-card:hover .dm2-blog-thumb img{ transform: scale(1.05); }
.dm2-blog-body{ padding: 22px 24px 26px; display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; }
.dm2-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;
}
.dm2-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;
}
.dm2-blog-body h3 a{ color: #101828; text-decoration: none; transition: color .2s ease; }
.dm2-blog-body h3 a:hover{ color: #0e48a5; }
.dm2-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;
}
.dm2-blog-link:hover{ color: #7747b6; }
/* Colour-code each card's tag so the three read as distinct at a glance,
   same treatment as the ask-me page's blog grid. */
.dm2-blog-grid .dm2-blog-card:nth-child(1) .dm2-blog-tag,
.dm2-blog-grid .dm2-blog-card:nth-child(2) .dm2-blog-tag{
    background: rgba(119,71,182,.10); border-color: rgba(119,71,182,.30); color: #6d3bb0;
}
.dm2-blog-grid .dm2-blog-card:nth-child(3) .dm2-blog-tag{
    background: rgba(20,160,140,.11); border-color: rgba(20,160,140,.32); color: #0f8f7c;
}

.dm2-res-cta{ text-align: center; margin-top: 44px; }
.dm2-ghost-btn{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px; border-radius: 50px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px;
    text-decoration: none; color: var(--Royal-Blue-Blue-500, #0e48a5);
    background: #fff;
    border: 1px solid rgba(40,99,195,.22);
    box-shadow: 0 12px 26px -18px rgba(40,99,195,.5);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dm2-ghost-btn:hover{
    transform: translateY(-2px);
    border-color: rgba(40,99,195,.4);
    box-shadow: 0 18px 32px -16px rgba(40,99,195,.5);
}
.dm2-ghost-btn svg{ width: 15px; height: 15px; }

/* ════════════ SCROLL 11 — platform card tag chips (inside .op-card bodies) ════════════ */
.dm2-optags{
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px;
}
.dm2-optag{
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 12px; line-height: 18px;
    padding: 5px 11px; border-radius: 50px;
    background: rgba(40,99,195,.06);
    border: 1px solid rgba(40,99,195,.12);
    color: #4a5568;
}

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 1080px){
    .dm2-why-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 991px){
    .dm2-section{ padding: 72px 0; }
        .dm2-head{ margin-bottom: 40px; }
    .dm2-head h2, .prodcta-head h2{ font-size: 34px; line-height: 44px; }
    .dm2-blog-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 575px){
    .dm2-why-card{ padding: 30px 26px 28px; }
    .dm2-head h2, .prodcta-head h2{ font-size: 26px; line-height: 36px; }
}

@media (prefers-reduced-motion: reduce){
    .dm2-cap, .dm2-why-card, .dm2-blog-card{
        transition: none;
    }
    .dm2-cap:hover, .dm2-why-card:hover, .dm2-blog-card:hover{ transform: none; }
}

/* ── NOTE: How It Works no longer uses the copied bundle's scroll-pinned
   .pi-deck (replaced by the .dm2-hiw pipeline below), so the earlier
   270vh height override for three steps was removed. The bundle's
   .pi-* rules are simply unused on this page. ── */

/* ── HERO overrides (new page only) ──
   1. Square corners on the hero animation frame — the copied bundle rounds
      it to 20px; requested flat.
   2. Lottie container sizing: the copied rule keys off the ORIGINAL page's
      #heroAskMeLottie id, and this page's container is
      #heroDataMagnetLottie. A Lottie div has no intrinsic size, so without
      this it would collapse to 0 height.
   3. No idle float — the copied bundle's .hero-visual-frame bobs up/down
      6.5s ease-in-out (heroFloat); the animation plays fine, it's just
      this constant motion on the frame itself that's unwanted here. ── */
.hero-visual-frame{ border-radius: 0; animation: none; will-change: auto; }
.hero-visual-frame #heroDataMagnetLottie{
    width: 100%; aspect-ratio: 1440 / 832;
}
.hero-visual-frame #heroDataMagnetLottie svg{ display: block; }

/* ── Gradient-BORDER demo button — fix + nav parity ──
   The copied bundle's .btn-demo--lg lists its two background layers in the
   wrong order:
       background: var(--Explore-Button) border-box, rgba(0,0,0,.25) padding-box;
   In the `background` shorthand the FIRST layer paints on top, so the
   gradient covered the padding box too and the button rendered as a solid
   gradient fill — indistinguishable from .btn-primary next to it in the
   hero. Re-pointed to the nav bar's exact .btn-demo recipe (see
   components/header.css / assets/js/header.js): solid dark padding-box
   layer first, brand gradient border-box layer second, so only the 2px
   border ring shows the gradient. Applies to this page's hero CTA and both
   .mcp-cta-card CTAs, which use the same class. ── */
.btn-demo--lg{
    background:
        linear-gradient(var(--Royal-Blue-Blue-900, #051A3C), var(--Royal-Blue-Blue-900, #051A3C)) padding-box,
        var(--Explore-Button) border-box;
    /* match .btn-primary--lg's 52px box exactly — its 12px padding + 2px
       borders alone compute ~5px shorter, which read as mismatched heights
       when the two sit side by side */
    min-height: 52px;
    justify-content: center;
}
.btn-demo--lg:hover{
    background:
        linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.07)) padding-box,
        var(--Explore-Button) border-box;
    filter: none;
    box-shadow:
        0 8px 24px -8px rgba(64,117,201,.55),
        0 2px 10px -2px rgba(119,71,182,.4);
}

/* Hero-only: same gradient-border recipe as .btn-demo--lg above, just
   sized to match .btn-primary's 42px box here instead of the 52px used
   by the bottom CTA card, so the two hero buttons read as one pair
   (matches data-visualization.html's hero CTA pair). */
.hero-cta-row .btn-demo--lg{
    padding: 10px 22px;
    font-size: 15px;
    min-height: 42px;
}

/* ════════════ SCROLL 3 — THE OPPORTUNITY ════════════
   Design ported 1:1 from lumenore-insights-new.html's "Challenge" band
   (.li2-section--light .li2-challenge-card in
   assets/css/v2o/lumenore-insights-new.css): 18px white card with a thin
   neutral border + soft shadow, a 3px turquoise→royal-blue→violet bar
   across the top edge, a 48px gradient-filled icon tile, 20px Space Grotesk
   heading and 15px body. Same token values as that file so the two pages
   read as one system. */
.dm2-opp-grid{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.dm2-opp-card{
    position: relative; overflow: hidden;
    background: var(--Base-White, #fcfcfc);
    border: 1px solid rgba(16,24,40,.08);
    border-radius: 18px;
    padding: 33px;
    box-shadow: var(--Card-Shadow-Soft, 0 2px 6px rgba(0,0,0,.08));
    transition: border-color .22s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
.dm2-opp-card::before{
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg,
        var(--Turquoise-SkyBlue-500, #1ca9c9) 0%,
        var(--Royal-Blue-Blue-500, #0e48a5) 50%,
        var(--Violet-Violet-450, #7747b6) 100%);
}
.dm2-opp-card:hover{
    border-color: rgba(16,24,40,.14);
    transform: translateY(-3px);
}
.dm2-opp-icon{
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--Explore-Button, linear-gradient(270deg,#7747b6,#4075c9,#1ca9c9));
    color: var(--Base-White, #fff);
    margin-bottom: 24px;
}
.dm2-opp-icon svg{ width: 22px; height: 22px; }
.dm2-opp-card h3{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 20px; line-height: 26px; letter-spacing: -.2px;
    color: var(--cool-101828, #101828);
    margin: 0 0 12px;
}
.dm2-opp-card p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15px; line-height: 24px; color: #4a5568; margin: 0;
}
.dm2-opp-card p strong{ font-weight: 600; color: #1f2a3d; }

/* Eyebrow pill re-pointed to the same two-stop gradient tint the reference
   band uses (.li2-section--light .li2-eyebrow) instead of a flat blue wash. */
.dm2-eyebrow{
    background: linear-gradient(135deg, rgba(40,99,195,.08) 0%, rgba(119,71,182,.08) 100%);
    border-color: rgba(40,99,195,.14);
    gap: 9px; padding: 8px 17px; margin-bottom: 24px;
}

@media (max-width: 1080px){
    .dm2-opp-grid{ grid-template-columns: 1fr; }
}

/* ════════════ SCROLL 4 — HOW IT WORKS: end-to-end pipeline row ════════════
   Implemented from Figma UwNoD3i1IN0dtK5sJStZBJ node 3596:44857 ("OptionOne"):
   inlet (dashed "Fragmented sources" card) → three white stage cards with a
   gradient icon tile top-left and an oversized ghost number top-right →
   outlet (filled gradient "Trusted decisions" card), all joined by 2px
   gradient pipes carrying three staggered glowing dots each. The frame's
   indigo/purple/teal palette (#615fff/#8e51ff/#00d5be) is mapped onto the
   site's brand ramp (violet #7747b6 / royal-blue #2863c3 / turquoise
   #1ca9c9); geometry — 24px card radius, 24px padding, 48px/16px icon tile,
   30px ghost number, dashed 16px-radius inlet — follows the frame. Icons are
   the frame's exported SVGs (assets/images/Data magnet/how-it-works/). */
.dm2-hiw{ position: relative; overflow: hidden; }
.dm2-hiw .container{ position: relative; z-index: 1; }

.dm2-pipeline{
    /* stretch equalizes the three stage cards' heights (the Figma render's
       uneven card bottoms read as scattered at real copy lengths); the
       inlet/outlet/pipes opt back into vertical centring individually. */
    display: flex; align-items: stretch;
    margin-top: 10px;
}
.dm2-hiw-src, .dm2-hiw-dest, .dm2-hiw-pipe{ align-self: center; }

/* ── Pipes — 2px gradient track, three travelling glow-dots each ── */
.dm2-hiw-pipe{
    position: relative;
    flex: 1 1 24px; min-width: 18px;
    height: 2px;
    background: linear-gradient(90deg, var(--Royal-Blue-Blue-150, #b8d0fd) 0%, #d9cdf0 100%);
}
.dm2-hiw-pipe i{
    position: absolute; top: -3px; left: 0;
    width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(90deg, var(--Royal-Blue-Blue-450, #2863c3) 0%, var(--Turquoise-SkyBlue-500, #1ca9c9) 100%);
    box-shadow: 0 0 8px rgba(40,99,195,.5);
    animation: dm2HiwFlow 2.4s linear infinite;
}
.dm2-hiw-pipe i:nth-child(2){ animation-delay: .8s; }
.dm2-hiw-pipe i:nth-child(3){ animation-delay: 1.6s; }
@keyframes dm2HiwFlow{
    0%   { left: 0; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { left: calc(100% - 8px); opacity: 0; }
}

/* ── Inlet — dashed "Fragmented sources" card ── */
.dm2-hiw-src{
    flex: 0 0 auto;
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px;
    background: rgba(255,255,255,.6);
    border: 1px dashed var(--blueGray-200, #e2e8f0);
    border-radius: 16px;
}
.dm2-hiw-src-label{
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 10px; line-height: 15px;
    letter-spacing: .5px; text-transform: uppercase;
    color: var(--blueGray-400, #90a1b9);
    padding-bottom: 4px;
}
.dm2-hiw-src-item{
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px;
    background: var(--blueGray-50, #f8fafc);
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 20px;
    color: var(--blueGray-600, #45556c);
    white-space: nowrap;
}
.dm2-hiw-src-item img{ width: 16px; height: 16px; display: block; }

/* ── Stage cards ── */
.dm2-hiw-card{
    position: relative;
    flex: 6 1 0; min-width: 0;
    display: flex; flex-direction: column;
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--blueGray-100, #f1f5f9);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 20px 25px -5px rgba(15,23,42,.10), 0 8px 10px -6px rgba(15,23,42,.06);
    transition: box-shadow .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s ease;
}
/* Gradient hairline along the card's top edge — hidden until hover */
.dm2-hiw-card::before{
    content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg,
        var(--Turquoise-SkyBlue-500, #1ca9c9) 0%,
        var(--Royal-Blue-Blue-450, #2863c3) 50%,
        var(--Violet-Violet-450, #7747b6) 100%);
    opacity: 0; transition: opacity .3s ease;
}
.dm2-hiw-card:hover::before{ opacity: 1; }
.dm2-hiw-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 26px 32px -8px rgba(40,99,195,.22), 0 10px 14px -6px rgba(15,23,42,.08);
}
.dm2-hiw-card-top{
    display: flex; align-items: center; justify-content: space-between;
}
.dm2-hiw-icon{
    width: 48px; height: 48px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--Royal-Blue-Blue-450, #2863c3) 0%, var(--Violet-Violet-450, #7747b6) 50%, var(--Turquoise-SkyBlue-500, #1ca9c9) 100%);
    background-size: 180% 180%;
    filter: drop-shadow(0 10px 12px rgba(64,117,201,.5));
    flex-shrink: 0;
    animation: dm2HiwBreathe 7s ease-in-out infinite;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), filter .3s ease;
}
/* slow gradient drift keeps the tiles feeling alive without moving anything */
@keyframes dm2HiwBreathe{
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 100% 100%; }
}
.dm2-hiw-card:hover .dm2-hiw-icon{
    transform: scale(1.08) rotate(-4deg);
    filter: drop-shadow(0 14px 18px rgba(64,117,201,.65));
}
.dm2-hiw-icon img{ width: 20px; height: 20px; display: block; }
/* Oversized ghost step number (Figma: 30px Space Grotesk 600, near-white) */
.dm2-hiw-num{
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 30px; line-height: 36px;
    color: #e6ebf3;
    transition: color .3s ease;
}
/* ghost number picks up the brand gradient when its card is hovered */
.dm2-hiw-card:hover .dm2-hiw-num{
    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;
}
.dm2-hiw-card h3{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 20px; line-height: 28px;
    color: #0f172b;
    margin: 20px 0 0;
}
.dm2-hiw-lead{
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 14px; line-height: 20px;
    color: var(--blueGray-700, #314158);
    margin: 6px 0 0;
}
.dm2-hiw-card > p:not(.dm2-hiw-lead){
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 23px;
    color: var(--blueGray-500, #62748e);
    margin: 10px 0 0;
}

/* ── Outlet — filled "Trusted decisions" card ── */
.dm2-hiw-dest{
    flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(144deg, var(--Royal-Blue-Blue-450, #2863c3) 0%, var(--Violet-Violet-450, #7747b6) 100%);
    box-shadow: 0 24px 30px -10px rgba(119,71,182,.55);
}
.dm2-hiw-dest-icon{
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.15);
}
.dm2-hiw-dest-icon img{ width: 20px; height: 20px; display: block; }
.dm2-hiw-dest p{
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 14px; line-height: 20px;
    color: #fff; text-align: center; margin: 0;
    white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 1280px){
    /* Inlet/outlet leave the row first — the three stages keep the pipeline
       reading; the heading still carries "fragmented → trusted". */
    .dm2-hiw-src, .dm2-hiw-dest,
    .dm2-hiw-src + .dm2-hiw-pipe,
    .dm2-hiw-card + .dm2-hiw-pipe:last-of-type{ display: none; }
}
@media (max-width: 1080px){
    /* Vertical pipeline: cards stack, pipes rotate to short vertical runs. */
    .dm2-pipeline{ flex-direction: column; align-items: stretch; }
    .dm2-hiw-src, .dm2-hiw-dest,
    .dm2-hiw-src + .dm2-hiw-pipe,
    .dm2-hiw-card + .dm2-hiw-pipe:last-of-type{ display: flex; }
    .dm2-hiw-src{ align-self: center; min-width: 260px; }
    .dm2-hiw-dest{ align-self: center; min-width: 200px; }
    .dm2-hiw-card{ flex: 0 0 auto; }
    .dm2-hiw-pipe{
        flex: 0 0 auto; align-self: center;
        width: 2px; height: 44px; min-width: 0;
        background: linear-gradient(180deg, var(--Royal-Blue-Blue-150, #b8d0fd) 0%, #d9cdf0 100%);
    }
    .dm2-hiw-pipe i{
        top: 0; left: -3px;
        animation-name: dm2HiwFlowV;
    }
    @keyframes dm2HiwFlowV{
        0%   { top: 0; opacity: 0; }
        15%  { opacity: 1; }
        85%  { opacity: 1; }
        100% { top: calc(100% - 8px); opacity: 0; }
    }
}
@media (max-width: 720px){
    .dm2-hiw-src{ min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce){
    .dm2-hiw-pipe i{ animation: none; opacity: 0; }
    .dm2-hiw-card{ transition: none; }
    .dm2-hiw-card:hover{ transform: none; }
}

/* ════════════ SCROLL 4 — HOW IT WORKS: motion + polish layer ════════════
   BI-SaaS treatment on top of the Figma base above. Everything is gated on
   .dm2-pipeline.is-visible (set by the page's existing scroll-reveal
   IntersectionObserver), uses CSS animations only — `backwards` fill keeps
   each element at its 0% frame until its stagger delay fires, so nothing
   needs a :not() pre-state and hover transitions stay untouched.
   Choreography, left to right like a pipeline priming: inlet slides in →
   pipe 1 draws → Connect rises → pipe 2 → Curate → pipe 3 → Consume →
   pipe 4 → outlet pops, then the flow-dots start running and the outlet
   emits a radar ping. */

/* faint dot-grid behind the pipeline, faded out toward the edges */
.dm2-hiw::after{
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(40,99,195,.10) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(70% 62% at 50% 46%, #000 0%, transparent 100%);
            mask-image: radial-gradient(70% 62% at 50% 46%, #000 0%, transparent 100%);
    pointer-events: none;
}

/* ── entrance keyframes ── */
@keyframes dm2CardIn{  from{ opacity: 0; transform: translateY(26px); } to{ opacity: 1; transform: none; } }
@keyframes dm2InLeft{  from{ opacity: 0; transform: translateX(-16px); } to{ opacity: 1; transform: none; } }
@keyframes dm2DestIn{  from{ opacity: 0; transform: scale(.82); }        to{ opacity: 1; transform: none; } }
@keyframes dm2PipeDraw{  from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@keyframes dm2PipeDrawV{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }

.dm2-hiw-pipe{ transform-origin: left center; }
.dm2-pipeline.is-visible .dm2-hiw-src { animation: dm2InLeft   .6s  cubic-bezier(.22,.61,.36,1) backwards; }
.dm2-pipeline.is-visible .dm2-hiw-pipe{ animation: dm2PipeDraw .55s cubic-bezier(.22,.61,.36,1) backwards; }
.dm2-pipeline.is-visible .dm2-hiw-card{ animation: dm2CardIn   .65s cubic-bezier(.22,.61,.36,1) backwards; }
.dm2-pipeline.is-visible .dm2-hiw-dest{ animation: dm2DestIn   .6s  cubic-bezier(.34,1.4,.5,1)  backwards; }
/* stagger — children in DOM order: src, pipe, card, pipe, card, pipe, card, pipe, dest */
.dm2-pipeline.is-visible > :nth-child(2){ animation-delay: .12s; }
.dm2-pipeline.is-visible > :nth-child(3){ animation-delay: .24s; }
.dm2-pipeline.is-visible > :nth-child(4){ animation-delay: .44s; }
.dm2-pipeline.is-visible > :nth-child(5){ animation-delay: .56s; }
.dm2-pipeline.is-visible > :nth-child(6){ animation-delay: .76s; }
.dm2-pipeline.is-visible > :nth-child(7){ animation-delay: .88s; }
.dm2-pipeline.is-visible > :nth-child(8){ animation-delay: 1.08s; }
.dm2-pipeline.is-visible > :nth-child(9){ animation-delay: 1.2s; }

/* ── flow-dots: held until the section reveals, then run with a comet tail ── */
.dm2-hiw-pipe i{
    opacity: 0;                       /* keyframes lift it during the run */
    animation-play-state: paused;
    box-shadow: 0 0 8px rgba(40,99,195,.5), -9px 0 10px -3px rgba(40,99,195,.35);
}
.dm2-pipeline.is-visible .dm2-hiw-pipe i{ animation-play-state: running; }

/* ── inlet rows light up in sequence, like sources being picked up ── */
@keyframes dm2SrcPing{
    0%, 30%, 100% { background: var(--blueGray-50, #f8fafc); box-shadow: inset 0 0 0 1px transparent; }
    9%, 19%       { background: #eaf2fd; box-shadow: inset 0 0 0 1px rgba(40,99,195,.22); }
}
.dm2-hiw-src-item{ animation: dm2SrcPing 5.4s ease-in-out infinite; }
.dm2-hiw-src-item:nth-child(3){ animation-delay: 1.8s; }
.dm2-hiw-src-item:nth-child(4){ animation-delay: 3.6s; }

/* ── outlet: radar ping + arrow nudge ── */
.dm2-hiw-dest{ position: relative; }
.dm2-hiw-dest::after{
    content: ''; position: absolute; inset: 0; border-radius: 16px;
    animation: dm2DestPing 2.8s ease-out 1.8s infinite;
    pointer-events: none;
}
@keyframes dm2DestPing{
    0%   { box-shadow: 0 0 0 0 rgba(119,71,182,.4); }
    70%  { box-shadow: 0 0 0 14px rgba(119,71,182,0); }
    100% { box-shadow: 0 0 0 0 rgba(119,71,182,0); }
}
@keyframes dm2ArrowNudge{
    0%, 55%, 100% { transform: translateX(0); }
    70%           { transform: translateX(3px); }
}
.dm2-hiw-dest-icon img{ animation: dm2ArrowNudge 2.8s ease-in-out 1.8s infinite; }

/* ── vertical pipeline (≤1080px): pipes draw downward, tail points up ── */
@media (max-width: 1080px){
    .dm2-hiw-pipe{ transform-origin: top center; }
    .dm2-pipeline.is-visible .dm2-hiw-pipe{ animation-name: dm2PipeDrawV; }
    .dm2-hiw-pipe i{ box-shadow: 0 0 8px rgba(40,99,195,.5), 0 -9px 10px -3px rgba(40,99,195,.35); }
}

@media (prefers-reduced-motion: reduce){
    .dm2-pipeline.is-visible .dm2-hiw-src,
    .dm2-pipeline.is-visible .dm2-hiw-pipe,
    .dm2-pipeline.is-visible .dm2-hiw-card,
    .dm2-pipeline.is-visible .dm2-hiw-dest{ animation: none; }
    .dm2-hiw-icon{ animation: none; }
    .dm2-hiw-src-item{ animation: none; }
    .dm2-hiw-dest::after{ animation: none; }
    .dm2-hiw-dest-icon img{ animation: none; }
}

/* ── "STEP 01/02/03" — small kicker above the ghost numeral (top-right of
   each stage card). The numeral was aria-hidden decoration before; the
   wrapper now reads "Step 01" to screen readers too. ── */
.dm2-hiw-step{
    display: flex; flex-direction: column; align-items: flex-end;
}
.dm2-hiw-step-label{
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 10px; line-height: 14px;
    letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--blueGray-400, #90a1b9);
}
.dm2-hiw-num{ line-height: 32px; }

/* ── Auto-cycling active step — .is-active is marched across the three
   stage cards by the inline script in lumenore-data-magnet-new.html
   (3s cadence, paused + cleared while the pipeline is hovered, off under
   prefers-reduced-motion). Treatment mirrors the hover state with a touch
   more lift so the tour reads clearly at a glance. ── */
.dm2-hiw-card.is-active{
    transform: translateY(-6px);
    border-color: rgba(40,99,195,.26);
    box-shadow: 0 28px 36px -10px rgba(40,99,195,.26), 0 10px 14px -6px rgba(15,23,42,.08);
}
.dm2-hiw-card.is-active::before{ opacity: 1; }
.dm2-hiw-card.is-active .dm2-hiw-icon{
    transform: scale(1.08) rotate(-4deg);
    filter: drop-shadow(0 14px 18px rgba(64,117,201,.65));
}
.dm2-hiw-card.is-active .dm2-hiw-num{
    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;
}
.dm2-hiw-card.is-active .dm2-hiw-step-label{
    color: var(--Royal-Blue-Blue-450, #2863c3);
}
.dm2-hiw-step-label{ transition: color .3s ease; }

/* ════════════ SCROLL 5 — CAPABILITIES: tabbed product showcase ════════════
   Six pill tabs above one browser-framed stage (screenshot left, copy +
   bullet checklist right). The active tab carries a linear progress fill
   that doubles as the auto-rotate countdown (~6s, driven by the inline
   script; paused on hover, off under prefers-reduced-motion). Same
   product-tour role as lumenore-insights-new.html's Build & Explore band,
   restyled to this page's dm2 light design language. */

/* ── tab rail ── */
/* Capabilities reuses the .mcp-drag-* drag-strip/tilt-screenshot recipe
   below (already present in this file) instead of the old icon-pill
   tabbed showcase — see the "Capabilities" section markup for the
   .dm2-cap-list bullets nested inside .mcp-drag-info. All 6 slides now
   have real product screenshots, so the .mcp-drag-shot-ph placeholder
   panel that used to cover the ones without one has been removed. */




/* ════════════════════════════════════════════════════════════════════════
   LUMENORE DATA VISUALIZATION — page-specific block (.dv-*)
   Carried over for advanced-analytics.html — the .dv-* components below (def cards, ctx stage, personas, rca cards, closer) are reused by that page as-is. Everything above this banner
   is the shared product-page bundle copied verbatim from data-lakehouse.css
   (hero stage, .dm2-section / .dm2-head rhythm, .dm2-flow2 dark canvas,
   .dm2-why-grid, .section-mcp-cta, .page-finale FAQ finale). Everything
   below is namespaced dv- so none of the copied rules are overridden and
   the page reads as one system with Connector, Data Magnet, Insights and
   Data Lakehouse.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tinted light band — alternates the page rhythm between white sections ── */
.dv-section--tint{
    background:
        radial-gradient(1100px 420px at 12% -8%, rgba(28,169,201,.06), transparent 60%),
        radial-gradient(1100px 420px at 92% 108%, rgba(119,71,182,.06), transparent 60%),
        var(--Grey-Grey-100, #fbfbfb);
}

/* Closing one-liner — centered rule-flanked summary line */
.dv-closer{
    display: flex; align-items: center; justify-content: center; gap: 18px;
    /* wide enough that the sentence plus its two flanking lines (each
       needing at least their 24px min-width) fit on one row at desktop
       widths — 900px left only ~38px for both lines combined, just
       under the ~48px they need, which silently forced a wrap even
       though there was visibly room to spare. */
    max-width: 1000px; margin: 44px auto 0; text-align: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 400;
    font-size: 19px; line-height: 30px; letter-spacing: -.2px;
    color: #1f2a3d;
}
.dv-closer::before, .dv-closer::after{
    content: ''; flex: 1 1 0; height: 1px; min-width: 24px;
    background: linear-gradient(90deg, transparent, rgba(40,99,195,.28));
}
.dv-closer::after{ background: linear-gradient(90deg, rgba(40,99,195,.28), transparent); }

/* Dark sections reuse the dm2-flow2 canvas; keep their rhythm a touch
   tighter than the homepage flow band. */
.dv-dark{ padding: 72px 0; }
.dv-dark .dm2-flow2-head{ margin-bottom: 40px; }

/* ════════════════════════════════════════════════════════════════
   01 · HERO — copy column extras + the drawn analytical experience
   ════════════════════════════════════════════════════════════════ */
.dv-hero-note{
    margin: 0;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15px; line-height: 24px; color: rgba(252,252,252,.62);
}

/* proof strip — the six verbatim proof points as quiet chips */
.dv-proof{
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 22px 0 0; padding: 0; list-style: none;
}
.dv-proof li{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 50px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.13);
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 12.5px; line-height: 1; letter-spacing: .1px;
    color: rgba(252,252,252,.78);
}
.dv-proof li::before{
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: linear-gradient(90deg, #4AE7FF, #b79bff);
}

/* the hero visual */
.dv-hero-vis{ position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.dv-hero-vis svg{ display: block; width: 100%; height: auto; }

/* trend line draws itself, tip pulses */
.dv-hero-line{
    stroke-dasharray: 340; stroke-dashoffset: 340;
    animation: dvHeroDraw 2.2s cubic-bezier(.4,0,.2,1) .5s forwards;
}
@keyframes dvHeroDraw{ to{ stroke-dashoffset: 0; } }
.dv-hero-tip{ animation: dvHeroTip 2.6s ease-in-out 2.7s infinite; opacity: 0; }
@keyframes dvHeroTip{
    0%{ opacity: 0; r: 4; }
    12%{ opacity: 1; }
    50%{ r: 6; opacity: .55; }
    88%{ opacity: 1; }
    100%{ opacity: 0; r: 4; }
}

/* bars grow in */
.dv-hero-bars rect:not(:first-child){
    transform-origin: center 278px;
    transform: scaleY(0);
    animation: dvHeroBar .9s cubic-bezier(.34,1.4,.4,1) forwards;
}
.dv-hero-bars rect:nth-child(2){ animation-delay: .7s; }
.dv-hero-bars rect:nth-child(3){ animation-delay: .85s; }
.dv-hero-bars rect:nth-child(4){ animation-delay: 1s; }
.dv-hero-bars rect:nth-child(5){ animation-delay: 1.15s; }
@keyframes dvHeroBar{ to{ transform: scaleY(1); } }

/* AI narrative card rises in, its lines shimmer like text being written */
.dv-hero-ai{
    opacity: 0; transform: translateY(10px);
    animation: dvHeroIn .8s cubic-bezier(.4,0,.2,1) 1.6s forwards;
}
.dv-hero-nline{
    opacity: 0;
    animation: dvHeroNline 3.2s ease-in-out 2.2s infinite;
}
@keyframes dvHeroNline{
    0%{ opacity: 0; } 14%{ opacity: 1; } 82%{ opacity: 1; } 100%{ opacity: .35; }
}
.dv-hero-chat{
    opacity: 0; transform: translateY(10px);
    animation: dvHeroIn .8s cubic-bezier(.4,0,.2,1) 2.3s forwards;
}
@keyframes dvHeroIn{ to{ opacity: 1; transform: translateY(0); } }
.dv-hero-link{
    stroke-dashoffset: 0;
    animation: dvHeroDash 1.4s linear 3s infinite;
    opacity: 0; animation-fill-mode: forwards;
}
@keyframes dvHeroDash{
    0%{ opacity: 1; stroke-dashoffset: 16; }
    100%{ opacity: 1; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce){
    .dv-hero-line{ stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
    .dv-hero-tip{ opacity: 1; animation: none; }
    .dv-hero-bars rect:not(:first-child){ transform: none; animation: none; }
    .dv-hero-ai, .dv-hero-chat{ opacity: 1; transform: none; animation: none; }
    .dv-hero-nline{ opacity: 1; animation: none; }
    .dv-hero-link{ opacity: 1; animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   02 · WHAT IS DATA VISUALIZATION — definition ⇄ differentiation
   ════════════════════════════════════════════════════════════════ */
.dv-def{ display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.dv-def-card{
    position: relative; padding: 34px 36px 30px; border-radius: 22px;
    background: #fff; border: 1px solid rgba(16,24,40,.08);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    display: flex; flex-direction: column;
}
.dv-def-card--brand{
    background:
        radial-gradient(680px 260px at 85% -30%, rgba(74,231,255,.1), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
    border-color: rgba(40,99,195,.18);
}
.dv-def-k{
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
    color: #6a7282;
}
.dv-def-card--brand .dv-def-k{
    background-image: linear-gradient(90deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.dv-def-card p{
    margin: 0; flex: 1;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15.5px; line-height: 26px; color: #4a5568;
}
.dv-def-glyphs{
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px;
}
.dv-glyph{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 50px;
    background: rgba(40,99,195,.05); border: 1px solid rgba(40,99,195,.14);
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 12.5px; color: #33445e;
}
.dv-glyph svg{ width: 15px; height: 15px; color: #2863c3; }
.dv-def-steps{
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px;
}
.dv-def-steps span{
    padding: 8px 14px; border-radius: 50px;
    background: #fff; border: 1px solid rgba(40,99,195,.2);
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 12.5px; color: #26365a;
    box-shadow: 0 6px 14px -10px rgba(40,99,195,.5);
}
.dv-def-steps i{
    width: 14px; height: 1.6px; border-radius: 1px;
    background: linear-gradient(90deg, rgba(40,99,195,.35), rgba(28,169,201,.55));
}

/* ════════════════════════════════════════════════════════════════
   Shared flush product shot (.dv-shot) — every PNG in this page's
   image folder is a Figma composition with real alpha (floating
   panels, baked-in framing), so shots never sit in a card or a
   browser-chrome frame; the drop-shadow follows the alpha outline.
   ════════════════════════════════════════════════════════════════ */
.dv-shot{
    position: relative; margin: 0;
    display: flex; align-items: center; justify-content: center;
}
.dv-shot img{
    display: block; max-width: 100%; height: auto;
    filter: drop-shadow(0 26px 32px rgba(40,75,135,.17));
}

/* ════════════════════════════════════════════════════════════════
   03 · CORE VALUE PROPOSITION — shares the .dv-cap-* numbered switcher
   defined under "08 · ADVANCED ANALYTICAL VISUALIZATION" below (heading
   full width, numbered list + flush stage sharing one row, hover/active
   tint with the divider hidden, description expanding under the active
   title only). No section-specific CSS needed here.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   04 · VISUALIZATION AND DASHBOARD CREATION — rotating capability
   showcase, in the language of connector-new.css's .cn2-way: copy
   left + flush stage right on top, the four capabilities along the
   bottom, each with its divider filling as the progress line.
   ════════════════════════════════════════════════════════════════ */
.dv-way{ --dwell: 6s; }
.dv-way-top{
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
    gap: 56px; align-items: center;
    margin-bottom: 56px;
}
.dv-way-copy{ max-width: 520px; }
.dv-way-copy .dm2-eyebrow{ margin-bottom: 20px; }
.dv-way-copy h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; letter-spacing: -.6px;
    color: var(--cool-101828, #101828); margin: 0 0 18px;
}
.dv-way-copy p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px; color: #4a5568; margin: 0;
}

/* Stage — all four shots stacked in one cell so the box never resizes
   as they swap; only the active one is shown. Flush: the PNGs are alpha
   compositions, so the ambient glow lights them from behind instead of
   a frame boxing them in. */
.dv-way-stage{ position: relative; display: grid; }
.dv-way-stage::before{
    content: ''; position: absolute; inset: 6% 4% -8%; z-index: 0;
    background:
        radial-gradient(60% 60% at 25% 30%, rgba(40,99,195,.14), transparent 70%),
        radial-gradient(60% 60% at 78% 72%, rgba(119,71,182,.12), transparent 70%);
    filter: blur(46px); border-radius: 40px; pointer-events: none;
}
.dv-way-shot{
    grid-area: 1 / 1; position: relative; z-index: 1; margin: 0;
    display: flex; align-items: center; justify-content: center;
}
.dv-way-shot[hidden]{ display: none; }
.dv-way-shot.is-active{ animation: dvWayIn .5s cubic-bezier(.22,.61,.36,1); }
@keyframes dvWayIn{ from{ opacity: 0; transform: translateY(10px) scale(.995); } to{ opacity: 1; transform: none; } }
.dv-way-shot img{
    display: block; max-width: 100%; height: auto;
    filter: drop-shadow(0 26px 32px rgba(40,75,135,.17));
}

/* ── The four points ── */
.dv-way-nav{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.dv-way-item{
    position: relative; display: block; text-align: left; cursor: pointer;
    background: none; border: 0;
    padding: 4px 28px 4px 26px;
    border-left: 1px solid rgba(16,24,40,.12);
    font: inherit; color: inherit;
}
/* Active tint — an overlay rather than the item's own background, so it
   can bleed a little past the padding box without shifting the grid or
   covering the neighbour's divider. */
.dv-way-item::before{
    content: ''; position: absolute; z-index: 0;
    inset: -16px 0 -20px 0; border-radius: 16px;
    background: linear-gradient(140deg, rgba(40,99,195,.07), rgba(28,169,201,.06));
    opacity: 0; transition: opacity .3s ease;
}
.dv-way-item.is-active::before{ opacity: 1; }
.dv-way-bar, .dv-way-head, .dv-way-desc{ position: relative; z-index: 1; }
/* The divider that is already there IS the progress indicator: it fills
   downward with the brand gradient over the dwell. */
.dv-way-bar{
    position: absolute; left: -1px; top: 0; width: 2px; height: 0;
    background: linear-gradient(180deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
}
.dv-way-item.is-active .dv-way-bar{ animation: dvWayFill var(--dwell) linear forwards; }
@keyframes dvWayFill{ from{ height: 0; } to{ height: 100%; } }
.dv-way[data-way-stopped] .dv-way-item.is-active .dv-way-bar{ animation: none; height: 100%; }

.dv-way-head{
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.dv-way-icon{
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px;
    color: var(--Royal-Blue-Blue-500, #0e48a5);
    background: linear-gradient(140deg, rgba(40,99,195,.10), rgba(28,169,201,.10));
    border: 1px solid rgba(40,99,195,.14);
    transition: color .28s ease, background .28s ease, border-color .28s ease;
}
.dv-way-icon svg{ width: 16px; height: 16px; }
.dv-way-item.is-active .dv-way-icon{
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
}
.dv-way-title{
    display: block;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 17px; line-height: 24px; letter-spacing: -.2px;
    color: var(--cool-101828, #101828);
}
.dv-way-desc{
    display: block;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 23px; color: #4a5568;
}

@media (prefers-reduced-motion: reduce){
    .dv-way-shot.is-active{ animation: none; }
    .dv-way-item.is-active .dv-way-bar{ animation: none; height: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   05 · AI-ASSISTED VISUALIZATION (dark) — micro-flow rail + 3-up cards
   ════════════════════════════════════════════════════════════════ */
.dv-aiflow{
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 10px; margin: 0 auto 44px; max-width: 980px;
}
.dv-aiflow-step{
    padding: 10px 18px; border-radius: 50px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 13.5px; color: rgba(252,252,252,.82); white-space: nowrap;
}
.dv-aiflow-step--end{
    background: linear-gradient(90deg, rgba(119,71,182,.35), rgba(28,169,201,.35));
    border-color: rgba(74,231,255,.4); color: #fff;
}
.dv-aiflow i{
    position: relative; width: 30px; height: 1.6px; border-radius: 1px;
    background: rgba(255,255,255,.18); overflow: hidden;
}
.dv-aiflow i::after{
    content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, #4AE7FF);
    animation: dvFlowPulse 2.4s linear infinite;
}
.dv-aiflow i:nth-of-type(2)::after{ animation-delay: .3s; }
.dv-aiflow i:nth-of-type(3)::after{ animation-delay: .6s; }
.dv-aiflow i:nth-of-type(4)::after{ animation-delay: .9s; }
@keyframes dvFlowPulse{ to{ left: 100%; } }
@media (prefers-reduced-motion: reduce){ .dv-aiflow i::after{ animation: none; opacity: 0; } }

/* Numbered capability spine + glowing stage, in the language of
   connector-new.css's .cn2-ctx — the three AI capabilities read as
   stages of one process down a spine, the active one's shot on stage. */
.dv-ctx{
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.06fr);
    gap: 56px; align-items: center;
}
.dv-ctx-list{
    position: relative; display: flex; flex-direction: column; gap: 4px;
    padding-left: 2px;
}
.dv-ctx-list::before{
    content: ''; position: absolute; z-index: 0;
    left: 21px; top: 30px; bottom: 30px; width: 1px;
    background: linear-gradient(180deg,
        transparent 0%, rgba(255,255,255,.16) 12%,
        rgba(255,255,255,.16) 88%, transparent 100%);
}
.dv-ctx-item{
    position: relative; z-index: 1;
    display: flex; align-items: flex-start; gap: 18px;
    width: 100%; text-align: left; cursor: pointer;
    padding: 16px 20px 16px 0; border: 0; border-radius: 14px;
    background: transparent;
    font: inherit; color: inherit;
    transition: background .28s ease;
}
.dv-ctx-item:hover .dv-ctx-title{ color: #fff; }
.dv-ctx-step{
    flex: 0 0 auto; position: relative; z-index: 1;
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
    letter-spacing: .04em;
    color: rgba(233,243,255,.5);
    background: #0b1733;                     /* opaque: masks the spine behind */
    border: 1px solid rgba(255,255,255,.14);
    transition: color .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.dv-ctx-item.is-active .dv-ctx-step{
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
    box-shadow: 0 0 0 5px rgba(40,99,195,.16), 0 10px 24px -10px rgba(28,169,201,.7);
}
.dv-ctx-text{ display: block; min-width: 0; padding-top: 7px; }
.dv-ctx-title{
    display: block; margin-bottom: 6px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 17px; line-height: 24px; letter-spacing: -.2px;
    color: rgba(252,252,252,.82);
    transition: color .3s ease;
}
.dv-ctx-item.is-active .dv-ctx-title{ color: #fff; }
.dv-ctx-desc{
    display: block;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 22px; color: rgba(255,255,255,.55);
    transition: color .3s ease;
}
.dv-ctx-item.is-active .dv-ctx-desc{ color: rgba(255,255,255,.75); }

/* ── stage ── */
.dv-ctx-stage{ position: relative; display: grid; align-items: center; }
.dv-ctx-glow{
    position: absolute; inset: -14% -10%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(40,99,195,.3) 0%, rgba(119,71,182,.14) 52%, transparent 78%);
    filter: blur(26px);
}
.dv-ctx-shot{
    grid-area: 1 / 1; position: relative; z-index: 1; margin: 0;
    display: flex; align-items: center; justify-content: center;
}
.dv-ctx-shot[hidden]{ display: none; }
.dv-ctx-shot.is-active{ animation: dvCtxIn .5s cubic-bezier(.22,.61,.36,1); }
@keyframes dvCtxIn{ from{ opacity: 0; transform: translateY(12px) scale(.985); } to{ opacity: 1; transform: none; } }
.dv-ctx-shot img{
    display: block; max-width: 100%; max-height: 560px;
    width: auto; height: auto; object-fit: contain;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
}
@media (prefers-reduced-motion: reduce){
    .dv-ctx-shot.is-active{ animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   06 · INTERACTIVE EXPLORATION — shot + four feature rows
   (the .dv-row idiom is shared with section 13)
   ════════════════════════════════════════════════════════════════ */
.dv-explore{
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center;
}
.dv-explore-media{ align-self: center; }
.dv-explore-list{ display: flex; flex-direction: column; gap: 12px; }
.dv-row{
    display: flex; gap: 18px; align-items: flex-start;
    padding: 20px 22px; border-radius: 16px;
    background: #fff; border: 1px solid rgba(16,24,40,.08);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.dv-row:hover{
    transform: translateX(5px);
    border-color: rgba(40,99,195,.2);
    box-shadow: 0 20px 40px -24px rgba(16,24,40,.22);
}
.dv-row-ic{
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(119,71,182,.1), rgba(28,169,201,.12));
    border: 1px solid rgba(40,99,195,.16); color: #2863c3;
}
.dv-row-ic svg{ width: 21px; height: 21px; }
.dv-row h3{
    margin: 0 0 5px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 17.5px; line-height: 23px; color: var(--cool-101828, #101828);
}
.dv-row p{
    margin: 0;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 23px; color: #5e6b7f;
}

/* ════════════════════════════════════════════════════════════════
   07 · WHAT-IF AND GEOSPATIAL — alternating feature rows + chips.
   These are dense product screens; at three-up the UI inside them was
   unreadable, so each takes half the container and the rows alternate
   side. Images size off their own width (no aspect-ratio box, no
   object-fit) so they can never distort or letterbox.
   ════════════════════════════════════════════════════════════════ */
.dv-feat{ display: flex; flex-direction: column; gap: 64px; }
.dv-feat-row{
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 64px; align-items: center;
}
/* Flip puts the shot first in the visual order while leaving the copy
   first in the DOM, so the reading order stays title-then-image. */
.dv-feat-row--flip .dv-feat-copy{ order: 2; }
.dv-feat-row--flip .dv-feat-media{ order: 1; }

.dv-feat-num{
    display: block; margin-bottom: 14px;
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
    font-size: 12px; letter-spacing: .14em;
    background-image: linear-gradient(90deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.dv-feat-copy h3{
    margin: 0 0 14px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 400;
    font-size: 30px; line-height: 40px; letter-spacing: -.4px;
    color: var(--cool-101828, #101828);
}
.dv-feat-copy p{
    margin: 0;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px; color: #4a5568;
}

/* Capped rather than filling the column — at full column width these
   shots read as oversized next to their two-line captions. */
.dv-feat-media{ position: relative; margin: 0; width: 100%; max-width: 545px; }
/* Anchored to the container edge rather than pulled in beside the copy,
   so the rows alternate against a consistent outer margin. */
.dv-feat-row .dv-feat-media{ justify-self: end; }
.dv-feat-row--flip .dv-feat-media{ justify-self: start; }
/* Ambient glow so the light shot sits in a pool of light on the tinted
   band rather than reading as a rectangle pasted onto it. */
.dv-feat-media::before{
    content: ''; position: absolute; inset: 4% -4% -8%; z-index: 0; pointer-events: none;
    border-radius: 40px; filter: blur(46px);
    background:
        radial-gradient(60% 60% at 28% 32%, rgba(40,99,195,.16), transparent 70%),
        radial-gradient(60% 60% at 76% 70%, rgba(119,71,182,.14), transparent 70%);
}
.dv-feat-media img{
    display: block; position: relative; z-index: 1;
    width: 100%; height: auto;
    filter: drop-shadow(0 26px 32px rgba(40,75,135,.17));
    transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.dv-feat-row:hover .dv-feat-media img{ transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce){
    .dv-feat-row:hover .dv-feat-media img{ transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   08 · ADVANCED ANALYTICAL VISUALIZATION — numbered switcher, ported
   from financial-intelligence.css's .fi-cap-* "Core Capabilities"
   component. The heading sits full width above (.dv-cap-head); below
   it the numbered list and the stage share one row so the image's top
   edge lines up with the list's, not with the heading. Each pointer's
   own verbatim description expands under its title only when it is
   the active one, matching the original journey-rail idiom elsewhere
   on this page. Hover and active share one visual language — a tinted,
   rounded row with the divider hidden — so the highlight never reads
   as a background box floating independently of a leftover rule.
   ════════════════════════════════════════════════════════════════ */
.dv-cap-head.dm2-head{ text-align: left; margin: 0 0 48px; position: relative; z-index: 1; }
.dv-cap-head .dm2-eyebrow{ justify-content: flex-start; }

/* Ambient canvas — a faint dot-grid plus two soft corner glows, so the
   section reads as lit from behind rather than flat white/tinted paper.
   Shared by sections 03 and 08. */
.dv-cap-ambient{ position: relative; overflow: hidden; }
.dv-cap-ambient::before{
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(rgba(40,99,195,.07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(65% 55% at 26% 18%, #000, transparent 100%);
    mask-image: radial-gradient(65% 55% at 26% 18%, #000, transparent 100%);
}
.dv-cap-ambient::after{
    content: '';
    position: absolute; inset: -8% -6%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(620px 340px at 6% -4%, rgba(28,169,201,.09), transparent 60%),
        radial-gradient(620px 340px at 98% 106%, rgba(119,71,182,.08), transparent 60%);
}
.dv-cap-ambient .container{ position: relative; z-index: 1; }

.dv-cap-layout{
    display: grid; grid-template-columns: 470px 1fr; gap: 48px; align-items: start;
}

/* The list as one card — matches the visual weight of the flush shot on
   the right instead of floating as bare rows on the canvas. */
.dv-cap-nav{
    --dwell: 6s;
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    padding: 16px; border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid rgba(16,24,40,.07);
    box-shadow: 0 26px 54px -32px rgba(16,24,40,.24);
}
.dv-cap-nav__btn{
    position: relative;
    display: flex; flex-direction: column; align-items: stretch; text-align: left;
    padding: 14px 14px 14px 18px; border-radius: 14px;
    background: none; border: 0; cursor: pointer; width: 100%;
    font: inherit; color: inherit;
}
.dv-cap-nav__btn:focus-visible{ outline: 2px solid rgba(40,99,195,.5); outline-offset: 2px; }
/* Hover/active tint — an overlay so it can bleed past the padding box
   for presence without nudging row heights. This is the ONLY thing that
   draws the row boundary now (the rule below is hidden whenever the
   tint is showing), so tint and "selected" always read as one shape. */
.dv-cap-nav__btn::before{
    content: ''; position: absolute; z-index: 0; inset: 0; border-radius: 14px;
    background: linear-gradient(140deg, rgba(40,99,195,.08), rgba(28,169,201,.07));
    opacity: 0; transition: opacity .3s ease;
}
.dv-cap-nav__btn:hover::before{ opacity: .6; }
.dv-cap-nav__btn.is-active::before{ opacity: 1; }
/* Left accent bar — doubles as the auto-advance progress indicator: it
   fills top-to-bottom over the dwell so "selected" and "how long until
   this rotates" read as the same signal, matching the rail idiom used
   elsewhere on this page (data-lakehouse.html, lumenore-connector.html). */
.dv-cap-nav__btn::after{
    content: ''; position: absolute; z-index: 1; left: 0; top: 12px; width: 3px; height: 0;
    border-radius: 2px;
    background: linear-gradient(180deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
}
.dv-cap-nav__btn.is-active::after{ animation: dvCapBarFill var(--dwell) linear forwards; }
@keyframes dvCapBarFill{ from{ height: 0; } to{ height: calc(100% - 24px); } }
/* Autoplay stopped by a click — hold the bar full rather than leaving it
   frozen mid-draw, which would read as stuck. */
.dv-cap-layout[data-cap-stopped] .dv-cap-nav__btn.is-active::after{ animation: none; height: calc(100% - 24px); }
@media (prefers-reduced-motion: reduce){
    .dv-cap-nav__btn.is-active::after{ animation: none; height: calc(100% - 24px); }
}
.dv-cap-nav__row{ position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
/* Numeral, as a badge rather than bare text — the same treatment as the
   numbered spine in the AI-Assisted section below, so "position in the
   sequence" reads consistently across the page. */
.dv-cap-nav__num{
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 12px;
    color: #8c93a3; background: #fff; border: 1px solid rgba(16,24,40,.12);
    transition: color .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.dv-cap-nav__btn:hover .dv-cap-nav__num{ border-color: rgba(40,99,195,.32); color: #2863c3; }
.dv-cap-nav__btn.is-active .dv-cap-nav__num{
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
    box-shadow: 0 10px 20px -10px rgba(40,99,195,.65);
}
/* Title grows and gains weight on the active row — the selection reads
   as a small feature reveal, not just a background-colour change. */
.dv-cap-nav__title{
    display: block;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 16px; line-height: 22px;
    color: #666;
    transition: color .25s ease, font-size .3s ease, font-weight .3s ease, letter-spacing .3s ease;
}
.dv-cap-nav__btn:hover .dv-cap-nav__title{ color: #1a1a1a; }
.dv-cap-nav__btn.is-active .dv-cap-nav__title{
    color: #101828; font-size: 19px; font-weight: 600; letter-spacing: -.2px;
}
/* Description — collapsed for every row except the active one, so the
   list stays compact until a pointer is selected, then its own copy
   appears directly beneath its heading. */
.dv-cap-nav__desc{
    position: relative; z-index: 1;
    margin: 0 0 0 46px; max-height: 0; opacity: 0; overflow: hidden;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 22px; color: #5e6b7f;
    transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
}
.dv-cap-nav__btn.is-active .dv-cap-nav__desc{ max-height: 80px; opacity: 1; margin-top: 8px; }
.dv-cap-nav__separator{
    position: relative; z-index: 1;
    display: block; width: 100%; height: 1px; background: rgba(16,24,40,.08);
    margin-top: 14px;
    transition: background-color .25s ease, opacity .25s ease;
}
/* The tint already marks the row's boundary — a rule cutting across it
   would float independent of that shape, so it hides whenever the tint
   (hover OR active) is showing, and only separates idle rows. Also
   dropped on the last row now that the list sits inside a card — a rule
   right against the card's own bottom edge read as a stray leftover. */
.dv-cap-nav__btn:hover .dv-cap-nav__separator,
.dv-cap-nav__btn.is-active .dv-cap-nav__separator,
.dv-cap-nav__btn:last-child .dv-cap-nav__separator{ opacity: 0; }

.dv-cap-stage{ position: relative; min-width: 0; display: flex; flex-direction: column; }
.dv-cap-panel{
    position: absolute; inset: 0; display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transition: opacity .4s ease;
}
.dv-cap-panel.is-active{ position: relative; opacity: 1; visibility: visible; }
/* Flush, not framed: these analytical outputs are Figma compositions with
   real alpha, so they carry their own framing and the drop-shadow follows
   the alpha outline. An ambient glow grounds the shot in the whitespace
   instead of a card — ambient light, not a second box around it. */
.dv-cap-panel__visual{
    position: relative;
    flex: 1 1 auto; aspect-ratio: 688 / 464;
    display: flex; align-items: center; justify-content: center;
}
.dv-cap-panel__visual::before{
    content: ''; position: absolute; inset: 6% -6% -10%; z-index: 0; pointer-events: none;
    border-radius: 40px; filter: blur(50px);
    background:
        radial-gradient(60% 60% at 26% 30%, rgba(40,99,195,.15), transparent 70%),
        radial-gradient(60% 60% at 78% 74%, rgba(119,71,182,.13), transparent 70%);
}
.dv-cap-panel__visual img{
    display: block; position: relative; z-index: 1;
    max-width: 100%; max-height: 100%;
    width: auto; height: auto; object-fit: contain;
    filter: drop-shadow(0 26px 32px rgba(40,75,135,.17));
}

/* ════════════════════════════════════════════════════════════════
   09 · EXPLANATION AND ROOT CAUSE (dark) — evidence ⇄ explanation
   ════════════════════════════════════════════════════════════════ */
.dv-rca{
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px;
    align-items: stretch; max-width: 940px; margin: 0 auto 44px;
}
.dv-rca-panel{
    padding: 24px 26px; border-radius: 20px;
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
}
.dv-rca-k{
    display: block; margin-bottom: 16px;
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(252,252,252,.5);
}
.dv-rca-panel--explain .dv-rca-k{ color: rgba(183,155,255,.85); }
.dv-rca-panel svg{ display: block; width: 100%; height: auto; }
.dv-rca-pulse{ animation: dvRcaPulse 2.2s ease-in-out infinite; }
@keyframes dvRcaPulse{
    0%,100%{ opacity: 1; r: 5; } 50%{ opacity: .45; r: 7; }
}
.dv-rca-bridge{
    align-self: center; display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(119,71,182,.4), rgba(28,169,201,.4));
    border: 1px solid rgba(74,231,255,.45);
    box-shadow: 0 0 34px rgba(18,182,248,.35);
    animation: dvRcaBridge 2.6s ease-in-out infinite;
}
.dv-rca-bridge i{
    font-style: normal;
    font-family: 'Space Grotesk', sans-serif; font-weight: 600;
    font-size: 14px; color: #fff;
}
@keyframes dvRcaBridge{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce){
    .dv-rca-pulse, .dv-rca-bridge{ animation: none; }
}

/* ranked findings — bars fill in */
.dv-rca-findings{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.dv-rca-finding{ display: flex; align-items: center; gap: 12px; }
.dv-rca-finding b{
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 8px;
    background: rgba(183,155,255,.16); border: 1px solid rgba(183,155,255,.4);
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    font-size: 11px; color: #d9c8ff;
}
.dv-rca-finding i{
    display: block; height: 9px; border-radius: 5px;
    background: linear-gradient(90deg, rgba(74,231,255,.75), rgba(183,155,255,.75));
    transform-origin: left center; transform: scaleX(0);
    animation: dvRcaBar 1s cubic-bezier(.4,0,.2,1) var(--d, 0s) forwards;
}
@keyframes dvRcaBar{ to{ transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce){ .dv-rca-finding i{ transform: none; animation: none; } }
.dv-rca-note{
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; border-radius: 14px;
    background: rgba(13,26,56,.55); border: 1px solid rgba(183,155,255,.28);
}
.dv-rca-note-ic{
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #7747b6, #1ca9c9);
}
.dv-rca-note-lines{ display: flex; flex-direction: column; gap: 7px; flex: 1; padding-top: 3px; }
.dv-rca-note-lines i{
    display: block; height: 6px; border-radius: 3px;
    background: rgba(255,255,255,.3);
}
.dv-rca-note-lines i:nth-child(2){ width: 82%; opacity: .75; }
.dv-rca-note-lines i:nth-child(3){ width: 58%; opacity: .5; }

.dv-rca-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dv-rca-card{
    padding: 26px 26px 28px; border-radius: 18px;
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12);
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.dv-rca-card:hover{
    background: rgba(255,255,255,.075); border-color: rgba(74,231,255,.3);
    transform: translateY(-3px);
}
.dv-rca-card h3{
    margin: 0 0 8px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 18px; line-height: 24px; color: #fff;
}
.dv-rca-card p{
    margin: 0;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 23px; color: rgba(252,252,252,.66);
}

/* ════════════════════════════════════════════════════════════════
   10 · CONVERSATIONAL VISUALIZATION — animated chat + shot + flow rail
   ════════════════════════════════════════════════════════════════ */
.dv-conv{
    display: grid; grid-template-columns: minmax(0, 460px) 1fr;
    gap: 44px; align-items: center;
}
.dv-chat{ display: flex; flex-direction: column; gap: 16px; }
.dv-chat-msg{
    display: flex; flex-direction: column; gap: 9px;
    opacity: 0; transform: translateY(14px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1);
}
.dv-chat-msg.is-in{ opacity: 1; transform: none; }
.dv-chat-tag{
    align-self: flex-start;
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: #2863c3;
}
.dv-chat-bubble{
    align-self: flex-end; max-width: 88%;
    padding: 13px 20px; border-radius: 20px 20px 5px 20px;
    background: linear-gradient(90deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
    color: #fff;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 14.5px; line-height: 22px;
    box-shadow: 0 14px 30px -14px rgba(40,99,195,.6);
}
.dv-chat-reply{
    align-self: flex-start; max-width: 92%;
    display: flex; align-items: center; gap: 14px;
    padding: 13px 18px; border-radius: 20px 20px 20px 5px;
    background: #fff; border: 1px solid rgba(16,24,40,.1);
    box-shadow: 0 12px 28px -18px rgba(16,24,40,.25);
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 13.5px; line-height: 21px; color: #4a5568;
}
.dv-chat-reply svg{ flex: 0 0 86px; width: 86px; height: 30px; }

.dv-conv-flow{
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 14px; margin-top: 44px;
}
.dv-conv-flow-k{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 15px; color: var(--cool-101828, #101828);
}
.dv-conv-flow-rail{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.dv-conv-flow-rail em{
    font-style: normal;
    padding: 8px 16px; border-radius: 50px;
    background: #fff; border: 1px solid rgba(40,99,195,.2);
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 13px; color: #26365a;
    box-shadow: 0 6px 14px -10px rgba(40,99,195,.5);
}
.dv-conv-flow-rail i{
    width: 16px; height: 1.6px; border-radius: 1px;
    background: linear-gradient(90deg, rgba(40,99,195,.35), rgba(28,169,201,.55));
}

/* ════════════════════════════════════════════════════════════════
   11 · CUSTOM VISUALIZATION — copy + code-editor-framed shot
   ════════════════════════════════════════════════════════════════ */
.dv-custom{
    display: grid; grid-template-columns: minmax(0, 480px) 1fr;
    gap: 54px; align-items: center;
}
.dv-custom-copy h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 44px; line-height: 54px; letter-spacing: -.6px;
    color: var(--cool-101828, #101828);
    margin: 14px 0 16px;
}
.dv-custom-copy > p{
    margin: 0 0 14px;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px; color: #4a5568;
}
.dv-custom-em{
    padding: 16px 20px; border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f7ff 100%);
    border: 1px solid rgba(40,99,195,.16);
    box-shadow: 0 16px 36px -24px rgba(40,99,195,.4);
    color: #26365a !important;
}
.dv-custom-media{ position: relative; }
.dv-custom-glow{
    position: absolute; inset: -14% -10%; pointer-events: none;
    background: radial-gradient(60% 60% at 50% 45%, rgba(119,71,182,.14), transparent 70%);
    filter: blur(6px);
}
.dv-custom-media .dv-shot{ position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════
   12 · DATA STORYTELLING — four-beat storyboard filmstrip
   ════════════════════════════════════════════════════════════════ */
.dv-story{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
    position: relative;
}
.dv-story-card{
    position: relative; padding: 24px 24px 26px; border-radius: 18px;
    background: #fff; border: 1px solid rgba(16,24,40,.08);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.dv-story-card:hover{
    transform: translateY(-5px);
    border-color: rgba(40,99,195,.2);
    box-shadow: 0 26px 48px -26px rgba(16,24,40,.24);
}
/* connector between beats */
.dv-story-card:not(:last-child)::after{
    content: ''; position: absolute; top: 50%; right: -19px;
    width: 16px; height: 1.6px;
    background: linear-gradient(90deg, rgba(40,99,195,.35), rgba(28,169,201,.55));
}
.dv-story-num{
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    font-size: 12px; color: #9aa6b6;
}
.dv-story-vis{
    margin: 14px 0 16px; border-radius: 12px; overflow: hidden;
    background: linear-gradient(160deg, #f7f9fd 0%, #eef2f9 100%);
    border: 1px solid rgba(16,24,40,.06);
}
.dv-story-vis svg{ display: block; width: 100%; height: auto; }
.dv-story-card h3{
    margin: 0 0 6px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 18px; line-height: 24px; color: var(--cool-101828, #101828);
}
.dv-story-card p{
    margin: 0;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 23px; color: #5e6b7f;
}

/* ════════════════════════════════════════════════════════════════
   13 · COLLABORATION, SHARING AND EMBEDDING — rows + shot
   ════════════════════════════════════════════════════════════════ */
.dv-collab{
    display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: center;
}
.dv-collab-list{ display: flex; flex-direction: column; gap: 12px; }
.dv-collab-media{ align-self: center; }

/* ════════════════════════════════════════════════════════════════
   14 · PERSONA VALUE — four personas, each closing on its journey
   ════════════════════════════════════════════════════════════════ */
.dv-personas{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.dv-persona{
    display: flex; flex-direction: column;
    padding: 28px 26px; border-radius: 20px;
    background: #fff; border: 1px solid rgba(16,24,40,.08);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.dv-persona:hover{
    transform: translateY(-6px);
    border-color: rgba(40,99,195,.2);
    box-shadow: 0 30px 56px -26px rgba(16,24,40,.24);
}
.dv-persona-ic{
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 13px; margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(119,71,182,.1), rgba(28,169,201,.12));
    border: 1px solid rgba(40,99,195,.16); color: #2863c3;
}
.dv-persona-ic svg{ width: 22px; height: 22px; }
.dv-persona h3{
    margin: 0 0 9px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 18.5px; line-height: 25px; letter-spacing: -.2px;
    color: var(--cool-101828, #101828);
}
.dv-persona p{
    margin: 0 0 18px; flex: 1;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 23px; color: #5e6b7f;
}
.dv-persona-flow{
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px;
    padding-top: 16px; border-top: 1px solid rgba(16,24,40,.07);
}
.dv-persona-flow em{
    font-style: normal;
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
    font-size: 11px; letter-spacing: .06em; color: #2863c3;
}
.dv-persona-flow i{
    width: 11px; height: 1.4px;
    background: linear-gradient(90deg, rgba(40,99,195,.4), rgba(28,169,201,.6));
}

/* ════════════════════════════════════════════════════════════════
   15 · DIFFERENTIATION (dark) — the question cascade + resolution
   ════════════════════════════════════════════════════════════════ */
.dv-qchain{
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 12px; max-width: 980px; margin: 0 auto 44px;
}
.dv-q{
    position: relative;
    padding: 12px 22px; border-radius: 50px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 15px; color: rgba(252,252,252,.86); white-space: nowrap;
    opacity: 0; transform: translateY(10px);
}
.reveal.is-visible .dv-q{
    animation: dvQIn .6s cubic-bezier(.4,0,.2,1) calc(var(--i, 0) * .18s) forwards;
}
@keyframes dvQIn{ to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
    .dv-q{ opacity: 1; transform: none; }
    .reveal.is-visible .dv-q{ animation: none; }
}
.dv-q:not(:last-child)::after{
    content: '→'; position: absolute; right: -14px; top: 50%;
    transform: translateY(-50%);
    font-family: 'Inter', sans-serif; font-size: 13px;
    color: rgba(74,231,255,.75);
}
.dv-q--end{
    background: linear-gradient(90deg, rgba(119,71,182,.4), rgba(28,169,201,.4));
    border-color: rgba(74,231,255,.45); color: #fff;
    box-shadow: 0 0 30px rgba(18,182,248,.25);
}
.dv-diff-close{ max-width: 820px; margin: 0 auto; text-align: center; }
.dv-diff-close p{
    margin: 0 0 18px;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px; color: rgba(252,252,252,.72);
}
.dv-diff-em{
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 20px !important; line-height: 32px !important;
    letter-spacing: -.2px;
    color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════
   16 · FINAL CTA — verbatim strapline under the actions
   ════════════════════════════════════════════════════════════════ */
.dv-cta-strap{
    margin: 26px 0 0 !important;
    font-family: 'JetBrains Mono', monospace !important; font-weight: 500 !important;
    font-size: 12.5px !important; line-height: 22px !important;
    letter-spacing: .08em; text-transform: uppercase;
    color: rgba(252,252,252,.6) !important;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px){
    .dv-way-top{ grid-template-columns: 1fr; gap: 38px; margin-bottom: 44px; }
    .dv-way-nav{ grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
    .dv-ctx{ grid-template-columns: 1fr; gap: 40px; }
    .dv-ctx-stage{ order: -1; }
    .dv-feat{ gap: 56px; }
    .dv-feat-row{ grid-template-columns: 1fr; gap: 28px; }
    .dv-feat-row--flip{ grid-template-columns: 1fr; }
    .dv-feat-row--flip .dv-feat-copy{ order: 1; }
    .dv-feat-row--flip .dv-feat-media{ order: 2; }
    .dv-cap-layout{ grid-template-columns: 1fr; gap: 40px; }
    .dv-cap-head.dm2-head{ margin-bottom: 36px; }
    .dv-cap-head h2{ font-size: 34px; line-height: 44px; }
    .dv-cap-stage{ order: -1; }
    .dv-explore{ grid-template-columns: 1fr; gap: 30px; }
    .dv-conv{ grid-template-columns: 1fr; gap: 34px; }
    .dv-custom{ grid-template-columns: 1fr; gap: 36px; }
    .dv-collab{ grid-template-columns: 1fr; gap: 30px; }
    .dv-collab-media{ order: -1; }
    .dv-personas{ grid-template-columns: repeat(2, 1fr); }
    .dv-story{ grid-template-columns: repeat(2, 1fr); }
    .dv-story-card:nth-child(2)::after{ display: none; }
    .dv-rca{ grid-template-columns: 1fr; }
    .dv-rca-bridge{ justify-self: center; }
    .dv-rca-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
    .dv-def{ grid-template-columns: 1fr; }
    .dv-feat-copy h3{ font-size: 25px; line-height: 34px; }
    .dv-way-copy h2{ font-size: 34px; line-height: 43px; }
    .dv-way-nav{ grid-template-columns: 1fr; row-gap: 26px; }
    .dv-way-item{ padding-right: 0; }
    .dv-personas{ grid-template-columns: 1fr; }
    .dv-story{ grid-template-columns: 1fr; }
    .dv-story-card::after{ display: none !important; }
    .dv-custom-copy h2{ font-size: 34px; line-height: 43px; }
    .dv-q{ white-space: normal; text-align: center; }
    .dv-q:not(:last-child)::after{ display: none; }
    .dv-chat-reply svg{ display: none; }
    .dv-cap-nav{ padding: 10px; border-radius: 18px; }
    .dv-cap-nav__title{ font-size: 15px; line-height: 21px; }
    .dv-cap-nav__btn.is-active .dv-cap-nav__title{ font-size: 17px; }
    .dv-cap-panel{ gap: 20px; }
    .dv-proof li{ font-size: 11.5px; padding: 6px 11px; }
    .dv-dark{ padding: 52px 0; }
}


/* ════════════════════════════════════════════════════════════════════════
   LUMENORE ADVANCED ANALYTICS — page-specific block (.aa-*)
   Appended for advanced-analytics.html only. Everything above this banner
   is the shared product-page bundle plus the .dv-* component set copied
   verbatim from data-visualization.css (hero stage, .dm2-section rhythm,
   .dm2-flow2 dark canvas, .dv-def cards, .dv-ctx stage, .dv-persona,
   .dv-rca-card, .dv-closer, .section-mcp-cta, .page-finale FAQ finale).
   Everything below is namespaced aa- so none of the copied rules are
   overridden and the page reads as one system with Data Visualization,
   Data Lakehouse and Connector.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   01 · HERO — strap line + the drawn forecast / root-cause picture
   ════════════════════════════════════════════════════════════════ */
.aa-hero-strap{
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin: 22px 0 0;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 15px; line-height: 22px; letter-spacing: -.1px;
    color: rgba(252,252,252,.9);
}
.aa-hero-strap span{ display: inline-flex; align-items: center; gap: 8px; }
.aa-hero-strap span:first-child::before{
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, #4AE7FF, #b79bff);
    box-shadow: 0 0 14px rgba(74,231,255,.7);
}
.aa-hero-strap i{
    width: 22px; height: 1.6px; border-radius: 1px;
    background: linear-gradient(90deg, rgba(74,231,255,.7), rgba(183,155,255,.7));
}

/* history draws first, then the forecast band resolves past "today",
   then the anomaly on the history flags itself and the drivers rank in */
.aa-hero-hist{
    stroke-dasharray: 260; stroke-dashoffset: 260;
    animation: aaHeroDraw 1.8s cubic-bezier(.4,0,.2,1) .5s forwards;
}
@keyframes aaHeroDraw{ to{ stroke-dashoffset: 0; } }
.aa-hero-forecast{
    opacity: 0; transform: translateX(-6px);
    animation: aaHeroFc .9s cubic-bezier(.4,0,.2,1) 2.1s forwards;
}
@keyframes aaHeroFc{ to{ opacity: 1; transform: none; } }
.aa-hero-anom{ opacity: 0; animation: dvHeroIn .6s ease 2.6s forwards; }
.aa-hero-anom-dot{ animation: aaHeroAnom 2.2s ease-in-out 3s infinite; }
@keyframes aaHeroAnom{ 0%,100%{ r: 4; opacity: 1; } 50%{ r: 6; opacity: .5; } }
.aa-hero-drv{
    transform-origin: 412px center; transform: scaleX(0);
    animation: aaHeroDrv .9s cubic-bezier(.4,0,.2,1) calc(2.4s + var(--d, 0s)) forwards;
}
@keyframes aaHeroDrv{ to{ transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce){
    .aa-hero-hist{ stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
    .aa-hero-forecast, .aa-hero-anom{ opacity: 1; transform: none; animation: none; }
    .aa-hero-anom-dot{ animation: none; }
    .aa-hero-drv{ transform: none; animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   02 · WHAT IS ADVANCED ANALYTICS — copy stacked left, the verbatim
   question chain drawn as an ascending "depth staircase" on the right.
   Each step is a glass card whose height grows left→right (--h), with
   a mini chart standing for the kind of answer that question gets. On
   reveal the steps rise in one after another; after that a highlight
   walks up the stairs on an 8s loop (2s per step) so the four read as
   one progression. A brand-tinted ramp behind the cards carries the
   "going deeper" slope even before anything animates.
   ════════════════════════════════════════════════════════════════ */
.aa-what{
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 64px; align-items: center;
}
.aa-what-copy{ max-width: 520px; }
.aa-what-block p{
    margin: 0;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15.5px; line-height: 26px; color: #4a5568;
}
.aa-what-block .dv-def-glyphs{ margin-top: 18px; }
.aa-what-k--brand{
    background-image: linear-gradient(90deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.aa-what-rule{
    display: block; height: 1px; margin: 30px 0;
    background: linear-gradient(90deg, rgba(40,99,195,.28), rgba(16,24,40,.06) 70%, transparent);
}

/* ── staircase ── */
.aa-what-vis{
    position: relative; display: flex; align-items: flex-end; gap: 12px;
    padding: 24px 0 0;
}
/* the ramp — a translucent brand slope rising with the steps */
.aa-what-ramp{
    position: absolute; inset: 0 -6% -6% -6%; z-index: 0; pointer-events: none;
    background: linear-gradient(135deg, rgba(28,169,201,.14), rgba(119,71,182,.14));
    clip-path: polygon(0 100%, 0 62%, 100% 8%, 100% 100%);
    border-radius: 24px; filter: blur(18px); opacity: .9;
}
.aa-what-step{
    position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
    height: var(--h, 200px);
    display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
    padding: 16px 16px 18px; border-radius: 18px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
    border: 1px solid rgba(16,24,40,.08);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 24px 44px -30px rgba(16,24,40,.28);
    /* rise in on reveal, then the looping highlight takes over */
    opacity: 0; transform: translateY(24px);
}
.reveal.is-visible .aa-what-step{
    animation:
        aaWhatRise .7s cubic-bezier(.22,.61,.36,1) calc(.15s + var(--i, 0) * .14s) forwards,
        aaWhatLit 8s ease-in-out calc(1.4s + var(--i, 0) * 2s) infinite;
}
@keyframes aaWhatRise{ to{ opacity: 1; transform: none; } }
@keyframes aaWhatLit{
    0%, 22%{ border-color: rgba(40,99,195,.5); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 30px 54px -28px rgba(40,99,195,.6); transform: translateY(-4px); }
    30%, 100%{ border-color: rgba(16,24,40,.08); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 24px 44px -30px rgba(16,24,40,.28); transform: none; }
}
.aa-what-chart{
    display: block; margin-top: auto; border-radius: 12px; overflow: hidden;
    background: linear-gradient(160deg, #f7f9fd 0%, #eef2f9 100%);
    border: 1px solid rgba(16,24,40,.06);
}
.aa-what-chart svg{ display: block; width: 100%; height: auto; }
.aa-what-num{
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; margin-top: 4px;
    font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 10.5px;
    color: #8c93a3; background: #fff; border: 1px solid rgba(16,24,40,.12);
}
.reveal.is-visible .aa-what-step .aa-what-num{
    animation: aaWhatNum 8s ease-in-out calc(1.4s + var(--i, 0) * 2s) infinite;
}
@keyframes aaWhatNum{
    0%, 22%{ color: #fff; border-color: transparent; background: linear-gradient(135deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%); box-shadow: 0 8px 16px -8px rgba(40,99,195,.7); }
    30%, 100%{ color: #8c93a3; border-color: rgba(16,24,40,.12); background: #fff; box-shadow: none; }
}
.aa-what-q{
    display: block;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 14.5px; line-height: 20px; letter-spacing: -.1px; color: #101828;
}

/* mini-chart motion, once, as each step lands */
.aa-what-bars rect{ transform-origin: center 50px; transform: scaleY(0); }
.reveal.is-visible .aa-what-bars rect{ animation: aaWhatBar .6s cubic-bezier(.34,1.4,.4,1) calc(.7s + var(--i, 0) * .14s) forwards; }
@keyframes aaWhatBar{ to{ transform: scaleY(1); } }
.aa-what-drv rect{ transform-origin: 40px center; transform: scaleX(0); }
.reveal.is-visible .aa-what-drv rect{ animation: aaWhatDrv .7s cubic-bezier(.4,0,.2,1) calc(.85s + var(--d, 0s)) forwards; }
@keyframes aaWhatDrv{ to{ transform: scaleX(1); } }
.aa-what-line{ stroke-dasharray: 90; stroke-dashoffset: 90; }
.reveal.is-visible .aa-what-line{ animation: aaWhatDraw 1s cubic-bezier(.4,0,.2,1) 1s forwards; }
@keyframes aaWhatDraw{ to{ stroke-dashoffset: 0; } }
.aa-what-band{ opacity: 0; }
.reveal.is-visible .aa-what-band{ animation: aaWhatFade .6s ease 1.8s forwards; }
@keyframes aaWhatFade{ to{ opacity: 1; } }
.aa-what-ring{ transform-origin: 74px 14px; animation: aaWhatRing 2.2s ease-out 1.6s infinite; }
@keyframes aaWhatRing{ 0%{ transform: scale(.4); opacity: 1; } 100%{ transform: scale(1.5); opacity: 0; } }

@media (prefers-reduced-motion: reduce){
    .aa-what-step{ opacity: 1; transform: none; }
    .reveal.is-visible .aa-what-step,
    .reveal.is-visible .aa-what-step .aa-what-num,
    .reveal.is-visible .aa-what-bars rect,
    .reveal.is-visible .aa-what-drv rect,
    .reveal.is-visible .aa-what-line,
    .reveal.is-visible .aa-what-band{ animation: none; }
    .aa-what-bars rect, .aa-what-drv rect{ transform: none; }
    .aa-what-line{ stroke-dasharray: none; stroke-dashoffset: 0; }
    .aa-what-band{ opacity: 1; }
    .aa-what-ring{ animation: none; opacity: .5; }
}

/* ════════════════════════════════════════════════════════════════
   03 · YOUR DATA CAN TELL YOU MORE — copy + question cards left, the
   layered "dashboard → why → what next" illustration right
   ════════════════════════════════════════════════════════════════ */
.aa-more{
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 60px; align-items: center;
}
.aa-more-copy .dm2-eyebrow{ margin-bottom: 20px; }
.aa-more-copy h2{
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 38px; line-height: 48px; letter-spacing: -.5px;
    color: var(--cool-101828, #101828); margin: 0 0 26px;
}
.aa-more-copy > p{
    margin: 26px 0 0;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px; color: #4a5568;
}
.aa-more-qs{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aa-more-q{
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    background: #fff; border: 1px solid rgba(16,24,40,.08);
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 15px; line-height: 21px; color: #101828;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.aa-more-q:hover{
    transform: translateY(-3px); border-color: rgba(40,99,195,.22);
    box-shadow: 0 20px 40px -24px rgba(16,24,40,.24);
}
.aa-more-q i{
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(119,71,182,.1), rgba(28,169,201,.12));
    border: 1px solid rgba(40,99,195,.16); color: #2863c3;
}
.aa-more-q i svg{ width: 18px; height: 18px; }

.aa-more-vis{ position: relative; }
.aa-more-vis svg{ display: block; width: 100%; height: auto; position: relative; z-index: 1; overflow: visible; }
.aa-more-vis-glow{
    position: absolute; inset: 8% 0 0; z-index: 0; pointer-events: none;
    border-radius: 40px; filter: blur(46px);
    background:
        radial-gradient(60% 60% at 30% 30%, rgba(40,99,195,.16), transparent 70%),
        radial-gradient(60% 60% at 76% 72%, rgba(119,71,182,.14), transparent 70%);
}
/* the two deeper layers surface forward once the section is in view,
   then float gently so the stack reads as live rather than pasted */
.aa-more-layer--2, .aa-more-layer--3{ opacity: 0; transform: translateY(18px); }
.reveal.is-visible .aa-more-layer--2{ animation: aaLayerIn .8s cubic-bezier(.4,0,.2,1) .5s forwards, aaLayerFloat 6s ease-in-out 1.4s infinite; }
.reveal.is-visible .aa-more-layer--3{ animation: aaLayerIn .8s cubic-bezier(.4,0,.2,1) 1s forwards, aaLayerFloat 6s ease-in-out 2.4s infinite reverse; }
@keyframes aaLayerIn{ to{ opacity: 1; transform: none; } }
@keyframes aaLayerFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce){
    .aa-more-layer--2, .aa-more-layer--3{ opacity: 1; transform: none; }
    .reveal.is-visible .aa-more-layer--2, .reveal.is-visible .aa-more-layer--3{ animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   04 · TWO WAYS INTELLIGENCE COMES TO YOU — zig-zag: row 1 copy-left
   /image-right (Do You Know), row 2 flipped, image-left/copy-right
   (Ask Me). .aa-zz-* is this page's general-purpose alternating-row
   component (also used, independently, by "Across the Business"
   further down — that section defines its own media treatment via a
   --shot modifier since these two shots are opaque UI screenshots,
   not this page's usual alpha-composited product PNGs: un-cropped on
   a tinted stage instead of cropped into a photo frame). Icon/tags
   reuse the .aa-two-ic / .aa-two-tags styling from this section's
   original card layout.
   ════════════════════════════════════════════════════════════════ */
.aa-zz{ display: flex; flex-direction: column; gap: 72px; }
.aa-zz-row{
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 64px; align-items: center;
}
/* Flip puts the media first visually while the copy stays first in the
   DOM, so every row reads title → description → image to a screen
   reader regardless of which side the media sits on. */
.aa-zz-row--flip .aa-zz-copy{ order: 2; }
.aa-zz-row--flip .aa-zz-media{ order: 1; }
.aa-zz-copy{ position: relative; max-width: 520px; padding-left: 26px; }
/* Left-edge progress bar — a track + gradient fill that auto-advances
   from empty to full once the row scrolls into view, reusing this
   page's scroll-reveal mechanism (.reveal → .is-visible) rather than a
   separate observer. Sits on the left edge of the COPY block itself
   (not the row), so on the flipped row it still reads as "left side
   of the content" even though that content sits on the row's right. */
.aa-zz-bar{
    position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
    border-radius: 2px; overflow: hidden;
    background: rgba(16,24,40,.08);
}
.aa-zz-bar-fill{
    display: block; width: 100%; height: 0; border-radius: 2px;
    background: linear-gradient(180deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
}
.reveal.is-visible .aa-zz-bar-fill{
    animation: aaZzBarFill 1.1s cubic-bezier(.22,.61,.36,1) .2s forwards;
}
@keyframes aaZzBarFill{ from{ height: 0; } to{ height: 100%; } }
@media (prefers-reduced-motion: reduce){
    .aa-zz-bar-fill{ height: 100%; animation: none; }
}
.aa-zz-row--flip .aa-zz-copy{ justify-self: end; }
.aa-zz-copy h3{
    margin: 0 0 14px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 400;
    font-size: 30px; line-height: 40px; letter-spacing: -.4px;
    color: var(--cool-101828, #101828);
}
.aa-zz-copy p{
    margin: 0;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px; color: #4a5568;
}
.aa-zz-media{ position: relative; margin: 0; width: 100%; max-width: 545px; justify-self: end; }
.aa-zz-row--flip .aa-zz-media{ justify-self: start; }

.aa-two-ic{
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: 18px;
    color: #fff;
    background: linear-gradient(135deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
    box-shadow: 0 12px 24px -12px rgba(40,99,195,.7);
}
.aa-two-ic svg{ width: 22px; height: 22px; }
.aa-two-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.aa-two-tags span{
    padding: 7px 13px; border-radius: 50px;
    background: rgba(40,99,195,.05); border: 1px solid rgba(40,99,195,.14);
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 12.5px; color: #33445e;
}

/* Tinted contain-stage — un-cropped, since a fixed photo aspect ratio
   would slice into these dense UI screenshots' edges. */
.aa-zz-media--shot{
    position: relative; overflow: hidden;
    border-radius: 24px;
    padding: 34px 30px; min-height: 300px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 26px 50px -26px rgba(14,72,165,.32);
    background:
        radial-gradient(70% 80% at 20% 0%, rgba(28,169,201,.14), transparent 60%),
        radial-gradient(70% 80% at 90% 100%, rgba(119,71,182,.14), transparent 60%),
        linear-gradient(180deg, #f5f8fe 0%, #eef3fb 100%);
    border: 1px solid rgba(16,24,40,.06);
}
.aa-zz-media--askme{
    background:
        radial-gradient(70% 80% at 80% 0%, rgba(119,71,182,.16), transparent 60%),
        radial-gradient(70% 80% at 10% 100%, rgba(40,99,195,.14), transparent 60%),
        linear-gradient(180deg, #f6f5fe 0%, #f0f0fb 100%);
}
.aa-zz-media--shot img{
    display: block; position: relative; z-index: 1;
    width: 100%; height: auto; max-height: 420px; object-fit: contain;
    filter: drop-shadow(0 22px 28px rgba(40,75,135,.18));
    transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.aa-zz-row:hover .aa-zz-media--shot img{ transform: translateY(-4px); }
/* discovery signal — three expanding rings in the corner of the Do You
   Know stage: the "found it before you asked" cue */
.aa-two-signal{ position: absolute; top: 26px; right: 26px; width: 44px; height: 44px; z-index: 2; pointer-events: none; }
.aa-two-signal i{
    position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid rgba(28,169,201,.7);
    animation: aaSignal 2.8s ease-out infinite;
}
.aa-two-signal i:nth-child(2){ animation-delay: .9s; }
.aa-two-signal i:nth-child(3){ animation-delay: 1.8s; }
.aa-two-signal::after{
    content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
    margin: -5px 0 0 -5px; border-radius: 50%;
    background: linear-gradient(135deg, #2863c3, #1ca9c9);
    box-shadow: 0 0 14px rgba(28,169,201,.8);
}
@keyframes aaSignal{ 0%{ transform: scale(.25); opacity: 1; } 100%{ transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce){
    .aa-two-signal i{ animation: none; opacity: .4; transform: scale(.8); }
    .aa-zz-row:hover .aa-zz-media--shot img{ transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   05 · FROM OBSERVATION TO FORESIGHT (dark) — pill-tab drag-strip +
   numbered stage (below) + glowing product shot
   ════════════════════════════════════════════════════════════════ */
.aa-foresight .dm2-flow2-head{ margin-bottom: 36px; }

/* Bullets + the Predict note — reused inside .aa-drag-panel below (kept
   under their original names since nothing else references them). */
.aa-four-bullets{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.aa-four-bullets li{
    position: relative; padding-left: 18px;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 22px; color: rgba(255,255,255,.72);
}
.aa-four-bullets li::before{
    content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%;
    background: linear-gradient(135deg, #4AE7FF, #b79bff);
}
.aa-four-note{
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
    padding: 8px 14px; border-radius: 50px; white-space: nowrap;
    background: rgba(183,155,255,.12); border: 1px solid rgba(183,155,255,.35);
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 12.5px; line-height: 18px; color: #d9c8ff;
}
.aa-four-note::before{
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #b79bff; flex: 0 0 auto;
}

/* ════════════════════════════════════════════════════════════════
   "From Observation to Foresight" interactive — ported from Data
   Magnet's Capabilities drag-strip + tilt-screenshot component
   (.mcp-drag-*, data-magnet-new.css) and recolored for this
   section's dark canvas: horizontal pill tabs, a single continuous
   progress bar beneath, then a two-column stage — a numbered
   dot+dashed marker beside the heading/copy/bullets on the left, the
   active way's flush shot on a mouse-tilt glass stage on the right.
   Namespaced .aa-drag- (vs. the source's .mcp-drag-) since the
   surface colors are inverted for dark.
   ════════════════════════════════════════════════════════════════ */
.aa-drag-track{
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 14px; margin-bottom: 28px;
}
.aa-drag-card{
    flex: 0 0 auto; cursor: pointer;
    padding: 11px 22px; border-radius: 50px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 15px; line-height: 21px; color: rgba(252,252,252,.75);
    white-space: nowrap; -webkit-user-select: none; user-select: none;
    transition: color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.aa-drag-card:hover{ color: #fff; border-color: rgba(255,255,255,.28); }
.aa-drag-card:focus-visible{ outline: 2px solid rgba(74,231,255,.6); outline-offset: 2px; }
.aa-drag-card.is-active{
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
    box-shadow: 0 14px 30px -14px rgba(40,99,195,.6);
}

.aa-drag-progress{
    position: relative; height: 3px; border-radius: 3px;
    background: rgba(255,255,255,.12);
    margin: 0 0 48px; overflow: hidden;
}
.aa-drag-progress-fill{
    position: absolute; inset: 0 auto 0 0; width: 25%; border-radius: 3px;
    background-image: linear-gradient(90deg, #4AE7FF 0%, #b79bff 100%);
    transition: width .5s cubic-bezier(.22,.61,.36,1);
}

.aa-drag-stage{
    display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
    align-items: center; gap: 56px;
}
.aa-drag-info{ position: relative; }
.aa-drag-panel{ display: none; position: relative; padding-left: 30px; }
.aa-drag-panel.is-active{ display: block; animation: aaDragRise .45s cubic-bezier(.22,.61,.36,1) backwards; }
@keyframes aaDragRise{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }

/* vertical dot + dashed marker beside the heading (top = current
   position, bottom = end of the four-way sequence) */
.aa-drag-marker{ position: absolute; left: 0; top: 6px; bottom: 6px; width: 12px; }
.aa-drag-marker::before{
    content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1px;
    background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.22) 0 4px, transparent 4px 9px);
}
.aa-drag-dot{
    position: absolute; left: 0; width: 11px; height: 11px; border-radius: 50%;
    background-image: linear-gradient(135deg, #4AE7FF 0%, #b79bff 100%);
    box-shadow: 0 0 0 4px rgba(74,231,255,.16);
}
.aa-drag-dot--top{ top: 0; }
.aa-drag-dot--bottom{ bottom: 0; }

.aa-drag-count{
    display: block; margin: 0 0 10px;
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
    font-size: 12.5px; letter-spacing: .14em;
    background-image: linear-gradient(90deg, #4AE7FF 0%, #b79bff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.aa-drag-panel h3{
    margin: 0 0 12px;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 30px; line-height: 38px; letter-spacing: -.3px; color: #fff;
}
.aa-drag-panel > p{
    margin: 0 0 20px;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 27px; color: rgba(252,252,252,.72);
}
.aa-drag-panel .aa-four-note{ margin-top: 16px; }

/* visual stage — re-exported with real alpha transparency
   (assets/images/Advanced Analytics/New/), so these render flush on
   the dark canvas the same way as this page's other product PNGs: no
   card, no frame, just the shot with a drop-shadow and an ambient
   glow grounding it in the whitespace. */
.aa-drag-visual{ min-width: 0; }
.aa-drag-screen{ position: relative; perspective: 900px; }
.aa-drag-tilt{
    position: relative; display: grid; min-height: 340px;
    transition: transform .25s ease-out; transform-style: preserve-3d; will-change: transform;
}
.aa-drag-tilt::before{
    content: ''; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
    border-radius: 40px; filter: blur(50px);
    background:
        radial-gradient(60% 60% at 26% 30%, rgba(74,231,255,.22), transparent 70%),
        radial-gradient(60% 60% at 78% 74%, rgba(183,155,255,.18), transparent 70%);
}
.aa-drag-shot{
    grid-area: 1 / 1; position: relative; z-index: 1; margin: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: scale(.97);
    transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.aa-drag-shot.is-active{ opacity: 1; visibility: visible; transform: none; }
.aa-drag-shot img{
    display: block; max-width: 88%; max-height: 400px; width: auto; height: auto; object-fit: contain;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
}
@media (prefers-reduced-motion: reduce){
    .aa-drag-tilt{ transition: none !important; transform: none !important; }
    .aa-drag-panel.is-active{ animation: none; }
    .aa-drag-shot{ transition: opacity .2s ease; }
}

/* ════════════════════════════════════════════════════════════════
   06 · BUILT FOR ANALYSTS — numbered hover-reveal cards, ported from
   lumenore-difference.css's .ld-opp-* "Opportunity" component. Same
   mechanics: one shared rounded panel; the active card widens to 66%
   and reveals its photo, the other two shrink to narrow numbered
   columns. JS toggles [data-active] on the panel and .is-active on
   the hovered/focused/clicked card; the CSS purely reacts to that
   state, so with no JS card 01 (open in the static HTML) is the only
   content shown — no interaction is required to read anything.
   Namespaced .aa-opp- (source used --ld-* custom properties scoped to
   .ld-page; ported with literal fallback values instead, since this
   page never defines them).
   ════════════════════════════════════════════════════════════════ */
.aa-opp-panel{ position: relative; display: flex; align-items: stretch; }
.aa-opp-panel__bg{
    position: absolute; inset: 0; z-index: 0;
    background: #f7f7f7;
    border-radius: 24px;
    box-shadow: 0 20px 50px -30px rgba(14,72,165,.25);
}
.aa-opp-card{
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 0;
    width: 33.334%;
    padding: 22px 32px;
    cursor: default; overflow: hidden;
    border-right: 1px solid rgba(16,24,40,.07);
    background: transparent;
    border-radius: 24px;
    transition: width .5s cubic-bezier(.22,.61,.36,1), gap .5s cubic-bezier(.22,.61,.36,1), background .35s ease;
}
.aa-opp-card:last-child{ border-right: 0; }
.aa-opp-card.is-active{ background: #fff; gap: 24px; }

/* active card takes the wide column; the other two share the rest */
.aa-opp-panel[data-active="0"] .aa-opp-card[data-opp-card="0"],
.aa-opp-panel[data-active="1"] .aa-opp-card[data-opp-card="1"],
.aa-opp-panel[data-active="2"] .aa-opp-card[data-opp-card="2"]{ width: 66%; }
.aa-opp-panel[data-active="0"] .aa-opp-card[data-opp-card="1"],
.aa-opp-panel[data-active="0"] .aa-opp-card[data-opp-card="2"],
.aa-opp-panel[data-active="1"] .aa-opp-card[data-opp-card="0"],
.aa-opp-panel[data-active="1"] .aa-opp-card[data-opp-card="2"],
.aa-opp-panel[data-active="2"] .aa-opp-card[data-opp-card="0"],
.aa-opp-panel[data-active="2"] .aa-opp-card[data-opp-card="1"]{ width: 17%; }

.aa-opp-card__content{ flex: 1 1 auto; min-width: 0; }
/* pinned width (set by JS via --opp-copy/--opp-copy-open), deliberately
   NOT transitioned — see the driver script for why leftover flex space
   made the copy re-wrap mid-animation. */
.aa-opp-panel.is-copy-pinned .aa-opp-card__content{ flex: 0 0 auto; width: var(--opp-copy); }
.aa-opp-panel.is-copy-pinned .aa-opp-card.is-active .aa-opp-card__content{ width: var(--opp-copy-open); }
.aa-opp-card__num{
    display: block;
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 34px; line-height: 1; letter-spacing: -.02em;
    color: rgba(16,24,40,.22);
    margin-bottom: 60px;
    transition: color .35s ease;
}
.aa-opp-card.is-active .aa-opp-card__num{
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.aa-opp-card__name{
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 22px; line-height: 30px; letter-spacing: -.2px;
    color: var(--cool-101828, #101828); margin: 0 0 10px;
}
.aa-opp-card__text{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15px; line-height: 25px; color: #4a5568; margin: 0;
}

/* inline photo — collapsed to nothing by default, revealed on hover/focus */
.aa-opp-card__figure{
    position: relative; z-index: 1;
    display: block; align-self: stretch;
    flex: 0 0 0%; width: 0%; margin: 0;
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 20px 40px -20px rgba(14,72,165,.4);
    opacity: 0;
    transition: flex-basis .5s cubic-bezier(.22,.61,.36,1), width .5s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.aa-opp-card.is-active .aa-opp-card__figure{ flex: 0 0 56%; width: 56%; opacity: 1; transition-delay: 0s, 0s, .05s; }
.aa-opp-card__figure img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(1.05);
}

@media (max-width: 1199px){
    .aa-opp-card{ padding: 18px 26px; }
    .aa-opp-card__num{ margin-bottom: 48px; }
}
@media (max-width: 991px){
    .aa-opp-panel{ flex-direction: column; }
    .aa-opp-panel .aa-opp-card{ width: 100% !important; }
    .aa-opp-card{ border-right: 0; border-bottom: 1px solid rgba(16,24,40,.07); padding: 28px 24px; }
    .aa-opp-card:last-child{ border-bottom: 0; }
    .aa-opp-card__num{ margin-bottom: 14px; }
    .aa-opp-card__figure{ display: none; }
}
@media (prefers-reduced-motion: reduce){
    .aa-opp-card{ transition: none; }
    .aa-opp-card__figure{ transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   07 · ACROSS THE BUSINESS — horizontal tabs; the active tab's
   underline fills over the dwell, the panel swaps beneath
   ════════════════════════════════════════════════════════════════ */
.aa-biz{ --dwell: 6s; }
.aa-biz-tabs{
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px;
    padding: 6px; border-radius: 60px;
    background: #fff; border: 1px solid rgba(16,24,40,.08);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 20px 44px -30px rgba(16,24,40,.24);
    width: max-content; max-width: 100%; margin-inline: auto;
}
.aa-biz-tab{
    position: relative; overflow: hidden;
    padding: 12px 22px; border-radius: 50px; border: 0; cursor: pointer;
    background: transparent;
    font-family: 'Space Grotesk', sans-serif; font-weight: 500;
    font-size: 15px; line-height: 20px; color: #4a5568; white-space: nowrap;
    transition: color .3s ease, background .3s ease;
}
.aa-biz-tab:hover{ color: #101828; background: rgba(40,99,195,.06); }
.aa-biz-tab.is-active{
    color: #fff;
    background: linear-gradient(90deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
    box-shadow: 0 12px 24px -12px rgba(40,99,195,.7);
}
.aa-biz-tab:focus-visible{ outline: 2px solid rgba(40,99,195,.5); outline-offset: 2px; }
.aa-biz-tab-bar{
    position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
    background: rgba(255,255,255,.55);
}
.aa-biz-tab.is-active .aa-biz-tab-bar{ animation: aaTabFill var(--dwell) linear forwards; }
@keyframes aaTabFill{ from{ width: 0; } to{ width: 100%; } }
.aa-biz[data-aa-stopped] .aa-biz-tab.is-active .aa-biz-tab-bar{ animation: none; width: 0; }

.aa-biz-stage{ position: relative; display: grid; }
.aa-biz-panel{
    grid-area: 1 / 1;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px; align-items: center;
    padding: 40px 44px; border-radius: 24px;
    background: #fff; border: 1px solid rgba(16,24,40,.08);
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 30px 60px -40px rgba(16,24,40,.24);
}
.aa-biz-panel[hidden]{ display: none; }
.aa-biz-panel.is-active{ animation: dvWayIn .5s cubic-bezier(.22,.61,.36,1); }
.aa-biz-k{
    display: inline-block; margin-bottom: 14px;
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    background-image: linear-gradient(90deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.aa-biz-copy p{
    margin: 0;
    font-family: 'Space Grotesk', sans-serif; font-weight: 400;
    font-size: 26px; line-height: 38px; letter-spacing: -.3px;
    color: var(--cool-101828, #101828);
}
.aa-biz-vis{ position: relative; }
.aa-biz-vis::before{
    content: ''; position: absolute; inset: 10% 4% -6%; z-index: 0; pointer-events: none;
    border-radius: 40px; filter: blur(40px);
    background:
        radial-gradient(60% 60% at 30% 30%, rgba(40,99,195,.14), transparent 70%),
        radial-gradient(60% 60% at 76% 72%, rgba(119,71,182,.12), transparent 70%);
}
.aa-biz-vis svg{
    display: block; position: relative; z-index: 1; width: 100%; height: auto;
    filter: drop-shadow(0 22px 30px rgba(40,75,135,.14));
}
@media (prefers-reduced-motion: reduce){
    .aa-biz-panel.is-active{ animation: none; }
    .aa-biz-tab.is-active .aa-biz-tab-bar{ animation: none; width: 0; }
}

/* ════════════════════════════════════════════════════════════════
   08 · ENTERPRISE TRUST (dark) — 2×2 of glass cards (dv-rca-card base)
   ════════════════════════════════════════════════════════════════ */
.aa-trust{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 980px; margin: 0 auto; }
.aa-trust-card{ display: flex; flex-direction: column; padding: 28px 28px 30px; }
.aa-trust-ic{
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 13px; margin-bottom: 18px;
    color: #4AE7FF;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.aa-trust-ic svg{ width: 22px; height: 22px; }
.aa-trust-card:hover .aa-trust-ic{
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #7747b6 0%, #2863c3 55%, #1ca9c9 100%);
}
.aa-trust-card h3{ font-size: 19px !important; line-height: 26px !important; }
.aa-trust-card p{ font-size: 14.5px !important; line-height: 24px !important; }

/* ════════════════════════════════════════════════════════════════
   09 · CUSTOMER PROOF — single-slide carousel of three customer
   stories, ported from lumenore-connector.html's cn2-story- pattern
   under an aa-story- prefix so this page stays self-contained.
   ════════════════════════════════════════════════════════════════ */
.aa-story-carousel{ position: relative; }

.aa-story-slide{
    display: none; position: relative; overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(120deg, #051a3c 0%, #0a2350 55%, #0d2a5e 100%);
    min-height: 428px;
}
.aa-story-slide.is-active{ display: block; }

.aa-story-bg{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

.aa-story-scrim{
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, #051a3c 15.6%, rgba(5,21,47,0) 100%);
}

.aa-story-content{
    position: relative; z-index: 1;
    max-width: 620px;
    padding: 44px 40px 44px 58px;
}
.aa-story-industry{
    display: block;
    font-family: 'Space Grotesk', sans-serif; font-weight: 300;
    font-size: 32px; line-height: 45px;
    color: var(--Base-White, #fcfcfc);
    margin-bottom: 12px;
}
.aa-story-content > p{
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15px; line-height: 26px;
    color: rgba(252,252,252,.9);
    margin: 0 0 24px;
}

.aa-story-stats{
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    margin-bottom: 28px;
}
.aa-story-stat{
    display: inline-block;
    padding: 9px 15px; border-radius: 50px;
    background: rgba(255,255,255,.12);
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 15px; line-height: 26px;
    color: var(--Base-White, #fcfcfc);
}

.aa-story-link{
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Inter', sans-serif; font-weight: 700;
    font-size: 15px; line-height: 26px;
    color: #eaeaea; text-decoration: none;
}
.aa-story-link svg{ width: 14px; height: 14px; transition: transform .22s ease; }
.aa-story-link:hover svg{ transform: translateX(3px); }

.aa-story-nav{
    display: flex; align-items: center; justify-content: center; gap: 18px;
    margin-top: 28px;
}
.aa-story-nav-btn{
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    background: var(--Grey-Grey-200, #f7f7f7);
    border: 1px solid rgba(16,24,40,.14);
    color: var(--cool-101828, #101828);
    transition: background .22s ease, border-color .22s ease;
}
.aa-story-nav-btn:hover{ background: rgba(16,24,40,.06); border-color: rgba(16,24,40,.28); }
.aa-story-nav-btn svg{ width: 16px; height: 16px; }
.aa-story-nav-count{
    font-family: 'Inter', sans-serif; font-size: 14px; color: #4a5568;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px){
    .aa-what{ grid-template-columns: 1fr; gap: 44px; }
    .aa-what-copy{ max-width: none; }
    .aa-more{ grid-template-columns: 1fr; gap: 40px; }
    .aa-more-copy h2{ font-size: 32px; line-height: 42px; }
    .aa-drag-stage{ grid-template-columns: 1fr; gap: 40px; }
    .aa-drag-visual{ order: -1; }
    .aa-drag-tilt{ min-height: 320px; }
    /* Zig-zag collapses to a single column; both row types put the copy
       first so the stacked order reads consistently top-to-bottom
       instead of alternating copy/photo down the page. */
    .aa-zz{ gap: 56px; }
    .aa-zz-row,
    .aa-zz-row--flip{ grid-template-columns: 1fr; gap: 28px; }
    .aa-zz-row--flip .aa-zz-copy{ order: 1; }
    .aa-zz-row--flip .aa-zz-media{ order: 2; }
    .aa-zz-copy{ max-width: none; }
    .aa-zz-row--flip .aa-zz-copy{ justify-self: start; }
    .aa-zz-media,
    .aa-zz-row--flip .aa-zz-media{ justify-self: start; max-width: 545px; }
    .aa-biz-panel{ grid-template-columns: 1fr; gap: 30px; padding: 32px; }
    .aa-biz-vis{ max-width: 460px; }
    .aa-trust{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
    .aa-hero-strap{ font-size: 14px; }
    /* staircase → 2×2 grid of equal cards: four rising columns at this
       width leave ~85px each, which wraps the longest question to four
       lines; the ramp goes with the slope. */
    .aa-what-vis{ display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; padding-top: 0; }
    .aa-what-step{ height: auto; min-height: 168px; }
    .aa-what-ramp{ display: none; }
    .aa-more-qs{ grid-template-columns: 1fr; }
    .aa-zz-media--shot{ padding: 24px 18px; min-height: 220px; }
    .aa-zz-copy h3{ font-size: 25px; line-height: 34px; }
    .aa-drag-track{ gap: 10px; }
    .aa-drag-card{ padding: 9px 16px; font-size: 13.5px; }
    .aa-drag-panel h3{ font-size: 24px; line-height: 32px; }
    .aa-drag-panel > p{ font-size: 15px; line-height: 25px; }
    /* shrink so the pill still fits on one line at narrow widths instead
       of wrapping or overflowing the panel */
    .aa-four-note{ padding: 7px 11px; gap: 6px; font-size: 10.5px; line-height: 15px; }
    .aa-biz-tabs{ border-radius: 20px; width: 100%; }
    .aa-biz-tab{ flex: 1 1 auto; text-align: center; padding: 10px 14px; font-size: 14px; }
    .aa-biz-copy p{ font-size: 21px; line-height: 31px; }
    .aa-biz-panel{ padding: 24px; }
    .aa-story-slide{ min-height: 0; }
    .aa-story-scrim{ background: linear-gradient(180deg, rgba(5,21,47,.86) 0%, #051a3c 60%); }
    .aa-story-content{ max-width: none; padding: 32px 24px; }
    .aa-story-industry{ font-size: 26px; line-height: 36px; }
    .aa-story-stats{ gap: 10px; }
}


/* ████████████████████████████████████████████████████████████████████████
   EMBEDDED ANALYTICS — page-only block (.ea-*)
   Appended to the shared product-page bundle. Everything above this line is
   the common system (hero stage, dm2-* rhythm, dm2-flow2 dark canvas, the
   dv-* / aa-* / mcp-drag-* component sets, mcp-cta and the FAQ finale) and
   is untouched, so this page reads as one system with Lumenore Connector,
   Data Lakehouse, Advanced Analytics, Data Visualization, Conversational
   Analytics, Decision Intelligence and Self-Service Analytics while
   carrying the components unique to it.

   Colour vocabulary is the shared brand ramp — turquoise #1ca9c9, royal
   blue #2863c3, violet #7747b6, with #4AE7FF / #b79bff as the dark-canvas
   accents and #e879f9 reserved for "this is the embedded surface". Light
   surfaces use #101828 for headings and #4a5568 for body, per the contrast
   rule in DESIGN_GUIDELINES.md.

   Every animation on this page is decorative. Each one is switched off
   wholesale in the prefers-reduced-motion block at the end, and no copy
   anywhere depends on motion to be readable.
   ████████████████████████████████████████████████████████████████████████ */


/* The dark flow heads on this page carry longer H2s than the homepage band
   they inherit from, so give them room before they wrap. */
.ea-bvb-sec .dm2-flow2-head,
.ea-int-sec .dm2-flow2-head,
.ea-sec-sec .dm2-flow2-head,
.ea-plat-sec .dm2-flow2-head{ max-width: 900px; }


/* ═══════════════ 01 · HERO ═══════════════════════════════════════════ */

/* Trust bar — the docx's hero trust line, set as a quiet rule under the
   CTAs rather than a logo wall, so the hero keeps a single focal point. */
.ea-hero-trust{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(252,252,252,.12);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: rgba(252,252,252,.72);
}
.ea-hero-trust-dots{ display: inline-flex; flex: 0 0 auto; }
.ea-hero-trust-dots span{
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid #0a2a55;
    background: linear-gradient(135deg, #2863c3, #1ca9c9);
}
.ea-hero-trust-dots span + span{ margin-left: -8px; }
.ea-hero-trust-dots span:nth-child(2){ background: linear-gradient(135deg, #7747b6, #2863c3); }
.ea-hero-trust-dots span:nth-child(3){ background: linear-gradient(135deg, #1ca9c9, #4AE7FF); }


/* ── Hero visual: a host product window with the Lumenore panel embedded
   inside it. The chrome, sidebar and tab row belong to "your product";
   the panel that slides in and lights up is the analytics. ── */
.ea-hero-vis{ position: relative; width: 100%; }
.ea-hero-vis svg{ width: 100%; height: auto; display: block; overflow: visible; }

.ea-hv-k{
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    fill: rgba(252,252,252,.5);
}
.ea-hv-t{ font-family: 'Inter', sans-serif; font-size: 11px; fill: rgba(252,252,252,.78); }
.ea-hv-v{ font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 500; fill: #fcfcfc; }
.ea-hv-badge{ font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .12em; fill: #67d3ff; }

/* The embedded panel arrives once, then holds. */
.ea-hv-panel{ opacity: 0; transform: translateX(18px); transform-origin: 420px 240px; animation: eaPanelIn 1s cubic-bezier(.22,1,.36,1) .45s forwards; }
@keyframes eaPanelIn{ to{ opacity: 1; transform: none; } }

/* A seam that draws itself where the panel meets the host app. */
.ea-hv-seam{ stroke-dasharray: 300; stroke-dashoffset: 300; animation: eaSeam 1.4s cubic-bezier(.4,0,.2,1) 1.1s forwards; }
@keyframes eaSeam{ to{ stroke-dashoffset: 0; } }

.ea-hv-bar{ transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: eaBar .7s cubic-bezier(.34,1.4,.4,1) forwards; }
.ea-hv-bar:nth-of-type(1){ animation-delay: 1.25s; }
.ea-hv-bar:nth-of-type(2){ animation-delay: 1.35s; }
.ea-hv-bar:nth-of-type(3){ animation-delay: 1.45s; }
.ea-hv-bar:nth-of-type(4){ animation-delay: 1.55s; }
.ea-hv-bar:nth-of-type(5){ animation-delay: 1.65s; }
.ea-hv-bar:nth-of-type(6){ animation-delay: 1.75s; }
@keyframes eaBar{ to{ transform: scaleY(1); } }

.ea-hv-spark{ stroke-dasharray: 260; stroke-dashoffset: 260; animation: eaSpark 1.5s cubic-bezier(.4,0,.2,1) 1.5s forwards; }
@keyframes eaSpark{ to{ stroke-dashoffset: 0; } }

.ea-hv-ping{ animation: eaPing 3.2s ease-in-out 2.2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes eaPing{ 0%,70%,100%{ opacity: .35; transform: scale(1); } 82%{ opacity: 1; transform: scale(1.5); } }

/* The natural-language row types itself, then a chip answer lands. */
.ea-hv-typed{ transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: eaType 1.1s steps(22) 2s forwards; }
@keyframes eaType{ to{ transform: scaleX(1); } }
.ea-hv-caret{ animation: eaCaret 1s steps(1) 2s infinite; }
@keyframes eaCaret{ 0%,50%{ opacity: 1; } 51%,100%{ opacity: 0; } }
.ea-hv-answer{ opacity: 0; animation: eaAnswer .6s ease 3.2s forwards; }
@keyframes eaAnswer{ to{ opacity: 1; } }

/* A soft runner travels the host-app rail, tying the two halves together. */
.ea-hv-run{ animation: eaRun 5s cubic-bezier(.5,0,.5,1) 2.6s infinite; }
@keyframes eaRun{ 0%{ opacity: 0; transform: translateY(0); } 12%{ opacity: 1; } 88%{ opacity: 1; } 100%{ opacity: 0; transform: translateY(150px); } }


/* ═══════════ 02 · PRODUCT VALUE — four outcome cards ═════════════════ */

.ea-value{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 52px;
}
.ea-value-card{
    position: relative;
    display: flex; flex-direction: column;
    padding: 30px 26px 28px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(40,99,195,.12);
    box-shadow: 0 2px 6px rgba(16,24,40,.05);
    overflow: hidden;
    transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), border-color .5s ease;
}
/* A brand rule that fills across the card top on hover. */
.ea-value-card::before{
    content: '';
    position: absolute; inset: 0 auto auto 0;
    height: 3px; width: 100%;
    background: linear-gradient(90deg, #1ca9c9, #2863c3 52%, #7747b6);
    transform: scaleX(0); transform-origin: left;
    transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.ea-value-card:hover{
    transform: translateY(-6px);
    border-color: rgba(40,99,195,.24);
    box-shadow: 0 22px 44px -20px rgba(16,24,40,.24);
}
.ea-value-card:hover::before{ transform: scaleX(1); }

.ea-value-ic{
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center;
    margin-bottom: 20px;
    background: linear-gradient(150deg, #e7f8fe, #e7eef8);
    color: #2863c3;
    border: 1px solid rgba(40,99,195,.12);
}
.ea-value-ic svg{ width: 22px; height: 22px; }

.ea-value-n{
    position: absolute; top: 26px; right: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: .1em;
    color: rgba(40,99,195,.3);
}
.ea-value-card h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500; font-size: 22px; line-height: 30px; letter-spacing: -.2px;
    color: #101828; margin: 0 0 12px;
}
.ea-value-card p{
    font-family: 'Inter', sans-serif;
    font-size: 15px; line-height: 25px;
    color: #4a5568; margin: 0;
}


/* ═══════════ 03 · BUILD VS BUY — a two-column ledger ═════════════════ */

.ea-bvb{
    margin-top: 46px;
    border-radius: 20px;
    border: 1px solid rgba(252,252,252,.1);
    background: rgba(252,252,252,.03);
    overflow: hidden;
    backdrop-filter: blur(6px);
}
.ea-bvb-head{
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid rgba(252,252,252,.1);
}
.ea-bvb-head > div{
    display: flex; align-items: center; gap: 10px;
    padding: 20px 30px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(252,252,252,.55);
}
.ea-bvb-head > div + div{
    border-left: 1px solid rgba(252,252,252,.1);
    color: #67d3ff;
    background: linear-gradient(180deg, rgba(74,231,255,.08), rgba(74,231,255,0));
}
.ea-bvb-mark{
    width: 20px; height: 20px; border-radius: 6px;
    display: grid; place-items: center;
    background: rgba(252,252,252,.08);
    color: rgba(252,252,252,.55);
}
.ea-bvb-head > div + div .ea-bvb-mark{ background: rgba(103,211,255,.16); color: #67d3ff; }
.ea-bvb-mark svg{ width: 12px; height: 12px; }

.ea-bvb-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(252,252,252,.07);
}
.ea-bvb-row:first-of-type{ border-top: 0; }
.ea-bvb-row > div{
    padding: 18px 30px;
    font-family: 'Inter', sans-serif;
    font-size: 15px; line-height: 24px;
    color: rgba(252,252,252,.72);
    display: flex; align-items: center; gap: 12px;
}
.ea-bvb-row > div + div{
    border-left: 1px solid rgba(252,252,252,.1);
    color: #fcfcfc;
    background: rgba(74,231,255,.04);
}
.ea-bvb-row:hover > div + div{ background: rgba(74,231,255,.08); }
.ea-bvb-row > div::before{
    content: '';
    flex: 0 0 auto;
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(252,252,252,.22);
}
.ea-bvb-row > div + div::before{ background: linear-gradient(135deg, #4AE7FF, #b79bff); box-shadow: 0 0 0 4px rgba(74,231,255,.12); }

.ea-bvb-cta{ margin-top: 34px; display: flex; justify-content: center; }


/* ═══════════ 04 · EMBEDDED INTELLIGENCE — drag rail + closing line ═══ */

/* The five stages carry longer names than the Data Magnet rail was drawn
   for, so let the pills breathe rather than truncate. */
.ea-caps .mcp-drag-card{ white-space: nowrap; }
.ea-caps-note{
    display: flex; align-items: center; justify-content: center; gap: 24px;
    margin: 44px auto 0;
    max-width: 1040px;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300; font-size: 18px; line-height: 28px;
    color: #101828; text-align: center;
}
.ea-caps-note::before,
.ea-caps-note::after{
    content: '';
    flex: 1 1 90px;
    min-width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(40,99,195,.32));
}
.ea-caps-note::after{ transform: scaleX(-1); }
.ea-caps-note span{ flex: 0 1 auto; max-width: 720px; }


/* ═══════════ 05 · NATIVE PRODUCT EXPERIENCE ══════════════════════════ */

.ea-native{
    display: grid;
    grid-template-columns: minmax(220px, .76fr) minmax(480px, 1.48fr) minmax(220px, .76fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 22px clamp(24px, 2.8vw, 44px);
    align-items: stretch;
    margin-top: 36px;
}
.ea-native-list{
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: eaNativeFeature;
}
.ea-native-item{
    position: relative;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 15px;
    min-height: 190px;
    padding: 24px 22px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,249,253,.86));
    border: 1px solid rgba(40,99,195,.1);
    box-shadow: 0 16px 34px -28px rgba(16,24,40,.32), inset 0 1px 0 rgba(255,255,255,.9);
    counter-increment: eaNativeFeature;
    transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease, background .45s ease;
}
.ea-native-item:nth-child(1){ grid-column: 1; grid-row: 1; }
.ea-native-item:nth-child(2){ grid-column: 1; grid-row: 2; }
.ea-native-item:nth-child(3){ grid-column: 3; grid-row: 1; }
.ea-native-item:nth-child(4){ grid-column: 3; grid-row: 2; }
.ea-native-item::before{
    content: '';
    position: absolute;
    top: 50%;
    width: clamp(24px, 2.8vw, 44px);
    height: 1px;
    background: linear-gradient(90deg, rgba(119,71,182,.42), rgba(40,99,195,.12));
}
.ea-native-item:nth-child(-n+2)::before{ left: 100%; }
.ea-native-item:nth-child(n+3)::before{ right: 100%; transform: rotate(180deg); }
.ea-native-item::after{
    content: '0' counter(eaNativeFeature);
    position: absolute;
    top: 16px; right: 16px;
    font: 500 9px/1 'JetBrains Mono', monospace;
    letter-spacing: .1em;
    color: rgba(119,71,182,.34);
}
.ea-native-item:hover{
    transform: translateY(-4px);
    background: #fff;
    border-color: rgba(40,99,195,.24);
    box-shadow: 0 20px 38px -24px rgba(16,24,40,.3);
}
.ea-native-ic{
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(150deg, #f0ebf7, #e7eef8);
    color: #7747b6;
    border: 1px solid rgba(119,71,182,.12);
}
.ea-native-ic svg{ width: 21px; height: 21px; }
.ea-native-item h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500; font-size: 18px; line-height: 24px;
    color: #101828; margin: 4px 20px 9px 0;
}
.ea-native-item p{
    font-family: 'Inter', sans-serif;
    grid-column: 1 / -1;
    font-size: 13.5px; line-height: 22px; color: #4a5568; margin: 2px 0 0;
}

/* The theming visual: the same embedded panel, rendered in three host
   palettes, cycling — which is the white-label point made without words. */
.ea-native-vis{
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    padding: 38px 12px 28px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 72% 20%, rgba(40,99,195,.13), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(239,243,250,.82));
    border: 1px solid rgba(40,99,195,.1);
    box-shadow: 0 28px 65px -42px rgba(16,24,40,.38), inset 0 1px 0 #fff;
    isolation: isolate;
}
.ea-native-vis::before{
    content: '';
    position: absolute;
    inset: 18% 8% 5%;
    z-index: -1;
    background: radial-gradient(ellipse, rgba(119,71,182,.15), transparent 68%);
    filter: blur(22px);
}
.ea-native-vis svg{ width: 100%; height: auto; display: block; }
.ea-native-themes{
    position: absolute;
    top: 16px; left: 20px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ea-native-theme{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 50px;
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(40,99,195,.1);
    font: 500 8px/1 'JetBrains Mono', monospace;
    letter-spacing: .05em;
    color: rgba(16,24,40,.5);
    animation: eaNativeTheme 12s ease-in-out infinite;
}
.ea-native-theme i{ width: 6px; height: 6px; border-radius: 50%; background: #2863c3; }
.ea-native-theme--2{ animation-delay: 4s; }
.ea-native-theme--2 i{ background: #b79bff; }
.ea-native-theme--3{ animation-delay: 8s; }
.ea-native-theme--3 i{ background: #1ca9c9; }
@keyframes eaNativeTheme{
    0%,2%,36%,100%{ opacity: .48; box-shadow: none; transform: translateY(0); }
    8%,30%{ opacity: 1; color: #101828; border-color: rgba(40,99,195,.22); box-shadow: 0 7px 18px rgba(40,99,195,.1); transform: translateY(-1px); }
}
.ea-nv-skin{ opacity: 0; animation: eaSkin 12s ease-in-out infinite; }
.ea-nv-skin--1{ animation-delay: 0s; }
.ea-nv-skin--2{ animation-delay: 4s; }
.ea-nv-skin--3{ animation-delay: 8s; }
@keyframes eaSkin{ 0%,2%{ opacity: 0; } 8%,30%{ opacity: 1; } 36%,100%{ opacity: 0; } }
.ea-nv-chip{
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
}
.ea-nv-label{ font-family: 'Inter', sans-serif; font-size: 10.5px; }
.ea-nv-title{ font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500; }
.ea-nv-filter{ font-family: 'JetBrains Mono', monospace; font-size: 6.5px; letter-spacing: .08em; }
.ea-native-phone{
    position: absolute;
    right: -20px;
    bottom: 34px;
    z-index: 4;
    width: 116px;
    height: 184px;
    padding: 20px 11px 12px;
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 24px;
    background: #f8fafc;
    box-shadow: 0 20px 34px rgba(16,24,40,.2), 0 0 0 1px rgba(40,99,195,.08);
}
.ea-native-phone-notch{
    position: absolute;
    top: 5px; left: 50%;
    width: 32px; height: 5px;
    transform: translateX(-50%);
    border-radius: 4px;
    background: #d7dfeb;
}
.ea-native-phone-head{ display: flex; align-items: center; gap: 6px; font: 500 8px/1 'Space Grotesk', sans-serif; color: #101828; }
.ea-native-phone-head i{ width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg,#1ca9c9,#7747b6); }
.ea-native-phone-kpi{
    display: flex; flex-direction: column; gap: 3px;
    margin-top: 17px; padding: 10px;
    border-radius: 10px;
    background: #e7eef8;
}
.ea-native-phone-kpi small{ font: 500 6px/1 'JetBrains Mono', monospace; letter-spacing: .12em; color: #4a5568; }
.ea-native-phone-kpi strong{ font: 600 15px/1.2 'Space Grotesk', sans-serif; color: #2863c3; }
.ea-native-phone-bars{ display: flex; align-items: end; gap: 5px; height: 56px; margin: 15px 4px 0; border-bottom: 1px solid #dbe4ef; }
.ea-native-phone-bars i{ width: 10px; height: 45%; border-radius: 3px 3px 0 0; background: #9fbae4; }
.ea-native-phone-bars i:nth-child(2){ height: 72%; background: #2863c3; }
.ea-native-phone-bars i:nth-child(3){ height: 56%; }
.ea-native-phone-bars i:nth-child(4){ height: 86%; background: #2863c3; }
.ea-native-phone-bars i:nth-child(5){ height: 66%; }
.ea-native-access{
    position: absolute;
    left: 28px;
    bottom: 28px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 50px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(14,72,165,.2);
    box-shadow: 0 10px 22px rgba(16,24,40,.12);
    font: 500 9px/1 'JetBrains Mono', monospace;
    letter-spacing: .04em;
    color: #0e48a5;
}
.ea-native-access svg{ width: 14px; height: 14px; }
.ea-native-vis-cap{
    display: block;
    margin-top: 12px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(16,24,40,.42);
}


/* ═══════════ 06 · INTEGRATION OPTIONS — three depths ═════════════════ */

.ea-int{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.ea-int-card{
    position: relative;
    display: flex; flex-direction: column;
    padding: 32px 28px 28px;
    border-radius: 20px;
    background: rgba(252,252,252,.04);
    border: 1px solid rgba(252,252,252,.11);
    overflow: hidden;
    transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .5s ease, background .5s ease;
}
.ea-int-card::after{
    content: '';
    position: absolute; inset: auto 0 0 0; height: 1px;
    background: linear-gradient(90deg, transparent, #4AE7FF, transparent);
    opacity: 0; transition: opacity .5s ease;
}
.ea-int-card:hover{
    transform: translateY(-6px);
    background: rgba(252,252,252,.07);
    border-color: rgba(74,231,255,.3);
}
.ea-int-card:hover::after{ opacity: 1; }

.ea-int-depth{
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(252,252,252,.45);
}
.ea-int-depth i{
    width: 22px; height: 4px; border-radius: 2px;
    background: rgba(252,252,252,.14);
    display: inline-block;
}
.ea-int-card--1 .ea-int-depth i:nth-child(1),
.ea-int-card--2 .ea-int-depth i:nth-child(-n+2),
.ea-int-card--3 .ea-int-depth i{ background: linear-gradient(90deg, #4AE7FF, #b79bff); }

.ea-int-ic{
    width: 50px; height: 50px; border-radius: 15px;
    display: grid; place-items: center;
    margin-bottom: 20px;
    background: linear-gradient(150deg, rgba(74,231,255,.16), rgba(183,155,255,.14));
    border: 1px solid rgba(252,252,252,.12);
    color: #67d3ff;
}
.ea-int-ic svg{ width: 23px; height: 23px; }

.ea-int-card h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500; font-size: 24px; line-height: 32px;
    color: #fcfcfc; margin: 0 0 12px;
}
.ea-int-card > p:not(.ea-int-best){
    font-family: 'Inter', sans-serif;
    font-size: 15px; line-height: 25px;
    color: rgba(252,252,252,.72); margin: 0 0 22px;
}
.ea-int-best{
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(252,252,252,.1);
    font-family: 'Inter', sans-serif;
    font-size: 14px; line-height: 23px;
    color: rgba(252,252,252,.72);
}
.ea-int-best b{
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 500; letter-spacing: .05em;
    color: #67d3ff; margin-bottom: 6px;
}
.ea-int-cta{ margin-top: 36px; display: flex; justify-content: center; }


/* ═══════════ 07 · GOVERNED ANALYTICS ═════════════════════════════════ */

.ea-gov{
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 56px;
    align-items: center;
    margin-top: 50px;
}
.ea-gov-vis svg{ width: 100%; height: auto; display: block; }
.ea-gov-halo{
    fill: none;
    stroke: #2863c3;
    transform-box: fill-box;
    transform-origin: center;
    animation: eaGovHalo 4.8s ease-out infinite;
}
.ea-gov-halo--outer{ stroke-width: 1; animation-delay: -2.4s; }
.ea-gov-halo--inner{ stroke-width: 1.4; }
@keyframes eaGovHalo{
    0%{ opacity: 0; transform: scale(.82); }
    28%{ opacity: .2; }
    100%{ opacity: 0; transform: scale(1.16); }
}
.ea-gov-orbit{ transform-box: fill-box; transform-origin: center; animation: eaOrbit 26s linear infinite; }
@keyframes eaOrbit{ to{ transform: rotate(360deg); } }
.ea-gov-pulse{ transform-box: fill-box; transform-origin: center; animation: eaGovPulse 4s ease-in-out infinite; }
@keyframes eaGovPulse{ 0%,100%{ opacity: .5; transform: scale(1); } 50%{ opacity: 1; transform: scale(1.06); } }
.ea-gov-feed{ stroke-dasharray: 4 7; animation: eaFeed 2.4s linear infinite; }
@keyframes eaFeed{ to{ stroke-dashoffset: -22; } }
.ea-gov-packet{ opacity: 0; animation-duration: 4.8s; animation-timing-function: cubic-bezier(.22,.61,.36,1); animation-iteration-count: infinite; }
.ea-gov-packet--top{ animation-name: eaGovPacketTop; }
.ea-gov-packet--right{ animation-name: eaGovPacketRight; animation-delay: 1.2s; }
.ea-gov-packet--bottom{ animation-name: eaGovPacketBottom; animation-delay: 2.4s; }
.ea-gov-packet--left{ animation-name: eaGovPacketLeft; animation-delay: 3.6s; }
@keyframes eaGovPacketTop{
    0%,5%{ opacity: 0; transform: translateY(0); }
    12%,42%{ opacity: .95; }
    50%,100%{ opacity: 0; transform: translateY(-72px); }
}
@keyframes eaGovPacketRight{
    0%,5%{ opacity: 0; transform: translateX(0); }
    12%,42%{ opacity: .95; }
    50%,100%{ opacity: 0; transform: translateX(86px); }
}
@keyframes eaGovPacketBottom{
    0%,5%{ opacity: 0; transform: translateY(0); }
    12%,42%{ opacity: .95; }
    50%,100%{ opacity: 0; transform: translateY(72px); }
}
@keyframes eaGovPacketLeft{
    0%,5%{ opacity: 0; transform: translateX(0); }
    12%,42%{ opacity: .95; }
    50%,100%{ opacity: 0; transform: translateX(-86px); }
}
.ea-gov-node rect{ animation: eaGovNode 4.8s ease-in-out infinite; }
.ea-gov-node--right rect{ animation-delay: 1.2s; }
.ea-gov-node--bottom rect{ animation-delay: 2.4s; }
.ea-gov-node--left rect{ animation-delay: 3.6s; }
.ea-gov-node > path{ stroke-dasharray: 112; stroke-dashoffset: 112; animation: eaGovNodeLine 4.8s ease-in-out infinite; }
.ea-gov-node--right > path{ animation-delay: 1.2s; }
.ea-gov-node--bottom > path{ animation-delay: 2.4s; }
.ea-gov-node--left > path{ animation-delay: 3.6s; }
@keyframes eaGovNode{
    0%,48%,100%{ stroke: rgba(40,99,195,.14); }
    58%,72%{ stroke: rgba(40,99,195,.48); }
}
@keyframes eaGovNodeLine{
    0%,45%{ opacity: 0; stroke-dashoffset: 112; }
    58%,78%{ opacity: .8; stroke-dashoffset: 0; }
    100%{ opacity: .35; stroke-dashoffset: 0; }
}
.ea-gov-shield{ transform-box: fill-box; transform-origin: center; animation: eaGovShieldFloat 4s ease-in-out infinite; }
@keyframes eaGovShieldFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } }
.ea-gov-shield-outline{ stroke-dasharray: 130; animation: eaGovShieldDraw 5.6s ease-in-out infinite; }
.ea-gov-shield-check{ stroke-dasharray: 30; animation: eaGovCheckDraw 5.6s ease-in-out infinite; }
@keyframes eaGovShieldDraw{
    0%{ opacity: .35; stroke-dashoffset: 130; }
    18%,84%{ opacity: 1; stroke-dashoffset: 0; }
    100%{ opacity: .35; stroke-dashoffset: 0; }
}
@keyframes eaGovCheckDraw{
    0%,16%{ opacity: 0; stroke-dashoffset: 30; }
    30%,84%{ opacity: 1; stroke-dashoffset: 0; }
    100%{ opacity: .5; stroke-dashoffset: 0; }
}
.ea-gov-chip{ transform-box: fill-box; transform-origin: center; animation: eaGovChipFloat 4.4s ease-in-out infinite alternate; }
.ea-gov-chip--permissions{ animation-delay: -.8s; }
.ea-gov-chip--lineage{ animation-delay: -1.6s; }
.ea-gov-chip--context{ animation-delay: -2.4s; }
@keyframes eaGovChipFloat{ to{ transform: translateY(-2.5px); } }
.ea-gov-svg-k{ font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .12em; fill: rgba(16,24,40,.45); }
.ea-gov-svg-t{ font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500; fill: #101828; }
.ea-gov-chip .ea-gov-svg-k{ fill: rgba(16,24,40,.55); letter-spacing: .1em; }

.ea-gov-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ea-gov-card{
    padding: 26px 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(40,99,195,.1);
    transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.ea-gov-card:hover{ transform: translateY(-5px); box-shadow: 0 18px 38px -22px rgba(16,24,40,.24); }
.ea-gov-ic{
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center;
    margin-bottom: 16px;
    background: linear-gradient(150deg, #e8f6fa, #e7eef8);
    color: #1ca9c9;
    border: 1px solid rgba(28,169,201,.14);
}
.ea-gov-ic svg{ width: 19px; height: 19px; }
.ea-gov-card h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500; font-size: 18px; line-height: 24px;
    color: #101828; margin: 0 0 8px;
}
.ea-gov-card p{
    font-family: 'Inter', sans-serif;
    font-size: 14.5px; line-height: 24px; color: #4a5568; margin: 0;
}


/* ═══════════ 09 · SECURITY AND ACCESS — governed-access architecture ═ */

.ea-sec{
    display: grid;
    grid-template-columns: minmax(340px, .82fr) minmax(0, 1.45fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    margin-top: 54px;
}
.ea-sec-visual{
    position: relative;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 1;
    justify-self: center;
    isolation: isolate;
}
.ea-sec-visual::before{
    content: '';
    position: absolute;
    inset: 7%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(40,99,195,.2) 0%, rgba(85,41,142,.1) 44%, transparent 72%);
    filter: blur(12px);
}
.ea-sec-visual-orb{ position: absolute; inset: 6%; }
.ea-sec-visual-orb svg{ width: 100%; height: 100%; display: block; overflow: visible; }
.ea-sec-ring{
    fill: none;
    stroke: rgba(129,164,255,.18);
    transform-box: fill-box;
    transform-origin: center;
}
.ea-sec-ring--outer{ stroke-width: 1; stroke-dasharray: 2 10; animation: eaSecOrbit 32s linear infinite; }
.ea-sec-ring--mid{ stroke: rgba(74,231,255,.2); stroke-width: 1.2; stroke-dasharray: 5 9; animation: eaSecOrbit 24s linear infinite reverse; }
.ea-sec-ring--inner{ stroke: rgba(183,155,255,.24); stroke-width: 1; stroke-dasharray: 2 7; }
@keyframes eaSecOrbit{ to{ transform: rotate(360deg); } }
.ea-sec-links{ stroke-dasharray: 4 7; animation: eaSecFlow 2.6s linear infinite; }
@keyframes eaSecFlow{ to{ stroke-dashoffset: -22; } }
.ea-sec-user circle:first-child{
    fill: rgba(17,27,66,.96);
    stroke: rgba(74,231,255,.5);
    stroke-width: 1.2;
}
.ea-sec-user circle:not(:first-child){ fill: none; }
.ea-sec-user path,
.ea-sec-user circle:not(:first-child){ stroke: #7BEAFF; stroke-width: 1.35; stroke-linecap: round; }
.ea-sec-user{ transform-box: fill-box; transform-origin: center; animation: eaSecUserPulse 4.8s ease-in-out infinite; }
.ea-sec-user--right{ animation-delay: -1.2s; }
.ea-sec-user--bottom{ animation-delay: -2.4s; }
.ea-sec-user--left{ animation-delay: -3.6s; }
@keyframes eaSecUserPulse{ 0%,100%{ opacity: .7; transform: scale(.94); } 50%{ opacity: 1; transform: scale(1.06); } }
.ea-sec-core-glow{ transform-box: fill-box; transform-origin: center; animation: eaSecCore 3.4s ease-in-out infinite; }
@keyframes eaSecCore{ 0%,100%{ opacity: .08; transform: scale(.92); } 50%{ opacity: .2; transform: scale(1.12); } }
.ea-sec-shield{ transform-box: fill-box; transform-origin: center; animation: eaSecShield 3.8s ease-in-out infinite; }
@keyframes eaSecShield{ 0%,100%{ transform: translateY(1px); } 50%{ transform: translateY(-2px); } }
.ea-sec-core-copy{
    position: absolute;
    left: 50%; top: 59%;
    width: 150px;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}
.ea-sec-core-copy span{
    display: block;
    font: 500 8.5px/1.4 'JetBrains Mono', monospace;
    letter-spacing: .13em;
    color: #7BEAFF;
}
.ea-sec-core-copy strong{
    display: block;
    margin-top: 4px;
    font: 500 13px/1.3 'Space Grotesk', sans-serif;
    color: #fff;
}
.ea-sec-audience{
    position: absolute;
    z-index: 2;
    padding: 6px 10px;
    border: 1px solid rgba(129,164,255,.2);
    border-radius: 50px;
    background: rgba(8,17,47,.86);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    font: 500 9px/1 'JetBrains Mono', monospace;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(252,252,252,.76);
    white-space: nowrap;
}
.ea-sec-audience--top{ top: 7%; left: 60%; }
.ea-sec-audience--right{ top: 41%; right: 0; }
.ea-sec-audience--bottom{ bottom: 7%; right: 53%; }
.ea-sec-audience--left{ top: 57%; left: 0; }

.ea-sec-controls{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ea-sec-row{
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    align-items: start;
    min-height: 208px;
    padding: 26px 24px 24px;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(252,252,252,.07), rgba(252,252,252,.025));
    border: 1px solid rgba(252,252,252,.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 20px 45px rgba(0,0,0,.08);
    transition: transform .45s cubic-bezier(.22,1,.36,1), background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.ea-sec-row::before{
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, #4AE7FF, #628DFF 58%, #B79BFF);
    opacity: .42;
    transform: scaleX(.38);
    transform-origin: left;
    transition: opacity .4s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.ea-sec-row:last-child{
    grid-column: 1 / -1;
    min-height: 0;
    padding-right: 70px;
}
.ea-sec-row:hover{
    transform: translateY(-6px);
    background: linear-gradient(145deg, rgba(74,231,255,.095), rgba(183,155,255,.045));
    border-color: rgba(74,231,255,.26);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 55px rgba(1,8,34,.25);
}
.ea-sec-row:hover::before{ opacity: .9; transform: scaleX(1); }
.ea-sec-index{
    position: absolute;
    top: 20px; right: 20px;
    font: 500 10px/1 'JetBrains Mono', monospace;
    letter-spacing: .1em;
    color: rgba(183,155,255,.5);
}
.ea-sec-badge{
    width: 48px; height: 48px; border-radius: 12px;
    display: grid; place-items: center;
    background: linear-gradient(150deg, rgba(74,231,255,.15), rgba(183,155,255,.12));
    border: 1px solid rgba(252,252,252,.12);
    color: #67d3ff;
    box-shadow: inset 0 0 20px rgba(74,231,255,.035);
}
.ea-sec-badge svg{ width: 21px; height: 21px; }
.ea-sec-body h3{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400; font-size: 18px; line-height: 25px;
    color: #fcfcfc; margin: 0 0 9px;
    padding-right: 16px;
}
.ea-sec-body h3 b{
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; line-height: 1.4; font-weight: 500; letter-spacing: .08em;
    text-transform: uppercase;
    color: #67d3ff;
    display: block; margin-bottom: 10px;
}
.ea-sec-body p{
    font-family: 'Inter', sans-serif;
    font-size: 13.5px; line-height: 22px; color: rgba(252,252,252,.72); margin: 0;
}

/* Security and access is a capability matrix, not a sequence. */
.ea-sec-sec .dm2-flow2-head{
    display: block;
    max-width: 980px;
    margin-inline: auto;
    text-align: center;
}
.ea-sec-sec .dm2-flow2-head h2{ margin: 20px 0 18px; }
.ea-sec-sec .dm2-flow2-head p{ max-width: 860px; margin-inline: auto; }

.ea-access-front{
    display: grid;
    grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr);
    gap: 56px;
    align-items: center;
    margin-top: 50px;
}
.ea-access-front-list{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ea-access-front-item{
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    padding: 20px 0 24px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.ea-access-front-item:last-child{ border-bottom: 0; }
.ea-access-front-item::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #4AE7FF, #b79bff);
    transition: width .5s cubic-bezier(.4,0,.2,1);
}
.ea-access-front-item:hover::before{ width: 100%; }
.ea-access-front-ic{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #67d3ff;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.ea-access-front-ic svg{ width: 21px; height: 21px; }
.ea-access-front-item:hover .ea-access-front-ic{
    color: #fff;
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(74,231,255,.2), rgba(183,155,255,.2));
    border-color: rgba(74,231,255,.4);
}
.ea-access-front-item h3{
    margin: 4px 0 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    color: #fcfcfc;
}
.ea-access-front-item h3 b{ font: inherit; color: inherit; }
.ea-access-front-item p{
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 24px;
    color: rgba(252,252,252,.72);
}
.ea-access-front-media{ position: relative; }
.ea-access-front-halo{
    position: absolute;
    inset: -12% -8% -8%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(520px 320px at 28% 22%, rgba(74,231,255,.23), transparent 64%), radial-gradient(520px 320px at 76% 84%, rgba(183,155,255,.25), transparent 64%);
    filter: blur(18px);
}
.ea-access-shot{ position: relative; z-index: 1; margin: 0; }
.ea-access-shot svg{ display: block; width: 100%; overflow: visible; stroke-linecap: round; stroke-linejoin: round; }
.ea-shot-main rect:first-child{ fill: url(#eaShotMain); stroke: rgba(255,255,255,.9); stroke-width: 1.2; }
.ea-shot-main > path{ stroke: rgba(49,67,119,.16); }
.ea-shot-main circle{ fill: rgba(52,75,135,.25); }
.ea-shot-main .ea-shot-nav{ stroke: rgba(47,69,130,.42); stroke-width: 4; }
.ea-shot-main .ea-shot-brand{ fill: rgba(68,99,174,.18); stroke: none; }
.ea-shot-main .ea-shot-status{ fill: rgba(55,199,157,.16); stroke: rgba(55,199,157,.24); }
.ea-shot-main .ea-shot-canvas{ fill: url(#eaShotCanvas); stroke: rgba(67,94,166,.17); }
.ea-shot-main .ea-shot-canvas-lines{ stroke: rgba(61,91,165,.3); stroke-width: 2; }
.ea-shot-core .ea-shot-core-orbit{ stroke: rgba(68,183,228,.32); stroke-dasharray: 5 9; }
.ea-shot-core .ea-shot-core-ring{ stroke: rgba(108,103,223,.16); stroke-dasharray: 2 7; }
.ea-shot-core > path:first-of-type{ stroke: rgba(255,255,255,.72); stroke-width: 2; }
.ea-shot-core > path:last-of-type{ stroke: #fff; stroke-width: 4; }
.ea-shot-core-node{ fill: #55DCEA; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(74,231,255,.72)); }
.ea-shot-id rect,
.ea-shot-policy rect:first-child,
.ea-shot-tenants > rect:first-child{ fill: rgba(253,254,255,.98); stroke: rgba(255,255,255,.92); stroke-width: 1.1; }
.ea-shot-id circle:first-of-type{ fill: rgba(47,181,224,.1); stroke: #36bfe4; }
.ea-shot-id circle:nth-of-type(2),
.ea-shot-id path{ stroke: rgba(44,76,145,.5); }
.ea-shot-id circle:nth-of-type(3){ fill: #37c9a4; stroke: none; }
.ea-shot-id .ea-shot-id-check{ stroke: #fff; stroke-width: 1.5; }
.ea-shot-panel-accent{ stroke: url(#eaShotFlow) !important; stroke-width: 2.2 !important; opacity: .72; }
.ea-shot-id-dot{ fill: #3ac7a1 !important; stroke: none !important; }
.ea-shot-id-detail{ stroke: rgba(55,199,157,.5) !important; stroke-width: 1.4; }
.ea-shot-policy{ stroke: rgba(76,90,156,.45); }
.ea-shot-policy ellipse{ fill: rgba(90,103,181,.09); }
.ea-shot-policy rect:last-of-type{ fill: rgba(60,199,157,.15); stroke: rgba(60,199,157,.45); }
.ea-shot-policy circle{ fill: #39c79d; stroke: none; }
.ea-shot-policy-check{ stroke: #37c79e; stroke-width: 1.8; }
.ea-shot-tenants > path{ stroke: rgba(55,74,130,.16); }
.ea-shot-tenants rect:not(:first-child){ fill: url(#eaShotTenant); stroke: rgba(66,86,151,.2); }
.ea-shot-tenants path:not(:first-of-type){ stroke: rgba(50,76,142,.35); }
.ea-shot-tenant-dot{ fill: #43cba9; stroke: none; }
.ea-shot-tenant-title{ stroke: rgba(65,90,154,.3) !important; stroke-width: 2; }
.ea-shot-tenant-bars{ stroke: url(#eaShotFlow) !important; stroke-width: 2.4; }
.ea-shot-flow{ stroke: url(#eaShotFlow); stroke-width: 1.5; stroke-dasharray: 5 7; }
.ea-shot-packets circle{ fill: #57dded; filter: drop-shadow(0 0 5px rgba(74,231,255,.8)); }
@keyframes eaShotFloatLeft{ 0%,100%{ transform: translate3d(0,0,0) rotate(-.4deg); } 50%{ transform: translate3d(0,-6px,0) rotate(.3deg); } }
@keyframes eaShotFloatRight{ 0%,100%{ transform: translate3d(0,0,0) rotate(.35deg); } 50%{ transform: translate3d(0,-7px,0) rotate(-.3deg); } }
.ea-shot-id{ transform-box: fill-box; transform-origin: center; animation: eaShotFloatLeft 5.6s ease-in-out infinite; }
.ea-shot-policy{ transform-box: fill-box; transform-origin: center; animation: eaShotFloatRight 6.2s ease-in-out infinite; }
.ea-access-front-tags{
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.ea-access-front-tags span{
    padding: 8px 14px;
    border-radius: 50px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 18px;
    color: rgba(252,252,252,.78);
}


/* ═══════════ 10 · USE CASES — the shared .aa-biz pill-tab component;
   only the extras this page needs are set here (same treatment as the
   persona tabs on conversational-analytics.html) ═══════════════════════ */

.ea-biz .aa-biz-tabs{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    /* `safe center` centres the five pills while they fit and falls back
       to flex-start the moment they don't. Plain `center` must not be
       used: centring an overflowing nowrap flex row splits the overflow
       across BOTH edges, and the browser's initial scroll position (0)
       then clips the first pill with no way to scroll back to it. The
       flex-start line below is the fallback for engines that don't
       understand the `safe` keyword. */
    justify-content: flex-start;
    justify-content: safe center;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    max-width: none;
    gap: 12px;
    margin-bottom: 0;
    padding: 8px 2px 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.ea-biz .aa-biz-tabs::-webkit-scrollbar{ display: none; }
.ea-biz .aa-biz-tab{
    flex: 0 0 auto;
    padding: 11px 18px;
    border: 1px solid rgba(40,99,195,.16);
    font-size: 13.5px;
    transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
/* :not(.is-active) matters — this selector outranks `.aa-biz-tab.is-active`,
   so without it hovering the selected pill repaints its gradient as the pale
   hover wash and leaves white text on near-white. */
.ea-biz .aa-biz-tab:not(.is-active):hover{
    border-color: rgba(40,99,195,.28);
    background: rgba(40,99,195,.035);
    transform: translateY(-1px);
}
.ea-biz .aa-biz-tab.is-active{
    border-color: transparent;
    box-shadow: 0 16px 30px -16px rgba(40,99,195,.72);
}
.ea-biz .aa-biz-tab-bar{ display: none; }
.ea-biz-progress{
    position: relative;
    height: 3px;
    margin: 0 0 40px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(40,99,195,.11);
}
.ea-biz-progress span{
    position: absolute;
    inset: 0 auto 0 0;
    width: 20%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1ca9c9, #2863c3 52%, #7747b6);
    transition: width .45s cubic-bezier(.22,.61,.36,1);
}
.ea-biz:has(.aa-biz-tab:nth-child(2).is-active) .ea-biz-progress span{ width: 40%; }
.ea-biz:has(.aa-biz-tab:nth-child(3).is-active) .ea-biz-progress span{ width: 60%; }
.ea-biz:has(.aa-biz-tab:nth-child(4).is-active) .ea-biz-progress span{ width: 80%; }
.ea-biz:has(.aa-biz-tab:nth-child(5).is-active) .ea-biz-progress span{ width: 100%; }
.ea-biz .aa-biz-panel{
    position: relative;
    overflow: hidden;
    min-height: 440px;
    padding: 48px 50px;
    border-color: rgba(40,99,195,.1);
    background:
        radial-gradient(420px 300px at 80% 30%, rgba(40,99,195,.065), transparent 72%),
        radial-gradient(380px 280px at 80% 82%, rgba(119,71,182,.06), transparent 72%),
        #fff;
    box-shadow: 0 34px 68px -48px rgba(20,52,110,.48);
}
.ea-biz .aa-biz-copy{ position: relative; z-index: 1; }
.ea-biz .aa-biz-k{
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
.ea-biz .aa-biz-k::before{
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1ca9c9, #7747b6);
    box-shadow: 0 0 0 4px rgba(40,99,195,.08);
}
.ea-biz .aa-biz-copy h3{
    margin: 0 0 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -.3px;
    color: var(--cool-101828, #101828);
}
.ea-biz .aa-biz-copy > p:not(.ea-biz-ex){
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 27px;
    letter-spacing: 0;
    color: #4a5568;
}
.ea-biz .aa-biz-vis{
    display: flex;
    align-items: center;
    min-height: 300px;
    padding: 22px;
    border: 1px solid rgba(40,99,195,.08);
    border-radius: 22px;
    background: rgba(255,255,255,.64);
}
.ea-biz .aa-biz-vis svg{ max-height: 290px; }
.ea-biz-ex{
    margin: 22px 0 0 !important;
    padding: 14px 18px; border-radius: 14px;
    background: linear-gradient(90deg, rgba(40,99,195,.055), rgba(119,71,182,.04));
    border: 1px solid rgba(40,99,195,.14);
    font-family: 'Inter', sans-serif !important; font-weight: 400 !important;
    font-size: 15px !important; line-height: 25px !important;
    letter-spacing: 0 !important; color: #1f2a3d !important;
}
.ea-biz-ex span{
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--Royal-Blue-Blue-450, #2863c3);
    margin-right: 8px;
}
/* motifs shared by the use-case panels */
.ea-biz-grow{
    transform-box: fill-box; transform-origin: 0% 50%;
    animation: eaBizGrow .9s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: var(--d, 0s);
}
.ea-biz-grow--d1{ --d: .12s; }
.ea-biz-grow--d2{ --d: .24s; }
.ea-biz-grow--d3{ --d: .36s; }
@keyframes eaBizGrow{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.ea-biz-draw{
    stroke-dasharray: 340; stroke-dashoffset: 340;
    animation: eaBizDraw 1.5s cubic-bezier(.4,0,.2,1) .2s forwards;
}
@keyframes eaBizDraw{ to{ stroke-dashoffset: 0; } }
.ea-biz-gauge{
    stroke-dasharray: 327; stroke-dashoffset: 327;
    animation: eaBizGauge 1.4s cubic-bezier(.4,0,.2,1) .2s forwards;
}
@keyframes eaBizGauge{ to{ stroke-dashoffset: 92; } }


/* ═══════════ 12 · PLATFORM STORY — the stack under the embed ═════════ */

.ea-light-story{
    position: relative;
    background:
        radial-gradient(1300px 760px at 10% 0%, rgba(28,169,201,.06), transparent 64%),
        radial-gradient(1300px 760px at 92% 100%, rgba(119,71,182,.06), transparent 64%),
        var(--Grey-Grey-100, #fbfbfb);
}
.ea-light-story .dv-section--tint,
.ea-light-story .ea-plat-sec{
    background: transparent;
}

.ea-plat-sec{
    padding: 96px 0;
    background:
        radial-gradient(1100px 420px at 12% -8%, rgba(28,169,201,.06), transparent 60%),
        radial-gradient(1100px 420px at 92% 108%, rgba(119,71,182,.06), transparent 60%),
        var(--Grey-Grey-100, #fbfbfb);
}
.ea-plat-sec::after{
    display: none;
}
.ea-plat-sec .dm2-flow2-glow{
    display: none;
}
.ea-plat-sec .dm2-flow2-head{ position: relative; z-index: 1; max-width: 850px; margin: 0 auto 56px; }
.ea-plat-sec .dm2-flow2-eyebrow{
    color: #0e48a5;
    background: rgba(40,99,195,.055);
    border-color: rgba(40,99,195,.14);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}
.ea-plat-sec .dm2-flow2-dot{ box-shadow: 0 0 0 3px rgba(40,99,195,.08); }
.ea-plat-sec .dm2-flow2-head h2{ color: #101828; }
.ea-plat-sec .dm2-flow2-head p{ color: #4a5568; }
.ea-plat-sec .dm2-flow2-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;
}
.ea-plat{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}
.ea-plat-layer{
    --ea-plat-accent: #2863c3;
    --ea-plat-rgb: 40,99,195;
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(190px, .86fr) minmax(0, 1.14fr);
    column-gap: 32px;
    align-items: center;
    min-height: 272px;
    padding: 28px 34px 28px 28px;
    border: 1px solid rgba(25,42,76,.085);
    border-radius: 24px;
    background: linear-gradient(105deg, rgba(var(--ea-plat-rgb),.055) 0%, rgba(var(--ea-plat-rgb),.018) 40%, rgba(255,255,255,.96) 58%);
    box-shadow: 0 18px 48px -38px rgba(23,43,91,.5), inset 0 1px 0 rgba(255,255,255,.95);
    transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
.ea-plat-layer:nth-child(1){ --ea-plat-accent: #159db9; --ea-plat-rgb: 21,157,185; }
.ea-plat-layer:nth-child(2){ --ea-plat-accent: #2863c3; --ea-plat-rgb: 40,99,195; }
.ea-plat-layer:nth-child(3){ --ea-plat-accent: #5c64d8; --ea-plat-rgb: 92,100,216; }
.ea-plat-layer:nth-child(4){ --ea-plat-accent: #7747b6; --ea-plat-rgb: 119,71,182; }
.ea-plat-layer > *{ position: relative; z-index: 2; }
.ea-plat-layer::before{
    content: '';
    position: absolute;
    inset: 0;
    width: 42%;
    right: auto;
    background:
        radial-gradient(circle at 28% 48%, rgba(var(--ea-plat-rgb),.1), transparent 58%),
        linear-gradient(180deg, rgba(var(--ea-plat-rgb),.05), transparent);
    opacity: .72;
    pointer-events: none;
}
.ea-plat-layer:hover{
    transform: translateY(-5px);
    border-color: rgba(var(--ea-plat-rgb),.18);
    background: linear-gradient(105deg, rgba(var(--ea-plat-rgb),.075) 0%, rgba(var(--ea-plat-rgb),.025) 40%, #fff 60%);
    box-shadow: 0 28px 64px -38px rgba(var(--ea-plat-rgb),.35), inset 0 1px 0 #fff;
}
.ea-plat-body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
.ea-plat-art{
    position: relative;
    width: 100%;
    height: 202px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    overflow: visible;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.ea-plat-art::after{
    content: '';
    position: absolute;
    inset: auto 10% 5px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--ea-plat-rgb),.11);
    filter: blur(20px);
}
.ea-plat-art img{
    position: relative;
    z-index: 1;
    display: block;
    max-width: 92%;
    max-height: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.ea-plat-art--insights img{ max-height: 100%; }
.ea-plat-art--lakehouse img{ max-width: 100%; max-height: 96%; }
.ea-plat-layer:hover .ea-plat-art{ transform: translateY(-2px); }
.ea-plat-layer:hover .ea-plat-art img{ transform: translateY(-3px) scale(1.025); }
.ea-plat-k{
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ea-plat-accent);
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 10px;
    padding: 4px 8px;
    border: 1px solid rgba(var(--ea-plat-rgb),.11);
    border-radius: 50px;
    background: rgba(var(--ea-plat-rgb),.055);
}
.ea-plat-name{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 29px;
    color: #101828;
    margin: 0;
}
.ea-plat-layer p{
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 24px;
    color: #4a5568;
    margin: 0;
}
.ea-plat-explore{
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 14px;
    font-weight: 600;
    color: var(--ea-plat-accent);
    text-decoration: none;
    transition: gap .25s ease;
}
.ea-plat-explore svg{ flex: none; transition: transform .25s ease; }
.ea-plat-explore:hover{ gap: 10px; }
.ea-plat-explore:hover svg{ transform: translateX(2px); }


/* ═══════════════ RESPONSIVE ══════════════════════════════════════════ */

@media (max-width: 1200px){
    .ea-value{ grid-template-columns: repeat(2, 1fr); }
    .ea-plat{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ea-plat-layer{ grid-template-columns: minmax(150px,.72fr) minmax(0,1.28fr); column-gap: 24px; padding: 26px; }
    .ea-native{ grid-template-columns: minmax(190px, .72fr) minmax(420px, 1.4fr) minmax(190px, .72fr); column-gap: 24px; }
    .ea-native-item::before{ width: 24px; }
}

@media (max-width: 991px){
    .ea-plat{ grid-template-columns: 1fr; max-width: 720px; }
    .ea-plat-layer{ grid-template-columns: minmax(210px,.75fr) minmax(0,1.25fr); }
    .ea-native,
    .ea-gov{ grid-template-columns: 1fr; gap: 40px; }
    .ea-gov-vis,
    .ea-native-vis{ order: -1; }
    .ea-native{ grid-template-rows: auto auto; }
    .ea-native-vis{ grid-column: 1; grid-row: 1; width: 100%; max-width: 760px; justify-self: center; }
    .ea-native-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; grid-column: 1; grid-row: 2; }
    .ea-native-item:nth-child(n){ grid-column: auto; grid-row: auto; }
    .ea-native-item::before{ display: none; }
    .ea-int{ grid-template-columns: 1fr; }
    .ea-biz .aa-biz-panel{ min-height: 0; padding: 40px 36px; }
    .ea-biz .aa-biz-vis{ min-height: 260px; }
    .ea-caps-note{ font-size: 17px; line-height: 26px; }
    .ea-sec-sec .dm2-flow2-head{ max-width: 760px; text-align: center; }
    .ea-sec-sec .dm2-flow2-head h2{ margin-top: 18px; }
    .ea-sec-sec .dm2-flow2-head p{ margin-top: 18px; padding: 0; }
    .ea-access-front{ grid-template-columns: 1fr; gap: 36px; }
    .ea-access-front-media{ order: -1; width: min(100%, 680px); justify-self: center; }
}

@media (max-width: 767px){
    .ea-value{ grid-template-columns: 1fr; }
    .ea-gov-grid{ grid-template-columns: 1fr; }
    .ea-hero-trust{ font-size: 13px; line-height: 21px; }
    .ea-plat-sec{ padding: 72px 0; }
    .ea-plat{ grid-template-columns: 1fr; }
    .ea-plat-layer{ padding: 22px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 0; }
    .ea-plat-layer::before{ width: 100%; height: 42%; bottom: auto; }
    .ea-plat-art{ grid-row: auto; width: 100%; height: 190px; margin-bottom: 22px; }
    .ea-plat-layer p{ grid-column: 1; }

    /* The ledger stays a real two-column table on phones. Stacking each pair
       into a card turned it into a list of sentences: the two halves sat one
       after another rather than opposite each other, so nothing read as a
       comparison. The side-by-side IS the argument here, so the columns are
       kept and the type steps down to fit them — with the header row visible
       so the columns are named, and its ✗/✓ marks repeated per row so a
       cell's side is legible without looking back up. */
    .ea-bvb{ margin-top: 30px; border-radius: 16px; }
    .ea-bvb-head{ display: grid; grid-template-columns: 1fr 1.06fr; }
    .ea-bvb-head > div{
        align-items: flex-start; gap: 7px;
        padding: 11px 10px;
        font-size: 9px; line-height: 13px; letter-spacing: .1em;
    }
    .ea-bvb-mark{ width: 16px; height: 16px; border-radius: 5px; }
    .ea-bvb-mark svg{ width: 10px; height: 10px; }

    .ea-bvb-row{ grid-template-columns: 1fr 1.06fr; }
    .ea-bvb-row > div{
        align-items: flex-start; gap: 7px;
        padding: 11px 10px 12px;
        font-size: 12.5px; line-height: 19px;
    }
    /* The bullet dot becomes the row's own ✗ / ✓ — the one pseudo-element
       that renders before the cell text. */
    .ea-bvb-row > div::before{
        content: '\2715';
        display: grid; place-items: center;
        width: 15px; height: 15px; margin-top: 2px;
        border-radius: 5px;
        background: rgba(252,252,252,.07);
        font-size: 8px; line-height: 1;
        color: rgba(252,252,252,.45);
    }
    .ea-bvb-row > div + div{
        color: #fff; font-weight: 500;
        background: rgba(74,231,255,.07);
    }
    .ea-bvb-row > div + div::before{
        content: '\2713';
        font-size: 9px; font-weight: 700;
        background: rgba(103,211,255,.18);
        box-shadow: none;
        color: #67d3ff;
    }
    .ea-bvb-row:hover > div + div{ background: rgba(74,231,255,.07); }

    .ea-access-front{ margin-top: 38px; }
    .ea-access-front-item{ grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0 22px; }
    .ea-access-front-ic{ width: 40px; height: 40px; }
    .ea-access-front-item h3{ font-size: 17px; line-height: 24px; }
    .ea-access-front-tags{ justify-content: center; margin-top: 12px; }
    .ea-biz .aa-biz-tabs{ gap: 8px; padding: 6px 1px 16px; }
    .ea-biz .aa-biz-tab{ padding: 9px 13px; font-size: 13px; }
    .ea-biz-progress{ margin-bottom: 30px; }
    .ea-biz .aa-biz-panel{ padding: 28px 20px; border-radius: 20px; }
    .ea-biz .aa-biz-copy h3{ font-size: 24px; line-height: 32px; }
    .ea-biz .aa-biz-vis{ min-height: 220px; padding: 12px; border-radius: 17px; }
    .ea-biz-ex{ padding: 12px 14px; font-size: 14px !important; line-height: 23px !important; }
    .ea-caps-note{ padding: 8px 0; }
    .ea-caps-note::before,
    .ea-caps-note::after{ display: none; }
    .ea-native-list{ grid-template-columns: 1fr; }
    .ea-native-item{ grid-template-columns: 46px 1fr; gap: 14px; min-height: 0; }
    .ea-native-phone{ right: 6px; bottom: 38px; transform: scale(.82); transform-origin: right bottom; }
    .ea-native-access{ left: 20px; bottom: 27px; }
    .ea-native-themes{ left: 14px; gap: 4px; }
    .ea-native-theme{ padding: 5px 6px; font-size: 7px; }
    .ea-native-vis-cap{ visibility: hidden; }
    .ea-native-item:hover{ transform: none; }
}


/* ═══════════════ REDUCED MOTION ══════════════════════════════════════
   Every animation on this page is decoration. Switched off wholesale
   here, with each animated layer left in its finished state. */
@media (prefers-reduced-motion: reduce){
    .ea-hv-panel,
    .ea-hv-seam,
    .ea-hv-bar,
    .ea-hv-spark,
    .ea-hv-ping,
    .ea-hv-typed,
    .ea-hv-caret,
    .ea-hv-answer,
    .ea-hv-run,
    .ea-nv-skin,
    .ea-native-theme,
    .ea-gov-halo,
    .ea-gov-orbit,
    .ea-gov-pulse,
    .ea-gov-feed,
    .ea-gov-node rect,
    .ea-gov-node > path,
    .ea-gov-shield,
    .ea-gov-shield-outline,
    .ea-gov-shield-check,
    .ea-gov-chip,
    .ea-sec-ring,
    .ea-sec-links,
    .ea-sec-user,
    .ea-sec-core-glow,
    .ea-sec-shield,
    .ea-shot-id,
    .ea-shot-policy,
    .ea-biz-grow,
    .ea-biz-draw,
    .ea-biz-gauge{ animation: none !important; }

    .ea-gov-halo,
    .ea-gov-packets{ display: none; }
    .ea-gov-node > path{ opacity: .7; stroke-dashoffset: 0; }

    .ea-biz-grow{ transform: none !important; }
    .ea-biz-draw{ stroke-dashoffset: 0 !important; }
    .ea-biz-gauge{ stroke-dashoffset: 92 !important; }
    .ea-hv-panel{ opacity: 1; transform: none; }
    .ea-hv-seam{ stroke-dashoffset: 0; }
    .ea-hv-bar{ transform: scaleY(1); }
    .ea-hv-spark{ stroke-dashoffset: 0; }
    .ea-hv-typed{ transform: scaleX(1); }
    .ea-hv-answer{ opacity: 1; }
    .ea-hv-run{ opacity: 0; }
    .ea-nv-skin--1{ opacity: 1; }
    .ea-nv-skin--2,
    .ea-nv-skin--3{ opacity: 0; }
    .ea-native-theme--1{ opacity: 1; }
    .ea-native-theme--2,
    .ea-native-theme--3{ opacity: .48; }

    .ea-value-card,
    .ea-native-item,
    .ea-int-card,
    .ea-gov-card,
    .ea-sec-row,
    .ea-sec-card,
    .ea-plat-layer,
    .ea-biz .aa-biz-tab{ transition: none !important; }
    .ea-value-card:hover,
    .ea-native-item:hover,
    .ea-int-card:hover,
    .ea-gov-card:hover,
    .ea-sec-row:hover,
    .ea-sec-card:hover,
    .ea-plat-layer:hover{ transform: none; }
}