/* ════════════════════════════════════════════════════════════
   KHALED ALZEER PORTFOLIO — Main Stylesheet
   Design System: Glassmorphism · Dark Theme · Blue/Cyan/Violet
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (Design Tokens)
      All design values defined here as variables.
      Never hardcode colors or values directly.
   ════════════════════════════════════════════ */
:root {

  /* ── Backgrounds & Surfaces ──────────────────
     Layered dark backgrounds from deepest to lightest */
  --ink:    #060810;               /* Deepest background — page base */
  --ink2:   #0c1121;               /* Slightly lighter — alt sections */
  --ink3:   #101828;               /* Even lighter surface */
  --panel:  #131d2e;               /* Panel / card base */
  --card:   rgba(16, 24, 42, 0.85);/* Semi-transparent glass card */
  --line:   rgba(255, 255, 255, 0.07);  /* Default border (subtle) */
  --line2:  rgba(255, 255, 255, 0.12);  /* Hover / active border */

  /* ── Text Colors ─────────────────────────────
     Three levels: primary, secondary, muted */
  --t1: #f1f5ff;   /* Primary text — headings, important content */
  --t2: #8b96b0;   /* Secondary text — body, descriptions */
  --t3: #4a5568;   /* Muted text — labels, comments, placeholders */

  /* ── Accent Colors ───────────────────────────
     Three accent colors + their glow variants */
  --a1:      #2563eb;               /* Electric blue — CTA, links, active */
  --a2:      #06b6d4;               /* Cyan — hover highlights, borders */
  --a3:      #8b5cf6;               /* Violet — ML/AI badges, accents */
  --a1-glow: rgba(37, 99, 235, 0.28);  /* Blue glow for shadows */
  --a2-glow: rgba(6, 182, 212, 0.22);  /* Cyan glow for hover effects */

  /* ── Effects & Transitions ───────────────────*/
  --sh: 0 8px 32px rgba(0, 0, 0, 0.50); /* Default card shadow */
  --e1: cubic-bezier(.22, 1, .36, 1);    /* Smooth — cards, layout */
  --e2: cubic-bezier(.34, 1.56, .64, 1); /* Bouncy — buttons, cursor */

  /* ── Main Gradient ───────────────────────────
     Used in buttons, headings, name mark, borders */
  --grad: linear-gradient(120deg, #2563eb, #06b6d4, #8b5cf6);
}


/* ════════════════════════════════════════════
   2. RESET & BASE STYLES
   ════════════════════════════════════════════ */

/* Universal box-sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;   /* Smooth anchor scrolling */
  overflow-x: hidden;        /* Prevent horizontal scroll */
}

body {
  font-family: 'Inter', sans-serif;
  background: #060810;
  color: var(--t1);
  overflow-x: hidden;
  cursor: none; /* Hidden — replaced by custom JS cursor */

  /* Layered background:
     Layer 1 — subtle dot grid for texture and depth
     Layer 2 — blue ambient glow    (top left)
     Layer 3 — cyan ambient glow    (bottom right)
     Layer 4 — violet ambient glow  (top center) */
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px),
    radial-gradient(ellipse 80% 60% at 10% 10%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(ellipse 60% 70% at 90% 90%, rgba(6,182,212,.08), transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 0%,  rgba(139,92,246,.07), transparent 50%);

  /* Dot grid tile size — other layers cover full viewport */
  background-size: 28px 28px, 100% 100%, 100% 100%, 100% 100%;

  background-color: #060810;
  background-attachment: fixed; /* Parallax-like fixed background */
}

/* ── Text Selection Color ── */
::selection {
  background: rgba(37,99,235,0.30);
  color: #fff;
}

/* ── Custom Scrollbar (webkit browsers) ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--a1), var(--a3));
  border-radius: 2px;
}


/* ════════════════════════════════════════════
   3. KEYFRAME ANIMATIONS
   ════════════════════════════════════════════ */

/* Gradient sweep — animates background-position on text/buttons */
@keyframes gs {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Fade up — used for initial page load appearance */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Float — Hero section floating code snippet cards */
@keyframes cfloat {
  0%, 100% { transform: translateY(0px) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-18px) rotate(var(--rot, 0deg)); }
}

/* Pulse — "Open to opportunities" green status dot */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--a2-glow); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}

/* Blink — terminal cursor and hero role cursor */
@keyframes blink2 {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Scroll — marquee / skills ticker infinite loop */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Ambient blob animations — slow floating background light effects */
@keyframes a1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,-30px) scale(1.1); }
}
@keyframes a2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-30px,40px) scale(0.9); }
}
@keyframes a3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(20px,20px) scale(1.05); }
}
@keyframes a4 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-20px,-15px) scale(1.08); }
}

/* Shimmer — light sweep effect on primary button hover */
@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

/* Drawer slide-in — sidebar drawer entrance from right edge */
@keyframes drawerIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}


/* ════════════════════════════════════════════
   4. CUSTOM CURSOR
      Replaces the default OS cursor with a
      custom dot + ring pair controlled by JS.
   ════════════════════════════════════════════ */

/* Small gradient dot — follows mouse instantly */
.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  border-radius: 50%;
  pointer-events: none; /* Never blocks clicks */
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s var(--e2), width 0.2s var(--e2), height 0.2s var(--e2);
}

/* Outer ring — follows mouse with lerp lag (JS controlled) */
.cursor-ring {
  position: fixed;
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(37,99,235,0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--e1), height 0.3s var(--e1), border-color 0.3s var(--e1);
}

/* Hover state — triggered by JS on interactive elements */
.cursor-dot.hovered  { transform: translate(-50%, -50%) scale(2); }
.cursor-ring.hovered { width: 56px; height: 56px; border-color: rgba(6,182,212,0.70); }


/* ════════════════════════════════════════════
   5. AMBIENT BACKGROUND BLOBS
      Fixed blurred circles creating a soft
      colored ambient light effect on the page.
   ════════════════════════════════════════════ */

/* Base blob style — all blobs share these properties */
.amb-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);    /* Heavy blur = soft light effect */
  pointer-events: none;  /* Never interfere with clicks */
  z-index: 0;
}

/* Blue blob — top left corner */
.amb-1 {
  width: 520px; height: 520px;
  top: -100px; left: -100px;
  background: rgba(37,99,235,0.12);
  animation: a1 14s ease-in-out infinite alternate;
}

/* Cyan blob — bottom right corner */
.amb-2 {
  width: 480px; height: 480px;
  bottom: -100px; right: -80px;
  background: rgba(6,182,212,0.10);
  animation: a2 17s ease-in-out infinite alternate;
}

/* Violet blob — center of page */
.amb-3 {
  width: 380px; height: 380px;
  top: 40%; left: 50%;
  transform: translateX(-50%);
  background: rgba(139,92,246,0.08);
  animation: a3 11s ease-in-out infinite;
}

/* Small blue blob — top right area */
.amb-4 {
  width: 280px; height: 280px;
  top: 20%; right: 10%;
  background: rgba(37,99,235,0.06);
  animation: a4 13s ease-in-out infinite alternate;
}


/* ════════════════════════════════════════════
   6. SCROLL REVEAL SYSTEM
      Elements start hidden and fade up when
      they enter the viewport (JS IntersectionObserver).
   ════════════════════════════════════════════ */

/* Initial hidden state */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s var(--e1);
}

/* Visible state — added by JS when element enters viewport */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for sequential reveal of sibling elements */
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }


/* ════════════════════════════════════════════
   7. GLASS CARD — Base Component
      Reusable glassmorphism card style.
      Used by: About, Projects, Certificates,
      Contact, and Skills cards.
   ════════════════════════════════════════════ */

.glass-card {
  position: relative;
  background: var(--card);                 /* Semi-transparent dark bg */
  backdrop-filter: blur(22px);             /* Blur content behind card */
  -webkit-backdrop-filter: blur(22px);     /* Safari support */
  border: 1px solid var(--line);           /* Subtle white border */
  box-shadow: var(--sh);
  transition: all 0.4s var(--e1);
  overflow: hidden;                        /* Clip the ::before gradient line */
}

/* Gradient top border line — hidden by default, shown on hover */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  background-size: 200% auto;
  opacity: 0;
  transition: opacity 0.4s var(--e1);
  z-index: 1;
}

/* Reveal gradient top border on hover */
.glass-card:hover::before { opacity: 1; }

/* Lift + stronger glow + brighter border on hover */
.glass-card:hover {
  border-color: var(--line2);
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 28px var(--a1-glow);
}


/* ════════════════════════════════════════════
   8. CHIPS & TAGS
      Small pill-shaped labels used for section
      headers (chips) and technology tags (tags).
   ════════════════════════════════════════════ */

/* ── Section Header Chips ── */
/* Large pill used above section titles: "// about.me" */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  border-radius: 9999px;  /* Full pill shape */
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  backdrop-filter: blur(12px);
  margin-bottom: 16px;
}

/* Chip color variants */
.chip-blue   { background: rgba(37,99,235,0.12);  border: 1px solid rgba(37,99,235,0.30);  color: var(--a1); }
.chip-cyan   { background: rgba(6,182,212,0.10);  border: 1px solid rgba(6,182,212,0.28);  color: var(--a2); }
.chip-violet { background: rgba(139,92,246,0.10); border: 1px solid rgba(139,92,246,0.28); color: var(--a3); }

/* ── Technology Tags ── */
/* Small uppercase pills used inside project/cert cards */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* Tag color variants */
.tag-blue   { background: rgba(37,99,235,.10);   border: 1px solid rgba(37,99,235,.28);   color: var(--a1); }
.tag-cyan   { background: rgba(6,182,212,.10);   border: 1px solid rgba(6,182,212,.25);   color: var(--a2); }
.tag-violet { background: rgba(139,92,246,.10);  border: 1px solid rgba(139,92,246,.25);  color: var(--a3); }
.tag-muted  { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); color: var(--t2); }


/* ════════════════════════════════════════════
   9. BUTTONS
   ════════════════════════════════════════════ */

/* ── Primary Button (btn-main) ──
   Gradient fill + shimmer effect on hover
   Used in: Hero CTA "View Projects →" */
.btn-main {
  display: inline-flex;
  align-items: center;
  padding: 14px 36px;
  border-radius: 9999px;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--a1), var(--a2), var(--a3));
  background-size: 200% auto;
  box-shadow: 0 4px 24px var(--a1-glow);
  transition: all 0.3s var(--e2);
  position: relative;
  overflow: hidden; /* Clip the shimmer ::after element */
  cursor: none;
}

/* Shimmer overlay — animated light sweep on hover */
.btn-main::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  transform: skewX(-15deg);
}

.btn-main:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 40px rgba(37,99,235,0.50);
  background-position: right center;
}
.btn-main:hover::after { animation: shimmer 0.6s ease forwards; }

/* ── Ghost Button (btn-ghost) ──
   Glass background + border, turns cyan on hover
   Used in: Hero "Download CV" + sections "View All" */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 14px 36px;
  border-radius: 9999px;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--t1);
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line2);
  backdrop-filter: blur(12px);
  transition: all 0.3s var(--e1);
  cursor: none;
}
.btn-ghost:hover {
  background: rgba(16,24,42,0.95);
  border-color: var(--a2);
  color: var(--a2);
  transform: translateY(-3px);
}

/* ── Nav CTA Button (btn-nav) ──
   Compact gradient button — desktop navbar "Hire Me →" */
.btn-nav {
  display: inline-flex;
  align-items: center;
  padding: 8px 22px;
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  background-size: 200% auto;
  box-shadow: 0 2px 12px var(--a1-glow);
  transition: all 0.3s var(--e2);
  cursor: none;
  white-space: nowrap;
}
.btn-nav:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 20px rgba(37,99,235,0.50);
}

/* ── Icon Button (icon-btn) ──
   Square glass button for social icons
   Used in: Hero socials, Drawer socials */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--t2);
  backdrop-filter: blur(12px);
  transition: all 0.3s var(--e2);
  cursor: none;
  text-decoration: none;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover {
  color: var(--a2);
  border-color: var(--a2);
  box-shadow: 0 0 16px var(--a2-glow);
  transform: scale(1.1) translateY(-2px);
}


/* ════════════════════════════════════════════
   10. NAVIGATION BAR
       Fixed floating pill navbar at top center.
       Desktop: Logo · Links · CTA
       Mobile: Logo · Hamburger
   ════════════════════════════════════════════ */

.navbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);          /* Perfect horizontal center */
  width: min(960px, calc(100% - 40px)); /* Max 960px, 20px padding each side */
  z-index: 200;
  background: rgba(6,8,16,0.70);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid var(--line);
  border-radius: 9999px;                /* Pill / capsule shape */
  box-shadow: 0 4px 32px rgba(0,0,0,0.40);
  transition: all 0.3s var(--e1);       /* Smooth background change on scroll */
}

/* Inner flex container: brand | links | right */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  gap: 16px;
}

/* ── Brand: Avatar + Name ── */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

/* Circular avatar with gradient border */
.nav-avatar {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  /* Gradient border trick using padding-box / border-box */
  background: linear-gradient(var(--ink), var(--ink)) padding-box,
              var(--grad) border-box;
  box-shadow: 0 0 14px var(--a1-glow);
  flex-shrink: 0;
}
.nav-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Shown by JS if profile image fails to load */
.nav-avatar-fallback {
  display: none;
  width: 100%; height: 100%;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--t1);
  background: linear-gradient(135deg, var(--a1), var(--a3));
  border-radius: 50%;
}

/* Name + subtitle stacked vertically */
.nav-name-wrap { display: flex; flex-direction: column; gap: 1px; }

/* Animated gradient name text */
.nav-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gs 5s linear infinite;
}

/* "// AI Student & Developer" subtitle */
.nav-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.63rem;
  font-weight: 400;
  color: var(--a2);
  letter-spacing: 0.04em;
}

/* ── Center Nav Links (desktop only) ── */
.nav-links { display: flex; list-style: none; gap: 4px; }
.nav-links a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--t2);
  text-decoration: none;
  transition: all 0.25s var(--e1);
}
/* Active / hover: glass bg + cyan color */
.nav-links a:hover,
.nav-links a.active {
  background: rgba(6,182,212,0.10);
  color: var(--a2);
}

/* Right side wrapper: holds desktop CTA + mobile hamburger */
.nav-right { display: flex; align-items: center; gap: 10px; }


/* ════════════════════════════════════════════
   11. HAMBURGER BUTTON
       Three-line menu icon — visible on mobile only.
       Animates to ✕ when drawer is open.
   ════════════════════════════════════════════ */

.hamburger {
  display: none; /* Hidden on desktop — shown via media query */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 10px;
  cursor: none;
  padding: 8px;
  transition: all 0.3s var(--e1);
  flex-shrink: 0;
}
.hamburger:hover {
  border-color: var(--a2);
  box-shadow: 0 0 12px var(--a2-glow);
}

/* The three lines */
.hamburger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--t2);
  border-radius: 2px;
  transition: all 0.3s var(--e1);
  transform-origin: center;
}

/* Open state: lines rotate to form ✕ */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg);  background: var(--a2); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--a2); }


/* ════════════════════════════════════════════
   12. SIDEBAR DRAWER
       Mobile navigation panel that slides in
       from the right edge of the screen.
       Z-index 299 — above everything except cursor.
   ════════════════════════════════════════════ */

/* ── Dark Backdrop Overlay ── */
/* Covers the page behind the drawer. Click to close. */
.drawer-overlay {
  display: none;                         /* Hidden by default */
  position: fixed; inset: 0;
  background: rgba(6, 8, 16, 0.70);
  backdrop-filter: blur(4px);
  z-index: 298;                          /* Just below drawer panel */
  opacity: 0;
  transition: opacity 0.3s var(--e1);
}
.drawer-overlay.open {
  display: block;
  opacity: 1;
}

/* ── Drawer Panel ── */
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: 280px;
  height: 100%;
  z-index: 299;
  background: rgba(10, 14, 28, 0.98);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-left: 1px solid var(--line2);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.60);
  display: flex;
  flex-direction: column;
  padding: 24px 20px 32px;
  gap: 8px;
  transform: translateX(100%);           /* Off-screen by default */
  transition: transform 0.35s var(--e1);
}

/* Slide into view when .open is added by JS */
.drawer.open { transform: translateX(0); }

/* ── Drawer Header: Brand + Close Button ── */
.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);  /* Separator line */
}

/* Name + subtitle in drawer header */
.drawer-brand { display: flex; flex-direction: column; gap: 4px; }

/* ✕ Close button — top right of drawer */
.drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line2);
  border-radius: 8px;
  color: var(--t2);
  font-size: 1rem;
  cursor: none;
  transition: all 0.2s var(--e1);
  flex-shrink: 0;
}
.drawer-close:hover {
  color: var(--a2);
  border-color: var(--a2);
  background: rgba(6,182,212,0.08);
}

/* ── Drawer Navigation Links ── */
/* Vertical list of section links inside drawer */
.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1; /* Push CTA and socials to bottom */
}

.drawer-link {
  display: block;
  padding: 13px 16px;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--t2);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.25s var(--e1);
}

/* Hover / active: cyan bg + indent effect */
.drawer-link:hover,
.drawer-link.active {
  color: var(--a2);
  background: rgba(6,182,212,0.08);
  border-color: rgba(6,182,212,0.20);
  padding-left: 22px; /* Visual indent on hover */
}

/* ── Drawer CTA Button ── */
/* Full-width "Hire Me →" at bottom of links */
.drawer-cta {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* ── Drawer Social Icons ── */
/* Row of icon buttons at the very bottom of drawer */
.drawer-socials {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line); /* Separator above socials */
}


/* ════════════════════════════════════════════
   13. HERO SECTION
       Full-viewport section with two columns:
       Left: Text content | Right: Code terminal
   ════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 64px 80px;
  z-index: 1;
  overflow: hidden;
}

/* Subtle grid pattern overlay */
.hero-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(37,99,235,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.05) 1px, transparent 1px);
  background-size: 52px 52px;
  /* Fade grid out toward edges */
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black, transparent);
  z-index: 0;
}

/* Two-column grid: text left, terminal right */
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1100px;
  width: 100%;
}

/* Left column: all text content */
.hero-text { display: flex; flex-direction: column; gap: 0; }

/* Large animated gradient name */
.hero-name {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  background: var(--grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gs 4s linear infinite;
  margin-bottom: 16px;
}

/* Typewriter role line: "> Python Developer|" */
.hero-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  color: var(--a2);
  margin-bottom: 20px;
  min-height: 1.6em; /* Prevent layout shift during typewriter */
}

/* The ">" prompt prefix */
.role-prefix { color: var(--t3); }

/* Blinking cursor after typewriter text */
.cursor-blink {
  display: inline-block;
  animation: blink2 1.1s step-end infinite;
  color: var(--a2);
  margin-left: 2px;
}

/* Short description paragraph */
.hero-desc {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  color: var(--t2);
  line-height: 1.75;
  max-width: 500px;
  margin-bottom: 32px;
}

/* CTA buttons row */
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }

/* Social icon buttons row */
.hero-socials { display: flex; gap: 10px; flex-wrap: wrap; }

/* ���─ Right Column: Terminal ── */
.hero-terminal-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating code snippet cards around the terminal */
.code-float {
  position: absolute;
  background: rgba(6,8,16,0.90);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 8px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  white-space: nowrap;
  z-index: 3;
  pointer-events: none; /* Never block clicks */
}

/* Each float has a custom rotation and animation timing */
.cf1 { top: -30px; right: 10px;  --rot: -3deg; animation: cfloat 8s  ease-in-out infinite; }
.cf2 { bottom: 30px; right: -20px; --rot:  2deg; animation: cfloat 10s ease-in-out infinite; animation-delay: -3s; }
.cf3 { top: -20px; left: -30px;  --rot: -1deg; animation: cfloat 12s ease-in-out infinite; animation-delay: -6s; }

/* ── Terminal Window ── */
.terminal {
  width: 100%;
  max-width: 480px;
  background: rgba(6,8,16,0.90);
  backdrop-filter: blur(24px);
  border: 1px solid var(--line2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.60);
  position: relative;
  z-index: 2;
}

/* macOS-style title bar with colored dots */
.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--line);
}

/* Traffic light dots */
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-r { background: #ff5f57; } /* Red — close */
.dot-y { background: #febc2e; } /* Yellow — minimize */
.dot-g { background: #28c840; } /* Green — maximize */

/* "khaled@portfolio:~$" title */
.term-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.70rem;
  color: var(--t3);
  margin-left: 8px;
}

/* Code content area */
.term-body {
  padding: 20px 20px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  line-height: 1.85;
}

/* Each line of code */
.term-line { display: block; white-space: pre; }

/* ── Syntax Highlighting Colors ── */
.t-kw      { color: var(--a3); }    /* Keywords: import, def, class → violet */
.t-cl      { color: var(--a1); }    /* Class names → blue */
.t-fn      { color: var(--a2); }    /* Function names → cyan */
.t-str     { color: #86efac; }      /* Strings → green */
.t-num     { color: #fb923c; }      /* Numbers → orange */
.t-comment { color: var(--t3); }    /* Comments → muted gray */

/* Blinking block cursor at end of last terminal line */
.cursor-blink2 { animation: blink2 1.1s step-end infinite; color: var(--a2); }


/* ════════════════════════════════════════════
   14. MARQUEE / SKILLS TICKER
       Infinite scrolling banner of technology
       names separated by ◆ diamonds.
   ════════════════════════════════════════════ */

.marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(6,8,16,0.60);
  z-index: 1;
  /* Fade edges for seamless look */
  mask-image: linear-gradient(to right, transparent 0%, black 120px, black calc(100% - 120px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 120px, black calc(100% - 120px), transparent 100%);
}

/* Outer track — hides overflow */
.marquee-track {
  display: flex;
  width: 100%;
  overflow: hidden;
  direction: ltr; /* Always LTR regardless of page direction */
}

/* Inner strip — content duplicated for seamless loop */
.marquee-inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: scroll 40s linear infinite;
  flex-shrink: 0;
}

/* Individual skill names */
.marquee-inner span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--t2);
  padding: 0 18px;
}

/* Diamond separator ◆ */
.marquee-inner .sep { color: var(--a2); padding: 0 2px; }


/* ════════════════════════════════════════════
   15. SECTION BASE STYLES
       Shared styles for all main page sections.
   ════════════════════════════════════════════ */

/* Base section — padding creates breathing room */
.section { position: relative; padding: 110px 64px; z-index: 1; }

/* Alternate background for every other section */
.alt-bg { background: rgba(12,17,33,0.50); }

/* Inner content wrapper — max width + centered */
.section-inner { max-width: 1100px; margin: 0 auto; }

/* Section header block: chip + title + optional subtitle */
.section-header { text-align: center; margin-bottom: 56px; }

/* Animated gradient section title */
.section-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800;
  background: linear-gradient(135deg, #2563eb, #06b6d4, #8b5cf6);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gs 4s linear infinite;
  margin-bottom: 12px;
}

/* Optional subtitle below section title */
.section-sub {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--t2);
  margin-top: 8px;
}


/* ════════════════════════════════════════════
   16. ABOUT SECTION
   ════════════════════════════════════════════ */

/* Two-column grid: card left, bio text right */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* Left card: avatar + name + badges + stats */
.about-card {
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* Circular avatar with gradient border */
.about-avatar-wrap {
  position: relative;
  width: 90px; height: 90px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  background: linear-gradient(var(--ink), var(--ink)) padding-box,
              var(--grad) border-box;
  box-shadow: 0 0 24px var(--a1-glow);
  flex-shrink: 0;
}
.about-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Shown by JS if about image fails to load */
.about-avatar-fallback {
  display: none;
  width: 100%; height: 100%;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--t1);
  background: linear-gradient(135deg, var(--a1), var(--a3));
  border-radius: 50%;
  position: absolute;
  top: 0; left: 0;
}

/* Name below avatar */
.about-name {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--t1);
}

/* "// AI Student & Developer" below name */
.about-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.70rem;
  color: var(--a2);
}

/* University and year badges */
.about-badges { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }
.about-badge {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--t2);
  text-align: left;
}

/* 2×2 stats grid: repos, courses, technologies, projects */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

.stat-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 10px;
  text-align: center;
}

/* Large animated number */
.stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.6rem;
  font-weight: 800;
  background: var(--grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gs 4s linear infinite;
  line-height: 1.2;
}

/* Label under number */
.stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: var(--t3);
  margin-top: 4px;
}

/* Right column: bio text + detail rows */
.about-text { display: flex; flex-direction: column; gap: 24px; }

/* "Building. Learning. Solving." heading */
.about-heading {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--t1);
}

/* Bio paragraph */
.about-bio {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  color: var(--t2);
  line-height: 1.8;
}

/* Location / University / Major / Status rows */
.about-details { display: flex; flex-direction: column; gap: 12px; }

.detail-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Left side label: "LOCATION", "UNIVERSITY", etc. */
.detail-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 90px;
}

/* Right side value */
.detail-val {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--t1);
}

/* "Open to opportunities" with pulsing green dot */
.status-open { display: flex; align-items: center; gap: 8px; }
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse 2s ease-in-out infinite;
}


/* ════════════════════════════════════════════
   17. SKILLS SECTION
       Three tabbed grids: Languages / Frameworks / Tools
   ════════════════════════════════════════════ */

/* Tab buttons row */
.skill-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

/* Individual tab button */
.tab-btn {
  padding: 10px 24px;
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--line2);
  background: var(--card);
  color: var(--t2);
  cursor: none;
  transition: all 0.3s var(--e1);
}
.tab-btn:hover { border-color: var(--a2); color: var(--a2); }

/* Active tab: gradient fill */
.tab-btn.active {
  background: linear-gradient(135deg, var(--a1), var(--a2), var(--a3));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 20px var(--a1-glow);
}

/* Skill chip grid — hidden by default */
.skill-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

/* Active grid — shown when matching tab is selected */
.skill-grid.active { display: grid; }

/* Individual skill chip */
.skill-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  backdrop-filter: blur(12px);
  transition: all 0.3s var(--e2);
  cursor: default;
}
.skill-chip:hover { transform: scale(1.04) translateY(-2px); }

/* Skill chip color variants */
.sc-blue   { background: rgba(37,99,235,0.10);  border: 1px solid rgba(37,99,235,0.28);  color: var(--a1); }
.sc-cyan   { background: rgba(6,182,212,0.10);  border: 1px solid rgba(6,182,212,0.25);  color: var(--a2); }
.sc-violet { background: rgba(139,92,246,0.10); border: 1px solid rgba(139,92,246,0.25); color: var(--a3); }

/* Hover glow per color */
.sc-blue:hover   { box-shadow: 0 0 16px var(--a1-glow); }
.sc-cyan:hover   { box-shadow: 0 0 16px var(--a2-glow); }
.sc-violet:hover { box-shadow: 0 0 16px rgba(139,92,246,0.28); }


/* ════════════════════════════════════════════
   18. PROJECTS SECTION
       3-column grid of project cards.
       Each card has a data-color attribute that
       controls the hover glow color.
   ════════════════════════════════════════════ */

/* 3-column projects grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Project card */
.proj-card {
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: default;
}

/* Colored glow on hover — color matches data-color attribute */
.proj-card[data-color="blue"]:hover   { box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 28px var(--a1-glow); }
.proj-card[data-color="cyan"]:hover   { box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 28px var(--a2-glow); }
.proj-card[data-color="violet"]:hover { box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 28px rgba(139,92,246,0.28); }

/* Top row: status badge + GitHub link */
.proj-header { display: flex; align-items: center; justify-content: space-between; }

/* "✅ Complete" / "🔄 In Progress" status badges */
.proj-status,
.cert-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.60rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  letter-spacing: 0.06em;
}

/* Green badge for completed items */
.status-complete {
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.28);
  color: #22c55e;
}

/* Yellow badge for in-progress items */
.status-progress {
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.28);
  color: #fbbf24;
}

/* Small GitHub icon link — top right of card */
.proj-gh-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  color: var(--t3);
  transition: all 0.3s var(--e1);
  cursor: none;
}
.proj-gh-link svg { width: 16px; height: 16px; }
.proj-gh-link:hover {
  color: var(--a2);
  border-color: var(--a2);
  box-shadow: 0 0 12px var(--a2-glow);
  transform: scale(1.1);
}

/* Project title */
.proj-title {
  font-family: 'Cinzel', serif;
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.35;
}

/* Project description — flex: 1 pushes tags to bottom */
.proj-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--t2);
  line-height: 1.7;
  flex: 1;
}

/* Technology tags row at bottom of card */
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

/* "View All on GitHub →" centered button */
.proj-footer { display: flex; justify-content: center; margin-top: 48px; }


/* ════════════════════════════════════════════
   19. CERTIFICATES SECTION
       3-column grid of certificate cards.
       Each card: image top (16:9) + body below.
   ════════════════════════════════════════════ */

/* 3-column certs grid */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Certificate card */
.cert-card {
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Image container — fixed 16:9 aspect ratio */
.cert-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--panel);
  position: relative;
  flex-shrink: 0;
}

/* Certificate image — object-fit: contain shows full cert */
.cert-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;       /* Show full certificate without cropping */
  background: var(--panel);  /* Panel color behind transparent areas */
  transition: transform 0.4s var(--e1), filter 0.4s var(--e1);
  filter: brightness(0.92);  /* Slightly dimmed by default */
}

/* Brighten + zoom on card hover */
.cert-card:hover .cert-img-wrap img {
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* Fallback when image src fails */
.cert-img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 2rem;
  color: var(--t2);
  background: var(--panel);
  font-family: 'JetBrains Mono', monospace;
}

/* Text content below image */
.cert-body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.cert-title {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.4;
}

/* "Udemy · Angela Yu" */
.cert-issuer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--a2);
  font-weight: 700;
}

/* "📅 2024" */
.cert-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--t3);
}

/* Skills tag row */
.cert-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }


/* ════════════════════════════════════════════
   20. CONTACT SECTION
       Auto-fill grid of contact method cards.
       Each card has a colored left border.
   ════════════════════════════════════════════ */

/* Responsive auto-fill grid — min 240px per card */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

/* Contact card */
.contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--t1);
  border-left: 4px solid transparent; /* Overridden by color variants */
  transition: all 0.3s var(--e1);
  cursor: none;
}

/* Left border color variants */
.cc-blue   { border-left-color: var(--a1); }
.cc-cyan   { border-left-color: var(--a2); }
.cc-violet { border-left-color: var(--a3); }
.cc-green  { border-left-color: #22c55e; }

/* Emoji icon */
.cc-icon { font-size: 1.8rem; flex-shrink: 0; }

/* Label + value text */
.cc-content { flex: 1; }
.cc-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.cc-value {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--t1);
}

/* Arrow → slides right on hover */
.cc-arrow { font-size: 1.1rem; color: var(--t3); transition: all 0.3s var(--e1); }

/* Hover glow per color variant */
.cc-blue:hover   { box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px var(--a1-glow); }
.cc-cyan:hover   { box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px var(--a2-glow); }
.cc-violet:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(139,92,246,0.28); }
.cc-green:hover  { box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 20px rgba(34,197,94,0.22); }

/* Arrow moves right on card hover */
.contact-card:hover .cc-arrow { transform: translateX(4px); color: var(--a2); }


/* ════════════════════════════════════════════
   21. FOOTER
   ════════════════════════════════════════════ */

.footer {
  position: relative;
  z-index: 1;
  padding: 40px 64px;
  background: rgba(6,8,16,0.80);
}

/* Animated gradient line at the very top of footer */
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--grad);
  background-size: 200% auto;
  opacity: 0.35;
  animation: gs 5s linear infinite;
}

/* Inner row: brand | nav links | social icons */
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Brand block: name + subtitle */
.footer-brand { display: flex; flex-direction: column; gap: 4px; }

/* Animated gradient footer name */
.footer-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  font-weight: 700;
  background: var(--grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gs 5s linear infinite;
}

/* "// AI Student & Developer" */
.footer-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.60rem; color: var(--t3); }

/* Footer nav links */
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--t2);
  text-decoration: none;
  transition: all 0.2s var(--e1);
}
.footer-links a:hover { color: var(--a2); padding-left: 4px; }

/* Social icon buttons in footer */
.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--t3);
  transition: all 0.3s var(--e1);
  cursor: none;
}
.footer-socials a svg { width: 16px; height: 16px; }
.footer-socials a:hover { color: var(--a2); border-color: var(--a2); transform: translateY(-2px); }

/* Copyright line below the main row */
.footer-copy {
  max-width: 1100px;
  margin: 20px auto 0;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--t3);
  letter-spacing: 0.06em;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}


/* ════════════════════════════════════════════
   22. CERTIFICATE PROGRESS PLACEHOLDER
       Shown for the ML A-Z cert while in progress.
       Will be replaced with actual image when done.
   ════════════════════════════════════════════ */

.cert-progress-placeholder {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(37,99,235,0.08));
  padding: 24px;
}

/* Robot emoji icon */
.cpp-icon { font-size: 2.8rem; }

/* "IN PROGRESS" label */
.cpp-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.70rem;
  font-weight: 700;
  color: var(--a3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Progress bar track */
.cpp-bar-wrap {
  width: 80%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 9999px;
  overflow: hidden;
}

/* Animated fill bar — width set via --prog CSS variable inline */
.cpp-bar {
  height: 100%;
  width: var(--prog, 50%);
  background: linear-gradient(90deg, var(--a1), var(--a3));
  border-radius: 9999px;
  background-size: 200% auto;
  animation: gs 2s linear infinite; /* Animated shimmer on bar */
}

/* "65% Complete" text */
.cpp-percent { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--t3); }

/* ════════════════════════════════════════════
   23. RESPONSIVE DESIGN
   ════════════════════════════════════════════ */

/* ── Tablet & Mobile — ≤ 960px ── */
@media (max-width: 960px) {

  /* Hide desktop nav links and CTA button */
  .nav-links       { display: none; }
  .nav-cta-desktop { display: none; }

  /* Show hamburger button */
  .hamburger { display: flex; }

  /* Move navbar slightly higher */
  .navbar    { top: 10px; }
  .nav-inner { padding: 10px 16px; }

  /* Reduce section padding */
  .section { padding: 72px 24px; }

  /* Hero: single column, terminal below text */
  .hero              { padding: 100px 24px 60px; }
  .hero-inner        { grid-template-columns: 1fr; gap: 40px; }
  .hero-terminal-wrap { order: 2; } /* Terminal moves below text */
  .hero-text         { order: 1; }
  .hero-name         { font-size: clamp(2rem, 10vw, 3.5rem); }
  .code-float        { display: none; } /* Hide floating code cards */

  /* About: single column */
  .about-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Projects: single column */
  .projects-grid { grid-template-columns: 1fr; }

  /* Certs: 2 columns on tablet */
  .certs-grid { grid-template-columns: repeat(2, 1fr); }

  /* Contact: single column */
  .contact-grid { grid-template-columns: 1fr; }

  /* Footer: stack vertically + center */
  .footer       { padding: 32px 24px; }
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .footer-links { justify-content: center; }
}

/* ── Small Mobile — ≤ 600px ── */
@media (max-width: 600px) {
  /* Certs: single column on small phones */
  .certs-grid { grid-template-columns: 1fr; }
}

/* ── Extra Small Mobile — ≤ 480px ── */
@media (max-width: 480px) {
  /* Stack CTA buttons vertically */
  .hero-btns                { flex-direction: column; align-items: flex-start; }
  .btn-main, .btn-ghost     { width: 100%; justify-content: center; }

  /* Stack skill tabs vertically */
  .skill-tabs { flex-direction: column; align-items: stretch; }
  .tab-btn    { text-align: center; }

  /* Drawer takes full screen width on very small devices */
  .drawer { width: 100%; }
}