function Hero() {
  const { Button } = window.GibbeuseStudioDesignSystem_1f335b;
  return (
    <section id="top" style={{
      minHeight: "84vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      textAlign: "center", padding: "var(--space-9) var(--space-6)", background: "var(--bg-void)", position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", width: 700, height: 700, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(255,255,255,0.07), transparent 68%)", top: "-18%",
      }} />
      <img src="../../assets/logo-studio-gibbeuse-white.svg" alt="Studio Gibbeuse" style={{ width: "min(520px,80vw)", position: "relative", zIndex: 1 }} />
      <div style={{ fontFamily: "var(--font-body)", fontSize: "var(--fs-body-lg)", color: "var(--text-on-void-secondary)", marginTop: 36, maxWidth: 460, position: "relative", zIndex: 1 }}>
        Games for friends to play. No lobby, no matchmaking — just your group chat and something to lose at.
      </div>
      <div style={{ display: "flex", gap: 12, marginTop: 40, position: "relative", zIndex: 1 }}>
        <Button variant="primary" onClick={() => window.location.href = "games.html"}>See our games</Button>
      </div>
    </section>
  );
}
window.Hero = Hero;