/* ════════════════════════════════════════════
   GANESH KALAPAD PORTFOLIO — UNIQUE REDESIGN
   ════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --bg:         #030712;
  --bg2:        #090d16;
  --bg3:        #0f172a;
  --surface:    rgba(255,255,255,0.035);
  --surface2:   rgba(255,255,255,0.06);
  --border:     rgba(255,255,255,0.06);
  --border-h:   rgba(99,102,241,0.3);

  --indigo:     #6366f1;
  --cyan:       #06b6d4;
  --violet:     #8b5cf6;
  --pink:       #ec4899;
  --amber:      #f59e0b;
  --green:      #10b981;

  --text:       #f8fafc;
  --text2:      #cbd5e1;
  --text3:      #64748b;

  --grad:       linear-gradient(135deg,#6366f1,#06b6d4);
  --grad2:      linear-gradient(135deg,#8b5cf6,#ec4899);
  --grad3:      linear-gradient(135deg,#06b6d4,#10b981);

  --font:       'Plus Jakarta Sans', sans-serif;
  --font-d:     'Outfit', sans-serif;
  --font-m:     'JetBrains Mono', monospace;

  --r:          14px;
  --r2:         20px;
  --ease:       cubic-bezier(.4,0,.2,1);
  --spring:     cubic-bezier(.34,1.56,.64,1);
}

/* ── Light Theme Override Variables ── */
html[data-theme="light"] {
  --bg:         #f8fafc;
  --bg2:        #f1f5f9;
  --bg3:        #e2e8f0;
  --surface:    rgba(15,23,42,0.035);
  --surface2:   rgba(15,23,42,0.065);
  --border:     rgba(15,23,42,0.08);
  --border-h:   rgba(99,102,241,0.45);

  /* High contrast colors for light mode legibility */
  --indigo:     #4f46e5;
  --cyan:       #0891b2;
  --violet:     #7c3aed;
  --pink:       #db2777;
  --amber:      #b45309;
  --green:      #059669;

  --text:       #0f172a;
  --text2:      #334155;
  --text3:      #64748b;
}

/* Light theme specific overrides for highlights */
html[data-theme="light"] .proj-live-btn--grocery { color: #166534 !important; background: rgba(22,101,52,0.08) !important; border-color: rgba(22,101,52,0.2) !important; }
html[data-theme="light"] .proj-live-btn--grocery:hover { background: rgba(22,101,52,0.15) !important; }
html[data-theme="light"] .proj-live-btn--admin { color: #3730a3 !important; background: rgba(55,48,163,0.08) !important; border-color: rgba(55,48,163,0.2) !important; }
html[data-theme="light"] .proj-live-btn--admin:hover { background: rgba(55,48,163,0.15) !important; }
html[data-theme="light"] .proj-live-btn--delivery { color: #9a3412 !important; background: rgba(154,52,18,0.08) !important; border-color: rgba(154,52,18,0.2) !important; }
html[data-theme="light"] .proj-live-btn--delivery:hover { background: rgba(154,52,18,0.15) !important; }
html[data-theme="light"] .nav-links { background: rgba(248, 250, 252, 0.98) !important; }

/* ── Theme Switcher Button ── */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text2);
  transition: all 0.3s var(--ease);
  margin-left: 8px;
}
.theme-toggle:hover {
  color: var(--cyan);
  border-color: var(--cyan);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(6,182,212,0.15);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.5s var(--spring);
}
html[data-theme="light"] .theme-toggle svg {
  transform: rotate(360deg);
}
html[data-theme="dark"] .theme-sun { display: none; }
html[data-theme="light"] .theme-moon { display: none; }

/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; font-size:16px; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
::selection { background:rgba(99,102,241,.3); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:4px; }
.loader {
  position:fixed; inset:0; z-index:99999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.out { opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo-wrap {
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gk-logo-svg {
  width: 140px;
  height: 140px;
}
.gk-hex {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawHex 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.gk-path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}
.gk-path-g {
  animation: drawPath 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}
.gk-path-k {
  animation: drawPath 1.6s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}
.gk-logo-text {
  font-family: var(--font-m);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.45em;
  opacity: 0;
  transform: translateY(5px);
  animation: fadeText 1.2s ease 1.8s forwards;
}
@keyframes drawHex {
  to { stroke-dashoffset: 0; }
}
@keyframes drawPath {
  to { stroke-dashoffset: 0; }
}
@keyframes fadeText {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ════════════════════════════════════════════
   CUSTOM CURSOR
   ════════════════════════════════════════════ */


/* ════════════════════════════════════════════
   SCROLL BAR
   ════════════════════════════════════════════ */
.scroll-bar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--grad);
  z-index:10000;
  box-shadow:0 0 10px rgba(99,102,241,.6);
}

/* ════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:16px 40px;
  display:flex; align-items:center; justify-content:space-between;
  transition:all .3s var(--ease);
}
.nav.scrolled {
  background:rgba(3,7,18,.75);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:10px 40px;
}
.nav-brand {
  display: flex;
  align-items: center;
  height: 32px;
}
.gk-nav-logo path {
  transition: stroke 0.3s;
}
.nav-brand:hover .gk-nav-logo path {
  stroke: #ffffff;
}
html[data-theme="light"] .nav-brand:hover .gk-nav-logo path {
  stroke: #0f172a;
}
.nav-links { display:flex; align-items:center; gap:4px; }
.nl {
  padding:8px 16px;
  font-size:.85rem; font-weight:500;
  color:var(--text2);
  border-radius:8px;
  transition:all .2s;
}
.nl:hover { color:var(--text); background:var(--surface2); }
.nl.active { color:var(--cyan); }
.nav-hire {
  margin-left:8px;
  background:var(--grad);
  color:white !important;
  border-radius:8px;
  font-weight:600;
}
.nav-hire:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 4px 20px rgba(99,102,241,.4); }
.nav-burger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.nav-burger span { width:22px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }

/* ════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════ */
.hero {
  min-height:100vh; position:relative;
  display:grid; place-items:center;
  padding:100px 40px 60px;
  overflow:hidden;
}
.hero-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
}
.hero-grid {
  max-width:1280px; width:100%;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
  position:relative; z-index:1;
}

/* Hero Left */
.hero-left { display:flex; flex-direction:column; gap:20px; }
.hero-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 18px;
  border:1px solid rgba(16,185,129,.3);
  border-radius:100px;
  font-size:.78rem; color:#10b981; font-weight:600;
  background:rgba(16,185,129,.06);
  width:fit-content;
  animation:fadeUp .8s var(--ease) both;
}
.pill-dot {
  width:7px; height:7px; background:#10b981;
  border-radius:50%; animation:blink 2s infinite;
}
@keyframes blink { 50% { opacity:.3; transform:scale(1.4); } }

.hero-name { display:flex; flex-direction:column; animation:fadeUp .8s .1s var(--ease) both; }
.name-line {
  font-family:var(--font-d);
  font-size:clamp(3.5rem,7vw,6rem);
  font-weight:800; line-height:1;
  letter-spacing:-.03em;
}
.name-accent {
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200%;
  animation:gradMove 5s ease infinite;
}
@keyframes gradMove { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.hero-role {
  display:flex; align-items:center; gap:4px;
  font-size:1.1rem; color:var(--text2);
  font-family:var(--font-m);
  animation:fadeUp .8s .2s var(--ease) both;
}
.role-dynamic { color:var(--cyan); font-weight:600; }
.role-caret { color:var(--cyan); animation:blink 1s step-end infinite; }

.hero-bio {
  font-size:.95rem; color:var(--text2);
  line-height:1.8; max-width:480px;
  animation:fadeUp .8s .3s var(--ease) both;
}

.hero-actions {
  display:flex; gap:12px; flex-wrap:wrap;
  animation:fadeUp .8s .4s var(--ease) both;
}
.btn-main {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px;
  background:var(--grad); color:white;
  font-size:.9rem; font-weight:700;
  border-radius:12px;
  box-shadow:0 4px 20px rgba(99,102,241,.35);
  transition:all .3s var(--spring);
}
.btn-main:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(99,102,241,.5); }
.btn-main span { display:inline-block; transition:transform .3s var(--spring); }
.btn-main:hover span { transform:translateX(4px); }
.btn-ghost {
  display:inline-flex; align-items:center;
  padding:14px 28px;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:.9rem; font-weight:600; color:var(--text2);
  transition:all .3s;
}
.btn-ghost:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(6,182,212,.05); transform:translateY(-2px); }

.hero-socials {
  display:flex; gap:10px;
  animation:fadeUp .8s .5s var(--ease) both;
}
.hs {
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:10px;
  color:var(--text2); transition:all .3s;
}
.hs:hover { border-color:var(--cyan); color:var(--cyan); transform:translateY(-3px); box-shadow:0 4px 15px rgba(6,182,212,.2); }

/* Hero Scroll hint */
.hero-scroll {
  position:absolute; bottom:30px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  animation:fadeUp .8s .9s var(--ease) both;
}
.hero-scroll span { font-size:.65rem; color:var(--text3); letter-spacing:.15em; text-transform:uppercase; }
.scroll-track { width:20px; height:32px; border:1.5px solid var(--border); border-radius:10px; display:flex; justify-content:center; padding:4px 0; }
.scroll-thumb { width:3px; height:8px; background:var(--cyan); border-radius:3px; animation:scrollDown 2s ease-in-out infinite; }
@keyframes scrollDown { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(12px);opacity:0} }

/* ── Bento Grid ── */
.hero-right { animation:fadeUp .8s .3s var(--ease) both; }
.bento-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto auto;
  gap:12px;
}

.bento {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r2);
  overflow:hidden;
  transition:all .3s var(--ease);
}
.bento:hover { border-color:var(--border-h); }

.bento-code {
  grid-column:1/-1; padding:0;
  background:#090d16 !important;
  border-color:rgba(255,255,255,0.08) !important;
}
.bento-code .bento-bar {
  display:flex; align-items:center; gap:8px;
  padding:10px 16px;
  background:rgba(0,0,0,.45) !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
}
.bb { width:10px; height:10px; border-radius:50%; }
.bb.red{background:#ef4444;} .bb.yellow{background:#eab308;} .bb.green{background:#22c55e;}
.bento-file { font-family:var(--font-m); font-size:.75rem; color:#64748b; margin-left:8px; }
.bento-pre { padding:18px; font-family:var(--font-m); font-size:.8rem; line-height:1.9; overflow:hidden; color:#f1f5f9 !important; }
.t-kw{color:#c084fc} .t-var{color:#60a5fa} .t-prop{color:#67e8f9}
.t-str{color:#86efac} .t-num{color:#fbbf24} .t-bool{color:#fb923c}
.t-op{color:#f1f5f9 !important} .t-cmt{color:#64748b !important}

.bento-stat {
  padding:20px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:4px;
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(99,102,241,.02));
}
.bento-stat--cyan { background:linear-gradient(135deg,rgba(6,182,212,.1),rgba(6,182,212,.02)); }
.bento-stat--violet { background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(139,92,246,.02)); }
.stat-big {
  font-family:var(--font-d);
  font-size:2.2rem; font-weight:800; line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.stat-suf { font-family:var(--font-d); font-size:1.4rem; font-weight:800; color:var(--cyan); }
.stat-cap { font-size:.65rem; color:var(--text3); text-transform:uppercase; letter-spacing:.1em; }

.bento-loc {
  grid-column:span 2;
  padding:20px; display:flex; align-items:center; gap:16px;
}
.loc-map {
  width:60px; height:60px; flex-shrink:0;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(99,102,241,.15));
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.loc-pin {
  width:14px; height:14px;
  background:var(--cyan); border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  animation:locPulse 2s ease-in-out infinite;
}
@keyframes locPulse { 50% { box-shadow:0 0 0 8px rgba(6,182,212,.15); } }
.loc-city { display:block; font-weight:700; font-size:1rem; }
.loc-sub { display:block; font-size:.8rem; color:var(--text2); }

/* ════════════════════════════════════════════
   HIRE / RECRUITER BENTO CARD
   ════════════════════════════════════════════ */
.bento-hire {
  grid-column: span 2;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(135deg, rgba(16,185,129,.08) 0%, rgba(99,102,241,.08) 100%);
  border: 1px solid rgba(16,185,129,.2);
  position: relative;
  overflow: hidden;
  min-height: 110px;
}
.bento-hire::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(16,185,129,.07) 0%, transparent 65%);
  pointer-events: none;
}
.hire-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.3);
  color: #10b981;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--font-m);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  width: fit-content;
}
.hire-dot {
  width: 7px; height: 7px;
  background: #10b981;
  border-radius: 50%;
  animation: hirePulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hirePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
.hire-headline {
  font-size: .9rem;
  color: var(--text2);
  line-height: 1.45;
  margin: 0;
}
.hire-headline strong { color: var(--text1); }
.hire-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hire-chips span {
  font-size: .7rem;
  font-weight: 600;
  font-family: var(--font-m);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  color: var(--text2);
}
.hire-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  font-family: var(--font-m);
  padding: 8px 18px;
  border-radius: 100px;
  text-decoration: none;
  width: fit-content;
  transition: .25s;
  box-shadow: 0 4px 20px rgba(16,185,129,.25);
}
.hire-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(16,185,129,.4);
}

/* ════════════════════════════════════════════
   SECTIONS COMMON
   ════════════════════════════════════════════ */
.section { padding:100px 0; position:relative; z-index:1; }
.section-dark { background:var(--bg2); }
.container { max-width:1200px; margin:0 auto; padding:0 40px; }

.sec-label {
  font-family:var(--font-m);
  font-size:.78rem; color:var(--cyan);
  margin-bottom:12px; letter-spacing:.1em;
}
.sec-title {
  font-family:var(--font-d);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800; margin-bottom:56px; line-height:1.1;
}
.sec-title em { font-style:normal; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Reveal animation */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.visible { opacity:1; transform:none; }

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

.about-layout {
  display:grid; grid-template-columns:280px 1.2fr 1fr;
  gap:40px; align-items:start;
}
.about-img-container {
  position: relative;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--surface);
  box-shadow: 0 15px 35px rgba(0,0,0,0.35);
  transition: all 0.3s var(--ease);
}
.about-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.about-img-container:hover img {
  transform: scale(1.05);
}
.about-img-container:hover {
  border-color: var(--cyan);
  box-shadow: 0 15px 40px rgba(6, 182, 212, 0.18);
}
.about-text { display:flex; flex-direction:column; gap:16px; }
.about-text p { color:var(--text2); font-size:.95rem; line-height:1.8; }
.about-text strong { color:var(--text); }
.about-links { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.about-link {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-m); font-size:.85rem; color:var(--cyan);
  transition:.2s;
}
.about-link:hover { color:var(--indigo); }
.about-link::before { content:'→'; }

.edu-heading { font-family:var(--font-d); font-weight:700; font-size:1.2rem; margin-bottom:24px; }
.edu-timeline { display:flex; flex-direction:column; gap:0; }
.edu-item {
  display:flex; gap:20px; align-items:flex-start;
  padding-bottom:24px; position:relative;
}
.edu-item:not(:last-child)::before {
  content:''; position:absolute;
  left:7px; top:18px; bottom:0;
  width:2px; background:var(--border);
}
.edu-dot {
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--indigo);
  background:var(--bg); margin-top:4px;
}
.edu-item strong { display:block; font-size:.9rem; margin-bottom:4px; }
.edu-item span { font-size:.8rem; color:var(--text2); }

/* ════════════════════════════════════════════
   SKILLS
   ════════════════════════════════════════════ */
.stack-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.stack-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r2); padding:28px;
  transition:all .3s var(--ease);
}
.stack-card:hover { border-color:var(--border-h); box-shadow:0 8px 40px rgba(99,102,241,.1); }
.stack-icon { font-size:1.6rem; margin-bottom:12px; }
.stack-card h3 { font-family:var(--font-d); font-size:1rem; font-weight:700; margin-bottom:16px; }
.tags { display:flex; flex-wrap:wrap; gap:7px; }
.tag {
  padding:5px 12px; border-radius:8px;
  font-size:.75rem; font-weight:600; font-family:var(--font-m);
  cursor:default; transition:all .2s;
}
.tag--a {
  background:rgba(6,182,212,.08); border:1px solid rgba(6,182,212,.2);
  color:var(--cyan);
}
.tag--a:hover { background:rgba(6,182,212,.15); transform:translateY(-2px); }
.tag--b {
  background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.2);
  color:var(--violet);
}
.tag--b:hover { background:rgba(139,92,246,.15); transform:translateY(-2px); }

/* Koyeliya-style Developer Ecosystem Card Grid Overrides */
.stack-card .tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.stack-card .tag {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 6px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  transition: all 0.3s var(--ease) !important;
  text-align: center !important;
  cursor: default !important;
  width: auto !important;
  height: auto !important;
  color: var(--text2) !important;
}
.stack-card .tag:hover {
  border-color: var(--cyan) !important;
  background: rgba(99, 102, 241, 0.06) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(6, 182, 212, 0.15) !important;
}
.stack-card .tag i {
  font-size: 1.8rem !important;
  transition: transform 0.3s var(--spring) !important;
  margin-bottom: 2px;
}
.stack-card .tag:hover i {
  transform: scale(1.1) rotate(-3deg) !important;
}
.stack-card .tag span {
  display: block;
  font-size: 0.62rem !important;
  font-family: var(--font-m);
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stack-card .tag:hover span {
  color: var(--text);
}

/* ════════════════════════════════════════════
   EXPERIENCE
   ════════════════════════════════════════════ */
.xp-list { display:flex; flex-direction:column; gap:0; max-width:860px; }
.xp-item { display:flex; gap:24px; }
.xp-left { display:flex; flex-direction:column; align-items:center; padding-top:6px; }
.xp-dot {
  width:16px; height:16px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--text3); background:var(--bg);
  transition:.3s;
}
.xp-dot.active { border-color:var(--cyan); box-shadow:0 0 0 4px rgba(6,182,212,.15); }
.xp-dot.active::after { content:''; display:block; width:6px; height:6px; background:var(--cyan); border-radius:50%; margin:3px; }
.xp-line { width:2px; flex:1; background:var(--border); margin:6px 0; min-height:40px; }
.xp-body { padding-bottom:48px; flex:1; }
.xp-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 12px; border-radius:100px;
  font-size:.7rem; font-weight:700; margin-bottom:10px;
}
.xp-badge--live { background:rgba(16,185,129,.1); color:#10b981; border:1px solid rgba(16,185,129,.25); }
.xp-body h3 { font-family:var(--font-d); font-size:1.2rem; font-weight:700; margin-bottom:4px; }
.xp-meta { font-size:.82rem; color:var(--cyan); font-weight:500; margin-bottom:16px; font-family:var(--font-m); }
.xp-meta time { color:var(--text3); }
.xp-points { list-style:none; display:flex; flex-direction:column; gap:8px; }
.xp-points li {
  padding-left:18px; position:relative;
  font-size:.88rem; color:var(--text2); line-height:1.6;
}
.xp-points li::before { content:'▸'; position:absolute; left:0; color:var(--cyan); }
.xp-points strong { color:var(--text); font-weight:600; }
.xp-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.xp-tags span {
  padding:3px 10px; border-radius:6px; font-size:.72rem;
  font-family:var(--font-m); font-weight:500;
  background:rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.18);
  color:var(--violet);
}

/* ════════════════════════════════════════════
   PROJECTS
   ════════════════════════════════════════════ */
.proj-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  animation: fadeUp .8s .3s var(--ease) both;
}
.pf-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 8px 18px;
  border-radius: 10px;
  font-family: var(--font-m);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.pf-btn:hover {
  border-color: var(--cyan);
  color: var(--text);
  transform: translateY(-1px);
}
.pf-btn.active {
  background: var(--grad);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.proj-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.proj-card {
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r2); padding:32px;
  transition:opacity 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.3s;
  display:flex; flex-direction:column; gap:12px;
  opacity: 1;
  transform: scale(1);
}
.proj-card.hide {
  display: none !important;
}
.proj-card.fade-out {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}
.proj-card:hover { border-color:var(--border-h); }
.proj-glow {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(99,102,241,.06) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
}
.proj-card:hover .proj-glow { opacity:1; }
.proj-featured { grid-column:1/-1; background:linear-gradient(135deg,rgba(99,102,241,.05),rgba(6,182,212,.03)); border-color:rgba(99,102,241,.2); }
.proj-top { display:flex; justify-content:space-between; align-items:center; }
.proj-badge {
  padding:4px 12px; border-radius:100px;
  font-size:.72rem; font-weight:700;
  background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25);
  color:var(--indigo);
}
.proj-gh { color:var(--text3); transition:.2s; }
.proj-gh:hover { color:var(--cyan); transform:translateY(-2px) rotate(10deg); }
.proj-drive-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 12px; border-radius:100px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:var(--text2); font-size:.75rem; font-weight:500; font-family:var(--font-s);
  text-decoration:none; transition:.2s; white-space:nowrap;
}
.proj-drive-btn:hover {
  background:rgba(66,133,244,.15); border-color:rgba(66,133,244,.4);
  color:#fff; transform:translateY(-1px);
}
.proj-num {
  font-family:var(--font-m); font-size:.75rem; color:var(--text3);
  letter-spacing:.1em;
}
.proj-card h3 { font-family:var(--font-d); font-size:1.15rem; font-weight:700; line-height:1.3; }
.proj-company { font-size:.82rem; color:var(--cyan); font-weight:600; font-family:var(--font-m); }
.proj-desc { font-size:.87rem; color:var(--text2); line-height:1.7; flex:1; }
.proj-metrics-row { display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--border); }
.pm { text-align:center; }
.pm strong { display:block; font-family:var(--font-d); font-size:1.4rem; font-weight:800; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.pm span { font-size:.65rem; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; }
.proj-tech { display:flex; flex-wrap:wrap; gap:7px; }
.proj-tech span {
  padding:4px 10px; border-radius:7px; font-size:.72rem;
  font-family:var(--font-m); font-weight:500;
  background:rgba(6,182,212,.07); border:1px solid rgba(6,182,212,.15);
  color:var(--cyan);
}

/* ── Project Preview Image (clickable) ── */
.proj-preview-link {
  display:block; text-decoration:none; border-radius:12px; overflow:hidden;
  margin:-8px 0 4px;
}
.proj-preview {
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid var(--border); transition:all .4s var(--ease);
}
.proj-preview img {
  width:100%; height:auto; display:block;
  object-fit:cover; transition:transform .5s var(--ease), filter .4s;
  filter:brightness(.92);
}
.proj-preview-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); opacity:0; transition:opacity .35s var(--ease);
  pointer-events:none; backdrop-filter:blur(2px);
}
.proj-preview-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px; border-radius:100px;
  background:linear-gradient(135deg,var(--indigo),var(--cyan));
  color:#fff; font-size:.85rem; font-weight:600; font-family:var(--font-s);
  letter-spacing:.02em; transform:translateY(8px); transition:transform .35s var(--ease);
  box-shadow:0 4px 24px rgba(99,102,241,.35);
}
.proj-preview-link:hover .proj-preview { border-color:var(--indigo); }
.proj-preview-link:hover .proj-preview img { transform:scale(1.04); filter:brightness(.75); }
.proj-preview-link:hover .proj-preview-overlay { opacity:1; }
.proj-preview-link:hover .proj-preview-cta { transform:translateY(0); }

/* ── AI-Powered Badge ── */
.proj-badge--ai {
  background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(6,182,212,.1));
  border:1px solid rgba(139,92,246,.3);
  color:#a78bfa;
}

/* ── Project Feature Highlights ── */
.proj-features-row {
  display:flex; flex-wrap:wrap; gap:12px; padding:12px 0;
  border-top:1px solid var(--border);
}
.pf {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:8px;
  background:rgba(99,102,241,.06); border:1px solid rgba(99,102,241,.12);
  font-size:.75rem; color:var(--text2); font-family:var(--font-s); font-weight:500;
}
.pf-icon { font-size:.85rem; }

/* ── Project Live App Links ── */
.proj-live-links {
  display:flex; flex-wrap:wrap; gap:10px; padding:10px 0;
}
.proj-live-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 16px; border-radius:10px;
  font-size:.78rem; font-weight:600; font-family:var(--font-s);
  text-decoration:none; transition:all .25s var(--ease);
  border:1px solid transparent;
}
.proj-live-btn--grocery {
  background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.25); color:#4ade80;
}
.proj-live-btn--grocery:hover {
  background:rgba(34,197,94,.2); border-color:rgba(34,197,94,.5);
  transform:translateY(-2px); box-shadow:0 4px 16px rgba(34,197,94,.2);
}
.proj-live-btn--admin {
  background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.25); color:#818cf8;
}
.proj-live-btn--admin:hover {
  background:rgba(99,102,241,.2); border-color:rgba(99,102,241,.5);
  transform:translateY(-2px); box-shadow:0 4px 16px rgba(99,102,241,.2);
}
.proj-live-btn--delivery {
  background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.25); color:#fbbf24;
}
.proj-live-btn--delivery:hover {
  background:rgba(245,158,11,.2); border-color:rgba(245,158,11,.5);
  transform:translateY(-2px); box-shadow:0 4px 16px rgba(245,158,11,.2);
}

.proj-pub { margin-top:4px; }
.pub-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:8px;
  background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.2);
  font-size:.75rem; color:var(--amber);
  transition: all 0.25s var(--ease);
  cursor: pointer;
}
a.pub-chip:hover {
  background: rgba(245,158,11,0.18) !important;
  border-color: rgba(245,158,11,0.4) !important;
  transform: translateY(-1px);
  color: var(--amber) !important;
}

/* ── Certificate Carousel Styles ── */
.cert-slides {
  position: relative;
  width: 100%;
  height: 100%;
}
.cert-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}
.cert-slide.active {
  opacity: 1;
  z-index: 2;
}
.cert-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
.cert-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.25s ease;
}
.cert-dots .dot:hover {
  background: rgba(255,255,255,0.7);
  transform: scale(1.1);
}
.cert-dots .dot.active {
  background: var(--cyan);
  width: 14px;
  border-radius: 100px;
  box-shadow: 0 0 6px var(--cyan);
}

/* ════════════════════════════════════════════
   CERTIFICATIONS GALLERY
   ════════════════════════════════════════════ */
.cert-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.cf-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 10px 22px;
  border-radius: 12px;
  font-family: var(--font-m);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.cf-btn:hover {
  border-color: var(--indigo);
  color: var(--text);
  transform: translateY(-2px);
}
.cf-btn.active {
  background: var(--grad);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.cert-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 64px;
}

/* Hide cert-cards during filter */
.cert-card.hide {
  display: none !important;
}

/* Real certificate cards — show the actual image */
.cert-card--real {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  overflow: hidden;
  transition: all 0.3s var(--ease);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.cert-card--real:hover {
  border-color: var(--border-h);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.cert-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: rgba(0, 0, 0, 0.2);
}
.cert-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.cert-card--real:hover .cert-img-wrap img {
  transform: scale(1.04);
}

.cert-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 18, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.3s;
  backdrop-filter: blur(2px);
}
.cert-card--real:hover .cert-overlay {
  opacity: 1;
}
.cert-view {
  padding: 10px 22px;
  background: var(--grad);
  color: white;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  transform: translateY(8px);
  transition: transform 0.3s var(--spring);
}
.cert-card--real:hover .cert-view {
  transform: none;
}

.cert-info {
  padding: 18px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cert-medal {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.cert-info h4 {
  font-family: var(--font-d);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.cert-info p {
  font-size: 0.8rem;
  color: var(--text2);
}
.cert-date {
  font-family: var(--font-m);
  font-size: 0.72rem;
  color: var(--cyan);
  display: block;
  margin-top: 6px;
}

/* Multi Certificate Cards Tabs */
.cert-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 14px 0;
  flex-wrap: wrap;
}
.cert-tabs--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 12px 12px 0;
}
.ct-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  text-align: center;
}
.ct-btn:hover {
  background: var(--surface2);
  border-color: var(--border-h);
  color: var(--text);
}
.ct-btn.active {
  background: rgba(99, 102, 241, 0.15);
  border-color: var(--indigo);
  color: var(--text);
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.2);
}
html[data-theme="light"] .ct-btn.active {
  background: rgba(99, 102, 241, 0.2) !important;
  color: var(--indigo) !important;
  border-color: var(--indigo) !important;
}

/* Badge-style cert cards (no image) */
.cert-card--badge {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.3s var(--ease);
}
.cert-card--badge:hover { border-color:var(--border-h); }
.cert-badge-glow {
  position:absolute; top:-40px; right:-40px;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,.15) 0%, transparent 70%);
  pointer-events:none;
}
.cert-badge-icon { font-size:2rem; margin-bottom:4px; }
.cert-card--badge h4 { font-family:var(--font-d); font-size:.95rem; font-weight:700; line-height:1.3; }
.cert-card--badge p { font-size:.8rem; color:var(--text2); }
.cert-badge-tag {
  position:absolute; top:16px; right:16px;
  padding:3px 10px; border-radius:100px;
  font-size:.65rem; font-weight:700;
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25);
  color:var(--amber);
}

/* ── Volunteer cards ── */
.vol-title { font-family:var(--font-d); font-size:1.5rem; font-weight:700; margin-bottom:24px; }
.vol-title em { font-style:normal; background:var(--grad2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.vol-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.vol-card {
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:20px;
  transition:all .3s;
}
.vol-card:hover { border-color:var(--border-h); }
.vol-icon { font-size:1.6rem; flex-shrink:0; }
.vol-card strong { display:block; font-size:.9rem; margin-bottom:6px; }
.vol-card p { font-size:.82rem; color:var(--text2); line-height:1.6; }
.vol-card strong strong { color:var(--cyan); }

/* ════════════════════════════════════════════
   PUBLICATION
   ════════════════════════════════════════════ */
.pub-grid {
  display:flex;
  flex-direction:column;
  gap:28px;
  max-width:960px;
  margin:0 auto;
}
.pub-card {
  display:flex; gap:40px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r2); padding:40px;
  transition:.3s;
  position:relative;
}
.pub-card:hover { border-color:var(--border-h); box-shadow:0 8px 40px rgba(99,102,241,.1); }
.pub-left { display:flex; flex-direction:column; align-items:center; gap:12px; flex-shrink:0; }
.pub-icon { font-size:3rem; }
.pub-meta { display:flex; flex-direction:column; gap:6px; }
.pub-tag {
  padding:4px 12px; border-radius:100px;
  font-size:.7rem; font-weight:700;
  background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.25);
  color:var(--violet); white-space:nowrap;
}
.pub-tag--cyan { background:rgba(6,182,212,.08); border-color:rgba(6,182,212,.25); color:var(--cyan); }
.pub-right h3 { font-family:var(--font-d); font-size:1.2rem; font-weight:700; margin-bottom:8px; line-height:1.4; }
.pub-journal { font-size:.9rem; color:var(--cyan); font-weight:600; margin-bottom:4px; }
.pub-vol { font-family:var(--font-m); font-size:.78rem; color:var(--text3); margin-bottom:14px; }
.pub-desc { font-size:.87rem; color:var(--text2); line-height:1.7; margin-bottom:16px; }
.pub-topics { display:flex; flex-wrap:wrap; gap:7px; }
.pub-topics span { padding:4px 10px; border-radius:7px; font-size:.72rem; font-family:var(--font-m); background:rgba(139,92,246,.07); border:1px solid rgba(139,92,246,.15); color:var(--violet); }
.pub-title-link { color:var(--text); transition:all 0.3s var(--ease); }
.pub-title-link:hover { color:var(--cyan); }
.pub-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; background:rgba(99,102,241,0.06); border:1px solid rgba(99,102,241,0.2); border-radius:10px; font-size:.8rem; font-weight:600; color:var(--cyan); transition:all 0.3s var(--ease); cursor:pointer; font-family:var(--font-d); }
.pub-btn:hover { background:var(--grad); color:white; border-color:transparent; box-shadow:0 4px 15px rgba(99,102,241,.3); transform:translateY(-1px); }

/* ════════════════════════════════════════════
   CONTACT
   ════════════════════════════════════════════ */
.contact-sub { font-size:1rem; color:var(--text2); margin-bottom:48px; margin-top:-40px; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }

.contact-links { display:flex; flex-direction:column; gap:12px; }
.clink {
  display:flex; align-items:center; gap:16px;
  padding:16px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; transition:all .3s;
}
.clink:hover { border-color:var(--border-h); transform:translateX(5px); }
.clink--static { cursor:default; }
.clink--static:hover { transform:none; border-color:var(--border); }
.clink-icon { font-size:1.5rem; }
.clink em { font-style:normal; font-size:.7rem; color:var(--text3); text-transform:uppercase; letter-spacing:.1em; display:block; }
.clink strong { font-size:.88rem; color:var(--text); display:block; margin-top:2px; }
.clink-arrow { margin-left:auto; color:var(--text3); font-size:1.1rem; transition:.2s; }
.clink:hover .clink-arrow { color:var(--cyan); transform:translate(3px,-3px); }

/* Contact Form */
.contact-form {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r2); padding:36px;
  display:flex; flex-direction:column; gap:20px;
}
.cf-group { position:relative; }
.cf-group input,
.cf-group textarea {
  width:100%; padding:16px;
  background:rgba(0,0,0,.25); border:1px solid var(--border);
  border-radius:12px; color:var(--text);
  font-family:var(--font); font-size:.9rem;
  outline:none; transition:.3s; resize:vertical;
}
.cf-group input:focus,
.cf-group textarea:focus { border-color:var(--indigo); box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.cf-group label { display:none; }
.cf-submit {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px; background:var(--grad); color:white;
  border:none; border-radius:12px;
  font-size:.95rem; font-weight:700; font-family:var(--font);
  cursor:pointer; transition:all .3s var(--spring);
  box-shadow:0 4px 20px rgba(99,102,241,.3);
}
.cf-submit:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(99,102,241,.45); }

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
.footer { padding:36px 0; border-top:1px solid var(--border); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-brand { font-family:var(--font-m); font-weight:700; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.footer-copy { font-size:.8rem; color:var(--text3); }
.footer-socials { display:flex; gap:16px; }
.footer-socials a { font-family:var(--font-m); font-size:.78rem; color:var(--text3); font-weight:700; transition:.2s; }
.footer-socials a:hover { color:var(--cyan); }

/* ════════════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════════════ */
.lb-backdrop {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.92); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transition:.3s;
}
.lb-backdrop.open { opacity:1; visibility:visible; }
.lightbox {
  position:fixed; inset:0; z-index:9001;
  display:flex; align-items:center; justify-content:center;
  padding:40px; opacity:0; visibility:hidden; transition:.3s;
}
.lightbox.open { opacity:1; visibility:visible; }
.lb-inner { max-width:880px; width:100%; text-align:center; }

.lb-inner img {
  max-height:75vh; width:auto; max-width:100%;
  border-radius:16px;
  box-shadow:0 20px 80px rgba(0,0,0,.6);
  transform:scale(.95); transition:.3s var(--spring);
}
.lightbox.open .lb-inner img { transform:scale(1); }
.lb-caption { margin-top:16px; font-size:.9rem; color:var(--text2); }
.lb-close, .lb-prev, .lb-next {
  position:fixed; background:rgba(255,255,255,.08);
  border:1px solid var(--border); border-radius:12px;
  color:var(--text); font-size:1.2rem; cursor:pointer;
  transition:all .2s; backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
}
.lb-close { top:20px; right:20px; width:44px; height:44px; font-size:.9rem; }
.lb-prev { left:20px; top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:1.6rem; }
.lb-next { right:20px; top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:1.6rem; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background:var(--grad); border-color:transparent; transform:scale(1.05); }
.lb-prev:hover { transform:translateY(-50%) scale(1.05); }
.lb-next:hover { transform:translateY(-50%) scale(1.05); }

/* ════════════════════════════════════════════
   WHATSAPP FLOAT BUTTON
   ════════════════════════════════════════════ */
.wa-float {
  position: fixed;
  bottom: 88px;
  right: 28px;
  z-index: 950;
  width: 52px;
  height: 52px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.25);
  transition: transform .3s var(--spring), box-shadow .3s var(--spring), opacity .3s;
  text-decoration: none;
  color: #fff;
  opacity: 1;
  /* Pulse ring */
}
.wa-float::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(37,211,102,.3);
  animation: waPulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: .9; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.wa-float:hover {
  transform: scale(1.12) translateY(-3px);
  box-shadow: 0 8px 32px rgba(37,211,102,.6), 0 4px 12px rgba(0,0,0,.3);
}
.wa-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  /* Crisp rendering on all displays */
  shape-rendering: geometricPrecision;
}
/* Tooltip */
.wa-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: #111827;
  color: #f8fafc;
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.wa-tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #111827;
}
.wa-float:hover .wa-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(-2px);
}

/* ════════════════════════════════════════════
   BACK TO TOP
   ════════════════════════════════════════════ */
.btt {
  position:fixed; bottom:28px; right:28px; z-index:900;
  width:44px; height:44px;
  background:var(--grad); color:white;
  border:none; border-radius:12px;
  font-size:1.1rem; cursor:pointer;
  opacity:0; transform:translateY(20px);
  transition:all .3s var(--spring);
  box-shadow:0 4px 20px rgba(99,102,241,.35);
}
.btt.show { opacity:1; transform:none; }
.btt:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(99,102,241,.5); }

/* ════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   Breakpoints: 1024 | 768 | 480 | 360
   ════════════════════════════════════════════ */

/* Prevent all horizontal overflow globally */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── ≤ 1024px  (Tablets / Small Laptops) ── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-left { align-items: center; }
  .hero-bio { max-width: 100%; }
  .hero-socials { justify-content: center; }
  .hero-right { width: 100%; max-width: 520px; margin: 0 auto; }
  .bento-grid {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100%;
  }
  .bento-code { grid-column: 1 / -1 !important; }
  .bento-loc  { grid-column: 1 / -1 !important; }
  .bento-hire { grid-column: 1 / -1 !important; }
  .about-layout { grid-template-columns: 1fr; gap: 36px; }
  .about-img-container { grid-row: 1; max-width: 240px; margin: 0 auto; }
  .stack-grid { grid-template-columns: repeat(2, 1fr); }
  .proj-grid { grid-template-columns: 1fr; }
  .proj-featured { grid-column: auto; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .pub-card { flex-direction: column; gap: 20px; padding: 28px; }
  .vol-cards { grid-template-columns: repeat(2, 1fr); }
  .github-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≤ 768px  (Mobile landscape / large phone) ── */
@media (max-width: 768px) {
  /* Navigation */
  .nav { padding: 14px 20px; }
  .nav.scrolled { padding: 10px 20px; }
  .nav-links {
    position: fixed; top: 0; right: -100%; width: min(280px, 85vw); height: 100vh;
    background: rgba(3,7,18,.98); backdrop-filter: blur(20px);
    flex-direction: column; padding: 90px 28px 28px;
    border-left: 1px solid var(--border);
    transition: .3s var(--ease); z-index: 999;
    overflow-y: auto;
  }
  .nav-links.open { right: 0; }
  .nav-burger { display: flex; z-index: 1000; }
  .nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
  /* Make sure nav resume / hire buttons stack nicely in slide menu */
  .nav-links .nl { width: 100%; padding: 12px 16px; border-radius: 10px; }
  .nav-links .nav-hire { margin-left: 0; margin-top: 4px; text-align: center; justify-content: center; }
  .nav-links .nav-resume { text-align: center; justify-content: center; }

  /* Hero */
  .hero { padding: 90px 20px 60px; }
  .name-line { font-size: clamp(2.2rem, 10vw, 3.2rem) !important; }
  .hero-role { font-size: .95rem; flex-wrap: wrap; justify-content: center; }
  .hero-actions { flex-direction: column; align-items: center; gap: 10px; }
  .hero-actions .btn-main,
  .hero-actions .btn-ghost { width: 100%; max-width: 280px; justify-content: center; }
  .hero-socials { justify-content: center; }

  /* Sections */
  .container { padding: 0 18px; }
  .section { padding: 64px 0; }
  .sec-title { margin-bottom: 36px; }

  /* Bento */
  .bento-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .bento, .bento-code, .bento-loc, .bento-hire, .bento-github { grid-column: auto !important; }

  /* About */
  .about-layout { grid-template-columns: 1fr; gap: 28px; }
  .about-img-container { max-width: 200px; }

  /* Stack */
  .stack-grid { grid-template-columns: 1fr; gap: 16px; }
  .stack-card { padding: 22px 18px; }
  .stack-card .tags {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)) !important;
    gap: 8px !important;
  }

  /* Projects */
  .proj-grid { grid-template-columns: 1fr; gap: 16px; }
  .proj-card { padding: 22px 18px; }
  .proj-metrics-row { flex-wrap: wrap; gap: 12px; }
  .proj-features-row { gap: 8px; }
  .proj-live-links { gap: 8px; }

  /* Certs */
  .cert-gallery { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
  .cert-filters { gap: 8px; }
  .cf-btn { padding: 8px 14px; font-size: .78rem; }

  /* Volunteer */
  .vol-cards { grid-template-columns: 1fr; gap: 12px; }

  /* Publication */
  .pub-card { flex-direction: column; gap: 16px; padding: 24px 20px; }
  .pub-left { flex-direction: row; align-items: center; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-form { padding: 24px 20px; }

  /* Footer */
  .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .footer-socials { justify-content: center; }

  /* Resume modal */
  .lightbox { padding: 16px; }
  #resumeModal .lb-inner {
    width: 100%;
    height: 90vh;
    display: flex;
    flex-direction: column;
  }
  #resumeModal .lb-inner iframe {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: none;
    border-radius: 10px;
  }
  .lb-close { top: 12px; right: 12px; }
  .lb-prev, .lb-next { display: none; }

  /* GitHub stats */
  .github-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .gs-num { font-size: 1.4rem; }

  /* Command palette */
  .cmd-palette { padding-top: 8vh; }
  .cmd-box { width: 95%; }

  /* Back to top */
  .btt { bottom: 20px; right: 16px; width: 40px; height: 40px; font-size: .95rem; }

  /* WhatsApp button */
  .wa-float { bottom: 72px; right: 16px; width: 48px; height: 48px; }
  .wa-icon { width: 24px; height: 24px; }
  /* Hide tooltip on touch devices — use native long-press or just tap */
  .wa-tooltip { display: none; }
}

/* ── ≤ 480px  (Standard phones, portrait) ── */
@media (max-width: 480px) {
  /* Typography */
  .name-line { font-size: clamp(2rem, 12vw, 2.8rem) !important; }
  .sec-title { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }

  /* Buttons */
  .btn-main, .btn-ghost {
    padding: 12px 20px !important;
    font-size: .85rem !important;
    border-radius: 10px !important;
  }

  /* Hero pill */
  .hero-pill { font-size: .72rem; padding: 5px 14px; }

  /* Bento code block */
  .bento-pre { font-size: .72rem; padding: 14px; overflow-x: auto; }

  /* Project metrics */
  .proj-metrics-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Cert gallery — single column on small phones */
  .cert-gallery { grid-template-columns: 1fr; }

  /* Stack tags */
  .stack-card .tags {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .stack-card .tag i { font-size: 1.5rem !important; }
  .stack-card .tag span { font-size: .55rem !important; }

  /* Nav mobile improvements */
  .nav { padding: 12px 16px; }
  .container { padding: 0 14px; }
  .section { padding: 52px 0; }

  /* Contact form */
  .cf-group input, .cf-group textarea { padding: 13px; font-size: .85rem; }

  /* GitHub stats */
  .github-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gs-card { padding: 12px 8px; }
  .gs-num { font-size: 1.2rem; }
  .gs-label { font-size: .58rem; }

  /* Pub card */
  .pub-card { padding: 18px 14px; }

  /* Vol card */
  .vol-card { padding: 16px 14px; }

  /* Footer */
  .footer { padding: 24px 0; }
  .footer-copy { font-size: .72rem; }

  /* WhatsApp button */
  .wa-float { bottom: 68px; right: 14px; width: 46px; height: 46px; }
  .wa-icon { width: 22px; height: 22px; }
}

/* ── ≤ 360px  (Small phones) ── */
@media (max-width: 360px) {
  .name-line { font-size: 1.9rem !important; }
  .container { padding: 0 12px; }
  .hero { padding: 80px 14px 50px; }
  .hero-actions { gap: 8px; }
  .btn-main, .btn-ghost { max-width: 100%; }
  .nav { padding: 10px 14px; }
  .bento-pre { font-size: .66rem; }
  .stack-card .tags { grid-template-columns: repeat(3, 1fr) !important; }
  .cert-gallery { grid-template-columns: 1fr; }
  .github-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .gs-card { padding: 10px 6px; }
  .footer-inner { gap: 8px; }
}

/* ════════════════════════════════════════════
   PREMIUM ENHANCEMENTS — UNIQUENESS UPGRADE
   ════════════════════════════════════════════ */

/* ── Animated noise grain overlay ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: grainShift 0.5s steps(1) infinite;
}
@keyframes grainShift {
  0%   { background-position: 0 0; }
  20%  { background-position: -40px 10px; }
  40%  { background-position: 20px -30px; }
  60%  { background-position: -60px 40px; }
  80%  { background-position: 30px -10px; }
  100% { background-position: 0 0; }
}

/* ── Global glowing ambient gradient behind entire site ── */
body::after {
  content: '';
  position: fixed;
  width: 800px; height: 600px;
  top: -200px; left: -200px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(99,102,241,0.07) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, rgba(6,182,212,0.05) 0%, transparent 60%);
  filter: blur(60px);
}

/* ── Neon accent line under sec-label ── */
.sec-label::after {
  content: '';
  display: block;
  width: 24px; height: 2px;
  background: var(--grad);
  border-radius: 2px;
  margin-top: 6px;
  box-shadow: 0 0 10px rgba(99,102,241,0.8);
}

/* ── Section title animated gradient underline ── */
.sec-title em {
  position: relative;
}
.sec-title em::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 2px;
  background: var(--grad);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--spring);
}
.sec-title.visible em::after,
.sec-title em:hover::after {
  transform: scaleX(1);
}

/* ── Hero pill shimmer animation ── */
.hero-pill {
  position: relative;
  overflow: hidden;
}
.hero-pill::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,0.25), transparent);
  animation: pillShimmer 3s ease infinite;
}
@keyframes pillShimmer {
  0% { left: -100%; }
  50%, 100% { left: 200%; }
}

/* ── Nav hire button pulse glow ── */
.nav-hire {
  position: relative;
  overflow: hidden;
}
.nav-hire::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad);
  opacity: 0;
  border-radius: 8px;
  animation: hireGlow 3s ease infinite;
}
@keyframes hireGlow {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.15; transform: scale(1.05); }
}

/* ── Enhanced bento grid with glass shimmer ── */
.bento {
  position: relative;
  overflow: hidden;
}
.bento::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgba(99,102,241,0.04) 60deg, transparent 120deg);
  animation: bentoConic 8s linear infinite;
  pointer-events: none;
}
@keyframes bentoConic { to { transform: rotate(360deg); } }

/* ── Gradient shimmer border on bento hover ── */
.bento:hover {
  border-color: transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 1px rgba(99,102,241,0.4), 0 8px 32px rgba(99,102,241,0.12);
}

/* ── Glowing xp dots upgrade ── */
.xp-dot.active {
  box-shadow: 0 0 0 4px rgba(6,182,212,0.15), 0 0 20px rgba(6,182,212,0.3);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(6,182,212,0.1), 0 0 20px rgba(6,182,212,0.2); }
  50% { box-shadow: 0 0 0 8px rgba(6,182,212,0.2), 0 0 30px rgba(6,182,212,0.4); }
}

/* ── XP item hover highlight ── */
.xp-body {
  position: relative;
}
.xp-body::before {
  content: '';
  position: absolute;
  left: -24px; top: 0; bottom: 0;
  width: 2px;
  background: var(--grad);
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.3s, transform 0.4s var(--spring);
}
.xp-item:hover .xp-body::before {
  opacity: 1;
  transform: scaleY(1);
}

/* ── Stack card icon glow on hover ── */
.stack-card:hover .stack-icon {
  filter: drop-shadow(0 0 12px rgba(99,102,241,0.6));
  transform: scale(1.15) rotate(-5deg);
  transition: all 0.3s var(--spring);
}
.stack-icon { transition: all 0.3s var(--spring); display: inline-block; }

/* ── Tag glow on hover ── */
.tag--a:hover {
  box-shadow: 0 0 14px rgba(6,182,212,0.35);
  border-color: rgba(6,182,212,0.5);
}
.tag--b:hover {
  box-shadow: 0 0 14px rgba(139,92,246,0.35);
  border-color: rgba(139,92,246,0.5);
}

/* ── Project card enhanced border glow ── */
.proj-card:hover {
  box-shadow: 0 0 0 1px rgba(99,102,241,0.35), 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(99,102,241,0.07);
}
.proj-featured:hover {
  box-shadow: 0 0 0 1px rgba(99,102,241,0.5), 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(99,102,241,0.12);
}

/* ── Metric numbers animated gradient ── */
.pm strong {
  background-size: 200%;
  animation: gradMove 4s ease infinite;
}

/* ── Cert card hover shimmer ── */
.cert-card--real {
  position: relative;
}
.cert-card--real::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r2);
  background: linear-gradient(135deg, rgba(99,102,241,0) 0%, rgba(99,102,241,0.06) 50%, rgba(6,182,212,0) 100%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 0;
}
.cert-card--real:hover::before { opacity: 1; }
.cert-card--real:hover {
  border-color: rgba(99,102,241,0.4);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.2), 0 20px 50px rgba(0,0,0,0.45);
}

/* ── Cert filter button active shimmer ── */
.cf-btn.active {
  background: var(--grad);
  position: relative;
  overflow: hidden;
}
.cf-btn.active::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: btnShimmer 2.5s ease infinite;
}
@keyframes btnShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ── Contact link neon left border on hover ── */
.clink {
  border-left: 3px solid transparent;
  transition: all 0.3s var(--ease);
}
.clink:hover {
  border-left-color: var(--cyan);
  background: rgba(6,182,212,0.04);
  box-shadow: -4px 0 20px rgba(6,182,212,0.1), 0 4px 20px rgba(0,0,0,0.2);
}

/* ── Contact form input glow ── */
.cf-group input:focus,
.cf-group textarea:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12), 0 0 20px rgba(99,102,241,0.08);
  background: rgba(99,102,241,0.03);
}

/* ── Publication card left border accent ── */
.pub-card {
  border-left: 3px solid transparent;
  border-image: var(--grad) 1;
  position: relative;
  overflow: hidden;
}
.pub-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 100%;
  background: radial-gradient(ellipse at right center, rgba(99,102,241,0.06), transparent 70%);
  pointer-events: none;
}

/* ── Scrollbar upgrade ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--indigo), var(--cyan));
  border-radius: 5px;
}

/* ── Back to top button pulsing ring ── */
.btt.show {
  animation: bttRing 3s ease infinite;
}
@keyframes bttRing {
  0%, 100% { box-shadow: 0 4px 20px rgba(99,102,241,0.35); }
  50% { box-shadow: 0 4px 20px rgba(99,102,241,0.35), 0 0 0 6px rgba(99,102,241,0.1); }
}

/* ── Footer gradient brand text upgrade ── */
.footer-brand {
  font-size: 1rem;
  letter-spacing: 0.05em;
}

/* ── Hero name on-load shimmer ── */
.name-accent {
  background-size: 300% !important;
  animation: gradMove 6s ease infinite, fadeUp 0.8s 0.1s var(--ease) both;
}

/* ── Smooth section separator ── */
.section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.4), transparent);
}

/* ── XP live badge pulse ── */
.xp-badge--live {
  animation: livePulse 2.5s ease infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  50% { box-shadow: 0 0 0 4px rgba(16,185,129,0.12); }
}



/* ── Edu dot glow ── */
.edu-dot {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
  transition: box-shadow 0.3s;
}
.edu-item:hover .edu-dot {
  box-shadow: 0 0 0 6px rgba(99,102,241,0.2), 0 0 15px rgba(99,102,241,0.3);
}

/* ── Devicon & Skill Tag Alignment ── */
.tag {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.tag i {
  font-size: 0.95rem;
  display: inline-block;
  vertical-align: middle;
}

/* ── Navigation Resume Button ── */
.nav-resume {
  margin-left: 8px;
  border: 1px solid rgba(6, 182, 212, 0.45);
  background: rgba(6, 182, 212, 0.05);
  color: var(--cyan) !important;
  font-weight: 600;
}
.nav-resume:hover {
  background: rgba(6, 182, 212, 0.15) !important;
  border-color: var(--cyan);
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.25);
}

/* ── Project Key Contributions List ── */
.proj-points-list {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proj-points-list li {
  font-size: 0.82rem;
  color: var(--text2);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.proj-points-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--cyan);
  font-size: 0.9rem;
}

/* ── Resume Modal Viewer Styles ── */
#resumeModal {
  z-index: 9100;
}
#resumeModal .lb-inner {
  max-width: 900px;
  width: 90vw;
  height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
  transform: scale(0.95);
  transition: transform 0.3s var(--spring);
}
#resumeModal.open .lb-inner {
  transform: scale(1);
}
.resume-modal-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  width: 100%;
}
.resume-modal-title {
  color: var(--text);
  font-family: var(--font-m);
  font-size: 0.85rem;
  font-weight: 500;
}
.resume-modal-close {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text2);
  font-size: 0.85rem;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease);
}
.resume-modal-close:hover {
  background: #ef4444;
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
}
#resumeModal iframe {
  width: 100%;
  flex-grow: 1;
  border: none;
  background: #fff;
}
.resume-modal-footer {
  padding: 16px;
  background: var(--bg3);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  gap: 16px;
}
/* Resume modal mobile styles merged into main 768px block above */

/* ── Command Palette (Cmd+K) ── */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(3, 7, 18, 0.75);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s var(--ease);
}
.cmd-palette.open {
  opacity: 1;
  visibility: visible;
}
.cmd-box {
  width: 90%;
  max-width: 600px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(99, 102, 241, 0.15);
  overflow: hidden;
  transform: translateY(-20px) scale(0.98);
  transition: all 0.25s var(--ease);
}
.cmd-palette.open .cmd-box {
  transform: translateY(0) scale(1);
}
.cmd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text3);
}
.cmd-header input {
  flex-grow: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
}
.cmd-esc {
  font-size: 0.7rem;
  font-family: var(--font-m);
  padding: 3px 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.cmd-body {
  max-height: 350px;
  overflow-y: auto;
}
.cmd-list {
  list-style: none;
  padding: 8px;
  margin: 0;
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.cmd-item:hover,
.cmd-item.active {
  background: rgba(99, 102, 241, 0.12);
  color: var(--text);
}
.cmd-icon {
  font-size: 1.1rem;
}
.cmd-label {
  flex-grow: 1;
  font-size: 0.88rem;
  color: var(--text2);
}
.cmd-item:hover .cmd-label,
.cmd-item.active .cmd-label {
  color: var(--text);
}
.cmd-shortcut {
  font-size: 0.65rem;
  font-family: var(--font-m);
  color: var(--text3);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.cmd-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
  font-size: 0.72rem;
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cmd-footer kbd {
  font-family: var(--font-m);
  background: var(--surface2);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border);
}

/* ── Responsive Bento Grid Override (merged into main media blocks above) ── */

/* ── Live GitHub Stats Custom Layout ── */
.github-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  margin-bottom: 12px;
}
.gs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s var(--ease);
}
.gs-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  background: rgba(99,102,241,0.04);
}
.gs-num {
  font-family: var(--font-d);
  font-size: 1.8rem;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  margin-bottom: 4px;
}
.gs-languages {
  font-family: var(--font-d);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cyan);
  line-height: 1.2;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.gs-label {
  font-size: 0.65rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 10px;
  background: var(--grad);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25);
  transition: all 0.3s;
  margin-top: 8px;
}
.gs-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.github-stats-fallback-card {
  text-align: center;
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 12px;
  width: 100%;
}
.github-stats-fallback-card h4 {
  font-family: var(--font-d);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.github-stats-fallback-card p {
  font-size: 0.8rem;
  color: var(--text2);
  margin-bottom: 16px;
}
@keyframes spinLogo {
  to { transform: rotate(360deg); }
}

/* ── Neon Waves Background Overlay ── */
.neon-waves-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.95;
}
.neon-waves-bg svg {
  width: 100%;
  height: 100%;
}
html[data-theme="light"] .neon-waves-bg {
  opacity: 0.45;
  filter: saturate(0.85);
}

/* ── GitHub Profile Link Bento Card Hover Effects ── */
.bento-github-link:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(6, 182, 212, 0.06)) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
}
.bento-github-link:hover .bento-gh-arrow {
  transform: translate(3px, -3px);
  background: rgba(99,102,241,0.2) !important;
  color: var(--indigo) !important;
}