function Home({onContact}){
const {Button}=window.HelixCyberDesignSystem_c2a1e7;
const ParticleText=window.ParticleText;
const ParticleHelix=window.ParticleHelix;
const SpotlightCard=window.SpotlightCard||(p=>p.children);
const Magnet=window.Magnet||(p=>p.children);
const DecryptedText=window.DecryptedText||(p=>p.text);
const ShinyText=window.ShinyText||(p=>p.text);
const tag=t=><span style={{display:'inline-block',border:'1px solid var(--border-default)',background:'var(--bg-0)',borderRadius:8,padding:'4px 10px',fontSize:12,color:'var(--text-muted)'}}>{t}</span>;
const check=t=><div style={{display:'flex',alignItems:'center',gap:8,fontSize:13,marginBottom:10}}><span style={{color:'var(--ok)'}}>✓</span>{t}</div>;
const services=[
{href:'services.html#reverse-engineering',l:'Reverse engineering',d:'Firmware, protocols, and closed-source dependencies taken apart before they ship.'},
{href:'services.html#ai-security',l:'AI security',d:'Weight provenance, injection resistance, RAG hardening, guardrail evaluation.'},
{href:'services.html#agents',l:'Agent audits',d:'Which agents to trust, with which tools, with evidence.'},
{href:'services.html#network',l:'Detection engineering',d:'Hardening for networks that carry machine-to-machine traffic.'}
];

return <div>
<div className="hero-stage">
<div className="hero-stage__mark">{ParticleHelix&&<ParticleHelix density={4} stagger={780} pointerRepel={72} idleDrift={1.6} particleSize={3.2} scatter={240} repelRadius={150}/>}</div>
<div className="hero-stage__word">{ParticleText&&<ParticleText text="HELIX" density={4} stagger={780} pointerRepel={72} idleDrift={1.6} color="#020202" highlightColor="#020202" fontFamily="Geist Mono, ui-monospace, monospace" fontWeight={600} particleSize={2.8} glow={false}/>}</div>
</div>
<header style={{padding:'24px 40px 32px'}}>
<div style={{maxWidth:'var(--container)',margin:'0 auto',display:'grid',gridTemplateColumns:'1.35fr .75fr',gap:16}}>
<div style={{background:'var(--bg-1)',border:'1px solid var(--border-default)',borderRadius:'var(--radius-2)',padding:'40px 36px'}}>
<div style={{display:'flex',gap:8,marginBottom:20}}>{tag('Enterprises')}{tag('Authorized work')}</div>
<h1 style={{fontFamily:'var(--font-mono)',fontSize:'var(--text-3xl)',fontWeight:500,letterSpacing:'-.04em',lineHeight:1.1,margin:'0 0 16px'}}><DecryptedText text="helixcyber" animateOn="mount" speed={28} maxIterations={10}/></h1>
<p style={{fontSize:15,color:'var(--text-muted)',maxWidth:520,margin:'0 0 24px'}}>Reverse engineering and AI security for companies that run software agents, from firmware to model weights.</p>
<div style={{display:'flex',flexWrap:'wrap',gap:8,marginBottom:28}}>{tag('Firmware')}{tag('Agent policy')}{tag('RAG')}{tag('Supply chain')}</div>
<div style={{display:'flex',gap:10}}><Magnet><Button size="lg" onClick={onContact}>Request briefing</Button></Magnet><a href="services.html" style={{textDecoration:'none'}}><Magnet><Button variant="secondary" size="lg">Services</Button></Magnet></a></div>
</div>
<div style={{background:'var(--bg-1)',border:'1px solid var(--border-default)',borderRadius:'var(--radius-2)',padding:'28px 24px',display:'flex',flexDirection:'column'}}>
<div style={{fontSize:14,fontWeight:600,marginBottom:18}}>What you get</div>
{check('Authorized reverse engineering')}
{check('Model and agent audits')}
{check('Evidence for SOC 2 / GDPR / PIPL')}
{check('Qualified reply in 7 business days')}
<div style={{marginTop:'auto',paddingTop:20}}><Magnet><Button size="lg" onClick={onContact} style={{width:'100%',justifyContent:'center'}}>Request briefing</Button></Magnet></div>
</div>
</div>
</header>
<section style={{padding:'24px 40px 72px'}}>
<div style={{maxWidth:'var(--container)',margin:'0 auto'}}>
<div style={{fontFamily:'var(--font-mono)',fontSize:12,letterSpacing:'.08em',color:'var(--text-faint)',marginBottom:16}}><DecryptedText text="SERVICES" animateOn="view"/></div>
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
{services.map(s=><a key={s.href} href={s.href} style={{textDecoration:'none',color:'inherit'}}>
<SpotlightCard style={{background:'var(--bg-1)',border:'1px solid var(--border-default)',borderRadius:'var(--radius-2)',padding:'24px 22px',display:'block',height:'100%'}}>
<div style={{fontSize:16,fontWeight:600,marginBottom:8}}>{s.l}</div>
<div style={{fontSize:13,color:'var(--text-muted)'}}>{s.d}</div>
<div style={{marginTop:14,fontSize:12}}><ShinyText text="Read more →"/></div>
</SpotlightCard>
</a>)}
</div>
</div>
</section>
<section style={{padding:'0 40px 72px'}}>
<div style={{maxWidth:'var(--container)',margin:'0 auto',background:'var(--bg-1)',border:'1px solid var(--border-default)',borderRadius:'var(--radius-2)',padding:'28px 32px',display:'flex',alignItems:'center',justifyContent:'space-between',gap:24,flexWrap:'wrap'}}>
<div>
<div style={{fontSize:16,fontWeight:600,marginBottom:6}}>Models on the desk</div>
<div style={{fontSize:13,color:'var(--text-muted)'}}>Anthropic, OpenAI, Google, AWS Bedrock, xAI. Lane first, then the model.</div>
</div>
<a href="models.html" style={{textDecoration:'none'}}><Button variant="secondary">See providers</Button></a>
</div>
</section>
</div>;
}
mountPage('index.html', Home);