Update index.html

Author: AionSystem

index.html

@@ -328,6 +328,17 @@
 @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
 @keyframes fadeIn { to { opacity: 1; } }
 
+/* ── LOGO ── */
+.nav-logo-wrap { display: flex; align-items: center; gap: 10px; }
+.nav-logo-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(212,174,60,0.3)); transition: filter 0.2s; }
+.nav-logo:hover .nav-logo-img { filter: drop-shadow(0 0 8px rgba(212,174,60,0.6)); }
+.hero-logo-wrap { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; opacity: 0; transform: translateY(12px); animation: fadeUp 0.7s var(--ease) 0.08s forwards; }
+.hero-logo-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(212,174,60,0.2); box-shadow: 0 0 20px rgba(212,174,60,0.12); flex-shrink: 0; }
+.hero-logo-id { display: flex; flex-direction: column; gap: 4px; }
+.hero-logo-wordmark { font-family: var(--mono); font-size: 13px; letter-spacing: 4px; color: var(--amber); text-transform: uppercase; }
+.hero-logo-wordmark span { color: var(--muted); }
+.hero-logo-tagline { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }
+
 /* ── RESPONSIVE ── */
 @media (max-width: 800px) { .services-grid { grid-template-columns: 1fr; } }
 @media (max-width: 680px) { .work-strip { grid-template-columns: 1fr; } }
@@ -350,6 +361,7 @@
   .cnt-row { flex-direction: column; align-items: flex-start; gap: 4px; }
   .cnt-desc { text-align: left; }
   .cnt-num { min-width: 0; }
+  .hero-logo-img { width: 52px; height: 52px; }
 }
 </style>
 </head>
@@ -358,7 +370,10 @@
 <canvas id="hero-canvas"></canvas>
 
 <nav>
-  <a href="/" class="nav-logo">AION<span>system</span></a>
+  <a href="/" class="nav-logo nav-logo-wrap">
+    <img src="/assets/aion-logo.jpg" alt="AionSystem" class="nav-logo-img">
+    <span>AION<span>system</span></span>
+  </a>
   <ul class="nav-links">
     <li><a href="/simulators/">Simulators</a></li>
     <li><a href="/services/">Services</a></li>
@@ -371,6 +386,14 @@
 
 <div class="hero">
 
+  <div class="hero-logo-wrap">
+    <img src="/assets/aion-logo.jpg" alt="AionSystem" class="hero-logo-img">
+    <div class="hero-logo-id">
+      <div class="hero-logo-wordmark">AION<span>system</span></div>
+      <div class="hero-logo-tagline">AI Certainty Engineering · New York</div>
+    </div>
+  </div>
+
   <div class="hero-eyebrow">AI Certainty Engineering · New York</div>
 
   <h1 class="hero-name">Sheldon K.<em>Salmon</em></h1>