@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@400..800&family=Space+Grotesk:wght@300..700&display=swap');

/* ═══════════════════════════════════════════
   1. TOKENS & THEMING
═══════════════════════════════════════════ */
:root {
  --bg:       #0d0d0d;
  --bg1:      #111111;
  --bg2:      #161616;
  --bg3:      #1c1c1c;
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.13);
  --text:     #f0f0f0;
  --muted:    #888;
  --faint:    #555;
  --accent:   #6C63FF;
  --accent2:  #8B85FF;
  --accent-d: rgba(108,99,255,0.15);
  --accent-g: rgba(108,99,255,0.3);
  --green:    #22c55e;
  --yellow:   #eab308;
  --r:        10px;
  --r2:       16px;
  --r3:       24px;
  --font:     'Inter', system-ui, sans-serif;
  --heading:  'Space Grotesk', system-ui, sans-serif;
  --mono:     'JetBrains Mono', monospace;
  --ease:     cubic-bezier(0.16,1,0.3,1);
}

[data-theme='light'] {
  --bg:       #f8f9fa;
  --bg1:      #ffffff;
  --bg2:      #f0f1f3;
  --bg3:      #e9ecef;
  --border:   rgba(0,0,0,0.08);
  --border2:  rgba(0,0,0,0.15);
  --text:     #1a1a2e;
  --muted:    #555;
  --faint:    #999;
}

/* ═══════════════════════════════════════════
   2. BASE & RESET
═══════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
/* Disable smooth behavior in CSS if Lenis is used, but keeping for fallback */
html:not(.lenis) { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
  transition: background-color 0.3s, color 0.3s;
}

::selection { background: var(--accent-d); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s; }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }

/* ═══════════════════════════════════════════
   3. MODERN FEATURES (Lenis, View Transitions)
═══════════════════════════════════════════ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fadeOut 0.25s ease; }
::view-transition-new(root) { animation: fadeIn 0.25s ease; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════════════════════════════════════
   4. NEW UI ELEMENTS (Theme Toggle, 3D, Toast)
═══════════════════════════════════════════ */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-size: 1.2rem;
  transition: all 0.25s var(--ease);
}
.theme-toggle:hover { background: var(--bg3); transform: scale(1.1); border-color: var(--border2); }

#hero-3d {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.8;
}

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); padding: 12px 24px; border-radius: 99px;
  font-weight: 500; font-size: 0.9rem; z-index: 10000;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  display: flex; align-items: center; gap: 8px;
  transition: transform 0.4s var(--ease);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { border-color: var(--green); }
.toast.success::before { content: '✓'; color: var(--green); }
.toast.error { border-color: #ef4444; }
.toast.error::before { content: '✕'; color: #ef4444; }

/* ═══════════════════════════════════════════
   5. CSS SCROLL-DRIVEN ANIMATIONS
═══════════════════════════════════════════ */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, #6C63FF, #8B5CF6, #a78bfa, #6C63FF);
  background-size: 300% 100%;
  animation: gradientShift 3s linear infinite, growProgress linear;
  animation-timeline: scroll();
  box-shadow: 0 0 12px rgba(108,99,255,0.6);
  transform-origin: left;
}
@keyframes gradientShift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes growProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Scroll-driven Reveal */
@supports (animation-timeline: view()) {
  [data-reveal] {
    opacity: 0; transform: translateY(30px);
    animation: revealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 25%;
  }
}
@keyframes revealUp { to { opacity: 1; transform: none; } }

/* GSAP Fallback Classes */
.gsap-reveal { opacity: 0; transform: translateY(40px); }
.gsap-reveal-left { opacity: 0; transform: translateX(-40px); }
.gsap-reveal-right { opacity: 0; transform: translateX(40px); }
.gsap-scale { opacity: 0; transform: scale(0.9); }

/* ═══════════════════════════════════════════
   6. GLOBAL BACKGROUND & LAYOUT
═══════════════════════════════════════════ */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; background: var(--bg);
  background-image:
    radial-gradient(ellipse 600px 600px at 20% 10%, rgba(108,99,255,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 80% 20%, rgba(99,102,241,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 700px 700px at 50% 60%, rgba(139,92,246,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 400px 400px at 10% 80%, rgba(59,130,246,0.04) 0%, transparent 70%);
  pointer-events: none;
  transition: background-color 0.3s;
}

.mesh-blob { position: fixed; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: -1; opacity: 0; animation: meshFloat 20s ease-in-out infinite; }
.mesh-blob-1 { width: 500px; height: 500px; background: rgba(108,99,255,0.07); top: -10%; left: -5%; animation-delay: 0s; opacity: 1; }
.mesh-blob-2 { width: 400px; height: 400px; background: rgba(139,92,246,0.05); top: 30%; right: -8%; animation-delay: -7s; opacity: 1; }
.mesh-blob-3 { width: 450px; height: 450px; background: rgba(59,130,246,0.04); bottom: 5%; left: 20%; animation-delay: -14s; opacity: 1; }
@keyframes meshFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(60px,40px) scale(1.1); }
  50% { transform: translate(-30px,80px) scale(0.95); }
  75% { transform: translate(40px,-30px) scale(1.05); }
}

body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,0,0,0.6) 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,0,0,0.6) 0%, transparent 100%);
}
[data-theme='light'] body::after { background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px); }

main { padding-top: 60px; padding-bottom: 64px; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
section { padding: 6rem 0; position: relative; }
section::after {
  content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108,99,255,0.25), rgba(139,92,246,0.2), transparent);
  pointer-events: none;
}
section:last-of-type::after { display: none; }

.sec-tag { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.7rem; display: flex; align-items: center; gap: 8px; }
.sec-tag::before { content: ''; display: block; width: 22px; height: 1.5px; background: var(--accent); border-radius: 2px; }
.sec-title { font-family: var(--heading); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 2.5rem; }
.sec-title span { background: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 40%, #a78bfa 70%, #818cf8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.alt-bg { background: var(--bg1); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.65rem 1.4rem; border-radius: var(--r); font-family: var(--font); font-size: 0.86rem; font-weight: 700; cursor: pointer; border: none; transition: all 0.25s var(--ease); text-decoration: none; }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 4px 18px var(--accent-g); }
.btn-accent:hover { background: var(--accent2); transform: translateY(-2px); box-shadow: 0 8px 28px var(--accent-g); }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border2); }
.btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.25); background: var(--bg3); }
[data-theme='light'] .btn-ghost:hover { border-color: rgba(0,0,0,0.2); }
.btn-full { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════════
   7. NAVIGATION
═══════════════════════════════════════════ */
nav { position: fixed; top: 3px; left: 0; right: 0; z-index: 800; height: 60px; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; background: rgba(13,13,13,0.85); border-bottom: 1px solid var(--border); backdrop-filter: blur(24px) saturate(1.4); transition: all 0.4s var(--ease); }
[data-theme='light'] nav { background: rgba(248,249,250,0.85); }
nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.4); background: rgba(13,13,13,0.95); top: 0; }
[data-theme='light'] nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.05); background: rgba(255,255,255,0.95); }

.nav-logo { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; color: var(--accent); letter-spacing: 0.05em; }
.nav-links { display: flex; gap: 1.8rem; list-style: none; }
.nav-links a { position: relative; padding: 0.35rem 0.65rem; border-radius: 6px; font-size: 0.83rem; font-weight: 500; color: var(--muted); transition: all 0.25s var(--ease); }
.nav-links a::before { content: ''; position: absolute; inset: 0; border-radius: 6px; background: rgba(108,99,255,0.08); opacity: 0; transform: scale(0.85); transition: all 0.25s var(--ease); pointer-events: none; }
.nav-links a:hover { color: var(--text); font-variation-settings: 'wght' 700; }
.nav-links a:hover::before { opacity: 1; transform: scale(1); }
.nav-links a.active { color: var(--accent); font-weight: 700; }
.nav-links a.active::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 16px; height: 2px; background: var(--accent); border-radius: 99px; box-shadow: 0 0 8px var(--accent-g); }

.nav-right { display: flex; align-items: center; gap: 12px; }
.fresher-badge { display: flex; align-items: center; gap: 6px; padding: 0.28rem 0.8rem; border-radius: 99px; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); font-size: 0.7rem; color: var(--green); font-weight: 600; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--muted); border-radius: 2px; transition: all 0.3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.mob-menu { display: none; position: fixed; top: 60px; left: 0; right: 0; z-index: 799; background: rgba(13,13,13,0.98); border-bottom: 1px solid var(--border); flex-direction: column; padding: 0.5rem 0; backdrop-filter: blur(20px); }
[data-theme='light'] .mob-menu { background: rgba(255,255,255,0.98); }
.mob-menu.open { display: flex; }
.mob-menu a { padding: 0.9rem 2rem; font-size: 0.95rem; color: var(--muted); border-bottom: 1px solid var(--border); transition: color 0.2s; }
.mob-menu a:hover { color: var(--text); }

/* ═══════════════════════════════════════════
   8. HERO
═══════════════════════════════════════════ */
#hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); }
.orb1 { width: 650px; height: 650px; background: radial-gradient(ellipse, rgba(108,99,255,0.18) 0%, transparent 70%); top: -200px; right: -150px; }
.orb2 { width: 400px; height: 400px; background: radial-gradient(ellipse, rgba(139,133,255,0.1) 0%, transparent 70%); bottom: 0; left: -100px; }
.grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 54px 54px; }
[data-theme='light'] .grid-bg { background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); }

.hero-inner { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding: 5rem 0; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; }
.hero-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(108,99,255,0.5); background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; box-shadow: 0 0 20px rgba(108,99,255,0.3); }
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.hero-greeting { font-size: 0.88rem; color: var(--muted); }
.hero-name-big { font-family: var(--heading); font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 900; letter-spacing: -0.045em; line-height: 1.05; margin-bottom: 0.8rem; }
.hero-name-big span { color: var(--accent); }
.typing-wrap { font-family: var(--heading); font-size: 1.15rem; color: var(--muted); margin-bottom: 1.6rem; min-height: 1.8rem; font-weight: 400; }
.typing-cursor { border-right: 2px solid var(--accent); animation: blink 0.7s step-end infinite; padding-right: 2px; }
@keyframes blink { 50% { border-color: transparent; } }
.hero-tagline { font-size: 0.97rem; color: var(--muted); line-height: 1.85; max-width: 520px; margin-bottom: 2rem; border-left: 2px solid var(--accent); padding-left: 1rem; }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.htag { padding: 0.28rem 0.8rem; border-radius: 99px; background: var(--bg2); border: 1px solid var(--border); font-size: 0.74rem; color: var(--muted); transition: all 0.2s; cursor: default; }
.htag:hover { border-color: rgba(108,99,255,0.4); color: var(--accent); background: var(--accent-d); }

.hero-status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 0.4rem 1rem; border-radius: 99px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); font-size: 0.72rem; font-weight: 600; color: var(--green); margin-top: 1.2rem; animation: statusPulse 3s ease-in-out infinite; }
@keyframes statusPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.15); } 50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }

/* Hero Card (Stats) */
.hero-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r3); padding: 2rem; position: relative; overflow: hidden; }
.hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 1.6rem; }
.stat-cell { background: var(--bg3); padding: 1.1rem; text-align: center; }
.stat-n { font-size: 1.9rem; font-weight: 900; color: var(--accent); letter-spacing: -0.04em; line-height: 1; }
.stat-l { font-size: 0.63rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 1.4rem; }
.mstat { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r); padding: 0.9rem; text-align: center; }
.mstat-n { font-size: 1.1rem; font-weight: 800; color: var(--text); line-height: 1; }
.mstat-l { font-size: 0.62rem; color: var(--faint); margin-top: 3px; }
.skill-mini { display: flex; flex-direction: column; gap: 8px; }
.sm-row { display: flex; align-items: center; gap: 8px; }
.sm-name { font-size: 0.73rem; color: var(--muted); min-width: 90px; }
.sm-bar { flex: 1; height: 3px; background: var(--border2); border-radius: 99px; overflow: hidden; }
.sm-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #a78bfa); border-radius: 99px; width: 0%; }
.sm-pct { font-size: 0.65rem; color: var(--faint); min-width: 28px; text-align: right; font-family: var(--mono); }

.scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1; }
.scroll-cue span { font-size: 0.65rem; color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; }
.scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--accent), transparent); animation: scrollAnim 1.8s ease-in-out infinite; }
@keyframes scrollAnim { 0%,100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.5); opacity: 0.4; } }

/* ═══════════════════════════════════════════
   9. ABOUT
═══════════════════════════════════════════ */
.about-photo-wrap { position: relative; width: 100%; }
.about-photo-main { width: 100%; height: 460px; object-fit: cover; object-position: center 10%; border-radius: 20px; border: 1px solid var(--border2); display: block; }
.about-photo-fallback { width: 100%; height: 460px; border-radius: 20px; border: 1px solid var(--border2); background: linear-gradient(135deg, var(--bg3), var(--bg2)); display: flex; align-items: center; justify-content: center; font-size: 5rem; }
.about-photo-badge { position: absolute; bottom: 20px; left: 20px; right: 20px; background: rgba(13,13,13,0.88); border: 1px solid var(--border2); border-radius: 12px; padding: 0.9rem 1.1rem; backdrop-filter: blur(16px); display: flex; align-items: center; gap: 10px; }
[data-theme='light'] .about-photo-badge { background: rgba(255,255,255,0.88); }
.apb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex-shrink: 0; animation: pulse 2s ease-in-out infinite; }
.apb-text strong { display: block; font-size: 0.83rem; font-weight: 700; }
.apb-text span { font-size: 0.72rem; color: var(--muted); }
.about-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.gallery-img { height: 160px; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; position: relative; }
.gallery-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform 0.4s var(--ease); }
.gallery-img:hover img { transform: scale(1.07); }
.gallery-img-art { height: 160px; border-radius: 12px; border: 1px solid rgba(108,99,255,0.25); overflow: hidden; position: relative; background: var(--accent-d); }
.gallery-img-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s var(--ease); }
.gallery-img-art:hover img { transform: scale(1.05); }
.gallery-label { position: absolute; bottom: 8px; left: 8px; font-size: 0.65rem; font-weight: 700; padding: 0.18rem 0.55rem; border-radius: 99px; background: rgba(13,13,13,0.8); backdrop-filter: blur(8px); color: var(--muted); }
[data-theme='light'] .gallery-label { background: rgba(255,255,255,0.8); }

/* ═══════════════════════════════════════════
   10. SKILLS
═══════════════════════════════════════════ */
.marquee-section { margin-bottom: 3rem; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); }
.marquee-track { overflow: hidden; padding: 1.5rem 0; }
.marquee-inner { display: flex; gap: 2.5rem; width: max-content; animation: marqueeScroll 30s linear infinite; }
.marquee-track:hover .marquee-inner { animation-play-state: paused; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.mq-item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 70px; transition: transform 0.3s, filter 0.3s; cursor: default; }
.mq-item img, .mq-item svg { width: 36px; height: 36px; object-fit: contain; filter: grayscale(0.4) brightness(0.9); transition: filter 0.3s, transform 0.3s; }
.mq-item span { font-size: 0.7rem; color: var(--muted); font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; }
.mq-item:hover { transform: translateY(-6px); }
.mq-item:hover img, .mq-item:hover svg { filter: grayscale(0) brightness(1.1) drop-shadow(0 0 8px rgba(108,99,255,0.5)); transform: scale(1.15); }
.mq-item:hover span { color: var(--accent); }

/* Bento */
.bento-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; margin-bottom: 3rem; }
.bento-card { position: relative; background: rgba(26,26,26,0.95); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--r2); padding: 1.8rem; overflow: hidden; transition: border-color 0.4s, transform 0.3s, box-shadow 0.4s; cursor: default; will-change: transform, opacity; }
[data-theme='light'] .bento-card { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.06); }
.bento-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--angle,0deg), transparent 40%, var(--glow-color,#6C63FF) 50%, transparent 60%); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.bento-card:hover::before { opacity: 1; animation: rotateBorder 3s linear infinite; }
@keyframes rotateBorder { 0% { --angle: 0deg; } 100% { --angle: 360deg; } }
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.bento-card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.bento-bg-icon { position: absolute; right: -10px; bottom: -15px; font-size: 5rem; opacity: 0.06; pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
[data-theme='light'] .bento-bg-icon { filter: grayscale(1); }
.bento-card:hover .bento-bg-icon { opacity: 0.12; transform: scale(1.1) rotate(-5deg); }
.bento-label { font-size: 0.82rem; font-weight: 700; color: var(--muted); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
.bento-chips { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.bchip { padding: 0.35rem 0.8rem; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); font-size: 0.75rem; color: var(--muted); transition: all 0.25s; cursor: default; }
[data-theme='light'] .bchip { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.05); }
.bchip:hover { background: var(--accent-d); border-color: rgba(108,99,255,0.4); color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(108,99,255,0.15); }
.bchip-core { background: var(--accent-d); border-color: rgba(108,99,255,0.35); color: var(--accent); font-weight: 600; }
.bento-lg { grid-column: span 1; }

/* Orbit */
.orbit-section { display: flex; justify-content: center; padding: 2rem 0 1rem; }
.orbit-container { position: relative; width: 480px; height: 480px; }
.orbit-ring { position: absolute; border: 1px solid rgba(108,99,255,0.12); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.orbit-ring-1 { width: 160px; height: 160px; animation: orbitPulse 4s ease-in-out infinite; }
.orbit-ring-2 { width: 280px; height: 280px; animation: orbitPulse 5s ease-in-out infinite 0.5s; }
.orbit-ring-3 { width: 420px; height: 420px; animation: orbitPulse 6s ease-in-out infinite 1s; }
@keyframes orbitPulse { 0%,100% { border-color: rgba(108,99,255,0.1); } 50% { border-color: rgba(108,99,255,0.25); } }
.orbit-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index: 2; background: radial-gradient(circle, rgba(108,99,255,0.15) 0%, transparent 70%); width: 100px; height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; }
.orbit-core-title { font-size: 1.3rem; font-weight: 900; color: var(--accent); letter-spacing: 0.05em; }
.orbit-core-sub { font-size: 0.75rem; font-weight: 600; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; }
.orbit-item { position: absolute; z-index: 3; transition: transform 0.3s, box-shadow 0.3s; }
.orbit-item span { display: block; padding: 0.3rem 0.7rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; font-size: 0.68rem; font-weight: 600; color: var(--muted); white-space: nowrap; transition: all 0.3s; }
.orbit-item:hover span { background: var(--accent-d); border-color: rgba(108,99,255,0.5); color: var(--accent); transform: scale(1.15); box-shadow: 0 0 15px rgba(108,99,255,0.3); }

/* Orbit coordinates */
.oi-r1.oi-1 { top: 50%; left: 50%; transform: translate(calc(-50% + 80px),-50%); }
.oi-r1.oi-2 { top: 50%; left: 50%; transform: translate(calc(-50% - 80px),-50%); }
.oi-r1.oi-3 { top: 50%; left: 50%; transform: translate(-50%,calc(-50% + 80px)); }
.oi-r1.oi-4 { top: 50%; left: 50%; transform: translate(-50%,calc(-50% - 80px)); }
.oi-r2.oi-5 { top: 50%; left: 50%; transform: translate(calc(-50% + 140px),-50%); }
.oi-r2.oi-6 { top: 50%; left: 50%; transform: translate(calc(-50% - 140px),-50%); }
.oi-r2.oi-7 { top: 50%; left: 50%; transform: translate(calc(-50% + 99px),calc(-50% + 99px)); }
.oi-r2.oi-8 { top: 50%; left: 50%; transform: translate(calc(-50% - 99px),calc(-50% - 99px)); }
.oi-r2.oi-9 { top: 50%; left: 50%; transform: translate(calc(-50% + 99px),calc(-50% - 99px)); }
.oi-r2.oi-10 { top: 50%; left: 50%; transform: translate(calc(-50% - 99px),calc(-50% + 99px)); }
.oi-r3.oi-11 { top: 50%; left: 50%; transform: translate(calc(-50% + 210px),-50%); }
.oi-r3.oi-12 { top: 50%; left: 50%; transform: translate(calc(-50% - 210px),-50%); }
.oi-r3.oi-13 { top: 50%; left: 50%; transform: translate(-50%,calc(-50% + 210px)); }
.oi-r3.oi-14 { top: 50%; left: 50%; transform: translate(-50%,calc(-50% - 210px)); }
.oi-r3.oi-15 { top: 50%; left: 50%; transform: translate(calc(-50% + 148px),calc(-50% + 148px)); }
.oi-r3.oi-16 { top: 50%; left: 50%; transform: translate(calc(-50% - 148px),calc(-50% - 148px)); }
.oi-r3.oi-17 { top: 50%; left: 50%; transform: translate(calc(-50% + 148px),calc(-50% - 148px)); }
.oi-r3.oi-18 { top: 50%; left: 50%; transform: translate(calc(-50% - 148px),calc(-50% + 148px)); }

/* SQL & Jupyter Simulators */
.sql-sandbox, .jupyter-notebook { margin-top: 3rem; border-radius: var(--r3); overflow: hidden; border: 1px solid rgba(108,99,255,0.15); background: rgba(20,20,20,0.95); will-change: transform, opacity; }
[data-theme='light'] .sql-sandbox, [data-theme='light'] .jupyter-notebook { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.1); }
.sql-header, .jupyter-header { display: flex; align-items: center; gap: 10px; padding: 0.65rem 1.2rem; background: rgba(22,22,22,0.9); border-bottom: 1px solid rgba(255,255,255,0.06); }
[data-theme='light'] .sql-header, [data-theme='light'] .jupyter-header { background: rgba(240,240,240,0.9); border-bottom: 1px solid rgba(0,0,0,0.05); }
.sql-dots, .jupyter-header-dots { display: flex; gap: 6px; }
.sql-dots span, .jupyter-header-dots span { width: 10px; height: 10px; border-radius: 50%; }
.sql-dots span:nth-child(1), .jupyter-header-dots span:nth-child(1) { background: #ff5f57; }
.sql-dots span:nth-child(2), .jupyter-header-dots span:nth-child(2) { background: #febc2e; }
.sql-dots span:nth-child(3), .jupyter-header-dots span:nth-child(3) { background: #28c840; }
.sql-title, .jupyter-header-title { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); flex: 1; text-align: center; letter-spacing: 0.05em; }

.sql-body, .jupyter-body { padding: 1.5rem; }
.jupyter-body { padding: 0; }
.sql-query-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2rem; }
.sql-btn { padding: 0.4rem 0.9rem; border-radius: 8px; border: 1px solid rgba(108,99,255,0.2); background: rgba(108,99,255,0.06); color: var(--accent2); font-family: var(--mono); font-size: 0.72rem; cursor: pointer; transition: all 0.25s var(--ease); white-space: nowrap; }
.sql-btn:hover, .sql-btn.active { background: rgba(108,99,255,0.15); border-color: rgba(108,99,255,0.4); color: #fff; box-shadow: 0 0 15px rgba(108,99,255,0.15); transform: translateY(-1px); }
[data-theme='light'] .sql-btn:hover, [data-theme='light'] .sql-btn.active { color: var(--accent); }
.sql-console { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.04); border-radius: var(--r); padding: 1rem 1.2rem; font-family: var(--mono); margin-bottom: 1rem; min-height: 60px; position: relative; overflow: hidden; }
[data-theme='light'] .sql-console { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.05); }
.sql-prompt { color: var(--green); font-size: 0.72rem; line-height: 1.8; }
.sql-prompt .keyword { color: #c792ea; }
.sql-prompt .string { color: #c3e88d; }
.sql-prompt .func { color: #82aaff; }
.sql-prompt .number { color: #f78c6c; }
.sql-prompt .operator { color: #89ddff; }
.sql-cursor-blink { display: inline-block; width: 7px; height: 14px; background: var(--accent); animation: blink 0.7s step-end infinite; vertical-align: middle; margin-left: 2px; }
.sql-result { overflow-x: auto; }
.sql-result table { width: 100%; border-collapse: collapse; font-size: 0.75rem; font-family: var(--mono); }
.sql-result th { background: rgba(108,99,255,0.1); color: var(--accent); padding: 0.55rem 0.8rem; text-align: left; font-weight: 700; border-bottom: 2px solid rgba(108,99,255,0.2); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; white-space: nowrap; }
.sql-result td { padding: 0.5rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--muted); transition: all 0.2s; }
[data-theme='light'] .sql-result td { border-bottom-color: rgba(0,0,0,0.05); }
.sql-result tr:hover { background: rgba(108,99,255,0.04); }
.sql-result tr:hover td { color: var(--text); }
.sql-result tr.sql-anim { animation: sqlRowSlide 0.35s var(--ease) both; }
@keyframes sqlRowSlide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.sql-status { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0 0; font-size: 0.66rem; color: var(--faint); font-family: var(--mono); }
.sql-status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; box-shadow: 0 0 6px var(--green); }

.notebook-cell { border-bottom: 1px solid rgba(255,255,255,0.04); transition: all 0.3s; }
[data-theme='light'] .notebook-cell { border-bottom-color: rgba(0,0,0,0.05); }
.notebook-cell:last-child { border-bottom: none; }
.notebook-cell:hover { background: rgba(108,99,255,0.02); }
.cell-header { display: flex; align-items: center; gap: 10px; padding: 0.7rem 1.2rem; cursor: default; }
.cell-in-label { font-family: var(--mono); font-size: 0.65rem; color: var(--accent); min-width: 50px; opacity: 0.6; }
.cell-run-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(108,99,255,0.25); background: rgba(108,99,255,0.08); color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s var(--ease); font-size: 0.7rem; flex-shrink: 0; }
.cell-run-btn:hover { background: rgba(108,99,255,0.2); border-color: rgba(108,99,255,0.5); transform: scale(1.1); box-shadow: 0 0 12px rgba(108,99,255,0.2); }
.cell-run-btn.running { animation: cellSpin 0.8s linear infinite; pointer-events: none; border-color: var(--green); color: var(--green); }
@keyframes cellSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cell-input { background: rgba(0,0,0,0.35); margin: 0 1.2rem; border-radius: var(--r); padding: 0.8rem 1rem; font-family: var(--mono); font-size: 0.72rem; line-height: 1.8; color: var(--muted); border: 1px solid rgba(255,255,255,0.04); position: relative; overflow: hidden; }
[data-theme='light'] .cell-input { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.05); }
.cell-input .py-keyword { color: #c792ea; }
.cell-input .py-func { color: #82aaff; }
.cell-input .py-string { color: #c3e88d; }
.cell-input .py-comment { color: #546e7a; font-style: italic; }
.cell-input .py-number { color: #f78c6c; }
.cell-input .py-var { color: #eeffff; }
.cell-input .py-op { color: #89ddff; }
.cell-output { margin: 0 1.2rem 0.8rem; overflow: hidden; max-height: 0; opacity: 0; transition: all 0.5s var(--ease); }
.cell-output.show { max-height: 600px; opacity: 1; margin-top: 0.6rem; }
.cell-output-log { font-family: var(--mono); font-size: 0.66rem; color: var(--faint); padding: 0.5rem 0.8rem; line-height: 1.8; border-left: 2px solid rgba(108,99,255,0.2); }
.cell-output-log .log-info { color: var(--green); }
.cell-output-log .log-warn { color: #febc2e; }
.cell-output-chart { margin-top: 0.6rem; padding: 0.8rem; background: rgba(0,0,0,0.2); border-radius: var(--r); border: 1px solid rgba(255,255,255,0.04); }
[data-theme='light'] .cell-output-chart { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.05); }
.cell-output-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.7rem; margin-top: 0.5rem; }
.cell-output-table th { background: rgba(108,99,255,0.08); color: var(--accent); padding: 0.45rem 0.7rem; text-align: left; border-bottom: 1px solid rgba(108,99,255,0.15); font-weight: 600; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cell-output-table td { padding: 0.4rem 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--muted); }
[data-theme='light'] .cell-output-table td { border-bottom-color: rgba(0,0,0,0.05); }
.cell-output-table tr:hover td { color: var(--text); }
.jup-bar { transition: all 0.6s var(--ease); }
.jup-bar:hover { filter: brightness(1.3); cursor: pointer; }
.jup-bar-label { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
.jup-bar-val { font-family: var(--mono); font-size: 9px; fill: var(--accent2); opacity: 0; transition: opacity 0.3s; }
.jup-bar:hover .jup-bar-val, .jup-bar:hover+.jup-bar-val { opacity: 1; }
.jup-axis { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
[data-theme='light'] .jup-axis { stroke: rgba(0,0,0,0.1); }
.jup-axis-label { font-family: var(--mono); font-size: 9px; fill: var(--faint); }

/* ═══════════════════════════════════════════
   11. EXPERIENCE PROJECT GALLERY
═══════════════════════════════════════════ */
.exp-sub-proj {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
}
.exp-sub-proj h4 {
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.exp-sub-proj p.proj-desc {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.exp-proj-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  padding-bottom: 0.8rem;
}
.epg-item {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.epg-item:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.epg-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;

}
[data-theme='light'] .exp-proj-gallery::-webkit-scrollbar-track { background: var(--bg2); }

/* ═══════════════════════════════════════════
   12. PROJECTS
═══════════════════════════════════════════ */
.filter-bar { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 2rem; }
.fb { padding: 0.32rem 1rem; border-radius: 99px; border: 1px solid var(--border2); background: transparent; color: var(--muted); font-family: var(--font); font-size: 0.78rem; cursor: pointer; transition: all 0.2s; }
.fb.active, .fb:hover { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700; }
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.proj-card { background: rgba(26,26,26,0.95); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--r2); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.8rem; cursor: default; transition: all 0.4s var(--ease); position: relative; overflow: hidden; will-change: transform, opacity; }
[data-theme='light'] .proj-card { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.06); }
.proj-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), #a78bfa, transparent); opacity: 0; transition: opacity 0.4s; }
.proj-card::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--angle,0deg), transparent 30%, rgba(108,99,255,0.4) 50%, transparent 70%); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.proj-card:hover { border-color: rgba(108,99,255,0.2); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 30px rgba(108,99,255,0.08); }
[data-theme='light'] .proj-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 30px rgba(108,99,255,0.1); }
.proj-card:hover::before { opacity: 1; }
.proj-card:hover::after { opacity: 1; animation: rotateBorder 3s linear infinite; }
.proj-card.hidden { display: none; }

.proj-image {
  width: 100%;
  border-radius: calc(var(--r1) - 4px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,0.2);
  margin-bottom: 0.5rem;
  position: relative;
}
.proj-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}
.proj-card:hover .proj-image img {
  transform: scale(1.05);
}
.proj-emoji { font-size: 2rem; line-height: 1; }
.proj-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ptag { padding: 0.15rem 0.55rem; border-radius: 4px; background: var(--accent-d); border: 1px solid rgba(108,99,255,0.25); font-size: 0.65rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; }
.proj-title { font-size: 0.97rem; font-weight: 700; line-height: 1.3; }
.proj-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.7; flex: 1; }
.proj-impact { display: flex; align-items: center; gap: 6px; padding: 0.5rem 0.8rem; border-radius: 8px; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15); }
.pi-icon { font-size: 0.7rem; }
.pi-text { font-size: 0.75rem; color: #4ade80; font-weight: 600; }
[data-theme='light'] .pi-text { color: #22c55e; }

/* ═══════════════════════════════════════════
   12. EXPERIENCE
═══════════════════════════════════════════ */
.tl { display: flex; flex-direction: column; gap: 0; position: relative; }
.tl::before { content: ''; position: absolute; left: 150px; top: 0; bottom: 0; width: 1px; background: var(--border2); }
.tl-item { display: grid; grid-template-columns: 150px 1fr; position: relative; padding-bottom: 3rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-left { padding-right: 2rem; padding-top: 5px; text-align: right; }
.tl-period { font-family: var(--mono); font-size: 0.68rem; color: var(--faint); line-height: 1.5; }
.tl-type { display: inline-block; margin-top: 5px; font-size: 0.62rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.07em; }
.tl-type.current { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); color: var(--green); }
.tl-type.intern { background: rgba(108,99,255,0.1); border: 1px solid rgba(108,99,255,0.25); color: var(--accent); }
.tl-type.freelance { background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.25); color: var(--yellow); }
.tl-type.edu { background: rgba(255,255,255,0.05); border: 1px solid var(--border2); color: var(--muted); }
[data-theme='light'] .tl-type.edu { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.05); }
.tl-dot { position: absolute; left: 150px; top: 7px; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--border2); background: var(--bg); z-index: 1; transition: border-color 0.3s; }
.tl-item.current-item .tl-dot { border-color: var(--green); background: var(--green); box-shadow: 0 0 12px rgba(34,197,94,0.5); }
.tl-right { padding-left: 2rem; }
.exp-card { background: rgba(26,26,26,0.95); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--r2); padding: 1.4rem; transition: all 0.35s var(--ease); will-change: transform, opacity; }
[data-theme='light'] .exp-card { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.06); }
.exp-card:hover { border-color: rgba(108,99,255,0.2); box-shadow: 0 8px 30px rgba(0,0,0,0.3), 0 0 20px rgba(108,99,255,0.05); }
[data-theme='light'] .exp-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 0 20px rgba(108,99,255,0.1); }
.exp-title { font-size: 1rem; font-weight: 700; margin-bottom: 3px; }
.exp-company { font-size: 0.82rem; color: var(--accent); margin-bottom: 0.9rem; font-weight: 500; }
.exp-bullets { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-bottom: 1rem; }
.exp-bullets li { font-size: 0.84rem; color: var(--muted); padding-left: 1.1rem; position: relative; line-height: 1.65; }
.exp-bullets li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); font-size: 0.65rem; top: 4px; }
.exp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ec { padding: 0.16rem 0.55rem; border-radius: 5px; background: var(--bg3); border: 1px solid var(--border); font-size: 0.67rem; color: var(--faint); }
[data-theme='light'] .ec { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.05); }

/* ═══════════════════════════════════════════
   13. CERTIFICATES
═══════════════════════════════════════════ */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.cert-card { background: rgba(26,26,26,0.95); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--r2); padding: 1.3rem; display: flex; gap: 1rem; align-items: flex-start; transition: all 0.35s var(--ease); will-change: transform, opacity; }
[data-theme='light'] .cert-card { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.06); }
.cert-card:hover { border-color: rgba(108,99,255,0.25); transform: translateY(-4px); box-shadow: 0 12px 35px rgba(0,0,0,0.3), 0 0 20px rgba(108,99,255,0.06); }
[data-theme='light'] .cert-card:hover { box-shadow: 0 12px 35px rgba(0,0,0,0.08), 0 0 20px rgba(108,99,255,0.1); }
.cert-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-d); border: 1px solid rgba(108,99,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.cert-body strong { display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 3px; line-height: 1.35; }
.cert-body span { font-size: 0.74rem; color: var(--muted); }
.cert-body small { display: block; margin-top: 4px; font-size: 0.7rem; color: var(--faint); }

/* ═══════════════════════════════════════════
   14. CONTACT & FOOTER
═══════════════════════════════════════════ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
.contact-sub { font-size: 1rem; color: var(--muted); line-height: 1.85; margin-bottom: 1.8rem; }
.cinfo { display: flex; flex-direction: column; gap: 10px; }
.ci { display: flex; align-items: center; gap: 13px; padding: 0.85rem 1.1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); transition: all 0.2s; text-decoration: none; color: inherit; }
.ci:hover { border-color: rgba(108,99,255,0.3); transform: translateX(4px); background: var(--bg3); }
[data-theme='light'] .ci:hover { border-color: rgba(108,99,255,0.4); background: var(--bg1); }
.ci-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-d); border: 1px solid rgba(108,99,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.ci strong { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 1px; }
.ci span { font-size: 0.74rem; color: var(--muted); }
.contact-form { background: rgba(26,26,26,0.95); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--r3); padding: 2rem; position: relative; overflow: hidden; will-change: transform, opacity; }
[data-theme='light'] .contact-form { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.06); }
.contact-form::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #6C63FF, #a78bfa, transparent); }
.cf { display: flex; flex-direction: column; gap: 1rem; }
.fg { display: flex; flex-direction: column; gap: 5px; }
.fg label { font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.fg input, .fg textarea { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r); padding: 0.75rem 1rem; color: var(--text); font-family: var(--font); font-size: 0.88rem; outline: none; resize: none; transition: border-color 0.2s, box-shadow 0.2s; }
[data-theme='light'] .fg input, [data-theme='light'] .fg textarea { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
.fg input:focus, .fg textarea:focus { border-color: rgba(108,99,255,0.5); box-shadow: 0 0 0 3px rgba(108,99,255,0.09); }
.fg input::placeholder, .fg textarea::placeholder { color: var(--faint); }

footer { background: var(--bg1); border-top: 1px solid var(--border); padding: 2rem 0; margin-bottom: 64px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-logo { font-family: var(--mono); font-weight: 700; color: var(--accent); font-size: 1rem; margin-right: 10px; }
.footer-left { display: flex; align-items: center; font-size: 0.8rem; color: var(--faint); }
.footer-right { display: flex; gap: 16px; }
.footer-right a { font-size: 0.8rem; color: var(--faint); transition: color 0.2s; }
.footer-right a:hover { color: var(--accent); }

#btt { position: fixed; bottom: 80px; right: 22px; z-index: 700; width: 40px; height: 40px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; transition: all 0.3s; opacity: 0; transform: translateY(8px); }
#btt.show { opacity: 1; transform: translateY(0); }
#btt:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ═══════════════════════════════════════════
   15. MUSIC PLAYER
═══════════════════════════════════════════ */
#mp { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000; display: flex; align-items: center; gap: 14px; padding: 10px 32px; background: rgba(13,13,13,0.85); border-top: 1px solid var(--border); backdrop-filter: blur(28px) saturate(1.4); transition: transform 0.4s var(--ease); }
[data-theme='light'] #mp { background: rgba(255,255,255,0.9); }
#mp.hide { transform: translateY(100%); }
.mp-vinyl { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(from 0deg, #1a1a1a 0%, #2d2d2d 30%, #111 60%, #2d2d2d 90%); border: 2px solid rgba(108,99,255,0.4); display: flex; align-items: center; justify-content: center; position: relative; }
.mp-vinyl.spin { animation: spin 3s linear infinite; }
.mp-vinyl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bg); border: 1.5px solid rgba(108,99,255,0.5); }
.mp-info { min-width: 110px; }
.mp-name { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.mp-sub { display: block; font-size: 0.64rem; color: var(--muted); margin-top: 1px; }
.mp-controls { display: flex; align-items: center; gap: 4px; }
.mp-btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.mp-btn:hover { color: var(--text); background: var(--bg3); }
[data-theme='light'] .mp-btn:hover { background: rgba(0,0,0,0.05); }
.mp-play-btn { background: var(--accent) !important; color: #fff !important; width: 36px; height: 36px; }
.mp-play-btn:hover { transform: scale(1.1); }
.mp-prog-wrap { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mp-wave { display: flex; align-items: center; gap: 2px; height: 18px; }
.mp-wave span { display: block; width: 3px; border-radius: 2px; background: var(--accent); opacity: 0.4; height: 5px; }
.mp-wave.on span { animation: wave 0.9s ease-in-out infinite; opacity: 0.75; }
.mp-wave.on span:nth-child(1){animation-delay:0s}.mp-wave.on span:nth-child(2){animation-delay:.06s}.mp-wave.on span:nth-child(3){animation-delay:.12s}.mp-wave.on span:nth-child(4){animation-delay:.18s}.mp-wave.on span:nth-child(5){animation-delay:.24s}.mp-wave.on span:nth-child(6){animation-delay:.3s}.mp-wave.on span:nth-child(7){animation-delay:.36s}.mp-wave.on span:nth-child(8){animation-delay:.3s}.mp-wave.on span:nth-child(9){animation-delay:.24s}.mp-wave.on span:nth-child(10){animation-delay:.18s}.mp-wave.on span:nth-child(11){animation-delay:.12s}.mp-wave.on span:nth-child(12){animation-delay:.06s}.mp-wave.on span:nth-child(13){animation-delay:0s}.mp-wave.on span:nth-child(14){animation-delay:.06s}.mp-wave.on span:nth-child(15){animation-delay:.12s}
@keyframes wave { 0%,100% { height: 4px; } 50% { height: 17px; } }
.mp-track { height: 3px; border-radius: 99px; background: rgba(255,255,255,0.1); cursor: pointer; position: relative; }
[data-theme='light'] .mp-track { background: rgba(0,0,0,0.1); }
.mp-fill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #a78bfa); pointer-events: none; transition: width 0.1s linear; }
.mp-times { display: flex; justify-content: space-between; font-size: 0.58rem; color: var(--faint); font-family: var(--mono); }
.mp-vol-wrap { display: flex; align-items: center; gap: 7px; }
.mp-mute-btn { font-size: 0.8rem; background: none; border: none; cursor: pointer; color: var(--muted); }
.mp-vol { width: 72px; -webkit-appearance: none; appearance: none; height: 3px; border-radius: 99px; background: rgba(255,255,255,0.1); cursor: pointer; outline: none; }
[data-theme='light'] .mp-vol { background: rgba(0,0,0,0.1); }
.mp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); cursor: pointer; }
.mp-hide-btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--faint); cursor: pointer; font-size: 0.65rem; flex-shrink: 0; transition: all 0.2s; }
.mp-hide-btn:hover { color: var(--text); border-color: var(--border2); }
#mp-fab { position: fixed; bottom: 18px; right: 20px; z-index: 9001; width: 42px; height: 42px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; font-size: 1.1rem; color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 20px var(--accent-g); }
#mp-fab.show { display: flex; }

/* ═══════════════════════════════════════════
   16. CURSOR & MONKEY
═══════════════════════════════════════════ */
#cursor-glow { position: fixed; top: 0; left: 0; width: 600px; height: 600px; background: radial-gradient(circle, rgba(108,99,255,0.07) 0%, transparent 70%); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); z-index: 9999; transition: transform 0.08s ease-out; will-change: transform; }
.cursor-particle { position: fixed; pointer-events: none; z-index: 9998; width: 4px; height: 4px; border-radius: 50%; background: rgba(108,99,255,0.6); animation: particleFade 0.8s ease-out forwards; }
@keyframes particleFade { 0% { opacity: 1; transform: scale(1) translate(0,0); } 100% { opacity: 0; transform: scale(0) translate(var(--dx),var(--dy)); } }

.monkey-walker { position: fixed; top: 0; left: 0; z-index: 8999; cursor: pointer; will-change: transform; }
.monkey-inner { display: inline-block; transition: transform 0.3s, filter 0.3s; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.monkey-walker:hover .monkey-inner { filter: drop-shadow(0 0 20px rgba(108,99,255,0.8)) drop-shadow(0 0 40px rgba(108,99,255,0.3)); }
.monkey-bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background: rgba(20,20,20,0.98); color: #fff; padding: 8px 16px; border-radius: 12px; font-size: 0.75rem; white-space: nowrap; pointer-events: none; opacity: 0; border: 1px solid rgba(108,99,255,0.4); transition: all 0.35s var(--ease); box-shadow: 0 8px 25px rgba(0,0,0,0.5), 0 0 15px rgba(108,99,255,0.15); font-family: var(--font); font-weight: 600; will-change: transform, opacity; }
.monkey-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: rgba(108,99,255,0.4) transparent transparent transparent; }
.monkey-walker:hover .monkey-bubble { opacity: 1; transform: translateX(-50%) translateY(-10px); }

/* Custom cursor style if requested */
.cursor { position: fixed; z-index: 99999; pointer-events: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); transition: width 0.15s, height 0.15s, opacity 0.15s; }
.cursor-follower { position: fixed; z-index: 99998; pointer-events: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(108,99,255,0.4); transform: translate(-50%, -50%); transition: left 0.1s var(--ease), top 0.1s var(--ease), width 0.25s, height 0.25s; }
body:has(a:hover) .cursor { width: 14px; height: 14px; }
body:has(a:hover) .cursor-follower { width: 48px; height: 48px; border-color: rgba(108,99,255,0.25); }

/* ═══════════════════════════════════════════
   17. RESPONSIVE MEDIA QUERIES
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { display: none; }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .skills-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Nav & Header */
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .fresher-badge { display: none; }
  
  /* Layout Padding */
  section { padding: 4.5rem 0; }
  .wrap { padding: 0 1.25rem; }

  /* Hero Section */
  .hero { padding-top: 6rem; min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .hero-title { font-size: 2.5rem; }
  .hero-desc { font-size: 0.9rem; }
  .hero-btns { justify-content: center; }
  .hero-tags { justify-content: center; }
  .hero-stats { justify-content: center; }

  /* Grids */
  .proj-grid { grid-template-columns: 1fr; }
  .skills-grid, .about-grid, .bento-grid, .skill-categories { grid-template-columns: 1fr; gap: 1rem; }
  .cert-grid { grid-template-columns: 1fr; }

  /* Timeline */
  .tl::before { left: 75px; }
  .tl-item { grid-template-columns: 75px 1fr; gap: 1rem; }
  .tl-dot { left: 75px; width: 14px; height: 14px; margin-left: -7px; }
  .tl-period { font-size: 0.65rem; }
  .tl-type { font-size: 0.6rem; padding: 2px 6px; }
  .exp-card { padding: 1.25rem; }
  .exp-bullets li { font-size: 0.8rem; }
  
  /* Project Gallery Scroll */
  .exp-proj-gallery { 
    display: flex; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    gap: 10px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .epg-item { flex: 0 0 85%; scroll-snap-align: center; }

  /* Orbit */
  .orbit-container { transform: scale(0.65); transform-origin: center top; margin-bottom: -150px; }

  /* Music Player */
  #mp { padding: 10px 16px; gap: 10px; bottom: 15px; border-radius: 30px; }
  .mp-vol-wrap, .mp-wave { display: none; }
  .mp-info { max-width: 120px; }

  /* Monkey */
  .monkey-bubble { display: none; }
  .monkey-walker { bottom: 15px; left: 15px; }
  #monkey-img img { height: 50px !important; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2rem; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn { width: 100%; justify-content: center; }
  .filter-bar { flex-direction: column; gap: 5px; align-items: stretch; }
  .filter-bar button { text-align: center; width: 100%; }
  
  /* Timeline Mobile Extreme */
  .tl::before { display: none; }
  .tl-item { grid-template-columns: 1fr; gap: 0.5rem; text-align: left; }
  .tl-left { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; margin-bottom: 0.5rem; }
  .tl-dot { display: none; }
  .exp-card { padding: 1rem; }
  
  .orbit-container { transform: scale(0.5); margin-bottom: -250px; }
}

#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}


/* MASONRY GALLERY */
.masonry-gallery {
  column-count: 3;
  column-gap: 1.5rem;
  margin-top: 3rem;
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg3);
  position: relative;
  border: 1px solid var(--border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.masonry-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.masonry-content img, .masonry-content video {
  width: 100%;
  height: auto;
  display: block;
}
.masonry-label {
  padding: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  background: var(--bg2);
  text-align: center;
  border-top: 1px solid var(--border);
}
@media (max-width: 1024px) {
  .masonry-gallery { column-count: 2; }
}
@media (max-width: 600px) {
  .masonry-gallery { column-count: 1; }
}