diff --git a/app/about/client.tsx b/app/about/client.tsx
index c9e06a6..c5f3e7a 100644
--- a/app/about/client.tsx
+++ b/app/about/client.tsx
@@ -16,17 +16,17 @@ export default function AboutClient() {
 
           <div className="grid lg:grid-cols-2 gap-2xl items-start">
             <div className="space-y-md">
-              <p className="text-zinc-400 text-lead">
+              <p className="text-zinc-400 text-lead font-serif">
                 The Blockchain Student Association at EPFL is dedicated to fostering
                 blockchain education, innovation, and community among students passionate
                 about decentralized technologies.
               </p>
-              <p className="text-zinc-400 text-lead">
+              <p className="text-zinc-400 text-lead font-serif">
                 We believe in the transformative potential of blockchain technology to
                 reshape industries, create new economic models, and build a more
                 transparent and equitable digital future.
               </p>
-              <p className="text-zinc-400 text-lead">
+              <p className="text-zinc-400 text-lead font-serif">
                 Through workshops, hackathons, networking events, and collaborative
                 projects, we provide students with the knowledge, skills, and
                 connections needed to become leaders in the blockchain space.
diff --git a/app/contact/client.tsx b/app/contact/client.tsx
index 257a5aa..3b62f99 100644
--- a/app/contact/client.tsx
+++ b/app/contact/client.tsx
@@ -45,7 +45,7 @@ export default function ContactClient() {
           <h1 className="text-hero font-display text-zinc-50 mb-lg title-shimmer">
             Get in touch
           </h1>
-          <p className="text-zinc-400 text-lead mb-xl max-w-[50ch] mx-auto">
+          <p className="text-zinc-400 text-lead font-serif mb-xl max-w-[50ch] mx-auto">
             Questions about our events, interested in collaborating, or just want to say hello?
             We'd love to hear from you.
           </p>
diff --git a/app/events/client.tsx b/app/events/client.tsx
index 180142a..ff2c874 100644
--- a/app/events/client.tsx
+++ b/app/events/client.tsx
@@ -78,7 +78,7 @@ export default function EventsClient() {
           <h1 className="text-hero font-display text-zinc-50 mb-md title-shimmer">
             Our events
           </h1>
-          <p className="text-zinc-400 text-lead mb-2xl max-w-xl">
+          <p className="text-zinc-400 text-lead font-serif mb-2xl max-w-xl">
             Join us for workshops, hackathons, networking events, and more.
           </p>
 
@@ -130,7 +130,7 @@ export default function EventsClient() {
                     <h3 className="text-display-3 font-display text-zinc-200 mb-2xs group-hover:text-zinc-50 transition-colors duration-300">
                       {event.title}
                     </h3>
-                    <p className="text-zinc-400 leading-relaxed mb-xs max-w-2xl">
+                    <p className="text-zinc-400 leading-relaxed font-serif mb-xs max-w-2xl">
                       {event.description}
                     </p>
                     <p className="text-eyebrow font-mono text-zinc-600 mb-2xs">
diff --git a/app/globals.css b/app/globals.css
index fff5c5c..88fd95f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -57,6 +57,8 @@ html {
     --text-small:      0.875rem;
     --text-eyebrow:    0.75rem;
     --text-micro:      0.6875rem;
+
+    --font-serif: "Google Sans Text", "Switzer", system-ui, sans-serif;
   }
 
   * {
@@ -65,7 +67,7 @@ html {
 
   body {
     @apply bg-background text-foreground;
-    font-family: var(--font-sans);
+    font-family: "Google Sans Text", var(--font-sans), system-ui, sans-serif;
     background-color: #152237;
     background-image:
       linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
@@ -78,7 +80,7 @@ html {
   }
 
   h4, h5, h6 {
-    font-family: var(--font-sans);
+    font-family: "Google Sans Text", var(--font-sans), system-ui, sans-serif;
     font-weight: 500;
   }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index e76d1a5..f1f86cc 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -93,12 +93,18 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark">
       <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Google+Sans+Text:wght@400;500;700&display=swap"
+          rel="stylesheet"
+        />
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
         />
       </head>
-      <body className={`${instrumentSerif.variable} ${switzer.variable} ${monaspace.variable} font-sans antialiased noise`}>
+      <body className={`${instrumentSerif.variable} ${switzer.variable} ${monaspace.variable} antialiased noise`}>
         <Navbar />
         <main className="pt-20 md:pt-24">
           <PageTransition>
diff --git a/app/page.tsx b/app/page.tsx
index f940f7a..ae4d3e1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,7 +17,6 @@ export default function Home() {
   const [showIntro, setShowIntro] = useState(false)
 
   useEffect(() => {
-    // Only show intro on first visit per session
     const hasPlayed = sessionStorage.getItem('intro-played')
     if (!hasPlayed) {
       setShowIntro(true)
@@ -27,7 +26,7 @@ export default function Home() {
 
   return (
     <main className="flex flex-col min-h-screen">
-      {showIntro && <BlockchainIntro />}
+      {showIntro && <BlockchainIntro onComplete={() => setShowIntro(false)} />}
       <Hero />
       <AboutSection />
       <EventsSection />
diff --git a/app/startups/client.tsx b/app/startups/client.tsx
index c72eb62..6293a7c 100644
--- a/app/startups/client.tsx
+++ b/app/startups/client.tsx
@@ -15,7 +15,7 @@ export default function StartupsClient() {
           <h1 className="text-hero font-display text-zinc-50 mb-md title-shimmer">
             Built by our members
           </h1>
-          <p className="text-zinc-400 text-lead mb-2xl max-w-xl">
+          <p className="text-zinc-400 text-lead font-serif mb-2xl max-w-xl">
             Innovative startups created and shaped by BSA members, pushing the boundaries of blockchain technology.
           </p>
 
@@ -39,7 +39,7 @@ export default function StartupsClient() {
                 </div>
                 <div className="p-sm">
                   <h3 className="text-display-3 font-display text-zinc-50 mb-2xs">{startup.title}</h3>
-                  <p className="text-zinc-500 text-sm leading-relaxed line-clamp-2">{startup.description}</p>
+                  <p className="text-zinc-500 text-sm leading-relaxed font-serif line-clamp-2">{startup.description}</p>
                   <span className="inline-block text-zinc-600 text-eyebrow mt-xs group-hover:text-zinc-400 transition-colors">
                     Visit site &rarr;
                   </span>
diff --git a/components/about-section.tsx b/components/about-section.tsx
index 64d4547..717772d 100644
--- a/components/about-section.tsx
+++ b/components/about-section.tsx
@@ -29,7 +29,7 @@ export default function AboutSection() {
             <h2 className="text-display-1 font-display text-zinc-50 mb-md title-shimmer">
               A student-run community for blockchain at EPFL
             </h2>
-            <p className="text-zinc-400 text-lead mb-lg">
+            <p className="text-zinc-400 text-lead font-serif mb-lg">
               Founded in 2018 and officially recognized by EPFL in 2021. Every member
               can vote on the association's direction.
             </p>
@@ -56,7 +56,7 @@ export default function AboutSection() {
                     </span>
                     <div>
                       <h3 className="text-display-2 font-display text-zinc-50 mb-xs">{activity.label}</h3>
-                      <p className="text-zinc-400 leading-relaxed">{activity.description}</p>
+                      <p className="text-zinc-400 leading-relaxed font-serif">{activity.description}</p>
                     </div>
                   </div>
                 </div>
diff --git a/components/about/RoleFAQ.tsx b/components/about/RoleFAQ.tsx
index 123a0a3..5af2aab 100644
--- a/components/about/RoleFAQ.tsx
+++ b/components/about/RoleFAQ.tsx
@@ -75,7 +75,7 @@ export default function RoleFAQ() {
         <h2 className="text-display-1 font-display text-zinc-50 mb-sm title-shimmer">
           Depends on who's asking.
         </h2>
-        <p className="text-zinc-400 text-lead max-w-[50ch]">
+        <p className="text-zinc-400 text-lead font-serif max-w-[50ch]">
           Identify yourself. The answers split two ways.
         </p>
       </div>
@@ -187,7 +187,7 @@ export default function RoleFAQ() {
                 <AccordionTrigger className="text-zinc-200 hover:text-zinc-50 py-lg text-display-3 text-left font-medium">
                   {faq.q}
                 </AccordionTrigger>
-                <AccordionContent className="text-zinc-400 pb-lg text-lead leading-relaxed">
+                <AccordionContent className="text-zinc-400 pb-lg text-lead font-serif leading-relaxed">
                   {faq.a}
                 </AccordionContent>
               </AccordionItem>
diff --git a/components/blockchain-intro.tsx b/components/blockchain-intro.tsx
index f4e568c..4a049ea 100644
--- a/components/blockchain-intro.tsx
+++ b/components/blockchain-intro.tsx
@@ -1,7 +1,6 @@
 "use client"
 
-import { useEffect, useRef, useCallback } from "react"
-import { animate, createTimeline, stagger } from "animejs"
+import { useEffect, useRef, useState } from "react"
 import { BSA_LOGO_PATH } from "./bsa-logo-path"
 
 const COLORS = [
@@ -10,6 +9,7 @@ const COLORS = [
 ]
 
 const BLOCK_COUNT = 10
+const TOTAL_DURATION = 3500
 
 function genHash(i: number): string {
   const c = '0123456789abcdef'
@@ -18,7 +18,6 @@ function genHash(i: number): string {
   return h
 }
 
-// Position blocks in a semicircle arc (top half, opening downward)
 function getArcPosition(index: number, total: number, radius: number) {
   const startAngle = Math.PI * 1.15
   const endAngle = Math.PI * -0.15
@@ -29,75 +28,45 @@ function getArcPosition(index: number, total: number, radius: number) {
   }
 }
 
-export default function BlockchainIntro() {
-  const sectionRef = useRef<HTMLElement>(null)
-  const hasInit = useRef(false)
-  const isDone = useRef(false)
-  const rafId = useRef<number>(0)
-
-  const getProgress = useCallback(() => {
-    if (!sectionRef.current) return 0
-    const rect = sectionRef.current.getBoundingClientRect()
-    const scrollable = sectionRef.current.offsetHeight - window.innerHeight
-    if (scrollable <= 0) return 0
-    return Math.max(0, Math.min(1, -rect.top / scrollable))
-  }, [])
-
-  // Entrance animation
-  useEffect(() => {
-    if (hasInit.current) return
-    hasInit.current = true
-    document.documentElement.classList.add('intro-active')
-
-    const tl = createTimeline({ defaults: { easing: 'easeOutCubic' } })
-
-    tl.add('[data-intro-word]', {
-      opacity: [0, 1],
-      translateY: [60, 0],
-      scale: [0.85, 1],
-      duration: 800,
-      delay: stagger(120),
-    }, 200)
-
-    tl.add('[data-intro-sub]', {
-      opacity: [0, 0.4],
-      translateY: [10, 0],
-      duration: 1000,
-    }, 700)
-
-    animate('[data-scroll-cue]', {
-      opacity: [0.3, 1, 0.3],
-      translateY: [0, 6, 0],
-      duration: 2000,
-      loop: true,
-      easing: 'easeInOutSine',
-      delay: 1200,
-    })
-  }, [])
-
-  // Scroll-driven updates
+const smoothstep = (t: number) => t * t * (3 - 2 * t)
+const clamp01 = (v: number) => Math.max(0, Math.min(1, v))
+
+export default function BlockchainIntro({ onComplete }: { onComplete?: () => void }) {
+  const rafId = useRef(0)
+  const [done, setDone] = useState(false)
+
   useEffect(() => {
-    const update = () => {
-      const p = getProgress()
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    window.scrollTo(0, 0)
 
-      if (p >= 0.85) {
-        document.documentElement.classList.remove('intro-active')
-      } else {
-        document.documentElement.classList.add('intro-active')
-      }
+    const start = performance.now()
+
+    const update = () => {
+      const elapsed = performance.now() - start
+      const p = Math.min(1, elapsed / TOTAL_DURATION)
+
+      // Title words: 0 -> 0.18 with stagger
+      document.querySelectorAll<HTMLElement>('[data-intro-word]').forEach((el, i) => {
+        const start = i * 0.04
+        const wp = clamp01((p - start) / 0.14)
+        const ease = smoothstep(wp)
+        el.style.opacity = String(ease)
+        el.style.transform = `translateY(${(1 - ease) * 50}px) scale(${0.85 + ease * 0.15})`
+      })
 
-      // Phases: animation fills 0-75%, fade is 80-95%, minimal dead space
-      const blockPhase = Math.min(1, p / 0.55)
-      const logoPhase = Math.max(0, Math.min(1, (p - 0.58) / 0.17))
-      const fadePhase = Math.max(0, Math.min(1, (p - 0.8) / 0.12))
+      const subPhase = clamp01((p - 0.1) / 0.18)
+      document.querySelectorAll<HTMLElement>('[data-intro-sub]').forEach((el) => {
+        el.style.opacity = String(subPhase * 0.4)
+        el.style.transform = `translateY(${(1 - subPhase) * 8}px)`
+      })
 
-      // Blocks
+      // Blocks: 0.08 -> 0.55
       document.querySelectorAll<HTMLElement>('[data-block-i]').forEach((el) => {
         const i = parseInt(el.dataset.blockI || '0')
-        const start = (i / BLOCK_COUNT) * 0.7
-        const bp = Math.max(0, Math.min(1, (blockPhase - start) / 0.18))
-        const ease = bp * bp * (3 - 2 * bp) // smoothstep
-
+        const bStart = 0.08 + (i / BLOCK_COUNT) * 0.42
+        const bp = clamp01((p - bStart) / 0.18)
+        const ease = smoothstep(bp)
         el.style.opacity = String(Math.min(1, bp * 2))
         el.style.transform = `scale(${0.2 + ease * 0.8}) rotate(${(1 - ease) * (i % 2 === 0 ? -20 : 20)}deg)`
 
@@ -112,71 +81,58 @@ export default function BlockchainIntro() {
         }
       })
 
-      // Connection lines (more visible)
       document.querySelectorAll<HTMLElement>('[data-conn-i]').forEach((el) => {
         const i = parseInt(el.dataset.connI || '0')
-        const start = ((i + 0.8) / BLOCK_COUNT) * 0.7
-        const cp = Math.max(0, Math.min(1, (blockPhase - start) / 0.12))
+        const cStart = 0.08 + ((i + 0.8) / BLOCK_COUNT) * 0.42
+        const cp = clamp01((p - cStart) / 0.12)
         el.style.opacity = String(cp * 0.9)
       })
 
-      // Hashes
       document.querySelectorAll<HTMLElement>('[data-hash-i]').forEach((el) => {
         const i = parseInt(el.dataset.hashI || '0')
-        const start = (i / BLOCK_COUNT) * 0.7 + 0.06
-        const hp = Math.max(0, Math.min(1, (blockPhase - start) / 0.1))
+        const hStart = 0.08 + (i / BLOCK_COUNT) * 0.42 + 0.04
+        const hp = clamp01((p - hStart) / 0.1)
         el.style.opacity = String(hp)
       })
 
-      // Nonce dots
       document.querySelectorAll<HTMLElement>('[data-dot-i]').forEach((el) => {
         const i = parseInt(el.dataset.dotI || '0')
-        const start = (i / BLOCK_COUNT) * 0.7 + 0.1
-        const dp = Math.max(0, Math.min(1, (blockPhase - start) / 0.08))
+        const dStart = 0.08 + (i / BLOCK_COUNT) * 0.42 + 0.06
+        const dp = clamp01((p - dStart) / 0.08)
         el.style.opacity = String(dp)
         el.style.transform = `scale(${dp * dp})`
       })
 
-      // BSA Logo (animate ALL instances for desktop/mobile)
-      document.querySelectorAll<HTMLElement>('[data-bsa-logo]').forEach((logoEl) => {
-        const ease = logoPhase * logoPhase * (3 - 2 * logoPhase)
-        logoEl.style.opacity = String(logoPhase)
-        logoEl.style.transform = `translate(-50%, -50%) scale(${0.1 + ease * 0.9})`
+      // Logo: 0.5 -> 0.78
+      const logoPhase = clamp01((p - 0.5) / 0.28)
+      const logoEase = smoothstep(logoPhase)
+      document.querySelectorAll<HTMLElement>('[data-bsa-logo]').forEach((el) => {
+        el.style.opacity = String(logoPhase)
+        el.style.transform = `translate(-50%, -50%) scale(${0.1 + logoEase * 0.9})`
       })
-
-      document.querySelectorAll<SVGPathElement>('[data-bsa-path]').forEach((logoPath) => {
-        if (logoPhase > 0) {
-          logoPath.style.filter = `drop-shadow(0 0 ${logoPhase * 25}px rgba(0,255,170,0.3)) drop-shadow(0 0 ${logoPhase * 50}px rgba(77,156,255,0.15))`
-        }
+      document.querySelectorAll<SVGPathElement>('[data-bsa-path]').forEach((el) => {
+        el.style.filter = `drop-shadow(0 0 ${logoPhase * 25}px rgba(0,255,170,0.3)) drop-shadow(0 0 ${logoPhase * 50}px rgba(77,156,255,0.15))`
       })
 
-      // Title fade
+      // Title fade out: starts at 0.65
+      const titleFade = clamp01((p - 0.65) / 0.2)
       const titleEl = document.querySelector<HTMLElement>('[data-intro-title]')
       if (titleEl) {
-        const fade = Math.max(0, 1 - p * 3)
-        titleEl.style.opacity = String(fade)
-        titleEl.style.transform = `translateY(${-p * 120}px) scale(${1 - p * 0.15})`
+        titleEl.style.opacity = String(1 - titleFade)
+        titleEl.style.transform = `translateY(${-titleFade * 40}px)`
       }
 
-      // Overall fade + collapse when done
+      // Whole overlay fade: 0.82 -> 1.0
+      const fadePhase = clamp01((p - 0.82) / 0.18)
       const sticky = document.querySelector<HTMLElement>('[data-intro-sticky]')
       if (sticky) {
-        const op = 1 - fadePhase
-        sticky.style.opacity = String(op)
-        sticky.style.pointerEvents = op < 0.1 ? 'none' : 'auto'
+        sticky.style.opacity = String(1 - fadePhase)
       }
 
-      // Once fully faded, collapse the section so scrolling up doesn't replay
-      if (fadePhase >= 1 && !isDone.current && sectionRef.current) {
-        isDone.current = true
-        const sectionHeight = sectionRef.current.offsetHeight
-        const currentScroll = window.scrollY
-        sectionRef.current.style.height = '0px'
-        sectionRef.current.style.overflow = 'hidden'
-        // Adjust scroll position so the page doesn't jump
-        window.scrollTo(0, Math.max(0, currentScroll - sectionHeight + window.innerHeight))
-        document.documentElement.classList.remove('intro-active')
-        cancelAnimationFrame(rafId.current)
+      if (p >= 1) {
+        document.body.style.overflow = prevOverflow
+        setDone(true)
+        onComplete?.()
         return
       }
 
@@ -184,178 +140,166 @@ export default function BlockchainIntro() {
     }
 
     rafId.current = requestAnimationFrame(update)
-    return () => cancelAnimationFrame(rafId.current)
-  }, [getProgress])
 
-  useEffect(() => {
-    return () => { document.documentElement.classList.remove('intro-active') }
-  }, [])
+    return () => {
+      cancelAnimationFrame(rafId.current)
+      document.body.style.overflow = prevOverflow
+    }
+  }, [onComplete])
+
+  const skip = () => {
+    cancelAnimationFrame(rafId.current)
+    document.body.style.overflow = ''
+    setDone(true)
+    onComplete?.()
+  }
+
+  if (done) return null
 
   const titleWords = ["Building", "the", "chain"]
-  // Use a safe default, actual sizing handled by CSS
   const arcRadius = 240
   const blockSize = 80
   const mobileArcRadius = 130
   const mobileBlockSize = 48
 
   return (
-    <section
-      ref={sectionRef}
-      className="relative -mt-20 md:-mt-24"
-      style={{ height: '260vh' }}
+    <div
+      data-intro-sticky
+      className="fixed inset-0 z-[60] flex items-center justify-center overflow-hidden bg-[#0d1a2b]"
     >
       <div
-        data-intro-sticky
-        className="sticky top-0 h-screen flex items-center justify-center overflow-hidden bg-[#0d1a2b]"
-        style={{ zIndex: 45 }}
-      >
-        {/* Grid */}
-        <div
-          className="absolute inset-0 pointer-events-none"
-          style={{
-            backgroundImage: 'linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)',
-            backgroundSize: '50px 50px',
-          }}
-        />
-
-        {/* Ambient glow */}
-        <div className="absolute pointer-events-none" style={{
-          width: '700px', height: '700px', borderRadius: '50%',
-          background: 'radial-gradient(circle, rgba(0,255,170,0.03) 0%, rgba(77,156,255,0.02) 40%, transparent 70%)',
-          top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
-        }} />
-
-        {/* Title - positioned above the arc */}
-        <div data-intro-title className="absolute top-[10%] md:top-[8%] text-center px-6 z-10 w-full">
-          <p data-intro-sub className="text-[10px] font-mono text-zinc-600 uppercase tracking-[0.4em] mb-5 opacity-0">
-            Block by block
-          </p>
-          <h2 className="text-5xl md:text-8xl font-display text-zinc-50 leading-[0.9] tracking-tight flex flex-wrap justify-center gap-x-[0.3em]">
-            {titleWords.map((word, i) => (
-              <span key={i} data-intro-word className="inline-block opacity-0">
-                {word}
-              </span>
-            ))}
-          </h2>
-        </div>
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage: 'linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)',
+          backgroundSize: '50px 50px',
+        }}
+      />
+
+      <div className="absolute pointer-events-none" style={{
+        width: '700px', height: '700px', borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(0,255,170,0.03) 0%, rgba(77,156,255,0.02) 40%, transparent 70%)',
+        top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
+      }} />
+
+      <div data-intro-title className="absolute top-[10%] md:top-[8%] text-center px-6 z-10 w-full">
+        <p data-intro-sub className="text-[10px] font-mono text-zinc-600 uppercase tracking-[0.4em] mb-5 opacity-0">
+          Block by block
+        </p>
+        <h2 className="text-5xl md:text-8xl font-display text-zinc-50 leading-[0.9] tracking-tight flex flex-wrap justify-center gap-x-[0.3em]">
+          {titleWords.map((word, i) => (
+            <span key={i} data-intro-word className="inline-block opacity-0">
+              {word}
+            </span>
+          ))}
+        </h2>
+      </div>
 
-        {/* Central container for arc + logo */}
-        <div className="relative flex items-center justify-center">
-          {/* Desktop arc */}
-          <div className="hidden md:block relative" style={{ width: `${arcRadius * 2 + blockSize + 40}px`, height: `${arcRadius * 2 + blockSize + 40}px` }}>
-            {/* BSA Logo center */}
-            <div data-bsa-logo className="absolute opacity-0 overflow-visible" style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%) scale(0.1)', transformOrigin: 'center' }}>
-              <svg viewBox="0 0 200 215" className="w-48 h-48 overflow-visible" fill="none">
-                <path data-bsa-path d={BSA_LOGO_PATH} fill="#fafafa" fillRule="evenodd" />
-              </svg>
-            </div>
-
-            {/* Desktop blocks */}
-            {Array.from({ length: BLOCK_COUNT }).map((_, i) => {
-              const pos = getArcPosition(i, BLOCK_COUNT, arcRadius)
-              const color = COLORS[i % COLORS.length]
-              const nextPos = i < BLOCK_COUNT - 1 ? getArcPosition(i + 1, BLOCK_COUNT, arcRadius) : null
-              const half = blockSize / 2
-              const cx = arcRadius + half + 20
-              const cy = arcRadius + half + 20
-
-              return (
-                <div key={i}>
-                  <div
-                    data-block-i={i}
-                    className="absolute opacity-0 flex flex-col items-center justify-center"
-                    style={{
-                      width: blockSize, height: blockSize,
-                      left: cx + pos.x - half, top: cy + pos.y - half,
-                      borderRadius: 14, border: '1.5px solid #333', background: '#0f1c2e',
-                      transformOrigin: 'center',
-                    }}
-                  >
-                    <span data-hash-i={i} className="font-mono text-[11px] opacity-0" style={{ color }}>
-                      {genHash(i)}
-                    </span>
-                    <div data-dot-i={i} className="absolute -top-1.5 -right-1.5 w-3 h-3 rounded-full opacity-0"
-                      style={{ backgroundColor: color, transformOrigin: 'center' }}
-                    />
-                  </div>
-                  {nextPos && (
-                    <svg data-conn-i={i} className="absolute inset-0 pointer-events-none opacity-0" style={{ overflow: 'visible' }}>
-                      <line
-                        x1={cx + pos.x} y1={cy + pos.y}
-                        x2={cx + nextPos.x} y2={cy + nextPos.y}
-                        stroke={color} strokeWidth="1.5" strokeOpacity="0.7"
-                        strokeDasharray="6 4"
-                      />
-                    </svg>
-                  )}
-                </div>
-              )
-            })}
+      <div className="relative flex items-center justify-center">
+        <div className="hidden md:block relative" style={{ width: `${arcRadius * 2 + blockSize + 40}px`, height: `${arcRadius * 2 + blockSize + 40}px` }}>
+          <div data-bsa-logo className="absolute opacity-0 overflow-visible" style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%) scale(0.1)', transformOrigin: 'center' }}>
+            <svg viewBox="0 0 200 215" className="w-48 h-48 overflow-visible" fill="none">
+              <path data-bsa-path d={BSA_LOGO_PATH} fill="#fafafa" fillRule="evenodd" />
+            </svg>
           </div>
 
-          {/* Mobile arc */}
-          <div className="md:hidden relative" style={{ width: `${mobileArcRadius * 2 + mobileBlockSize + 24}px`, height: `${mobileArcRadius * 2 + mobileBlockSize + 24}px` }}>
-            <div data-bsa-logo className="absolute opacity-0 md:hidden overflow-visible" style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%) scale(0.1)', transformOrigin: 'center' }}>
-              <svg viewBox="0 0 200 215" className="w-24 h-24 overflow-visible" fill="none">
-                <path data-bsa-path d={BSA_LOGO_PATH} fill="#fafafa" fillRule="evenodd" />
-              </svg>
-            </div>
-
-            {Array.from({ length: BLOCK_COUNT }).map((_, i) => {
-              const pos = getArcPosition(i, BLOCK_COUNT, mobileArcRadius)
-              const color = COLORS[i % COLORS.length]
-              const nextPos = i < BLOCK_COUNT - 1 ? getArcPosition(i + 1, BLOCK_COUNT, mobileArcRadius) : null
-              const half = mobileBlockSize / 2
-              const cx = mobileArcRadius + half + 12
-              const cy = mobileArcRadius + half + 12
-
-              return (
-                <div key={i}>
-                  <div
-                    data-block-i={i}
-                    className="absolute opacity-0 flex flex-col items-center justify-center"
-                    style={{
-                      width: mobileBlockSize, height: mobileBlockSize,
-                      left: cx + pos.x - half, top: cy + pos.y - half,
-                      borderRadius: 10, border: '1.5px solid #333', background: '#0f1c2e',
-                      transformOrigin: 'center',
-                    }}
-                  >
-                    <span data-hash-i={i} className="font-mono text-[8px] opacity-0" style={{ color }}>
-                      {genHash(i)}
-                    </span>
-                    <div data-dot-i={i} className="absolute -top-1 -right-1 w-2 h-2 rounded-full opacity-0"
-                      style={{ backgroundColor: color, transformOrigin: 'center' }}
-                    />
-                  </div>
-                  {nextPos && (
-                    <svg data-conn-i={i} className="absolute inset-0 pointer-events-none opacity-0" style={{ overflow: 'visible' }}>
-                      <line
-                        x1={cx + pos.x} y1={cy + pos.y}
-                        x2={cx + nextPos.x} y2={cy + nextPos.y}
-                        stroke={color} strokeWidth="1.5" strokeOpacity="0.7"
-                        strokeDasharray="5 3"
-                      />
-                    </svg>
-                  )}
+          {Array.from({ length: BLOCK_COUNT }).map((_, i) => {
+            const pos = getArcPosition(i, BLOCK_COUNT, arcRadius)
+            const color = COLORS[i % COLORS.length]
+            const nextPos = i < BLOCK_COUNT - 1 ? getArcPosition(i + 1, BLOCK_COUNT, arcRadius) : null
+            const half = blockSize / 2
+            const cx = arcRadius + half + 20
+            const cy = arcRadius + half + 20
+
+            return (
+              <div key={i}>
+                <div
+                  data-block-i={i}
+                  className="absolute opacity-0 flex flex-col items-center justify-center"
+                  style={{
+                    width: blockSize, height: blockSize,
+                    left: cx + pos.x - half, top: cy + pos.y - half,
+                    borderRadius: 14, border: '1.5px solid #333', background: '#0f1c2e',
+                    transformOrigin: 'center',
+                  }}
+                >
+                  <span data-hash-i={i} className="font-mono text-[11px] opacity-0" style={{ color }}>
+                    {genHash(i)}
+                  </span>
+                  <div data-dot-i={i} className="absolute -top-1.5 -right-1.5 w-3 h-3 rounded-full opacity-0"
+                    style={{ backgroundColor: color, transformOrigin: 'center' }}
+                  />
                 </div>
-              )
-            })}
-          </div>
+                {nextPos && (
+                  <svg data-conn-i={i} className="absolute inset-0 pointer-events-none opacity-0" style={{ overflow: 'visible' }}>
+                    <line
+                      x1={cx + pos.x} y1={cy + pos.y}
+                      x2={cx + nextPos.x} y2={cy + nextPos.y}
+                      stroke={color} strokeWidth="1.5" strokeOpacity="0.7"
+                      strokeDasharray="6 4"
+                    />
+                  </svg>
+                )}
+              </div>
+            )
+          })}
         </div>
 
-        {/* Scroll cue */}
-        <button
-          data-scroll-cue
-          onClick={() => window.scrollBy({ top: window.innerHeight * 0.8, behavior: 'smooth' })}
-          className="absolute bottom-10 border border-zinc-600 rounded-full px-5 py-2.5 flex items-center gap-2 hover:border-zinc-400 hover:bg-white/5 active:scale-[0.97] transition-all duration-200 cursor-pointer"
-        >
-          <span className="text-zinc-300 text-xs font-mono uppercase tracking-[0.2em]">Scroll down</span>
-          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className="text-zinc-400">
-            <path d="M6 2v8M2 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-          </svg>
-        </button>
+        <div className="md:hidden relative" style={{ width: `${mobileArcRadius * 2 + mobileBlockSize + 24}px`, height: `${mobileArcRadius * 2 + mobileBlockSize + 24}px` }}>
+          <div data-bsa-logo className="absolute opacity-0 md:hidden overflow-visible" style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%) scale(0.1)', transformOrigin: 'center' }}>
+            <svg viewBox="0 0 200 215" className="w-24 h-24 overflow-visible" fill="none">
+              <path data-bsa-path d={BSA_LOGO_PATH} fill="#fafafa" fillRule="evenodd" />
+            </svg>
+          </div>
+
+          {Array.from({ length: BLOCK_COUNT }).map((_, i) => {
+            const pos = getArcPosition(i, BLOCK_COUNT, mobileArcRadius)
+            const color = COLORS[i % COLORS.length]
+            const nextPos = i < BLOCK_COUNT - 1 ? getArcPosition(i + 1, BLOCK_COUNT, mobileArcRadius) : null
+            const half = mobileBlockSize / 2
+            const cx = mobileArcRadius + half + 12
+            const cy = mobileArcRadius + half + 12
+
+            return (
+              <div key={i}>
+                <div
+                  data-block-i={i}
+                  className="absolute opacity-0 flex flex-col items-center justify-center"
+                  style={{
+                    width: mobileBlockSize, height: mobileBlockSize,
+                    left: cx + pos.x - half, top: cy + pos.y - half,
+                    borderRadius: 10, border: '1.5px solid #333', background: '#0f1c2e',
+                    transformOrigin: 'center',
+                  }}
+                >
+                  <span data-hash-i={i} className="font-mono text-[8px] opacity-0" style={{ color }}>
+                    {genHash(i)}
+                  </span>
+                  <div data-dot-i={i} className="absolute -top-1 -right-1 w-2 h-2 rounded-full opacity-0"
+                    style={{ backgroundColor: color, transformOrigin: 'center' }}
+                  />
+                </div>
+                {nextPos && (
+                  <svg data-conn-i={i} className="absolute inset-0 pointer-events-none opacity-0" style={{ overflow: 'visible' }}>
+                    <line
+                      x1={cx + pos.x} y1={cy + pos.y}
+                      x2={cx + nextPos.x} y2={cy + nextPos.y}
+                      stroke={color} strokeWidth="1.5" strokeOpacity="0.7"
+                      strokeDasharray="5 3"
+                    />
+                  </svg>
+                )}
+              </div>
+            )
+          })}
+        </div>
       </div>
-    </section>
+
+      <button
+        onClick={skip}
+        className="absolute bottom-8 right-8 text-zinc-500 hover:text-zinc-200 text-xs font-mono uppercase tracking-[0.2em] transition-colors duration-200 cursor-pointer"
+      >
+        Skip
+      </button>
+    </div>
   )
 }
diff --git a/components/footer.tsx b/components/footer.tsx
index 494066e..4cfea09 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -25,7 +25,7 @@ export default function Footer() {
 
             {/* Left: wordmark */}
             <div>
-              <p className="text-zinc-50 font-sans text-sm font-medium tracking-wide">
+              <p className="text-zinc-50 text-sm font-medium tracking-wide">
                 BSA
                 <span className="text-zinc-500 ml-1">EPFL</span>
               </p>
diff --git a/components/hero.tsx b/components/hero.tsx
index a4662fa..f019a72 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -172,7 +172,7 @@ export default function Hero() {
               <br />
               at EPFL
             </h1>
-            <p data-hero-text data-typewriter className="text-zinc-400 text-lead max-w-[50ch] mb-xl opacity-0">
+            <p data-hero-text data-typewriter className="text-zinc-400 text-lead font-serif max-w-[50ch] mb-xl opacity-0">
               <span data-typewriter-text></span>
               <span className="inline-block w-[2px] h-[1.1em] bg-zinc-400 ml-0.5 align-middle animate-pulse" />
             </p>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 133c555..27a7ed2 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
+import { BSA_LOGO_PATH } from "./bsa-logo-path"
 
 const navLinks = [
   { href: "/about", label: "About" },
@@ -41,58 +42,136 @@ export default function Navbar() {
 
   return (
     <>
-      {/* Nav bar - visual only, fades but never loses pointer-events */}
       <header className="fixed top-0 left-0 right-0 z-40 flex justify-center px-4 pt-4">
         <nav
           className={`
-            w-full max-w-3xl rounded-full border border-zinc-800
-            px-6 py-3 flex items-center justify-between
+            group/nav relative w-full max-w-3xl rounded-full
+            flex items-center justify-between
             transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]
             ${navHidden ? 'opacity-0 -translate-y-4' : 'opacity-100 translate-y-0'}
             ${isScrolled
-              ? 'bg-[#152237]/90 backdrop-blur-sm shadow-[0_4px_24px_rgba(0,0,0,0.4)]'
-              : 'bg-[#152237]/80'
+              ? 'px-2.5 py-2 md:pl-3 md:pr-2 bg-[#152237]/85 backdrop-blur-md border border-zinc-700/60 shadow-[0_8px_32px_-8px_rgba(0,0,0,0.5)]'
+              : 'px-3 py-2.5 md:pl-4 md:pr-2.5 bg-[#152237]/70 backdrop-blur-sm border border-zinc-800/80'
             }
           `}
         >
-          <Link href="/" className={`text-zinc-50 font-sans text-sm font-medium tracking-wide transition-opacity duration-300 ${navHidden ? 'pointer-events-none' : ''}`}>
-            BSA
-            <span className="text-zinc-500 ml-1">EPFL</span>
+          {/* Subtle gradient hairline that fades in on scroll */}
+          <span
+            aria-hidden="true"
+            className={`pointer-events-none absolute inset-0 rounded-full transition-opacity duration-500 ${
+              isScrolled ? 'opacity-100' : 'opacity-0'
+            }`}
+            style={{
+              background: 'linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 30%)',
+              maskImage: 'linear-gradient(180deg, black 0%, transparent 60%)',
+              WebkitMaskImage: 'linear-gradient(180deg, black 0%, transparent 60%)',
+            }}
+          />
+
+          {/* LEFT: logo + wordmark */}
+          <Link
+            href="/"
+            aria-label="BSA EPFL — home"
+            className={`
+              group/logo relative flex items-center gap-2.5 pl-1.5 pr-2 py-1 rounded-full
+              text-zinc-50 text-sm font-medium tracking-wide
+              transition-opacity duration-300
+              focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#152237]
+              ${navHidden ? 'pointer-events-none' : ''}
+            `}
+          >
+            <span className="relative inline-flex items-center justify-center">
+              {/* Soft glow that appears on hover */}
+              <span
+                aria-hidden="true"
+                className="absolute inset-0 rounded-full blur-lg opacity-0 group-hover/logo:opacity-60 transition-opacity duration-300"
+                style={{ background: 'radial-gradient(circle, rgba(0,255,170,0.5) 0%, rgba(77,156,255,0.3) 50%, transparent 70%)' }}
+              />
+              <svg
+                viewBox="20 20 160 175"
+                className="relative w-7 h-7 md:w-8 md:h-8 shrink-0 transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover/logo:rotate-[8deg]"
+                fill="none"
+                aria-hidden="true"
+              >
+                <path d={BSA_LOGO_PATH} fill="#fafafa" fillRule="evenodd" />
+              </svg>
+            </span>
+            <span className="hidden sm:inline-flex items-baseline">
+              <span>BSA</span>
+              <span className="ml-1 text-zinc-500 font-mono text-xs tracking-wider transition-colors duration-200 group-hover/logo:text-zinc-400">
+                EPFL
+              </span>
+            </span>
           </Link>
 
-          {/* Desktop links */}
-          <div className={`hidden md:flex items-center gap-6 transition-opacity duration-300 ${navHidden ? 'pointer-events-none' : ''}`}>
+          {/* RIGHT (desktop): nav links + CTA */}
+          <div
+            className={`
+              hidden md:flex items-center gap-0.5 transition-opacity duration-300
+              ${navHidden ? 'pointer-events-none' : ''}
+            `}
+          >
             {navLinks.map((link) => {
               const isActive = pathname === link.href || pathname.startsWith(link.href + '/')
               return (
                 <Link
                   key={link.href}
                   href={link.href}
-                  className={`text-sm transition-colors duration-200 ${
-                    isActive ? 'text-zinc-50' : 'text-zinc-400 hover:text-zinc-50'
-                  }`}
+                  aria-current={isActive ? 'page' : undefined}
+                  className={`
+                    relative px-3 py-1.5 rounded-full text-[13px] tracking-wide
+                    transition-colors duration-200
+                    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300/60
+                    ${isActive
+                      ? 'text-zinc-50'
+                      : 'text-zinc-400 hover:text-zinc-50 hover:bg-white/[0.04]'
+                    }
+                  `}
                 >
-                  {link.label}
+                  <span className="relative inline-block">
+                    {link.label}
+                    {isActive && (
+                      <span
+                        aria-hidden="true"
+                        className="absolute -bottom-0.5 left-0 right-0 h-px rounded-full"
+                        style={{ background: 'linear-gradient(90deg, #00ffaa 0%, #4d9cff 100%)' }}
+                      />
+                    )}
+                  </span>
                 </Link>
               )
             })}
+
             <Link
               href="/contact"
-              className="text-zinc-950 bg-zinc-50 text-sm font-medium rounded-full px-4 py-1.5 hover:bg-zinc-300 active:scale-[0.98] transition-all duration-200"
+              className="
+                ml-2 inline-flex items-center gap-1.5
+                text-zinc-950 bg-zinc-50 text-[13px] font-medium tracking-wide
+                rounded-full px-4 py-1.5
+                shadow-[0_1px_0_0_rgba(255,255,255,0.6)_inset,0_-1px_0_0_rgba(0,0,0,0.08)_inset]
+                hover:bg-white hover:shadow-[0_4px_16px_-4px_rgba(255,255,255,0.3)]
+                active:scale-[0.97]
+                transition-all duration-200
+                focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#152237]
+              "
             >
               Contact
+              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+                <path d="M2 8L8 2M8 2H3.5M8 2V6.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
             </Link>
           </div>
 
-          {/* Mobile hamburger - ALWAYS interactive */}
+          {/* Mobile hamburger */}
           <button
             onClick={() => setIsMenuOpen(!isMenuOpen)}
-            className="md:hidden relative w-8 h-8 flex items-center justify-center z-[70]"
-            aria-label="Toggle menu"
+            className="md:hidden relative w-11 h-11 flex items-center justify-center rounded-full hover:bg-white/[0.04] active:scale-[0.96] transition-all duration-200 z-[70] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300/60 cursor-pointer"
+            aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
+            aria-expanded={isMenuOpen}
           >
-            <span className={`absolute h-px w-5 bg-zinc-300 transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] origin-center ${isMenuOpen ? 'rotate-45' : '-translate-y-1.5'}`} />
-            <span className={`absolute h-px w-5 bg-zinc-300 transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] ${isMenuOpen ? 'opacity-0 scale-x-0' : ''}`} />
-            <span className={`absolute h-px w-5 bg-zinc-300 transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] origin-center ${isMenuOpen ? '-rotate-45' : 'translate-y-1.5'}`} />
+            <span className={`absolute h-px w-5 bg-zinc-200 transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] origin-center ${isMenuOpen ? 'rotate-45' : '-translate-y-1.5'}`} />
+            <span className={`absolute h-px w-5 bg-zinc-200 transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] ${isMenuOpen ? 'opacity-0 scale-x-0' : ''}`} />
+            <span className={`absolute h-px w-5 bg-zinc-200 transition-all duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] origin-center ${isMenuOpen ? '-rotate-45' : 'translate-y-1.5'}`} />
           </button>
         </nav>
       </header>
@@ -100,22 +179,43 @@ export default function Navbar() {
       {/* Mobile overlay */}
       <div
         className={`
-          fixed inset-0 z-[60] bg-[#0d1a2b]/98 backdrop-blur-sm
-          flex flex-col items-center justify-center
+          fixed inset-0 z-[60] bg-[#0d1a2b]/98 backdrop-blur-md
+          flex flex-col
           transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]
           ${isMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}
         `}
       >
+        {/* Subtle ambient glow */}
+        <div
+          aria-hidden="true"
+          className="absolute pointer-events-none"
+          style={{
+            width: '600px', height: '600px', borderRadius: '50%',
+            background: 'radial-gradient(circle, rgba(0,255,170,0.04) 0%, rgba(77,156,255,0.03) 40%, transparent 70%)',
+            top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
+          }}
+        />
+
         <button
           onClick={() => setIsMenuOpen(false)}
-          className="absolute top-6 right-6 w-10 h-10 flex items-center justify-center z-[70]"
+          className="absolute top-6 right-6 w-11 h-11 flex items-center justify-center rounded-full hover:bg-white/[0.04] z-[70] transition-colors duration-200 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-300/60"
           aria-label="Close menu"
         >
           <span className="block h-px w-6 bg-zinc-300 rotate-45 absolute" />
           <span className="block h-px w-6 bg-zinc-300 -rotate-45 absolute" />
         </button>
 
-        <div className="flex flex-col items-center gap-8">
+        {/* Top wordmark in mobile menu */}
+        <div className={`absolute top-7 left-7 flex items-center gap-2.5 transition-all duration-500 ${isMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'}`}>
+          <svg viewBox="20 20 160 175" className="w-7 h-7" fill="none" aria-hidden="true">
+            <path d={BSA_LOGO_PATH} fill="#fafafa" fillRule="evenodd" />
+          </svg>
+          <span className="text-zinc-50 text-sm font-medium tracking-wide">
+            BSA <span className="text-zinc-500 font-mono text-xs ml-0.5">EPFL</span>
+          </span>
+        </div>
+
+        <nav className="flex-1 flex flex-col items-start justify-center gap-1 px-8 relative">
           {navLinks.map((link, i) => {
             const isActive = pathname === link.href || pathname.startsWith(link.href + '/')
             return (
@@ -123,15 +223,29 @@ export default function Navbar() {
                 key={link.href}
                 href={link.href}
                 onClick={() => setIsMenuOpen(false)}
+                aria-current={isActive ? 'page' : undefined}
                 className={`
-                  text-3xl font-display hover:text-zinc-50
+                  group/mlink flex items-center gap-4 py-2
+                  text-5xl font-display
                   transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]
-                  ${isActive ? 'text-zinc-50' : 'text-zinc-400'}
-                  ${isMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}
+                  ${isActive ? 'text-zinc-50' : 'text-zinc-500 hover:text-zinc-50'}
+                  ${isMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}
                 `}
-                style={{ transitionDelay: isMenuOpen ? `${(i + 1) * 80}ms` : '0ms' }}
+                style={{ transitionDelay: isMenuOpen ? `${(i + 1) * 60}ms` : '0ms' }}
               >
-                {link.label}
+                <span className="font-mono text-xs text-zinc-700 tabular-nums w-6">
+                  0{i + 1}
+                </span>
+                <span className="relative">
+                  {link.label}
+                  {isActive && (
+                    <span
+                      aria-hidden="true"
+                      className="absolute -bottom-1 left-0 right-0 h-0.5 rounded-full"
+                      style={{ background: 'linear-gradient(90deg, #00ffaa 0%, #4d9cff 100%)' }}
+                    />
+                  )}
+                </span>
               </Link>
             )
           })}
@@ -140,16 +254,27 @@ export default function Navbar() {
             href="/contact"
             onClick={() => setIsMenuOpen(false)}
             className={`
-              text-zinc-950 bg-zinc-50 text-sm font-medium rounded-full px-6 py-2.5
-              hover:bg-zinc-300 active:scale-[0.98] mt-4
+              mt-12 ml-10 inline-flex items-center gap-2
+              text-zinc-950 bg-zinc-50 text-sm font-medium rounded-full px-6 py-3
+              hover:bg-zinc-200 active:scale-[0.97]
               transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]
-              ${isMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}
+              ${isMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}
             `}
-            style={{ transitionDelay: isMenuOpen ? `${(navLinks.length + 1) * 80}ms` : '0ms' }}
+            style={{ transitionDelay: isMenuOpen ? `${(navLinks.length + 1) * 60}ms` : '0ms' }}
           >
             Contact
+            <svg width="12" height="12" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+              <path d="M2 8L8 2M8 2H3.5M8 2V6.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
           </Link>
-        </div>
+        </nav>
+
+        {/* Footer hint */}
+        <p className={`relative px-8 pb-8 text-eyebrow font-mono text-zinc-700 transition-all duration-500 ${isMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`}
+          style={{ transitionDelay: isMenuOpen ? `${(navLinks.length + 2) * 60}ms` : '0ms' }}
+        >
+          BLOCKCHAIN STUDENT ASSOCIATION — EPFL
+        </p>
       </div>
     </>
   )
diff --git a/tailwind.config.ts b/tailwind.config.ts
index dc527fb..b2ee9f6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -52,6 +52,7 @@ const config: Config = {
       fontFamily: {
         sans: ['var(--font-sans)'],
         display: ['var(--font-display)'],
+        serif: ['var(--font-serif)'],
         mono: ['var(--font-mono)'],
       },
       spacing: {