/* Hero B, the home hero (owner Q116; hero A is kept, disabled, behind SITE_HERO=a). */
/* B moves only transform and opacity, with CSS keyframes, on small layers; the
   photo and its static art are one baked image (WP-HB2, v10 mock + owner Q68). */
.hero:has(.hero-b){min-height:740px}

/* Copy: the shared markup, restyled to the mock's rhythm (never re-ordered). */
.hero[data-hero="b"]{background:var(--dm-ink);isolation:isolate}
.hero[data-hero="b"]>.wrap{display:block;z-index:3;pointer-events:none;padding-top:96px;padding-bottom:80px}
.hero[data-hero="b"]>.wrap>.fg{display:none}
.hero[data-hero="b"] .copy{display:block;max-width:58%;padding:0;background:none;pointer-events:auto}
.hero[data-hero="b"] .copy::before{content:none}
.hero[data-hero="b"] .copy *,.hero[data-hero="b"] .copy *::before{animation:none}
.hero[data-hero="b"] .copy>.eyebrow{display:block}
.hero[data-hero="b"] .copy>h1{font-size:clamp(48px,7vw,96px);line-height:1;letter-spacing:-.02em;margin:18px 0 26px;min-height:3em}
.hero[data-hero="b"] .copy>h1 .mbr{display:block;height:0}
.hero[data-hero="b"] .copy>h1 em{text-shadow:0 0 18px color-mix(in srgb,var(--dm-lime-500) 55%,transparent),0 0 42px color-mix(in srgb,var(--dm-lime-500) 35%,transparent)}
.hero[data-hero="b"] .copy>.lead{font-size:21px;line-height:1.55;max-width:30ch;margin:0 0 30px;padding:0;background:none}
.hero[data-hero="b"] .copy>.acts{display:grid;gap:20px;justify-items:start;padding:0}
.hero[data-hero="b"] .ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero[data-hero="b"] .resp{display:inline-block;margin:0;padding:var(--dm-space-8) var(--dm-space-12);background:color-mix(in srgb,var(--dm-ink) 80%,transparent);border-left:3px solid var(--dm-lime-500);border-radius:0 var(--dm-radius-control) var(--dm-radius-control) 0;box-shadow:none;color:var(--dm-lime-500)}
/* Copy column starts at the header logo's left edge (the header wrap is 1400 px wide from 1500 px). */
@media(min-width:1500px){.hero[data-hero="b"]>.wrap{max-width:1400px}}
/* The site zooms the page above 1800 px; B keeps the mock's pixel sizes there and
   widens its wrap by the same factor so the copy still meets the logo. */
@media(min-width:1800px){.hero[data-hero="b"]{zoom:.909091}.hero[data-hero="b"]>.wrap{max-width:1540px;padding-left:52.8px;padding-right:52.8px}}
@media(min-width:2200px){.hero[data-hero="b"]{zoom:.819672}.hero[data-hero="b"]>.wrap{max-width:1708px;padding-left:58.56px;padding-right:58.56px}}

/* A's ambient layer stays under the copy: grid, dashed paths, traces, 12 sparks. */
.hero[data-hero="b"]>.fx{z-index:2}
.hero[data-hero="b"] .hb-extra{display:block}
.hero[data-hero="b"] .fx .glow,.hero[data-hero="b"] .fx .horizon,.hero[data-hero="b"] .fx .hb-extra:nth-child(n+22){display:none}
.hero[data-hero="b"] .fx .gridfx{animation-duration:30s}
.hero[data-hero="b"] .fx .paths path{animation-duration:16s!important}
.hero[data-hero="b"] .fx .paths path:nth-child(2){animation-duration:20s!important}.hero[data-hero="b"] .fx .paths path:nth-child(3){animation-duration:24s!important}
.hero[data-hero="b"] .fx .trace.t1{animation-duration:18s}.hero[data-hero="b"] .fx .trace.t2{animation-duration:22s}.hero[data-hero="b"] .fx .trace.t3{animation-duration:26s}
.hero[data-hero="b"] .fx .spark{animation-duration:15s}
.hero[data-hero="b"] .fx .spark:nth-of-type(3n){background:var(--dm-lime-500);box-shadow:0 0 10px 3px color-mix(in srgb,var(--dm-lime-500) 85%,transparent)}
.hero[data-hero="b"] .fx .spark:nth-of-type(3n + 1){background:var(--dm-violet-500);box-shadow:0 0 10px 3px color-mix(in srgb,var(--dm-violet-500) 85%,transparent)}

/* The art: one stage in the mock's photo units, scaled by hero-b.js like xMidYMid slice. */
.hero[data-hero="b"] .hero-b{display:block;position:absolute;inset:0;pointer-events:none}
.hb-art{position:absolute;z-index:1;inset:0 0 0 30%;overflow:hidden}
.hb-stage{position:absolute;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0;opacity:0;transition:opacity .6s}
.hero-b.hb-ready .hb-stage{opacity:1}
/* Without JavaScript the stage is not measured: a fixed scale covers the art box at common widths. */
@media(scripting:none){.hb-stage{opacity:1;transform:scale(.875)}}
@media(scripting:none) and (max-width:767px){.hb-stage{transform:scale(.36)}}
.hb-kb{position:absolute;inset:0;transform-origin:46% 28%;will-change:transform;animation:hb-kb 30s ease-in-out infinite alternate}
.hb-kb picture{display:contents}
.hb-kb>*,.hb-kb img{position:absolute}
.hb-scene{left:0;top:0;width:1536px;height:1024px}
.hb-man{left:720px;top:288px;width:240px;height:464px}
/* Owner Q118: the lime node at the man's hand glows a bit more: a 30% wider halo (312 vs 240, same centre 708,290)
   with a brighter core and fuller mid-halo; still one radial gradient moved by transform/opacity only. */
.hb-lime{left:552px;top:134px;width:312px;height:312px;border-radius:50%;background:radial-gradient(closest-side,var(--dm-lime-500),color-mix(in srgb,var(--dm-lime-500) 55%,transparent) 30%,color-mix(in srgb,var(--dm-lime-500) 22%,transparent) 58%,transparent);transform:scale(.79);opacity:.85;animation:hb-breathe 6.5s linear infinite}
.hb-streak{left:674px;top:640px;width:68px;height:384px;background:linear-gradient(transparent,color-mix(in srgb,var(--dm-lime-500) 70%,transparent) 25%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);opacity:.75;animation:hb-pulse 4s linear infinite}
.hb-fl{left:448px;top:830px;width:520px;height:140px;background:radial-gradient(closest-side,color-mix(in srgb,var(--dm-lime-500) 55%,transparent),color-mix(in srgb,var(--dm-cyan-500) 18%,transparent) 50%,transparent);opacity:.75;animation:hb-pulse 4s linear infinite}
.hb-blink{left:1170.4px;top:576.4px;width:5.2px;height:5.2px;border-radius:50%;background:var(--dm-cyan-300);animation:hb-dim 1.4s linear infinite}
.hb-tw{width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--dm-white) 95%,transparent),color-mix(in srgb,var(--dm-cyan-500) 70%,transparent) 30%,transparent);opacity:.2;animation-name:hb-twinkle;animation-timing-function:linear;animation-iteration-count:infinite}
.hb-tw.hb-v{background:radial-gradient(closest-side,color-mix(in srgb,var(--dm-white) 95%,transparent),color-mix(in srgb,var(--dm-violet-500) 70%,transparent) 30%,transparent)}
/* Rings are drawn at r 135 and scaled 40 → 230, so the stroke reads 3 px mid-ripple. */
.hb-ring{left:573px;top:155px;width:270px;height:270px;border-radius:50%;border:3px solid var(--dm-lime-500);box-shadow:0 0 4px var(--dm-lime-500),0 0 14px color-mix(in srgb,var(--dm-lime-500) 60%,transparent),inset 0 0 4px var(--dm-lime-500),inset 0 0 14px color-mix(in srgb,var(--dm-lime-500) 60%,transparent);opacity:0;animation:hb-ring 4.8s linear infinite}
.hb-dot{left:0;top:0;border-radius:50%;offset-anchor:50% 50%;offset-rotate:0deg;background:radial-gradient(closest-side,var(--dm-white),var(--dm-cyan-500) 35%,transparent);opacity:0;animation-name:hb-move;animation-timing-function:linear;animation-iteration-count:infinite}
.hb-dot.hb-v{background:radial-gradient(closest-side,var(--dm-white),var(--dm-violet-500) 35%,transparent)}
@keyframes hb-kb{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,1%)}}
@keyframes hb-breathe{0%,100%{transform:scale(.667);opacity:.7}50%{transform:scale(1);opacity:1}}
@keyframes hb-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes hb-dim{50%{opacity:.2}}
@keyframes hb-twinkle{0%,100%{opacity:.15}50%{opacity:.95}}
@keyframes hb-ring{from{transform:scale(.296);opacity:.9}to{transform:scale(1.704);opacity:0}}
@keyframes hb-move{from{offset-distance:0%;opacity:1}to{offset-distance:100%;opacity:1}}

/* The top fade softens the photo into the header colour (owner Q70); static, man starts below 180 px. */
.hb-fade{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,var(--dm-ink) 0,color-mix(in srgb,var(--dm-ink) 85%,transparent) 40px,color-mix(in srgb,var(--dm-ink) 40%,transparent) 110px,transparent 180px),linear-gradient(90deg,var(--dm-ink) 0%,var(--dm-ink) 32%,color-mix(in srgb,var(--dm-ink) 85%,transparent) 40%,color-mix(in srgb,var(--dm-ink) 25%,transparent) 52%,transparent 62%),linear-gradient(0deg,color-mix(in srgb,var(--dm-ink) 70%,transparent),transparent 25%)}
/* The mock's floor pools blur 18 px and screen-blend; these gradients are soft already, so the
   layer is neither filtered nor blended (screen cost ~30% of B's frame rate at 1920 for no visible change). */
.hb-floor{position:absolute;z-index:1;left:0;right:0;bottom:-6%;height:58%;opacity:.95;background:radial-gradient(38% 60% at 40% 100%,var(--dm-lime-500),color-mix(in srgb,var(--dm-lime-500) 40%,transparent) 45%,transparent 72%),radial-gradient(26% 55% at 58% 100%,color-mix(in srgb,var(--dm-cyan-500) 95%,transparent),color-mix(in srgb,var(--dm-cyan-500) 30%,transparent) 50%,transparent 75%),radial-gradient(32% 70% at 84% 95%,var(--dm-violet-500),color-mix(in srgb,var(--dm-violet-500) 40%,transparent) 48%,transparent 75%),radial-gradient(30% 45% at 12% 100%,color-mix(in srgb,var(--dm-violet-500) 35%,transparent),transparent 70%);background-repeat:no-repeat;animation:hb-floor 22s ease-in-out infinite alternate}
@keyframes hb-floor{0%{transform:translateX(-2%) scaleY(1)}50%{transform:translateX(1.5%) scaleY(1.08)}100%{transform:translateX(3%) scaleY(.96)}}

/* Code panels: decorative and aria-hidden; they type quickly (0.45 s per line, 0.55 s apart). */
.hb-code{position:absolute;z-index:4;pointer-events:none;font:500 15px/1.6 var(--dm-font-mono);color:var(--dm-line);background:color-mix(in srgb,var(--dm-ink) 82%,transparent);border:1px solid color-mix(in srgb,var(--dm-cyan-500) 45%,transparent);border-radius:var(--dm-radius-card);padding:var(--dm-space-12) var(--dm-space-16);box-shadow:0 0 24px color-mix(in srgb,var(--dm-cyan-500) 25%,transparent),inset 0 0 18px color-mix(in srgb,var(--dm-cyan-500) 8%,transparent);animation:hb-bob 11s ease-in-out infinite}
.hb-code.hb-off{visibility:hidden}
/* Bottom right where the artwork was (owner Q68); kept clear of the motion control. */
.hb-agent{right:max(2%,64px);bottom:6%;width:calc(37ch + 30px);font-size:14px}
.hb-tests{right:1.2%;top:2%;width:max-content;animation-delay:-3s}
.hb-line{display:block;white-space:pre}
.hb-line:nth-child(2){--hb-d:.55s}.hb-line:nth-child(3){--hb-d:1.1s}.hb-line:nth-child(4){--hb-d:1.65s}
/* Typing: the clip box slides in while its text slides back, so only transforms move. */
.hb-line>span{display:inline-block;vertical-align:top;overflow:hidden;animation:hb-reveal .45s steps(36,end) var(--hb-d,0s) both}
.hb-line>span>span{display:inline-block;animation:hb-unreveal .45s steps(36,end) var(--hb-d,0s) both}
.hb-retype .hb-line>span{animation-name:hb-reveal2}.hb-retype .hb-line>span>span{animation-name:hb-unreveal2}
.hb-code .k{color:var(--dm-violet-500)}.hb-code .f{color:var(--dm-cyan-500)}.hb-code .s{color:var(--dm-lime-500)}.hb-code .c{color:var(--dm-muted)}
.hb-code::after{content:"";display:inline-block;width:8px;height:16px;background:var(--dm-lime-500);vertical-align:-2px;animation:hb-cursor 1s steps(1) infinite}
@keyframes hb-reveal{from{transform:translateX(-100%)}}@keyframes hb-reveal2{from{transform:translateX(-100%)}}
@keyframes hb-unreveal{from{transform:translateX(100%)}}@keyframes hb-unreveal2{from{transform:translateX(100%)}}
@keyframes hb-cursor{50%{opacity:0}}
@keyframes hb-bob{50%{transform:translateY(-6px)}}

/* Motion control (owner Q65): a soft round icon, bottom right, 16 px inset. */
.hero[data-hero="b"] .hb-toggle{display:grid;place-items:center;position:absolute;z-index:5;right:10px;bottom:10px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--dm-white);cursor:pointer}
.hb-toggle::before{content:"";position:absolute;inset:6px;border-radius:50%;background:color-mix(in srgb,var(--dm-ink) 55%,transparent);border:1px solid color-mix(in srgb,var(--dm-white) 40%,transparent)}
.hb-toggle svg{position:relative;width:14px;height:14px;fill:currentColor;opacity:.7}
.hb-toggle:hover svg,.hb-toggle:focus-visible svg{opacity:1}
.hb-toggle .hb-i-play,.hb-toggle[aria-pressed="true"] .hb-i-pause{display:none}
.hb-toggle[aria-pressed="true"] .hb-i-play{display:inline}
.hb-toggle:focus-visible{outline:var(--dm-focus-width) solid var(--dm-lime-500);outline-offset:0;box-shadow:0 0 0 calc(var(--dm-focus-width) * 2) var(--dm-ink)}

/* Paused (control, off-screen, hidden tab): everything holds; code shows its final text. */
.hero[data-hero="b"]:not(.hb-run) *,.hero[data-hero="b"]:not(.hb-run) *::before,.hero[data-hero="b"]:not(.hb-run) *::after{animation-play-state:paused!important}
.hero[data-hero="b"]:not(.hb-run) .hb-line *{animation:none!important}
/* Reduced motion: nothing moves; no zoom, rings or travelling lights. */
.hero[data-hero="b"][data-b-static="true"] *,.hero[data-hero="b"][data-b-static="true"] *::before,.hero[data-hero="b"][data-b-static="true"] *::after{animation:none!important;transition:none!important}
.hero[data-hero="b"][data-b-static="true"] .hb-ring,.hero[data-hero="b"][data-b-static="true"] .hb-dot{display:none}
@media(prefers-reduced-motion:reduce){.hero[data-hero="b"] .hb-toggle{display:none}}

/* Phone (v10): the photo sits behind the copy like hero A. The lime node breathes, 6 sparks rise and (owner Q117)
   the photo zooms slowly, with 6 twinkling nodes and 5 travelling dots (.hb-m) clear of the headline.
   (Q129: blue Home eyebrow removed on phone, live 56px header gap, lead margin compensates.) */
@media(max-width:767px){
 .hero[data-hero="b"]{min-height:745px}
 .hero[data-hero="b"]>.wrap{padding-top:56px;padding-bottom:40px}
 .hero[data-hero="b"] .copy{max-width:none}
 .hero[data-hero="b"] .copy>.eyebrow{display:none}
 .hero[data-hero="b"] .copy>h1{font-size:44px;width:fit-content;max-width:257px;margin:0}
 /* Q132: glyph-local dark shadows keep type readable without a panel cutting the hand's lime glow. */
 .hero[data-hero="b"] .copy>h1{position:relative;text-shadow:0 2px 8px var(--dm-ink),0 0 16px var(--dm-ink)}
 .hero[data-hero="b"] .copy>h1::before{content:none}
 .hero[data-hero="b"] .copy>h1 em{text-shadow:0 1px 4px var(--dm-ink),0 0 18px color-mix(in srgb,var(--dm-lime-500) 55%,transparent),0 0 42px color-mix(in srgb,var(--dm-lime-500) 35%,transparent)}
 .hero[data-hero="b"] .copy>.lead{font-size:18px;max-width:none;margin:196px 0 24px}
 .hero[data-hero="b"] .ctas{width:100%}
 .hero[data-hero="b"] .ctas .btn{flex:1 1 100%;justify-content:center;min-height:48px;font-size:17px}
 .hero[data-hero="b"] .resp{font-size:15px}
 .hb-art{inset:auto;left:23px;top:75px;width:553px;height:369px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%),linear-gradient(180deg,transparent,#000 12%,#000 80%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%),linear-gradient(180deg,transparent,#000 12%,#000 80%,transparent);mask-composite:intersect}
 .hb-fade{background:linear-gradient(180deg,var(--dm-ink) 0,color-mix(in srgb,var(--dm-ink) 85%,transparent) 40px,color-mix(in srgb,var(--dm-ink) 40%,transparent) 110px,transparent 180px),linear-gradient(90deg,color-mix(in srgb,var(--dm-ink) 85%,transparent) 0%,color-mix(in srgb,var(--dm-ink) 35%,transparent) 45%,transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--dm-ink) 40%,transparent) 45px,transparent 185px,transparent 355px,color-mix(in srgb,var(--dm-ink) 70%,transparent) 411px,var(--dm-ink) 481px)}
 .hb-floor{height:30%;bottom:0}
 .hb-code,.hb-ring,.hb-dot:not(.hb-m),.hb-tw:not(.hb-m),.hero[data-hero="b"] .fx .gridfx,.hero[data-hero="b"] .fx .paths,.hero[data-hero="b"] .fx .trace,.hero[data-hero="b"] .fx .hb-extra{display:none}
 .hb-streak,.hb-fl,.hb-blink,.hb-floor{animation:none}
}
/* Q129: keep phone landscape in the same mobile treatment as the live site. */
@media(max-height:500px) and (max-width:940px) and (orientation:landscape){
 .hero[data-hero="b"]>.wrap{padding-top:22px}
 .hero[data-hero="b"] .copy>.eyebrow{display:none}
 .hero[data-hero="b"] .copy>h1{margin-top:0}
}
/* Preserve the phone photo's paragraph clearance when the top inset contracts by 34px. */
@media(max-height:500px) and (max-width:767px) and (orientation:landscape){
 .hero[data-hero="b"] .copy>.lead{margin-top:230px}
}
/* The check mark is decorative and drawn in the system mono stack; CSS content keeps it out of the Inter subset (site fonts unchanged). */
.hb-check::before{content:"\2713"}