<!--
AFTER DARK LABS — ORBIT LOGO INTEGRATION
Three copy-paste edits to index.html. Your Tailwind classes are unchanged;
only the emoji and favicon links are replaced.
-->
<!-- ============================================================
EDIT 1 of 3 — <head>: replace your two favicon <link> tags
(the ones pointing at favicon.png) with this block.
Upload favicon.svg, favicon.ico, favicon-32.png, and
apple-touch-icon.png to your site root first.
============================================================ -->
<link rel="icon" href="https://afterdarklabs.io/favicon.ico" sizes="48x48">
<link rel="icon" type="image/svg+xml" href="https://afterdarklabs.io/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="https://afterdarklabs.io/favicon-32.png">
<link rel="apple-touch-icon" href="https://afterdarklabs.io/apple-touch-icon.png">
<!-- Note: rename badge.svg to favicon.svg when uploading, or update the href. -->
<!-- ============================================================
EDIT 2 of 3 — NAV: the orbit mark replaces the 🌑 emoji inside
your existing bordered tile. Two spots in the nav.
============================================================ -->
<!-- 2a. MOBILE nav — replace this line:
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl border-2 border-[#ccff00] bg-black text-lg font-bold">🌑</span>
with: -->
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl border-2 border-[#ccff00] bg-black">
<svg width="20" height="20" viewBox="0 0 64 64" fill="none" aria-hidden="true">
<circle cx="32" cy="32" r="19" stroke="#ccff00" stroke-width="3.2" stroke-dasharray="0.5 8" stroke-linecap="round" opacity="0.75"/>
<circle cx="45.4" cy="18.6" r="6.5" fill="#ccff00"/>
</svg>
</span>
<!-- 2b. DESKTOP nav — replace this line:
<div class="flex h-9 w-9 items-center justify-center rounded-2xl border-2 border-[#ccff00] bg-black text-xl font-bold">🌑</div>
with: -->
<div class="flex h-9 w-9 items-center justify-center rounded-2xl border-2 border-[#ccff00] bg-black">
<svg width="20" height="20" viewBox="0 0 64 64" fill="none" aria-hidden="true">
<circle cx="32" cy="32" r="19" stroke="#ccff00" stroke-width="3.2" stroke-dasharray="0.5 8" stroke-linecap="round" opacity="0.75"/>
<circle cx="45.4" cy="18.6" r="6.5" fill="#ccff00"/>
</svg>
</div>
<!-- ============================================================
EDIT 3 of 3 — FOOTER: replace this line:
<div class="flex h-9 w-9 items-center justify-center rounded-2xl border-2 border-[#ccff00] bg-black text-2xl">🌑</div>
with: -->
<div class="flex h-9 w-9 items-center justify-center rounded-2xl border-2 border-[#ccff00] bg-black">
<svg width="20" height="20" viewBox="0 0 64 64" fill="none" aria-hidden="true">
<circle cx="32" cy="32" r="19" stroke="#ccff00" stroke-width="3.2" stroke-dasharray="0.5 8" stroke-linecap="round" opacity="0.75"/>
<circle cx="45.4" cy="18.6" r="6.5" fill="#ccff00"/>
</svg>
</div>
<!-- ============================================================
OPTIONAL — living-brand version. Add this once anywhere in your
<style> block, then add class="adl-fly" to any of the small
glow-dot <circle> elements above (the ones with fill="#ccff00").
The firefly gently pulses, matching your neon flicker vibe.
============================================================ -->
<style>
@keyframes adl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.adl-fly { animation: adl-pulse 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .adl-fly { animation: none; } }
</style>