<!--
╔════════════════════════════════════════════════════════════════════════════════════╗
║                              SETUP INSTRUCTIONS                                    ║
╠════════════════════════════════════════════════════════════════════════════════════╣
║                                                                                    ║
║  STEP 1 — CREATE A GOOGLE SHEET                                                    ║
║  Go to sheets.google.com, create a new spreadsheet.                                ║
║  Row 1 headers: Timestamp | Name | Email | Project Type | Budget | Description     ║
║  Copy the Sheet ID from the URL (the string between /d/ and /edit).                ║
║                                                                                    ║
║  STEP 2 — CREATE THE APPS SCRIPT                                                   ║
║  Go to script.google.com → New Project → paste this code:                          ║
║                                                                                    ║
║  function doPost(e) {                                                              ║
║    try {                                                                           ║
║      var sheet = SpreadsheetApp                                                    ║
║        .openById("YOUR_SHEET_ID_HERE")                                             ║
║        .getActiveSheet();                                                          ║
║      var data = JSON.parse(e.postData.contents);                                   ║
║      sheet.appendRow([                                                             ║
║        new Date().toLocaleString("en-GB"),                                         ║
║        data.name        || "",                                                     ║
║        data.email       || "",                                                     ║
║        data.projectType || "",                                                     ║
║        data.budget      || "",                                                     ║
║        data.description || ""                                                      ║
║      ]);                                                                           ║
║      return ContentService                                                         ║
║        .createTextOutput(JSON.stringify({ status: "success" }))                    ║
║        .setMimeType(ContentService.MimeType.JSON);                                 ║
║    } catch(err) {                                                                  ║
║      return ContentService                                                         ║
║        .createTextOutput(JSON.stringify({ status: "error", msg: err.message }))   ║
║        .setMimeType(ContentService.MimeType.JSON);                                 ║
║    }                                                                               ║
║  }                                                                                 ║
║  function doGet() {                                                                ║
║    return ContentService.createTextOutput("VANTA endpoint active");                ║
║  }                                                                                 ║
║                                                                                    ║
║  STEP 3 — DEPLOY AS WEB APP                                                        ║
║  Deploy → New Deployment → Web App                                                 ║
║  Execute as: Me  |  Who has access: Anyone                                         ║
║  Click Deploy → Authorise → copy the Web App URL.                                  ║
║                                                                                    ║
║  STEP 4 — WIRE IT UP                                                               ║
║  Find APPS_SCRIPT_URL in the <script> block. Replace the placeholder.              ║
║                                                                                    ║
╚════════════════════════════════════════════════════════════════════════════════════╝
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VANTA — Web &amp; App Developer</title>
<link rel="icon" type="image/png" href="data:image/png;base64,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">
<link rel="apple-touch-icon" href="data:image/png;base64,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">
<meta name="description" content="VANTA — Full-stack development studio. Web apps, mobile experiences, and AI-integrated products. Code sharp. Ship bold.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<style>

/* ─── CUSTOM PROPERTIES ─────────────────────────────────────────────────────────── */
:root {
  --black:     #000000;
  --cyan:      #00f5ff;
  --violet:    #8b00ff;
  --green:     #00ff88;
  --amber:     #ffaa00;
  --red-g:     #ff003c;
  --text:      #d4d4d4;
  --text-dim:  rgba(255,255,255,0.38);
  --card-bg:   #050505;
  --font-head: 'Orbitron', sans-serif;
  --font-body: 'Space Mono', monospace;
}

/* ─── RESET ─────────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: none;
}
a { color: inherit; text-decoration: none; }
button { background: none; border: none; font: inherit; }

/* ─── GLOBAL GRID OVERLAY ───────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.022) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ─── SCANLINES ─────────────────────────────────────────────────────────────────── */
#scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.14) 2px,
    rgba(0,0,0,0.14) 4px
  );
  pointer-events: none;
  z-index: 9000;
  animation: scanlines-drift 14s linear infinite;
}
@keyframes scanlines-drift {
  from { background-position: 0 0; }
  to   { background-position: 0 120px; }
}

/* ─── CUSTOM CURSOR ─────────────────────────────────────────────────────────────── */
#cursor-ring {
  position: fixed;
  width: 28px; height: 28px;
  left: -100px; top: -100px;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 9999;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 14px rgba(0,245,255,0.55), inset 0 0 6px rgba(0,245,255,0.06);
  transition: transform 0.12s, box-shadow 0.2s;
  will-change: left, top;
}
#cursor-ring::before {
  content: '';
  position: absolute;
  width: 1px; height: 100%;
  left: 50%; transform: translateX(-50%);
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}
#cursor-ring::after {
  content: '';
  position: absolute;
  height: 1px; width: 100%;
  top: 50%; transform: translateY(-50%);
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}
#cursor-dot {
  position: fixed;
  width: 5px; height: 5px;
  left: -100px; top: -100px;
  background: var(--cyan);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 14px var(--cyan), 0 0 28px rgba(0,245,255,0.4);
  will-change: left, top;
}

/* ─── LOGO SVG ──────────────────────────────────────────────────────────────────── */
.logo-svg {
  display: block;
  flex-shrink: 0;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(0,245,255,0.5));
  transition: filter 0.3s;
}
.nav-brand:hover .logo-svg { filter: drop-shadow(0 0 12px rgba(0,245,255,0.9)); }
.logo-bl { animation: logo-draw 0.55s 0.3s cubic-bezier(.16,1,.3,1) forwards; }
.logo-sl { animation: logo-draw 0.45s 0.55s cubic-bezier(.16,1,.3,1) forwards; }
.logo-br { animation: logo-draw 0.55s 0.72s cubic-bezier(.16,1,.3,1) forwards; }
.logo-ghost {
  animation: logo-draw 0.55s 0.45s cubic-bezier(.16,1,.3,1) forwards,
             logo-ghost-glitch 6s 2s infinite steps(1);
}
@keyframes logo-draw { to { stroke-dashoffset: 0; } }
@keyframes logo-ghost-glitch {
  0%,88%,100% { transform: translate(0); opacity: 0.35; }
  89% { transform: translate(-3px,0); opacity: 0.75; }
  90% { transform: translate(3px,1px); opacity: 0.2; }
  91% { transform: translate(-1px,0); opacity: 0.6; }
  92% { transform: translate(0); opacity: 0.35; }
}

/* ─── SHARED GLITCH ANIMATION (used on VANTA wordmark + section titles) ─────────── */
.glitch-text {
  position: relative;
  display: inline-block;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  pointer-events: none;
}
.glitch-text::before {
  color: var(--cyan);
  left: 2px;
  clip-path: polygon(0 12%, 100% 12%, 100% 38%, 0 38%);
  animation: glitch-a 6s infinite steps(1);
}
.glitch-text::after {
  color: var(--violet);
  left: -2px;
  clip-path: polygon(0 62%, 100% 62%, 100% 90%, 0 90%);
  animation: glitch-b 6s infinite steps(1);
  animation-delay: -3s;
}

/* ─── NAVIGATION ─────────────────────────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  padding: 18px 60px;
  transition: padding 0.45s cubic-bezier(.16,1,.3,1), background 0.45s, border-color 0.45s, box-shadow 0.45s;
}
#nav.scrolled {
  padding: 12px 60px;
  background: rgba(0,0,0,0.86);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(0,245,255,0.14);
  box-shadow: 0 8px 48px rgba(0,245,255,0.04);
}
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: none;
  flex-shrink: 0;
}
.nav-wordmark {
  font-family: var(--font-head);
  font-weight: 900;
  color: #fff;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.nav-wordmark .wm-main {
  font-size: 1.9rem;
  letter-spacing: 0.22em;
  color: #fff;
  text-shadow: 0 0 30px rgba(0,245,255,0.4);
}
.nav-wordmark .wm-sub {
  font-size: 0.55rem;
  letter-spacing: 0.38em;
  color: var(--cyan);
  opacity: 0.7;
  margin-top: 4px;
  font-weight: 400;
}

/* nav links — centred absolutely */
.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 48px;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  position: relative;
  cursor: none;
  transition: color 0.22s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 0; right: 0;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover { color: var(--cyan); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: none;
  padding: 6px;
  z-index: 900;
  position: relative;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1px;
  background: var(--cyan);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ─── HERO ───────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  will-change: transform;
}
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.38em;
  color: var(--cyan);
  margin-bottom: 28px;
  opacity: 0;
  animation: fade-up 0.9s 0.2s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-name {
  font-family: var(--font-head);
  font-size: clamp(3rem, 11vw, 9.5rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 28px;
  text-shadow:
    1px 1px 0 rgba(0,245,255,0.25),
    2px 2px 0 rgba(0,245,255,0.2),
    3px 3px 0 rgba(0,245,255,0.15),
    4px 4px 0 rgba(0,245,255,0.1),
    5px 5px 0 rgba(0,245,255,0.07),
    0 0 120px rgba(0,245,255,0.16);
  position: relative;
  display: inline-block;
  opacity: 0;
  animation: fade-up 0.9s 0.4s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-name::before,
.hero-name::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  font-family: var(--font-head);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  pointer-events: none;
}
.hero-name::before {
  color: var(--cyan);
  left: 3px;
  clip-path: polygon(0 12%, 100% 12%, 100% 38%, 0 38%);
  animation: glitch-a 5.5s infinite steps(1);
}
.hero-name::after {
  color: var(--violet);
  left: -3px;
  clip-path: polygon(0 62%, 100% 62%, 100% 90%, 0 90%);
  animation: glitch-b 5.5s infinite steps(1);
  animation-delay: -2.75s;
}
@keyframes glitch-a {
  0%,87%,100% { opacity: 0; transform: translate(0); }
  88%  { opacity: 1; transform: translate(-4px,0);   clip-path: polygon(0 10%,100% 10%,100% 35%,0 35%); }
  89%  { opacity: 1; transform: translate(4px,0);    clip-path: polygon(0 20%,100% 20%,100% 42%,0 42%); }
  90%  { opacity: 1; transform: translate(-2px,1px); clip-path: polygon(0 5%,100% 5%,100% 30%,0 30%); }
  91%  { opacity: 0; transform: translate(0); }
}
@keyframes glitch-b {
  0%,87%,100% { opacity: 0; transform: translate(0); }
  88%  { opacity: 1; transform: translate(4px,0);    clip-path: polygon(0 65%,100% 65%,100% 86%,0 86%); }
  89%  { opacity: 1; transform: translate(-4px,0);   clip-path: polygon(0 58%,100% 58%,100% 93%,0 93%); }
  90%  { opacity: 1; transform: translate(2px,-1px); clip-path: polygon(0 70%,100% 70%,100% 96%,0 96%); }
  91%  { opacity: 0; transform: translate(0); }
}

.hero-slogan {
  font-family: var(--font-head);
  font-size: clamp(0.75rem, 2vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--cyan);
  text-shadow: 0 0 30px rgba(0,245,255,0.4);
  margin-bottom: 14px;
  opacity: 0;
  animation: fade-up 0.9s 0.58s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-tagline {
  font-family: var(--font-body);
  font-size: clamp(0.62rem, 1.6vw, 0.82rem);
  color: rgba(255,255,255,0.32);
  letter-spacing: 0.16em;
  margin-bottom: 52px;
  opacity: 0;
  animation: fade-up 0.9s 0.72s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-cta-wrap {
  opacity: 0;
  animation: fade-up 0.9s 0.9s cubic-bezier(.16,1,.3,1) forwards;
}

/* ─── CTA BUTTON ─────────────────────────────────────────────────────────────────── */
.cta-btn {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 18px 48px;
  border: 1px solid var(--cyan);
  position: relative;
  overflow: hidden;
  cursor: none;
  transition: color 0.38s cubic-bezier(.16,1,.3,1);
}
.cta-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--cyan);
  transition: left 0.42s cubic-bezier(.16,1,.3,1);
  z-index: 0;
}
.cta-btn .btn-label { position: relative; z-index: 1; }
.cta-btn:hover { color: #000; box-shadow: 0 0 40px rgba(0,245,255,0.3); }
.cta-btn:hover::before { left: 0; }

/* ─── REVEAL ─────────────────────────────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.22s; }
.reveal-d3 { transition-delay: 0.36s; }

/* ─── SECTIONS / LAYOUT ──────────────────────────────────────────────────────────── */
section { padding: 140px 0; position: relative; z-index: 1; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 60px; }
.section-label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 80px;
}
.section-num {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: var(--cyan);
  opacity: 0.42;
  letter-spacing: 0.28em;
}
.section-label h2 {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
}

/* ─── ABOUT ──────────────────────────────────────────────────────────────────────── */
#about { background: rgba(0,245,255,0.006); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Terminal */
.terminal {
  background: #040404;
  border: 1px solid rgba(0,245,255,0.1);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(0,245,255,0.03), 0 32px 100px rgba(0,0,0,0.9);
}
.terminal-bar {
  background: rgba(0,245,255,0.04);
  border-bottom: 1px solid rgba(0,245,255,0.07);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tb-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tb-dot.r { background: #ff5f57; }
.tb-dot.y { background: #febc2e; }
.tb-dot.g { background: #28c840; }
.tb-title {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: rgba(255,255,255,0.22);
  margin-left: 8px;
  letter-spacing: 0.1em;
}
.terminal-body {
  padding: 28px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 2.1;
  min-height: 250px;
}
.t-line   { color: rgba(255,255,255,0.32); }
.t-prompt { color: var(--cyan); margin-right: 10px; }
.t-cmd    { color: rgba(255,255,255,0.6); }
#t-output { color: var(--cyan); min-height: 2.1em; }
.t-blink  { animation: blink 1s step-start infinite; color: var(--cyan); }
@keyframes blink { 50% { opacity: 0; } }

/* Bio */
.bio-text {
  font-size: 0.84rem;
  line-height: 1.95;
  color: rgba(255,255,255,0.52);
  margin-bottom: 18px;
}
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 36px 0 30px;
}
.tag {
  font-family: var(--font-body);
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  color: var(--cyan);
  border: 1px solid rgba(0,245,255,0.22);
  padding: 6px 14px;
  border-radius: 2px;
  cursor: none;
  transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.tag:hover {
  background: rgba(0,245,255,0.07);
  border-color: var(--cyan);
  box-shadow: 0 0 18px rgba(0,245,255,0.16);
  transform: translateY(-2px);
}
.available-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.32);
}
.avail-dot {
  width: 7px; height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  flex-shrink: 0;
  animation: avail-pulse 2.2s infinite;
}
@keyframes avail-pulse {
  0%,100% { box-shadow: 0 0 6px var(--green); }
  50%      { box-shadow: 0 0 18px var(--green), 0 0 32px rgba(0,255,136,0.28); }
}

/* ─── PORTFOLIO ──────────────────────────────────────────────────────────────────── */
#portfolio { background: #000; }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  perspective: 1200px;
}

@property --ba {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.project-card {
  --ba: 0deg;
  position: relative;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 4px;
  overflow: hidden;
  cursor: none;
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.5s, border-color 0.4s;
}
.project-card:hover {
  border-color: rgba(0,245,255,0.2);
  box-shadow:
    0 36px 90px rgba(0,0,0,0.95),
    0 0 0 1px rgba(0,245,255,0.18),
    0 0 50px rgba(0,245,255,0.07);
}
.project-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 4px;
  background: conic-gradient(
    from var(--ba),
    transparent   0deg,
    rgba(0,245,255,0.55)  60deg,
    rgba(139,0,255,0.45) 180deg,
    transparent  270deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: 0;
  transition: opacity 0.4s;
  animation: border-spin 3s linear infinite paused;
  will-change: --ba;
}
.project-card:hover::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes border-spin { to { --ba: 360deg; } }

.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    transparent 32%,
    rgba(0,245,255,0.055) 50%,
    rgba(139,0,255,0.04) 58%,
    transparent 72%
  );
  transform: translateX(-220%) skewX(-14deg);
  transition: transform 0.75s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  z-index: 2;
}
.project-card:hover::after { transform: translateX(220%) skewX(-14deg); }

.card-inner {
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
  height: 100%;
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.proj-num {
  font-family: var(--font-body);
  font-size: 0.6rem;
  color: rgba(255,255,255,0.14);
  letter-spacing: 0.28em;
}
.badge {
  font-family: var(--font-body);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 4px 10px;
  border-radius: 2px;
}
.badge-live {
  color: var(--green);
  border: 1px solid rgba(0,255,136,0.28);
  background: rgba(0,255,136,0.05);
  animation: pulse-green 2.8s infinite;
}
.badge-dev {
  color: var(--amber);
  border: 1px solid rgba(255,170,0,0.28);
  background: rgba(255,170,0,0.05);
  animation: pulse-amber 2.8s infinite;
}
@keyframes pulse-green {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: 0 0 14px rgba(0,255,136,0.32); }
}
@keyframes pulse-amber {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: 0 0 14px rgba(255,170,0,0.32); }
}
.proj-title {
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  transition: color 0.3s, text-shadow 0.3s;
}
.project-card:hover .proj-title {
  color: var(--cyan);
  text-shadow: 0 0 26px rgba(0,245,255,0.28);
}
.proj-desc {
  font-size: 0.77rem;
  line-height: 1.78;
  color: rgba(255,255,255,0.42);
  flex: 1;
}
.proj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.proj-tags span {
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: rgba(139,0,255,0.82);
  border: 1px solid rgba(139,0,255,0.2);
  padding: 3px 10px;
  border-radius: 2px;
}
.proj-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  opacity: 0.55;
  transition: opacity 0.25s, gap 0.25s;
  cursor: none;
  margin-top: 4px;
}
.proj-link:hover { opacity: 1; gap: 14px; }
.proj-link::after {
  content: '→';
  font-size: 0.75rem;
  transition: transform 0.25s;
}
.proj-link:hover::after { transform: translateX(4px); }
.proj-coming {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,170,0,0.5);
  margin-top: 4px;
}

/* ─── ENQUIRE ────────────────────────────────────────────────────────────────────── */
#enquire {
  background: rgba(139,0,255,0.01);
  display: flex;
  flex-direction: column;
  align-items: center;
}
#enquire .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#enquire .section-label {
  justify-content: center;
}
.enquire-sub {
  font-size: 0.8rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  margin-top: -52px;
  margin-bottom: 56px;
  line-height: 1.7;
  text-align: center;
}
#enquiry-form {
  width: 100%;
  max-width: 760px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}
.form-group { display: flex; flex-direction: column; gap: 9px; }
.form-group.full { margin-bottom: 34px; }
.form-group label {
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(0,245,255,0.016);
  border: 1px solid rgba(0,245,255,0.13);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 14px 16px;
  border-radius: 2px;
  outline: none;
  width: 100%;
  cursor: none;
  transition: border-color 0.28s, box-shadow 0.28s;
  -webkit-appearance: none;
  appearance: none;
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300f5ff' opacity='.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-color: rgba(0,245,255,0.016);
  padding-right: 42px;
}
.form-group select option { background: #0a0a0a; color: #fff; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 28px rgba(0,245,255,0.09);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.16); }
.form-group textarea { resize: vertical; min-height: 134px; }

.submit-wrap { display: flex; justify-content: center; }
.submit-btn {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 18px 54px;
  border: 1px solid var(--cyan);
  position: relative;
  overflow: hidden;
  cursor: none;
  transition: color 0.38s cubic-bezier(.16,1,.3,1), opacity 0.3s;
  margin-top: 10px;
}
.submit-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--cyan);
  transition: left 0.42s cubic-bezier(.16,1,.3,1);
  z-index: 0;
}
.submit-btn .btn-label { position: relative; z-index: 1; }
.submit-btn:hover { color: #000; box-shadow: 0 0 40px rgba(0,245,255,0.3); }
.submit-btn:hover::before { left: 0; }
.submit-btn:disabled { opacity: 0.4; pointer-events: none; }

#form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 0;
  text-align: center;
  animation: fade-up 0.7s cubic-bezier(.16,1,.3,1) both;
}
#form-success.show { display: flex; }
.success-icon {
  font-family: var(--font-head);
  font-size: 2.6rem;
  color: var(--cyan);
  text-shadow: 0 0 28px rgba(0,245,255,0.55);
}
#form-success p {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid rgba(255,255,255,0.038);
  padding: 56px 60px;
  position: relative;
  z-index: 1;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.footer-icons {
  display: flex;
  gap: 24px;
}
.footer-icon {
  display: flex;
  color: rgba(255,255,255,0.26);
  cursor: none;
  transition: color 0.28s, transform 0.28s;
}
.footer-icon:hover { color: var(--cyan); transform: translateY(-4px); }
.footer-icon svg { width: 20px; height: 20px; fill: currentColor; }
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
footer p {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.1em;
}
.footer-slogan {
  font-family: var(--font-head);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  color: rgba(0,245,255,0.35);
  margin-top: 2px;
}
.copy-sym {
  display: inline-block;
  cursor: none;
  transition: color 0.2s;
}
.copy-sym:hover {
  color: var(--cyan);
  animation: char-glitch 0.38s steps(1) both;
}
@keyframes char-glitch {
  0%   { transform: translate(0);        color: var(--cyan); }
  25%  { transform: translate(-2px,1px); color: var(--violet); }
  50%  { transform: translate(2px,-1px); color: var(--red-g); }
  75%  { transform: translate(-1px,0);   color: var(--cyan); }
  100% { transform: translate(0);        color: var(--cyan); }
}

/* ─── TOUCH / NO-HOVER DEVICES — hide custom cursor ─────────────────────────────── */
@media (hover: none) {
  body { cursor: auto; }
  #cursor-ring, #cursor-dot { display: none !important; }
  a, button, .tag, .project-card, input, select, textarea { cursor: auto; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #nav, #nav.scrolled { padding-left: 40px; padding-right: 40px; }
  .container { padding: 0 40px; }
  footer { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* hide centred nav links, show as overlay */
  .nav-links {
    position: fixed;
    inset: 0;
    transform: none;
    left: 0;
    display: none;
    background: rgba(0,0,0,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    z-index: 700;
  }
  .nav-links a { font-size: 1.1rem; letter-spacing: 0.22em; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: flex; }

  /* shrink VANTA wordmark on mobile */
  .nav-wordmark .wm-main { font-size: 1.3rem; }
  .nav-wordmark .wm-sub  { font-size: 0.46rem; }

  #nav { padding: 16px 22px; }
  #nav.scrolled { padding: 11px 22px; }

  .portfolio-grid { grid-template-columns: 1fr; }
  section { padding: 88px 0; }
  footer { padding: 40px 22px; }
  .container { padding: 0 22px; }

  .hero-name { margin-bottom: 20px; }
  .hero-tagline { margin-bottom: 38px; }

  .section-label { margin-bottom: 52px; }
  .card-inner { padding: 26px 20px; }
  .cta-btn, .submit-btn { padding-left: 28px; padding-right: 28px; }

  .enquire-sub { margin-top: -36px; }
}

@media (max-width: 480px) {
  .nav-wordmark .wm-main { font-size: 1.1rem; }
  .hero-slogan { font-size: 0.72rem; }
  .bio-text { font-size: 0.78rem; }
  .form-row { gap: 16px; margin-bottom: 16px; }
  .form-group.full { margin-bottom: 24px; }
  footer { padding: 36px 18px; }
}

</style>
</head>
<body>

<div id="cursor-ring"></div>
<div id="cursor-dot"></div>
<div id="scanlines"></div>

<!-- ═══ NAVIGATION ═══ -->
<nav id="nav">
  <div class="nav-inner">
    <a href="#home" class="nav-brand">
      <!-- Animated </> code bracket logo — slash unchanged, brackets smaller -->
      <svg class="logo-svg" viewBox="0 0 34 34" width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- violet ghost (left bracket offset) -->
        <polyline class="logo-ghost"
          points="12,10 3,17 12,24"
          stroke="#8b00ff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"
          pathLength="100" stroke-dasharray="100" stroke-dashoffset="100" opacity="0.35"
        />
        <!-- < left bracket — half height, sharp outward -->
        <polyline class="logo-bl"
          points="10,10 1,17 10,24"
          stroke="#00f5ff" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"
          pathLength="100" stroke-dasharray="100" stroke-dashoffset="100"
        />
        <!-- / slash — UNCHANGED -->
        <line class="logo-sl"
          x1="20" y1="2" x2="13" y2="32"
          stroke="#00f5ff" stroke-width="2.3" stroke-linecap="round"
          pathLength="100" stroke-dasharray="100" stroke-dashoffset="100"
        />
        <!-- > right bracket — half height, sharp outward -->
        <polyline class="logo-br"
          points="23,10 32,17 23,24"
          stroke="#00f5ff" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round"
          pathLength="100" stroke-dasharray="100" stroke-dashoffset="100"
        />
      </svg>
      <div class="nav-wordmark">
        <span class="wm-main glitch-text" data-text="VANTA">VANTA</span>
        <span class="wm-sub">// DEV STUDIO</span>
      </div>
    </a>
    <div class="nav-links" id="nav-links">
      <a href="#home"      onclick="closeMenu()">Home</a>
      <a href="#about"     onclick="closeMenu()">About</a>
      <a href="#portfolio" onclick="closeMenu()">Portfolio</a>
      <a href="#enquire"   onclick="closeMenu()">Enquire</a>
    </div>
    <button class="nav-toggle" id="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>
  </div>
</nav>

<!-- ═══ HERO ═══ -->
<section class="hero" id="home">
  <canvas id="hero-canvas"></canvas>
  <div class="hero-content" id="hero-content">
    <p class="hero-eyebrow">// AVAILABLE FOR HIRE</p>
    <h1 class="hero-name" data-text="glitch21010">glitch21010</h1>
    <p class="hero-slogan">Code sharp. Ship bold.</p>
    <p class="hero-tagline">Web &amp; App Developer &nbsp;·&nbsp; Digital Experiences</p>
    <div class="hero-cta-wrap">
      <a href="#portfolio" class="cta-btn"><span class="btn-label">View My Work</span></a>
    </div>
  </div>
</section>

<!-- ═══ ABOUT ═══ -->
<section id="about">
  <div class="container">
    <div class="section-label reveal">
      <span class="section-num">01</span>
      <h2 class="glitch-text" data-text="About">About</h2>
    </div>
    <div class="about-grid">
      <div class="terminal reveal reveal-d1">
        <div class="terminal-bar">
          <span class="tb-dot r"></span>
          <span class="tb-dot y"></span>
          <span class="tb-dot g"></span>
          <span class="tb-title">stack.sh</span>
        </div>
        <div class="terminal-body">
          <div class="t-line"><span class="t-prompt">~&nbsp;$</span><span class="t-cmd">skills --list</span></div>
          <div id="t-output"></div>
          <div class="t-line"><span class="t-prompt">~&nbsp;$</span><span class="t-blink">_</span></div>
        </div>
      </div>
      <div class="reveal reveal-d2">
        <p class="bio-text">glitch21010 is the developer behind VANTA — a full-stack studio specialising in futuristic web apps, mobile experiences, and AI-integrated products. Every project is engineered to perform at scale and designed to leave an impression.</p>
        <p class="bio-text">Operates at the intersection of cutting-edge tooling and obsessive craft — from pixel-perfect UI to production-grade backend architecture.</p>
        <p class="bio-text">Stack: React, Flutter, Supabase, Node.js, Figma, GPT-4o, Claude API, brand identity.</p>
        <div class="skill-tags">
          <span class="tag">React</span>
          <span class="tag">Flutter</span>
          <span class="tag">Supabase</span>
          <span class="tag">Node.js</span>
          <span class="tag">TypeScript</span>
          <span class="tag">Next.js</span>
          <span class="tag">GPT-4o</span>
          <span class="tag">Claude API</span>
          <span class="tag">Figma</span>
          <span class="tag">UI/UX</span>
        </div>
        <div class="available-line">
          <span class="avail-dot"></span>
          Available for freelance projects
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ═══ PORTFOLIO ═══ -->
<section id="portfolio">
  <div class="container">
    <div class="section-label reveal">
      <span class="section-num">02</span>
      <h2 class="glitch-text" data-text="Portfolio">Portfolio</h2>
    </div>
    <div class="portfolio-grid">

      <!-- NURA -->
      <article class="project-card reveal reveal-d1">
        <div class="card-inner">
          <div class="card-top">
            <span class="proj-num">001</span>
            <span class="badge badge-dev">IN DEVELOPMENT</span>
          </div>
          <h3 class="proj-title">NURA Health App</h3>
          <p class="proj-desc">AI-powered nutrition tracking app. Camera scan meals, track 10+ nutrients, supplement stacks, and cut/maintain/bulk modes. Built with Flutter, Supabase, and GPT-4o Vision.</p>
          <div class="proj-tags">
            <span>Flutter</span><span>AI</span><span>Nutrition</span><span>Supabase</span>
          </div>
          <p class="proj-coming">Coming soon</p>
        </div>
      </article>

      <!-- ChainLens -->
      <article class="project-card reveal reveal-d2">
        <div class="card-inner">
          <div class="card-top">
            <span class="proj-num">002</span>
            <span class="badge badge-live">LIVE</span>
          </div>
          <h3 class="proj-title">ChainLens</h3>
          <p class="proj-desc">Crypto intelligence platform with live data for 500+ coins, whale tracker, meme radar, alpha signals, multi-wallet portfolio tracking, and an AI chatbot powered by Claude.</p>
          <div class="proj-tags">
            <span>React</span><span>Crypto</span><span>AI</span><span>Real-time Data</span>
          </div>
          <a href="https://chainlensmarket.com" class="proj-link" target="_blank" rel="noopener noreferrer">Visit Site</a>
        </div>
      </article>

      <!-- T90 Training -->
      <article class="project-card reveal reveal-d3">
        <div class="card-inner">
          <div class="card-top">
            <span class="proj-num">003</span>
            <span class="badge badge-live">LIVE</span>
          </div>
          <h3 class="proj-title">T90 Training</h3>
          <p class="proj-desc">Elite fitness coaching client portal. Workout logging, macro tracking, mood check-ins, Solo Levelling-inspired XP rank system, and real-time coach dashboard.</p>
          <div class="proj-tags">
            <span>React</span><span>Fitness</span><span>Gamification</span><span>Coaching</span>
          </div>
          <a href="https://celebrated-parfait-ff0d03.netlify.app/" class="proj-link" target="_blank" rel="noopener noreferrer">Visit Site</a>
        </div>
      </article>

    </div>
  </div>
</section>

<!-- ═══ ENQUIRE ═══ -->
<section id="enquire">
  <div class="container">
    <div class="section-label reveal">
      <span class="section-num">03</span>
      <h2 class="glitch-text" data-text="Start a Project">Start a Project</h2>
    </div>
    <p class="enquire-sub reveal">Fill in your details and I'll be in touch within 48 hours.</p>

    <form id="enquiry-form" class="reveal reveal-d1" novalidate>
      <div class="form-row">
        <div class="form-group">
          <label for="f-name">Full Name</label>
          <input id="f-name" type="text" name="name" required placeholder="Your name">
        </div>
        <div class="form-group">
          <label for="f-email">Email Address</label>
          <input id="f-email" type="email" name="email" required placeholder="your@email.com">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label for="f-type">Project Type</label>
          <select id="f-type" name="projectType" required>
            <option value="" disabled selected>Select type</option>
            <option>Web App</option>
            <option>Mobile App</option>
            <option>UI/UX Design</option>
            <option>Other</option>
          </select>
        </div>
        <div class="form-group">
          <label for="f-budget">Budget</label>
          <select id="f-budget" name="budget" required>
            <option value="" disabled selected>Select budget</option>
            <option>Under £500</option>
            <option>£500–£2,000</option>
            <option>£2,000–£5,000</option>
            <option>£5,000+</option>
          </select>
        </div>
      </div>
      <div class="form-group full">
        <label for="f-desc">Brief Description</label>
        <textarea id="f-desc" name="description" required placeholder="Tell me about your project — what you're building, your timeline, and any technical requirements..."></textarea>
      </div>
      <div class="submit-wrap">
        <button type="submit" class="submit-btn">
          <span class="btn-label">Send Enquiry</span>
        </button>
      </div>
    </form>

    <div id="form-success" role="alert" aria-live="polite">
      <div class="success-icon">✓</div>
      <p>Enquiry sent. I'll be in touch soon.</p>
    </div>
  </div>
</section>

<!-- ═══ FOOTER ═══ -->
<footer>
  <div class="footer-inner">
    <div class="footer-icons">
      <a href="https://github.com/Glitch21010" class="footer-icon" aria-label="GitHub" target="_blank" rel="noopener noreferrer">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
        </svg>
      </a>
      <a href="https://www.linkedin.com/in/lewis-watson-b934ab339" class="footer-icon" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
        </svg>
      </a>
    </div>
    <div class="footer-brand">
      <p class="footer-slogan">Code sharp. Ship bold.</p>
      <p><span class="copy-sym">©</span> 2026 VANTA &nbsp;·&nbsp; All rights reserved</p>
    </div>
  </div>
</footer>

<script>
'use strict';

const APPS_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbzeIGl4gB12xaY6PyBoHz4N6dyUVk0emi8468XynNpU6LazJVjDyH-qDf5-qRoSyysArA/exec';

/* ── CUSTOM CURSOR ────────────────────────────────────────────────────────────── */
(function () {
  const ring = document.getElementById('cursor-ring');
  const dot  = document.getElementById('cursor-dot');
  let mx = -200, my = -200, dx = -200, dy = -200, active = false;

  document.addEventListener('mousemove', e => {
    if (!active) { active = true; ring.style.opacity = '1'; }
    mx = e.clientX; my = e.clientY;
    ring.style.left = mx + 'px';
    ring.style.top  = my + 'px';
  }, { passive: true });

  (function tick() {
    dx += (mx - dx) * 0.13;
    dy += (my - dy) * 0.13;
    dot.style.left = dx + 'px';
    dot.style.top  = dy + 'px';
    requestAnimationFrame(tick);
  })();

  document.querySelectorAll('a,button,.tag,.project-card,input,select,textarea').forEach(el => {
    el.addEventListener('mouseenter', () => {
      ring.style.transform = 'translate(-50%,-50%) scale(1.6)';
      ring.style.boxShadow = '0 0 22px rgba(0,245,255,0.75), inset 0 0 8px rgba(0,245,255,0.12)';
    });
    el.addEventListener('mouseleave', () => {
      ring.style.transform = 'translate(-50%,-50%) scale(1)';
      ring.style.boxShadow = '0 0 14px rgba(0,245,255,0.55), inset 0 0 6px rgba(0,245,255,0.06)';
    });
  });
})();

/* ── NAV + MOBILE ─────────────────────────────────────────────────────────────── */
(function () {
  const nav    = document.getElementById('nav');
  const toggle = document.getElementById('nav-toggle');
  const links  = document.getElementById('nav-links');

  window.addEventListener('scroll', () => {
    nav.classList.toggle('scrolled', window.scrollY > 44);
  }, { passive: true });

  toggle.addEventListener('click', () => {
    const open = links.classList.toggle('open');
    toggle.classList.toggle('open', open);
    toggle.setAttribute('aria-expanded', String(open));
    document.body.style.overflow = open ? 'hidden' : '';
  });
})();

function closeMenu() {
  document.getElementById('nav-links').classList.remove('open');
  document.getElementById('nav-toggle').classList.remove('open');
  document.getElementById('nav-toggle').setAttribute('aria-expanded', 'false');
  document.body.style.overflow = '';
}

/* ── SMOOTH SCROLL ────────────────────────────────────────────────────────────── */
document.querySelectorAll('a[href^="#"]').forEach(a => {
  a.addEventListener('click', e => {
    const sel = a.getAttribute('href');
    if (!sel || sel === '#') return;
    const target = document.querySelector(sel);
    if (!target) return;
    e.preventDefault();
    closeMenu();
    target.scrollIntoView({ behavior: 'smooth' });
  });
});

/* ── HERO CANVAS — CIRCUIT GRID + SIGNAL PARTICLES ───────────────────────────── */
(function () {
  const canvas = document.getElementById('hero-canvas');
  if (!canvas) return;
  const ctx  = canvas.getContext('2d');
  const CELL = 56;
  let W, H, dots, signals;

  function resize() {
    W = canvas.width  = canvas.offsetWidth;
    H = canvas.height = canvas.offsetHeight;
    makeDots(); makeSignals();
  }

  function makeDots() {
    dots = [];
    for (let r = 0; r <= Math.ceil(H/CELL)+1; r++) {
      for (let c = 0; c <= Math.ceil(W/CELL)+1; c++) {
        dots.push({ x: c*CELL, y: r*CELL, phase: Math.random()*Math.PI*2, spd: 0.004+Math.random()*0.007, base: 0.05+Math.random()*0.1 });
      }
    }
  }

  function Signal() { this.init(); }
  Signal.prototype.init = function () {
    this.x  = Math.floor(Math.random()*(Math.ceil(W/CELL)+1))*CELL;
    this.y  = Math.floor(Math.random()*(Math.ceil(H/CELL)+1))*CELL;
    this.tx = this.x; this.ty = this.y;
    this.spd  = 1.0 + Math.random()*2.2;
    this.color= Math.random()>0.52 ? '#00f5ff' : '#8b00ff';
    this.alpha= 0.45 + Math.random()*0.55;
    this.size = 1.4 + Math.random()*2.0;
    this.trail= []; this.tLen = 6+Math.floor(Math.random()*11);
    this.hops = 0; this.maxH = 4+Math.floor(Math.random()*9);
    this.nextTarget();
  };
  Signal.prototype.nextTarget = function () {
    const h = Math.random()>0.5, d = Math.random()>0.5?1:-1;
    if (h) { this.tx = Math.max(0,Math.min(W,this.x+d*CELL)); this.ty = this.y; }
    else   { this.tx = this.x; this.ty = Math.max(0,Math.min(H,this.y+d*CELL)); }
  };
  Signal.prototype.update = function () {
    this.trail.push({x:this.x,y:this.y});
    if (this.trail.length > this.tLen) this.trail.shift();
    const dx=this.tx-this.x, dy=this.ty-this.y, dist=Math.sqrt(dx*dx+dy*dy);
    if (dist < this.spd) {
      this.x=this.tx; this.y=this.ty; this.hops++;
      if (this.hops>=this.maxH) { this.init(); return; }
      this.nextTarget();
    } else { this.x+=dx/dist*this.spd; this.y+=dy/dist*this.spd; }
  };
  Signal.prototype.draw = function () {
    for (let i=0;i<this.trail.length;i++) {
      ctx.beginPath(); ctx.arc(this.trail[i].x,this.trail[i].y,this.size*0.45,0,Math.PI*2);
      ctx.fillStyle=this.color; ctx.globalAlpha=(i/this.trail.length)*this.alpha*0.42; ctx.fill();
    }
    ctx.beginPath(); ctx.arc(this.x,this.y,this.size,0,Math.PI*2);
    ctx.fillStyle=this.color; ctx.globalAlpha=this.alpha; ctx.fill();
    ctx.beginPath(); ctx.arc(this.x,this.y,this.size*2.8,0,Math.PI*2);
    ctx.fillStyle=this.color; ctx.globalAlpha=this.alpha*0.13; ctx.fill();
  };

  function makeSignals() { signals=[]; for(let i=0;i<24;i++) signals.push(new Signal()); }

  let t=0;
  function draw() {
    ctx.clearRect(0,0,W,H); t++;
    dots.forEach(d => {
      const op=d.base*(0.5+0.5*Math.sin(t*d.spd+d.phase));
      ctx.beginPath(); ctx.arc(d.x,d.y,1.1,0,Math.PI*2);
      ctx.fillStyle='rgba(0,245,255,'+op+')'; ctx.globalAlpha=1; ctx.fill();
    });
    signals.forEach(s=>{ s.update(); s.draw(); });
    ctx.globalAlpha=1;
    requestAnimationFrame(draw);
  }

  window.addEventListener('resize', () => { clearTimeout(window._rt); window._rt=setTimeout(resize,120); }, { passive:true });
  resize(); draw();
})();

/* ── HERO 3D PARALLAX ─────────────────────────────────────────────────────────── */
(function () {
  const hero    = document.querySelector('.hero');
  const content = document.getElementById('hero-content');
  if (!hero || !content) return;

  hero.addEventListener('mousemove', e => {
    const cx = window.innerWidth / 2;
    const cy = window.innerHeight / 2;
    const dx = (e.clientX - cx) / cx;
    const dy = (e.clientY - cy) / cy;
    content.style.transform = `perspective(1000px) rotateX(${dy * -4}deg) rotateY(${dx * 4}deg)`;
  }, { passive: true });

  hero.addEventListener('mouseleave', () => {
    content.style.transition = 'transform 0.8s cubic-bezier(.16,1,.3,1)';
    content.style.transform  = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
    setTimeout(() => { content.style.transition = 'transform 0.1s ease-out'; }, 800);
  });
})();

/* ── 3D CARD TILT ─────────────────────────────────────────────────────────────── */
(function () {
  document.querySelectorAll('.project-card').forEach(card => {
    card.addEventListener('mousemove', e => {
      const rect = card.getBoundingClientRect();
      const x = (e.clientX - rect.left) / rect.width  - 0.5;
      const y = (e.clientY - rect.top)  / rect.height - 0.5;
      card.style.transition = 'transform 0.06s ease-out, box-shadow 0.5s, border-color 0.4s';
      card.style.transform  = `perspective(700px) rotateX(${y * -14}deg) rotateY(${x * 14}deg) translateY(-11px) scale(1.02)`;
    }, { passive: true });

    card.addEventListener('mouseleave', () => {
      card.style.transition = 'transform 0.65s cubic-bezier(.16,1,.3,1), box-shadow 0.5s, border-color 0.4s';
      card.style.transform  = 'perspective(700px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1)';
    });
  });
})();

/* ── TYPEWRITER ───────────────────────────────────────────────────────────────── */
(function () {
  const out = document.getElementById('t-output');
  if (!out) return;
  const skills = [
    '\u203a React / Next.js','\u203a Flutter / Dart','\u203a Supabase / PostgreSQL',
    '\u203a Node.js / Express','\u203a TypeScript','\u203a Figma  \u2192  Code',
    '\u203a GPT-4o Vision API','\u203a Claude API','\u203a UI/UX Design','\u203a Brand Identity'
  ];
  let idx=0, ci=0, del=false;
  function tick() {
    const s=skills[idx];
    if (!del) {
      out.textContent=s.slice(0,++ci);
      if (ci===s.length) { del=true; return setTimeout(tick,1900); }
      return setTimeout(tick,72);
    } else {
      out.textContent=s.slice(0,--ci);
      if (ci===2) { del=false; idx=(idx+1)%skills.length; return setTimeout(tick,260); }
      return setTimeout(tick,40);
    }
  }
  setTimeout(tick,900);
})();

/* ── SCROLL REVEAL ────────────────────────────────────────────────────────────── */
(function () {
  const io = new IntersectionObserver(entries => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
  }, { threshold: 0.1 });
  document.querySelectorAll('.reveal').forEach(el => io.observe(el));
})();

/* ── FORM SUBMISSION ──────────────────────────────────────────────────────────── */
(function () {
  const form    = document.getElementById('enquiry-form');
  const success = document.getElementById('form-success');
  if (!form || !success) return;
  const btn   = form.querySelector('.submit-btn');
  const label = btn.querySelector('.btn-label');

  form.addEventListener('submit', async e => {
    e.preventDefault();
    const name        = form.querySelector('[name=name]').value.trim();
    const email       = form.querySelector('[name=email]').value.trim();
    const projectType = form.querySelector('[name=projectType]').value;
    const budget      = form.querySelector('[name=budget]').value;
    const description = form.querySelector('[name=description]').value.trim();
    if (!name||!email||!projectType||!budget||!description) return;
    btn.disabled=true; label.textContent='Sending...';
    try {
      await fetch(APPS_SCRIPT_URL, {
        method:'POST', mode:'no-cors',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify({name,email,projectType,budget,description})
      });
      form.style.display='none';
      success.classList.add('show');
    } catch {
      btn.disabled=false; label.textContent='Error — please try again';
      setTimeout(()=>{ label.textContent='Send Enquiry'; },3200);
    }
  });
})();
</script>
</body>
</html>