/* BZ Studio — static site styles. Design tokens (from BZ Studio Design System):
   --color-signal-red:#EA0003  --color-studio-black:#0D0D0D  --color-carbone:#1A1A1A
   --color-grafite:#2E2E2E (borders)  --color-fumo:#B0B0B0 (secondary text)  --color-muted:#6B6B6B
   Fonts: Inter (display/body, weight 300 titles / 400 body) + Space Mono (labels/technical) */

@font-face { font-family: 'Inter'; font-weight: 300; src: local('Inter Light'); }
* , *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; background: #0D0D0D; scroll-behavior: smooth; margin: 0; }
body { color: #fff; font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { font-family: 'Inter', system-ui, sans-serif; }
a { color: #EA0003; }
a:hover { color: #FF1A1D; }
section, footer { position: relative; z-index: 1; }

button { font-family: inherit; }

#header-logo-text { display: inline; }
#header-logo-img { display: none; }

@media (max-width: 680px) {
  #header-bar { justify-content: flex-start !important; gap: 0; padding: 0 14px !important; }
  #header-logo-text { display: none; }
  #header-logo-img { display: flex !important; }
  #header-nav-links { gap: 6px; flex: 1; justify-content: space-evenly; min-width: 0; }
  #header-nav-links a { font-size: 7.6px !important; gap: 2px !important; flex-direction: column !important; white-space: nowrap; }
  #header-nav-links a svg { width: 13px; height: 13px; }
  #header-cta { display: none !important; }
}
@media (max-width: 360px) {
  #header-nav-links a { font-size: 6.6px !important; }
}

@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bounceArrow { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(9px); opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

[data-reveal] { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity .6s ease-out, transform .6s ease-out, filter .6s ease-out; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.mobile-planet-panel { display: none; }
@media (max-width: 820px) {
  .desktop-planet-panel { display: none !important; }
  .mobile-planet-panel.is-open { display: block; }
  #studio-planets-row { flex-direction: column !important; align-items: stretch !important; gap: 32px !important; }
  #studio-planets-row > div { min-width: 0 !important; width: 100% !important; }
}

/* Buttons — reconstructed from the BZ Studio Design System Button component */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Inter', system-ui, sans-serif; font-weight: 300; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; border-radius: 2px; outline: none; text-decoration: none; white-space: nowrap; transition: opacity .15s, background .15s, border-color .15s; }
.btn:hover { opacity: .85; }
.btn-primary { border: 1px solid #EA0003; background: #EA0003; color: #fff; font-size: 10px; padding: 6px 14px; height: 28px; }
.btn-primary-lg { border: 1px solid #EA0003; background: #EA0003; color: #fff; font-size: 12px; padding: 14px 28px; height: 44px; }
.btn-ghost-lg { border: 1px solid transparent; background: transparent; color: #B0B0B0; font-size: 12px; padding: 14px 28px; height: 44px; }

/* Tags — reconstructed from the BZ Studio Design System Tag component */
.tag { display: inline-flex; align-items: center; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 2px; background: #1A1A1A; border: 1px solid #2E2E2E; color: #B0B0B0; }
.tag-muted { color: #6B6B6B; }

.price-tab { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 20px; border-radius: 20px; cursor: pointer; border: 1px solid #2E2E2E; background: transparent; color: #B0B0B0; }
.price-tab.is-active { border-color: #EA0003; background: #EA0003; color: #fff; }

.price-item-body { max-height: 0; overflow: hidden; transition: max-height .38s cubic-bezier(0.4,0,0.2,1); border-top: none; }
.price-item-body.is-open { max-height: 900px; border-top: 1px solid #2E2E2E; }
.price-item-arrow { color: #EA0003; font-size: 14px; transition: transform .25s; }
.price-item-arrow.is-open { transform: rotate(180deg); }

.ai-tool-card { transition: border-color .25s, transform .25s; }
.ai-tool-card:hover { border-color: #EA0003; transform: translateY(-3px); }

.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }