/* RESET & BASE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg: #080b14;
  --bg2: #0d1321;
  --surface: rgba(255,255,255,0.04);
  --surface2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.14);
  --text: #e8eaf6;
  --text-muted: #8892b0;
  --accent1: #6366f1;
  --accent2: #8b5cf6;
  --accent3: #06b6d4;
  --github: #f0f6fc;
  --medium: #02b875;
  --kaggle: #20beff;
  --hf: #FFD21E;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 8px 40px rgba(0,0,0,0.5);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, rgba(99,102,241,0.18) 1px, transparent 1px),
    radial-gradient(circle, rgba(139,92,246,0.10) 1px, transparent 1px);
  background-size: 60px 60px, 30px 30px;
  background-position: 0 0, 15px 15px;
  z-index: 0;
  pointer-events: none;
  animation: bgDrift 25s ease-in-out infinite alternate;
}

@keyframes bgDrift {
  0%   { background-position: 0px 0px, 15px 15px; }
  100% { background-position: 30px 20px, 45px 35px; }
}

/* BACKGROUND PARTICLES */
.bg-particles { position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0; }

#mouseCanvas { position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.75; }

.particle {
  position:absolute;border-radius:50%;opacity:0.15;
  animation: float linear infinite;
}

@keyframes float {
  0%   { transform:translateY(100vh) rotate(0deg);opacity:0; }
  10%  { opacity:0.15; }
  90%  { opacity:0.15; }
  100% { transform:translateY(-100px) rotate(720deg);opacity:0; }
}

/* SCROLL PROGRESS */
.scroll-progress {
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--accent1),var(--accent2),var(--accent3));
  z-index:200;transition:width 0.05s linear;
  border-radius:0 2px 2px 0;box-shadow:0 0 8px rgba(99,102,241,0.5);
}

/* NAVBAR */
.navbar {
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px 0 64px;height:72px;
  background:rgba(8,11,20,0.85);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);transition:var(--transition);
}
.navbar.scrolled { background:rgba(8,11,20,0.98);box-shadow:0 4px 30px rgba(0,0,0,0.4); }
.nav-logo {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.logo-letter {
  display: inline-block;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4, #6366f1);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoFadeUp 0.6s cubic-bezier(0.4,0,0.2,1) both, gradientShift 4s linear infinite;
}

@keyframes logoFadeUp {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
.nav-links { display:flex;gap:32px;margin-right:20px;margin-left:auto; }
.nav-links a { color:var(--text-muted);text-decoration:none;font-size:0.875rem;font-weight:500;transition:color var(--transition); }
.nav-links a:hover { color:var(--text); }

/* THEME TOGGLE */
.theme-toggle-v2 { background:none;border:none;cursor:pointer;padding:0;flex-shrink:0; }

.toggle-pill {
  position:relative;width:80px;height:38px;border-radius:100px;
  border:1.5px solid rgba(99,102,241,0.35);
  background:linear-gradient(135deg,#0d1321,#1a1f3a);
  display:flex;align-items:center;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1);
  overflow:hidden;
}
body.light-theme .toggle-pill {
  background:linear-gradient(135deg,#e8f4fd,#f0f4ff);
  border-color:rgba(245,158,11,0.4);
}

.tk-stars { position:absolute;inset:0;pointer-events:none; }
.tk-sun-rays { position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 0.4s; }
body.light-theme .tk-sun-rays { opacity:1; }

.pill-slider {
  position:absolute;width:30px;height:30px;border-radius:50%;
  left:4px;
  background:radial-gradient(circle at 35% 35%,#c8d8f8,#6366f1);
  box-shadow:inset -3px -2px 0 0 rgba(99,102,241,0.4),0 0 10px rgba(99,102,241,0.4);
  transition:all 0.45s cubic-bezier(0.4,0,0.2,1);
  z-index:1;
}
body.light-theme .pill-slider {
  left:46px;
  background:radial-gradient(circle at 35% 35%,#fff7c0,#f97316);
  box-shadow:0 0 14px rgba(249,115,22,0.5),inset -1px -1px 0 rgba(200,80,0,0.2);
}

.tk-craters { position:absolute;inset:0;border-radius:50%;pointer-events:none;transition:opacity 0.3s; }
body.light-theme .tk-craters { opacity:0; }
.tk-crater { position:absolute;border-radius:50%;background:rgba(60,50,120,0.35); }

.pill-icon {
  position:absolute;width:50%;display:flex;align-items:center;justify-content:center;
  transition:opacity 0.3s,transform 0.3s;z-index:2;
}
.moon-side { right:5px; }
.sun-side  { left:7px;opacity:0;transform:scale(0.7); }
body.light-theme .moon-side { opacity:0;transform:scale(0.7); }
body.light-theme .sun-side  { opacity:1;transform:scale(1); }
body:not(.light-theme) .moon-side { opacity:1;transform:scale(1); }
body:not(.light-theme) .sun-side  { opacity:0;transform:scale(0.7); }

/* HERO */
.hero {
  position:relative;z-index:1;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:100px 40px 60px;
}
.hero-content { display:flex;align-items:center;gap:72px;max-width:960px;width:100%; }

.hero-photo-wrapper { position:relative;flex-shrink:0; }
.photo-ring {
  position:absolute;inset:-8px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--accent1),var(--accent2),var(--accent3),var(--accent1));
  animation:spin 4s linear infinite;z-index:0;
}
@keyframes spin { to { transform:rotate(360deg); } }
.hero-photo {
  position:relative;width:200px;height:200px;border-radius:50%;
  object-fit:cover;object-position:top;border:4px solid var(--bg);z-index:1;display:block;
}
.photo-glow {
  position:absolute;inset:-20px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,0.25) 0%,transparent 70%);
  z-index:-1;pointer-events:none;
}

.hero-text { flex:1; }
.hero-badge {
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.3);
  border-radius:100px;font-size:0.75rem;font-weight:500;color:var(--accent3);
  margin-bottom:20px;text-decoration:none;
  transition:background var(--transition),border-color var(--transition);
}
.hero-badge:hover { background:rgba(6,182,212,0.18);border-color:rgba(6,182,212,0.55); }
.badge-dot { width:7px;height:7px;background:var(--accent3);border-radius:50%;animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.85)} }
.hero-name { font-size:clamp(2.5rem,5vw,3.8rem);font-weight:800;letter-spacing:-2px;line-height:1.05;margin-bottom:12px; }
.hero-title { font-size:1.05rem;font-weight:500;color:var(--text-muted);margin-bottom:16px;letter-spacing:0.3px; }
.hero-bio { font-size:1rem;color:var(--text-muted);max-width:460px;margin-bottom:36px;line-height:1.8; }
.hero-socials { display:flex;flex-wrap:wrap;gap:12px; }

.social-btn {
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;
  border-radius:var(--radius);font-size:0.875rem;font-weight:600;text-decoration:none;
  transition:all var(--transition);border:1px solid var(--border2);backdrop-filter:blur(10px);
}
.social-btn svg { width:16px;height:16px; }
.github-btn  { background:rgba(240,246,252,0.07);color:var(--github); }
.medium-btn  { background:rgba(2,184,117,0.1);color:var(--medium);border-color:rgba(2,184,117,0.3); }
.kaggle-btn  { background:rgba(32,190,255,0.1);color:var(--kaggle);border-color:rgba(32,190,255,0.3); }
.linkedin-btn{ background:rgba(10,102,194,0.1);color:#0a66c2;border-color:rgba(10,102,194,0.3); }
.hf-btn      { background:rgba(217,119,6,0.12);color:#d97706;border-color:rgba(217,119,6,0.4); }
.social-btn:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.4);filter:brightness(1.15); }

.scroll-hint {
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--text-muted);font-size:0.75rem;letter-spacing:1px;text-transform:uppercase;
}
.scroll-arrow {
  width:24px;height:24px;
  border-right:2px solid var(--text-muted);border-bottom:2px solid var(--text-muted);
  transform:rotate(45deg);animation:bounce 1.5s ease-in-out infinite;
}
@keyframes bounce { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(5px)} }

/* SKILLS */
.skills-section { position:relative;z-index:1;padding:48px 32px 64px;border-top:1px solid var(--border);scroll-margin-top:72px; }
.skills-inner { max-width:1200px;margin:0 auto; }
.skills-header { text-align:center;margin-bottom:52px; }
.skills-title { font-size:2rem;font-weight:800;letter-spacing:-1px;color:var(--text);margin-bottom:10px; }
.skills-subtitle { font-size:1rem;color:var(--text-muted); }

.skills-grid { column-count:3;column-gap:20px; }

.skill-category {
  break-inside:avoid;margin-bottom:20px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:24px;backdrop-filter:blur(12px);
  transition:border-color var(--transition),background var(--transition),transform var(--transition);
}
.skill-category:hover { border-color:var(--border2);background:var(--surface2);transform:translateY(-2px); }

.skill-cat-header { display:flex;align-items:center;gap:12px;margin-bottom:18px; }
.skill-cat-icon {
  width:38px;height:38px;border-radius:10px;
  background:rgba(99,102,241,0.12);border:1px solid rgba(99,102,241,0.25);
  display:grid;place-items:center;flex-shrink:0;color:var(--accent1);
}
.skill-cat-icon svg { width:17px;height:17px; }
.skill-cat-header h3 { font-size:0.9rem;font-weight:700;color:var(--text);letter-spacing:-0.2px; }

.skill-tags { display:flex;flex-wrap:wrap;gap:7px; }
.skill-tag { font-size:0.72rem;font-weight:500;padding:4px 10px;border-radius:100px;border:1px solid;transition:all var(--transition);cursor:default; }
.skill-tag:hover { transform:translateY(-1px);filter:brightness(1.2); }
.skill-tag.lang     { background:rgba(99,102,241,0.1);border-color:rgba(99,102,241,0.3);color:#a5b4fc; }
.skill-tag.analytics{ background:rgba(6,182,212,0.1);border-color:rgba(6,182,212,0.3);color:#67e8f9; }
.skill-tag.ml       { background:rgba(139,92,246,0.1);border-color:rgba(139,92,246,0.3);color:#c4b5fd; }
.skill-tag.ds       { background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.3);color:#6ee7b7; }
.skill-tag.web      { background:rgba(56,189,248,0.1);border-color:rgba(56,189,248,0.3);color:#7dd3fc; }
.skill-tag.tools    { background:rgba(236,72,153,0.1);border-color:rgba(236,72,153,0.3);color:#f9a8d4; }
.skill-tag.db       { background:rgba(32,190,255,0.1);border-color:rgba(32,190,255,0.3);color:var(--kaggle); }

/* PROJECTS */
.projects-wrapper { position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:48px 32px 80px;scroll-margin-top:72px; }
.projects-header-row { display:flex;align-items:center;gap:16px;margin-bottom:32px; }
.projects-title-group { display:flex;align-items:center;gap:16px;flex:1; }
.projects-icon {
  width:48px;height:48px;border-radius:14px;
  background:rgba(240,246,252,0.07);border:1px solid var(--border2);
  display:grid;place-items:center;flex-shrink:0;color:var(--text);text-decoration:none;
  transition:background var(--transition),border-color var(--transition),transform var(--transition);
}
.projects-icon:hover { background:rgba(240,246,252,0.14);border-color:rgba(240,246,252,0.3);transform:translateY(-2px); }
.projects-icon svg { width:24px;height:24px; }
.projects-title { font-size:1.6rem;font-weight:800;letter-spacing:-0.8px;color:var(--text);margin-bottom:2px; }
.projects-subtitle { font-size:0.82rem;color:var(--text-muted); }

.github-cards-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }

.view-all-btn { font-size:0.78rem;font-weight:600;text-decoration:none;color:var(--text-muted);transition:color var(--transition);white-space:nowrap;flex-shrink:0; }
.view-all-btn:hover { color:var(--text); }

/* CARD */
.card {
  display:flex;flex-direction:column;text-decoration:none;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  backdrop-filter:blur(12px);transition:all var(--transition);overflow:hidden;position:relative;
}
.card::after {
  content:'';position:absolute;inset:0;border-radius:var(--radius);
  background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,0.03));pointer-events:none;
}
.card:hover { transform:translateY(-3px);border-color:var(--border2);background:var(--surface2);box-shadow:var(--shadow); }
#githubCards .card:hover { box-shadow:0 8px 40px rgba(99,102,241,0.15);border-color:rgba(99,102,241,0.4); }

.card-body { padding:18px;flex:1;display:flex;flex-direction:column; }
.card-icon-row { display:flex;align-items:center;gap:8px;margin-bottom:10px; }
.card-source { font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-muted); }
.card-title { font-size:0.95rem;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.card-desc { font-size:0.8rem;color:var(--text-muted);line-height:1.65;margin-bottom:12px; }
.card-tags { display:flex;flex-wrap:wrap;gap:6px;margin-top:auto; }
.tag { font-size:0.7rem;font-weight:500;padding:3px 9px;border-radius:100px;background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--text-muted); }

.card-footer { padding:10px 18px 14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px; }
.card-link { font-size:0.75rem;color:var(--text-muted);transition:color var(--transition); }
.card:hover .card-link { color:var(--text); }
.card-meta { font-size:0.72rem;color:var(--text-muted);display:flex;align-items:center;gap:12px; }
.meta-item { display:flex;align-items:center;gap:4px; }
.lang-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }

/* SKELETON */
.skeleton-card {
  height:145px;border-radius:var(--radius);
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border:1px solid var(--border);
}
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.error-card { padding:24px;text-align:center;color:var(--text-muted);font-size:0.85rem;border-radius:var(--radius);border:1px dashed var(--border2); }

/* CONTACT */
.contact-section { position:relative;z-index:1;padding:80px 32px;border-top:1px solid var(--border); }
.contact-inner { max-width:560px;margin:0 auto;text-align:center; }
.contact-title { font-size:2rem;font-weight:800;letter-spacing:-1px;color:var(--text);margin-bottom:16px; }
.contact-desc { font-size:1rem;color:var(--text-muted);line-height:1.8;margin-bottom:32px; }
.contact-btn {
  display:inline-flex;align-items:center;gap:10px;padding:14px 28px;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;
  font-size:0.95rem;font-weight:700;text-decoration:none;border-radius:var(--radius);
  transition:all var(--transition);box-shadow:0 4px 20px rgba(99,102,241,0.35);
}
.contact-btn:hover { transform:translateY(-2px);box-shadow:0 8px 30px rgba(99,102,241,0.5);filter:brightness(1.1); }

/* FOOTER */
.footer { position:relative;z-index:1;text-align:center;padding:32px;border-top:1px solid var(--border);color:var(--text-muted);font-size:0.82rem;display:flex;flex-direction:column;align-items:center;gap:16px; }
.footer-icons { display:flex;align-items:center;gap:20px; }
.footer-icons a { color:var(--text-muted);transition:color var(--transition),transform var(--transition);display:flex;align-items:center; }
.footer-icons a:hover { color:var(--text);transform:translateY(-2px); }
.footer-copy { color:var(--text-muted);font-size:0.82rem; }

/* LIGHT THEME */
body.light-theme {
  --bg: #f0f4ff;
  --bg2: #e8edf8;
  --surface: rgba(0,0,0,0.04);
  --surface2: rgba(0,0,0,0.07);
  --border: rgba(0,0,0,0.1);
  --border2: rgba(0,0,0,0.18);
  --text: #0f1729;
  --text-muted: #4a5568;
  color: #0f1729;
}
body.light-theme::before {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, rgba(99,102,241,0.12) 1px, transparent 1px),
    radial-gradient(circle, rgba(139,92,246,0.07) 1px, transparent 1px);
  background-size: 60px 60px, 30px 30px;
}
body.light-theme .navbar { background:rgba(240,244,255,0.9); }
body.light-theme .navbar.scrolled { background:rgba(240,244,255,0.98);box-shadow:0 4px 30px rgba(0,0,0,0.1); }
body.light-theme .card { background:rgba(255,255,255,0.7);border-color:rgba(0,0,0,0.1);color:#0f1729; }
body.light-theme .card:hover { background:rgba(255,255,255,0.9); }
body.light-theme .skill-category { background:rgba(255,255,255,0.7);border-color:rgba(0,0,0,0.1); }
body.light-theme .skill-category:hover { background:rgba(255,255,255,0.9); }
body.light-theme .skill-cat-icon { background:rgba(99,102,241,0.08);border-color:rgba(99,102,241,0.2); }
body.light-theme .hero-photo { border-color:#f0f4ff; }
body.light-theme .tag { background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.1);color:#4a5568; }
body.light-theme .skeleton-card { background:linear-gradient(90deg,rgba(0,0,0,0.05) 25%,rgba(0,0,0,0.09) 50%,rgba(0,0,0,0.05) 75%);background-size:200% 100%;border-color:rgba(0,0,0,0.1); }
body.light-theme .error-card { border-color:rgba(0,0,0,0.2); }
body.light-theme .contact-section { border-top-color:rgba(0,0,0,0.1); }
body.light-theme .footer { border-top-color:rgba(0,0,0,0.1); }
body.light-theme .card-footer { border-top-color:rgba(0,0,0,0.08); }
body.light-theme .skills-section { border-top-color:rgba(0,0,0,0.1); }
body.light-theme .github-btn { background:rgba(30,30,40,0.08);color:#1a1a2e;border-color:rgba(30,30,40,0.2); }
body.light-theme .github-btn:hover { background:rgba(30,30,40,0.14); }
body.light-theme .projects-icon { background:rgba(30,30,40,0.08);border-color:rgba(30,30,40,0.2);color:#1a1a2e; }
body.light-theme .projects-icon:hover { background:rgba(30,30,40,0.14);border-color:rgba(30,30,40,0.35); }
body.light-theme .skill-tag.lang     { background:rgba(99,102,241,0.08);border-color:rgba(99,102,241,0.25);color:#4f46e5; }
body.light-theme .skill-tag.analytics{ background:rgba(6,182,212,0.08);border-color:rgba(6,182,212,0.25);color:#0891b2; }
body.light-theme .skill-tag.ml       { background:rgba(139,92,246,0.08);border-color:rgba(139,92,246,0.25);color:#7c3aed; }
body.light-theme .skill-tag.ds       { background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.25);color:#059669; }
body.light-theme .skill-tag.web      { background:rgba(56,189,248,0.08);border-color:rgba(56,189,248,0.25);color:#0284c7; }
body.light-theme .skill-tag.tools    { background:rgba(236,72,153,0.08);border-color:rgba(236,72,153,0.25);color:#db2777; }
body.light-theme .skill-tag.db       { background:rgba(32,190,255,0.08);border-color:rgba(32,190,255,0.25);color:#0284c7; }

/* RESPONSIVE */
@media (max-width:1100px) {
  .skills-grid { column-count:2; }
  .github-cards-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .navbar { padding:0 20px; }
  .nav-links { gap:18px; }
  .hero { padding:90px 20px 60px; }
  .hero-content { flex-direction:column;text-align:center;gap:36px; }
  .hero-bio { margin:0 auto 36px; }
  .hero-socials { justify-content:center; }
  .skills-section { padding:40px 20px 48px; }
  .skills-grid { column-count:1; }
  .projects-wrapper { padding:40px 20px 60px; }
  .github-cards-grid { grid-template-columns:1fr; }
}