/* ============================================================
   MUHAMMAD ABDULLAH — PREMIUM AI ENGINEER PORTFOLIO
   Design System: Luxury Dark · Gold/Cyan/Violet Gradients
   Fonts: Syne (headings) · DM Sans (body) · JetBrains Mono (code)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

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

/* ── Global Base Responsive Fixes ── */
body {
  background: var(--bg-deep);
  overflow-x: hidden;
}
img { 
  max-width: 100%; 
  display: block; 
  height: auto;
  border-radius: inherit;
}

/* Additional responsive image fixes */
@media (max-width: 375px) {
  img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
}

@media (max-width: 320px) {
  img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* ── Design Tokens ── */
:root {
  /* Unified background system */
  --bg-base:      #070912;        /* True base — used for body */
  --bg-deep:      #070912;        /* Slightly deeper — hero, projects, contact */
  --bg-surface:   #0d1117;        /* Slightly lighter — profile, skills, experience */
  --bg-raised:    #111827;        /* Cards, insights, footer */
  --bg-primary:   #070912;        /* Keep var name for compatibility */
  --bg-secondary: #111827;        /* Keep var name for compatibility */
  --bg-card:      rgba(17,24,39,0.8); /* Card background with transparency - NEW */
  --bg-glass:     rgba(255,255,255,0.03);

  --gold:    #f59e0b;
  --gold2:   #fbbf24;
  --cyan:    #06b6d4;
  --cyan2:   #22d3ee;
  --violet:  #8b5cf6;
  --violet2: #a78bfa;
  --emerald: #10b981;
  --rose:    #f43f5e;

  --text-primary:   #E5E7EB;        /* NEW - Lighter primary text */
  --text-secondary: #9CA3AF;        /* NEW - Softer secondary text */
  --text-muted:     #6B7280;        /* NEW - Muted text */

  --grad-hero:   linear-gradient(135deg, #3B82F6, #8B5CF6, #06B6D4); /* NEW - Blue to purple to cyan */
  --grad-gold:   linear-gradient(135deg, #f59e0b, #ef4444);
  --grad-cyan:   linear-gradient(135deg, #06b6d4, #6366f1);
  --grad-violet: linear-gradient(135deg, #8b5cf6, #ec4899);
  --grad-card:   linear-gradient(145deg, rgba(17,24,39,0.9), rgba(31,41,55,0.8)); /* NEW - Dark card gradient */
  --grad-mesh:
    radial-gradient(at 20% 10%,  hsla(258,91%,65%,0.18) 0px, transparent 55%),
    radial-gradient(at 85% 5%,   hsla(187,96%,48%,0.14) 0px, transparent 50%),
    radial-gradient(at 5%  70%,  hsla(340,82%,55%,0.10) 0px, transparent 50%),
    radial-gradient(at 90% 80%,  hsla(258,91%,65%,0.10) 0px, transparent 50%);

  --border:        rgba(255,255,255,0.08); /* NEW - More visible borders */
  --border-accent: rgba(59,130,246,0.3); /* NEW - Blue accent border */
  --border-cyan:   rgba(6,182,212,0.3);
  --border-gold:   rgba(245,158,11,0.3);

  --shadow-card:   0 8px 32px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.05) inset; /* NEW - Enhanced shadows */
  --shadow-glow-v: 0 0 48px rgba(139,92,246,0.22);
  --shadow-glow-c: 0 0 48px rgba(6,182,212,0.18);
  --shadow-glow-g: 0 0 48px rgba(245,158,11,0.18);
  --shadow-hover:  0 16px 48px rgba(0,0,0,0.3), 0 0 24px rgba(59,130,246,0.15); /* NEW - Hover shadow */

  --font-head: 'Inter', 'Poppins', sans-serif; /* NEW - Modern typography */
  --font-body: 'Inter', 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --nav-h:       68px;
  --radius-card: 20px;
  --radius-sm:   12px; /* NEW - Slightly larger */
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:    cubic-bezier(0.16,1,0.3,1);
}

/* ── Base ── */
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}

::selection { background: rgba(139,92,246,0.4); color:#fff; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--grad-cyan); border-radius:99px; }

.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ══════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════ */
.navbar {
  position: sticky; top:0; left:0; right:0;
  height: var(--nav-h); z-index:1000;
  backdrop-filter: blur(14px);
  background: rgba(2,6,23,0.65);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: box-shadow 0.4s ease, background 0.4s ease;
  animation: fadeDown 0.6s ease;
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.navbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #60A5FA, #A78BFA, #22D3EE);
  opacity: 0.6;
}
.navbar.scrolled {
  background: rgba(3,7,18,0.92);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.nav-container {
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; justify-content:space-between; align-items:center; height:100%;
}
.nav-logo {
  font-family: var(--font-head); font-size:24px; font-weight:800;
  background: linear-gradient(135deg, #60A5FA, #A78BFA);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-decoration:none; transition:all 0.3s ease;
  white-space: nowrap;
}
.nav-logo { cursor:default; user-select:none; }
.nav-menu { display:flex; align-items:center; gap:18px; list-style:none; }

.nav-link {
  font-family: var(--font-body); color: rgba(255,255,255,0.7);
  text-decoration:none; font-weight:500; font-size:0.875rem;
  padding:8px 14px; border-radius:10px;
  position:relative;
  transition: all 0.25s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #60A5FA, #A78BFA);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.nav-link:hover { 
  color: #ffffff;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  transform: translateY(-1px);
}
.nav-link:hover::after {
  width: 70%;
}

/* Individual navbar link styles with exact text-matching widths - HIGHER SPECIFICITY */
.navbar .nav-menu .nav-link[href="#hero"]:hover::after {
  width: 110px !important; /* Maximum width for "Dashboard" */
}

.navbar .nav-menu .nav-link[href="#profile"]:hover::after {
  width: 95px !important; /* Maximum width for "Profile" */
}

.navbar .nav-menu .nav-link[href="#projects"]:hover::after {
  width: 100px !important; /* Maximum width for "Projects" */
}

.navbar .nav-menu .nav-link[href="#skills"]:hover::after {
  width: 85px !important; /* Maximum width for "Skills" */
}

.navbar .nav-menu .nav-link[href="#experience"]:hover::after {
  width: 120px !important; /* Maximum width for "Experience" */
}

.navbar .nav-menu .nav-link[href="#insights"]:hover::after {
  width: 95px !important; /* Maximum width for "Insights" */
}

.navbar .nav-menu .nav-link[href="#contact"]:hover::after {
  width: 100px !important; /* Maximum width for "Contact" */
}
.nav-link.active { 
  color: #22D3EE;
  background: rgba(34,211,238,0.12);
  border-radius: 10px;
}
.nav-link.active::after { transform:translateX(-50%) scaleX(1); }

.nav-cta {
  background: linear-gradient(135deg, #F97316, #FB4C3F);
  padding: 10px 18px;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  font-family: var(--font-body);
  box-shadow: 0 10px 25px rgba(249,115,22,0.4);
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 40px;
  cursor: pointer;
}
.nav-cta:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 15px 35px rgba(249,115,22,0.6);
}

.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.nav-toggle span { display:block; width:22px; height:2px; background: var(--text-secondary); border-radius:2px; transition:all 0.3s ease; }

/* ══════════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════════ */
.section-header { text-align:center; margin-bottom:4rem; }

.section-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family: var(--font-mono); font-size:0.7rem; font-weight:600;
  color: var(--cyan); text-transform:uppercase; letter-spacing:0.12em;
  padding:0.35rem 1rem;
  background:rgba(6,182,212,0.08); border:1px solid rgba(6,182,212,0.2);
  border-radius:99px; margin-bottom:1rem;
}
.section-badge::before { content:'●'; font-size:0.5rem; }

.section-title {
  font-family: var(--font-head);
  font-size: clamp(2rem,4vw,2.8rem); font-weight:800;
  background: var(--grad-hero);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:-0.03em; line-height:1.15; margin-bottom:1rem;
}

.section-underline {
  width:56px; height:3px; background: var(--grad-cyan);
  border-radius:99px; margin:0 auto;
  transform:scaleX(0); opacity:0;
  transition: transform 0.7s var(--ease-out) 0.2s, opacity 0.5s ease 0.2s;
}
.section-underline.in-view { transform:scaleX(1); opacity:1; }

/* ══════════════════════════════════════════
   ANIMATION SYSTEM
   ══════════════════════════════════════════ */
.reveal {
  opacity:0; transform:translateY(36px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal.in-view { opacity:1; transform:translateY(0); }

.reveal-left {
  opacity:0; transform:translateX(-40px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.reveal-left.in-view { opacity:1; transform:translateX(0); }

.reveal-scale {
  opacity:0; transform:scale(0.88);
  transition: opacity 0.65s ease, transform 0.65s var(--ease-spring);
}
.reveal-scale.in-view { opacity:1; transform:scale(1); }

.d1 { transition-delay:0.10s; }
.d2 { transition-delay:0.20s; }
.d3 { transition-delay:0.30s; }
.d4 { transition-delay:0.40s; }
.d5 { transition-delay:0.50s; }
.d6 { transition-delay:0.60s; }

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
.hero {
  min-height:100vh; display:flex; align-items:center;
  position:relative; background: radial-gradient(circle at 20% 30%, rgba(59,130,246,0.18), transparent 40%),
                              radial-gradient(circle at 80% 20%, rgba(168,85,247,0.18), transparent 40%),
                              var(--bg-deep); overflow:hidden;
  padding: calc(var(--nav-h) + 40px) 0 60px;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: var(--grad-mesh);
  animation: meshDrift 12s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero::after {
  content:''; position:absolute;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,0.12) 0%,transparent 70%);
  top:10%; right:-100px;
  animation: orbFloat 8s ease-in-out infinite; pointer-events:none;
}
@keyframes meshDrift {
  from { transform:scale(1) rotate(0deg); opacity:0.7; }
  to   { transform:scale(1.15) rotate(3deg); opacity:1; }
}
@keyframes orbFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%     { transform:translateY(-30px) scale(1.05); }
}

.hero-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:center; position:relative; z-index:1;
}
.hero-content { 
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.status-indicator {
  display:inline-flex; align-items:center; gap:0.6rem;
  background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.25);
  border-radius:99px; padding:0.4rem 1rem;
  font-family: var(--font-mono); font-size:0.75rem; font-weight:500;
  color: var(--emerald); letter-spacing:0.08em; margin-bottom:1.8rem;
}
.status-dot {
  width:7px; height:7px; background: var(--emerald); border-radius:50%;
  box-shadow:0 0 10px var(--emerald);
  animation: statusPulse 2.5s ease-in-out infinite;
}
@keyframes statusPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:0.5; transform:scale(0.85); }
}

.hero-title {
  font-family: var(--font-head);
  font-size: 64px; font-weight:800;
  line-height:1.1; letter-spacing:-0.04em; color: var(--text-primary); margin-bottom:1.5rem;
  text-shadow: 0 0 40px rgba(96,165,250,0.2);
}
.hero-title .highlight {
  background: linear-gradient(135deg, #60A5FA, #A78BFA, #22D3EE);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-subtitle {
  font-family: var(--font-body); font-size:16px; color: rgba(255,255,255,0.7);
  font-weight:300; line-height:1.75; margin-bottom:2.5rem; letter-spacing:0.3px;
}
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

.btn-primary {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.9rem 1.8rem; background: linear-gradient(135deg, #F97316, #FB4C3F);
  color:#fff; border:none; border-radius:10px;
  font-family: var(--font-body); font-weight:700; font-size:0.9rem; cursor:pointer;
  transition: all 0.3s ease;
  box-shadow:0 10px 30px rgba(249,115,22,0.4); text-decoration:none;
}
.btn-primary:hover { 
  transform: translateY(-3px) scale(1.03);
  box-shadow:0 20px 40px rgba(249,115,22,0.6); 
}

.btn-secondary {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.9rem 1.8rem; background:rgba(255,255,255,0.04);
  color: var(--text-primary); border:1px solid rgba(255,255,255,0.15); border-radius:10px;
  font-family: var(--font-body); font-weight:600; font-size:0.9rem; cursor:pointer;
  transition:all 0.25s ease; text-decoration:none; backdrop-filter:blur(10px);
}
.btn-secondary:hover {
  border-color: var(--border-cyan); background:rgba(6,182,212,0.08); color: var(--cyan);
  transform:translateY(-2px); box-shadow: var(--shadow-glow-c);
}

.hero-visual {
  display:flex; justify-content:center; align-items:center;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease 0.2s forwards;
}

.chart-container {
  width:100%; max-width:480px; height:420px;
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,0.08); border-radius: 20px;
  padding:2rem; box-shadow: 0 0 40px rgba(59,130,246,0.15);
  position:relative; overflow:visible;
  transition: all 0.3s ease;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.chart-container::before {
  content:'DATA VISUALIZATION';
  position:absolute; top:0; left:0; right:0; height:42px;
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid var(--border);
  border-radius: 20px 20px 0 0;
  display:flex; align-items:center; padding-left:1.25rem;
  font-family: var(--font-mono); font-size:0.65rem; font-weight:600;
  color: var(--text-muted); letter-spacing:0.1em;
  /* Shimmer accent */
  background-image: linear-gradient(90deg, rgba(139,92,246,0.06) 0%, rgba(6,182,212,0.04) 100%);
}
.chart-container:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 0 60px rgba(59,130,246,0.25);
}
#heroChart { width:100%; height:calc(100% - 42px); margin-top:42px; display:block; }

/* ══════════════════════════════════════════
   PROFILE - PREMIUM UPGRADE
   ══════════════════════════════════════════ */
.profile { 
  padding: 120px 0; 
  background: var(--bg-surface);
  position: relative;
  z-index: 1;
}
.profile::before {
  content: "";
  position: absolute;
  top: -80px;
  left: 0;
  width: 100%;
  height: 160px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(15,23,42,0.6),
    transparent
  );
  pointer-events: none;
}

.profile-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; /* NEW - Two equal columns */
  gap: 2.5rem; 
  align-items: stretch; /* NEW - Equal height cards */
  position: relative;
  z-index: 2;
}
.profile-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(59,130,246,0.08), transparent 70%);
}
.profile-grid::after {
  content: "";
  position: absolute;
  top: 40%;
  right: 25%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(34,211,238,0.15), transparent 70%);
  filter: blur(80px);
}

.profile-card {
  background: var(--grad-card); /* NEW - Premium gradient background */
  border: 1px solid var(--border);
  border-radius: var(--radius-card); 
  box-shadow: var(--shadow-card);
  padding: 2.5rem; 
  position: relative; 
  overflow: hidden;
  transition: all 0.3s var(--ease-out); /* NEW - Smooth transitions */
  /* Premium Animation */
  opacity: 0;
  transform: translateY(20px);
}
.profile-card.in-view {
  opacity: 1;
  transform: translateY(0);
}
.profile-card:hover {
  transform: translateY(-5px) scale(1.02); /* NEW - Premium hover effect */
  box-shadow: var(--shadow-hover);
  border-color: var(--border-accent);
}
.profile-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--grad-hero); /* NEW - Gradient top border */
}

/* Profile Overview Layout Fix */
.cards-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

/* Stats Row (Separate Full-Width Section) */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Profile Card Refactored Layout */
.profile-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* Profile Section Full (No Stats) */
.profile-section-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at center, rgba(59,130,246,0.15), transparent);
  border-radius: 20px;
  padding: 30px;
  width: 100%;
}

.profile-image-container {
  margin-bottom: 20px;
}

/* Image Wrapper - Rounded Square for Better Balance */
.profile-img-wrapper {
  width: 180px;
  height: 180px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(59, 130, 246, 0.35);
  border: 2px solid rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
  padding: 0;
}

.profile-img-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 0 60px rgba(59, 130, 246, 0.45);
}

/* Image - Fills Rounded Square Completely */
.profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  transform: scale(1.05);
}

.profile-text h3 {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, #60A5FA, #A78BFA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 16px;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.profile-text p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: #22D3EE;
  background: rgba(34, 211, 238, 0.1);
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
  margin: 0;
  border: 1px solid rgba(34, 211, 238, 0.2);
}

/* Tags Section (Left Card) */
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
}

/* Stats Row Styling */
.stats-row .stat-box {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 90px;
}

.stats-row .stat-box:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.1);
}

.stats-row .stat-number {
  display: block;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  background: var(--grad-cyan);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
}

.stats-row .stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Responsive Design */
@media (max-width: 768px) {
  .cards-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 100%;
  }
  
  .profile-img-wrapper {
    width: 150px;
    height: 150px;
  }
}

/* Tags Section (below stats) */
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}

.badge {
  font-family: var(--font-mono); font-size:0.7rem; font-weight:600;
  color: var(--text-primary);
  background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.2);
  padding:0.35rem 0.85rem; border-radius:99px; letter-spacing:0.04em; 
  transition:all 0.2s var(--ease-out);
}
.badge:hover { 
  background:rgba(59,130,246,0.2); 
  border-color: var(--border-accent); 
  transform:translateY(-2px); 
  box-shadow: 0 4px 12px rgba(59,130,246,0.2);
}

/* Enhanced About Block */
.about-block {
  background: linear-gradient(145deg, rgba(17,24,39,0.95), rgba(31,41,55,0.9)); /* NEW - Premium gradient */
  border: 1px solid var(--border);
  border-left: 3px solid var(--grad-hero); /* NEW - Gradient left border accent */
  border-radius: var(--radius-card); 
  box-shadow: var(--shadow-card);
  padding: 30px; /* NEW - Improved padding 28px-32px */
  position: relative; 
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
  /* NEW - Vertically center content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Premium Animation with stagger */
  opacity: 0;
  transform: translateY(20px);
  transition-delay: 0.1s; /* NEW - Staggered animation */
}
.about-block.in-view {
  opacity: 1;
  transform: translateY(0);
}
.about-block:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-accent);
}
.about-block::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--grad-hero);
}

/* NEW - About Header */
.about-header {
  margin-bottom: 14px; /* NEW - Spacing 12px-16px */
}
.about-header h3 {
  font-family: var(--font-head); 
  font-size: 1.35rem; 
  font-weight: 700; /* NEW - Match left card name style */
  color: var(--text-primary); 
  letter-spacing: -0.02em; 
  margin: 0;
  background: var(--grad-hero); /* NEW - Same gradient/text color effect */
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text;
}

/* NEW - About Content Container */
.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.quote-icon {
  font-family:Georgia,serif; font-size:4.5rem; line-height:1; /* NEW - Bigger quotes */
  background: var(--grad-hero);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:-1rem;
  opacity: 0.8;
}
.quote-icon-end { 
  text-align:right; margin-top:-1rem; margin-bottom:0;
  transform: rotate(180deg);
}
.about-text { 
  font-size:0.95rem; 
  color: #CBD5F5; /* NEW - Softer text color */
  line-height:1.8; /* NEW - Better readability 1.7-1.9 */
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════
   PROJECTS
   ══════════════════════════════════════════ */
.projects { 
  padding: 120px 0; 
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
}
.projects::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 20% 40%, rgba(249,115,22,0.15), transparent 45%),  /* Orange (Expense) */
    radial-gradient(circle at 50% 20%, rgba(59,130,246,0.15), transparent 45%),  /* Blue (GPA) */
    radial-gradient(circle at 80% 60%, rgba(168,85,247,0.15), transparent 45%),  /* Purple (ML) */
    radial-gradient(circle at 50% 90%, rgba(34,211,238,0.08), transparent 50%);  /* Cyan support */

  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
.projects > * {
  position: relative;
  z-index: 1;
}
.projects::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.02), transparent);
  animation: shimmer 10s linear infinite;
  pointer-events: none;
}

.projects-grid { 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); 
  gap:1.75rem; 
  position: relative;
  z-index: 2;
}
.projects-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(168,85,247,0.18), transparent 70%);
  pointer-events: none;
}
.projects-grid::after {
  content: "";
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(249,115,22,0.20), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.project-card {
  background: var(--grad-card); border:1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding:2rem; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  transition: transform 0.3s var(--ease-spring), border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  min-height: 400px;
}

/* Ensure all child elements allow hover events to pass through */
.project-card > * {
  pointer-events: auto;
}

.project-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,0.6),rgba(6,182,212,0.6),transparent);
}
.project-card::after {
  content:''; position:absolute; top:0; left:0; width:4px; height:100%;
}
.project-card[data-project="1"]::after { background: var(--grad-gold); }
.project-card[data-project="2"]::after { background: var(--grad-cyan); }
.project-card[data-project="3"]::after { background: var(--grad-violet); }
.project-card[data-project="4"]::after { background:linear-gradient(180deg,var(--emerald),var(--cyan)); }
.project-card[data-project="5"]::after { background:linear-gradient(180deg,var(--gold),var(--rose)); }

.project-card:hover {
  transform:translateY(-8px) scale(1.01);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-card), var(--shadow-glow-v);
}

/* Project Card Title Layout Refinement */
.project-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.2rem;
  gap: 1rem;
}

.project-header h3 {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
  flex: 1;
}

/* Force line break after "Expense Tracker" */
.project-card[data-project="1"] .project-header h3 {
  white-space: pre-wrap;
}

.project-card[data-project="1"] .project-header h3::after {
  content: "\A";
  white-space: pre;
}

.project-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.8rem;
  border-radius: 99px;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.project-status.completed { background:rgba(16,185,129,0.12); color: var(--emerald); border:1px solid rgba(16,185,129,0.3); }
.project-status.in-progress { background:rgba(245,158,11,0.12); color: var(--gold); border:1px solid rgba(245,158,11,0.3); }

.project-metrics { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 12px; 
  margin-bottom: 1.5rem; 
  width: 100%;
}
.metric {
  background: rgba(255,255,255,0.03); 
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); 
  padding: 16px; 
  text-align: center; 
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  position: relative;
  overflow: hidden;
}

/* Premium accent line on top */
.metric::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.6;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}

/* Card-specific metric styling */
.project-card[data-project="1"] .metric {
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
  background: rgba(245, 158, 11, 0.08);
}
.project-card[data-project="1"] .metric::before {
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.6), transparent);
}
.project-card[data-project="1"] .metric:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.5);
}

.project-card[data-project="2"] .metric {
  border: 1px solid rgba(6, 182, 212, 0.3);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.15);
  background: rgba(6, 182, 212, 0.08);
}
.project-card[data-project="2"] .metric::before {
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.6), transparent);
}
.project-card[data-project="2"] .metric:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.25);
  border-color: rgba(6, 182, 212, 0.5);
}

.project-card[data-project="3"] .metric {
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.15);
  background: rgba(139, 92, 246, 0.08);
}
.project-card[data-project="3"] .metric::before {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6), transparent);
}
.project-card[data-project="3"] .metric:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.25);
  border-color: rgba(139, 92, 246, 0.5);
}

.metric:hover { 
  border-color: var(--border-accent); 
}
.metric-label {
  display:block; 
  font-family: var(--font-mono); 
  font-size:0.6rem; 
  font-weight:600;
  color: var(--text-muted); 
  text-transform:uppercase; 
  letter-spacing:0.1em; 
  margin-bottom:0.5rem;
  opacity: 0.8;
}
.metric-value {
  display:block; 
  font-family: var(--font-head); 
  font-size:1.1rem; 
  font-weight:700;
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}

/* Card-specific value colors and glow */
.project-card[data-project="1"] .metric-value {
  color: #fcd34d;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}
.project-card[data-project="2"] .metric-value {
  color: #93c5fd;
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}
.project-card[data-project="3"] .metric-value {
  color: #a5b4fc;
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

.project-flow {
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  margin-bottom:1.25rem; padding:0.9rem;
  background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius: var(--radius-sm);
}
.flow-step { display:flex; flex-direction:column; align-items:center; gap:0.35rem; }
.step-number {
  width:30px; height:30px; background: var(--grad-hero); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-size:0.8rem; font-weight:800; color:#fff;
}
.step-text { font-family: var(--font-mono); font-size:0.6rem; font-weight:600; color: var(--text-muted); text-transform:uppercase; letter-spacing:0.1em; }
.flow-arrow { color: var(--violet); font-size:1.1rem; font-weight:700; }

.project-content { flex:1; display:flex; flex-direction:column; min-height: 200px; }
.project-details { flex:1; margin-bottom: 1rem; }
.project-details p { font-size:0.9rem; color: var(--text-secondary); line-height:1.6; margin-bottom:0; }
.project-details strong { color: var(--text-primary); font-weight:600; }

.tech-stack { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.5rem; }
.tech-tag {
  font-family: var(--font-mono); font-size:0.75rem; font-weight:600;
  color: var(--cyan2); background:rgba(6,182,212,0.08); border:1px solid rgba(6,182,212,0.2);
  padding:0.35rem 0.8rem; border-radius:6px; letter-spacing:0.04em; transition:all 0.2s ease;
}
.tech-tag:hover { background:rgba(6,182,212,0.18); border-color: var(--border-cyan); transform:translateY(-2px); }

/* Enhanced View Details Button Hover Effects */
.project-expand {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--border-cyan);
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin-top: auto;
}


/* Ensure button has proper hover area */
.project-expand {
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* Expense Tracker Card - Gold/Orange Glow Hover */
.projects-grid .project-card[data-project="1"]:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 25px rgba(245, 158, 11, 0.2) !important;
}

/* Expense Tracker Button - Gold/Orange Gradient Hover */
.projects-grid .project-card[data-project="1"] .project-expand:hover {
  background: var(--grad-gold) !important;
  color: white !important;
  border: 1px solid transparent !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3) !important;
  transform: scale(1.03) !important;
}
.projects-grid .project-card[data-project="1"] .project-expand:hover::before {
  opacity: 0 !important;
}

/* GPA Calculator Card - Cyan Glow Hover */
.projects-grid .project-card[data-project="2"]:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 25px rgba(6, 182, 212, 0.2) !important;
}

/* GPA Calculator Button - Cyan Gradient Hover */
.projects-grid .project-card[data-project="2"] .project-expand:hover {
  background: var(--grad-cyan) !important;
  color: white !important;
  border: 1px solid transparent !important;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3) !important;
  transform: scale(1.03) !important;
}
.projects-grid .project-card[data-project="2"] .project-expand:hover::before {
  opacity: 0 !important;
}

/* Predictive Analytics Card - Violet/Purple Glow Hover */
.projects-grid .project-card[data-project="3"]:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 25px rgba(139, 92, 246, 0.2) !important;
}

/* Predictive Analytics Button - Violet/Purple Gradient Hover */
.projects-grid .project-card[data-project="3"] .project-expand:hover {
  background: var(--grad-violet) !important;
  color: white !important;
  border: 1px solid transparent !important;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3) !important;
  transform: scale(1.03) !important;
}
.projects-grid .project-card[data-project="3"] .project-expand:hover::before {
  opacity: 0 !important;
}

/* ══════════════════════════════════════════
   SKILLS
   ══════════════════════════════════════════ */
.skills { 
  padding: 120px 0; 
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
}
.skills::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 20% 30%, rgba(34,211,238,0.15), transparent 45%),   /* Cyan */
    radial-gradient(circle at 80% 30%, rgba(139,92,246,0.15), transparent 45%),   /* Purple */
    radial-gradient(circle at 50% 80%, rgba(59,130,246,0.10), transparent 50%);   /* Blue */

  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.skills > * {
  position: relative;
  z-index: 1;
}
.skills::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.03), transparent);
  animation: shimmer 8s linear infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skills-grid { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; }

.skills-chart, .timeline-content {
  position: relative;
  background: var(--bg-secondary); border:1px solid var(--border);
  border-radius: 12px; padding:1.5rem; margin-left:2rem; box-shadow: 0 0 30px rgba(0,0,0,0.3);
}
.timeline-content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  border-radius: 2px;
  opacity: 0.8;
}

/* Python Card - Red Glow */
.timeline-item:nth-child(1) .timeline-content::after {
  background: linear-gradient(to bottom, #ef4444, transparent);
  box-shadow: 0 0 10px rgba(239,68,68,0.5);
}

/* C++ Card - Orange Glow */
.timeline-item:nth-child(2) .timeline-content::after {
  background: linear-gradient(to bottom, #f59e0b, transparent);
  box-shadow: 0 0 10px rgba(245,158,11,0.5);
}

/* Web Dev Card - Blue Glow */
.timeline-item:nth-child(3) .timeline-content::after {
  background: linear-gradient(to bottom, #3b82f6, transparent);
  box-shadow: 0 0 10px rgba(59,130,246,0.5);
}
.skills-chart, .skills-categories {
  background: var(--grad-card); border:1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding:2rem; position:relative; overflow:hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.skills-chart::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent);
}
.skills-categories::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--violet),transparent);
}
.skills-chart:hover, .skills-categories:hover {
  transform:translateY(-4px); box-shadow: var(--shadow-card), var(--shadow-glow-v);
}

.skills-header { margin-bottom:1.5rem; }
.enhanced-heading h3 {
  font-family: var(--font-head); font-size:1.2rem; font-weight:700;
  color: var(--text-primary); letter-spacing:-0.02em; margin-bottom:0.25rem;
}
.categories-subtitle { font-size:0.8rem; color: var(--text-muted); font-family: var(--font-mono); }

.chart-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 1.5rem; 
}
.chart-header h3 { 
  font-family: var(--font-head); 
  font-size: 1.2rem; 
  font-weight: 700; 
  color: var(--text-primary); 
  letter-spacing: -0.02em; 
  margin-bottom: 0.25rem; 
}
.chart-subtitle { 
  font-size: 0.8rem; 
  color: var(--text-muted); 
  font-family: var(--font-mono); 
  margin-top: 0.25rem; 
}
.chart-legend { display:flex; gap:0.6rem; }
.legend-item {
  font-family: var(--font-mono); font-size:0.65rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; 
  padding:0.4rem 0.7rem;
  border-radius:99px;
  transition: all 0.3s ease;
  border: 1px solid;
}
/* Advanced - Purple to Indigo Gradient */
.legend-item.advanced    { 
  background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(99,102,241,0.15)); 
  color: #a5b4fc;
  border: 1px solid rgba(139,92,246,0.4);
  box-shadow: 0 2px 8px rgba(139,92,246,0.2);
}
.legend-item.advanced:hover {
  background: linear-gradient(135deg, rgba(139,92,246,0.3), rgba(99,102,241,0.25));
  box-shadow: 0 4px 16px rgba(139,92,246,0.3);
  transform: translateY(-1px);
}
/* Intermediate - Cyan to Blue Gradient */
.legend-item.intermediate{ 
  background: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(59,130,246,0.15)); 
  color: #67e8f9;
  border: 1px solid rgba(6,182,212,0.4);
  box-shadow: 0 2px 8px rgba(6,182,212,0.2);
}
.legend-item.intermediate:hover {
  background: linear-gradient(135deg, rgba(6,182,212,0.3), rgba(59,130,246,0.25));
  box-shadow: 0 4px 16px rgba(6,182,212,0.3);
  transform: translateY(-1px);
}
/* Beginner - Amber to Orange Gradient */
.legend-item.beginner    { 
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(249,115,22,0.15)); 
  color: #fcd34d;
  border: 1px solid rgba(245,158,11,0.4);
  box-shadow: 0 2px 8px rgba(245,158,11,0.2);
}
.legend-item.beginner:hover {
  background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(249,115,22,0.25));
  box-shadow: 0 4px 16px rgba(245,158,11,0.3);
  transform: translateY(-1px);
}

.skill-bars { display:flex; flex-direction:column; gap:1.35rem; }
.skill-item { display:flex; flex-direction:column; gap:0.5rem; }
.skill-header { display:flex; justify-content:space-between; align-items:center; }
.skill-info { display:flex; align-items:center; gap:0.6rem; }
/* SVG Icons - Modern Neon Glow Styling */
.skill-icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Python - Blue Theme */
.skill-item:nth-child(1) .skill-icon {
  stroke: #3B82F6;
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
}
.skill-item:nth-child(1):hover .skill-icon {
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.8));
  transform: scale(1.1);
}

/* C++ - Cyan Theme */
.skill-item:nth-child(2) .skill-icon {
  stroke: #06B6D4;
  filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.6));
}
.skill-item:nth-child(2):hover .skill-icon {
  filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.8));
  transform: scale(1.1);
}

/* Web Dev - Green Theme */
.skill-item:nth-child(3) .skill-icon {
  stroke: #22C55E;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.6));
}
.skill-item:nth-child(3):hover .skill-icon {
  filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.8));
  transform: scale(1.1);
}

/* AI/ML - Purple Theme */
.skill-item:nth-child(4) .skill-icon {
  stroke: #8B5CF6;
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.6));
}
.skill-item:nth-child(4):hover .skill-icon {
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.8));
  transform: scale(1.1);
}

/* Generative AI - Orange Theme */
.skill-item:nth-child(5) .skill-icon {
  stroke: #F59E0B;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
}
.skill-item:nth-child(5):hover .skill-icon {
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.8));
  transform: scale(1.1);
}

/* Tab Icons - Increased Size */
.tab-icon {
  width: 26px;
  height: 26px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Development Tab - Blue Theme */
.tab-button[data-tab="development"] .tab-icon {
  stroke: #3B82F6;
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.5));
}
.tab-button[data-tab="development"]:hover .tab-icon {
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.7));
  transform: scale(1.15);
}
.tab-button[data-tab="development"].active .tab-icon {
  stroke: #60A5FA;
  filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.8));
}

/* AI/ML Tab - Purple Theme */
.tab-button[data-tab="ai"] .tab-icon {
  stroke: #8B5CF6;
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.5));
}
.tab-button[data-tab="ai"]:hover .tab-icon {
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.7));
  transform: scale(1.15);
}
.tab-button[data-tab="ai"].active .tab-icon {
  stroke: #A78BFA;
  filter: drop-shadow(0 0 12px rgba(139, 92, 246, 0.8));
}

/* Tools Tab - Orange Theme */
.tab-button[data-tab="tools"] .tab-icon {
  stroke: #F59E0B;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
}
.tab-button[data-tab="tools"]:hover .tab-icon {
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7));
  transform: scale(1.15);
}
.tab-button[data-tab="tools"].active .tab-icon {
  stroke: #FCD34D;
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.8));
}

/* Other Tab - Green Theme */
.tab-button[data-tab="other"] .tab-icon {
  stroke: #10B981;
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
}
.tab-button[data-tab="other"]:hover .tab-icon {
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.7));
  transform: scale(1.15);
}
.tab-button[data-tab="other"].active .tab-icon {
  stroke: #34D399;
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.8));
}

/* Large Section Icons */
.tab-icon-large {
  width: 40px;
  height: 40px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

/* Development Large Icon - Blue Theme */
#development .tab-icon-large {
  stroke: #3B82F6;
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
}
#development .tab-icon-large:hover {
  filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8));
  transform: scale(1.1);
}

/* AI/ML Large Icon - Purple Theme */
#ai .tab-icon-large {
  stroke: #8B5CF6;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6));
}
#ai .tab-icon-large:hover {
  filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.8));
  transform: scale(1.1);
}

/* Tools Large Icon - Orange Theme */
#tools .tab-icon-large {
  stroke: #F59E0B;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}
#tools .tab-icon-large:hover {
  filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.8));
  transform: scale(1.1);
}

/* Other Large Icon - Green Theme */
#other .tab-icon-large {
  stroke: #10B981;
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
}
#other .tab-icon-large:hover {
  filter: drop-shadow(0 0 15px rgba(16, 185, 129, 0.8));
  transform: scale(1.1);
}
.skill-name { font-family: var(--font-body); font-weight:600; font-size:0.9rem; color: var(--text-primary); }
.skill-level {
  font-family: var(--font-mono); font-size:0.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.08em; padding:0.3rem 0.7rem; border-radius:99px;
  border: 1px solid;
  transition: all 0.3s ease;
}
/* Percentage badges matching progress bar colors */
.skill-level.advanced {
  background: rgba(59,130,246,0.15);
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,0.4);
  box-shadow: 0 2px 6px rgba(59,130,246,0.2);
}
.skill-level.intermediate {
  background: rgba(6,182,212,0.15);
  color: #67e8f9;
  border: 1px solid rgba(6,182,212,0.4);
  box-shadow: 0 2px 6px rgba(6,182,212,0.2);
}
.skill-level.beginner {
  background: rgba(245,158,11,0.15);
  color: #fcd34d;
  border: 1px solid rgba(245,158,11,0.4);
  box-shadow: 0 2px 6px rgba(245,158,11,0.2);
}

.skill-bar-container { 
  width:100%; height:8px; background: #1F2937; border-radius:99px; 
  overflow:hidden; position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.skill-progress {
  height:100%; width:0; border-radius:99px; 
  transition: width 0.6s ease, background 0.3s ease;
  position:relative; overflow:hidden;
  box-shadow: 0 0 10px rgba(var(--skill-color), 0.3);
}
.skill-progress::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.25) 50%,transparent 100%);
  animation: shimmer 2.5s ease-in-out infinite;
}
/* Individual skill progress bar colors */
.skill-item:nth-child(1) .skill-progress {
  background: linear-gradient(90deg, #3B82F6, #8B5CF6); /* Python */
  --skill-color: 59,130,246;
}
.skill-item:nth-child(2) .skill-progress {
  background: linear-gradient(90deg, #06B6D4, #3B82F6); /* C++ */
  --skill-color: 6,182,212;
}
.skill-item:nth-child(3) .skill-progress {
  background: linear-gradient(90deg, #22C55E, #06B6D4); /* Web Dev */
  --skill-color: 34,197,94;
}
.skill-item:nth-child(4) .skill-progress {
  background: linear-gradient(90deg, #8B5CF6, #EC4899); /* AI/ML */
  --skill-color: 139,92,246;
}
.skill-item:nth-child(5) .skill-progress {
  background: linear-gradient(90deg, #F59E0B, #EF4444); /* Generative AI */
  --skill-color: 245,158,11;
}
/* Hover effects for skill items */
.skill-item:hover .skill-progress {
  transform: scaleY(1.1);
  box-shadow: 0 0 15px rgba(var(--skill-color), 0.4);
}
.skill-item:hover .skill-level {
  transform: scale(1.05);
}
.skill-item {
  transition: transform 0.3s ease;
}
.skill-item:hover {
  transform: translateX(4px);
}
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }

.progress-glow {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background: var(--cyan); box-shadow:0 0 10px var(--cyan);
}

/* Tabs */
.categories-header { margin-bottom:1.5rem; }
.tabs-navigation { display:grid; grid-template-columns:repeat(4,1fr); gap:0.5rem; margin-bottom:1.25rem; }
.tab-button {
  display:flex; flex-direction:column; align-items:center; gap:0.3rem;
  padding:0.7rem 0.4rem; background:rgba(255,255,255,0.03);
  border:1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); font-family: var(--font-mono); font-size:0.6rem;
  font-weight:600; cursor:pointer; transition:all 0.3s ease; text-transform:uppercase; letter-spacing:0.06em;
  position: relative;
  overflow: hidden;
}
.tab-button .tab-icon { font-size:1.2rem; transition: all 0.3s ease; }

/* Development Tab - Blue/Purple Theme */
.tab-button[data-tab="development"] {
  --tab-color: #3b82f6;
  --tab-color-secondary: #8b5cf6;
}
.tab-button[data-tab="development"]:hover {
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.3);
  color: #93c5fd;
}
.tab-button[data-tab="development"]:hover .tab-icon {
  color: #3b82f6;
  transform: scale(1.1);
}
.tab-button[data-tab="development"].active {
  background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(139,92,246,0.15));
  border: 1px solid rgba(59,130,246,0.4);
  color: #bfdbfe;
  box-shadow: 0 0 20px rgba(59,130,246,0.2);
  transform: scale(1.02);
}
.tab-button[data-tab="development"].active .tab-icon {
  color: #60a5fa;
  filter: drop-shadow(0 0 8px rgba(59,130,246,0.4));
}

/* AI/ML Tab - Cyan/Indigo Theme */
.tab-button[data-tab="ai"] {
  --tab-color: #06b6d4;
  --tab-color-secondary: #6366f1;
}
.tab-button[data-tab="ai"]:hover {
  background: rgba(6,182,212,0.08);
  border-color: rgba(6,182,212,0.3);
  color: #67e8f9;
}
.tab-button[data-tab="ai"]:hover .tab-icon {
  color: #06b6d4;
  transform: scale(1.1);
}
.tab-button[data-tab="ai"].active {
  background: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(99,102,241,0.15));
  border: 1px solid rgba(6,182,212,0.4);
  color: #a5f3fc;
  box-shadow: 0 0 20px rgba(6,182,212,0.2);
  transform: scale(1.02);
}
.tab-button[data-tab="ai"].active .tab-icon {
  color: #22d3ee;
  filter: drop-shadow(0 0 8px rgba(6,182,212,0.4));
}

/* Tools Tab - Orange/Yellow Theme */
.tab-button[data-tab="tools"] {
  --tab-color: #f59e0b;
  --tab-color-secondary: #f97316;
}
.tab-button[data-tab="tools"]:hover {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.3);
  color: #fcd34d;
}
.tab-button[data-tab="tools"]:hover .tab-icon {
  color: #f59e0b;
  transform: scale(1.1);
}
.tab-button[data-tab="tools"].active {
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(249,115,22,0.15));
  border: 1px solid rgba(245,158,11,0.4);
  color: #fde68a;
  box-shadow: 0 0 20px rgba(245,158,11,0.2);
  transform: scale(1.02);
}
.tab-button[data-tab="tools"].active .tab-icon {
  color: #fbbf24;
  filter: drop-shadow(0 0 8px rgba(245,158,11,0.4));
}

/* Other Tab - Green/Teal Theme */
.tab-button[data-tab="other"] {
  --tab-color: #10b981;
  --tab-color-secondary: #14b8a6;
}
.tab-button[data-tab="other"]:hover {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.3);
  color: #34d399;
}
.tab-button[data-tab="other"]:hover .tab-icon {
  color: #10b981;
  transform: scale(1.1);
}
.tab-button[data-tab="other"].active {
  background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(20,184,166,0.15));
  border: 1px solid rgba(16,185,129,0.4);
  color: #6ee7b7;
  box-shadow: 0 0 20px rgba(16,185,129,0.2);
  transform: scale(1.02);
}
.tab-button[data-tab="other"].active .tab-icon {
  color: #34d399;
  filter: drop-shadow(0 0 8px rgba(16,185,129,0.4));
}

.tab-panel { display:none; }
.tab-panel.active { display:block; animation: tabFadeIn 0.3s ease; }
@keyframes tabFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.tab-icon-large { font-size:2.5rem; margin-bottom:0.75rem; }
.tab-title { font-family: var(--font-head); font-size:1.15rem; font-weight:700; color: var(--text-primary); letter-spacing:-0.02em; margin-bottom:1rem; }
.tab-list { list-style:none; padding:0; }
.tab-list li {
  position:relative; padding-left:1.3rem; font-size:0.9rem;
  color: var(--text-secondary); margin-bottom:0.6rem; line-height:1.5; transition:color 0.2s ease;
}
.tab-list li::before {
  content:'▸'; position:absolute; left:0;
  background: var(--grad-cyan); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  font-size:0.8rem;
}
.tab-list li:hover { color: var(--text-primary); }

/* ══════════════════════════════════════════
   EXPERIENCE TIMELINE
   ══════════════════════════════════════════ */
.experience { padding:120px 0; background: var(--bg-surface); }
.timeline { position:relative; max-width:820px; margin:0 auto; padding-left:2rem; }
.timeline::before {
  content:''; position:absolute; left:6px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--violet),var(--cyan),transparent);
  transform:scaleY(0); transform-origin:top;
  transition: transform 1.4s var(--ease-out); border-radius:99px;
}
.timeline.in-view::before { transform:scaleY(1); }

.timeline-item { position:relative; margin-bottom:2.5rem; padding-left:2.5rem; }
.timeline-marker {
  position:absolute; left:-9px; top:18px; width:16px; height:16px;
  background: var(--grad-cyan); border-radius:50%;
  box-shadow:0 0 0 4px rgba(6,182,212,0.15),0 0 20px rgba(6,182,212,0.4); z-index:1;
  transform:scale(0); transition: transform 0.6s var(--ease-spring);
}
.timeline-item.in-view .timeline-marker { transform:scale(1); }

/* Experience Timeline Cards - Premium Color Themes */
/* Python Development - Soft Red-Pink Glow */
.timeline-item:nth-child(1) .timeline-content {
  border-top: 2px solid;
  border-image: linear-gradient(90deg, #EF4444, #FB7185) 1;
}
.timeline-item:nth-child(1) .timeline-marker {
  background: linear-gradient(135deg, #EF4444, #FB7185);
  box-shadow: 0 0 0 4px rgba(239,68,68,0.15), 0 0 20px rgba(239,68,68,0.35);
}
.timeline-item:nth-child(1) .timeline-header h3 {
  background: linear-gradient(135deg, #EF4444, #FB7185);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.timeline-item:nth-child(1) .timeline-duration {
  background: linear-gradient(135deg, rgba(239,68,68,0.2), rgba(251,113,133,0.15));
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.4);
  box-shadow: 0 2px 8px rgba(239,68,68,0.25);
}
.timeline-item:nth-child(1) .timeline-contributions li::before {
  content:'▸'; position:absolute; left:-0.5rem; top:0; line-height:1.6;
  background: linear-gradient(135deg, #EF4444, #FB7185);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-weight:700;
}
.timeline-item:nth-child(1):hover .timeline-content {
  transform: translateY(-5px) scale(1.01);
  box-shadow: var(--shadow-card), 0 0 20px rgba(239,68,68,0.25);
}

/* C++ Programming - Warm Orange-Yellow Glow */
.timeline-item:nth-child(2) .timeline-content {
  border-top: 2px solid;
  border-image: linear-gradient(90deg, #F59E0B, #FB923C) 1;
}
.timeline-item:nth-child(2) .timeline-marker {
  background: linear-gradient(135deg, #F59E0B, #FB923C);
  box-shadow: 0 0 0 4px rgba(245,158,11,0.15), 0 0 20px rgba(245,158,11,0.4);
}
.timeline-item:nth-child(2) .timeline-header h3 {
  background: linear-gradient(135deg, #F59E0B, #FB923C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.timeline-item:nth-child(2) .timeline-duration {
  background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(251,146,60,0.15));
  color: #fcd34d;
  border: 1px solid rgba(245,158,11,0.4);
  box-shadow: 0 2px 8px rgba(245,158,11,0.25);
}
.timeline-item:nth-child(2) .timeline-contributions li::before {
  content:'▸'; position:absolute; left:-0.5rem; top:0; line-height:1.6;
  background: linear-gradient(135deg, #F59E0B, #FB923C);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-weight:700;
}
.timeline-item:nth-child(2):hover .timeline-content {
  transform: translateY(-5px) scale(1.01);
  box-shadow: var(--shadow-card), 0 0 20px rgba(245,158,11,0.25);
}

/* Web Development - Cool Blue-Purple Glow */
.timeline-item:nth-child(3) .timeline-content {
  border-top: 2px solid;
  border-image: linear-gradient(90deg, #4F46E5, #22D3EE) 1;
}
.timeline-item:nth-child(3) .timeline-marker {
  background: linear-gradient(135deg, #4F46E5, #22D3EE);
  box-shadow: 0 0 0 4px rgba(79,70,229,0.15), 0 0 20px rgba(79,70,229,0.4);
}
.timeline-item:nth-child(3) .timeline-header h3 {
  background: linear-gradient(135deg, #4F46E5, #22D3EE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.timeline-item:nth-child(3) .timeline-duration {
  background: linear-gradient(135deg, rgba(79,70,229,0.2), rgba(34,211,238,0.15));
  color: #93c5fd;
  border: 1px solid rgba(79,70,229,0.4);
  box-shadow: 0 2px 8px rgba(79,70,229,0.25);
}
.timeline-item:nth-child(3) .timeline-contributions li::before {
  content:'▸'; position:absolute; left:-0.5rem; top:0; line-height:1.6;
  background: linear-gradient(135deg, #4F46E5, #22D3EE);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-weight:700;
}
.timeline-item:nth-child(3):hover .timeline-content {
  transform: translateY(-5px) scale(1.01);
  box-shadow: var(--shadow-card), 0 0 20px rgba(79,70,229,0.25);
}
.timeline-header { 
  display:flex; 
  justify-content:space-between; 
  align-items:flex-start; 
  margin-bottom:0.6rem; 
  margin-top: 10px; /* Add space between badge and top border */
}
.timeline-header h3 { 
  font-family: var(--font-head); 
  font-size:1.3rem; /* Increased from 1.1rem for better hierarchy */
  font-weight:700; 
  color: var(--text-primary); 
  letter-spacing:-0.02em; 
  margin-bottom: 8px; /* Add space below title */
}
.timeline-duration {
  font-family: var(--font-mono); font-size:0.65rem; font-weight:700; color: var(--cyan);
  background:rgba(6,182,212,0.1); border:1px solid rgba(6,182,212,0.25);
  padding:0.25rem 0.7rem; border-radius:99px; text-transform:uppercase; letter-spacing:0.08em; flex-shrink:0;
  margin-top: 2px; /* Slight adjustment for better alignment */
}
.timeline-organization { font-size:0.8rem; font-family: var(--font-mono); color: var(--violet2); margin-bottom:1rem; letter-spacing:0.02em; }
.timeline-contributions { list-style:none; padding:0; }
.timeline-contributions li {
  position:relative; padding-left:1.5rem; margin-bottom:0.5rem;
  font-size:0.875rem; color: var(--text-secondary); line-height:1.6;
}
.timeline-contributions li::before {
  content:'▸'; position:absolute; left:-0.5rem; top:0; line-height:1.6;
  background: var(--grad-cyan); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:700;
}

/* ══════════════════════════════════════════
   INSIGHTS / RESEARCH
   ══════════════════════════════════════════ */
.insights { padding:120px 0; background: var(--bg-raised); }
.research-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.75rem; margin-bottom:4rem; }

.research-card {
  background: var(--grad-card); border:1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  transition: transform 0.3s var(--ease-spring), border-color 0.3s ease, box-shadow 0.3s ease;
}
.research-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,0.7),rgba(6,182,212,0.7),transparent);
}
.research-card::after { content:''; position:absolute; top:0; left:0; right:0; height:4px; opacity:0; transition:opacity 0.3s ease; }
.research-card[data-domain="predictive"]::after { background: var(--grad-cyan); }
.research-card[data-domain="autonomous"]::after { background: var(--grad-violet); }
.research-card[data-domain="healthcare"]::after { background: var(--grad-gold); }
.research-card:hover { transform:translateY(-8px) scale(1.01); border-color: var(--border-accent); box-shadow: var(--shadow-card), var(--shadow-glow-v); }
.research-card:hover::after { opacity:1; }

.research-header { display:flex; justify-content:space-between; align-items:flex-start; padding:2rem 2rem 1rem; border-bottom:1px solid var(--border); }
.research-icon {
  width:56px; height:56px; background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  color: var(--cyan); transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}
.research-card:hover .research-icon { transform:scale(1.12); box-shadow: var(--shadow-glow-c); }
.status-badge { font-family: var(--font-mono); font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; padding:0.3rem 0.75rem; border-radius:99px; }
.status-badge.primary    { background:rgba(6,182,212,0.1);   color: var(--cyan);   border:1px solid rgba(6,182,212,0.25); }
.status-badge.secondary  { background:rgba(139,92,246,0.1);  color: var(--violet2);border:1px solid rgba(139,92,246,0.25); }
.status-badge.tertiary   { background:rgba(245,158,11,0.1);  color: var(--gold);   border:1px solid rgba(245,158,11,0.25); }

.research-content { padding:1.5rem 2rem 2rem; flex:1; display:flex; flex-direction:column; }
.research-content h3 { font-family: var(--font-head); font-size:1.3rem; font-weight:700; color: var(--text-primary); letter-spacing:-0.02em; margin-bottom:0.75rem; }
.research-content p { font-size:0.875rem; color: var(--text-secondary); line-height:1.7; margin-bottom:1.5rem; flex:1; }
.research-methods { display:flex; flex-wrap:wrap; gap:0.45rem; }
.method-tag {
  font-family: var(--font-mono); font-size:0.65rem; font-weight:600;
  color: var(--violet2); background:rgba(139,92,246,0.08); border:1px solid rgba(139,92,246,0.2);
  padding:0.3rem 0.7rem; border-radius:6px; letter-spacing:0.04em; transition:all 0.2s ease;
}
.method-tag:hover { background:rgba(139,92,246,0.2); border-color: var(--border-accent); transform:translateY(-2px); }

.research-timeline {
  max-width:820px; margin:0 auto;
  background: var(--grad-card); border:1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding:2.5rem;
  position:relative; overflow:hidden;
}
.research-timeline::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--cyan),transparent);
}
.research-timeline h3 { font-family: var(--font-head); font-size:1.3rem; font-weight:700; color: var(--text-primary); text-align:center; letter-spacing:-0.02em; margin-bottom:2rem; }
.timeline-stages { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.timeline-stage { display:flex; align-items:flex-start; gap:1rem; padding:1.1rem; border-radius: var(--radius-sm); border:1px solid transparent; transition:all 0.25s ease; }
.timeline-stage.current { background:rgba(6,182,212,0.06); border-color:rgba(6,182,212,0.2); }
.timeline-stage.future { opacity:0.55; }
.timeline-stage:hover { background:rgba(255,255,255,0.03); border-color: var(--border); opacity:1; }
.stage-marker { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1rem; font-weight:700; }
.timeline-stage.current .stage-marker { background: var(--grad-cyan); color:#fff; box-shadow: var(--shadow-glow-c); }
.timeline-stage.future .stage-marker { background:rgba(255,255,255,0.04); border:1px solid var(--border); color: var(--text-muted); }
.stage-content h4 { font-family: var(--font-head); font-size:0.95rem; font-weight:700; color: var(--text-primary); letter-spacing:-0.01em; margin-bottom:0.3rem; }
.stage-content p { font-size:0.8rem; color: var(--text-secondary); line-height:1.5; margin-bottom:0.3rem; }
.stage-period { font-family: var(--font-mono); font-size:0.65rem; font-weight:600; color: var(--cyan); letter-spacing:0.06em; text-transform:uppercase; }

/* ══════════════════════════════════════════
   INSIGHTS - AI RESEARCH INSIGHTS
   ══════════════════════════════════════════ */
body {
  background: linear-gradient(
    to bottom,
    #020617 0%,
    #0f172a 30%,
    #1e1b4b 60%,
    #020617 100%
  );
  background-attachment: fixed;
}
.insights { 
  padding: 120px 0; 
  background: linear-gradient(135deg, #020617, #020617, #030b1a);
  position: relative;
  overflow: hidden;
}
.insights::before {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 15% 30%, rgba(59,130,246,0.12), transparent 40%),   /* Blue */
    radial-gradient(circle at 85% 30%, rgba(249,115,22,0.12), transparent 40%),   /* Orange */
    radial-gradient(circle at 50% 80%, rgba(168,85,247,0.12), transparent 40%),   /* Purple */
    radial-gradient(circle at 75% 70%, rgba(34,197,94,0.10), transparent 40%);    /* Green */
  
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.insights > * {
  position: relative;
  z-index: 1;
}

/* Research Cards Grid */
.research-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 28px; 
  margin-bottom: 80px;
}

/* Research Cards */
.research-card {
  background: var(--grad-card); 
  border: 1px solid var(--border);
  border-radius: 22px; /* 20px-24px range */
  box-shadow: var(--shadow-card);
  padding: 26px; /* 24px-28px range */
  position: relative; 
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
  /* Premium Animation */
  opacity: 0;
  transform: translateY(20px);
}
.research-card.in-view {
  opacity: 1;
  transform: translateY(0);
}
.research-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-accent);
}
/* Colored Top Border - Premium Enhancement */
.research-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px; /* 2px-3px range */
  background: linear-gradient(90deg, var(--card-border-color), transparent); /* Gradient effect */
}
.research-card:nth-child(1) {
  --card-border-color: #3b82f6; /* Blue for Predictive Analytics */
}
.research-card:nth-child(2) {
  --card-border-color: #f59e0b; /* Orange for Autonomous Systems */
}
.research-card:nth-child(3) {
  --card-border-color: #ef4444; /* Red for AI Disease Detection */
}
/* Hover glow effect for top border */
.research-card:hover::before {
  height: 4px;
  box-shadow: 0 0 12px var(--card-border-color);
}

/* Research Card Header */
.research-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem; /* 16px-20px range */
  gap: 12px; /* Gap between icon and title */
}

.research-card-header-left {
  display: flex;
  align-items: center;
  gap: 12px; /* Gap between icon and title */
  flex: 1;
}

/* Research Icons */
.research-icon {
  width: 52px; /* Increased from 44px */
  height: 52px; /* Increased from 44px */
  border-radius: 12px; /* Soft square */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* Increased from 1.3rem */
  background: var(--grad-hero);
  color: white;
  box-shadow: 0 4px 16px rgba(59,130,246,0.3);
  transition: all 0.3s var(--ease-out);
  flex-shrink: 0;
}
.research-card:hover .research-icon {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(59,130,246,0.5);
}
.research-card:nth-child(2) .research-icon {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  box-shadow: 0 4px 16px rgba(245,158,11,0.3);
}
.research-card:nth-child(2):hover .research-icon {
  box-shadow: 0 6px 24px rgba(245,158,11,0.5);
}
.research-card:nth-child(3) .research-icon {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 16px rgba(239,68,68,0.3);
}
.research-card:nth-child(3):hover .research-icon {
  box-shadow: 0 6px 24px rgba(239,68,68,0.5);
}

/* Research Title in Header */
.research-title-header {
  font-family: var(--font-head); 
  font-size: 1.1rem; 
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  transition: all 0.3s var(--ease-out);
}
.research-card:nth-child(1) .research-title-header {
  color: #93c5fd; /* Blue matching icon */
}
.research-card:nth-child(1):hover .research-title-header {
  color: #bfdbfe; /* Brighten on hover */
}
.research-card:nth-child(2) .research-title-header {
  color: #fcd34d; /* Orange matching icon */
}
.research-card:nth-child(2):hover .research-title-header {
  color: #fde68a; /* Brighten on hover */
}
.research-card:nth-child(3) .research-title-header {
  color: #fca5a5; /* Red matching icon */
}
.research-card:nth-child(3):hover .research-title-header {
  color: #fecaca; /* Brighten on hover */
}

/* Research Badges */
.research-badge {
  font-family: var(--font-mono); 
  font-size: 0.6rem; 
  font-weight: 600;
  text-transform: uppercase; 
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem; 
  border-radius: 99px;
  display: inline-block;
  flex-shrink: 0;
}
.research-badge.active-focus {
  background: rgba(59,130,246,0.15); 
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,0.3);
}
.research-badge.emerging-interest {
  background: rgba(245,158,11,0.15); 
  color: #fcd34d;
  border: 1px solid rgba(245,158,11,0.3);
}
.research-badge.high-priority {
  background: rgba(239,68,68,0.15); 
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.3);
}

/* Research Content */
.research-title {
  font-family: var(--font-head); font-size:1.45rem; font-weight:700;
  color: var(--text-primary); letter-spacing:-0.02em; 
  margin-bottom: 1rem;
  background: var(--grad-hero);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-align: center;
}
.research-description {
  font-size:0.9rem; color: var(--text-secondary);
  line-height:1.7; margin-bottom: 1.5rem;
  text-align: center;
}

/* Research Tags */
.research-tags { 
  display: grid; 
  grid-template-columns: repeat(2, auto); 
  gap: 0.6rem; /* 10px-12px equivalent */
  justify-content: center; /* Center alignment */
  margin-top: auto; /* Push to bottom */
}
.tag {
  font-family: var(--font-mono); font-size:0.62rem; font-weight:600;
  padding:0.4rem 0.75rem; /* 6px 12px equivalent */
  border-radius:99px; /* Pill shape */
  text-transform:uppercase; letter-spacing:0.05em;
  transition: all 0.2s var(--ease-out);
  border: 1px solid;
  white-space: nowrap; /* Prevent text wrapping inside badge */
  min-width: fit-content; /* Equal badge width based on content */
  /* Default styling - will be overridden per card */
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
}
/* Card 1 - Blue Theme (Predictive Analytics) */
.research-card:nth-child(1) .tag {
  color: #93c5fd; /* Soft blue text */
  border-color: rgba(59,130,246,0.4); /* Blue border */
  background: rgba(59,130,246,0.08); /* Low-opacity blue background */
}
.research-card:nth-child(1) .tag:hover {
  color: #bfdbfe; /* Brighter blue on hover */
  border-color: rgba(59,130,246,0.6);
  background: rgba(59,130,246,0.15);
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(59,130,246,0.2);
}
/* Card 2 - Orange Theme (Autonomous Systems) */
.research-card:nth-child(2) .tag {
  color: #fcd34d; /* Orange text */
  border-color: rgba(245,158,11,0.4); /* Orange border */
  background: rgba(245,158,11,0.08); /* Low-opacity orange background */
}
.research-card:nth-child(2) .tag:hover {
  color: #fde68a; /* Brighter orange on hover */
  border-color: rgba(245,158,11,0.6);
  background: rgba(245,158,11,0.15);
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(245,158,11,0.2);
}
/* Card 3 - Red Theme (AI for Disease Detection) */
.research-card:nth-child(3) .tag {
  color: #fca5a5; /* Red text */
  border-color: rgba(239,68,68,0.4); /* Red border */
  background: rgba(239,68,68,0.08); /* Low-opacity red background */
}
.research-card:nth-child(3) .tag:hover {
  color: #fecaca; /* Brighter red on hover */
  border-color: rgba(239,68,68,0.6);
  background: rgba(239,68,68,0.15);
  transform: scale(1.03);
  box-shadow: 0 2px 8px rgba(239,68,68,0.2);
}

/* Timeline Section */
.timeline-section {
  margin-top: 60px;
}
.timeline-title {
  font-family: var(--font-head); font-size:1.8rem; font-weight:700;
  color: var(--text-primary); text-align: center;
  margin-bottom: 3rem;
  background: var(--grad-hero);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Timeline Grid */
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px; /* 20px-24px range */
}

/* Timeline Boxes - Premium Color Themes */
.timeline-box {
  background: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  position: relative;
  transition: all 0.3s var(--ease-out);
  text-align: center;
  /* Premium Animation */
  opacity: 0;
  transform: translateY(20px);
}

/* Foundation Building (ACTIVE) - Blue-Cyan Theme */
.timeline-box:nth-child(1) {
  background: linear-gradient(135deg, rgba(79,70,229,0.15), rgba(34,211,238,0.1));
  border: 2px solid rgba(79,70,229,0.4);
  transform: scale(1.02) translateY(20px);
  box-shadow: 0 8px 32px rgba(79,70,229,0.25);
}
.timeline-box:nth-child(1).in-view {
  opacity: 1;
  transform: scale(1.02) translateY(0);
}
.timeline-box:nth-child(1) .timeline-indicator {
  background: linear-gradient(135deg, #4F46E5, #22D3EE);
  box-shadow: 0 0 20px rgba(79,70,229,0.4);
  transform: scale(1.2);
}
.timeline-box:nth-child(1) .timeline-box-title {
  background: linear-gradient(135deg, #4F46E5, #22D3EE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.15rem;
  font-weight: 700;
}
.timeline-box:nth-child(1) .timeline-year {
  color: #93c5fd;
  text-shadow: 0 0 8px rgba(79,70,229,0.3);
  background: linear-gradient(135deg, rgba(79,70,229,0.2), rgba(34,211,238,0.15));
  border: 1px solid rgba(79,70,229,0.4);
}

/* Specialization Phase - Purple Theme */
.timeline-box:nth-child(2) {
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(168,85,247,0.08));
  border: 1px solid rgba(139,92,246,0.3);
  opacity: 0.85;
}
.timeline-box:nth-child(2):hover {
  opacity: 1;
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(139,92,246,0.2);
}
.timeline-box:nth-child(2) .timeline-indicator {
  background: linear-gradient(135deg, #8B5CF6, #A855F7);
  box-shadow: 0 0 12px rgba(139,92,246,0.3);
}
.timeline-box:nth-child(2) .timeline-box-title {
  background: linear-gradient(135deg, #8B5CF6, #A855F7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.15rem;
  font-weight: 600;
}
.timeline-box:nth-child(2) .timeline-year {
  color: #a5b4fc;
  text-shadow: 0 0 6px rgba(139,92,246,0.2);
  background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(168,85,247,0.1));
  border: 1px solid rgba(139,92,246,0.3);
}

/* Advanced Research - Orange Theme */
.timeline-box:nth-child(3) {
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(251,146,60,0.08));
  border: 1px solid rgba(245,158,11,0.3);
  opacity: 0.85;
}
.timeline-box:nth-child(3):hover {
  opacity: 1;
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(245,158,11,0.2);
}
.timeline-box:nth-child(3) .timeline-indicator {
  background: linear-gradient(135deg, #F59E0B, #FB923C);
  box-shadow: 0 0 12px rgba(245,158,11,0.3);
}
.timeline-box:nth-child(3) .timeline-box-title {
  background: linear-gradient(135deg, #F59E0B, #FB923C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.15rem;
  font-weight: 600;
}
.timeline-box:nth-child(3) .timeline-year {
  color: #fcd34d;
  text-shadow: 0 0 6px rgba(245,158,11,0.2);
  background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(251,146,60,0.1));
  border: 1px solid rgba(245,158,11,0.3);
}

/* Industry Impact - Green Theme */
.timeline-box:nth-child(4) {
  background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(34,197,94,0.08));
  border: 1px solid rgba(16,185,129,0.3);
  opacity: 0.85;
}
.timeline-box:nth-child(4):hover {
  opacity: 1;
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(16,185,129,0.2);
}
.timeline-box:nth-child(4) .timeline-indicator {
  background: linear-gradient(135deg, #10B981, #22C55E);
  box-shadow: 0 0 12px rgba(16,185,129,0.3);
}
.timeline-box:nth-child(4) .timeline-box-title {
  background: linear-gradient(135deg, #10B981, #22C55E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.15rem;
  font-weight: 600;
}
.timeline-box:nth-child(4) .timeline-year {
  color: #6ee7b7;
  text-shadow: 0 0 6px rgba(16,185,129,0.2);
  background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(34,197,94,0.1));
  border: 1px solid rgba(16,185,129,0.3);
}

/* Background Enhancement */
.timeline-section {
  position: relative;
}
.timeline-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(79,70,229,0.05), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.timeline-box.in-view {
  opacity: 1;
  transform: translateY(0);
}
.timeline-box:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-accent);
}
.timeline-box.active {
  border: 1px solid rgba(59,130,246,0.4);
  background: linear-gradient(145deg, rgba(17,24,39,0.98), rgba(31,41,55,0.9));
}
.timeline-box.active::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--grad-hero);
}

/* Timeline Indicators */
.timeline-indicator {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--border);
  margin: 0 auto 1rem;
  position: relative;
}
.timeline-box.active .timeline-indicator {
  background: var(--grad-hero);
  box-shadow: 0 0 16px rgba(59,130,246,0.4);
}

/* Timeline Content */
.timeline-box-title {
  font-family: var(--font-head); font-size:1rem; font-weight:600;
  color: var(--text-primary); margin-bottom: 0.5rem;
}
.timeline-box.active .timeline-box-title {
  background: var(--grad-hero);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.timeline-box-text {
  font-size:0.8rem; color: var(--text-secondary);
  line-height:1.5; margin-bottom: 0.75rem;
}
.timeline-year {
  font-family: var(--font-mono); font-size:0.75rem; font-weight:700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing:0.05em;
}
.timeline-box.active .timeline-year {
  color: #93c5fd;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .research-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .timeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .research-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .timeline-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .timeline-section {
    margin-top: 40px;
  }
  .timeline-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
}

/* ══════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════ */
.contact { 
  padding: 120px 0; 
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 25% 35%, rgba(59,130,246,0.12), transparent 45%),  /* Blue */
    radial-gradient(circle at 75% 65%, rgba(34,211,238,0.10), transparent 45%),  /* Cyan */
    radial-gradient(circle at 50% 80%, rgba(139,92,246,0.08), transparent 50%);  /* Soft Purple */

  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.contact > * {
  position: relative;
  z-index: 1;
}
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.02), transparent);
  animation: shimmer 10s linear infinite;
}
.contact-panel { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; max-width:1000px; margin:0 auto; }
.contact-form, .contact-quick {
  background: var(--grad-card); border:1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding:2.25rem; position:relative; overflow:hidden;
}
.contact-form::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),var(--cyan),transparent);
}
.contact-quick::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--violet),transparent);
}
.contact-form h3, .contact-quick h3 {
  font-family: var(--font-head); font-size:1.25rem; font-weight:700;
  color: var(--text-primary); letter-spacing:-0.02em; margin-bottom:2rem; text-align:center;
}
.form-group { margin-bottom: 18px; }
.form-group label {
  display:block; font-family: var(--font-mono); font-size:13px; font-weight:600;
  color: rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.5rem;
  text-shadow: 0 0 8px rgba(96,165,250,0.25);
}
.form-group label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #22D3EE;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 8px #22D3EE;
}
.form-group input, .form-group textarea {
  width:100%; padding:0.9rem 1rem;
  background: rgba(15,23,42,0.6); border:1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); color: #ffffff;
  font-family: var(--font-body); font-size:0.9rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease; outline:none;
}
.form-group input::placeholder, .form-group textarea::placeholder { 
  color: rgba(255,255,255,0.4); 
}
.form-group input:focus, .form-group textarea:focus {
  border-color: #22D3EE;
  box-shadow: 0 0 10px rgba(34,211,238,0.3);
  background: rgba(34,211,238,0.04);
}
.quick-links { display:flex; flex-direction:column; gap:0.85rem; margin-bottom:1.5rem; }
.quick-link {
  display:flex; align-items:center; gap:1rem; padding:0.9rem 1rem;
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-secondary);
  text-decoration:none; font-weight:500; font-size:0.9rem; transition:all 0.25s ease;
}
.quick-link a {
  color: rgba(255,255,255,0.75);
  transition: all 0.25s ease;
}
.quick-link:hover { 
  background:rgba(139,92,246,0.1); 
  border-color: var(--border-accent); 
  color: var(--violet2); 
  transform:translateY(-2px); 
  box-shadow: var(--shadow-glow-v);
}
.quick-link:hover a {
  color: #22D3EE;
  text-decoration: underline;
}
.quick-link i { width:22px; text-align:center; font-size:1.1rem; }

/* Icon Glow Effects */
.icon-email {
  color: #60A5FA;
  filter: drop-shadow(0 0 6px rgba(96,165,250,0.6));
}
.icon-github {
  color: #E5E7EB;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.4));
}
.icon-linkedin {
  color: #0A66C2;
  filter: drop-shadow(0 0 8px rgba(10,102,194,0.6));
}
.icon-location {
  color: #22D3EE;
  filter: drop-shadow(0 0 6px rgba(34,211,238,0.6));
}
.icon-phone {
  color: #34D399;
  filter: drop-shadow(0 0 6px rgba(52,211,153,0.6));
}
.icon-availability {
  color: #A78BFA;
  filter: drop-shadow(0 0 6px rgba(167,139,250,0.6));
}
.icon-time {
  color: #22D3EE;
  filter: drop-shadow(0 0 8px rgba(34,211,238,0.8));
}

/* Hover Enhancement */
.quick-link:hover .icon,
.contact-info p:hover .icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px currentColor);
  transition: all 0.3s ease;
}
.contact-info { padding:1.25rem; background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius: var(--radius-sm); }
.contact-info p { display:flex; align-items:center; gap:0.75rem; font-size:0.85rem; color: var(--text-secondary); margin-bottom:0.6rem; }
.contact-info p:last-child { margin-bottom:0; }
.contact-info p:last-child {
  color: #22D3EE;
}
.contact-info i { color: var(--cyan); width:16px; text-align:center; }

/* Seamless section transitions */
.profile,
.skills,
.experience {
  position: relative;
}
.profile::after,
.skills::after,
.experience::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   FOOTER - MODERN PREMIUM DESIGN
   ══════════════════════════════════════════ */
.footer {
  background: linear-gradient(135deg, #0a1929 0%, #1a1f3a 25%, #2d1b69 50%, #0a1929 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 4rem 0 2rem;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Glowing gradient top border */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #22d3ee 20%, 
    #a78bfa 50%, 
    #22d3ee 80%, 
    transparent 100%);
  filter: blur(1px);
  animation: borderGlow 3s ease-in-out infinite alternate;
}

@keyframes borderGlow {
  0% { opacity: 0.6; filter: blur(1px); }
  100% { opacity: 1; filter: blur(2px); }
}

/* Floating ambient glow */
.footer::after {
  content: "";
  position: absolute;
  right: 5%;
  bottom: 10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(167,139,250,0.2), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  animation: floatGlow 6s ease-in-out infinite alternate;
}

@keyframes floatGlow {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-20px) scale(1.1); }
}

/* Footer grid layout with improved spacing */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

/* Footer sections */
.footer-left,
.footer-center,
.footer-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Brand identity section */
.footer-brand {
  animation: fadeUp 0.8s ease-out;
}

.footer-name {
  font-family: 'Inter', 'Poppins', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
  background: linear-gradient(135deg, #ffffff 0%, #a78bfa 50%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
}

.footer-tagline {
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  max-width: 400px;
}

.footer-description {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  max-width: 380px;
}

/* Footer headings */
.footer-heading {
  font-family: 'Inter', 'Poppins', sans-serif;
  color: #ffffff;
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #22d3ee, #a78bfa);
  border-radius: 1px;
}

/* Specific heading styles with exact text-matching widths - HIGHER SPECIFICITY */
.footer .footer-grid .footer-center .footer-heading.quick-links::after {
  width: 130px !important; /* Maximum width for "Quick Links" */
}

.footer .footer-grid .footer-right .footer-heading.connect::after {
  width: 100px !important; /* Maximum width for "Connect" */
}

/* Footer navigation */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Footer links with underline animation */
.footer-link {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  transition: color 0.3s ease;
  position: relative;
  display: inline-block;
}

.footer-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #22d3ee, #a78bfa);
  transition: width 0.3s ease;
}

.footer-link:hover {
  color: #ffffff;
}

.footer-link:hover::after {
  width: 100%;
}

/* Footer social links with enhanced hover effects */
.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1.1rem;
}

.footer-social-link:hover {
  color: #ffffff;
  background: rgba(34,211,238,0.1);
  border-color: rgba(34,211,238,0.3);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 25px rgba(34,211,238,0.3);
}

/* Footer bottom strip with soft divider */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 3rem;
  padding-top: 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  position: relative;
  z-index: 2;
}

.footer-bottom p {
  margin: 0;
  font-weight: 400;
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #22d3ee, #a78bfa);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(34,211,238,0.3);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(34,211,238,0.4);
}

.back-to-top:active {
  transform: translateY(-2px);
}

/* Entrance animation for footer */
.footer {
  animation: fadeUp 1s ease-out;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══════════════════════════════════════════
   RESPONSIVE — COMPLETE MOBILE SYSTEM
   ══════════════════════════════════════════ */

@media (max-width:1024px) {
  .profile-grid       { grid-template-columns:1fr; }
  .skills-grid        { grid-template-columns:1fr; }
  .research-grid      { grid-template-columns:repeat(2,1fr); }
  .timeline-grid      { grid-template-columns:repeat(2,1fr); }
  .hero-title         { font-size:clamp(2rem,4vw,3.5rem); }
  .container          { padding:0 32px; }
}

@media (max-width:768px) {

  /* Footer layout for 768px - center brand, Quick Links left, Connect right below */
  .footer { padding: 2.8rem 0 1.5rem; }
  .footer-grid { 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 2rem;
    align-items: start;
  }
  .footer-left {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    justify-self: center;
  }
  .footer-center {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    justify-self: start;
  }
  .footer-right {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    justify-self: end;
  }
  .footer-social {
    justify-content: flex-end;
  }

  /* NAV */
  .nav-menu {
    position:fixed; top:var(--nav-h); left:-100%; width:100%;
    flex-direction:column; background:rgba(3,7,18,0.98);
    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    border-top:1px solid var(--border); padding:1.5rem 0 2rem;
    gap:0.1rem; transition:left 0.35s var(--ease-out);
    z-index:9999; overflow-y:auto;
    max-height:calc(100vh - var(--nav-h)); list-style:none;
  }
  .nav-menu.active              { left:0; }
  .nav-toggle                   { display:flex; }
  .nav-menu .nav-link           { font-size:1rem; padding:0.9rem 2rem; display:block; width:100%; }
  .nav-menu .nav-cta            { margin:0.75rem 2rem 0; width:calc(100% - 4rem); text-align:center; display:flex; align-items:center; justify-content:center; min-height:44px; }
  .nav-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
  .nav-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  /* HERO */
  .hero                { padding:calc(var(--nav-h) + 32px) 0 48px; }
  .hero-grid           { grid-template-columns:1fr; gap:2rem; text-align:center; }
  .hero-title          { font-size:clamp(1.8rem,6.5vw,2.6rem); line-height:1.2; }
  .hero-subtitle       { font-size:clamp(0.85rem,3.5vw,1rem); }
  .status-indicator    { justify-content:center; }
  .hero-actions        { flex-direction:column; align-items:center; gap:0.75rem; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width:100%; max-width:320px; justify-content:center; }
  .chart-container     { max-width:100%; height:260px; }

  /* PROFILE */
  .cards-wrapper         { grid-template-columns:1fr; gap:1.5rem; }
  .stats-row             { grid-template-columns:repeat(2,1fr); gap:1rem; max-width:100%; }
  .profile-section-full  { flex-direction:column; align-items:center; text-align:center; }

  /* PROJECTS */
  .projects-grid       { grid-template-columns:1fr; gap:1.25rem; }
  .project-header      { flex-wrap:wrap; gap:0.5rem; }
  .project-header h3   { font-size:1rem; }
  .tech-stack          { flex-wrap:wrap; gap:0.4rem; }
  .project-expand      { width:100%; text-align:center; }

  /* FOOTER */
  .footer              { padding: 3rem 0 1.5rem; }
  .footer-grid         { grid-template-columns:1fr; gap:2rem; text-align:center; }
  .footer-left,
  .footer-center,
  .footer-right        { align-items:center; }
  .footer-name         { font-size:1.5rem; }
  .footer-tagline      { font-size:0.9rem; }
  .footer-description  { font-size:0.8rem; }
  .footer-heading      { font-size:0.9rem; }
  .footer-heading::after { left: 50%; transform: translateX(-50%); }
  
  /* Override responsive footer heading widths */
  .footer .footer-grid .footer-center .footer-heading.quick-links::after {
    width: 130px !important; left: 0; transform: none;
  }
  .footer .footer-grid .footer-right .footer-heading.connect::after {
    width: 100px !important; left: 0; transform: none;
  }
  .footer-link         { font-size:0.85rem; }
  .footer-social       { justify-content:center; }
  .footer-social-link { width: 38px; height: 38px; font-size: 1rem; }
  .back-to-top         { width: 45px; height: 45px; bottom: 1.5rem; right: 1.5rem; }

  /* SKILLS */
  .skills-grid         { grid-template-columns:1fr; }
  .tabs-navigation     { grid-template-columns:repeat(2,1fr); }

  /* EXPERIENCE */
  .timeline-grid       { grid-template-columns:1fr; }
  .timeline-stages     { grid-template-columns:1fr; }

  /* INSIGHTS */
  .research-grid       { grid-template-columns:1fr; }

  /* CONTACT */
  .contact-panel       { grid-template-columns:1fr; gap:1.5rem; }
  .contact-form,
  .contact-quick       { padding:1.5rem; }
  .quick-links         { gap:0.6rem; }
  .quick-link          { padding:0.75rem 0.9rem; font-size:0.85rem; }

  /* SECTION HEADERS */
  .section-title       { font-size:clamp(1.4rem,5vw,2rem); }
  .section-header      { text-align:center; }

  .container           { padding:0 20px; }
}

@media (max-width:480px) {
  :root { --nav-h:60px; }
  .container           { padding:0 16px; }
  .hero                { padding:calc(var(--nav-h) + 24px) 0 40px; }
  .hero-title          { font-size:1.75rem; }
  .stats-row           { grid-template-columns:repeat(2,1fr); gap:0.75rem; }
  .stat-number         { font-size:1.6rem; }
  .profile-stats       { gap:0.6rem; }
  .stat-value          { font-size:1.5rem; }
  .project-card,
  .profile-card,
  .about-block         { padding:1.25rem; }
  .skills-chart,
  .skills-categories,
  .contact-form,
  .contact-quick       { padding:1.25rem; }
  .tabs-navigation     { grid-template-columns:1fr 1fr; gap:0.4rem; }
  .tab-btn             { font-size:0.75rem; padding:0.5rem 0.4rem; }
  .hero, .profile, .projects,
  .skills, .experience,
  .insights, .contact  { padding-top:60px; padding-bottom:60px; }
}

@media (max-width:360px) {
  .container           { padding:0 12px; }
  .hero-title          { font-size:1.5rem; }
  .btn-primary,
  .btn-secondary       { font-size:0.8rem; padding:0.7rem 1rem; }
  .stats-row           { gap:0.6rem; }
  .stat-number         { font-size:1.4rem; }
  .section-badge       { font-size:0.6rem; letter-spacing:0.1em; }
  .nav-menu .nav-link  { font-size:0.95rem; padding:0.8rem 1.5rem; }
  .nav-menu .nav-cta   { margin:0.5rem 1.5rem 0; width:calc(100% - 3rem); display:flex; align-items:center; justify-content:center; min-height:42px; }
}

/* ══════════════════════════════════
   MOBILE FIX — 375px / 320px
   ══════════════════════════════════ */

@media (max-width: 480px) {

  /* Body — kill ALL horizontal overflow */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Container */
  .container { padding: 0 16px; width: 100%; box-sizing: border-box; }

  /* ── HERO ── */
  .hero { padding: 90px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .hero-title { font-size: 1.75rem !important; line-height: 1.2; word-break: break-word; }
  .hero-subtitle { font-size: 0.85rem; word-break: break-word; }
  .status-indicator { justify-content: center; max-width: 100%; overflow: hidden; }
  .hero-actions { flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width: 100%; max-width: 100%; justify-content: center; box-sizing: border-box; }

  /* ── CHART — stop it overflowing ── */
  .hero-visual { width: 100%; padding: 0; }
  .chart-container { width: 100% !important; max-width: 100% !important; height: 240px !important; padding: 1rem; box-sizing: border-box; }
  .chart-container:hover { transform: none; }

  /* ── SKILLS TABS — 2 columns only ── */
  .tabs-navigation { grid-template-columns: 1fr 1fr !important; gap: 0.4rem; }
  .tab-button { font-size: 0.6rem; padding: 0.5rem 0.3rem; }
  .tab-button .tab-icon { font-size: 1rem; }

  /* ── TIMELINE — stop left overflow ── */
  .timeline { padding-left: 1.5rem; }
  .timeline-content { margin-left: 0.75rem; padding: 1rem; word-break: break-word; }
  .timeline-item { padding-left: 1.75rem; }

  /* ── RESEARCH TAGS — wrap instead of overflow ── */
  .research-tags { grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .tag { white-space: normal; font-size: 0.58rem; padding: 0.35rem 0.5rem; min-width: 0; text-align: center; }

  /* ── RESEARCH CARD ── */
  .research-card { padding: 1.25rem; }

  /* ── SECTION SPACING ── */
  .hero, .profile, .projects, .skills,
  .experience, .insights, .contact { padding-top: 56px; padding-bottom: 56px; }
}

@media (max-width: 375px) {
  .hero-title { font-size: 1.55rem !important; }
  .hero-subtitle { font-size: 0.8rem; }
  .container { padding: 0 14px; }
  .tabs-navigation { gap: 0.3rem; }
  .tag { font-size: 0.55rem; padding: 0.3rem 0.4rem; }
  
  /* Navigation for 375px */
  .navbar { padding: 0 14px; }
  .nav-logo { font-size: 18px; }
  .nav-menu .nav-link { font-size: 0.95rem; padding: 0.85rem 1.8rem; }
  .nav-menu .nav-cta { font-size: 0.9rem; padding: 0.75rem 1.2rem; margin: 0.75rem 1.8rem 0; }
  
  /* Hero section for 375px */
  .hero { padding: calc(var(--nav-h) + 24px) 0 35px; }
  .hero-subtitle { line-height: 1.5; }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .chart-container { height: 220px; }
  .status-indicator { font-size: 0.75rem; }
  
  /* Profile section for 375px */
  .profile { padding: 50px 0; }
  .profile-card { padding: 1.8rem; }
  .profile-img-wrapper { width: 120px; height: 120px; }
  .profile-text h3 { font-size: 1.2rem; }
  .profile-text p { font-size: 0.9rem; }
  .about-block { padding: 1.2rem; }
  .about-text { font-size: 0.85rem; }
  .stats-row { gap: 0.8rem; }
  .stat-box { padding: 1rem; min-width: 80px; }
  .stat-number { font-size: 1.2rem; }
  .stat-label { font-size: 0.7rem; }
  .badge { font-size: 0.55rem; padding: 0.3rem 0.6rem; }
  
  /* Projects section for 375px */
  .projects { padding: 50px 0; }
  .projects-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .project-card { padding: 1.5rem; }
  .project-header h3 { font-size: 1rem; line-height: 1.4; }
  .project-status { font-size: 0.65rem; padding: 0.3rem 0.6rem; }
  .project-metrics { gap: 0.6rem; margin-bottom: 1rem; }
  .metric { padding: 0.5rem; }
  .metric-label { font-size: 0.65rem; }
  .metric-value { font-size: 0.8rem; }
  .project-details p { font-size: 0.8rem; }
  .tech-stack { gap: 0.4rem; }
  .tech-tag { font-size: 0.55rem; padding: 0.25rem 0.5rem; }
  .project-expand { font-size: 0.75rem; padding: 0.6rem 1rem; }
  
  /* Skills section for 375px */
  .skills { padding: 50px 0; }
  .skills-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .skills-chart, .skills-categories { padding: 1.5rem; }
  .chart-header, .categories-header { margin-bottom: 1.2rem; }
  .enhanced-heading h3 { font-size: 1rem; }
  .chart-subtitle, .categories-subtitle { font-size: 0.75rem; }
  .skill-item { padding: 0.8rem 0.6rem; }
  .skill-name { font-size: 0.8rem; }
  .skill-level { font-size: 0.75rem; }
  .skill-bar-container { height: 7px; }
  .tab-button { font-size: 0.75rem; padding: 0.6rem 1rem; }
  .tab-button svg { width: 22px; height: 22px; }
  .tab-panel { padding: 1.2rem; }
  .tab-title { font-size: 0.85rem; }
  .tab-list li { font-size: 0.75rem; }
  
  /* Fix technical expertise layout issues */
  .section-badge { font-size: 0.6rem; padding: 0.3rem 0.8rem; }
  .section-title { font-size: 1.3rem !important; line-height: 1.3; }
  .chart-legend { flex-wrap: wrap; gap: 0.5rem; }
  .legend-item { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
  .skill-list { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
  .tabs-navigation { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
  .tab-button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  
  /* Align skill proficiency and skill categories sections for 375px */
  .skills-chart, .skills-categories { 
    height: auto !important;
    min-height: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .chart-header, .categories-header { 
    flex-shrink: 0 !important;
  }
  .skill-list, .tab-panels { 
    flex: 1 !important;
    overflow-y: auto !important;
  }
  
  /* Fix dashboard hero section for 375px */
  .hero-visual { 
    width: 100% !important;
    max-width: 100% !important;
  }
  #heroChart { 
    width: 100% !important;
    height: 180px !important;
  }
  
  /* Experience timeline for 375px */
  .experience { padding: 50px 0; }
  .timeline-item { padding-left: 2.5rem; }
  .timeline-content { padding: 1.2rem; }
  .timeline-header h3 { font-size: 1rem; }
  .timeline-duration { font-size: 0.65rem; padding: 0.25rem 0.6rem; }
  .timeline-organization { font-size: 0.75rem; }
  .timeline-contributions li { font-size: 0.75rem; padding-left: 1.3rem; }
  .timeline-marker { width: 14px; height: 14px; left: -7px; }
  
  /* Insights/Research section for 375px */
  .insights { padding: 50px 0; }
  .research-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .research-card { padding: 1.5rem; }
  .research-card-header { margin-bottom: 1rem; }
  .research-title-header { font-size: 1rem; }
  .research-badge { font-size: 0.55rem; padding: 0.25rem 0.6rem; }
  .research-description { font-size: 0.8rem; }
  .research-tags { gap: 0.4rem; }
  .tag { font-size: 0.5rem; padding: 0.25rem 0.5rem; }
  .research-timeline { padding: 1.8rem; }
  .timeline-title { font-size: 1rem; }
  .timeline-stages { grid-template-columns: 1fr; gap: 1rem; }
  .timeline-stage { padding: 1rem; }
  .stage-marker { width: 35px; height: 35px; font-size: 0.75rem; }
  .stage-content h4 { font-size: 0.85rem; }
  .stage-content p { font-size: 0.75rem; }
  .stage-period { font-size: 0.55rem; }
  
  /* Contact section for 375px */
  .contact { padding: 50px 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .contact-form, .contact-quick { padding: 1.5rem; }
  .form-group { margin-bottom: 1rem; }
  .form-label { font-size: 0.75rem; }
  .form-control { font-size: 0.8rem; padding: 0.7rem; }
  .submit-btn { font-size: 0.75rem; padding: 0.7rem 1.2rem; }
  .quick-item { padding: 1rem; }
  .quick-icon { width: 35px; height: 35px; font-size: 0.9rem; }
  .quick-text h4 { font-size: 0.85rem; }
  .quick-text p { font-size: 0.75rem; }
  .social-links { gap: 0.6rem; }
  .social-link { width: 40px; height: 40px; font-size: 1rem; }
  
  /* Footer for 375px */
  .footer { padding: 2.5rem 0 1.5rem; }
  .footer-grid { 
    grid-template-columns: 1fr 1fr; 
    gap: 1.5rem; 
    text-align: left;
  }
  .footer-left {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 1.5rem;
  }
  .footer-center {
    grid-column: 1;
    text-align: left;
  }
  .footer-right {
    grid-column: 2;
    text-align: right;
  }
  .footer-name { font-size: 1.4rem; }
  .footer-tagline { font-size: 0.85rem; }
  .footer-description { font-size: 0.75rem; }
  .footer-heading { font-size: 0.85rem; margin-bottom: 0.8rem; }
  .footer-heading::after { width: 25px; }
  
  /* Override responsive footer heading widths for 375px */
  .footer .footer-grid .footer-center .footer-heading.quick-links::after {
    width: 130px !important; left: 0; transform: none;
  }
  .footer .footer-grid .footer-right .footer-heading.connect::after {
    width: 100px !important; left: 0; transform: none;
  }
  .footer-link { font-size: 0.8rem; }
  .footer-social-link { width: 35px; height: 35px; font-size: 0.9rem; }
  .footer-bottom { margin-top: 1.5rem; padding-top: 1rem; font-size: 0.8rem; }
  .back-to-top { width: 40px; height: 40px; bottom: 1rem; right: 1rem; }
}

@media (max-width: 786px) {
  /* Fix dashboard breaking at 786px */
  .chart-container { 
    width: 100% !important; 
    max-width: 100% !important; 
    height: 200px !important; 
    padding: 0.5rem !important; 
    box-sizing: border-box; 
    overflow: hidden;
  }
  .chart-container:hover { transform: none; }
  .chart-legend { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
  
  /* Fix dashboard hero section at 786px */
  .hero-visual { 
    width: 100% !important;
    max-width: 100% !important;
  }
  #heroChart { 
    width: 100% !important;
    height: 180px !important;
  }
  
  /* Align skill proficiency and skill categories sections at 786px */
  .skills-chart, .skills-categories { 
    height: auto !important;
    min-height: 350px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .chart-header, .categories-header { 
    flex-shrink: 0 !important;
  }
  .skill-list, .tab-panels { 
    flex: 1 !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 425px) {
  /* Align skill proficiency and skill categories sections at 425px */
  .skills-chart, .skills-categories { 
    height: auto !important;
    min-height: 330px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .chart-header, .categories-header { 
    flex-shrink: 0 !important;
  }
  
  /* Footer layout for 425px - Quick Links left, Connect right */
  .footer { padding: 2.2rem 0 1.5rem; }
  .footer-grid { 
    grid-template-columns: 1fr 1fr; 
    gap: 1.3rem; 
    text-align: left;
  }
  .footer-left {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 1.3rem;
  }
  .footer-center {
    grid-column: 1;
    text-align: left;
  }
  .footer-right {
    grid-column: 2;
    text-align: right;
  }
  .skill-list, .tab-panels { 
    flex: 1 !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 320px) {
  .hero-title { font-size: 1.35rem !important; }
  .container { padding: 0 12px; }
  .btn-primary, .btn-secondary { font-size: 0.78rem; padding: 0.65rem 0.9rem; }
  
  /* Navigation for 320px */
  .navbar { padding: 0 12px; }
  .nav-logo { font-size: 16px; }
  .nav-toggle span { height: 2px; }
  .nav-menu .nav-link { font-size: 0.9rem; padding: 0.8rem 1.5rem; }
  .nav-menu .nav-cta { font-size: 0.85rem; padding: 0.7rem 1rem; margin: 0.75rem 1.5rem 0; display:flex; align-items:center; justify-content:center; min-height:40px; }
  .stat-number { font-size: 1.3rem; }
  .section-title { font-size: 1.2rem !important; }
  
  /* Hero section for 320px */
  .hero { padding: calc(var(--nav-h) + 20px) 0 30px; }
  .hero-subtitle { font-size: 0.75rem; line-height: 1.4; }
  .hero-grid { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  .chart-container { height: 200px; }
  .status-indicator { font-size: 0.7rem; }
  
  /* Profile section for 320px */
  .profile { padding: 40px 0; }
  .profile-card { padding: 1.5rem; }
  .profile-img-wrapper { width: 100px; height: 100px; }
  .profile-text h3 { font-size: 1.1rem; }
  .profile-text p { font-size: 0.85rem; }
  .about-block { padding: 1rem; }
  .about-text { font-size: 0.8rem; }
  .stats-row { gap: 0.5rem; }
  .stat-box { padding: 0.8rem; min-width: 70px; }
  .stat-number { font-size: 1.1rem; }
  .stat-label { font-size: 0.65rem; }
  .badge { font-size: 0.5rem; padding: 0.25rem 0.5rem; }
  
  /* Projects section for 320px */
  .projects { padding: 40px 0; }
  .projects-grid { grid-template-columns: 1fr; gap: 1rem; }
  .project-card { padding: 1.2rem; }
  .project-header h3 { font-size: 0.9rem; line-height: 1.3; }
  .project-status { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
  .project-metrics { gap: 0.5rem; margin-bottom: 0.8rem; }
  .metric { padding: 0.4rem; }
  .metric-label { font-size: 0.6rem; }
  .metric-value { font-size: 0.7rem; }
  .project-content { min-height: 150px; }
  .project-details { margin-bottom: 0.5rem; }
  .project-details p { font-size: 0.75rem; }
  .tech-stack { gap: 0.3rem; }
  .tech-tag { font-size: 0.5rem; padding: 0.2rem 0.4rem; }
  .project-expand { font-size: 0.7rem; padding: 0.5rem 0.8rem; }
  
  /* Skills section for 320px */
  .skills { padding: 40px 0; }
  .skills-grid { grid-template-columns: 1fr; gap: 1rem; }
  .skills-chart, .skills-categories { padding: 1rem; }
  .chart-header, .categories-header { margin-bottom: 1rem; }
  .enhanced-heading h3 { font-size: 0.9rem; }
  .chart-subtitle, .categories-subtitle { font-size: 0.7rem; }
  .skill-item { padding: 0.6rem 0.4rem; }
  .skill-name { font-size: 0.75rem; }
  .skill-level { font-size: 0.7rem; }
  .skill-bar-container { height: 6px; }
  .tab-button { font-size: 0.65rem; padding: 0.4rem 0.6rem; }
  .tab-button svg { width: 18px; height: 18px; }
  .tab-panel { padding: 1rem; }
  .tab-title { font-size: 0.8rem; }
  .tab-list li { font-size: 0.7rem; }
  
  /* Fix technical expertise layout issues for 320px */
  .section-badge { font-size: 0.55rem; padding: 0.25rem 0.6rem; }
  .section-title { font-size: 1.2rem !important; line-height: 1.2; }
  .chart-legend { flex-wrap: wrap; gap: 0.3rem; }
  .legend-item { font-size: 0.55rem; padding: 0.15rem 0.4rem; }
  .skill-list { display: grid; grid-template-columns: 1fr; gap: 0.4rem; }
  .tabs-navigation { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem; }
  .tab-button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  
  /* Fix dashboard breaking and align skill sections for 320px */
  .chart-container { 
    width: 100% !important; 
    max-width: 100% !important; 
    height: 160px !important; 
    padding: 0.3rem !important; 
    box-sizing: border-box; 
    overflow: hidden;
  }
  .chart-container:hover { transform: none; }
  .chart-legend { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
  
  /* Align skill proficiency and skill categories sections */
  .skills-chart, .skills-categories { 
    height: auto !important;
    min-height: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 1 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .chart-header, .categories-header { 
    flex-shrink: 0 !important;
  }
  .skill-list, .tab-panels { 
    flex: 1 !important;
    overflow-y: auto !important;
  }
  
  /* Fix dashboard hero section */
  .hero-visual { 
    width: 100% !important;
    max-width: 100% !important;
  }
  #heroChart { 
    width: 100% !important;
    height: 140px !important;
  }
  
  /* Experience timeline for 320px */
  .experience { padding: 40px 0; }
  .timeline-item { padding-left: 2rem; }
  .timeline-content { padding: 1rem; }
  .timeline-header h3 { font-size: 0.9rem; }
  .timeline-duration { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
  .timeline-organization { font-size: 0.7rem; }
  .timeline-contributions li { font-size: 0.7rem; padding-left: 1.2rem; }
  .timeline-marker { width: 12px; height: 12px; left: -6px; }
  
  /* Insights/Research section for 320px */
  .insights { padding: 40px 0; }
  .research-grid { grid-template-columns: 1fr; gap: 1rem; }
  .research-card { padding: 1.2rem; }
  .research-card-header { margin-bottom: 0.8rem; }
  .research-title-header { font-size: 0.9rem; }
  .research-badge { font-size: 0.5rem; padding: 0.2rem 0.5rem; }
  .research-description { font-size: 0.75rem; }
  .research-tags { gap: 0.3rem; }
  .tag { font-size: 0.45rem; padding: 0.2rem 0.4rem; }
  .research-timeline { padding: 1.5rem; }
  .timeline-title { font-size: 0.9rem; }
  .timeline-stages { grid-template-columns: 1fr; gap: 0.8rem; }
  .timeline-stage { padding: 0.8rem; }
  .stage-marker { width: 30px; height: 30px; font-size: 0.7rem; }
  .stage-content h4 { font-size: 0.8rem; }
  .stage-content p { font-size: 0.7rem; }
  .stage-period { font-size: 0.5rem; }
  
  /* Contact section for 320px */
  .contact { padding: 40px 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 1rem; }
  .contact-form, .contact-quick { padding: 1.2rem; }
  .form-group { margin-bottom: 0.8rem; }
  .form-label { font-size: 0.7rem; }
  .form-control { font-size: 0.75rem; padding: 0.6rem; }
  .submit-btn { font-size: 0.7rem; padding: 0.6rem 1rem; }
  .quick-item { padding: 0.8rem; }
  .quick-icon { width: 30px; height: 30px; font-size: 0.8rem; }
  .quick-text h4 { font-size: 0.8rem; }
  .quick-text p { font-size: 0.7rem; }
  .social-links { gap: 0.5rem; }
  .social-link { width: 35px; height: 35px; font-size: 0.9rem; }
  
  /* Footer for 320px */
  .footer { padding: 2rem 0 1.5rem; }
  .footer-grid { 
    grid-template-columns: 1fr 1fr; 
    gap: 1rem; 
    text-align: left;
  }
  .footer-left {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 1rem;
  }
  .footer-center {
    grid-column: 1;
    text-align: left;
  }
  .footer-right {
    grid-column: 2;
    text-align: right;
  }
  .footer-name { font-size: 1.3rem; }
  .footer-tagline { font-size: 0.8rem; }
  .footer-description { font-size: 0.7rem; }
  .footer-heading { font-size: 0.8rem; margin-bottom: 0.6rem; }
  .footer-heading::after { width: 20px; }
  
  /* Override responsive footer heading widths for 320px */
  .footer .footer-grid .footer-center .footer-heading.quick-links::after {
    width: 130px !important; left: 0; transform: none;
  }
  .footer .footer-grid .footer-right .footer-heading.connect::after {
    width: 100px !important; left: 0; transform: none;
  }
  .footer-link { font-size: 0.75rem; }
  .footer-social-link { width: 32px; height: 32px; font-size: 0.85rem; }
  .footer-bottom { margin-top: 1.2rem; padding-top: 0.8rem; font-size: 0.75rem; }
  .back-to-top { width: 38px; height: 38px; bottom: 0.8rem; right: 0.8rem; }
}

/* ── Skill bar animation support ── */
.skill-progress {
  width: 0% !important;
  transition: width 1.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.skill-progress.animated {
  width: var(--target-width, 0%) !important;
}