:root {
  --bg: #09090b;
  --surface: #111113;
  --border: #1e1e22;
  --border-hover: #2e2e35;
  --text: #a1a1aa;
  --text-light: #d4d4d8;
  --heading: #fafafa;
  --accent: #8b5cf6;
  --accent-dim: rgba(139,92,246,.08);
  --accent-glow: rgba(139,92,246,.15);
  --font: 'Inter', -apple-system, system-ui, sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection { background:var(--accent-dim); color:var(--accent); }
a { color:var(--accent); text-decoration:none; transition:color .2s var(--ease); }
a:hover { color:#a78bfa; }

/* ===== NAV ===== */
header { position:fixed; top:0; width:100%; z-index:100; background:rgba(9,9,11,.8); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
nav { max-width:1100px; margin:0 auto; padding:0 32px; height:64px; display:flex; align-items:center; justify-content:space-between; }
.logo { font-size:1.4rem; font-weight:800; color:var(--heading); letter-spacing:-1px; }
.nav-links { display:flex; align-items:center; gap:32px; }
.nav-links a { font-size:.875rem; color:var(--text); font-weight:400; transition:color .2s; }
.nav-links a:hover { color:var(--heading); }
.nav-cta { color:var(--accent)!important; font-weight:500; padding:6px 14px; border:1px solid var(--accent); border-radius:6px; font-size:.8rem!important; transition:all .2s var(--ease); }
.nav-cta:hover { background:var(--accent-dim); }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; }
.hamburger span { display:block; width:22px; height:1.5px; background:var(--text-light); transition:all .3s var(--ease); }
.hamburger.active span:first-child { transform:rotate(45deg) translate(4px,4px); }
.hamburger.active span:last-child { transform:rotate(-45deg) translate(4px,-4px); }

/* ===== MAIN ===== */
main { max-width:1100px; margin:0 auto; padding:0 32px; }
.section { padding:100px 0 30px; }
.label { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--accent); margin-bottom:24px; }

/* ===== HERO ===== */
#hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-bottom:60px; }
.hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.hero-left { display:flex; flex-direction:column; }
.hero-badge { display:inline-block; font-size:.75rem; font-weight:500; color:var(--accent); background:var(--accent-dim); border:1px solid rgba(139,92,246,.15); padding:6px 14px; border-radius:20px; margin-bottom:28px; width:fit-content; }
#hero h1 { font-size:clamp(3rem,5.5vw,4.8rem); font-weight:800; color:var(--heading); line-height:1.02; letter-spacing:-2px; margin-bottom:24px; }
#hero p { font-size:1.05rem; line-height:1.75; max-width:540px; margin-bottom:40px; color:var(--text); }
.hero-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hero-links { display:flex; gap:16px; margin-left:12px; }
.hero-links a { color:var(--text); font-size:1.15rem; transition:all .2s var(--ease); }
.hero-links a:hover { color:var(--accent); transform:translateY(-2px); }

/* Terminal */
.hero-right { perspective:1000px; }
.terminal {
  background:#0d0d11; border:1px solid var(--border); border-radius:12px;
  overflow:hidden; font-family:'Fira Code',monospace; font-size:.78rem;
  box-shadow:0 20px 60px rgba(0,0,0,.4); transform:rotateY(-2deg) rotateX(1deg);
  transition:transform .4s var(--ease);
}
.terminal:hover { transform:rotateY(0) rotateX(0); }
.terminal-bar { display:flex; gap:6px; padding:12px 16px; background:#111116; border-bottom:1px solid var(--border); }
.terminal-bar span { width:10px; height:10px; border-radius:50%; }
.terminal-bar span:nth-child(1) { background:#ff5f57; }
.terminal-bar span:nth-child(2) { background:#febc2e; }
.terminal-bar span:nth-child(3) { background:#28c840; }
.terminal pre { padding:20px; margin:0; line-height:1.7; overflow-x:auto; }
.terminal code { color:#a1a1aa; }
.t-purple { color:var(--accent); }
.t-green { color:#4ade80; }
.t-white { color:#e4e4e7; }
.t-gray { color:#52525b; }

/* ===== BUTTONS ===== */
.btn-primary { display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:500; color:#fff; background:var(--accent); border:none; border-radius:8px; padding:12px 24px; cursor:pointer; transition:all .2s var(--ease); text-decoration:none; font-family:var(--font); }
.btn-primary:hover { background:#7c3aed; color:#fff; transform:translateY(-1px); box-shadow:0 4px 20px var(--accent-glow); }
.btn-secondary { display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:500; color:var(--text-light); background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px 24px; cursor:pointer; transition:all .2s var(--ease); font-family:var(--font); }
.btn-secondary:hover { border-color:var(--border-hover); color:var(--heading); background:#18181b; }
.full { width:100%; justify-content:center; }

/* ===== ABOUT ===== */
.about-text { max-width:680px; margin-bottom:32px; }
.about-text p { font-size:1rem; line-height:1.8; margin-bottom:12px; }
.big-text { font-size:1.15rem; color:var(--text-light); font-weight:400; line-height:1.7; }
.metrics { display:flex; gap:14px; margin-bottom:32px; flex-wrap:wrap; }
.metric { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px 28px; text-align:center; min-width:100px; transition:all .25s var(--ease); }
.metric:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 8px 24px var(--accent-glow); }
.metric span { display:block; font-size:1.5rem; font-weight:700; color:var(--heading); margin-bottom:2px; }
.metric { font-size:.7rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--text); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips span { font-size:.78rem; color:var(--text-light); background:var(--surface); border:1px solid var(--border); padding:6px 14px; border-radius:6px; transition:all .2s var(--ease); cursor:default; }
.chips span:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }

/* ===== EXPERIENCE ===== */
.exp-list { display:flex; flex-direction:column; gap:2px; }
.exp-card { display:grid; grid-template-columns:160px 1fr; gap:32px; padding:28px 24px; border-radius:10px; transition:all .25s var(--ease); }
.exp-card:hover { background:var(--surface); }
.exp-date { font-size:.8rem; color:var(--text); white-space:nowrap; padding-top:4px; }
.exp-right h3 { font-size:1.05rem; font-weight:600; color:var(--text-light); margin-bottom:4px; }
.exp-right h3 span { color:var(--accent); font-weight:500; }
.exp-right ul { list-style:none; margin:14px 0; }
.exp-right li { position:relative; padding-left:16px; margin-bottom:10px; font-size:.9rem; line-height:1.65; }
.exp-right li::before { content:'–'; position:absolute; left:0; color:var(--accent); }
.exp-tags { display:flex; flex-wrap:wrap; gap:6px; }
.exp-tags span { font-size:.7rem; color:var(--text); background:var(--accent-dim); padding:3px 10px; border-radius:4px; }

/* ===== PROJECTS ===== */
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.project-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:28px; transition:all .3s var(--ease); display:flex; flex-direction:column; }
.project-card:hover { border-color:var(--accent); transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.3); }
.project-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.project-head h3 { font-size:1.1rem; font-weight:600; color:var(--heading); }
.project-badge { font-size:.65rem; color:var(--text); background:var(--accent-dim); border:1px solid rgba(139,92,246,.15); padding:3px 10px; border-radius:12px; white-space:nowrap; flex-shrink:0; margin-top:2px; }
.project-card > p { font-size:.9rem; line-height:1.7; margin-bottom:14px; }
.project-card ul { list-style:none; margin-bottom:auto; padding-bottom:16px; }
.project-card li { position:relative; padding-left:16px; margin-bottom:8px; font-size:.85rem; line-height:1.6; }
.project-card li::before { content:'–'; position:absolute; left:0; color:var(--accent); }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.project-tags span { font-size:.7rem; color:var(--text); background:var(--accent-dim); padding:4px 10px; border-radius:4px; border:1px solid rgba(139,92,246,.1); }

/* ===== EDUCATION ===== */
.edu-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:28px; max-width:500px; transition:all .25s var(--ease); }
.edu-card:hover { border-color:var(--accent); }
.edu-card h3 { font-size:1.05rem; color:var(--heading); font-weight:600; margin-bottom:4px; }
.edu-card p { font-size:.9rem; margin-bottom:4px; }
.edu-meta { font-size:.8rem; color:var(--accent); }

/* ===== CONTACT ===== */
.contact-section { text-align:center; max-width:500px; margin:0 auto; padding:120px 0 160px; }
.contact-section h2 { font-size:clamp(2rem,4vw,3rem); font-weight:700; color:var(--heading); margin-bottom:14px; letter-spacing:-1px; }
.contact-section > p:not(.label) { font-size:1.05rem; margin-bottom:36px; }
.contact-actions { display:flex; justify-content:center; }

/* ===== FOOTER ===== */
footer { text-align:center; padding:24px; font-size:.75rem; color:#52525b; border-top:1px solid var(--border); }
.footer-links { display:flex; justify-content:center; gap:20px; margin-bottom:10px; }
.footer-links a { color:#52525b; font-size:1rem; transition:color .2s; }
.footer-links a:hover { color:var(--accent); }

/* ===== MODAL ===== */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); z-index:200; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.active { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:32px; max-width:480px; width:100%; position:relative; }
.modal-x { position:absolute; top:14px; right:16px; background:none; border:none; color:var(--text); font-size:1.1rem; cursor:pointer; transition:color .2s; padding:4px; }
.modal-x:hover { color:var(--heading); }
.modal h2 { font-size:1.15rem; color:var(--heading); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.modal h2 i { color:var(--accent); }
.modal > p { font-size:.85rem; margin-bottom:18px; line-height:1.6; }
.modal-tabs { display:flex; gap:4px; margin-bottom:14px; }
.modal-tab { flex:1; padding:10px; font-size:.82rem; font-weight:500; font-family:var(--font); background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); cursor:pointer; transition:all .2s var(--ease); display:flex; align-items:center; justify-content:center; gap:6px; }
.modal-tab.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.modal-tab:hover:not(.active) { border-color:var(--border-hover); color:var(--text-light); }
#tab-desc { font-size:.85rem; margin-bottom:14px; line-height:1.6; color:var(--text); }
/* ATS Result */
.ats-score-ring { text-align:center; margin:16px 0; }
.ats-score-num { font-size:2.4rem; font-weight:800; }
.ats-score-num.high { color:#4ade80; }
.ats-score-num.mid { color:#facc15; }
.ats-score-num.low { color:#f87171; }
.ats-label { font-size:.75rem; color:var(--text); text-transform:uppercase; letter-spacing:1px; }
.ats-section { margin-bottom:12px; }
.ats-section h4 { font-size:.78rem; font-weight:600; color:var(--text-light); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.ats-chips { display:flex; flex-wrap:wrap; gap:5px; }
.ats-chips span { font-size:.72rem; padding:3px 10px; border-radius:4px; }
.ats-chips .matched { background:rgba(74,222,128,.1); color:#4ade80; border:1px solid rgba(74,222,128,.2); }
.ats-chips .missing { background:rgba(248,113,113,.1); color:#f87171; border:1px solid rgba(248,113,113,.2); }
.ats-tips { list-style:none; }
.ats-tips li { font-size:.8rem; line-height:1.6; padding-left:14px; position:relative; margin-bottom:4px; }
.ats-tips li::before { content:'→'; position:absolute; left:0; color:var(--accent); }
#jd-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:14px; color:var(--text-light); font-family:var(--font); font-size:.875rem; resize:vertical; margin-bottom:14px; transition:border .2s; }
#jd-input:focus { outline:none; border-color:var(--accent); }
#jd-input::placeholder { color:#3f3f46; }
.loading { display:flex; align-items:center; gap:10px; padding:14px 0; font-size:.82rem; color:var(--text); }
.spinner { width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.done-msg { color:var(--accent); font-size:.85rem; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.hidden { display:none!important; }

/* ===== ANIMATIONS ===== */
.anim { opacity:0; transform:translateY(16px); animation:fadeUp .6s var(--ease) forwards; animation-delay:calc(var(--d,0) * .12s + .2s); }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
.anim-s { opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.anim-s.show { opacity:1; transform:translateY(0); }
.stagger.show { transition-delay:calc(var(--s,0) * .1s); }

/* Shimmer hero text */
.shimmer-text {
  background:linear-gradient(90deg, var(--heading) 0%, var(--accent) 40%, var(--heading) 60%, var(--heading) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:fadeUp .6s var(--ease) forwards, shimmer 4s ease-in-out infinite 1.5s;
}
@keyframes shimmer { 0%,100%{background-position:100% 0} 50%{background-position:0 0} }

/* Dot grid background */
.dot-bg {
  position:fixed; inset:0; z-index:-1;
  background-image:radial-gradient(circle, #1e1e22 1px, transparent 1px);
  background-size:24px 24px;
  opacity:.4;
}

/* Scroll progress bar */
#scroll-progress {
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--accent); z-index:200;
  transition:width .05s linear;
}

/* Back to top */
#back-top {
  position:fixed; bottom:32px; right:32px;
  width:40px; height:40px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-size:.85rem;
  cursor:pointer; z-index:50;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:all .3s var(--ease);
}
#back-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
#back-top:hover { border-color:var(--accent); color:var(--accent); }

/* Card hover glow (mouse-following) */
.glow-card { position:relative; overflow:hidden; }
.glow-card::before {
  content:''; position:absolute; width:300px; height:300px;
  background:radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  border-radius:50%; pointer-events:none;
  transform:translate(var(--mx,-150px), var(--my,-150px));
  opacity:0; transition:opacity .3s;
}
.glow-card:hover::before { opacity:1; }

/* Active nav */
.nav-links a.active { color:var(--accent)!important; }

/* Currently learning */
.learning { margin-top:24px; }
.learning-label { font-size:.8rem; color:var(--text); margin-bottom:10px; }
.glow-chips span { border-color:var(--accent)!important; color:var(--accent)!important; background:var(--accent-dim)!important; }

/* ===== RESPONSIVE ===== */
@media(max-width:768px) {
  nav { padding:0 20px; }
  .nav-links { display:none; position:fixed; inset:0; background:rgba(9,9,11,.95); flex-direction:column; align-items:center; justify-content:center; gap:28px; z-index:99; backdrop-filter:blur(12px); }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:1.1rem; }
  .hamburger { display:flex; }
  main { padding:0 20px; }
  .hero-grid { grid-template-columns:1fr; gap:32px; }
  .hero-right { display:none; }
  .metrics { gap:10px; }
  .exp-card { grid-template-columns:1fr; gap:8px; }
  .exp-date { padding:0; }
  .project-grid { grid-template-columns:1fr; }
  .section { padding:80px 0 20px; }
}
@media(max-width:480px) {
  #hero h1 { font-size:2.6rem; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .hero-links { margin-left:0; }
  .metrics { flex-wrap:wrap; }
}


/* ===== Chatbot ===== */
#chat-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  border: none;
  cursor: grab;
  font-size: 1.4rem;
  box-shadow: 0 4px 20px rgba(100, 255, 218, 0.3);
  z-index: 1000;
  transition: transform 0.2s, box-shadow 0.2s;
  user-select: none;
}
#chat-toggle:active { cursor: grabbing; }
#chat-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(100, 255, 218, 0.5); }
#chat-toggle.hidden { display: none; }

#chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 48px);
  height: 500px;
  max-height: 70vh;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  z-index: 1001;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  transition: width 0.3s, height 0.3s;
}
#chat-widget.expanded {
  width: 500px;
  height: 600px;
  max-height: 80vh;
}
#chat-widget.hidden { display: none; }

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--accent);
  cursor: grab;
  background: rgba(100, 255, 218, 0.03);
  border-radius: 16px 16px 0 0;
}
.chat-header:active { cursor: grabbing; }
.chat-header-actions { display: flex; align-items: center; gap: 8px; }
.chat-header-actions button, .chat-header-actions a {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 4px;
  transition: color 0.2s;
}
.chat-header-actions button:hover, .chat-header-actions a:hover { color: var(--accent); }
.chat-header button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
}
.chat-header button:hover { color: var(--text); }

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(100, 255, 218, 0.02) 100%);
}

.chat-msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  animation: msgIn 0.3s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: var(--bg);
  border-bottom-right-radius: 4px;
}
.chat-msg.bot {
  align-self: flex-start;
  background: rgba(100, 255, 218, 0.1);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.chat-msg.typing {
  display: flex;
  gap: 4px;
  padding: 14px 18px;
}
.chat-msg.typing span {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}
.chat-msg.typing span:nth-child(1) { animation-delay: -0.32s; }
.chat-msg.typing span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.cursor {
  animation: blink 1s infinite;
  color: var(--accent);
}
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

#chat-form {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: rgba(100, 255, 218, 0.02);
}
#chat-form input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 12px 18px;
  color: var(--text);
  font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#chat-form input:focus { 
  outline: none; 
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.1);
}
#chat-form input:disabled { opacity: 0.6; }
#chat-form button {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}
#chat-form button:hover { transform: scale(1.05); }
#chat-form button:active { transform: scale(0.95); }