(() => {
const { Button, Icon, Badge } = window.SwivelDesignSystem_a628db;
function Hero({ onCta }) {
  return <section id="top" style={{position:'relative',background:'var(--swivel-signal-black)',overflow:'hidden'}}>
    <div aria-hidden="true" style={{position:'absolute',inset:0,pointerEvents:'none'}}>
      <div style={{position:'absolute',width:520,height:520,borderRadius:'50%',border:'2px solid var(--grey-800)',top:-160,right:-60}}/>
      <div style={{position:'absolute',width:300,height:300,borderRadius:'50%',border:'2px solid var(--grey-800)',bottom:-120,right:300}}/>
      <div style={{position:'absolute',width:88,height:88,borderRadius:'50%',background:'var(--swivel-amber-gold)',bottom:96,right:110}}/>
      <div style={{position:'absolute',width:16,height:16,borderRadius:'50%',background:'var(--swivel-portal-yellow)',bottom:210,right:250}}/>
    </div>
    <div style={{position:'relative',maxWidth:'var(--container-max)',margin:'0 auto',padding:'104px var(--gutter-page-lg) 120px'}}>
      <Badge tone="brand" dot>Sweeps casino live · more verticals in build</Badge>
      <h1 style={{fontFamily:'var(--font-display)',fontWeight:'var(--weight-bold)',fontSize:'clamp(44px,6.2vw,88px)',lineHeight:'var(--leading-flush)',letterSpacing:'var(--tracking-display)',color:'var(--swivel-white)',margin:'24px 0 0',maxWidth:1000,textTransform:'uppercase'}}>
        One platform.<br/><span style={{color:'var(--swivel-portal-yellow)'}}>Every emerging vertical.</span>
      </h1>
      <p style={{fontFamily:'var(--font-body)',fontSize:'var(--size-xl)',lineHeight:'var(--leading-normal)',color:'var(--grey-300)',maxWidth:'54ch',margin:'28px 0 0',textWrap:'pretty'}}>
        Launch your sweepstakes casino on our white label. Add the next vertical — prediction markets, card ripping — on the same stack, the same back office, the same integration.
      </p>
      <div style={{display:'flex',gap:'var(--space-4)',marginTop:'var(--space-10)',flexWrap:'wrap'}}>
        <Button variant="primary" size="xl" onClick={onCta} iconRight={<Icon name="arrow-up-right" size={18}/>}>Book a demo</Button>
        <Button variant="outline" size="xl" onClick={()=>{const el=document.getElementById('platform');if(el)window.scrollTo({top:el.offsetTop-72,behavior:'smooth'});}} style={{color:'var(--swivel-white)',borderColor:'var(--grey-600)'}}>See the platform</Button>
      </div>
    </div>
  </section>;
}
Object.assign(window, { Hero });
})();