diff --git a/www/banner.png b/www/banner.png
new file mode 100644
index 0000000..23c330b
Binary files /dev/null and b/www/banner.png differ
diff --git a/www/index.html b/www/index.html
index aefe784..c38292d 100644
--- a/www/index.html
+++ b/www/index.html
@@ -1,17 +1,386 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>WA2000</title>
-    <link type="text/css" rel="stylesheet" href="./style.css">
+<head>
+<meta charset="utf-8" />
+<title>WA2000</title>
+<link type="text/css" rel="stylesheet" href="./style.css">
+</head>
+<body>
 
-  </head>
-  <body>
-<div class="card">
-    <h1>waff waff!</h1>
-    <div class="divider"></div>
-    <p>tiny text!!!</p>
-    <p>wuff</p>
+<div class="banner">
+  <img src="banner.png" alt="banner" />
+</div>
+
+<!-- SVG filter definition — hidden, just provides the filter for Chrome -->
+<svg id="liquid-glass-svg" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">
+  <defs>
+
+    <filter id="liquid-glass-nav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+  <feImage id="nav-disp-img" result="disp_map" />
+  <feDisplacementMap in="SourceGraphic" in2="disp_map" id="nav-disp-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
+  <feImage id="nav-spec-img" result="spec_map" />
+  <feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
+  <feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
+</filter>
+
+    <filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
+      <!-- Load the displacement map image -->
+      <feImage id="displacement-map-img" result="disp_map" />
+      <!-- Apply displacement to the backdrop (SourceGraphic here = the backdrop) -->
+      <feDisplacementMap
+        in="SourceGraphic"
+        in2="disp_map"
+        id="displacement-map-filter"
+        xChannelSelector="R"
+        yChannelSelector="G"
+        result="refracted"
+      />
+      <!-- Load the specular highlight image -->
+      <feImage id="specular-map-img" result="spec_map" />
+      <!-- Blend specular on top of the refracted backdrop using screen mode -->
+      <feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
+      <!-- Clip result to the original element shape -->
+      <feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
+    </filter>
+  </defs>
+</svg>
+
+<!-- Liquid glass searchbar — sits above the card, expands on click -->
+<div class="nav-wrap">
+  <div class="nav-pill" id="nav-pill">
+    <div class="nav-pill-bar" id="nav-pill-bar">
+      <span class="nav-logo">WA2000</span>
+      <svg class="nav-chevron" id="nav-chevron" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <polyline points="5,7 10,13 15,7" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </div>
+    <div class="nav-dropdown" id="nav-dropdown">
+      <div class="nav-divider"></div>
+      <a href="#" class="nav-link">Home</a>
+      <a href="#" class="nav-link">About</a>
+      <a href="#" class="nav-link">Gallery</a>
+      <a href="#" class="nav-link">Contact</a>
+    </div>
   </div>
-  </body>
-</html>
+</div>
+
+<div class="card" id="card">
+  <h1>waff waff!</h1>
+  <div class="divider"></div>
+  <p>tiny text!!!</p>
+  <p>wuff</p>
+</div>
+
+<script>
+// ─── Configuration ────────────────────────────────────────────────────────────
+const CONFIG = {
+  bezelWidth: 0.18,      // Fraction of the smaller dimension used for the curved rim — wider = bigger refraction band
+  glassThickness: 3.5,   // Optical depth multiplier — higher = rays bend further at the edges
+  ior: 1.65,             // Index of refraction — real glass is ~1.5; slightly above for a more dramatic bend
+  scaleRatio: 2.5,       // Final multiplier on pixel displacement — scales the whole effect up or down
+  specularAngle: -55,    // Degrees of the light source direction — negative = upper-left
+  specularOpacity: 0.9,  // Peak alpha of the specular highlight — higher = brighter rim
+  specularSaturation: 6, // Unused in painting but kept for future colour-shift use
+  borderRadius: 50,      // Must match CSS border-radius in pixels — curves the refraction band at corners
+};
+ 
+// ─── Maths helpers ────────────────────────────────────────────────────────────
+ 
+/** Convex squircle surface — Apple-style soft bezel profile */
+function surfaceHeight(t) {
+  // t: 0 = outer edge of bezel, 1 = where the flat interior begins
+  // Squircle formula: softer than a circle arc, keeps refraction gradients smooth when stretched to a rectangle
+  return Math.pow(1 - Math.pow(1 - t, 4), 0.25);
+}
+ 
+/** Numerical derivative of the surface function at t — gives the surface slope */
+function surfaceNormal(t) {
+  const d = 0.001; // Tiny step for finite-difference approximation
+  const y1 = surfaceHeight(Math.max(0, t - d)); // Sample just before t
+  const y2 = surfaceHeight(Math.min(1, t + d)); // Sample just after t
+  const derivative = (y2 - y1) / (2 * d); // Central difference = slope at t
+  return { x: -derivative, y: 1 }; // Rotate 90°: tangent → normal pointing inward
+}
+ 
+/** Snell–Descartes refraction — returns the direction a ray travels after entering the glass */
+function refract(incidentDir, normal, n1, n2) {
+  const nLen = Math.hypot(normal.x, normal.y); // Length of normal vector
+  const nx = normal.x / nLen; // Normalise X component
+  const ny = normal.y / nLen; // Normalise Y component
+ 
+  const ratio = n1 / n2; // Ratio of refractive indices (air/glass)
+  const cosI = -(incidentDir.x * nx + incidentDir.y * ny); // Cosine of angle of incidence
+  const sinT2 = ratio * ratio * (1 - cosI * cosI); // sin²(refraction angle) via Snell's law
+ 
+  if (sinT2 > 1) return null; // Total internal reflection — ray can't exit, skip this sample
+ 
+  const cosT = Math.sqrt(1 - sinT2); // Cosine of refraction angle
+  return {
+    x: ratio * incidentDir.x + (ratio * cosI - cosT) * nx, // Refracted ray X direction
+    y: ratio * incidentDir.y + (ratio * cosI - cosT) * ny, // Refracted ray Y direction
+  };
+}
+ 
+// ─── Rounded rect helpers ─────────────────────────────────────────────────────
+ 
+/**
+ * Given a pixel (px, py) inside a rounded rectangle of size (width x height)
+ * with corner radius r, returns:
+ *   dist  — how far the pixel is from the nearest border edge (positive = inside)
+ *   nx,ny — the inward-pointing unit normal at that nearest border point
+ *
+ * This is the single source of truth for both the displacement and specular maps.
+ */
+function roundedRectInfo(px, py, width, height, r) {
+  // Clamp radius so it can't exceed half the shortest side
+  const radius = Math.min(r, width / 2, height / 2);
+ 
+  // Corner arc centres (one per corner, in absolute pixel coords)
+  const corners = [
+    { cx: radius,         cy: radius          }, // top-left
+    { cx: width - radius, cy: radius          }, // top-right
+    { cx: radius,         cy: height - radius }, // bottom-left
+    { cx: width - radius, cy: height - radius }, // bottom-right
+  ];
+ 
+  // Which corner zone is this pixel in?
+  const inCorner =
+    (px < radius         || px > width  - radius) &&
+    (py < radius         || py > height - radius);
+ 
+  let dist, nx, ny;
+ 
+  if (inCorner) {
+    // Find the nearest corner arc centre
+    let best = null;
+    let bestDist = Infinity;
+    for (const c of corners) {
+      const d = Math.hypot(px - c.cx, py - c.cy);
+      if (d < bestDist) { bestDist = d; best = c; }
+    }
+    // Distance from the arc = radius - distance from arc centre
+    dist = radius - bestDist;
+    // Inward normal points from pixel toward the arc centre
+    const len = bestDist || 1;
+    nx = (best.cx - px) / len;
+    ny = (best.cy - py) / len;
+  } else {
+    // Flat side — nearest edge is whichever straight side is closest
+    const dLeft   = px;
+    const dRight  = width  - 1 - px;
+    const dTop    = py;
+    const dBottom = height - 1 - py;
+    const minD    = Math.min(dLeft, dRight, dTop, dBottom);
+    dist = minD;
+    if      (minD === dLeft)   { nx =  1; ny = 0; }
+    else if (minD === dRight)  { nx = -1; ny = 0; }
+    else if (minD === dTop)    { nx = 0;  ny =  1; }
+    else                       { nx = 0;  ny = -1; }
+  }
+ 
+  return { dist, nx, ny };
+}
+ 
+// ─── Displacement map generation ─────────────────────────────────────────────
+ 
+function buildDisplacementMap(width, height) {
+  const bezel   = CONFIG.bezelWidth * Math.min(width, height);
+  const samples = 128;
+ 
+  // ── Step 1: Pre-calculate displacement magnitudes along one radius ──
+  const magnitudes = new Float32Array(samples);
+  const incident   = { x: 0, y: 1 };
+ 
+  for (let i = 0; i < samples; i++) {
+    const t        = i / (samples - 1);
+    const normal   = surfaceNormal(t);
+    const refracted = refract(incident, normal, 1.0, CONFIG.ior);
+    magnitudes[i]  = refracted
+      ? (refracted.x - incident.x) * CONFIG.glassThickness * bezel
+      : 0;
+  }
+ 
+  const maxDisp = Math.max(...magnitudes) || 1;
+ 
+  // ── Step 2: Paint every pixel ──
+  const data = new Uint8ClampedArray(width * height * 4);
+ 
+  for (let py = 0; py < height; py++) {
+    for (let px = 0; px < width; px++) {
+      const idx = (py * width + px) * 4;
+ 
+      const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius);
+ 
+      let dispX = 0, dispY = 0;
+ 
+      if (dist >= 0 && dist < bezel) {
+        const t         = dist / bezel;
+        const sampleIdx = Math.min(samples - 1, Math.floor(t * (samples - 1)));
+        const mag       = magnitudes[sampleIdx] / maxDisp;
+        dispX = nx * mag;
+        dispY = ny * mag;
+      }
+ 
+      data[idx]     = Math.round(128 + dispX * 127);
+      data[idx + 1] = Math.round(128 + dispY * 127);
+      data[idx + 2] = 128;
+      data[idx + 3] = 255;
+    }
+  }
+ 
+  return {
+    imageData: new ImageData(data, width, height),
+    maxDisplacement: maxDisp * CONFIG.scaleRatio,
+  };
+}
+ 
+// ─── Specular highlight map generation ───────────────────────────────────────
+ 
+function buildSpecularMap(width, height) {
+  const canvas  = document.createElement('canvas');
+  canvas.width  = width;
+  canvas.height = height;
+  const ctx     = canvas.getContext('2d');
+ 
+  const bezel        = CONFIG.bezelWidth * Math.min(width, height);
+  const lightAngleRad = (CONFIG.specularAngle * Math.PI) / 180;
+  const lightDir     = { x: Math.cos(lightAngleRad), y: Math.sin(lightAngleRad) };
+ 
+  const imageData = ctx.createImageData(width, height);
+  const data      = imageData.data;
+ 
+  for (let py = 0; py < height; py++) {
+    for (let px = 0; px < width; px++) {
+      const idx = (py * width + px) * 4;
+ 
+      const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius);
+ 
+      let intensity = 0;
+ 
+      if (dist >= 0 && dist < bezel) {
+        const t     = dist / bezel;
+        const dot   = nx * lightDir.x + ny * lightDir.y;
+        const rim   = Math.max(0, dot);
+        const slope = Math.abs(surfaceNormal(t).x);
+        const raw   = rim * slope * (1 - t);
+        intensity   = Math.pow(raw, 0.5);
+      }
+ 
+      data[idx]     = Math.round(235 * intensity);
+      data[idx + 1] = Math.round(245 * intensity);
+      data[idx + 2] = Math.round(255 * intensity);
+      data[idx + 3] = Math.round(CONFIG.specularOpacity * 255 * intensity);
+    }
+  }
+ 
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL();
+}
+ 
+// ─── ImageData → data URL ─────────────────────────────────────────────────────
+ 
+function imageDataToDataURL(imageData) {
+  const canvas = document.createElement('canvas'); // Temporary offscreen canvas
+  canvas.width  = imageData.width;
+  canvas.height = imageData.height;
+  canvas.getContext('2d').putImageData(imageData, 0, 0); // Write pixel data into canvas
+  return canvas.toDataURL(); // Export as PNG data URL for SVG feImage
+}
+ 
+// ─── Apply filter to card ─────────────────────────────────────────────────────
+ 
+function applyLiquidGlass() {
+  const card = document.getElementById('card');
+  const rect = card.getBoundingClientRect(); // Get the card's actual rendered size in pixels
+  const w = Math.round(rect.width);
+  const h = Math.round(rect.height);
+ 
+  if (w === 0 || h === 0) return; // Guard: don't run before layout is ready
+ 
+  const { imageData, maxDisplacement } = buildDisplacementMap(w, h); // Generate refraction map
+  const dispDataURL     = imageDataToDataURL(imageData); // Convert to data URL for feImage
+  const specularDataURL = buildSpecularMap(w, h);        // Generate specular highlight map
+ 
+  const dispImg    = document.getElementById('displacement-map-img');    // feImage for displacement
+  const specImg    = document.getElementById('specular-map-img');        // feImage for specular
+  const dispFilter = document.getElementById('displacement-map-filter'); // feDisplacementMap element
+ 
+  dispImg.setAttribute('href', dispDataURL); // Load displacement map into SVG filter
+  dispImg.setAttribute('width',  w);         // Match filter image size to card width
+  dispImg.setAttribute('height', h);         // Match filter image size to card height
+ 
+  specImg.setAttribute('href', specularDataURL); // Load specular map into SVG filter
+  specImg.setAttribute('width',  w);
+  specImg.setAttribute('height', h);
+ 
+  dispFilter.setAttribute('scale', maxDisplacement); // Tell feDisplacementMap the real-pixel scale of the map
+ 
+  // Only overwrite backdrop-filter in Chrome — Firefox ignores SVG filters here
+  // and would lose its CSS fallback blur if we overwrote card.style.backdropFilter
+  const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
+  if (isChrome) {
+    card.style.backdropFilter       = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)'; // Full chain: refraction + blur + colour boost
+    card.style.webkitBackdropFilter = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)'; // Webkit prefix for older Chrome builds
+  }
+}
+ 
+window.addEventListener('load', applyLiquidGlass);   // Run once the page has fully laid out
+window.addEventListener('resize', applyLiquidGlass); // Re-run if the card size changes (e.g. window resize)
+ 
+function applyNavGlass() {
+  const pill = document.getElementById('nav-pill');
+  const rect = pill.getBoundingClientRect();
+  const w = Math.round(rect.width);
+  const h = Math.round(rect.height);
+  if (w === 0 || h === 0) return;
+ 
+  const savedBezel = CONFIG.bezelWidth;
+  const savedScale = CONFIG.scaleRatio;
+  CONFIG.bezelWidth = 0.12;
+  CONFIG.scaleRatio = 1.8;
+ 
+  const { imageData, maxDisplacement } = buildDisplacementMap(w, h);
+  const dispDataURL     = imageDataToDataURL(imageData);
+  const specularDataURL = buildSpecularMap(w, h);
+ 
+  CONFIG.bezelWidth = savedBezel;
+  CONFIG.scaleRatio = savedScale;
+ 
+  document.getElementById('nav-disp-img').setAttribute('href', dispDataURL);
+  document.getElementById('nav-disp-img').setAttribute('width',  w);
+  document.getElementById('nav-disp-img').setAttribute('height', h);
+  document.getElementById('nav-spec-img').setAttribute('href', specularDataURL);
+  document.getElementById('nav-spec-img').setAttribute('width',  w);
+  document.getElementById('nav-spec-img').setAttribute('height', h);
+  document.getElementById('nav-disp-filter').setAttribute('scale', maxDisplacement);
+ 
+  const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
+  if (isChrome) {
+    pill.style.backdropFilter       = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)';
+    pill.style.webkitBackdropFilter = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)';
+  }
+}
+ 
+const navPill = document.getElementById('nav-pill');
+const navBar  = document.getElementById('nav-pill-bar');
+ 
+navBar.addEventListener('click', () => {
+  const isOpen = navPill.classList.contains('open');
+  navPill.classList.toggle('open', !isOpen);
+  setTimeout(applyNavGlass, 320);
+});
+ 
+document.addEventListener('click', (e) => {
+  if (!navPill.contains(e.target)) {
+    navPill.classList.remove('open');
+    setTimeout(applyNavGlass, 320);
+  }
+});
+ 
+window.addEventListener('load', applyNavGlass);
+window.addEventListener('resize', applyNavGlass);
+ 
+ 
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/www/style.css b/www/style.css
index d465a46..bd664e2 100644
--- a/www/style.css
+++ b/www/style.css
@@ -1,47 +1,206 @@
+* { margin: 0; padding: 0; box-sizing: border-box; } /* Remove default browser spacing; include padding/border in element size */
 
-* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column; /* Stack banner and card top to bottom */
+    align-items: center; /* Keep card horizontally centered */
+    justify-content: flex-start; /* Stack from the top rather than centering vertically */
+    background: #0a0e1a url('background.png') center/cover no-repeat;
+}
 
-    body {
-        min-height: 100vh;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: #0a0e1a url('background.png') center/cover no-repeat;
-    }
+.banner {
+    width: 70%;
+    max-height: 280px;
+    overflow: hidden;
+    margin: 5px 5px 10px 5px; /* 5px on top/left/right, 10px on bottom */
+    border-radius: 35px; /* Rounded corners */
+}
 
-    .card {
-        width: min(520px, 88%);
-        padding: 52px;
-        border-radius: 24px;
-        text-align: center;
-        background: rgba(255, 255, 255, 0.06);
-        border: 1px solid rgba(255, 255, 255, 0.14);
-        backdrop-filter: blur(32px) saturate(1.4);
-        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
-    }
+.banner img {
+    width: 100%; /* Stretch image to fill the banner width */
+    height: 100%; /* Fill the banner height */
+    object-fit: cover; /* Crop and center the image rather than squishing it */
+    object-position: center top; /* Anchor to the top so the most important part of the image stays visible */
+    display: block; /* Remove the default inline gap below images */
+}
 
-    h1 {
-        font-size: clamp(36px, 6vw, 52px);
-        font-weight: 300;
-        line-height: 1.1;
-        color: rgba(255, 255, 255, 0.92);
-    }
+.card {
+    width: min(880px, 88%); /* Cap width at 880px, but shrink to 88% of viewport on small screens */
+    height: 540px; /* Fixed height */
+    padding: 40px; /* Inner spacing on all sides */
+    border-radius: 50px; /* Rounded corners */
+    text-align: center; /* Center all text content */
+    background: rgba(255, 255, 255, 0.08); /* Very subtle white tint — more transparent than before so the background breathes through */
+    border: 2px solid rgba(255, 255, 255, 1); /* Slightly brighter border for a crisper glass edge */
+    backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); /* Firefox fallback — blur, colour boost, and slight brightness lift; Chrome overrides this via JS with the SVG refraction filter */
+    -webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); /* Webkit prefix for Safari compatibility */
+    box-shadow:
+        0 24px 60px rgba(0, 0, 0, 0.35), /* Large soft drop shadow for depth/lift */
+        0 0 0 1px rgba(255, 255, 255, 0.08); /* Hairline outer glow ring */
+    position: relative; /* Required so ::before/::after pseudo-elements position relative to the card */
+    overflow: hidden; /* Clip pseudo-elements to the card's rounded corners */
+}
 
-    h1 em {
-        font-style: italic;
-        color: rgba(180, 210, 255, 0.85);
-    }
+/* ── Main specular: top-left corner catch ── */
+.card::before {
+    content: ''; /* Required to render a pseudo-element with no text */
+    position: absolute; /* Layer it on top of the card without affecting layout */
+    inset: 0; /* Stretch to fill all four edges of the card */
+    border-radius: inherit; /* Match the card's rounded corners */
+    background:
+        radial-gradient(
+            ellipse 60% 30% at 10% -5%, /* Tighter ellipse originating just above the top-left corner */
+            rgba(255, 255, 255, 0.28) 0%, /* Bright white at the light source center */
+            transparent 55% /* Fade out before reaching the middle of the card */
+        ),
+        linear-gradient(
+            128deg, /* Diagonal direction: top-left → bottom-right */
+            rgba(255, 255, 255, 0.13) 0%, /* Broad glancing sheen starting at the top-left corner */
+            rgba(255, 255, 255, 0.04) 30%, /* Dim mid-point to keep the fade gradual */
+            transparent 55% /* Fades out before the center */
+        );
+    pointer-events: none; /* Prevent this overlay from blocking mouse interaction */
+}
 
-    .divider {
-        width: 40px;
-        height: 0.5px;
-        background: rgba(255, 255, 255, 0.2);
-        margin: 22px auto;
-    }
+/* ── Glass rim: inset edge highlights ── */
+.card::after {
+    content: ''; /* Required to render the pseudo-element */
+    position: absolute; /* Layer over the card without shifting layout */
+    inset: 0; /* Fill the card edge to edge */
+    border-radius: inherit; /* Match card rounding */
+    background: transparent; /* No fill — only the inset shadow matters here */
+    border: 1px solid transparent; /* Placeholder border so box-shadow inset renders correctly on all sides */
+    border-image: none; /* Ensure no gradient border overrides the transparent border */
+    box-shadow:
+        inset 1px 1px 0 rgba(218, 218, 218, 0.55), /* Bright top and left inner edge — simulates light hitting the glass rim */
+        inset -1px -1px 0 rgba(0, 0, 0, 0.12); /* Darker bottom and right inner edge — simulates shadow on the far side */
+    pointer-events: none; /* Let clicks pass through to card content */
+}
+
+h1 {
+    font-size: clamp(36px, 6vw, 52px); /* Fluid size: min 36px, scales with viewport, max 52px */
+    font-weight: 300; /* Light weight for an elegant look */
+    line-height: 1.1; /* Tight leading for large display text */
+    color: rgba(255, 255, 255, 0.92); /* Near-white, slightly transparent */
+}
+
+h1 em {
+    font-style: italic; /* Standard italic for emphasis */
+    color: rgba(180, 210, 255, 0.85); /* Cool blue tint for italicised words */
+}
+
+.divider {
+    width: 40px; /* Short horizontal rule */
+    height: 0.5px; /* Hairline thickness */
+    background: rgba(255, 255, 255, 0.2); /* Faint white line */
+    margin: 22px auto; /* Vertical spacing + horizontal centering */
+}
+
+p {
+    font-size: 15px;
+    font-weight: 300; /* Light weight to match the heading style */
+    line-height: 1.75; /* Generous leading for readability */
+    color: rgba(255, 255, 255, 0.52); /* Dimmed white — secondary text hierarchy */
+}
+
+/* ── Nav pill wrapper — fixed to top of viewport ── */
+.nav-wrap {
+    position: fixed;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+}
+
+/* ── The pill itself ── */
+.nav-pill {
+    width: 160px;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.30);
+    backdrop-filter: blur(8px) saturate(1.8) brightness(1.05);
+    -webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.05);
+    box-shadow:
+        0 8px 32px rgba(0, 0, 0, 0.25),
+        inset 1px 1px 0 rgba(255, 255, 255, 0.45),
+        inset -1px -1px 0 rgba(0, 0, 0, 0.10);
+    overflow: hidden;
+    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Pill expands and corners soften when open ── */
+.nav-pill.open {
+    border-radius: 22px;
+    width: 200px;
+}
+
+/* ── The always-visible top bar: logo + chevron ── */
+.nav-pill-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 44px;
+    padding: 0 18px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.nav-logo {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.88);
+    letter-spacing: 0.06em;
+}
+
+/* ── Chevron rotates 180° when open ── */
+.nav-chevron {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.nav-pill.open .nav-chevron {
+    transform: rotate(180deg);
+}
+
+/* ── Dropdown — hidden by default, slides down when open ── */
+.nav-dropdown {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 0.2s ease;
+}
+
+.nav-pill.open .nav-dropdown {
+    max-height: 300px;
+    opacity: 1;
+}
+
+.nav-divider {
+    height: 1px;
+    background: rgba(255, 255, 255, 0.12);
+    margin: 0 14px;
+}
+
+.nav-link {
+    display: block;
+    padding: 11px 18px;
+    font-size: 14px;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 0.70);
+    text-decoration: none;
+    transition: color 0.15s ease,
+                background 0.15s ease;
+}
+
+.nav-link:hover {
+    color: rgba(255, 255, 255, 0.95);
+    background: rgba(255, 255, 255, 0.06);
+}
 
-    p {
-        font-size: 15px;
-        font-weight: 300;
-        line-height: 1.75;
-        color: rgba(255, 255, 255, 0.52);
-    }
