/* =========================================================
   style.css — shared styles for every page
   Order: 1 Variables · 2 Base · 3 Layout · 4 Header/Nav ·
          5 Buttons · 6 Cards & chips · 7 Hero · 8 Page pieces ·
          9 Projects · 10 Timeline · 11 Contact form · 12 Footer
   Mobile-first: these are the SMALL-screen styles.
   Larger-screen changes live in responsive.css.
   ========================================================= */

/* ---------- 1. DESIGN TOKENS (edit colours/spacing here) ---------- */
:root {
  /* Colours */
  --color-bg: #050914;
  --color-bg-alt: #0a1226;
  --color-surface: rgba(14, 24, 48, 0.62);
  --color-surface-solid: #0e1830;
  --color-border: rgba(96, 150, 255, 0.16);
  --color-border-strong: rgba(34, 211, 238, 0.4);
  --color-text: #e8eef9;
  --color-muted: #9aabc7;
  --color-blue: #3b82f6;
  --color-cyan: #22d3ee;
  --color-error: #ff8a8a;
  --color-success: #5eead4;
  --gradient-accent: linear-gradient(135deg, var(--color-blue), var(--color-cyan));

  /* Typography */
  --font-heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Animation timing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur: 0.45s;
  --dur-slow: 0.8s;

  /* Layout */
  --nav-height: 68px;
  --container: 1160px;
}

/* ---------- 2. BASE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Keeps anchor targets from hiding under the fixed header */
  scroll-padding-top: calc(var(--nav-height) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Subtle background grid (fixed, so it costs almost nothing) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(96, 150, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 150, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 15%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 15%, #000 15%, transparent 75%);
}

/* Soft blue/cyan glow in the corners */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(600px circle at 88% 6%, rgba(59, 130, 246, 0.16), transparent 60%),
    radial-gradient(520px circle at 4% 60%, rgba(34, 211, 238, 0.09), transparent 60%);
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 var(--space-3); color: var(--color-muted); }

a { color: var(--color-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

ul { margin: 0; padding: 0; list-style: none; }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(34, 211, 238, 0.3); }

/* Skip link: appears only when focused with the keyboard */
.skip-link {
  position: fixed;
  top: -60px;
  left: var(--space-3);
  z-index: 200;
  padding: 0.6rem 1rem;
  background: var(--color-cyan);
  color: #031018;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--space-3); text-decoration: none; }

/* Text that is hidden visually but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. LAYOUT HELPERS ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section { padding-block: var(--space-6); position: relative; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(10, 18, 38, 0.7), transparent); }

.section-head { max-width: 640px; margin-bottom: var(--space-5); }

/* Small monospace label above headings */
.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.gradient-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }

/* ---------- 4. HEADER & NAVIGATION ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-height);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease);
}

/* main.js adds .is-scrolled after you scroll a little */
.site-header.is-scrolled {
  background: rgba(5, 9, 20, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--color-border);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand .brand-text > span { color: var(--color-cyan); }
.brand:hover { text-decoration: none; }

/* Logo image beside the brand name in the navbar */
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Hamburger button (mobile) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle-bar {
  width: 20px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu panel: hidden until .is-open is added by main.js */
.nav-menu {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  padding: var(--space-3) 1.25rem var(--space-4);
  background: rgba(5, 9, 20, 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  opacity: 0;
  visibility: hidden; /* also removes hidden links from the keyboard tab order */
  transform: translateY(-10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}
.nav-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.nav-list { display: flex; flex-direction: column; gap: var(--space-1); }

.nav-link {
  position: relative;
  display: block;
  padding: 0.85rem 0.5rem;
  min-height: 44px;
  color: var(--color-muted);
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast);
}
.nav-link:hover { color: var(--color-text); text-decoration: none; }

/* Active page highlight (set with aria-current="page" in the HTML) */
.nav-link[aria-current="page"] { color: var(--color-cyan); }

.nav-cta {
  margin-top: var(--space-2);
  text-align: center;
  color: #031018;
  font-weight: 600;
  background: var(--gradient-accent);
  border-radius: var(--radius-pill);
}
.nav-cta:hover { color: #031018; filter: brightness(1.1); }

/* Stop the page scrolling behind the open mobile menu */
body.nav-open { overflow: hidden; }

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px; /* comfortable touch target */
  padding: 0.8rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
    background var(--dur-fast), border-color var(--dur-fast);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 8px 24px rgba(34, 211, 238, 0.14); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn--primary {
  color: #031018;
  border-color: transparent;
  background: var(--gradient-accent);
  box-shadow: 0 6px 22px rgba(59, 130, 246, 0.3);
}
.btn--primary:hover { box-shadow: 0 10px 30px rgba(34, 211, 238, 0.35); }

.btn--secondary { background: var(--color-surface); }
.btn--secondary:hover { background: rgba(34, 211, 238, 0.08); }

/* Button that has no real link yet: clearly NOT clickable */
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  border-style: dashed;
  box-shadow: none;
  transform: none;
  background: transparent;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- 6. CARDS, CHIPS & ICONS ---------- */
.card {
  position: relative;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  /* "translate" is separate from "transform", so it never clashes with reveal animations */
  transition: translate var(--dur) var(--ease), border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover {
  translate: 0 -6px;
  border-color: var(--color-border-strong);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(34, 211, 238, 0.08),
    0 0 30px rgba(34, 211, 238, 0.07);
}
.card h3 { margin-bottom: var(--space-2); }
.card p:last-child { margin-bottom: 0; }

/* Cards that are entirely a link */
a.card { display: block; color: inherit; }
a.card:hover { text-decoration: none; }

.icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-3);
  color: var(--color-cyan);
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: var(--radius-md);
}
.icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Small pill labels / skill badges */
.chip-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.chip:hover { border-color: var(--color-border-strong); background: rgba(34, 211, 238, 0.1); }

.chip--lg { padding: 0.65rem 1.2rem; font-size: 0.9rem; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-3);
  font-weight: 600;
  font-size: 0.92rem;
}
.link-arrow::after { content: "→"; transition: transform var(--dur-fast) var(--ease); }
.card:hover .link-arrow::after,
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 7. HOME HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + var(--space-5));
  padding-bottom: var(--space-7);
  overflow: hidden;
}

.hero-grid { display: grid; gap: var(--space-6); align-items: center; position: relative; z-index: 1; }

.hero-hello {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--color-cyan);
  margin-bottom: var(--space-2);
}
.hero-title { font-size: clamp(2.6rem, 11vw, 5rem); margin-bottom: var(--space-3); }
.hero-headline {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.hero-tagline {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-cyan);
  margin-bottom: var(--space-3);
}
.hero-text { max-width: 560px; margin-bottom: var(--space-4); }
.hero .chip-list { margin-top: var(--space-5); }

/* Profile image area.
   Layers (outside -> inside):
   .hero-stage  fixed size box everything is positioned against
   .hero-float  slow idle floating (animation)
   .hero-tilt   3D tilt that follows the mouse (set by animations.js)
   .hero-frame  rotating glowing border  ->  .avatar  the photo itself */
.hero-visual { position: relative; display: grid; place-items: center; }

.hero-stage {
  --stage-w: min(74vw, 330px);
  position: relative;
  width: var(--stage-w);
  aspect-ratio: 4 / 5;
}

/* Soft pulsing glow behind the photo */
.hero-glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.28), rgba(59, 130, 246, 0.12) 45%, transparent 70%);
  pointer-events: none;
}

/* Orbit rings: thin circles that slowly rotate, each carrying a glowing dot */
.orbit {
  --size: 126%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  aspect-ratio: 1;
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2); /* centres the circle */
  border: 1px dashed rgba(96, 150, 255, 0.28);
  border-radius: 50%;
  pointer-events: none;
}
.orbit--2 { --size: 146%; border-style: solid; border-color: rgba(34, 211, 238, 0.14); }
.orbit-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--color-cyan);
  box-shadow: 0 0 16px 2px var(--color-cyan);
}
.orbit-dot--blue { background: var(--color-blue); box-shadow: 0 0 16px 2px var(--color-blue); width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }

.hero-float, .hero-tilt { position: absolute; inset: 0; }
.hero-float { z-index: 1; }

.hero-tilt {
  /* --px / --py (-1 to 1) are set by animations.js from the mouse position */
  transform: perspective(900px) rotateX(calc(var(--py, 0) * -6deg)) rotateY(calc(var(--px, 0) * 8deg));
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease);
}

.hero-frame {
  position: absolute;
  inset: 0;
  padding: 3px; /* thickness of the glowing border */
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 60px rgba(34, 211, 238, 0.2), 0 30px 60px rgba(0, 0, 0, 0.5);
}
/* The coloured gradient is a big square that spins behind the photo,
   so only a thin rotating light shows around the edge. */
.hero-frame::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;
  aspect-ratio: 1;
  margin: -80% 0 0 -80%;
  background: conic-gradient(from 0deg, var(--color-cyan), var(--color-blue), rgba(59, 130, 246, 0.08) 40%, rgba(59, 130, 246, 0.08) 60%, var(--color-blue), var(--color-cyan));
}

.avatar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 3px);
  background: var(--color-surface-solid);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* A soft diagonal light that sweeps over the photo now and then */
.avatar-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
  transform: translateX(-120%);
}

/* Floating skill badges around the photo */
.float-badge {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text);
  white-space: nowrap;
  background: rgba(10, 18, 38, 0.72);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.float-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-cyan); box-shadow: 0 0 8px var(--color-cyan); }
.float-badge--1 { top: 20%;  left: -14%; }
.float-badge--2 { top: 30%; right: -16%; }
.float-badge--3 { bottom: 22%; left: -10%; }
.float-badge--4 { bottom: 5%; right: 40%; }
.float-badge--5 { top: -2%;  left: 30%; } 
.float-badge--6 { top: 70%; right: -20%; }

/* Tiny twinkling sparks */
.spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-cyan);
  box-shadow: 0 0 10px var(--color-cyan);
  pointer-events: none;
}
.spark:nth-of-type(1) { top: -6%;  left: 18%; }
.spark:nth-of-type(2) { top: 22%;  right: -22%; }
.spark:nth-of-type(3) { bottom: 14%; left: -24%; }
.spark:nth-of-type(4) { bottom: -8%; right: 24%; }
.spark:nth-of-type(5) { top: 52%;  left: -10%; }

/* Placeholder shown when profile.jpg is missing */
.avatar-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-3);
  background: linear-gradient(160deg, #0f1c3a, #07101f);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.avatar-fallback strong {
  font-family: var(--font-heading);
  font-size: 3.4rem;
  letter-spacing: 0.04em;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.avatar.is-fallback img { display: none; }
.avatar.is-fallback .avatar-fallback { display: flex; }

/* Floating decorative shapes around the image */
.deco { position: absolute; pointer-events: none; z-index: 2; }
.deco--ring {
  width: 74px; height: 74px; top: -22px; right: -14px;
  border: 1px solid rgba(34, 211, 238, 0.5);
  border-radius: 50%;
}
.deco--square {
  width: 46px; height: 46px; bottom: 26px; left: -22px;
  border: 1px solid rgba(59, 130, 246, 0.6);
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.08);
}
.deco--dot {
  width: 12px; height: 12px; bottom: -8px; right: 36px;
  border-radius: 50%;
  background: var(--color-cyan);
  box-shadow: 0 0 18px var(--color-cyan);
}

/* Circuit lines drawn behind the hero (decoration only) */
.hero-circuit {
  position: absolute;
  top: 12%;
  right: -10%;
  width: 70%;
  max-width: 760px;
  opacity: 0.5;
  pointer-events: none;
}
.hero-circuit path { fill: none; stroke: rgba(59, 130, 246, 0.35); stroke-width: 1.2; }
.hero-circuit circle { fill: var(--color-bg); stroke: var(--color-cyan); stroke-width: 1.4; }

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  translate: -50% 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--color-muted);
  text-transform: uppercase;
  transition: opacity var(--dur) var(--ease);
}
.scroll-indicator:hover { text-decoration: none; color: var(--color-cyan); }
.scroll-indicator.is-hidden { opacity: 0; pointer-events: none; }
.scroll-mouse {
  position: relative;
  width: 22px;
  height: 36px;
  border: 1.5px solid var(--color-muted);
  border-radius: 12px;
}
.scroll-mouse::after {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 3px; height: 7px; margin-left: -1.5px;
  background: var(--color-cyan);
  border-radius: 2px;
}

/* ---------- 8. SHARED PAGE PIECES ---------- */
/* Title area at the top of the inner pages */
.page-hero {
  padding-top: calc(var(--nav-height) + var(--space-6));
  padding-bottom: var(--space-4);
}
.page-hero h1 { margin-bottom: var(--space-3); }
.page-hero p { max-width: 680px; font-size: 1.05rem; }

/* Category blocks on the skills page */
.skill-group { margin-bottom: var(--space-6); }
.skill-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 1.15rem;
}
.skill-group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-border), transparent); }
.skill-group .card .icon { margin-bottom: var(--space-2); }

/* Numbered steps (learning approach) */
.step-number { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-cyan); letter-spacing: 0.12em; margin-bottom: var(--space-2); }

/* Philosophy statement on About page */
.philosophy { text-align: center; padding: var(--space-6) var(--space-3); }
.philosophy-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.2rem;
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 8vw, 3.6rem);
  font-weight: 700;
  line-height: 1.1;
}
.philosophy-words span:nth-child(even) { color: var(--color-cyan); }

/* Closing call-to-action panel */
.cta-panel {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(34, 211, 238, 0.06));
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.cta-panel p { max-width: 520px; margin-inline: auto; margin-bottom: var(--space-4); }
.cta-panel .btn-row { justify-content: center; }

/* ---------- 9. PROJECTS ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-5); }
.filter-btn {
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.filter-btn:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.filter-btn[aria-pressed="true"] { color: #031018; background: var(--gradient-accent); border-color: transparent; font-weight: 600; }

.project-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.project-card[hidden] { display: none; }
.project-body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; }
.project-body .btn { margin-top: auto; align-self: flex-start; }
.project-body p { flex: 0 0 auto; margin-bottom: var(--space-4); }
.project-tech { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-cyan); margin-bottom: var(--space-2); }

/* Thumbnail area. To use a real screenshot, replace the .project-thumb contents with an <img>. */
.project-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(34, 211, 238, 0.22), transparent 55%),
    linear-gradient(145deg, #0f1c3a, #07101f);
  border-bottom: 1px solid var(--color-border);
}
.project-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.project-card:hover .project-thumb img,
.project-card:hover .thumb-window { transform: scale(1.05); }

/* Small code-window illustration used as the default thumbnail */
.thumb-window {
  width: 62%;
  padding: 0.7rem 0.8rem 0.9rem;
  background: rgba(5, 9, 20, 0.75);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform 0.7s var(--ease);
}
.thumb-dots { display: flex; gap: 5px; margin-bottom: 0.6rem; }
.thumb-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border-strong); }
.thumb-line { height: 6px; margin-bottom: 6px; border-radius: 3px; background: rgba(96, 150, 255, 0.3); }
.thumb-line:nth-child(3) { width: 70%; background: rgba(34, 211, 238, 0.4); }
.thumb-line:nth-child(4) { width: 45%; }
.thumb-label {
  position: absolute; right: 0.8rem; bottom: 0.7rem;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-cyan);
}

.placeholder-note {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: 0.88rem;
  color: var(--color-muted);
  background: rgba(59, 130, 246, 0.06);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* ---------- 10. EDUCATION TIMELINE ---------- */
.timeline { position: relative; padding-left: 2.2rem; }

/* The vertical connecting line (it "draws" itself when scrolled into view) */
.timeline::before {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px; left: 9px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-cyan), var(--color-blue), rgba(59, 130, 246, 0.1));
  transform-origin: top;
}

.timeline-item { position: relative; margin-bottom: var(--space-5); }
.timeline-item:last-child { margin-bottom: 0; }

.timeline-marker {
  position: absolute;
  top: 1.4rem;
  left: -2.2rem;
  width: 20px; height: 20px;
  background: var(--color-bg);
  border: 2px solid var(--color-cyan);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.5);
}
.timeline-marker::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--color-cyan); }

.timeline-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-2); align-items: center; }
.timeline-year { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-cyan); letter-spacing: 0.1em; }
.status {
  padding: 0.15rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}
.status--done { color: var(--color-success); border-color: rgba(94, 234, 212, 0.35); }
.status--ongoing { color: var(--color-cyan); border-color: rgba(34, 211, 238, 0.5); background: rgba(34, 211, 238, 0.08); }
.timeline-school { font-weight: 600; color: var(--color-text); margin-bottom: 0; }

/* ---------- 11. CONTACT ---------- */
.contact-grid { display: grid; gap: var(--space-5); }

.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; margin-bottom: var(--space-2); font-weight: 600; font-size: 0.92rem; color: var(--color-text); }

.form-control {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1rem;
  font: inherit;
  color: var(--color-text);
  background: rgba(5, 9, 20, 0.7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-control::placeholder { color: #6e7f9c; }
.form-control:hover { border-color: rgba(96, 150, 255, 0.35); }
.form-control:focus { outline: none; border-color: var(--color-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18); }
textarea.form-control { min-height: 150px; resize: vertical; }
.form-control[aria-invalid="true"] { border-color: var(--color-error); }

.field-error { min-height: 1.2em; margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--color-error); }

/* Result message under the form (success / error / info) */
.form-status {
  margin-top: var(--space-3);
  padding: 0;
  border-radius: var(--radius-md);
  font-size: 0.92rem;
}
.form-status:not(:empty) { padding: var(--space-3); border: 1px solid var(--color-border); }
.form-status.is-success { color: var(--color-success); border-color: rgba(94, 234, 212, 0.4); background: rgba(94, 234, 212, 0.06); }
.form-status.is-error { color: var(--color-error); border-color: rgba(255, 138, 138, 0.4); background: rgba(255, 138, 138, 0.06); }
.form-status.is-info { color: var(--color-text); border-color: var(--color-border-strong); background: rgba(59, 130, 246, 0.08); }

.social-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), translate var(--dur) var(--ease);
}
.social-link:hover { text-decoration: none; border-color: var(--color-border-strong); translate: 4px 0; }
.social-link .icon { margin: 0; flex-shrink: 0; }
/* Brand (filled) icons inside .icon boxes, e.g. WhatsApp / LinkedIn */
.icon.icon--brand svg { fill: currentColor; stroke: none; width: 22px; height: 22px; }
/* Social card with no real link yet */
.social-link.is-disabled { opacity: 0.55; border-style: dashed; cursor: not-allowed; }
.social-link.is-disabled:hover { translate: 0 0; border-color: var(--color-border); }
.social-link small { display: block; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.75rem; }

.closing-message {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  color: var(--color-text);
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- 12. FOOTER ---------- */
.site-footer {
  position: relative;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  background: linear-gradient(180deg, rgba(5, 9, 20, 0.4), rgba(5, 9, 20, 0.92));
  border-top: 1px solid var(--color-border);
}
/* Thin glowing line centred on the top border */
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  translate: -50% 0;
  width: min(520px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-cyan), transparent);
}

/* Mobile: one column. Wider screens: see responsive.css */
.footer-grid { display: grid; gap: var(--space-5); padding-bottom: var(--space-5); }

.footer-tagline { margin: var(--space-2) 0; font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-cyan); }
.footer-about { max-width: 340px; font-size: 0.92rem; }

/* Small uppercase column titles */
.footer-heading {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
}
.footer-list a {
  display: inline-block;
  padding-block: 0.3rem;
  font-size: 0.92rem;
  color: var(--color-muted);
  transition: color var(--dur-fast), translate var(--dur) var(--ease);
}
.footer-list a:hover { color: var(--color-cyan); text-decoration: none; translate: 4px 0; }

/* Round social icon buttons (44px = comfortable touch target) */
.social-icons { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: var(--space-3); }
.social-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur) var(--ease),
    translate var(--dur) var(--ease);
}
.social-icon svg { width: 20px; height: 20px; }
a.social-icon:hover {
  color: var(--color-cyan);
  border-color: var(--color-border-strong);
  box-shadow: 0 8px 20px rgba(34, 211, 238, 0.16);
  translate: 0 -3px;
  text-decoration: none;
}
a.social-icon--whatsapp:hover { color: #25d366; border-color: rgba(37, 211, 102, 0.55); box-shadow: 0 8px 20px rgba(37, 211, 102, 0.2); }
/* Icon with no real link yet: clearly NOT clickable */
.social-icon.is-disabled { opacity: 0.5; border-style: dashed; cursor: not-allowed; }

/* Bottom bar: copyright + back to top */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.footer-copy { margin: 0; font-size: 0.82rem; font-family: var(--font-mono); }
.back-to-top { font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-muted); padding-block: 0.3rem; }
.back-to-top:hover { color: var(--color-cyan); text-decoration: none; }

/* ---------- 13. FLOATING WHATSAPP BUTTON ---------- */
.whatsapp-float {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 90; /* above page content, below the header (100) */
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #fff;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.38), 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: scale var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float:hover { scale: 1.08; text-decoration: none; box-shadow: 0 14px 34px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4); }
.whatsapp-float:active { scale: 0.95; }
.whatsapp-float:focus-visible { outline-color: #fff; outline-offset: 4px; }

/* Soft ring that pulses outward (animated in animations.css) */
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #25d366;
}

/* "Chat on WhatsApp" label that slides in on hover / keyboard focus */
.whatsapp-float-label {
  position: absolute;
  right: calc(100% + 0.8rem);
  top: 50%;
  translate: 10px -50%;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast), translate var(--dur) var(--ease);
}
.whatsapp-float:hover .whatsapp-float-label,
.whatsapp-float:focus-visible .whatsapp-float-label { opacity: 1; translate: 0 -50%; }