/* ============================================================
   WHY US / LUMENORE DIFFERENCE — lumenore-difference.html
   Premium SaaS redesign on the about-us-new.html (.au-page)
   foundation: dark navy bands blending through gradient bridges
   into white sections, Space Grotesk / Inter, violet→blue→cyan
   brand gradient. Conceptual per-section design: hero product
   window + floating chips, illustrated opportunity cards, sticky
   difference spine, animated data pipeline, metric-visual value
   cards, tier illustration on pricing, shield-stage trust.
   Scoped under .ld-page. footer.js drives .reveal-* visibility.
   ============================================================ */

/* ============================================================
   FOLDED IN FROM style.css — box-sizing reset, base element
   typography, and the shared .btn-primary / .reveal-* rules.
   This page previously depended on the root style.css <link>
   for these; on the WordPress deployment that URL resolves to
   WP's own theme-header style.css stub (not this project's
   style.css), so the page rendered unstyled there. Folding the
   exact rules in — same approach lumenore-data-magnet-new.html
   uses — makes this page self-contained like that one.
   Verbatim from style.css unless noted.
   ============================================================ */
:root{
    /* Only token actually consumed (via var() with no fallback) by a
       shared component file — components/header.css's .btn-start CTA.
       Everything else this page uses has an inline var(fallback). */
    --Explore-Button: linear-gradient(270deg, #7747b6 0%, #4075c9 50.7%, #1ca9c9 100%);
}
*, *::before, *::after { box-sizing: border-box; }
html{ overflow-x: clip; }
body{ margin: 0; padding: 0; }
h1, h2, h3, h4{
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    color: var(--cool-101828, #101828);
    margin: 0;
}
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; }

:where(.btn-primary){
    -webkit-appearance: none; appearance: none;
    border: 0; outline: 0;
    cursor: pointer; user-select: none;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
}
.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;
    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);
    animation: btnBreathe 6s ease-in-out infinite;
    overflow: hidden;
}
.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);
    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;
}
.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);
}
.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;
}
.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);
}
@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; }
}

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

.ld-page{
    --ld-violet:#7747b6;
    --ld-blue:#2863c3;
    --ld-cyan:#1ca9c9;
    --grad-brand:  linear-gradient(135deg,#7747b6 0%,#2863c3 50%,#1ca9c9 100%);
    --grad-brand-h:linear-gradient(90deg,#7747b6 0%,#2863c3 50%,#1ca9c9 100%);
    --ai-text:     linear-gradient(83deg,#4AE7FF 40%,#4075C9 60%,#E879F9 82%);

    --ld-heading:#101828;
    --ld-body:#4a5568;
    --ld-muted:#5e5e5e;
    --ld-line:#eaeaea;
    --ld-surface:#ffffff;
    --ld-tint:#f7f7f7;
    --ld-shadow:0 4px 22px rgba(16,24,40,.07);
    --ld-shadow-lg:0 18px 44px rgba(16,24,40,.12);

    --ld-navy:#051A3C;
    --ld-d-ink:#fcfcfc;
    --ld-d-body:rgba(252,252,252,.72);
    --ld-blend:#9fbae4;

    color:var(--ld-body);
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
}
.ld-page .ld-main{position:relative;z-index:1;}
body.inner-page{background:var(--Royal-Blue-Blue-900,#051A3C);}

.container{width:100%;max-width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;}
@media (min-width:576px)  { .container{max-width:540px;} }
@media (min-width:768px)  { .container{max-width:720px;} }
@media (min-width:992px)  { .container{max-width:960px;} }
@media (min-width:1200px) { .container{max-width:1140px;} }
@media (min-width:1400px) { .container{max-width:1320px;} }

.ld-page h1,.ld-page h2,.ld-page h3,.ld-page h4{
    font-family:'Space Grotesk','Inter',sans-serif;
    color:var(--ld-heading);margin:0;
    /* WONK 0 — the alternate "wonky" glyph set (loopy g/y) reads as
       handwriting at heading sizes; the plain grotesque shapes are the
       correct premium-SaaS look. */
    font-variation-settings:'SOFT' 0,'WONK' 0;
}
.ld-page h1{font-weight:300;letter-spacing:-.8px;}
.ld-page h2{font-weight:300;letter-spacing:-.6px;}
.ld-page h3{font-weight:500;letter-spacing:-.3px;}

/* Unified section H2 — 44/54 desktop */
.ld-page .ld-h2{font-size:44px;line-height:54px;margin-bottom:20px;}
@media (max-width:991px){ .ld-page .ld-h2{font-size:34px;line-height:44px;} }
@media (max-width:575px){ .ld-page .ld-h2{font-size:26px;line-height:36px;} }

.ld-grad-text{
    background:var(--grad-brand-h);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
}

/* ============================================================
   SHARED SECTION BITS
   ============================================================ */
.ld-page section{position:relative;padding:96px 0;}

.ld-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:0 0 24px;
}
.ld-eyebrow--center{justify-content:center;}
.ld-eyebrow__dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#0e48a5 0%,#7747b6 100%);box-shadow:0 0 0 3px rgba(40,99,195,.12);flex-shrink:0;}
.ld-eyebrow--dark{color:#67d3ff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
.ld-eyebrow--dark .ld-eyebrow__dot{background:linear-gradient(135deg,#4AE7FF 0%,#E879F9 100%);box-shadow:0 0 0 3px rgba(255,255,255,.1);}

.ld-section-head{max-width:760px;margin-bottom:60px;}
.ld-section-head--center{margin-inline:auto;text-align:center;}
.ld-section-head p:not(.ld-eyebrow){font-family:'Inter',sans-serif;font-weight:400;font-size:15px;line-height:30px;color:var(--ld-body);margin:0 0 16px;}
.ld-section-head p:last-child{margin-bottom:0;}
.ld-section-head--dark p:not(.ld-eyebrow){color:var(--ld-d-body);}
.ld-section-head--dark h2{color:var(--ld-d-ink);}

/* Split variant — eyebrow + heading left, description right, ref: a
   two-column "WHAT DRIVES US" style header instead of the centered stack
   every other section uses. */
.ld-section-head--split{
    max-width:none;
    display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center;
}
.ld-section-head--split .ld-section-head__title{max-width:640px;}
.ld-section-head--split .ld-eyebrow{margin-bottom:16px;}
.ld-section-head--split p:not(.ld-eyebrow){margin:0;}
@media (max-width:900px){
    .ld-section-head--split{grid-template-columns:1fr;gap:20px;}
}

.ld-section-foot{margin:52px auto 0;max-width:74ch;text-align:center;font-family:'Inter',sans-serif;font-weight:400;font-size:17px;line-height:27px;color:var(--ld-body);}
.ld-section-foot strong{color:var(--ld-heading);font-weight:700;}
.ld-section-foot--dark{color:var(--ld-d-body);}
.ld-section-foot--dark strong{color:var(--ld-d-ink);}

.ld-main .reveal-block,.ld-main .reveal-left,.ld-main .reveal-right{
    transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--reveal-delay,0s);
}

/* ── Bridges — full-width section children (siblings of .container) ── */
.ld-bridge-bottom-light{
    position:absolute;left:0;right:0;bottom:0;height:180px;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,
        rgba(159,186,228,0) 0%,rgba(159,186,228,.10) 25%,rgba(159,186,228,.25) 45%,
        rgba(159,186,228,.45) 62%,rgba(159,186,228,.65) 76%,rgba(159,186,228,.82) 87%,
        rgba(159,186,228,.93) 95%,#9fbae4 100%);
}
.ld-bridge-top-dark{
    position:absolute;left:0;right:0;top:0;height:240px;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,
        #9fbae4 0%,rgba(159,186,228,.95) 5%,rgba(159,186,228,.87) 12%,rgba(159,186,228,.76) 20%,
        rgba(159,186,228,.63) 29%,rgba(159,186,228,.49) 39%,rgba(159,186,228,.35) 50%,
        rgba(159,186,228,.22) 62%,rgba(159,186,228,.12) 74%,rgba(159,186,228,.05) 86%,
        rgba(159,186,228,0) 100%);
}
.ld-bridge-bottom-dark{
    position:absolute;left:0;right:0;bottom:0;height:260px;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(159,186,228,0) 0%,rgba(159,186,228,.35) 55%,#9fbae4 100%);
}
.ld-bridge-top-light{
    position:absolute;left:0;right:0;top:0;height:300px;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,#9fbae4 0%,rgba(159,186,228,.7) 11.93%,rgba(159,186,228,.45) 24.99%,
        rgba(159,186,228,.22) 39.3%,rgba(159,186,228,.1) 51.77%,rgba(159,186,228,0) 66.09%);
}
/* Every section's .container sits above its bridges */
/* ---- §9 dot-grid texture on white surfaces -------------------------------
   "All white (#fcfcfc) sections share the same dot-grid texture." Applied via
   ::before at z-index 0; each section already sets position:relative and
   .ld-page section > .container is z-index 1, so the dots sit behind content.
   Kept off .ld-hero (dark) and off the two dark sections, per the same rule.
   pointer-events:none so the texture never intercepts clicks. */
.ld-opportunity::before,
.ld-difference::before,
.ld-journey::before,
.ld-stories::before,
.ld-trust::before,
.ld-cta::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;
}
.ld-page section > .container{position:relative;z-index:1;}

/* ============================================================
   HERO — dark band, split: copy + product window w/ floating chips
   ============================================================ */
.ld-hero{
    position:relative;padding:120px 0 110px;overflow:hidden;
    color:var(--ld-d-ink);isolation:isolate;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%,rgba(8,26,72,.9) 0%,transparent 70%),
        linear-gradient(175deg,#04102E 0%,#030C1E 55%,#020A18 100%);
}
.ld-hero h1{color:var(--ld-d-ink);}
.ld-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ld-hero__grid{
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(120,150,220,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(120,150,220,.06) 1px,transparent 1px);
    background-size:54px 54px;
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 20%,#000 40%,transparent 82%);
    mask-image:radial-gradient(ellipse 80% 70% at 50% 20%,#000 40%,transparent 82%);
}
.ld-hero__orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;}
.ld-hero__orb--violet{width:460px;height:460px;left:-110px;top:2%;background:radial-gradient(circle,rgba(119,71,182,.55),transparent 70%);animation:ldOrb 22s ease-in-out infinite;}
.ld-hero__orb--cyan{width:420px;height:420px;right:-90px;top:30%;background:radial-gradient(circle,rgba(28,169,201,.45),transparent 70%);animation:ldOrb 26s ease-in-out infinite reverse;}
.ld-hero__orb--blue{width:520px;height:520px;left:30%;top:34%;background:radial-gradient(circle,rgba(40,99,195,.4),transparent 70%);animation:ldOrb 30s ease-in-out infinite;}
@keyframes ldOrb{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(38px,-28px) scale(1.08);}}
.ld-hero__particles span{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(150,190,255,.55);box-shadow:0 0 6px rgba(120,180,255,.6);animation:ldFloatUp 14s linear infinite;}
.ld-hero__particles span:nth-child(1){left:10%;top:26%;animation-delay:0s;}
.ld-hero__particles span:nth-child(2){left:24%;top:60%;animation-delay:-2s;}
.ld-hero__particles span:nth-child(3){left:37%;top:32%;animation-delay:-4s;}
.ld-hero__particles span:nth-child(4){left:50%;top:70%;animation-delay:-6s;}
.ld-hero__particles span:nth-child(5){left:62%;top:18%;animation-delay:-1s;}
.ld-hero__particles span:nth-child(6){left:74%;top:52%;animation-delay:-3s;}
.ld-hero__particles span:nth-child(7){left:86%;top:28%;animation-delay:-5s;}
.ld-hero__particles span:nth-child(8){left:92%;top:66%;animation-delay:-7s;}
.ld-hero__particles span:nth-child(9){left:16%;top:80%;animation-delay:-8s;}
.ld-hero__particles span:nth-child(10){left:56%;top:44%;animation-delay:-9s;}
.ld-hero__particles span:nth-child(11){left:80%;top:82%;animation-delay:-10s;}
.ld-hero__particles span:nth-child(12){left:42%;top:12%;animation-delay:-11s;}
@keyframes ldFloatUp{0%{transform:translateY(0);opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{transform:translateY(-56px);opacity:0;}}

.ld-hero .container{position:relative;z-index:2;}
.ld-hero__layout{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;}
.ld-hero__text{max-width:none;text-align:left;}
/* Hero H1 — DESIGN_GUIDELINES.md §3 "Responsive H1 scale": 56/64 desktop,
   44/54 at <=991px, 34/44 at <=575px. Was 50/60 with its own breakpoints. */
.ld-page .ld-hero__title{font-size:56px;line-height:64px;letter-spacing:-.8px;margin-bottom:24px;}
/* Intermediate step: this hero's text column is narrow, so 56px runs to 8
   lines at ~1024px. The guideline gives two different tablet sizes (§3 says
   44/54, §14 says 48/58); 48/58 here for 992-1199 and §3's 44/54 below that
   uses both numbers and keeps the headline to a sane line count. */
@media (max-width:1199px){ .ld-page .ld-hero__title{font-size:48px;line-height:58px;} }
@media (max-width:991px){ .ld-page .ld-hero__title{font-size:44px;line-height:54px;} }
@media (max-width:575px){ .ld-page .ld-hero__title{font-size:34px;line-height:44px;} }
.ld-hero__lead{font-family:'Inter',sans-serif;font-weight:400;font-size:17px;line-height:27px;margin:0 0 16px;max-width:56ch;color:var(--ld-d-body);}
.ld-hero__ctas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px;}

/* Gradient-bordered outline button (ref: cyan→violet "Request a Demo"
   style) — the transparent border + double-background is the standard
   trick for a gradient border that still respects border-radius (a plain
   border-image would square off the corners). */
.ld-btn-ghost{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 22px;border-radius:6px; /* §6: all buttons 6px */
    border:1.5px solid transparent;
    background:
        linear-gradient(#04102E,#04102E) padding-box,
        linear-gradient(90deg,#1ca9c9 0%,#7747b6 100%) border-box;
    font-family:'Inter',sans-serif;font-size:15px;font-weight:700;line-height:25px;
    color:#fff;text-decoration:none;
    transition:box-shadow .22s ease,transform .22s cubic-bezier(.22,.61,.36,1);
}
.ld-btn-ghost:hover{box-shadow:0 10px 24px -8px rgba(28,169,201,.45);transform:translateY(-1px);}
.ld-btn-ghost svg{transition:transform .22s ease;}
.ld-btn-ghost:hover svg{transform:translateX(3px);}

/* Hero visual — animated agentic-analytics console illustration (inline SVG):
   data-source nodes stream dots into a glass platform panel where the AI
   agent types a query, an insight line draws itself, KPI meters fill, and a
   confirmed-decision node pulses on the output side. Floating chips echo the
   hero copy's own words. */
.ld-hero__visual{position:relative;}
.ld-hero__ring{
    position:absolute;inset:-8% -6%;z-index:0;pointer-events:none;border-radius:50%;
    background:radial-gradient(closest-side,rgba(40,99,195,.34) 0%,rgba(119,71,182,.18) 48%,transparent 76%);
    filter:blur(28px);
}
.ld-hero__scene{position:relative;z-index:1;}
.ld-hero__scene svg{display:block;width:100%;height:auto;overflow:visible;}

/* Halo — slow orbit */
.ldh-halo{
    transform-box:fill-box;transform-origin:center;
    animation:ldhSpin 60s linear infinite;
}
@keyframes ldhSpin{to{transform:rotate(360deg);}}

/* Source nodes — gentle bob, staggered */
.ldh-node{animation:ldhBob 5.5s ease-in-out infinite;}
.ldh-node:nth-of-type(2){animation-delay:-1.8s;}
.ldh-node:nth-of-type(3){animation-delay:-3.6s;}
@keyframes ldhBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* AI core — breathing glow */
.ldh-core{
    transform-box:fill-box;transform-origin:center;
    animation:ldhCore 2.6s ease-in-out infinite;
}
@keyframes ldhCore{0%,100%{transform:scale(1);filter:drop-shadow(0 0 4px rgba(74,231,255,.35));}50%{transform:scale(1.1);filter:drop-shadow(0 0 12px rgba(74,231,255,.7));}}

/* Query bar — typing dots, wave */
.ldh-typing circle{animation:ldhType 1.3s ease-in-out infinite;}
.ldh-typing circle:nth-child(2){animation-delay:.18s;}
.ldh-typing circle:nth-child(3){animation-delay:.36s;}
@keyframes ldhType{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* Insight line — draws itself, then holds; area fades in after */
.ldh-line{
    stroke-dasharray:420;stroke-dashoffset:420;
    animation:ldhDraw 7s cubic-bezier(.45,.05,.4,1) infinite;
}
@keyframes ldhDraw{
    0%{stroke-dashoffset:420;}
    28%{stroke-dashoffset:0;}
    82%{stroke-dashoffset:0;opacity:1;}
    92%{opacity:0;}
    93%{stroke-dashoffset:420;opacity:0;}
    100%{stroke-dashoffset:420;opacity:1;}
}
.ldh-area{opacity:0;animation:ldhArea 7s ease infinite;}
@keyframes ldhArea{0%,20%{opacity:0;}34%,82%{opacity:1;}92%,100%{opacity:0;}}
.ldh-tip{opacity:0;animation:ldhArea 7s ease infinite;}
.ldh-tip-ring{
    transform-box:fill-box;transform-origin:center;opacity:0;
    animation:ldhTipRing 7s ease-out infinite;
}
@keyframes ldhTipRing{
    0%,27%{opacity:0;transform:scale(1);}
    30%{opacity:.9;transform:scale(1);}
    48%{opacity:0;transform:scale(2.6);}
    100%{opacity:0;transform:scale(2.6);}
}

/* KPI meter fill — sweeps in */
.ldh-meter-fill{
    transform-box:fill-box;transform-origin:left center;
    animation:ldhMeter 3.4s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes ldhMeter{0%{transform:scaleX(.2);}40%,78%{transform:scaleX(1);}100%{transform:scaleX(.2);}}
/* Mini bars — grow, staggered */
.ldh-mbar{
    transform-box:fill-box;transform-origin:bottom;
    animation:ldhMbar 3s cubic-bezier(.22,.61,.36,1) infinite;
}
.ldh-mbar--2{animation-delay:.15s;}
.ldh-mbar--3{animation-delay:.3s;}
.ldh-mbar--4{animation-delay:.45s;}
@keyframes ldhMbar{0%{transform:scaleY(.4);}40%,75%{transform:scaleY(1);}100%{transform:scaleY(.4);}}

/* Decision node — expanding confirmation ring */
.ldh-target-ring{
    transform-box:fill-box;transform-origin:center;
    animation:ldhTarget 2.4s ease-out infinite;
}
@keyframes ldhTarget{0%{opacity:.85;transform:scale(1);}75%{opacity:0;transform:scale(1.65);}100%{opacity:0;transform:scale(1.65);}}

@media (max-width:991px){
    .ld-hero__layout{grid-template-columns:1fr;gap:48px;}
    .ld-hero__text{text-align:center;}
    .ld-hero__lead{margin-inline:auto;}
    .ld-hero__ctas{justify-content:center;}
}

/* ============================================================
   1 · THE OPPORTUNITY (light) — numbered hover-reveal cards
   Ref: "LandingHero" component-library demo (video). One shared
   rounded panel, three flush columns with hairline dividers. The
   active card widens and reveals an inline photo on its right
   side (content stays left); the other two shrink to equal,
   text-only columns. Card 01 is active out of the box, matching
   the reference's own resting frame, so the panel is never empty
   — and with no JS at all it simply stays that way (still real
   content: every title/description is always visible; only the
   extra photography and the width shift are interaction-gated).
   Column widths are driven by [data-active] on the panel plus
   [data-opp-card] on each card, set by the controller script.
   ============================================================ */
.ld-opportunity{background:#fcfcfc;}

.ld-opp-panel{position:relative;display:flex;align-items:stretch;}
.ld-opp-panel__bg{
    position:absolute;inset:0;z-index:0;
    background:var(--ld-tint,#f7f7f5);
    border-radius:24px;
    box-shadow:0 20px 50px -30px rgba(14,72,165,.25);
}

.ld-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;
}
.ld-opp-card:last-child{border-right:0;}
.ld-opp-card.is-active{background:var(--ld-surface,#fff);gap:24px;}

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

/* Default: leftover flex space, i.e. the original behaviour. This is also the
   no-JS fallback. */
.ld-opp-card__content{flex:1 1 auto;min-width:0;}
/* Pinned width, deliberately NOT transitioned. As leftover flex space the copy
   column was re-measured every frame of the 0.5s width animation, so the text
   re-wrapped 7 times on the way open - and non-monotonically, because the card
   and the photo don't scale in step, so the column peaks mid-animation and
   shrinks back. Pinning it means the text wraps once, when the card is toggled,
   and the card's overflow:hidden reveals it as the card grows.
   The two widths are MEASURED by the controller rather than hardcoded: they
   depend on the container step (1140 vs 1320) and on the padding, which changes
   at 1199px. Below 901px the panel stacks to full-width cards and the controller
   leaves this alone entirely. */
.ld-opp-panel.is-copy-pinned .ld-opp-card__content{flex:0 0 auto;width:var(--opp-copy);}
.ld-opp-panel.is-copy-pinned .ld-opp-card.is-active .ld-opp-card__content{width:var(--opp-copy-open);}
.ld-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;
}
/* ── Active state ─────────────────────────────────────────────────
   The open card was signalled only by a near-white background against
   the panel's #f7f7f5 — about a 2% lightness step, easy to miss. The
   number filling with the brand gradient carries it instead. */
.ld-opp-card.is-active .ld-opp-card__num{
    background:var(--grad-brand);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}
.ld-page .ld-opp-card__name{font-size:22px;line-height:30px;letter-spacing:-.2px;margin-bottom:10px;} /* already on the H4 card-title spec */
.ld-opp-card__text{
    font-family:'Inter',sans-serif;font-size:15px;line-height:25px;
    color:var(--ld-body);margin:0;
}

/* ── Inline photo — collapsed to nothing by default, revealed on hover/focus ── */
.ld-opp-card__figure{
    position:relative;z-index:1;
    display:block;align-self:stretch;
    flex:0 0 0%;width: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;
}
/* Delay the FADE only, never the size. The text column is whatever space the
   photo hasn't claimed, so delaying flex-basis let the copy reflow into room
   the photo was about to take and then get squeezed back out - the body went
   6 -> 4 -> 3 -> 2 lines and then back to 3 mid-transition. Sizing the photo
   in lockstep with the card keeps that column monotonic.
   Order matches the shorthand above: flex-basis, width, opacity. */
.ld-opp-card.is-active .ld-opp-card__figure{flex:0 0 56%;width:56%;opacity:1;transition-delay:0s,0s,.05s;}
.ld-opp-card__figure img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:saturate(1.05);
}

@media (max-width:1199px){
    .ld-opp-card{padding:18px 26px;}
    .ld-opp-card__num{margin-bottom:48px;}
}
@media (max-width:991px){
    /* Photos crowd three narrow columns at this width — drop them and
       let the panel read as a clean numbered list; every word of real
       content is still there. Raised from 900px to 991px (the guideline's
       own breakpoint; 900 wasn't on the ladder) because the 901-991 band
       squeezed the copy column to ~64px — 13 lines of two-word rows, with
       long words overflowing the card. */
    .ld-opp-panel{flex-direction:column;}
    .ld-opp-panel .ld-opp-card{width:100% !important;}
    .ld-opp-card{border-right:0;border-bottom:1px solid rgba(16,24,40,.07);padding:28px 24px;}
    .ld-opp-card:last-child{border-bottom:0;}
    .ld-opp-card__num{margin-bottom:14px;}
    .ld-opp-card__figure{display:none;}
}
@media (prefers-reduced-motion:reduce){
    .ld-opp-card{transition:none;}
    .ld-opp-card__figure{transition:none;}
}

/* ============================================================
   2 · THE LUMENORE DIFFERENCE (dark) — scroll-driven list
   Ref: Clear Street's "The Clear Street Difference" — a sticky
   oversized odometer number on the left rolls 01→04 while a
   divider-separated list scrolls past; whichever item crosses the
   viewport centre lights up and reveals its description.
   ============================================================ */
.ld-difference{background:#fcfcfc;isolation:isolate;}
/* §5: every content section is 96px top and bottom. Was 72px. */
.ld-page .ld-difference{padding:96px 0;}

.ld-diff__quote{
    margin:40px auto 0;max-width:66ch;padding:22px 28px;border-radius:14px;text-align:center;
    background:rgba(14,72,165,.04);border:1px solid rgba(14,72,165,.12);
    font-family:'Space Grotesk',sans-serif;font-weight:400;font-style:italic;
    font-size:17px;line-height:27px;color:var(--ld-body);
}
.ld-diff__quote strong{font-style:normal;font-weight:600;color:var(--ld-heading);}

.ld-diff-list{display:grid;grid-template-columns:150px 1fr;gap:32px;align-items:start;}
/* Rail stretches the full list height so the number can be positioned
   against it; the number tracks the active row via JS (see script), not
   position:sticky — see the script comment for why. */
.ld-diff-list__rail{position:relative;align-self:stretch;}

/* ── Odometer number — top set in px by JS, aligned to the active row ──
   Anchored to the rail's LEFT edge (not right) so it lines up flush with
   the heading above instead of floating in the middle of a wide gutter. */
.ld-diff-num{
    position:absolute;top:0;left:0;
    display:flex;align-items:flex-start;justify-content:flex-start;
    font-family:'Space Grotesk',sans-serif;font-weight:700;
    font-size:108px;line-height:1.06;letter-spacing:-.04em;
    transition:top .5s cubic-bezier(.22,.61,.36,1);
}
.ld-diff-num__zero,.ld-diff-num__track i{
    background:linear-gradient(180deg,#7747b6 0%,#2863c3 50%,#1ca9c9 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
}
/* Fixed-height window; the track slides one digit-height per step */
.ld-diff-num__reel{display:block;height:1.06em;overflow:hidden;}
.ld-diff-num__track{
    display:block;
    transform:translateY(calc(var(--diff-i,0) * -1.06em));
    transition:transform .62s cubic-bezier(.22,.61,.36,1);
}
.ld-diff-num__track i{display:block;height:1.06em;line-height:1.06;font-style:normal;}

/* ── List items ── */
.ld-diff-list__items{min-width:0;}
.ld-diff-item{
    position:relative;
    display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;
    padding:34px 28px 34px 36px;margin:0 -28px 0 -36px;
    border-top:1px solid var(--ld-line);
    border-radius:18px;
    transition:background .4s ease,box-shadow .4s ease,border-color .3s ease;
}
.ld-diff-item:last-child{border-bottom:1px solid var(--ld-line);}
/* Active row reads as an elevated card, not a flat full-bleed tint — a
   contained white panel lifted with a soft shadow, plus a brand-gradient
   accent bar on the left. The bar's gutter (padding-left 36px vs 28px
   elsewhere) is reserved on every row, active or not, so nothing shifts
   horizontally when the active row changes. */
.ld-diff-item.is-active{
    background:#fff;
    border-top-color:transparent;
    box-shadow:0 20px 46px -22px rgba(16,24,40,.18),0 0 0 1px rgba(16,24,40,.05);
}
.ld-diff-item::before{
    content:'';
    position:absolute;left:12px;top:22px;bottom:22px;width:4px;border-radius:4px;
    background:var(--grad-brand-h);
    opacity:0;transform:scaleY(.6);transform-origin:center;
    transition:opacity .35s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.ld-diff-item.is-active::before{opacity:1;transform:none;}
.ld-page .ld-diff-item__title{
    /* Card title -> guideline H4 spec 22/30. The clamp resolved to a
       fractional 24.48px at 1440, which no row of the type scale allows. */
    font-size:22px;line-height:30px;letter-spacing:-.2px;
    color:rgba(16,24,40,.25);margin:0;
    transition:color .45s ease;
}
.ld-diff-item.is-active .ld-diff-item__title{color:var(--ld-heading);}
.ld-diff-item__text{
    font-family:'Inter',sans-serif;font-size:14.5px;line-height:24px;
    color:var(--ld-body);margin:0;
    opacity:0;transform:translateY(6px);
    transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1);
}
.ld-diff-item.is-active .ld-diff-item__text{opacity:1;transform:none;}

@media (max-width:991px){
    .ld-diff-list{grid-template-columns:150px 1fr;gap:28px;}
    .ld-diff-num{font-size:76px;}
    .ld-diff-item{grid-template-columns:1fr;gap:14px;padding:26px 20px 26px 28px;margin:0 -20px 0 -28px;}
}
@media (max-width:575px){
    .ld-diff-list{grid-template-columns:1fr;gap:0;}
    /* The odometer is a side-rail device: it only reads because it sits
       beside the row it counts. Stacked above the list on a phone it is a
       huge number floating against nothing, so it goes away entirely and
       each row carries its own small 01–04 instead (CSS counter — the
       markup has no per-item number to hang off). */
    .ld-diff-list__rail{display:none;}
    .ld-diff-list__items{counter-reset:ld-diff;}
    .ld-diff-item{
        counter-increment:ld-diff;
        gap:10px;
        /* No full-bleed negative margins here: at 390px they put the active
           row's accent bar 6px off the left edge while the right edge sat
           flush, so the card looked skewed. Keep it inside the container. */
        padding:20px 16px 20px 22px;margin:0;
    }
    .ld-diff-item::after{
        content:counter(ld-diff,decimal-leading-zero);
        order:-1;
        font-family:'Space Grotesk',sans-serif;font-weight:700;
        font-size:14px;line-height:1;letter-spacing:.06em;
        background:linear-gradient(180deg,#7747b6 0%,#2863c3 50%,#1ca9c9 100%);
        -webkit-background-clip:text;background-clip:text;
        -webkit-text-fill-color:transparent;color:transparent;
    }
    .ld-diff-item::before{left:8px;top:18px;bottom:18px;}
    /* Every description stays visible — there is no side-by-side active cue */
    .ld-diff-item__text{opacity:1;transform:none;}
    /* …and so does every title. At .25/.55 alpha three of the four rows
       read as disabled; the white panel + accent bar already mark the
       active one without draining the rest. */
    .ld-page .ld-diff-item__title{color:var(--ld-heading);}
}
@media (prefers-reduced-motion:reduce){
    .ld-diff-item{transition:none;}
    .ld-diff-num__track{transition:none;}
    .ld-diff-item__title,.ld-diff-item__text{transition:none;}
}

/* ============================================================
   3 · FROM DATA TO ACTION (light) — "The Refinery"
   Constant unstructured-data source (left, light) feeding a
   glowing gradient stream into a DARK console card (right) — the
   dark-on-light contrast anchor. Step tabs 1–5 live in the
   console's header strip; each card body pairs copy with a white
   "output screen" inset showing the downstream mini-visual, under
   a ghost numeral watermark.
   ============================================================ */
.ld-journey{background:#fcfcfc;}

/* Transparent wrapper — the two inner boxes sit straight on the section */
.ld-refinery{position:relative;}
.ld-refinery__stage{
    position:relative;z-index:1;
    display:grid;grid-template-columns:290px 84px 1.3fr 84px 1fr;gap:0;align-items:stretch;
}

/* ── Source — the chaos never stops ── */
.ld-refinery__source{
    position:relative;
    display:flex;flex-direction:column;justify-content:center;gap:12px;
    border-radius:18px;padding:56px 20px 22px;
    background:rgba(14,72,165,.045);
    border:1px dashed rgba(40,99,195,.32);
}
.ld-refinery__source-label{
    position:absolute;top:18px;left:20px;
    display:inline-flex;align-items:center;gap:7px;
    font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:#5e6d85;
}
.ld-refinery__source-dot{
    width:7px;height:7px;border-radius:50%;background:#7747b6;
    box-shadow:0 0 0 3px rgba(119,71,182,.15);
    animation:ldRefSourcePulse 2.4s ease-in-out infinite;
}
@keyframes ldRefSourcePulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.ld-refinery__tangle{position:absolute;inset:0;width:100%;height:100%;z-index:0;}

/* Chips — staggered flow layout (collision-proof), each drifting on its
   own rhythm with a colored accent edge */
.ld-ref-chip{
    position:relative;z-index:1;align-self:flex-start;
    display:inline-flex;align-items:center;gap:7px;
    padding:8px 13px 8px 11px;border-radius:10px;
    background:#fff;border:1px solid #e2e9f6;border-left:3px solid currentColor;
    box-shadow:0 8px 20px -8px rgba(14,72,165,.25);
    color:#4a5568;
    animation:ldRefChipDrift 6s ease-in-out infinite;
    animation-delay:calc(var(--chip-i,0) * -.9s);
}
.ld-ref-chip svg{flex-shrink:0;}
.ld-ref-chip i{font-family:'Inter',sans-serif;font-style:normal;font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;color:#3c4a5f;}
.ld-ref-chip:nth-of-type(1){margin-left:8%;color:#7747b6;transform:rotate(-1.2deg);}
.ld-ref-chip:nth-of-type(2){align-self:flex-end;margin-right:6%;color:#2863c3;transform:rotate(1.6deg);}
.ld-ref-chip:nth-of-type(3){margin-left:20%;color:#1ca9c9;transform:rotate(-.8deg);}
.ld-ref-chip:nth-of-type(4){margin-left:2%;color:#12b6f8;transform:rotate(1.2deg);}
.ld-ref-chip:nth-of-type(5){align-self:flex-end;margin-right:16%;color:#2863c3;transform:rotate(-1.6deg);}
.ld-ref-chip:nth-of-type(6){margin-left:12%;color:#7747b6;transform:rotate(.9deg);}
.ld-ref-chip:nth-of-type(7){align-self:flex-end;margin-right:2%;color:#5e6d85;transform:rotate(-1deg);}
@keyframes ldRefChipDrift{0%,100%{margin-top:0;}50%{margin-top:-6px;}}

/* ── Conduit — glowing gradient beam + marching dashes + packets ── */
.ld-refinery__conduit{position:relative;z-index:2;}
/* The beam itself — plugs into both boxes */
.ld-refinery__conduit::before{
    content:'';position:absolute;left:-14px;right:-14px;top:50%;height:3px;margin-top:-1.5px;
    border-radius:3px;
    background:var(--grad-brand-h);
    box-shadow:0 0 14px rgba(40,99,195,.5);
    opacity:.85;
}
/* Marching light dashes riding on top of the beam */
.ld-refinery__conduit::after{
    content:'';position:absolute;left:-14px;right:-14px;top:50%;height:3px;margin-top:-1.5px;
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 7px,transparent 7px 15px);
    background-size:15px 3px;border-radius:3px;
    animation:ldDashFlow 1s linear infinite;
    mix-blend-mode:overlay;
}
@keyframes ldDashFlow{to{background-position:15px 0;}}
.ld-refinery__packet{
    position:absolute;top:50%;left:0;width:9px;height:9px;border-radius:50%;
    transform:translate(-50%,-50%);
    background:#12b6f8;box-shadow:0 0 12px 3px rgba(18,182,248,.6);
    animation:ldRefPacket 2.1s cubic-bezier(.45,.05,.55,.95) infinite;
}
.ld-refinery__packet--2{background:#c4a4f0;box-shadow:0 0 12px 3px rgba(119,71,182,.5);animation-delay:-.7s;}
.ld-refinery__packet--3{background:#7fe0f2;box-shadow:0 0 12px 3px rgba(28,169,201,.5);animation-delay:-1.4s;}
@keyframes ldRefPacket{
    0%{left:-6%;opacity:0;}
    12%{opacity:1;}
    88%{opacity:1;}
    100%{left:106%;opacity:0;}
}

/* ── Console — light card box: tabs strip on top, card below. The
   Act box (below) keeps the original dark console chrome; this one is
   deliberately lighter to stand apart from its dark neighbours. ── */
.ld-refinery__cards{
    position:relative;display:flex;flex-direction:column;min-height:320px;
    border-radius:18px;overflow:hidden;
    background:linear-gradient(160deg,#f7f5fb 0%,#f0f2f8 55%,#eef6fa 100%);
    border:1px solid rgba(40,99,195,.14);
    box-shadow:0 30px 60px -24px rgba(14,72,165,.18);
}
/* Faint grid on the console body */
.ld-refinery__cards::before{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
        linear-gradient(rgba(40,99,195,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(40,99,195,.07) 1px,transparent 1px);
    background-size:36px 36px;
    -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,#000 25%,transparent 85%);
    mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,#000 25%,transparent 85%);
}

/* Step tabs — console header strip */
.ld-refinery__tabs{
    position:relative;z-index:1;
    display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
    padding:16px 22px 14px;
    background:rgba(16,24,40,.03);
    border-bottom:1px solid rgba(16,24,40,.08);
    backdrop-filter:blur(6px);
}
.ld-refinery__cardwrap{position:relative;z-index:1;display:grid;flex:1;min-height:0;}

/* ── Outcome box — Act, standalone (no step tabs), dark: icon/title/text
   stacked above a small illustration, reusing .ld-ref-card__* classes for
   the pieces but its own vertical layout instead of the console's
   two-column grid, since this box is narrower. */
.ld-refinery__act{
    position:relative;padding:30px 30px 26px;
    display:flex;flex-direction:column;min-height:320px;
    border-radius:18px;overflow:hidden;
    background:
        radial-gradient(ellipse 70% 90% at 10% 0%,rgba(119,71,182,.35) 0%,transparent 58%),
        radial-gradient(ellipse 60% 80% at 95% 100%,rgba(28,169,201,.25) 0%,transparent 58%),
        linear-gradient(160deg,#0a1230 0%,#071a3e 55%,#04102E 100%);
    border:1px solid rgba(120,150,220,.28);
    box-shadow:0 30px 60px -24px rgba(4,16,46,.55);
}
.ld-refinery__act::before{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
        linear-gradient(rgba(120,150,220,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(120,150,220,.05) 1px,transparent 1px);
    background-size:36px 36px;
    -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,#000 25%,transparent 85%);
    mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,#000 25%,transparent 85%);
}
/* Three concrete "acts" (notification / email / outcome) cycling one at a
   time in place of a single static illustration — stacked via grid-area
   so each fades/slides into the same spot the others just vacated. */
.ld-refinery__act-scenes{
    position:relative;z-index:1;flex:1;display:grid;align-items:center;
    margin:22px 0 0;padding:6px 2px;
}
.ld-refinery__act-scenes::before{
    content:'';position:absolute;inset:-10% -6%;z-index:-1;border-radius:50%;
    background:radial-gradient(closest-side,rgba(40,99,195,.22) 0%,rgba(119,71,182,.1) 55%,transparent 80%);
    filter:blur(10px);
}
.ld-refinery__act-scene{
    grid-area:1/1;opacity:0;transform:translateY(6px);pointer-events:none;
    transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);
}
.ld-refinery__act-scene.is-active{opacity:1;transform:none;}
.ld-refinery__act-scene svg{display:block;width:100%;max-width:none;height:auto;overflow:visible;}

.ld-refinery__act-dots{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;}
.ld-refinery__act-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s ease,transform .3s ease;}
.ld-refinery__act-dots span.is-active{background:var(--grad-brand-h,#67d3ff);transform:scale(1.35);}

/* ── Step segments ── */
.ld-ref-seg{
    display:flex;flex-direction:column;gap:8px;text-align:left;min-width:0;
    padding:0;background:transparent;border:0;cursor:pointer;
}
.ld-ref-seg__label{
    display:flex;align-items:center;gap:7px;
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12px;line-height:1;
    color:rgba(16,24,40,.4);transition:color .3s ease;
    white-space:nowrap;overflow:hidden;
}
.ld-ref-seg__label b{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:18px;height:18px;border-radius:50%;
    font-weight:700;font-size:10.5px;
    background:rgba(16,24,40,.08);color:rgba(16,24,40,.55);
    transition:background .3s ease,color .3s ease;
}
.ld-ref-seg:hover .ld-ref-seg__label{color:rgba(16,24,40,.7);}
.ld-ref-seg.is-active .ld-ref-seg__label{color:var(--ld-heading);}
.ld-ref-seg.is-active .ld-ref-seg__label b{background:var(--grad-brand);color:#fff;}
.ld-ref-seg.is-done .ld-ref-seg__label{color:rgba(16,24,40,.55);}
.ld-ref-seg.is-done .ld-ref-seg__label b{background:rgba(40,99,195,.2);color:#fff;}
.ld-ref-seg__track{display:block;height:3px;border-radius:3px;background:rgba(16,24,40,.08);overflow:hidden;}
.ld-ref-seg__fill{display:block;height:100%;width:0;border-radius:3px;background:var(--grad-brand-h);}
.ld-ref-seg.is-done .ld-ref-seg__fill{width:100%;background:rgba(16,24,40,.28);}
.ld-ref-seg.is-active .ld-ref-seg__fill{width:100%;background:rgba(16,24,40,.22);}
.ld-ref-seg.is-active.is-filling .ld-ref-seg__fill{
    background:var(--grad-brand-h);
    animation:ldRefFill 4.5s linear forwards;
}
@keyframes ldRefFill{from{width:0;}to{width:100%;}}

/* ── Active step card — copy left, output screen right, ghost numeral ── */
.ld-ref-card{
    grid-area:1/1;position:relative;
    display:grid;grid-template-columns:1fr minmax(240px,320px);
    grid-template-areas:"head screen" "title screen" "text screen";
    grid-template-rows:auto auto 1fr;
    column-gap:36px;row-gap:0;
    padding:30px 34px 30px;
}
.ld-ref-card[hidden]{display:none;}
.ld-ref-card.is-active{animation:ldRefCardIn .5s cubic-bezier(.22,.61,.36,1);}
@keyframes ldRefCardIn{from{opacity:0;transform:translateX(22px);}to{opacity:1;transform:none;}}

.ld-ref-card__head{grid-area:head;display:flex;align-items:center;margin-bottom:20px;}
.ld-ref-card__disc{
    display:inline-flex;align-items:center;justify-content:center;
    width:56px;height:56px;border-radius:16px;color:#fff;
    background:var(--grad-brand);
    box-shadow:0 12px 26px -6px rgba(40,99,195,.6),0 0 0 1px rgba(255,255,255,.12);
}
/* Ghost numeral — oversized outline watermark behind the screen */
.ld-ref-card__count{
    position:absolute;top:6px;right:22px;z-index:0;pointer-events:none;
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:104px;line-height:1;
    color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.13);
    background:none;-webkit-background-clip:initial;background-clip:initial;
    -webkit-text-fill-color:transparent;
}
.ld-ref-card__count em{display:none;}
/* Card title -> guideline H4 spec 22/30. Was 28/36. */
.ld-page .ld-ref-card__title{grid-area:title;font-size:22px;line-height:30px;letter-spacing:-.2px;color:#fcfcfc;margin-bottom:10px;}
.ld-ref-card__text{grid-area:text;font-family:'Inter',sans-serif;font-size:15px;line-height:25px;color:rgba(255,255,255,.66);margin:0;align-self:start;}
/* Console box is light (see .ld-refinery__cards above) — override the
   dark-theme defaults above just for cards inside it; the Act box keeps
   the defaults since it's still dark. */
.ld-page .ld-refinery__cards .ld-ref-card__title{color:var(--ld-heading);}
.ld-refinery__cards .ld-ref-card__text{color:var(--ld-body);}
.ld-refinery__cards .ld-ref-card__count{-webkit-text-stroke-color:rgba(16,24,40,.12);}
/* Output visual — scene drawn directly on the dark console (no inset box),
   grounded by a soft radial glow so it doesn't float unanchored */
.ld-ref-card__mini{
    grid-area:screen;position:relative;z-index:1;align-self:center;
    margin:0;padding:6px 2px;border:0;background:transparent;box-shadow:none;
}
.ld-ref-card__mini::before{
    content:'';position:absolute;inset:-10% -6%;z-index:-1;border-radius:50%;
    background:radial-gradient(closest-side,rgba(40,99,195,.22) 0%,rgba(119,71,182,.1) 55%,transparent 80%);
    filter:blur(10px);
}
.ld-ref-card__mini svg{display:block;width:100%;max-width:none;height:auto;overflow:visible;}
/* Scene motion — anchor per-element transforms to each shape's own box.
   These .ld-scene-* rules originally lived with the old Opportunity
   mini-scenes; that section is now photo-based, so they live here with
   the Refinery card scenes that actually use them. */
.ld-ref-card__mini .ld-scene-bar,
.ld-ref-card__mini .ld-scene-ring{transform-box:fill-box;}
.ld-ref-card__mini .ld-scene-ring{transform-origin:center;}
.ld-ref-card__mini .ld-scene-bar{transform-origin:bottom;}
/* Rising bars in the Analyze / Act scenes */
.ld-scene-bar{animation:ldBarGrow 2.6s cubic-bezier(.22,.61,.36,1) infinite;}
.ld-scene-bar--2{animation-delay:.18s;}
.ld-scene-bar--3{animation-delay:.36s;}
.ld-scene-bar--4{animation-delay:.54s;}
@keyframes ldBarGrow{
    0%{transform:scaleY(.55);}
    38%,72%{transform:scaleY(1);}
    100%{transform:scaleY(.55);}
}
/* Pulsing confirmation rings (Connect hub, Analyze tip, Decide gauge) */
.ld-scene-ring{animation:ldRingPulse 2.8s ease-out infinite;}
@keyframes ldRingPulse{
    0%{transform:scale(.82);opacity:.9;}
    70%,100%{transform:scale(1.18);opacity:0;}
}
/* Context tags gently bobbing above the conveyor (Understand scene) */
.ldm-bob{
    transform-box:fill-box;transform-origin:center;
    animation:ldmBob 3.4s ease-in-out infinite;
}
.ldm-bob--2{animation-delay:-1.1s;}
.ldm-bob--3{animation-delay:-2.2s;}
@keyframes ldmBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3.5px);}}

/* ── Responsive ── */
@media (max-width:1199px){
    .ld-refinery__stage{grid-template-columns:250px 64px 1.3fr 64px 1fr;}
    .ld-ref-card{grid-template-columns:1fr minmax(210px,260px);column-gap:26px;}
}
@media (max-width:991px){
    /* Stack: source on top (shorter), console below; beam turns vertical */
    .ld-refinery__stage{grid-template-columns:1fr;}
    .ld-refinery__conduit{height:60px;}
    .ld-refinery__conduit::before{
        left:50%;right:auto;top:-14px;bottom:-14px;height:auto;width:3px;margin:0 0 0 -1.5px;
        background:linear-gradient(180deg,#7747b6 0%,#2863c3 50%,#1ca9c9 100%);
    }
    .ld-refinery__conduit::after{
        left:50%;right:auto;top:-14px;bottom:-14px;height:auto;width:3px;margin:0 0 0 -1.5px;
        background:repeating-linear-gradient(180deg,rgba(255,255,255,.9) 0 7px,transparent 7px 15px);
        background-size:3px 15px;
        animation:ldDashFlowV 1s linear infinite;
    }
    .ld-refinery__packet{display:none;}
    .ld-refinery__cards,.ld-refinery__act{min-height:0;}
}
@keyframes ldDashFlowV{to{background-position:0 15px;}}
@media (max-width:767px){
    .ld-ref-card{grid-template-columns:1fr;grid-template-areas:"head" "title" "text" "screen";grid-template-rows:auto;}
    .ld-ref-card__mini{margin-top:22px;align-self:stretch;}
    .ld-ref-card__count{font-size:72px;top:10px;}
}
@media (max-width:575px){
    .ld-ref-card{padding:22px 20px 20px;}
    /* Connect → Understand → Analyze → Decide IS the section's argument, so
       the step names have to survive the phone. Four labelled segments don't
       fit four-up at 390px, so the strip stops being a 4-column grid and
       becomes one line that scrolls sideways — the same treatment the
       capability pages use for their chip rows. (It used to set
       font-size:0 here, which left four unlabelled number bubbles.) */
    .ld-refinery__tabs{
        display:flex;gap:14px;padding:14px 16px 12px;
        overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;
    }
    .ld-refinery__tabs::-webkit-scrollbar{display:none;}
    .ld-ref-seg{flex:0 0 auto;min-width:112px;scroll-snap-align:start;}
}
@media (prefers-reduced-motion:reduce){
    .ld-ref-chip,.ld-refinery__source-dot,.ld-refinery__conduit::after,
    .ld-refinery__packet,.ld-ref-card.is-active,.ld-ref-seg__fill,.ldm-bob{animation:none !important;}
    .ld-ref-seg.is-active .ld-ref-seg__fill{width:100%;}
}

/* ============================================================
   4 · VALUE ACROSS YOUR BUSINESS (light) — "The Value Engine" v4
   Built to the Figma frames 3785:65922 / 3785:66149 / 3791:781.
   Three beats morph inside ONE fixed-height centre stage, so the
   section height never changes and the flanking cards stay put:
     Beat 1  chips appear, then travel DOWN through the semantic
             grid; each is consumed as its data column builds below.
     Beat 2  the grid dissolves; the columns fire UPWARD and
             converge into the agentic analysis box.
     Beat 3  the box fires six cards, alternating right → left.

   THE CLOCK IS THE SCROLLBAR, NOT A TIMER. Every delay below is
   written as calc(BASE - var(--t)), where --t is "seconds into the
   timeline". Under .is-scrub the animations are also paused, and a
   paused animation whose delay has gone negative renders exactly
   --t seconds in — so writing --t from scroll position scrubs the
   whole sequence forwards AND backwards at the reader's own pace.
   Nothing here ever advances on its own.

   IMPORTANT: the resting (and no-JS) state is the FINISHED
   picture — net box visible, all six cards visible — because the
   cards carry real content. The beats only hide/animate while
   .is-playing is actually applied.
   ============================================================ */
/* overflow:clip, NOT hidden — hidden would make this a scroll container
   and silently kill the sticky pin inside it. clip trims the bleed the
   same way without creating one. */
.ld-value{background:#051A3C;overflow:clip;isolation:isolate;}
.ld-value .ld-section-head{margin-bottom:30px;}

/* ── Scroll-driven playhead ───────────────────────────────────────
   The track is taller than the screen; the reader's progress through it
   is the playhead. .is-pinned is opt-in, added by the controller only
   once it has MEASURED that the engine fits the viewport under the
   sticky site header — a fixed breakpoint can't know that, and a pin
   whose content is taller than the screen is worse than no pin. Without
   it the section stays ordinary flow and the controller reads progress
   from the engine's own travel through the viewport instead, so the
   animation is still scroll-driven, just not pinned. */
.ld-value__track{position:relative;}
/* The extra height IS the scrub distance: 260vh of track minus the 100vh
   pin leaves 160vh of scroll for the ~7.9s timeline — about 20vh per
   timeline-second, brisk enough that the quiet opening beat (just the
   question typing) doesn't outstay its welcome. */
.ld-value__track.is-pinned{height:260vh;}
/* The shared .site-top is itself sticky at top:0, so the pin has to hold
   its content clear of it — hence padding rather than centring in the
   whole viewport. The controller measures the real header into
   --ld-pin-top; the fallback is hello bar + header at desktop size. */
.ld-value__track.is-pinned > .ld-value__pin{
    position:sticky;top:0;
    height:100vh;padding-top:var(--ld-pin-top,122px);
    display:flex;flex-direction:column;justify-content:center;
    overflow:hidden;
}
.ld-value__pin > .container{position:relative;z-index:1;width:100%;}
/* Shrink the composition to whatever the viewport can hold, rather than
   giving up on the pin. transform doesn't change layout height, so the
   container still measures its natural size (which is what the controller
   sizes the scale from) and flex-centring still centres it; scaling about
   the centre keeps the shrunken artwork centred too. The scale sits on the
   container, never on the pin itself — a transform on a sticky element's
   ancestor would break the sticking. */
.ld-value__track.is-pinned > .ld-value__pin > .container{
    transform:scale(var(--ld-pin-scale,1));
    transform-origin:center center;
}
/* Reclaim 44px of the pin's budget so the scale above stays near 1 on real
   laptops. Safe: the beats inside the stage are positioned in percentages,
   and 360px is a height this design already ships at in the <=640px rules —
   not a new value invented for the pin. */
.ld-value__track.is-pinned .ld-eng-core{height:360px;}
/* The pin already reserves --ld-pin-top to clear the sticky header, so the
   section's own 96px top padding just stacks dead space above the heading
   while the track is scrolling into place. Drop it while pinned. */
.ld-value.has-pin{padding-top:0;}
/* Breathing room between the intro copy and the question box. Trimming this
   is the obvious way to buy pin height, but at 16px the box crowded the
   paragraph — the pin has to earn its room somewhere else. */
.ld-value__track.is-pinned .ld-section-head{margin-bottom:36px;}
/* Half the shared 52px. The engine's stage already reserves ~46px of clear
   space below the outcome cards, so the default margin read as a gap rather
   than as the section's closing line. */
.ld-value .ld-section-foot{margin-top:28px;}
/* The closing line is the sequence's conclusion, so it must not be sitting
   there while the question is still typing. Same paused-animation scrub as
   every other beat — it lands right after the last outcome card. It keeps
   its layout box the whole time (opacity only), so nothing reflows.
   This works because --t is written on .ld-value__track, which the line
   inherits from; written on .ld-engine it would be out of reach. */
.ld-engine.is-scrub ~ .ld-section-foot{
    animation:ldEngFadeIn .45s ease both calc(7.45s - var(--t,0s));
    animation-play-state:paused;
}

/* ── Prompt ── */
.ld-eng-ask{
    display:flex;align-items:center;gap:12px;
    max-width:560px;margin:0 auto 28px;
    padding:16px 20px;border-radius:13px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 40px -26px rgba(0,0,0,.6);
    overflow:hidden;
}
/* The question is consumed like the signals are: once it's been asked and
   acknowledged, the box collapses away as the semantic layer forms, so the
   finished frame is just the engine and its outcomes. Height/padding/margin
   animate too (not only opacity) so it doesn't leave a hole behind it. Kept
   in the DOM rather than display:none so the text stays in the a11y tree. */
.ld-engine.is-playing .ld-eng-ask{
    animation:ldEngAskOut .55s cubic-bezier(.4,0,.2,1) forwards calc(2.1s - var(--t,0s));
}
@keyframes ldEngAskOut{
    0%{opacity:1;max-height:64px;margin-bottom:28px;padding-top:16px;padding-bottom:16px;border-top-width:1px;border-bottom-width:1px;}
    50%{opacity:0;}
    100%{opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0;}
}
.ld-eng-ask__label{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12px;font-weight:600;letter-spacing:.06em;
    color:#67d3ff;flex-shrink:0;
}
.ld-eng-ask__text{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:14px;line-height:21px;color:rgba(252,252,252,.9);min-width:0;
}
.ld-eng-ask__caret{
    width:2px;height:17px;flex-shrink:0;
    background:#67d3ff;
    animation:ldEngCaret 1s steps(1) infinite;
}
@keyframes ldEngCaret{0%,55%{opacity:1;}56%,100%{opacity:0;}}
/* Once the question is asked the caret retires and a check takes its place,
   so at rest the box reads "answered" rather than "waiting for input" */
.ld-engine.is-playing .ld-eng-ask__caret{
    animation:ldEngCaret 1s steps(1) infinite,ldEngSoftOut .3s ease forwards calc(1.45s - var(--t,0s));
}
.ld-eng-ask__done{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:20px;height:20px;margin-left:auto;border-radius:50%;
    background:var(--grad-brand);color:#fff;
    opacity:0;transform:scale(.6);
}
.ld-engine.is-playing .ld-eng-ask__done{
    animation:ldEngDoneIn .4s cubic-bezier(.22,.61,.36,1) forwards calc(1.5s - var(--t,0s));
}
@keyframes ldEngDoneIn{to{opacity:1;transform:none;}}

/* ── Stage: cards | machinery | cards (frame 3 layout) ── */
.ld-eng-stage{
    position:relative;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,392px) minmax(0,1fr);
    gap:36px;align-items:center;
}

/* Centre machinery. Height is set so the three beats — signals, semantic
   layer, data columns — each get their own clear band with ~60px of air
   between them; at 330px they collided (chips landed on top of the grid
   and its caption). The fall/fire distances below are tuned to these bands. */
.ld-eng-core{position:relative;z-index:1;height:404px;}
.ld-eng-beat{
    position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;align-items:center;gap:14px;
}

.ld-eng-tag{
    display:block;text-align:center;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.42);
}
.ld-eng-tag--under{margin-top:2px;}
.ld-eng-beat--signals .ld-eng-tag{opacity:0;}
.ld-engine.is-playing .ld-eng-beat--signals .ld-eng-tag{
    animation:ldEngFadeIn .4s ease both calc(1.5s - var(--t,0s)), ldEngSoftOut .4s ease forwards calc(3.0s - var(--t,0s));
}

/* ── Beat 1a · signal chips — sit ABOVE the grid, then fall through it ── */
/* Breaks out of the narrow centre track (left/right:auto + max-content) so
   all six chips fit on ONE line — inside the 360px column they wrapped and
   collided with the semantic layer below. Safe to overhang: the flanking
   cards don't exist yet at this point in the sequence. */
.ld-eng-beat--signals{
    top:1%;transform:translateX(-50%);
    left:50%;right:auto;width:max-content;max-width:96vw;
}
.ld-eng-signals{display:flex;flex-wrap:nowrap;justify-content:center;gap:8px;max-width:none;}
.ld-eng-sig{
    display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;
    padding:6px 11px;border-radius:9px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 5px 14px -8px rgba(0,0,0,.5);
    opacity:0;
}
/* Appear, hold, then travel down into the grid and get consumed */
/* NOTE the fill-modes: the FIRST animation is `both` (so it back-fills its
   hidden 0% during its delay), but every CHAINED animation must be
   `forwards` only. With `both`, a later animation's backwards fill wins
   over the earlier one for the whole of its delay — that's what made the
   data columns visible from t=0 even though their in-animation hadn't run. */
.ld-engine.is-playing .ld-eng-sig{
    animation:ldEngChipIn .34s cubic-bezier(.22,.61,.36,1) both calc(1.5s + var(--sig-i,0) * .07s - var(--t,0s)),
              ldEngChipFall .55s cubic-bezier(.55,0,.7,.35) forwards calc(2.2s + var(--sig-i,0) * .13s - var(--t,0s));
}
@keyframes ldEngChipIn{from{opacity:0;transform:translateY(-8px) scale(.94);}to{opacity:1;transform:none;}}
@keyframes ldEngChipFall{
    0%{opacity:1;transform:translateY(0) scale(1);}
    70%{opacity:.55;transform:translateY(100px) scale(.8);}
    100%{opacity:0;transform:translateY(150px) scale(.5);}
}
.ld-eng-sig__name{
    font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;
    line-height:1;color:#fcfcfc;white-space:nowrap;
}
.ld-eng-sig__id{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:9px;color:rgba(255,255,255,.45);line-height:1;
}

/* ── Beat 1b · semantic layer / embedding grid ── */
/* The beat itself carries the fade so the caption + cells go together;
   ldEngSoftOut only touches opacity, so the -50% centring survives. */
.ld-eng-beat--grid{top:49%;transform:translateY(-50%);opacity:0;}
.ld-engine.is-playing .ld-eng-beat--grid{
    animation:ldEngFadeIn .4s ease both calc(1.7s - var(--t,0s)), ldEngSoftOut .45s ease forwards calc(4.5s - var(--t,0s));
}
.ld-eng-grid{display:grid;grid-template-columns:repeat(10,17px);gap:5px;}
.ld-eng-grid i{width:17px;height:17px;border-radius:4px;background:rgba(255,255,255,.08);opacity:0;}
.ld-engine.is-playing .ld-eng-grid i{
    animation:ldEngCell .3s ease both calc(1.8s + var(--cell-i,0) * .010s - var(--t,0s));
}
@keyframes ldEngCell{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:none;}}
.ld-eng-grid i.is-hot--a{background:#b49ad9;}
.ld-eng-grid i.is-hot--b{background:#6f9ada;}
.ld-eng-grid i.is-hot--c{background:#79c9d6;}
@keyframes ldEngFadeIn{from{opacity:0;}to{opacity:1;}}
/* opacity-only exit — safe on elements that rely on a transform for layout */
@keyframes ldEngSoftOut{to{opacity:0;}}

/* ── Beat 1 output · data columns on a baseline ── */
.ld-eng-beat--cols{top:88%;transform:translateY(-50%);}
.ld-eng-cols{position:relative;display:flex;gap:22px;align-items:flex-end;padding-bottom:6px;}
.ld-eng-cols__baseline{
    position:absolute;left:-42px;right:-42px;bottom:0;height:1px;background:rgba(255,255,255,.14);
    opacity:0;
}
/* Build as each chip is consumed, then fire upward into the net box */
.ld-eng-col{opacity:0;}
.ld-engine.is-playing .ld-eng-col{
    animation:ldEngColIn .4s cubic-bezier(.22,.61,.36,1) both calc(2.7s + var(--col-i,0) * .13s - var(--t,0s)),
              ldEngColFire .6s cubic-bezier(.5,0,.75,.2) forwards calc(4.6s + var(--col-i,0) * .05s - var(--t,0s));
}
@keyframes ldEngColIn{from{opacity:0;transform:translateY(10px) scale(.9);}to{opacity:1;transform:none;}}
@keyframes ldEngColFire{
    0%{opacity:1;transform:translateY(0) scale(1);}
    100%{opacity:0;transform:translateY(-165px) scale(.55);}
}
.ld-engine.is-playing .ld-eng-cols__baseline{
    animation:ldEngFadeIn .4s ease both calc(2.7s - var(--t,0s)), ldEngSoftOut .4s ease forwards calc(4.8s - var(--t,0s));
}
.ld-eng-col__stack{display:flex;flex-direction:column-reverse;gap:3px;}
/* Brand violet/blue/cyan — the warm orange/amber/slate inherited from the
   reference deck read as a foreign patch against the rest of the page. */
.ld-eng-col__stack i{width:11px;height:5px;border-radius:2px;background:rgba(255,255,255,.18);}
.ld-eng-col__stack i.is-hot--a{background:#c4a4f0;}
.ld-eng-col__stack i.is-hot--b{background:#7fb4f5;}
.ld-eng-col__stack i.is-hot--c{background:#67d3ff;}

/* ── Beat 2/3 · agentic analysis box — the resting state ── */
.ld-eng-beat--net{top:50%;transform:translateY(-50%);}
.ld-engine.is-playing .ld-eng-beat--net{
    animation:ldEngNetIn .55s cubic-bezier(.22,.61,.36,1) both calc(5.0s - var(--t,0s));
}
@keyframes ldEngNetIn{
    from{opacity:0;transform:translateY(calc(-50% + 16px)) scale(.92);}
    to{opacity:1;transform:translateY(-50%) scale(1);}
}
.ld-eng-net{position:relative;width:min(392px,100%);}
.ld-eng-net__depth{
    position:absolute;left:8px;right:-8px;top:-8px;height:100%;
    border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
}
.ld-eng-net__depth--2{left:4px;right:-4px;top:-4px;}
.ld-eng-net__panel{
    position:relative;
    padding:22px 22px 14px;border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(103,211,255,.28);
    box-shadow:0 22px 50px -24px rgba(0,0,0,.7),0 0 0 6px rgba(103,211,255,.05);
}
/* Brand glow behind the engine so it anchors the composition rather than
   losing the visual fight to six solid white cards */
.ld-eng-net::after{
    content:'';position:absolute;inset:-14% -8%;z-index:-1;border-radius:50%;
    background:radial-gradient(closest-side,rgba(40,99,195,.42) 0%,rgba(119,71,182,.26) 55%,transparent 78%);
    filter:blur(20px);
}
.ld-eng-net__badge{
    position:absolute;top:-11px;right:14px;
    padding:3px 9px;border-radius:6px;
    background:rgba(10,26,58,.9);border:1px solid rgba(255,255,255,.16);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:10.5px;color:rgba(255,255,255,.7);
}
.ld-eng-net__svg{display:block;width:100%;height:auto;}
.ld-eng-net__in circle{fill:#fcfcfc;}
.ld-eng-net__mid circle{fill:#c4a4f0;}
.ld-eng-net__out circle{fill:#67d3ff;}
.ld-engine.is-playing .ld-eng-net__mid circle{
    animation:ldEngNode 1.3s ease-in-out infinite 5.5s;
}
.ld-engine.is-playing .ld-eng-net__mid circle:nth-child(2){animation-delay:5.6s;}
.ld-engine.is-playing .ld-eng-net__mid circle:nth-child(3){animation-delay:5.7s;}
.ld-engine.is-playing .ld-eng-net__mid circle:nth-child(4){animation-delay:5.8s;}
@keyframes ldEngNode{0%,100%{opacity:.4;}50%{opacity:1;}}

/* ── Outcome cards — flank the machinery; fire right → left in doc order ── */
.ld-eng-cards{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;min-width:0;}
.ld-eng-card{
    position:relative;
    display:flex;align-items:flex-start;gap:12px;
    padding:15px 40px 15px 18px;border-radius:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 10px 26px -18px rgba(0,0,0,.5);
    transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,border-color .28s ease;
}
.ld-eng-card:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.075);
    border-color:rgba(103,211,255,.34);
    box-shadow:0 18px 36px -20px rgba(0,0,0,.6);
}
/* --fire-i encodes the alternating order: 0=Grow(R) 1=Risk(L) 2=Eff(R) … */
.ld-engine.is-playing .ld-eng-card{
    animation:ldEngCardIn .5s cubic-bezier(.22,.61,.36,1) both
              calc(5.7s + var(--fire-i,0) * .3s - var(--t,0s));
}
.ld-eng-cards--left .ld-eng-card{animation-name:ldEngCardInL;}
@keyframes ldEngCardIn{from{opacity:0;transform:translateX(22px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes ldEngCardInL{from{opacity:0;transform:translateX(-22px) scale(.96);}to{opacity:1;transform:none;}}
.ld-eng-card__icon{
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    width:30px;height:30px;border-radius:9px;color:#fff;
    background:var(--grad-brand);
    box-shadow:0 6px 14px -5px rgba(40,99,195,.45);
}
.ld-eng-card__body{display:flex;flex-direction:column;gap:3px;min-width:0;}
/* Sub-heading -> guideline H3 spec 19/28. Was 15/21. */
.ld-page .ld-eng-card__name{font-size:19px;line-height:28px;letter-spacing:-.3px;color:#fcfcfc;margin:0;}
.ld-eng-card__text{
    font-family:'Inter',sans-serif;font-size:12.5px;line-height:18px;
    color:rgba(255,255,255,.62);margin:0;
}

/* ── Scrub mode ───────────────────────────────────────────────────
   Freeze every timeline animation. A paused animation never advances its
   own clock, so its rendered position is decided purely by its delay:
   delay still positive → parked on the `from` frame; delay driven
   negative by --t → rendered exactly that far in. That is the whole
   mechanism, and it costs one property per element. */
.ld-engine.is-scrub .ld-eng-ask,
.ld-engine.is-scrub .ld-eng-ask__done,
.ld-engine.is-scrub .ld-eng-beat--signals .ld-eng-tag,
.ld-engine.is-scrub .ld-eng-sig,
.ld-engine.is-scrub .ld-eng-beat--grid,
.ld-engine.is-scrub .ld-eng-grid i,
.ld-engine.is-scrub .ld-eng-col,
.ld-engine.is-scrub .ld-eng-cols__baseline,
.ld-engine.is-scrub .ld-eng-beat--net,
.ld-engine.is-scrub .ld-eng-card{
    animation-play-state:paused;
}
/* Two exceptions, both ambient loops rather than timeline steps. The caret
   keeps blinking (first animation) while only its retirement scrubs
   (second); the net's mid-layer nodes just pulse free — the box they live
   in is invisible until it lands, so nothing shows early. */
.ld-engine.is-scrub .ld-eng-ask__caret{animation-play-state:running,paused;}
.ld-engine.is-scrub .ld-eng-net__mid circle{animation-delay:0s;}
.ld-engine.is-scrub .ld-eng-net__mid circle:nth-child(2){animation-delay:-.33s;}
.ld-engine.is-scrub .ld-eng-net__mid circle:nth-child(3){animation-delay:-.65s;}
.ld-engine.is-scrub .ld-eng-net__mid circle:nth-child(4){animation-delay:-.98s;}

/* ── Responsive ── */
@media (max-width:1199px){
    .ld-eng-stage{gap:24px;grid-template-columns:minmax(0,1fr) minmax(280px,320px) minmax(0,1fr);}
    .ld-eng-card{padding:13px 14px;}
    .ld-eng-card__text{font-size:12px;}
}
@media (max-width:991px){
    /* Machinery on top, then the six cards two-up beneath it. Flex rather
       than a 1-col grid so `order` still works once the core is wrapped:
       in a grid, each item is its own row and a sticky child has no room
       to travel — the hold has to be a plain block for that. */
    .ld-eng-stage{display:flex;flex-direction:column;align-items:stretch;gap:28px;}
    .ld-eng-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

    /* THE MOBILE PIN. The desktop pin holds heading + engine together, which
       needs ~966px of viewport — no phone has it, so below 992px the pin is
       scoped down to the only part with something to watch. The core sticks
       under the site header; the hold's runway is the scroll the timeline is
       spent over, so the machinery stays put while it plays and releases the
       moment the sequence finishes, with the six outcome cards arriving right
       after it. --ld-eng-stick is measured by the controller (header + the
       Ask row) so the question is still on screen at t=0 and scrolls away as
       it finishes typing at 1.35s.

       The runway MUST be min-height, not padding-bottom. Blink measures a
       sticky element's travel against its containing block's CONTENT box, so
       with the runway as padding the core's range came out as exactly zero
       and the pin was silently inert — it read as an ordinary scroll. */
    .ld-eng-hold{
        display:block;order:-1;
        --ld-eng-coreh:390px;
        min-height:calc(var(--ld-eng-coreh) + 150vh);
    }
    .ld-eng-core{
        position:sticky;top:var(--ld-eng-stick,214px);
        height:var(--ld-eng-coreh);
    }
    /* The closing line is cued off 7.45s, which the phone timeline (5.6s)
       never reaches — without this it would stay at opacity 0 forever. Land
       it on the last frame instead, as the pin releases. */
    .ld-engine.is-scrub ~ .ld-section-foot{
        animation-delay:calc(5.15s - var(--t,0s));
    }
}
@media (max-width:640px){
    .ld-eng-ask{padding:14px;gap:10px;}
    .ld-eng-ask__text{font-size:12.5px;}
    .ld-eng-cards{grid-template-columns:1fr;}
    /* 420 rather than 360: the core is pinned on screen for the whole
       sequence here, so it may as well use the room — and the beats inside
       are positioned in percentages, so they simply get more air. Set on
       the hold because its runway is measured from it. */
    .ld-eng-hold{--ld-eng-coreh:420px;}
    .ld-eng-grid{grid-template-columns:repeat(10,13px);}
    .ld-eng-grid i{width:13px;height:13px;}
    .ld-eng-cols{gap:14px;}
    /* The six outcome cards stack one-up here, so they hold ~670px of
       layout height — but their fade-in is gated on 5.7s of the scrub.
       On a phone that means two full screens of empty dark space that
       suddenly populate. Ungate them: the centre machinery is still
       scroll-scrubbed, the cards are just there. */
    .ld-engine.is-playing .ld-eng-card,
    .ld-engine.is-scrub .ld-eng-card{
        animation:none;opacity:1;transform:none;
    }
    /* keep all six chips on one line at phone widths */
    .ld-eng-signals{gap:5px;}
    .ld-eng-sig{padding:5px 7px;}
    .ld-eng-sig__name{font-size:10px;}
    .ld-eng-sig__id{font-size:8px;}
}

/* Reduced motion — force the finished picture, zero motion. The beats
   that only exist mid-sequence are hidden outright; the net box and the
   cards are pinned to their end state. */
@media (prefers-reduced-motion:reduce){
    .ld-eng-beat--signals,.ld-eng-beat--grid,.ld-eng-beat--cols{display:none;}
    .ld-eng-ask__caret{display:none;}
    .ld-eng-net__mid circle{animation:none !important;}
    /* same finished frame — question box already gone, just no animation */
    .ld-engine.is-playing .ld-eng-ask{
        animation:none;opacity:0;max-height:0;margin-bottom:0;
        padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0;
    }
    .ld-engine.is-playing .ld-eng-beat--net{animation:none;opacity:1;transform:translateY(-50%);}
    .ld-engine.is-playing .ld-eng-card{animation:none;opacity:1;transform:none;}
    .ld-eng-card{transition:none;}
    .ld-eng-card:hover{transform:none;}
}

/* ============================================================
   5 · PRICING BANNER (dark) — split card w/ tier illustration
   The section itself now matches "The Value Engine" above it (dark→dark,
   no bridge between them); the card stays a bright, light-toned panel so
   it pops as a floating CTA against the dark backdrop, with a soft
   ambient glow standing in for the shadow a light card would normally
   cast on a light page.
   ============================================================ */
.ld-pricing-band{background:var(--ld-navy);}
.ld-page .ld-pricing-band{padding:32px 0 96px;}
.ld-pricing-card{
    position:relative;overflow:hidden;
    border-radius:28px;padding:56px 60px;
    background:linear-gradient(135deg,#f0ebf7 0%,#e7eef8 50%,#e8f6fa 100%);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 50px 100px -30px rgba(0,0,0,.55),0 0 90px -10px rgba(71,120,220,.35);
}
.ld-pricing-card__grid{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:radial-gradient(rgba(14,72,165,.1) 1px,transparent 1px);
    background-size:24px 24px;
}
.ld-pricing-card__layout{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;
}
/* §3: section H2 is unified at 44/54 across the site. Was 38/46. */
.ld-page .ld-pricing-card__inner h2{font-size:44px;line-height:54px;margin:0 0 16px;}
.ld-pricing-card__inner p{font-family:'Inter',sans-serif;font-weight:400;font-size:16px;line-height:27px;color:var(--ld-body);margin:0 0 32px;}
.ld-pricing-card__ctas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
/* Light-card counterpart to .ld-btn-ghost — same teal→purple gradient border
   and the same metrics, but the card's own surface shows through instead of
   a navy fill, so the label has to be dark.
   .ld-btn-ghost's `padding-box / border-box` two-layer trick can't be reused
   here: that needs an OPAQUE padding-box colour to hide the gradient behind
   the label, which would put a navy slab on a light card. border-image would
   give a see-through centre but ignores border-radius and squares off the
   corners. So the gradient goes on a pseudo-element and a two-layer mask
   punches the middle out of it, leaving only the rounded rim. */
.ld-btn-outline{
    position:relative;isolation:isolate;
    display:inline-flex;align-items:center;gap:6px;
    padding:10px 22px;border-radius:6px; /* §6: all buttons 6px */
    border:0;background:transparent;
    font-family:'Inter',sans-serif;font-size:15px;font-weight:700;line-height:25px;
    color:var(--ld-heading);text-decoration:none;
    transition:box-shadow .22s ease,transform .22s cubic-bezier(.22,.61,.36,1);
}
.ld-btn-outline::before{
    content:'';position:absolute;inset:0;z-index:-1;
    border-radius:inherit;padding:1.5px; /* padding = the rim's thickness */
    background:linear-gradient(90deg,#1ca9c9 0%,#7747b6 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask-composite:exclude;
    pointer-events:none;
}
.ld-btn-outline:hover{box-shadow:0 10px 24px -8px rgba(28,169,201,.45);transform:translateY(-1px);}
.ld-pricing-card__illus{display:flex;justify-content:center;}
/* Figma 3894:38573 — magnifier, coins and task cards, exported composed with
   transparency. Capped at 460px so the 921px asset lands at exactly 2x on
   retina; height comes from the intrinsic ratio, so no aspect-ratio needed. */
.ld-pricing-illus{display:block;width:100%;max-width:460px;height:auto;}

@media (max-width:991px){
    .ld-pricing-card__layout{grid-template-columns:1fr;gap:40px;text-align:center;}
    .ld-pricing-card__ctas{justify-content:center;}
    .ld-pricing-card__illus{order:-1;}
    .ld-pricing-illus{max-width:420px;}
}
@media (max-width:767px){ .ld-pricing-card{padding:44px 26px;border-radius:20px;} }
@media (max-width:575px){
    .ld-page .ld-pricing-card__inner h2{font-size:26px;line-height:34px;}
    .ld-pricing-card__ctas{flex-direction:column;align-items:stretch;}
    .ld-pricing-card__ctas .btn-primary,.ld-pricing-card__ctas .ld-btn-outline{text-align:center;justify-content:center;}
}

/* ============================================================
   6 · CASE STUDIES (light tint) — full-bleed photo carousel
   Ported from the Insights page's customer carousel and re-authored
   here under ld- names, so this page owns its styles and never
   depends on the insights stylesheet. Each slide is a photo card with
   a left-to-right navy scrim; copy sits on the dark side, metrics as
   translucent pills. Nav sits outside the card on the light canvas.
   ============================================================ */
.ld-stories{background:#fcfcfc;}

.ld-story-carousel{position:relative;}
.ld-story-slide{
    display:none;position:relative;overflow:hidden;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    /* Base navy fill so the card reads correctly before the photo loads —
       the scrim above sits on top of whichever is present. */
    background:linear-gradient(120deg,#051a3c 0%,#0a2350 55%,#0d2a5e 100%);
    min-height:428px;
}
.ld-story-slide.is-active{display:block;}

.ld-story-slide__bg{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;display:block;
}
/* The manufacturing export is mirrored relative to the design, so the
   mechanic lands on the right. A modifier, not a base rule, so photos
   swapped in later aren't silently flipped too. */
.ld-story-slide__bg--flip{transform:scaleX(-1);}
/* Left-to-right navy scrim: solid through the copy column, fading out
   over the right side so the photo stays visible there. */
.ld-story-slide__scrim{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,#051a3c 15.6%,rgba(5,21,47,0) 100%);
}
.ld-story-slide__content{
    position:relative;z-index:1;
    max-width:620px;
    padding:44px 40px 44px 58px;
}
.ld-story-slide__industry{
    display:block;
    font-family:'Space Grotesk',sans-serif;font-weight:300;
    font-size:32px;line-height:45px;
    color:var(--ld-d-ink,#fcfcfc);
    margin-bottom:12px;
}
.ld-page .ld-story-slide h3{
    font-family:'Space Grotesk',sans-serif;font-weight:500;
    /* Sub-heading -> guideline H3 spec 19/28. Line-height was 30px. */
    font-size:19px;line-height:28px;letter-spacing:-.3px;
    color:var(--ld-d-ink,#fcfcfc);
    margin:0 0 6px;
}
.ld-story-slide__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;
}
/* Metrics are single pills carrying the whole "value: label" string,
   not a split number/caption stack. */
.ld-story-slide__stats{
    display:flex;flex-direction:column;align-items:flex-start;gap:12px;
    margin-bottom:28px;
}
.ld-story-stat{
    display:inline-block;
    padding:9px 15px;border-radius:100px;
    background:rgba(255,255,255,.12);
    font-family:'Inter',sans-serif;font-weight:400;
    font-size:15px;line-height:26px;
    color:var(--ld-d-ink,#fcfcfc);
}
.ld-story-slide__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;
}
.ld-story-slide__link svg{width:14px;height:14px;transition:transform .22s ease;}
.ld-story-slide__link:hover svg{transform:translateX(3px);}

/* Nav — outside the card on the light canvas, so light-mode colours
   rather than the slide's white-on-navy. */
.ld-story-nav{
    display:flex;align-items:center;justify-content:center;gap:18px;
    margin-top:28px;
}
.ld-story-nav__btn{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    /* Tinted, not white — a white button on the now-white section would
       read as border-only and lose its affordance. */
    background:var(--ld-tint,#f7f7f7);
    border:1px solid rgba(16,24,40,.14);
    color:var(--ld-heading,#101828);
    cursor:pointer;
    transition:background .22s ease,border-color .22s ease;
}
.ld-story-nav__btn:hover{background:rgba(16,24,40,.06);border-color:rgba(16,24,40,.28);}
.ld-story-nav__btn:focus-visible{outline:2px solid var(--Royal-Blue-Blue-500,#0e48a5);outline-offset:2px;}
.ld-story-nav__btn svg{width:16px;height:16px;}
.ld-story-nav__count{
    font-family:'Inter',sans-serif;font-size:14px;color:#4a5568;
}

@media (max-width:767px){
    /* Scrim flips to a vertical fade so the copy stays legible over the
       photo once the layout stacks. */
    .ld-story-slide{min-height:0;}
    .ld-story-slide__scrim{background:linear-gradient(180deg,rgba(5,21,47,.86) 0%,#051a3c 60%);}
    .ld-story-slide__content{max-width:none;padding:32px 24px;}
    .ld-story-slide__industry{font-size:26px;line-height:36px;}
    .ld-story-slide__stats{gap:10px;}
}

/* ============================================================
   7 · TRUST (light) — shield stage + flanking pillars + real badges
   ============================================================ */
.ld-trust{background:#fcfcfc;overflow:hidden;isolation:isolate;}
.ld-trust__stage{
    display:grid;grid-template-columns:1fr minmax(260px,340px) 1fr;gap:44px;
    align-items:center;
}
.ld-trust__col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:30px;}
.ld-trust__point{display:flex;align-items:flex-start;gap:16px;}
.ld-trust__col--left .ld-trust__point{flex-direction:row-reverse;text-align:right;}
.ld-trust__ic{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:46px;height:46px;border-radius:13px;color:#fff;
    background:var(--grad-brand);box-shadow:0 8px 18px rgba(40,99,195,.32);
    transition:transform .3s ease;
}
.ld-trust__point:hover .ld-trust__ic{transform:translateY(-3px);}
/* Sub-heading -> guideline H3 spec 19/28. Was 17/24. */
.ld-page .ld-trust__name{font-size:19px;line-height:28px;letter-spacing:-.3px;color:var(--ld-heading);margin-bottom:5px;}
.ld-trust__text{font-family:'Inter',sans-serif;font-size:13.5px;line-height:21px;color:var(--ld-body);margin:0;}

/* Centre — shield illustration on a soft glow */
.ld-trust__visual{position:relative;display:flex;align-items:center;justify-content:center;}
.ld-trust__visual::before{
    content:'';position:absolute;inset:-12%;z-index:0;border-radius:50%;
    background:radial-gradient(closest-side,rgba(40,99,195,.28) 0%,rgba(119,71,182,.14) 50%,transparent 78%);
    filter:blur(14px);
    animation:ldShieldGlow 4.5s ease-in-out infinite;
}
@keyframes ldShieldGlow{0%,100%{opacity:.75;}50%{opacity:1;}}
/* Brand-tinted, not black. A 45%-black drop-shadow is a dark-background
   treatment; over this white section it spread across the SVG's large
   transparent canvas and read as a dirty grey cloud behind the shield. */
.ld-trust__visual img{position:relative;z-index:1;display:block;width:100%;max-width:300px;height:auto;
    filter:drop-shadow(0 18px 36px rgba(14,72,165,.18));}

.ld-compliance{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;margin-top:64px;}
.ld-compliance img{
    display:block;height:96px;width:auto;
    filter:drop-shadow(0 8px 18px rgba(14,72,165,.14)); /* was 35% black on white */
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.ld-compliance img:hover{transform:translateY(-5px) scale(1.04);}

@media (max-width:991px){
    .ld-trust__stage{grid-template-columns:1fr;gap:44px;max-width:640px;margin-inline:auto;}
    .ld-trust__visual{order:-1;}
    .ld-trust__visual img{max-width:230px;}
    .ld-trust__col{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
    .ld-trust__col--left .ld-trust__point{flex-direction:row;text-align:left;}
}
@media (max-width:575px){
    .ld-trust__col{grid-template-columns:1fr;}
    .ld-compliance{gap:22px;}
    .ld-compliance img{height:76px;}
}

/* ============================================================
   8 · CLOSING CTA (light) — dark glow card
   ============================================================ */
.ld-cta{background:#fcfcfc;}
.ld-page .ld-cta{padding:32px 0 96px;}
.ld-cta__card{
    position:relative;overflow:hidden;text-align:center;
    border-radius:28px;padding:80px 56px;
    background:
        radial-gradient(ellipse 70% 90% at 12% 8%,rgba(119,71,182,.5) 0%,transparent 60%),
        radial-gradient(ellipse 60% 80% at 88% 92%,rgba(28,169,201,.36) 0%,transparent 60%),
        linear-gradient(160deg,#0a1230 0%,#071a3e 55%,#04102E 100%);
    box-shadow:0 40px 80px -34px rgba(4,16,46,.6);
}
.ld-cta__card::before{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
        linear-gradient(rgba(120,150,220,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(120,150,220,.05) 1px,transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 45%,#000 30%,transparent 82%);
    mask-image:radial-gradient(ellipse 75% 75% at 50% 45%,#000 30%,transparent 82%);
}
.ld-cta__inner{position:relative;z-index:1;max-width:680px;margin:0 auto;}
.ld-page .ld-cta__inner h2{font-size:44px;line-height:54px;color:#fcfcfc;margin:0 0 16px;}
.ld-cta__inner p{font-family:'Inter',sans-serif;font-weight:400;font-size:17px;line-height:27px;color:rgba(252,252,252,.78);margin:0 0 36px;}
.ld-cta__ctas{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}

@media (max-width:767px){ .ld-cta__card{padding:48px 28px;border-radius:20px;} }
@media (max-width:575px){
    .ld-page .ld-cta__inner h2{font-size:26px;line-height:36px;}
    .ld-cta__ctas{flex-direction:column;}
    .ld-cta__ctas .btn-primary,.ld-cta__ctas .ld-btn-ghost{width:100%;text-align:center;justify-content:center;}
}

/* ============================================================
   RESPONSIVE / MOTION
   ============================================================ */
@media (max-width:992px){
    .ld-page section{padding:72px 0;}
    .ld-hero{padding:80px 0 72px;}
}
@media (max-width:680px){
    .ld-page section{padding:56px 0;}
}
@media (prefers-reduced-motion:reduce){
    .ld-hero__orb,.ld-hero__particles span,
    .ldh-halo,.ldh-node,.ldh-core,.ldh-typing circle,.ldh-line,.ldh-area,
    .ldh-tip,.ldh-tip-ring,.ldh-meter-fill,.ldh-mbar,.ldh-target-ring,
    .ld-scene-bar,.ld-scene-ring,
    .ld-trust__visual::before{animation:none !important;}
    .ldh-line{stroke-dashoffset:0;}
    .ldh-area,.ldh-tip{opacity:1;}
    .ldh-tip-ring,.ldh-target-ring{opacity:0;}
    .ld-opp-card{transition:none !important;}
}