/* Quiet studio lighting for the test 3D page, without particle fields. */
/* Compact, consistent cards on the rotating orbit; its transforms stay in JS. */
html:not([data-fx-quality="low"]) body.fusion-page #mods .mods3d__orbit .mod-card {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr);
  width: min(330px, 28vw) !important;
  height: 116px !important;
  min-height: 116px !important;
  padding: 17px 18px !important;
  gap: 14px !important;
  align-items: center !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  background: linear-gradient(135deg, rgba(31,31,36,.96), rgba(17,17,21,.96)) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035) !important;
  transition: border-color .25s, box-shadow .25s;
}
html:not([data-fx-quality="low"]) body.fusion-page #mods .mods3d__orbit .mod-card:hover {
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.055) !important;
}
html:not([data-fx-quality="low"]) body.fusion-page #mods .mods3d__orbit .mod-card::before,
html:not([data-fx-quality="low"]) body.fusion-page #mods .mods3d__orbit .mod-card::after { display: none !important; }
html:not([data-fx-quality="low"]) body.fusion-page #mods .mods3d__orbit .mod-card .mod-img-wrap {
  display: grid;
  place-items: center;
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
}
html:not([data-fx-quality="low"]) body.fusion-page #mods .mods3d__orbit .mod-card .mod-img-wrap img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 6px;
}
html:not([data-fx-quality="low"]) body.fusion-page #mods .mods3d__orbit .mod-card .mod-img-wrap svg { width: 25px; height: 25px; }
html:not([data-fx-quality="low"]) body.fusion-page #mods .mods3d__orbit .mod-card .mod-name {
  margin: 0 0 5px !important;
  color: #f2f2f5 !important;
  font: 600 16px/1.3 Inter, Arial, sans-serif !important;
  letter-spacing: -.02em;
}
html:not([data-fx-quality="low"]) body.fusion-page #mods .mods3d__orbit .mod-card .mod-desc {
  max-width: none;
  color: rgba(230,230,238,.6);
  font: 400 12px/1.45 Inter, Arial, sans-serif !important;
  -webkit-line-clamp: 3 !important;
}
html:not([data-fx-quality="low"]) body.fusion-page #mods .mods3d__orbit .mod-card .mod-arrow { display: none !important; }
html body.fusion-page #mods .mods3d__stage {
  overflow: visible;
  contain: none;
  background: transparent;
  box-shadow: none;
}
html body.fusion-page #mods .mods3d__stage .mods3d__model {
  contain: layout style;
  overflow: visible;
  background: transparent;
  --poster-color: transparent;
  filter: drop-shadow(0 0 32px rgba(236,64,64,.24)) !important;
}
body.fusion-page main .page-motion-text,
body.fusion-page main .page-motion-text .gradient-text { overflow: visible; }
body.fusion-page main .page-motion-word { display: inline-block; white-space: nowrap; }
body.fusion-page main .page-motion-letter {
  display: inline-block;
  animation: newsite-page-letter 560ms cubic-bezier(.16, 1, .3, 1) var(--page-letter-delay, 0ms) both;
}
@keyframes newsite-page-letter {
  from { opacity: 0; transform: translateY(.55em); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.fusion-page main .page-motion-letter { animation: none; }
}
/* Keep the glow outside the model's rectangular viewport. The entire stage
   already fades on exit; masking the filtered model clips its drop shadows. */
body.fusion-page #hero3d .hero3d__stage {
  overflow: visible;
  contain: none;
}
body.fusion-page #hero3d .hero3d__stage .hero3d__model {
  -webkit-mask-image: none;
  mask-image: none;
  overflow: visible;
}
body.fusion-page #hero3d .hero3d__metric {
  display: block;
  margin: 0 0 12px;
  color: #ef4044;
  font: 700 clamp(44px, 4.6vw, 64px)/1.05 var(--font-ui, Manrope, sans-serif);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
body.fusion-page #hero3d .hero3d__metric > span { font-size: .65em; }
body.fusion-page #hero3d .hero3d__panel-heading {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 22px 0 18px;
}
body.fusion-page #hero3d .hero3d__panel-heading .hero3d__panel-icon {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.fusion-page #hero3d .hero3d__panel-heading .hero3d__panel-icon svg { width: 30px; height: 30px; }
body.fusion-page #hero3d .hero3d__panel-heading .hero3d__panel-icon::after {
  content: "";
  position: absolute;
  right: -17px;
  top: 50%;
  width: 1px;
  height: 32px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.22);
}
body.fusion-page #hero3d .hero3d__panel-heading .hero3d__metric,
body.fusion-page #hero3d .hero3d__panel-heading h3 { margin: 0; }
body.fusion-page #hero3d .hero3d__panel-heading h3 {
  font-size: clamp(23px, 2.2vw, 30px);
  line-height: 1.25;
  font-weight: 700;
}
/* The showcase needs room above the title's flying letters and outside the
   model viewport for its glow. Keep paint containment off the filtered model. */
html body.fusion-page #showcase.showcase-section {
  overflow: visible !important;
  padding-top: 112px !important;
  padding-bottom: 72px !important;
}
html body.fusion-page #showcase .section-header {
  max-width: 1100px;
  padding: 32px 24px 12px;
  overflow: visible;
}
html body.fusion-page #showcase .sec-title,
html body.fusion-page #showcase .sec-title .gradient-text {
  overflow: visible;
  line-height: 1.2;
}
html body.fusion-page #showcase .showcase-logo-panel,
html body.fusion-page #showcase .showcase-logo-stage {
  overflow: visible !important;
  contain: none;
}
html body.fusion-page #showcase .showcase-logo-stage {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  isolation: isolate;
}
html body.fusion-page #showcase .showcase-logo-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 64, 64, .13), rgba(236, 64, 64, .04) 45%, transparent 75%);
  pointer-events: none;
}
html body.fusion-page #showcase .showcase-logo-copy {
  max-width: 390px;
}
html body.fusion-page #showcase .showcase-logo-copy h3 {
  max-width: 12ch;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 650;
  line-height: 1.18 !important;
  letter-spacing: -.035em;
  text-wrap: balance;
}
html body.fusion-page #showcase .showcase-logo-copy p {
  max-width: 36ch;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(235, 235, 242, .6);
  text-wrap: pretty;
}
html body.fusion-page #showcase .showcase-logo-model {
  contain: layout style;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
body.fusion-page .hero3d,
body.fusion-page .scene3d { --scene-light: 236, 64, 64; }
body.fusion-page .scene3d[data-scene="activity"] { --scene-light: 115, 134, 174; }
body.fusion-page .scene3d[data-scene="pricing"] { --scene-light: 220, 83, 72; }
/* Soft ambient light only; no spherical background or shader canvas. */
body.fusion-page .hero3d__bg { opacity: calc(var(--stageOpacity, 0) * .9); }
body.fusion-page .scene3d__bg { opacity: calc(var(--sp, 0) * .85); }
body.fusion-page .hero3d__bg::before,
body.fusion-page .scene3d__glow {
  inset: -8%;
  background:
    radial-gradient(ellipse at 28% 45%, rgba(var(--scene-light), .07), transparent 65%),
    radial-gradient(ellipse at 76% 55%, rgba(105, 124, 170, .04), transparent 65%);
  filter: blur(32px);
}
body.fusion-page .hero3d__bg::after,
body.fusion-page .scene3d__bg::after {
  content: "";
  position: absolute;
  inset: -5%;
  background:
    radial-gradient(ellipse 35% 8% at 50% 82%, rgba(var(--scene-light), .05), transparent 85%);
  filter: blur(20px);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 90%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 90%);
  transform: translateX(calc(var(--mx, 0) * 8px));
}
/* Broad light moves slowly, independently of the objects' scroll animation. */
@media (prefers-reduced-motion: no-preference) {
  body.fusion-page .scene3d.is-live .scene3d__glow {
    animation: newsite-studio-light 20s ease-in-out infinite alternate;
  }
}
@keyframes newsite-studio-light {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1%, 0) scale(1.06); }
}