/* Noch globale Navigations-, Footer- und Hilfsregeln. Sektionsregeln liegen komponentennah. */
html,
body { max-width: 100%; overflow-x: clip; }

.footer-main { grid-template-columns: 2fr repeat(2, 1fr); }
.footer-social { display: inline-flex; align-items: center; gap: 8px; }
.instagram-icon { flex: 0 0 18px; display: block; width: 18px; height: 18px; opacity: .62; }

.hero-copy h1 em { display: inline-block; font-size: inherit; white-space: nowrap; }

.scroll-top { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--violet), var(--blue)); box-shadow: 0 14px 32px #243fbe38; font: inherit; font-size: 22px; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, visibility .25s, transform .25s; }
.scroll-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:focus-visible { outline: 3px solid #bdb4ff; outline-offset: 3px; }

@media (max-width: 1228px) {
  .hero { grid-template-columns: 1fr; padding-top: 60px; }
  .hero-copy { text-align: center; }
  .hero-copy h1,
  .lead { margin-inline: auto; }
  .eyebrow,
  .hero-actions { justify-content: center; }
  .hero-art { min-height: 480px; }
}

@media (max-width: 900px) {
  .hero-copy h1 { margin-inline: auto; }
}

@media (max-width: 620px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .hero-copy h1 em { display: inline; white-space: normal; }
  .hero-art { width: 100%; min-width: 0; overflow: visible; }
  .hero-art .browser-card { width: 100%; max-width: 100%; transform: none; }
  .hero-art .orb-one { width: min(420px, 100%); height: auto; aspect-ratio: 1; }
  .workflow-slider,
  .workflow-slide,
  .design-workspace,
  .code-editor,
  .live-content { min-width: 0; max-width: 100%; }
  .scroll-top { right: 16px; bottom: 16px; }
}