/* BLUE JODAL: page-scoped visual layer; shared site components stay independent. */
.bluejodal-page { --bj-dark: #070c19; --bj-dark-3: #0d1528; --bj-dark-line: #202a40; --bj-accent: #315cff; }
.bluejodal-page #bj-main { overflow: clip; }
.bluejodal-page #bj-main :is(h1,h2,h3,p,li) { word-break: keep-all; overflow-wrap: anywhere; }
.bluejodal-page #bj-main :is(h1,h2) { text-wrap: balance; }
.bluejodal-page #bj-main p { text-wrap: pretty; }
.bluejodal-page #bj-main > section { scroll-margin-top: 112px; }
.bluejodal-page .container { width: min(100% - 100px, 1320px); }
.bj-product-nav { background: #070c19; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 24px max(50px,calc((100vw - 1320px)/2)); border-bottom: 1px solid #ffffff18; gap: 30px; }
.bj-product-nav a { color: inherit; }
.bj-wordmark { display: flex; align-items: center; font: 700 23px var(--mono); letter-spacing: -.06em; }
.bj-wordmark span { font-weight: 500; margin-left: 5px; }
.bj-wordmark i { color: #82a4ff; font-style: normal; margin-left: 12px; }
.bj-product-nav > div { display: flex; gap: 34px; color: #b0bbd0; font-size: 14px; }
.bj-product-nav > div a:hover { color: #fff; }
.bj-nav-start { border: 1px solid #ffffff30; border-radius: 50px; padding: 9px 19px; font-size: 14px; font-weight: 600; }
.bj-nav-start span { margin-left: 16px; }
.bluejodal-page section.bj-hero { position: relative; isolation: isolate; padding: 0 0 92px; background: #070c19; color: #fff; }
.bj-orbit { position: absolute; inset: 0 0 auto auto; width: min(1100px,80vw); height: 760px; z-index: -2; overflow: hidden; pointer-events: none; transform: translateY(var(--bj-orbit-y,0px)); }
.bj-orbit img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .88; }
.bj-orbit::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#070c19 0%,transparent 40%),linear-gradient(0deg,#070c19 0%,transparent 25%,transparent 85%,#070c1980); }
.bj-hero-grid { position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(#4c77d808 1px,transparent 1px),linear-gradient(90deg,#4c77d808 1px,transparent 1px); background-size: 90px 90px; mask-image: linear-gradient(90deg,#000,transparent 70%); }
.bj-hero__top { text-align: left; margin: 0; max-width: 860px; padding: 94px 0 64px; position: relative; }
.bj-eyebrow { background: #15213a90; border: 1px solid #6380c437; color: #b7caff; font-size: 14px; padding: 7px 12px; }
.bj-eyebrow i { background: #7fbaff; box-shadow: 0 0 12px #487dff; }
.bj-hero__label { margin-top: 32px; color: #8396bb; font: 500 14px var(--mono); letter-spacing: .18em; }
.bj-hero h1 { margin: 16px 0 0; color: #f6f8ff; font-size: clamp(44px,5.6vw,78px); font-weight: 700; letter-spacing: -.065em; line-height: 1.17; max-width: 900px; text-wrap: initial !important; }
.bj-hero h1 .accent { color: #73a2ff; background: linear-gradient(100deg,#edf5ff,#7aaaff 45%,#4267ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bj-hero__lead { margin: 27px 0 0; max-width: 445px; color: #a7b5cf; font-size: 16px; line-height: 1.85; }
.bj-hero__actions { justify-content: flex-start; margin-top: 31px; gap: 10px; }
.bj-btn { border-radius: 7px; font-size: 14px; padding: 16px 22px; }
.bj-hero .bj-btn--primary { background: #4165ff; box-shadow: 0 8px 40px #2d5bff35; }
.bj-hero .bj-btn--primary::after { content: '↗'; margin-left: 18px; font-size: 18px; }
.bj-hero .bj-btn--line { color: #d4ddf0; border-color: #8299c73a; background: #13203a55; }
.bj-hero .bj-btn--line:hover { background: #25375a; }
.bj-hero__note { text-align: left; font-size: 14px; color: #8494b2; margin-top: 19px; }
.bj-scroll-cue { margin: 0 0 48px; display: flex; align-items: center; gap: 20px; color: #7a8cab; font: 14px var(--mono); letter-spacing: .12em; }
.bj-scroll-cue i { font-size: 20px; font-style: normal; color: #c1d2f7; }
.bj-scroll-cue span:last-child { margin-left: auto; }
.bj-preview-label { display: flex; justify-content: space-between; color: #8ba3d1; font: 14px var(--mono); letter-spacing: .08em; margin-bottom: 18px; }
.bj-preview-label span:last-child { font-family: var(--sans); letter-spacing: 0; }
.bj-mock { margin: 0; perspective: 1600px; }
.bj-mock__frame { transform: perspective(1800px) rotateX(var(--bj-preview-tilt,0deg)) scale(var(--bj-preview-scale,1)); transform-origin: center top; border: 1px solid #738fe344; box-shadow: 0 0 80px #2e5cff24,0 40px 100px #0006; border-radius: 12px; }
.bj-mock__caption { color: #8799bb; margin-top: 25px; }
.bj-hero-stage { position: relative; isolation: isolate; }
.bj-hero-signals,.bj-hero-glow,.bj-hero-hud { display: none; }
.bj-preview-open { display: flex; width: fit-content; margin: 20px auto 0; }
.bluejodal-page section.bj-workflow { padding: 0; background: #f3f5fa; }
.bj-workflow__sticky { padding: 100px 0; position: relative; }
.bj-workflow__layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.bj-workflow h2 { font-size: clamp(30px,3vw,43px); line-height: 1.4; margin: 23px 0; font-weight: 750; letter-spacing: -.05em; }
.bj-workflow h2 span { color: #365cef; }
.bj-workflow__copy > p { color: #66718b; line-height: 1.8; font-size: 16px; max-width: 420px; }
.bj-flow-steps { margin-top: 40px; }
.bj-flow-steps button { display: flex; align-items: center; gap: 22px; background: transparent; border: 0; border-bottom: 1px solid #dce2ed; border-radius: 0; width: 100%; text-align: left; padding: 22px 0; font: 17px var(--sans); color: #8390a8; cursor: pointer; transition: color .3s; }
.bj-flow-steps button > span { font: 14px var(--mono); }
.bj-flow-steps button b { font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.bj-flow-steps button i { margin-left: auto; font-style: normal; opacity: 0; }
.bj-flow-steps button[aria-pressed=true] { color: #315cff; border-bottom-color: #315cff; }
.bj-flow-steps button[aria-pressed=true] i { opacity: 1; }
.bj-flow-demo { color: #eaf0ff; background: radial-gradient(ellipse at 80% 0%,#1b3160,transparent 60%),#0c1428; border: 1px solid #344566; border-radius: 22px; padding: 26px 30px; box-shadow: 0 35px 70px -30px #23396370; transform: translateY(var(--bj-demo-y,0px)); }
.bj-demo-top,.bj-demo-bottom { display: flex; justify-content: space-between; gap: 12px; font: 14px var(--mono); letter-spacing: .07em; color: #8e9fbe; }
.bj-demo-top { padding-bottom: 24px; border-bottom: 1px solid #ffffff12; }
.bj-demo-top span:first-child { color: #dbe5ff; font-weight: 700; }
.bj-demo-top i { display: inline-block; width: 6px; height: 6px; background: #82b9ff; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 10px #58a2ff; }
.bj-demo-scene { min-height: 390px; padding: 30px 0 22px; }
.bj-demo-scene[hidden] { display: none; }
.bj-demo-index { color: #6f91d0; font: 14px var(--mono); letter-spacing: .13em; }
.bj-demo-scene h3 { font-size: clamp(19px,2.1vw,28px); color: #f1f5ff; margin: 18px 0 25px; letter-spacing: -.03em; }
.bj-demo-search { display: flex; gap: 14px; align-items: center; padding: 17px; background: #16223d; border: 1px solid #537aff; border-radius: 8px; font-size: 20px; box-shadow: 0 0 25px #4165ff18; }
.bj-demo-search > span:first-child { color: #85a5fa; font-size: 28px; line-height: 1; }
.bj-demo-search > span:last-child { margin-left: auto; color: #7991bb; }
.bj-demo-search i { width: 1px; height: 22px; background: #85a5ff; }
.bj-demo-tags { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
.bj-demo-tags span { padding: 7px 12px; color: #b5c8f5; background: #1d2c49; border: 1px solid #37486a; border-radius: 5px; font-size: 14px; }
.bj-demo-save { margin-top: 28px; font-size: 14px; color: #9eafd1; display: flex; gap: 9px; align-items: center; }
.bj-demo-save > span { color: #80d7bb; font-size: 16px; }
.bj-demo-result { display: flex; gap: 13px; align-items: center; padding: 13px; background: #19253e; border: 1px solid #2a3c60; border-radius: 8px; margin: 10px 0; }
.bj-demo-result > span { color: #ffb2a7; font: 14px var(--mono); background: #ff826615; padding: 6px; border-radius: 4px; white-space: nowrap; }
.bj-demo-result b { font-size: 14px; font-weight: 600; }
.bj-demo-result small { display: block; font-size: 14px; color: #9daecd; margin-top: 5px; }
.bj-demo-result i { margin-left: auto; font-style: normal; color: #839bd6; }
.bj-demo-bell { float: right; display: grid; place-items: center; width: 52px; height: 52px; color: #fff; background: #3e66ff; border-radius: 16px; font-size: 27px; box-shadow: 0 0 30px #3e66ff60; }
.bj-notification { padding: 22px; border: 1px solid #4a679b; border-radius: 12px; background: #1e3050; }
.bj-notification > span { display: flex; justify-content: space-between; gap: 8px; font: 14px var(--mono); color: #85b6ff; margin-bottom: 15px; }
.bj-notification i { font-style: normal; color: #94a4c0; font-size: 14px; }
.bj-notification b { font-size: 15px; }
.bj-notification p { font-size: 14px; color: #b3c3df; line-height: 1.7; margin: 10px 0 0; }
.bj-demo-bottom { border-top: 1px solid #ffffff12; padding-top: 22px; letter-spacing: 0; }
.bj-demo-bottom span:first-child { font-family: var(--sans); }
.bj-flow-track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #dfe5f2; }
.bj-flow-track i { display: block; height: 100%; background: #365fff; transform-origin: left; transform: scaleX(var(--bj-flow-progress,.05)); }
@media (min-width: 961px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
    .bj-motion .bj-workflow { height: 240vh; }
    .bj-motion .bj-workflow__sticky { position: sticky; top: 82px; min-height: calc(100vh - 82px); display: flex; align-items: center; padding: 50px 0; }
    .bj-motion .bj-demo-scene:not([hidden]) { animation: bj-scene-in .45s ease both; }
}
@keyframes bj-scene-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.bluejodal-page .bj-head { max-width: 860px; }
.bluejodal-page .bj-head h2 { font-size: clamp(30px,3.6vw,49px); letter-spacing: -.045em; line-height: 1.3; }
.bluejodal-page .bj-head p { max-width: 610px; }
.bluejodal-page section.bj-why { padding-top: 112px; }
.bj-why__col { border-radius: 12px; padding: 35px; }
.bj-why__col--after { background: linear-gradient(135deg,#1f3670,#142343); border-color: #4967a0; box-shadow: 0 0 60px #325eff16; }
.bj-band__grid { background: transparent; border: 0; border-radius: 0; gap: 0; }
.bj-band__item { background: transparent; border-right: 1px solid #28334c; padding: 20px 26px; }
.bj-band__item:last-child { border: 0; }
.bj-band__item b { font-family: 'Space Grotesk', var(--sans); font-size: clamp(40px,5.8vw,72px); font-weight: 500; line-height: 1.25; letter-spacing: -.06em; }
.bj-band__item strong { color: #a7bcf5; font-size: 14px; margin-top: 10px; }
.bj-band__item span { color: #97a4c0; }
.bluejodal-page section.bj-data { background: #f5f7fb; padding: 120px 0; }
.bj-stages { gap: 26px; position: relative; }
.bj-stage { gap: 16px; }
.bj-stage__h { flex-wrap: wrap; margin-bottom: 12px; gap: 8px; }
.bj-stage__h em { width: 100%; font-size: 14px; }
.bj-stage__h b { font-size: 19px; white-space: normal; }
.bj-stage__h span { font-size: 14px; }
.bj-dcard { padding: 25px; border-color: #e0e6f0; border-radius: 10px; box-shadow: 0 5px 20px #11275103; }
.bj-dcard__h em { color: #a0b0d3; font-size: 22px; font-weight: 500; }
.bj-dcard:hover { transform: translateY(-5px); }
.bluejodal-page #features { background: #080e1c; color: #dce6fa; padding: 120px 0; }
#features .bj-kicker { color: #7d9fff; }
#features .bj-head h2 { color: #f2f5ff; }
#features .bj-head p { color: #9aaac6; }
.bj-feats { background: transparent; gap: 18px; border: 0; border-radius: 0; }
.bj-feat { padding: 32px; border: 1px solid #25314a !important; border-radius: 12px; background: linear-gradient(135deg,#152039,#0e172b); position: relative; overflow: hidden; transition: border-color .3s,transform .3s; }
.bj-feat:hover { background: #182644; border-color: #5e80d5 !important; transform: translateY(-5px); }
.bj-feat h3 { color: #ecf2ff; margin-top: 18px; font-size: 21px; }
.bj-feat p { color: #a4b3ce; }
.bj-feat__gain { color: #93b2ff; border-color: #2b3955; margin-top: 14px; padding-top: 18px; }
.bj-feat .bj-chip { background: #1d2b47; border-color: #3b4b6b; color: #b5c5e7; }
.bj-feat .bj-chip--on { background: #24438a; border-color: #456bd1; color: #d5e4ff; }
.bj-feat .bj-chip--red { background: #683b3b; border-color: #855153; color: #ffd0c9; }
.bluejodal-page section.bj-plus { background: #edf2fb; padding: 130px 0; }
.bj-plus__text h2 { font-size: clamp(29px,3.2vw,43px); }
.bj-plus__panel { transform: rotate(-2deg); border-radius: 14px; box-shadow: 0 30px 70px -30px #1a3d8860; }
.bj-plus__row { padding: 20px 14px; }
.bj-who__item { border-radius: 10px; border-top: 3px solid #4165ff; }
.bj-start { position: relative; }
.bj-step { border-radius: 12px; }
.bj-step__no { width: 40px; height: 40px; font-size: 17px; }
.bj-faq { max-width: 960px; }
.bj-faq__item { border-radius: 8px; }
.bj-cta__box { position: relative; isolation: isolate; overflow: hidden; background: #0a1740; border: 1px solid #4269b2; border-radius: 18px; padding: 100px 35px; }
.bj-cta__box::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#0b173ce8,#0b173ca6),url('/assets/img/bluejodal/opportunity-documents-v3.webp') center 55%/cover; transform: scale(1.08); }
.bj-cta__box h2 { font-size: clamp(30px,4vw,50px); }
.bj-related a { border-radius: 10px; }
.bj-reveal { transition: opacity .65s ease,translate .65s cubic-bezier(.2,.7,.3,1); }
.bj-reveal.is-pending { opacity: 0; translate: 0 28px; }
.bluejodal-page #bj-main :is(a,button,summary):focus-visible { outline: 3px solid #7ca7ff; outline-offset: 5px; }
@media (max-width: 1100px) { .bj-workflow__layout { gap: 40px; } .bj-flow-demo { padding: 24px; } .bj-product-nav { padding-inline: 40px; } }
@media (max-width: 960px) {
    .bluejodal-page .container { width: min(100% - 48px,760px); }
    .bj-product-nav { padding: 20px 24px; }
    .bj-product-nav > div { gap: 20px; }
    .bj-hero__top { padding-top: 80px; max-width: 680px; }
    .bj-hero h1 { font-size: clamp(45px,7.5vw,66px); }
    .bj-orbit { width: 95vw; right: -20%; opacity: .65; }
    .bj-workflow__layout { grid-template-columns: 1fr; gap: 32px; }
    .bj-workflow__sticky { padding: 75px 0; }
    .bj-workflow__copy > p { max-width: 580px; }
    .bj-flow-steps { display: flex; gap: 18px; margin-top: 24px; }
    .bj-flow-steps button { gap: 10px; font-size: 14px; padding: 16px 0; }
    .bj-flow-steps button i { display: none; }
    .bj-flow-demo { max-width: 650px; width: 100%; margin: auto; }
    .bj-demo-scene { min-height: 390px; }
    .bj-band__grid { grid-template-columns: repeat(2,1fr); row-gap: 28px; }
    .bj-band__item:nth-child(2) { border-right: 0; }
    .bj-stages { grid-template-columns: 1fr; }
    .bj-stage { display: grid; grid-template-columns: 1fr 1fr; }
    .bj-stage__h { grid-column: 1/-1; margin-top: 24px; }
}
@media (max-width: 600px) {
    .bluejodal-page .container { width: calc(100% - 40px); }
    .bj-product-nav { padding: 17px 20px; gap: 12px; }
    .bj-wordmark { font-size: 18px; }
    .bj-product-nav > div { display: none; }
    .bj-nav-start { font-size: 14px; padding: 8px 12px; }
    .bj-nav-start span { margin-left: 7px; }
    .bluejodal-page section.bj-hero { padding-bottom: 50px; }
    .bj-hero__top { padding-top: 56px; padding-bottom: 35px; }
    .bj-eyebrow { font-size: 14px; padding: 6px 10px; }
    .bj-hero__label { font-size: 14px; margin-top: 34px; }
    .bj-hero h1 { font-size: clamp(35px,9.3vw,55px); line-height: 1.23; }
    .bj-hero__lead { font-size: 14px; line-height: 1.8; max-width: 340px; margin-top: 22px; }
    .bj-orbit { width: 720px; height: 560px; top: 60px; right: -340px; opacity: .42; }
    .bj-hero__actions { width: 100%; gap: 10px; margin-top: 27px; }
    .bj-hero .bj-btn { font-size: 14px; padding: 14px 18px; }
    .bj-hero__note { font-size: 14px; }
    .bj-scroll-cue { margin-bottom: 35px; font-size: 14px; }
    .bj-preview-label { font-size: 14px; gap: 10px; }
    .bj-preview-label span:last-child { font-size: 14px; }
    .bj-mock__frame { border-radius: 6px; }
    .bj-mock__caption { font-size: 14px; }
    .bj-workflow h2 { font-size: 28px; }
    .bj-workflow__copy > p { font-size: 14px; }
    .bj-flow-steps { gap: 12px; }
    .bj-flow-steps button { flex-direction: column; align-items: flex-start; font-size: 14px; gap: 7px; line-height: 1.6; }
    .bj-flow-demo { padding: 22px; border-radius: 14px; }
    .bj-demo-scene { min-height: 390px; padding-top: 30px; }
    .bj-demo-scene h3 { font-size: 22px; }
    .bj-demo-top { font-size: 14px; }
    .bj-demo-bottom { font-size: 14px; }
    .bj-demo-search { font-size: 14px; gap: 10px; }
    .bj-demo-search > span:last-child { display: none; }
    .bj-demo-result { gap: 8px; padding: 14px 10px; }
    .bj-demo-result b { font-size: 14px; }
    .bj-demo-bell { width: 40px; height: 40px; font-size: 22px; border-radius: 10px; }
    .bj-demo-save { font-size: 14px; }
    .bj-kicker { font-size: 14px; }
    .bluejodal-page section.bj-why,.bluejodal-page section.bj-data,.bluejodal-page #features,.bluejodal-page section.bj-plus { padding: 75px 0; }
    .bluejodal-page .bj-head h2 { font-size: 30px; }
    .bj-why__col { padding: 25px; }
    .bj-band__item { padding: 12px 15px; }
    .bj-band__item b { font-size: 40px; }
    .bj-band__item strong { font-size: 14px; }
    .bj-band__item span { font-size: 14px; }
    .bj-stage { grid-template-columns: 1fr; }
    .bj-feats { gap: 12px; }
    .bj-feat { padding: 26px; }
    .bj-plus__panel { transform: none; }
    .bj-cta__box { padding: 60px 22px; }
    .bj-cta__actions { width: 100%; }
}
/* A pinned, reversible opening sequence. JS enables it only when the copy fits. */
.bluejodal-page section.bj-hero.bj-cinematic { height: 245svh; padding: 0; }
.bj-cinematic .bj-hero-stage { position: sticky; top: var(--bj-header-height,85px); height: calc(100svh - var(--bj-header-height,85px)); overflow: clip; background: #070c19; }
.bj-cinematic .bj-hero-stage > .container { position: relative; height: 100%; z-index: 3; perspective: 1800px; }
.bj-cinematic .bj-orbit { z-index: 0; width: 100%; height: 100%; right: 0; top: 0; opacity: var(--bj-orbit-opacity,1); transform: none; overflow: visible; }
.bj-cinematic .bj-orbit img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transform-origin: 72% 50%; transform: translate3d(var(--bj-orbit-x,0px),var(--bj-orbit-lift,0px),0) rotate(var(--bj-orbit-rotation,0deg)) scale(var(--bj-orbit-scale,1)); will-change: transform; }
.bj-cinematic .bj-orbit::after { background: linear-gradient(90deg,#070c19 0%,#070c19c9 23%,#070c1920 55%,transparent),linear-gradient(0deg,#070c19,transparent 25%,transparent 82%,#070c1980); }
.bj-cinematic .bj-hero-grid { z-index: 1; opacity: .7; transform: perspective(600px) rotateX(var(--bj-grid-tilt,0deg)) scale(1.1); transform-origin: center bottom; }
.bj-cinematic .bj-hero-glow { display: block; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: var(--bj-glow-opacity,0); background: radial-gradient(ellipse at 60% 52%,#7caeff48, #315fff15 35%,transparent 70%); }
.bj-cinematic .bj-hero__top { position: absolute; top: var(--bj-copy-center,45%); left: 0; width: 100%; padding: 0; transform: translate3d(var(--bj-copy-x,0px),calc(-50% + var(--bj-copy-y,0px)),0) scale(var(--bj-copy-scale,1)); transform-origin: left center; opacity: var(--bj-copy-opacity,1); will-change: transform,opacity; }
.bj-cinematic .bj-scroll-cue { display: none; }
.bj-cinematic .bj-hero-signals { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--bj-signals-opacity,.8); }
.bj-signal { position: absolute; display: flex; align-items: center; gap: 14px; border: 1px solid #92b6ff55; border-radius: 12px; padding: 16px 22px; background: linear-gradient(120deg,#284b8370,#0c183b9e); box-shadow: 0 16px 50px #0005,inset 0 1px #b7cdff1c; backdrop-filter: blur(14px); color: #e5efff; transform: translate3d(var(--bj-signal-x,0px),var(--bj-signal-y,0px),0) rotate(var(--bj-signal-rotation,0deg)); }
.bj-signal i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #99c0ff55; border-radius: 8px; color: #a8cfff; font-size: 22px; font-style: normal; }
.bj-signal small { display: block; font: 14px var(--mono); letter-spacing: .14em; color: #98b7ec; margin-bottom: 6px; }
.bj-signal b { font-size: 16px; font-weight: 600; }
.bj-signal > span { color: #94e3d0; margin-left: 20px; }
.bj-signal b span { font: 14px var(--mono); margin-left: 9px; color: #99b7e6; }
.bj-signal--match { right: 22%; top: 12%; }
.bj-signal--alert { right: 3%; top: 60%; --bj-signal-x: var(--bj-card-x,0px); --bj-signal-y: var(--bj-card-y,0px); --bj-signal-rotation: var(--bj-card-angle,0deg); }
.bj-signal--saved { right: 30%; bottom: 20%; --bj-signal-x: calc(var(--bj-card-x,0px) * -1); --bj-signal-y: calc(var(--bj-card-y,0px) * -1); }
.bj-signal--match { --bj-signal-x: calc(var(--bj-card-x,0px) * -.5); --bj-signal-y: calc(var(--bj-card-y,0px) * -1.5); --bj-signal-rotation: calc(var(--bj-card-angle,0deg) * -1); }
.bj-cinematic .bj-mock { position: absolute; left: 50%; top: 46%; width: 100%; margin: 0; opacity: var(--bj-screen-opacity,0); transform: translate3d(-50%,calc(-50% + var(--bj-screen-y,55vh)),0) rotateX(var(--bj-screen-tilt,45deg)) rotateZ(var(--bj-screen-roll,-6deg)) scale(var(--bj-screen-scale,.6)); transform-origin: center; will-change: transform,opacity; }
.bj-cinematic .bj-mock__frame { transform: none; box-shadow: 0 0 0 1px #8fbcff30,0 0 100px #396aff48,0 45px 100px #0008; }
.bj-cinematic .bj-preview-label { font-size: 14px; color: #b2cdff; }
.bj-cinematic .bj-mock__caption { margin-top: 16px; }
.bj-cinematic .bj-preview-open { padding: 12px 24px; margin-top: 16px; }
.bj-cinematic .bj-preview-open::after { content: none; }
.bj-cinematic .bj-hero-hud { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; position: absolute; z-index: 5; bottom: calc(30px + var(--bj-hud-offset,0px)); left: max(50px,calc((100vw - 1320px)/2)); right: max(50px,calc((100vw - 1320px)/2)); }
.bj-hero-chapters { display: flex; gap: 26px; font: 14px var(--mono); letter-spacing: .08em; color: #647494; }
.bj-hero-chapters span { transition: color .3s; }
.bj-hero-chapters .is-active { color: #c3d8ff; }
.bj-hero-meter { height: 1px; background: #44587e55; }
.bj-hero-meter i { display: block; height: 100%; background: #96bbff; box-shadow: 0 0 10px #528cff; transform: scaleX(var(--bj-hero-progress,0)); transform-origin: left; }
.bj-hero-skip { padding: 11px 0 11px 15px; font: 14px var(--sans); background: none; border: 0; color: #becfee; cursor: pointer; }
.bj-hero-skip span { margin-left: 15px; display: inline-block; transform: rotate(var(--bj-skip-angle,0deg)); }
@media (max-width: 1100px) {
    .bj-signal--match { right: 9%; top: 9%; }
    .bj-signal--saved { right: 25%; bottom: 18%; }
    .bj-signal { padding: 12px 16px; }
}
@media (min-width: 701px) and (max-height: 820px) {
    .bj-cinematic h1 { font-size: clamp(44px,5.2vw,68px); }
    .bj-cinematic .bj-hero__label { margin-top: 24px; }
    .bj-cinematic .bj-hero__lead { margin-top: 20px; }
    .bj-cinematic .bj-hero__note { margin-top: 16px; }
}
@media (max-width: 700px) {
    .bluejodal-page section.bj-hero.bj-cinematic { height: 220svh; }
    .bj-cinematic .bj-orbit { opacity: var(--bj-orbit-opacity,1); }
    .bj-cinematic .bj-orbit img { width: 180%; max-width: none; margin-left: -42%; object-position: 75% center; transform-origin: 65% 50%; opacity: .6; }
    .bj-cinematic .bj-orbit::after { background: linear-gradient(90deg,#070c19db,transparent),linear-gradient(0deg,#070c19,transparent 30%,#070c1980); }
    .bj-cinematic .bj-hero__label { margin-top: 18px; }
    .bj-cinematic .bj-hero__lead { margin-top: 18px; }
    .bj-cinematic .bj-hero__actions { margin-top: 18px; gap: 8px; }
    .bj-cinematic .bj-hero__actions .bj-btn { padding-block: 12px; }
    .bj-cinematic .bj-hero__note { margin-top: 14px; }
    .bj-cinematic .bj-hero-signals { display: none; }
    .bj-cinematic .bj-hero-hud { left: 20px; right: 20px; bottom: calc(88px + var(--bj-hud-offset,0px)); gap: 12px; grid-template-columns: 1fr auto; }
    .bj-hero-chapters { gap: 13px; font-size: 14px; }
    .bj-hero-meter { position: absolute; bottom: -9px; left: 0; right: 0; }
    .bj-hero-skip { font-size: 14px; padding: 10px 0; white-space: nowrap; }
    .bj-hero-skip span { margin-left: 4px; }
    .bj-cinematic .bj-mock { top: 42%; }
    .bj-cinematic .bj-preview-label { display: block; text-align: center; font-size: 14px; margin-bottom: 23px; }
    .bj-cinematic .bj-preview-label span:last-child { display: block; font-size: 23px; font-weight: 700; margin-top: 14px; color: #eef4ff; text-wrap: balance; }
    .bj-cinematic .bj-mock__caption { font-size: 14px; text-align: center; line-height: 1.8; }
}
@media (max-width: 360px) {
    .bj-hero-chapters { font-size: 14px; }
    .bj-hero-chapters span:not(.is-active) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bluejodal-page { scroll-behavior: auto; }
    .bj-orbit,.bj-mock__frame,.bj-flow-demo,.bj-plus__panel { transform: none !important; }
    .bj-reveal { transition: none; }
    .bj-reveal.is-pending { opacity: 1; translate: none; }
    .bj-demo-scene { animation: none !important; }
}