:root{
  --bg: #0b0d11;
  --surface: #0f131a;
  --surface-2: #0c1016;
  --text: #e6ebf3;
  --muted: #8c95a6;
  --line: #1a2230;
  --line-2: #243042;
  --accent: #6df1ff;
  --accent-2: #ff3df1;
  --header-bg: rgba(12,14,20,0.65);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow-1: 0 2px 10px rgba(0,0,0,0.25);
  --shadow-2: 0 14px 44px rgba(0,0,0,0.45);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--accent); }

.container { max-width: 1140px; margin: 0 auto; padding: 10px 20px 10px 10px; }

/* Skip link */
.skip-link { position: absolute; top: -40px; left: 16px; background: var(--accent); color: #001018; padding: 8px 12px; border-radius: var(--radius-sm); transition: top .2s var(--ease); z-index: 10000; }
.skip-link:focus { top: 12px; outline: none; }

/* Header */
header { position: fixed; inset: 0 0 auto 0; z-index: 1000; backdrop-filter: saturate(140%) blur(10px); background: var(--header-bg); border-bottom: 1px solid var(--line); }
nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; }
.logo { font-weight: 800; letter-spacing: -0.01em; color: var(--text); font-size: 18px; }

.nav-right { display: flex; align-items: center; gap: 10px; position: relative; }

/* Mobile hamburger */
.mobile-menu-btn { display: none; width: 42px; height: 36px; border: 1px solid var(--line-2); border-radius: 10px; background: #0d141d; color: var(--text); align-items: center; justify-content: center; cursor: pointer; }
.mobile-menu-btn .bars { position: relative; width: 18px; height: 2px; background: currentColor; }
.mobile-menu-btn .bars::before, .mobile-menu-btn .bars::after { content:""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; }
.mobile-menu-btn .bars::before { top: -6px; }
.mobile-menu-btn .bars::after { top: 6px; }
.mobile-menu { position: fixed; inset: 0; background: rgba(4,6,10,0.55); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), visibility .18s var(--ease); z-index: 1500; }
.mobile-menu.show { opacity: 1; visibility: visible; }
.mobile-menu .popup { position: absolute; top: 600%; left: 50%; transform: translate(-50%, -50%) scale(0.96); opacity: 0; transition: transform .22s var(--ease), opacity .22s var(--ease); width: min(92vw, 420px); max-height: 80vh; overflow: hidden; background: #0e141c; border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); display: grid; grid-template-rows: auto 1fr; }
.mobile-menu.show .popup { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.popup-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.mobile-close { width: 36px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-2); background: #0d141d; color: var(--text); border-radius: 8px; cursor: pointer; }
.mobile-close:hover { border-color: var(--accent); color: var(--accent); }
.popup-content { padding: 10px; display: grid; gap: 8px; align-content: start; overflow: auto; text-align: center; }
.mobile-group { padding: 4px 6px; font-size: 12px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.mobile-group { text-align: center; }
.mobile-menu a, .mobile-menu button.mobile-link { display: block; text-align: center; background: transparent; border: 1px solid var(--line-2); color: var(--text); padding: 10px 12px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.mobile-menu a:hover, .mobile-menu button.mobile-link:hover { border-color: var(--accent); color: var(--accent); }

/* Prevent background scroll when drawer open */
body.no-scroll, html.no-scroll { overflow: hidden; }

/* Work dropdown */
.menu { position: relative; }
.menu-btn { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; min-height: 36px; display: inline-flex; align-items: center; font-weight: 600; cursor: pointer; color: var(--text); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: #0d1219; border-color: var(--line-2); color: var(--accent); }
.menu-list { position: absolute; right: 0; top: calc(100% + 8px); background: #0e141c; border: 1px solid var(--line-2); border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding: 6px; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .2s var(--ease); }
.menu-list.show { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-item { display: block; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); font-size: 14px; }
.menu-item:hover { background: #0b1118; color: var(--accent); }

/* Search CTA + Command Palette */
.search-cta { display: inline-flex; align-items: center; gap: 10px; background: #0d141d; color: var(--text); border: 1px solid var(--line-2); padding: 8px 20px; min-height: 36px; min-width: 140px; justify-content: center; border-radius: 999px; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); font-weight: 700; }
.search-cta:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.kbd { padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 4px; font-size: 12px; color: var(--muted); cursor: pointer;}

.cmd { position: fixed; inset: 0; display: grid; place-items: start center; padding-top: 12vh; background: rgba(4,6,10,0.65); backdrop-filter: blur(8px); z-index: 2000; }
.cmd[hidden] { display: none; }
.cmd-panel { width: min(820px, 92vw); background: #0e141c; border: 1px solid var(--line-2); box-shadow: var(--shadow-2); border-radius: var(--radius-lg); overflow: hidden; }
.cmd-head { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.cmd-icon { color: var(--accent); }
#cmdInput { flex: 1; height: 40px; background: #0b1118; color: var(--text); border: 1px solid var(--line-2); outline: none; border-radius: var(--radius-sm); padding: 0 12px; font-size: 14px; }
#cmdResults { max-height: 420px; overflow-y: auto; }
.cmd-item { padding: 12px 14px; border-top: 1px solid var(--line); cursor: pointer; display: grid; gap: 4px; }
.cmd-item:hover, .cmd-item:focus { background: #0b1118; color: var(--accent); outline: none; }
.cmd-title { font-weight: 800; font-size: 14px; }
.cmd-desc { color: var(--muted); font-size: 12px; }

/* Hero */
.hero { padding: 132px 0 40px; position: relative; border-bottom: 1px solid var(--line); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0); background-size: 22px 22px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,0.08) 30%, rgba(0,0,0,0.0)); }
.hero-heading { display: flex; flex-direction: column; gap: .18em; margin-bottom: 28px; }
.hero-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.hero-hi, .hero-there, .hero-im { font-size: clamp(36px, 8vw, 88px); font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.hero-name { overflow: clip; font-size: clamp(36px, 7vw, 76px); font-weight: 800; letter-spacing: -0.015em; }
.typing-text { display: inline-block; position: relative; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 12px rgba(109,241,255,0.18), 0 0 22px rgba(255,61,241,0.12); }
.typing-caret::after { content: '▌'; margin-left: 2px; color: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 0%,50%{opacity:1} 51%,100%{opacity:0} }

.hero-image-content { width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface), var(--surface-2)); display: grid; place-items: center; color: var(--muted); font-style: italic; }
.hero-image-content1 { width: 100%; height: 500px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface), var(--surface-2)); display: grid; place-items: center; color: var(--muted); font-style: italic; }
/* Liquid gradient animation */
.morph-bg{ position: relative; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; background: radial-gradient(80% 60% at 50% 40%, rgba(109,241,255,0.08), transparent 60%), radial-gradient(60% 40% at 60% 70%, rgba(255,61,241,0.08), transparent 60%); }
.blob{ position:absolute; width: 420px; height: 420px; border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%; animation: morph 18s ease-in-out infinite; will-change: border-radius; }
.blob .in{ position:absolute; inset:0; border-radius: inherit; filter: blur(36px); opacity: 0.9; mix-blend-mode: screen; animation: float 10s ease-in-out infinite; will-change: transform; }
.b1{ left: -40px; top: -30px; animation-duration: 18s; }
.b1 .in{ background: radial-gradient(circle at 30% 30%, rgba(109,241,255,0.75), rgba(109,241,255,0.25)); animation-delay: 0s; }
.b2{ right: -60px; top: -20px; animation-duration: 22s; }
.b2 .in{ background: radial-gradient(circle at 70% 30%, rgba(255,61,241,0.7), rgba(255,61,241,0.22)); animation-delay: -2s; }
.b3{ left: 20%; bottom: -80px; animation-duration: 20s; }
.b3 .in{ background: radial-gradient(circle at 40% 60%, rgba(111,255,157,0.6), rgba(111,255,157,0.2)); animation-delay: -4s; }
.b4{ right: 24%; bottom: -60px; animation-duration: 24s; }
.b4 .in{ background: radial-gradient(circle at 60% 40%, rgba(253,255,145,0.5), rgba(253,255,145,0.18)); animation-delay: -6s; }
.b5{ left: 45%; top: 10%; width: 520px; height: 520px; animation-duration: 26s; }
.b5 .in{ background: radial-gradient(circle at 50% 50%, rgba(129,193,255,0.55), rgba(129,193,255,0.2)); filter: blur(46px); animation-delay: -1s; }
@keyframes morph{ 0%{ border-radius: 42% 58% 48% 52% / 58% 42% 58% 42% } 25%{ border-radius: 58% 42% 52% 48% / 40% 60% 40% 60% } 50%{ border-radius: 48% 52% 60% 40% / 52% 48% 52% 48% } 75%{ border-radius: 60% 40% 42% 58% / 46% 54% 46% 54% } 100%{ border-radius: 42% 58% 48% 52% / 58% 42% 58% 42% } }
@keyframes float{ 0%,100%{ transform: translate(0,0) } 25%{ transform: translate(8px,-6px) } 50%{ transform: translate(-6px,6px) } 75%{ transform: translate(6px,4px) } }

/* Projects */
.projects-section { padding: 56px 0; }
.section-eyebrow { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
.section-title { font-size: clamp(28px, 5vw, 44px); font-weight: 900; letter-spacing: -0.02em; margin: 6px 0 18px; }

.projects-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.project-card { display: grid; grid-template-columns: 1fr; grid-column: span 6; border: 1px solid var(--line-2); background: #0e141c; transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); }
.project-card:hover { transform: translateY(-3px); border-color: var(--accent); background: #0c121a; box-shadow: var(--shadow-2); }
.project-thumb { width: 100%; display: grid; place-items: center; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border-bottom: 1px solid var(--line); color: var(--muted); font-style: italic; position: relative; overflow: hidden; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-meta { padding: 16px; display: grid; gap: 6px; }
.project-kicker { font-size: 12px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.project-title { font-size: 18px; font-weight: 900; }
.project-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line-2); transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); color: var(--muted); border-radius: 999px; }
.project-card:hover .project-arrow { transform: translateX(3px) rotate(-8deg); background: #0b1118; border-color: var(--accent); color: var(--accent); }

.view-more-wrap { display: grid; place-items: center; margin-top: 22px; }
.view-more-btn { background: #0d141d; color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 10px 16px; font-weight: 900; letter-spacing: .04em; cursor: pointer; transition: transform .15s var(--ease), background .2s, color .2s, border-color .2s; }
.view-more-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* Experience */
.experience-section { padding: 56px 0; border-top: 1px solid var(--line); }
.experience-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 28px; align-items: start; }
.experience-intro { padding: 8px 0; }
.experience-description { color: var(--muted); }
.experience-list-container { border-top: 1px solid var(--line); }
.experience-item { background: transparent; border-bottom: 1px solid var(--line); padding: 18px 0; }
.experience-header { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.experience-period { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.experience-company { font-size: 12px; font-weight: 800; color: var(--muted); }
.experience-title { font-size: 22px; font-weight: 900; letter-spacing: -0.01em; }
.skills-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.skill-tag { border: 1px solid var(--line-2); color: var(--text); padding: 6px 10px; font-size: 12px; font-weight: 800; border-radius: 999px; }

/* Section background glows (movable radial gradients) */
.experience-section, .education-section { position: relative; overflow: hidden; isolation: isolate; }
.experience-section .container, .education-section .container { position: relative; z-index: 1; }
.bg-glow { position: absolute; width: 720px; height: 720px; border-radius: 50%; filter: blur(72px); opacity: 0.32; pointer-events: none; z-index: 0; }
.bg-glow.cyan { background: radial-gradient(closest-side, #6df1ff, transparent 70%); }
.bg-glow.magenta { background: radial-gradient(closest-side, #ff3df1, transparent 70%); }
.bg-glow.left { left: -280px; top: -120px; }
.bg-glow.right { right: -280px; top: -120px; }

/* Education */
.education-section { padding: 56px 0; }
.education-container { display: grid; grid-template-columns: 1fr 2fr; gap: 36px; }
.awards-box { border: 1px solid var(--line-2); padding: 20px; background: #0e141c; border-radius: var(--radius-md); overflow: hidden; }
.award-item { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.award-item:last-child { border: none; padding-bottom: 0; }
.education-timeline { position: relative; padding-left: 36px; }
.education-timeline::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.timeline-item { position: relative; margin-bottom: 28px; }
.timeline-dot { position: absolute; left: 9px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: #0b0d11; border: 2px solid var(--accent); box-shadow: 0 0 10px rgba(109,241,255,0.5); }

/* Category pages + portfolio grid */
.page-hero { padding: 88px 0 28px; text-align: center; border-bottom: 1px solid var(--line); }
.page-title { font-size: clamp(28px, 5vw, 48px); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 8px; }
.page-subtitle { color: var(--muted); }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 28px 0 40px; }
.portfolio-item { background: #0e141c; border: 1px solid var(--line-2); overflow: hidden; transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.portfolio-item:hover { transform: translateY(-3px); border-color: var(--accent); background: #0c121a; box-shadow: var(--shadow-2); }
.portfolio-image { width: 100%; height: 180px; display: grid; place-items: center; color: var(--muted); font-style: italic; font-size: 16px; background: linear-gradient(180deg, var(--surface), var(--surface-2)); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.portfolio-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portfolio-content { padding: 18px; }

/* Connect / Footer-like Section */
.connect-wrap { padding: 48px 0 64px; }
.connect-card { background: #0e141c; color: #e7edf6; border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 24px; box-shadow: inset 0 0 0 1px rgba(109,241,255,0.03); }
.connect-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.connect-title { font-size: clamp(24px, 4vw, 36px); font-weight: 900; letter-spacing: -0.01em; }
.hire-btn { background: #0d141d; color: var(--text); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 16px; font-weight: 900; cursor: pointer; transition: transform .15s var(--ease), background .2s, color .2s; }
.hire-btn:hover { background: #06131a; color: var(--accent); transform: translateY(-1px); }
.connect-hr { height: 1px; background: var(--line); margin: 10px 0 16px; }
.connect-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; align-items: start; }
.mini-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; }
.mini-logo-badge { width: 28px; height: 28px; border-radius: 2px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #0b0d11; font-weight: 900; }
.footer-text { color: #b7bfce; font-size: 14px; margin: 12px 0; }
.socials { display: flex; gap: 10px; }
.socials a { width: 34px; height: 34px; display: grid; place-items: center; color: #eaeaea; text-decoration: none; font-size: 14px; }
.footer-col h4 { color: #eaeaea; font-weight: 900; margin-bottom: 10px; letter-spacing: .02em; }
.footer-link { display: block; color: #b7bfce; text-decoration: none; padding: 6px 0; font-size: 14px; }
.footer-link:hover { color: var(--accent); }
.footer-sub { text-align: center; color: #98a3b5; font-size: 13px; margin-top: 18px; }

footer { border-top: 1px solid var(--line); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); display: grid; place-items: center; z-index: 3000; }
.modal[hidden] { display: none; }
.modal-panel { width: min(820px, 92vw); background: #0e141c; border: 1px solid var(--line-2); box-shadow: var(--shadow-2); border-radius: var(--radius-lg); overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.modal-title { font-weight: 900; font-size: 18px; }
.modal-close { background: transparent; color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.modal-close:hover { border-color: var(--accent); color: var(--accent); }
.modal-body { padding: 16px; color: var(--muted); max-height: calc(90vh - 60px); overflow: auto; }

/* Responsive */
@media (max-width: 1024px) {
  .experience-layout, .education-container { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 900px) {
  .projects-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .project-card { grid-column: span 1; }
  .connect-grid { grid-template-columns: 1fr; }
  /* Scale blobs for tablets */
  .blob{ width: 320px; height: 320px; }
  .b5{ width: 400px; height: 400px; }
}
@media (max-width: 720px) {
  .hero { padding: 108px 0 28px; }
  .hero-image-content { height: 150px; font-size: .95rem; }
  .nav-right { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .search-cta span:first-child { display: none; }
}
@media (max-width: 560px) {
  .projects-grid { grid-template-columns: 1fr; gap: 14px; }
  .hero-image-content { height: 140px; }
  /* Reduce complexity for small phones */
  .blob{ width: 240px; height: 240px; filter: blur(24px); }
  .b4, .b5{ display: none; }
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }