/* Cinematic B2B background — an isolated fixed layer, never intercepting clicks. */
:root{--scene-brightness:1;--scroll-progress:0}
html{overflow-x:clip}
body{overflow-x:clip}
#cinematic-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 72% 18%,rgba(41,194,209,.10),transparent 44%),
  radial-gradient(ellipse at 80% 80%,rgba(210,156,67,.09),transparent 42%)}
#cinematic-scene canvas{width:100%;height:100%;display:block;position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
body.scene-ready #cinematic-scene canvas{opacity:.5}
.scene-fallback{position:absolute;inset:0;opacity:.5;transform:translateZ(0);will-change:opacity}
.scene-fallback img{position:absolute;width:min(93vw,1350px);height:auto;max-width:none;right:max(-1.5vw,-24px);top:clamp(0px,2vh,35px);
  transform-origin:68% 42%;transform:translate3d(var(--fx,0px),var(--fy,0px),0) rotate(var(--fr,-5deg)) scale(var(--fs,1));
  opacity:var(--fo,.82);filter:drop-shadow(0 30px 38px rgba(0,0,0,.17));will-change:transform,opacity}
.scene-fallback .scene-bloom{filter:blur(28px) saturate(1.2);mix-blend-mode:screen;opacity:var(--fg,.16)}
body.scene-ready .scene-fallback{opacity:0;transition:opacity .9s}
.scene-aurora,.scene-mist,.scene-grain{position:absolute;inset:0;will-change:transform,opacity}
.scene-aurora{background:radial-gradient(circle at 75% 28%,rgba(20,236,246,.16),transparent 27%),
  radial-gradient(circle at 78% 67%,rgba(255,204,109,.17),transparent 24%);filter:blur(45px);mix-blend-mode:screen;opacity:.8}
.scene-mist{background:radial-gradient(ellipse at 78% 44%,rgba(255,255,255,.22),transparent 32%);filter:blur(65px);opacity:.36}
.scene-grain{background-image:radial-gradient(rgba(0,0,0,.23) .5px,transparent .8px);background-size:12px 12px;opacity:.035}
/* Lift content above the scene; keep enough translucency to see the kinetic object. */
/* Keep the sticky header's higher stacking level above scrolling content. */
.preview,main,footer{position:relative;z-index:2}
header{position:sticky;background:rgba(244,243,235,.85);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}
.preview{background:rgba(223,233,250,.84)}
.provider,.brief,.ad,.result,.end,.note,.hero-art{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.provider,.brief{background:rgba(255,255,255,.91)}
.hero-art{background:rgba(21,59,56,.94)}
.ad{background:rgba(236,239,229,.92)}
.end{background:rgba(229,234,216,.93)}
.note{background:rgba(236,239,226,.93)}
.result{background:rgba(225,233,205,.93)}
footer{background:rgba(12,44,42,.95)}
@media(min-width:721px){.hero{min-height:620px;align-items:center}.hero-art{box-shadow:12px 12px 0 rgba(227,230,217,.8)}}
@media(max-width:980px){.scene-fallback img{width:120vw;right:-12vw;top:12vh}}
@media(max-width:720px){.scene-fallback img{width:160vw;right:-43vw;top:18vh;opacity:calc(var(--fo,.82)*.75)}
 .scene-aurora{opacity:.55;filter:blur(32px)}.scene-mist{opacity:.23}
 .hero-art{background:rgba(21,59,56,.96)}.provider,.brief,.ad,.result,.end,.note{background:rgba(255,255,255,.94)}
 footer{background:rgba(12,44,42,.97)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}
 #cinematic-scene canvas,.scene-fallback,.scene-fallback img{transition:none!important;animation:none!important}
 #cinematic-scene canvas{opacity:0!important}
 body.scene-ready .scene-fallback{opacity:.5!important}}