/* SPB runtime performance/accessibility overrides. Does NOT import GPB global styles.
   Focus on cheap compositor motion; retain floating SPB header and page hierarchy. */
:root{scroll-behavior:smooth}
/* Never hide catalogue text or expanded panels while an observer waits.
   Hidden content on big sections was a visible source of "missing compounds". */
.reveal:not(.in-view),.js-ready .reveal:not(.in-view),.js-ready .card.reveal:not(.in-view){
  opacity:1!important;transform:none!important
}
.reveal.in-view{animation:spbContentEnter .45s ease-out both}
@keyframes spbContentEnter{from{opacity:.89;transform:translate3d(0,11px,0)}to{opacity:1;transform:none}}
.catalog-category,.catalog-category[open]{overflow:visible!important;contain:none!important}
.catalog-category[open] .compound-cloud{display:flex!important;visibility:visible!important;opacity:1!important;transform:none!important}
.catalog-category .compound-cloud span{animation:none!important;transition:background-color .15s ease,color .15s ease}
/* Massive translucent blurred layers are expensive on Windows desktop / mobile GPUs.
   Keep glass only on primary navigation and high-value panels, not every tiny tile. */
.catalog-category,.compound-cloud span,.spectrum-track span,.marquee-track span,
.ftx-stage,.ftx-evidence-grid article,.ftx-visit-grid article,.ftx-oem-demo,
.capability-flow article,.quality-bento article,.research-field-tile{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  will-change:auto!important
}
/* Keep low-overhead pointer feedback, remove constant perspective repaints. */
.platform-card,.product-feature-shine{
  transform:none!important;transform-style:flat!important;
  transition:box-shadow .22s ease,border-color .22s ease!important
}
/* Pause animated decorative layers when not near the viewport. */
.section:not(.spb-in-viewport) .motion-layer,
.section:not(.spb-in-viewport) .spectrum-track,
.section:not(.spb-in-viewport) .marquee-track,
.section:not(.spb-in-viewport) .ambient-media,
.section:not(.spb-in-viewport)::before,
.section:not(.spb-in-viewport)::after,
.ftx-hero:not(.spb-in-viewport) .ftx-orbit,
.hero:not(.spb-in-viewport) .hero-shade{
  animation-play-state:paused!important
}
.motion-layer{width:min(76vw,760px)!important;height:min(76vw,760px)!important;will-change:auto!important;filter:none!important}
.ambient-media{will-change:auto!important}
.spectrum-track span,.marquee-track span{box-shadow:none!important}
/* Huge blurred animated backgrounds on capabilities / manufacturing were causing
   continuous paints. Use a static or slow compositor gradient while retaining depth. */
.combined-capabilities .motion-layer,.combined-quality .motion-layer,
.combined-products .motion-layer,.wholesale-landing .motion-layer{opacity:.045!important}
.ftx-hero,.ftx-film,.ftx-workflow,.ftx-oem,.ftx-visits,.ftx-analytics{overflow:clip}
.ftx-stage img,.wholesale-media img{content-visibility:visible}
/* On smaller/less capable devices use layered gradients rather than continuous GPU work. */
@media(max-width:900px){
  .motion-layer,.ambient-media,.combined-quality::before,.combined-products::before,
  .research-platform::before,.research-platform::after,
  .ftx-hero-visual .ftx-orbit{animation:none!important}
  .marquee-track,.spectrum-track{animation-duration:65s!important}
  .platform-card,.product-feature-shine,.ftx-stage{transform:none!important}
  .site-header{backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
}
@media(max-width:600px){
  .section,.ftx-film,.ftx-workflow{overflow-wrap:break-word}
  .ftx-stage img{aspect-ratio:16/10}
  .motion-layer,.ambient-media{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .reveal,.reveal.in-view{animation:none!important;opacity:1!important;transform:none!important}
}


/* 2026-10-08: independent research columns and inexpensive ambient depth */
/* Research categories sit in independent vertical tracks: expanding 02 must not
   grow 01 or hide 03. Keep all compound names fully visible in both columns. */
.catalog-directory-grid.catalog-columns-ready{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-flow:row;
  align-items:start!important;
  gap:clamp(.65rem,1.1vw,1rem)!important;
}
.catalog-directory-grid.catalog-columns-ready>.catalog-directory-column{
  display:flex;flex-direction:column;align-items:stretch;
  min-width:0;gap:clamp(.65rem,1.1vw,1rem)
}
.catalog-directory-column>.catalog-category{
  display:block;
  align-self:stretch;
  min-width:0;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
  contain:none!important;
  margin:0;
  border-radius:22px;
  transition:border-color .2s ease,background-color .2s ease!important;
  transform:none!important;
}
.catalog-directory-column>.catalog-category[open]{
  overflow:visible!important;
  border-color:rgba(129,236,208,.32);
  background:linear-gradient(135deg,rgba(121,221,218,.07),rgba(163,133,237,.06));
}
.catalog-directory-column>.catalog-category:not([open])>.compound-cloud{
  display:none!important;
}
.catalog-directory-column>.catalog-category[open]>.compound-cloud{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  position:static!important;
  max-height:none!important;
  color:#e8e6f0;
  gap:.5rem;
  overflow:visible;
}
.catalog-directory-column>.catalog-category summary{
  min-height:70px;
  align-items:center;
  gap:.7rem;
  border-radius:20px;
}
.catalog-directory-column>.catalog-category summary>span{
  min-width:0;
  flex:1;
  line-height:1.42
}
.catalog-directory-column>.catalog-category summary>em{
  flex:none;
  white-space:nowrap
}
.catalog-directory-column .compound-cloud span{
  overflow-wrap:anywhere;
  color:#e0dce9;
}
.catalog-directory-column>.catalog-category[open] summary{
  border-bottom:1px solid rgba(255,255,255,.095);
  border-radius:20px 20px 0 0;
}
/* Subtle contrast and depth borrowed from the uploaded atmosphere reference, not
   its 3.3MB SingleFile page, embedded graphics or third-party JS/CSS. */
.catalog-directory,
.combined-capabilities,
.ftx-workflow,
.ftx-overview,
.ftx-visits,
.ftx-planning,
.company-profile{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse 62% 65% at 4% 10%,rgba(101,215,193,.105),transparent 70%),
    radial-gradient(ellipse 50% 58% at 97% 92%,rgba(162,128,244,.12),transparent 72%),
    linear-gradient(125deg,#101118 0%,#14131d 47%,#0c1118 100%)!important;
}
.catalog-directory,
.combined-capabilities,
.ftx-workflow{overflow:clip}
.catalog-directory>.container,
.combined-capabilities>.container,
.ftx-workflow>.container{
  position:relative;
  z-index:1;
}
/* One single compositor-animated, already-soft radial glow per selected section.
   Do not animate filter:blur, background-position or large image shaders. */
.catalog-directory::before,
.ftx-workflow::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:-12%;
  left:-8%;
  width:min(80vw,940px);
  height:70%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(119,217,206,.14) 0%,rgba(123,145,216,.055) 44%,transparent 70%);
  opacity:.7;
  transform:translate3d(0,0,0);
  animation:spbGentleAmbient 38s ease-in-out infinite alternate;
}
@keyframes spbGentleAmbient{
  from{transform:translate3d(-4%,1%,0) scale(.95)}
  to{transform:translate3d(10%,-6%,0) scale(1.08)}
}
.catalog-directory:not(.spb-in-viewport)::before,
.ftx-workflow:not(.spb-in-viewport)::before{
  animation-play-state:paused!important
}
/* Huge opacity/transform 'reveal' layers on large sections caused
   GPU repaints and could obscure content. Keep navigation and small hover
   transitions, but never animate the compound catalogue or page sections. */
.catalog-directory .reveal,
.catalog-directory .reveal.in-view,
.catalog-directory-grid .catalog-category,
.section-head.reveal.in-view,
.page-intro .reveal.in-view{
  animation:none!important;
  will-change:auto!important;
  opacity:1!important;
  transform:none!important;
  transition-property:border-color,background-color,color,box-shadow!important;
  transition-duration:.2s!important;
}
.site-header{
  -webkit-backdrop-filter:blur(12px) saturate(112%)!important;
  backdrop-filter:blur(12px) saturate(112%)!important;
}
.ambient-media{
  will-change:auto!important;
  filter:none!important;
}
/* Images and multimedia below the fold are decoded lazily by the browser.
   Offscreen decorative effects are paused by the section observer. */
@media(max-width:900px){
  .catalog-directory::before,.ftx-workflow::before{animation:none!important;opacity:.42}
  .catalog-directory,.combined-capabilities,.company-profile,.ftx-workflow{background:
    radial-gradient(ellipse at 0% 8%,rgba(105,209,190,.08),transparent 65%),
    linear-gradient(135deg,#101218,#15121c 70%,#10141b)!important;}
}
@media(max-width:680px){
  .catalog-directory-grid.catalog-columns-ready{grid-template-columns:1fr!important}
  .catalog-directory-column{gap:.65rem}
  .catalog-directory-column>.catalog-category summary{min-height:62px}
  .catalog-directory::before,.ftx-workflow::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .catalog-directory::before,.ftx-workflow::before{animation:none!important}
}

/* 2026-10-08 China Biotech Group supply hierarchy */
.spb-supply-advantage{
  isolation:isolate;
  position:relative;
  overflow:clip;
  background:
    radial-gradient(ellipse at 0% 70%,rgba(92,206,206,.115),transparent 50%),
    radial-gradient(ellipse at 100% 15%,rgba(173,139,244,.11),transparent 55%),
    linear-gradient(125deg,#11141c,#15121e 55%,#0d1319)!important;
}
.spb-advantage-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.spb-advantage-lead{position:sticky;top:7rem}
.spb-advantage-lead h2{font-size:clamp(2.8rem,4.35vw,5.2rem);letter-spacing:-.065em;line-height:1.05;margin:.75rem 0 1.3rem}
.spb-advantage-lead h2 em{font-style:normal;color:#93f0dd}
.spb-advantage-lead p:not(.eyebrow){font-size:clamp(.96rem,1.1vw,1.1rem);line-height:1.8;color:#c6c2d0}
.spb-advantage-lead .actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.75rem}
.spb-advantage-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.spb-advantage-steps article{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border-radius:28px;min-width:0;min-height:220px;
  padding:clamp(1.2rem,2.1vw,2.1rem);
  transition:border-color .22s ease,background-color .22s ease;
}
.spb-advantage-steps article:hover{border-color:rgba(127,231,215,.36)}
.spb-advantage-steps article>span{font-weight:800;letter-spacing:.08em;color:#91f0d5;font-size:.71rem}
.spb-advantage-steps article h3{font-size:clamp(1.3rem,1.75vw,1.75rem);line-height:1.2;letter-spacing:-.045em;margin:.85rem 0}
.spb-advantage-steps article p{color:#b7b5c3;font-size:.9rem;line-height:1.68;margin:0}
@media(max-width:1000px){.spb-advantage-grid{grid-template-columns:1fr}.spb-advantage-lead{position:static}}
@media(max-width:560px){.spb-advantage-steps{grid-template-columns:1fr}.spb-advantage-steps article{min-height:0}.spb-advantage-lead h2{font-size:clamp(2.7rem,10vw,4rem)}}
@media(prefers-reduced-motion:reduce){.spb-advantage-steps article{transition:none}}