/* Fuse Creative — Phygital+ purple with Fuse Foundry orange (fixed theme, works in both light and dark settings) */
html:has(body.product-studio), html[data-theme] body.product-studio, body.product-studio {
  --bg: #120a2c;
  --surface: #1b1140;
  --surface-subtle: #1f1549;
  --surface-raised: #221751;
  --ink: #f6f2ff;
  --ink-soft: #cdc3ee;
  --ink-faint: #9387c2;
  --line: #34285f;
  --line-strong: #4a3c80;
  --accent: #f47721;
  --accent-strong: #ff8a3d;
  --accent-soft: #3a2140;
  --dark: #0b0620;
  --light: #f6f2ff;
  --product-tint: #a684ff;
  --product-tint-soft: #2a1d58;
  --shadow: 0 24px 70px rgba(5, 0, 20, 0.45);
  --shadow-small: 0 12px 30px rgba(5, 0, 20, 0.35);
}
html:has(body.product-studio) { background: #120a2c; color-scheme: dark; }
body.product-studio {
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(123, 92, 255, .35), transparent 70%),
    radial-gradient(50% 40% at 0% 30%, rgba(224, 60, 200, .18), transparent 70%),
    radial-gradient(60% 50% at 100% 70%, rgba(244, 119, 33, .12), transparent 70%),
    linear-gradient(180deg, #160c36 0%, #120a2c 40%, #0f0826 100%);
  background-attachment: fixed;
  color: var(--ink);
}
/* the purple page uses the white logo and no light/dark switch */
body.product-studio .brand-image-light { display: none !important; }
body.product-studio .brand-image-dark { display: block !important; }
body.product-studio .theme-toggle { display: none !important; }
body.product-studio .site-header { background: rgba(18, 10, 44, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,.06); }
/* Fuse orange for actions and highlights */
body.product-studio .button-primary { background: linear-gradient(100deg, #f47721, #ff5a8a 120%); border-color: transparent; color: #fff; box-shadow: 0 12px 34px rgba(244, 119, 33, .32); }
body.product-studio .button-primary:hover { box-shadow: 0 16px 40px rgba(244, 119, 33, .45); }
body.product-studio .product-hero h1 > span:not(.fx-w), body.product-studio .section-title > span:not(.fx-w) { background: linear-gradient(90deg, #f47721, #ff5ab4 55%, #a684ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.product-studio .eyebrow-mark, body.product-studio .system-status i { background: #f47721; }
/* glassy cards so the circuit glows through */
body.product-studio .capability-card, body.product-studio .product-system, body.product-studio .proof-grid article, body.product-studio .proof-cards > * {
  background: rgba(34, 23, 81, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.09);
}
body.product-studio .creative-canvas { background-color: rgba(18, 10, 44, .35); }
body.product-studio .mgrid { box-shadow: 0 30px 80px rgba(5,0,20,.5), 0 0 0 1px rgba(166,132,255,.18); }
body.product-studio .mgrid-more { box-shadow: 0 0 0 1px rgba(166,132,255,.18); }
/* active product tab and dark bands in purple */
body.product-studio .product-tabs a:hover, body.product-studio .product-tabs a:focus-visible, body.product-studio .product-tabs a[aria-current="page"] { background: linear-gradient(100deg, #f47721, #e0458f); color: #fff; }
body.product-studio .product-tabs a[aria-current="page"] em, body.product-studio .product-tabs a:hover em { color: rgba(255,255,255,.85); }
body.product-studio .studio-engine, body.product-studio .integration-band {
  background:
    radial-gradient(50% 60% at 90% 10%, rgba(244,119,33,.18), transparent 70%),
    radial-gradient(60% 70% at 0% 100%, rgba(123,92,255,.28), transparent 70%),
    linear-gradient(180deg, #1a0f42 0%, #100828 100%);
}
body.product-studio .contact-panel { background: radial-gradient(120% 140% at 50% 0%, rgba(123,92,255,.5) 0%, rgba(244,119,33,.22) 45%, #120a2c 82%); border-color: rgba(255,255,255,.12); }
body.product-studio .studio-reel { background: #0b0620; }
body.product-studio .product-hero-copy h1 > span:not(.fx-w) .fx-wi { color: transparent; }
body.product-studio .studio-service-grid > * { background: rgba(26, 15, 66, .72); border-color: rgba(255,255,255,.08); }
body.product-studio .studio-reel-frame, body.product-studio .studio-reel-overlay { border-color: rgba(166,132,255,.2); }