<header class="h04">
<div class="h04-in">
<a href="#" class="h04-logo"><span>◆</span>Studio</a>
<nav class="h04-nav" aria-label="Main">
<div class="h04-item">
<button class="h04-trigger" aria-expanded="false">Products <i></i></button>
<div class="h04-mega">
<div class="h04-col">
<p>Build</p>
<a href="#"><b>Websites</b><small>Fast, animated marketing sites</small></a>
<a href="#"><b>Web apps</b><small>Dashboards and SaaS products</small></a>
<a href="#"><b>Design systems</b><small>Tokens, components, docs</small></a>
</div>
<div class="h04-col">
<p>Grow</p>
<a href="#"><b>SEO audits</b><small>Rank higher, load faster</small></a>
<a href="#"><b>Analytics</b><small>Know what users actually do</small></a>
<a href="#"><b>Performance</b><small>Fast on every device</small></a>
</div>
<a href="#" class="h04-feature"><span class="h04-art"></span><b>New · Motion kit</b><small>50 premium buttons, free to use.</small></a>
</div>
</div>
<a href="#" class="h04-link">Case studies</a>
<a href="#" class="h04-link">Pricing</a>
<a href="#" class="h04-link">Docs</a>
</nav>
<a href="#" class="h04-cta">Book a demo</a>
<button class="h04-burger" aria-label="Open menu" aria-expanded="false"><i></i><i></i></button>
</div>
</header>