/* ════════════════════════════════════════════════════════════════
🌙 MIDNIGHT NOCTURNAL — COMPLETE PORTFOLIO
   Designed for Ayush Jain | AI/ML Engineer Portfolio
════════════════════════════════════════════════════════════════ */

*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  /* ═══ Surfaces ═══ */
  --bg:#070b15;
  --bg2:#0a0f1a;
  --surface:#0d1220;
  --surface2:#111828;
  --surface3:#161e30;
  --surface4:#1c2540;
  
  /* ═══ Borders ═══ */
  --border:rgba(120,140,180,.06);
  --border-h:rgba(120,140,180,.1);
  --border-active:rgba(120,140,180,.16);
  
  /* ═══ Enhanced Glow System ═══ */
  --glow-soft:0 0 20px rgba(139,157,195,.08);
  --glow-hover:0 0 28px rgba(139,157,195,.12);
  --glow-focus:0 0 0 3px rgba(139,157,195,.15);
  --glow-active:0 0 35px rgba(139,157,195,.18);
  
  /* ═══ Shadows ═══ */
  --shadow-sm:0 2px 8px rgba(0,0,0,.12);
  --shadow-md:0 4px 16px rgba(0,0,0,.18);
  --shadow-lg:0 8px 32px rgba(0,0,0,.24);
  --shadow-xl:0 12px 48px rgba(0,0,0,.32);
  
  /* ═══ Accents ═══ */
  --moon:#8b9dc3;
  --moon-dim:#5c6d8e;
  --star:#c8d3e6;
  --ice:#6e8caa;
  --accent:#7ba3d8;
  --success:#6dd4a0;
  --warning:#f4b860;
  --danger:#ef5a6f;
  
  /* ═══ Typography Colors ═══ */
  --white:#e6ecf5;
  --text:#aab4c8;
  --text2:#7f8aa3;
  --muted:#5c677f;
  --dim:#3e475d;
  --faint:#2a3145;
  
  /* ═══ Spacing Scale ═══ */
  --space-xs:0.5rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2.5rem;
  --space-xl:4rem;
  --space-2xl:6rem;
  
  /* ═══ Border Radius ═══ */
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:7px;
  --radius-lg:18px;
  
  /* ═══ Fonts ═══ */
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'SF Mono','Fira Code','Cascadia Code',monospace;
  
  /* ═══ Easing ═══ */
  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-bounce:cubic-bezier(.68,-.55,.265,1.55);
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at 50% -20%, rgba(120,150,200,.06), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(110,140,180,.03), transparent 50%),
    var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ════════════════════════════════════════════════════════════════
🎯 CURSOR GLOW
════════════════════════════════════════════════════════════════ */
.cursor-glow{
  position:fixed;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(139,157,195,.08) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%, -50%);
  z-index:9999;
  transition:opacity .3s ease;
  opacity:0;
}

@media(hover:hover){
  .cursor-glow{opacity:1}
}

/* ════════════════════════════════════════════════════════════════
🧭 NAVBAR
════════════════════════════════════════════════════════════════ */
.navBar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:rgba(7,11,21,.85);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  padding:1rem 0;
  transition:all .3s var(--ease);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-left:max(5vw, 2rem);
  padding-right:max(5vw, 2rem);
}

.navBar.scrolled{
  background:rgba(7,11,21,.95);
  padding:0.75rem max(5vw, 2rem);
  box-shadow:0 4px 40px rgba(0,0,0,.35);
}

.nav-logo{
  font-size:1.5rem;
  font-weight:700;
  color:var(--white);
  letter-spacing:-1px;
}

.logo-bracket{
  color:var(--moon);
}

.nav-links{
  display:flex;
  gap:0.5rem;
  align-items:center;
}

.nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--text);
  text-decoration:none;
  font-weight:500;
  padding:0.625rem 1.125rem;
  border-radius:var(--radius-xs);
  transition:all .25s var(--ease);
  font-size:0.9375rem;
}

.nav-link-icon{
  font-size:1.125rem;
  opacity:0.8;
}

.nav-link::before{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  width:0;
  height:2px;
  background:linear-gradient(90deg,var(--moon),var(--accent));
  transform:translateX(-50%);
  transition:width .3s var(--ease);
  border-radius:2px;
}

.nav-link:hover{
  color:var(--white);
  background:rgba(139,157,195,.06);
}

.nav-link:hover::before{
  width:60%;
}

.nav-link.active{
  color:var(--white);
  background:rgba(139,157,195,.08);
}

.nav-link.active::before{
  width:70%;
}

.nav-hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:0.5rem;
}

.nav-hamburger span{
  width:24px;
  height:2px;
  background:var(--moon);
  border-radius:2px;
  transition:all .3s var(--ease);
}

.nav-hamburger.active span:nth-child(1){
  transform:rotate(45deg) translateY(7px);
}

.nav-hamburger.active span:nth-child(2){
  opacity:0;
}

.nav-hamburger.active span:nth-child(3){
  transform:rotate(-45deg) translateY(-7px);
}

/* ════════════════════════════════════════════════════════════════
🌟 HERO SECTION
════════════════════════════════════════════════════════════════ */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:8rem max(5vw, 2rem) 4rem;
  margin-top:60px;
}

/* Hero Background Effects */
.hero-cosmos{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.cosmos-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.15;
  animation:float 20s ease-in-out infinite;
}

.cosmos-orb-1{
  width:300px;
  height:300px;
  background:linear-gradient(135deg, var(--moon), var(--accent));
  top:10%;
  left:5%;
  animation-delay:0s;
}

.cosmos-orb-2{
  width:250px;
  height:250px;
  background:linear-gradient(135deg, var(--ice), var(--star));
  bottom:15%;
  right:10%;
  animation-delay:5s;
}

.cosmos-orb-3{
  width:200px;
  height:200px;
  background:var(--accent);
  top:50%;
  right:20%;
  animation-delay:10s;
}

@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(30px, 30px) scale(1.1)}
}

.hero-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(139,157,195,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,157,195,.02) 1px, transparent 1px);
  background-size:50px 50px;
  mask-image:radial-gradient(ellipse 80% 50% at 50% 50%, black, transparent);
}

.hero-content{
  max-width:1200px;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
  position:relative;
  z-index:1;
}

/* Hero Left */
.hero-left{
  animation:fade-up .8s var(--ease-out) forwards;
}

@keyframes fade-up{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

.hero-badge-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 1rem;
  background:rgba(109,212,160,.08);
  border:1px solid rgba(109,212,160,.2);
  border-radius:100px;
  font-size:0.875rem;
  color:var(--success);
  font-weight:500;
}

.status-dot{
  width:8px;
  height:8px;
  background:var(--success);
  border-radius:50%;
  animation:pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.6;transform:scale(0.9)}
}

.gate-badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 1rem;
  background:rgba(244,184,96,.08);
  border:1px solid rgba(244,184,96,.2);
  border-radius:100px;
  font-size:0.875rem;
  color:var(--warning);
  font-weight:500;
}

.hero-title{
  margin-bottom:1.5rem;
}

.title-line{
  display:block;
  font-size:clamp(2.5rem, 6vw, 4.5rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-1px;
}

.title-line-1{
  font-size:clamp(1.5rem, 3vw, 2rem);
  color:var(--text);
  font-weight:500;
}

.title-line-2{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.name-gradient{
  background:linear-gradient(160deg, var(--star) 0%, var(--moon) 50%, var(--accent) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 25px rgba(139,157,195,.2));
  animation:subtle-glow 4s ease-in-out infinite;
}

@keyframes subtle-glow{
  0%,100%{filter:drop-shadow(0 0 25px rgba(139,157,195,.2))}
  50%{filter:drop-shadow(0 0 35px rgba(139,157,195,.3))}
}

.title-line-3{
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--moon);
  font-size:clamp(1.75rem, 4vw, 3rem);
}

.role-cursor{
  color:var(--accent);
  animation:blink 1.2s step-end infinite;
}

@keyframes blink{
  0%,50%{opacity:1}
  51%,100%{opacity:0}
}

.hero-desc{
  font-size:1.125rem;
  line-height:1.75;
  color:var(--text);
  margin-bottom:1.5rem;
  max-width:600px;
}

.highlight-word{
  color:var(--moon);
  font-weight:600;
  position:relative;
}

.hero-chips{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 1rem;
  background:var(--surface3);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  font-size:0.875rem;
  color:var(--text);
  font-weight:500;
  transition:all .25s var(--ease);
  cursor:default;
}

.chip:hover{
  background:var(--surface4);
  border-color:var(--border-active);
  color:var(--moon);
  transform:translateY(-2px);
  box-shadow:0 0 12px rgba(139,157,195,.15);
}

.hero-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
}

.btn-cosmic{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:0.625rem;
  padding:0.875rem 1.75rem;
  background:var(--surface3);
  color:var(--white);
  border:1px solid var(--border-h);
  border-radius:var(--radius-sm);
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  transition:all .25s var(--ease);
  cursor:pointer;
  overflow:hidden;
}

.btn-bg{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(200,211,230,.1), transparent);
  opacity:0;
  transition:opacity .3s ease;
}

.btn-cosmic:hover{
  background:linear-gradient(135deg, var(--moon), var(--accent));
  border-color:transparent;
  color:var(--bg);
  transform:translateY(-2px);
  box-shadow:0 0 25px rgba(139,157,195,.3), var(--shadow-lg);
}

.btn-cosmic:hover .btn-bg{
  opacity:1;
}

.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:0.625rem;
  padding:0.875rem 1.75rem;
  background:transparent;
  color:var(--moon);
  border:1px solid var(--border-active);
  border-radius:var(--radius-sm);
  font-weight:500;
  font-size:1rem;
  text-decoration:none;
  transition:all .25s var(--ease);
}

.btn-outline:hover{
  background:var(--surface3);
  border-color:var(--moon);
  color:var(--white);
  transform:translateY(-2px);
}

.hero-social{
  display:flex;
  gap:0.75rem;
  margin-left:0.5rem;
}

.social-orb{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  background:var(--surface3);
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text);
  font-size:1.125rem;
  text-decoration:none;
  transition:all .25s var(--ease);
}

.social-orb:hover{
  background:var(--surface4);
  border-color:var(--moon);
  color:var(--moon);
  transform:translateY(-3px) rotate(5deg);
  box-shadow:0 0 15px rgba(139,157,195,.2);
}

/* Hero Right — Terminal */
.hero-right{
  position:relative;
  animation:fade-up .8s var(--ease-out) .3s both;
}

.terminal-card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-xl);
  transition:all .35s var(--ease);
}

.terminal-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--glow-hover), var(--shadow-xl);
}

.terminal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.25rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}

.terminal-dots{
  display:flex;
  gap:0.5rem;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
}

.dot-red{background:#ff5f57}
.dot-yellow{background:#febc2e}
.dot-green{background:#28c840}

.terminal-title{
  font-family:var(--mono);
  font-size:0.875rem;
  color:var(--text2);
}

.terminal-body{
  padding:1.5rem;
  font-family:var(--mono);
  font-size:0.9375rem;
}

.term-line{
  display:flex;
  gap:0.75rem;
  margin-bottom:0.75rem;
}

.term-prompt{
  color:var(--accent);
  font-weight:700;
}

.term-cmd{
  color:var(--moon);
  text-shadow:0 0 8px rgba(139,157,195,.2);
}

.term-output{
  color:var(--text2);
  margin-left:2rem;
  line-height:1.8;
}

.term-brace{color:var(--text2)}
.term-key{color:var(--ice)}
.term-val{color:var(--warning)}
.term-str{color:var(--success)}

.term-cursor{
  color:var(--accent);
  animation:blink 1.2s step-end infinite;
}

/* Floating Pills */
.float-pill{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0.75rem 1rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  animation:float-pill 4s ease-in-out infinite;
}

.pill-1{
  top:-10%;
  right:-10%;
  animation-delay:0s;
}

.pill-2{
  bottom:10%;
  left:-15%;
  animation-delay:1.5s;
}

.pill-3{
  top:50%;
  right:-12%;
  animation-delay:3s;
}

@keyframes float-pill{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.pill-num{
  font-size:1.5rem;
  font-weight:700;
  color:var(--moon);
}

.pill-label{
  font-size:0.75rem;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* Scroll Indicator */
.scroll-indicator{
  position:absolute;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  color:var(--text2);
  text-decoration:none;
  font-size:0.875rem;
  animation:bounce 2s ease-in-out infinite;
}

@keyframes bounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-10px)}
}

.scroll-mouse{
  width:24px;
  height:36px;
  border:2px solid var(--border-active);
  border-radius:12px;
  position:relative;
}

.scroll-wheel{
  width:3px;
  height:8px;
  background:var(--moon);
  border-radius:2px;
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  animation:scroll-wheel 1.5s ease-in-out infinite;
}

@keyframes scroll-wheel{
  0%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(12px)}
}

/* ════════════════════════════════════════════════════════════════
📦 SECTIONS BASE
════════════════════════════════════════════════════════════════ */
section{
  padding:var(--space-2xl) max(5vw, 2rem);
  position:relative;
}

section + section::before{
  content:'';
  display:block;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,157,195,.2), transparent);
  margin:0 auto var(--space-2xl);
  max-width:600px;
}

.section-header{
  text-align:center;
  margin-bottom:var(--space-xl);
}

.section-tag{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.5rem 1rem;
  background:var(--surface3);
  border:1px solid var(--border);
  border-radius:100px;
  font-size:0.875rem;
  color:var(--moon);
  font-weight:500;
  margin-bottom:1rem;
}

.section-header h2{
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:700;
  letter-spacing:-0.5px;
  line-height:1.2;
  color:var(--white);
  margin-bottom:1rem;
}

.text-glow{
  background:linear-gradient(160deg, var(--star), var(--moon));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.section-sub{
  font-size:1.125rem;
  color:var(--text2);
  max-width:600px;
  margin:0 auto;
}

/* ════════════════════════════════════════════════════════════════
🎨 BENTO GRID — SKILLS
════════════════════════════════════════════════════════════════ */
.bento-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:1.25rem;
  max-width:1200px;
  margin:0 auto;
}

.bento-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--space-md);
  transition:all .35s var(--ease);
  overflow:hidden;
}

.bento-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,157,195,.3), transparent);
  opacity:0;
  transition:opacity .3s ease;
}

.bento-card:hover{
  background:var(--surface2);
  border-color:var(--border-h);
  transform:translateY(-4px);
  box-shadow:var(--glow-hover), var(--shadow-lg);
}

.bento-card:hover::before{
  opacity:1;
}

.bento-glow{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(139,157,195,.08), transparent 70%);
  opacity:0;
  transition:opacity .4s ease;
}

.bento-card:hover .bento-glow{
  opacity:1;
}

.bento-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(139,157,195,.12);
  border:1px solid rgba(139,157,195,.2);
  border-radius:var(--radius-sm);
  font-size:1.5rem;
  color:var(--moon);
  margin-bottom:1rem;
  transition:all .3s var(--ease);
}

.bento-card:hover .bento-icon{
  transform:scale(1.1) rotate(5deg);
}

.bento-icon-cyan{
  background:rgba(110,204,234,.12);
  border-color:rgba(110,204,234,.2);
  color:#6eccee;
}

.bento-icon-pink{
  background:rgba(239,90,111,.12);
  border-color:rgba(239,90,111,.2);
  color:#ef5a6f;
}

.bento-icon-green{
  background:rgba(109,212,160,.12);
  border-color:rgba(109,212,160,.2);
  color:#6dd4a0;
}

.bento-icon-orange{
  background:rgba(244,184,96,.12);
  border-color:rgba(244,184,96,.2);
  color:#f4b860;
}

.bento-icon-yellow{
  background:rgba(255,214,102,.12);
  border-color:rgba(255,214,102,.2);
  color:#ffd666;
}

.bento-card h3{
  font-size:1.25rem;
  font-weight:600;
  color:var(--white);
  margin-bottom:0.5rem;
  transition:color .25s ease;
}

.bento-card:hover h3{
  color:var(--star);
}

.bento-card p{
  font-size:0.9375rem;
  color:var(--text2);
  line-height:1.6;
  margin-bottom:1rem;
}

.bento-tags{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}

.bento-tags span{
  padding:0.375rem 0.75rem;
  background:var(--surface3);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  font-size:0.8125rem;
  color:var(--text);
  font-weight:500;
  transition:all .2s var(--ease);
}

.bento-tags span:hover{
  background:var(--surface4);
  border-color:var(--border-active);
  color:var(--moon);
  transform:translateY(-2px);
  box-shadow:0 0 10px rgba(139,157,195,.12);
}

.bento-pattern{
  position:absolute;
  right:-20px;
  bottom:-20px;
  width:150px;
  height:150px;
  background:radial-gradient(circle, rgba(139,157,195,.03), transparent 70%);
  border-radius:50%;
  pointer-events:none;
}

/* Grid Layout */
.bento-lg{grid-column:span 6;grid-row:span 2}
.bento-md{grid-column:span 6}
.bento-sm{grid-column:span 4}
.bento-wide{grid-column:span 8}

/* ════════════════════════════════════════════════════════════════
🚀 PROJECTS
════════════════════════════════════════════════════════════════ */
.filter-bar{
  display:flex;
  justify-content:center;
  margin-bottom:3rem;
}

.filter-track{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  padding:0.5rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.filter-btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.625rem 1.125rem;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius-xs);
  color:var(--text);
  font-size:0.9375rem;
  font-weight:500;
  cursor:pointer;
  transition:all .2s var(--ease);
}

.filter-btn:hover{
  background:var(--surface3);
  color:var(--moon);
}

.filter-btn.active{
  background:var(--surface4);
  border-color:var(--border-active);
  color:var(--white);
  box-shadow:0 0 12px rgba(139,157,195,.1);
}

.filter-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 0.375rem;
  background:var(--surface4);
  border-radius:10px;
  font-size:0.75rem;
  font-weight:600;
  color:var(--moon);
}

.filter-btn.active .filter-count{
  background:var(--moon);
  color:var(--bg);
}

.project-showcase{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:1.5rem;
  max-width:1200px;
  margin:0 auto;
}

.project-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--space-md);
  transition:all .35s var(--ease);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.card-shine{
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:linear-gradient(
    45deg,
    transparent 30%,
    rgba(139,157,195,.08) 50%,
    transparent 70%
  );
  transform:translateX(-100%);
  transition:transform .6s ease;
}

.project-card:hover .card-shine{
  transform:translateX(100%);
}

.project-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,157,195,.3), transparent);
  opacity:0;
  transition:opacity .3s ease;
}

.project-card:hover{
  background:var(--surface2);
  border-color:var(--border-h);
  transform:translateY(-6px);
  box-shadow:var(--glow-hover), var(--shadow-lg);
}

.project-card:hover::before{
  opacity:1;
}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:1rem;
}

.card-badge{
  padding:0.375rem 0.875rem;
  border-radius:var(--radius-xs);
  font-size:0.8125rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.3px;
}

.badge-ml{
  background:rgba(139,157,195,.12);
  color:var(--moon);
  border:1px solid rgba(139,157,195,.2);
}

.badge-cv{
  background:rgba(110,204,234,.12);
  color:#6eccee;
  border:1px solid rgba(110,204,234,.2);
}

.badge-genai{
  background:rgba(244,184,96,.12);
  color:var(--warning);
  border:1px solid rgba(244,184,96,.2);
}

.card-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  background:var(--surface3);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  color:var(--text2);
  font-size:1.125rem;
  text-decoration:none;
  transition:all .25s var(--ease);
}

.card-link:hover{
  background:var(--surface4);
  color:var(--moon);
  transform:translateY(-2px) rotate(5deg);
}

.card-body{
  flex:1;
  margin-bottom:1rem;
}

.card-body h3{
  font-size:1.25rem;
  font-weight:600;
  color:var(--white);
  margin-bottom:0.75rem;
}

.card-body p{
  font-size:0.9375rem;
  line-height:1.7;
  color:var(--text2);
}

.card-techs{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-bottom:1rem;
}

.card-techs span{
  padding:0.375rem 0.75rem;
  background:var(--surface3);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  font-size:0.8125rem;
  color:var(--text);
  font-weight:500;
  transition:all .2s var(--ease);
}

.card-techs span:hover{
  background:var(--surface4);
  border-color:var(--border-active);
  color:var(--moon);
  transform:translateY(-2px);
}

.card-cta{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.75rem 1.25rem;
  background:var(--surface3);
  border:1px solid var(--border-h);
  border-radius:var(--radius-sm);
  color:var(--moon);
  text-decoration:none;
  font-weight:500;
  font-size:0.9375rem;
  transition:all .25s var(--ease);
  margin-top:auto;
}

.card-cta:hover{
  background:var(--moon);
  border-color:var(--moon);
  color:var(--bg);
  gap:0.75rem;
}

.project-empty{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4rem 2rem;
  text-align:center;
}

.empty-anim{
  font-size:4rem;
  margin-bottom:1rem;
  animation:swing 2s ease-in-out infinite;
}

@keyframes swing{
  0%,100%{transform:rotate(0deg)}
  25%{transform:rotate(10deg)}
  75%{transform:rotate(-10deg)}
}

.project-empty h3{
  font-size:1.5rem;
  color:var(--white);
  margin-bottom:0.5rem;
}

.project-empty p{
  color:var(--text2);
}

/* ════════════════════════════════════════════════════════════════
⏱️ TIMELINE
════════════════════════════════════════════════════════════════ */
.timeline-container{
  max-width:900px;
  margin:0 auto;
  position:relative;
  padding:2rem 0;
}

.tl-line{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(
    180deg,
    transparent,
    var(--border-h) 10%,
    var(--border-h) 90%,
    transparent
  );
  transform:translateX(-50%);
}

.tl-item{
  position:relative;
  margin-bottom:3rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
}

.tl-right{
  grid-template-areas:"dot card";
}

.tl-right .tl-dot{
  grid-area:dot;
  justify-self:end;
  margin-right:-18px;
}

.tl-right .tl-card{
  grid-area:card;
}

.tl-left{
  grid-template-areas:"card dot";
}

.tl-left .tl-dot{
  grid-area:dot;
  justify-self:start;
  margin-left:-18px;
}

.tl-left .tl-card{
  grid-area:card;
}

.tl-dot{
  position:relative;
  width:36px;
  height:36px;
  background:var(--surface);
  border:3px solid var(--moon);
  border-radius:50%;
  box-shadow:0 0 0 6px var(--bg);
  transition:all .3s var(--ease);
  z-index:2;
}

.tl-dot-active{
  border-color:var(--accent);
  background:var(--accent);
}

.tl-dot-active .tl-dot-ping{
  position:absolute;
  inset:-8px;
  border:2px solid var(--accent);
  border-radius:50%;
  animation:ping 2s ease-in-out infinite;
}

@keyframes ping{
  0%{transform:scale(1);opacity:1}
  100%{transform:scale(1.5);opacity:0}
}

.tl-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--space-md);
  transition:all .35s var(--ease);
}

.tl-card-glow{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(139,157,195,.08), transparent 70%);
  opacity:0;
  transition:opacity .4s ease;
  border-radius:var(--radius);
  pointer-events:none;
}

.tl-card:hover{
  background:var(--surface2);
  border-color:var(--border-h);
  transform:translateY(-4px);
  box-shadow:var(--glow-hover), var(--shadow-lg);
}

.tl-card:hover .tl-card-glow{
  opacity:1;
}

.tl-card:hover ~ .tl-dot{
  background:var(--star);
  border-color:var(--star);
  box-shadow:0 0 0 8px var(--bg), 0 0 20px rgba(139,157,195,.4);
}

.tl-top{
  display:flex;
  gap:1rem;
  margin-bottom:1rem;
}

.tl-logo-box{
  flex-shrink:0;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  overflow:hidden;
}

.tl-logo-white{
  background:white;
  padding:0.5rem;
}

.tl-logo-dark{
  background:var(--surface3);
  border:1px solid var(--border);
  padding:0.5rem;
}

.tl-logo-box img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.tl-info{
  flex:1;
}

.tl-badges{
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
  margin-bottom:0.75rem;
}

.tl-badge{
  display:inline-flex;
  align-items:center;
  gap:0.375rem;
  padding:0.25rem 0.75rem;
  border-radius:100px;
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.3px;
}

.tl-badge-work{
  background:rgba(139,157,195,.12);
  color:var(--moon);
  border:1px solid rgba(139,157,195,.2);
}

.tl-badge-edu{
  background:rgba(244,184,96,.12);
  color:var(--warning);
  border:1px solid rgba(244,184,96,.2);
}

.tl-badge-current{
  background:rgba(109,212,160,.12);
  color:var(--success);
  border:1px solid rgba(109,212,160,.2);
}

.tl-info h3{
  font-size:1.25rem;
  font-weight:600;
  color:var(--white);
  margin-bottom:0.25rem;
}

.tl-role-text{
  display:block;
  font-size:0.9375rem;
  color:var(--moon);
  font-weight:500;
  margin-bottom:0.5rem;
}

.tl-meta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  font-size:0.875rem;
  color:var(--text2);
}

.tl-meta span{
  display:flex;
  align-items:center;
  gap:0.375rem;
}

.tl-list{
  list-style:none;
  margin-bottom:1rem;
}

.tl-list li{
  position:relative;
  padding-left:1.5rem;
  margin-bottom:0.75rem;
  font-size:0.9375rem;
  line-height:1.7;
  color:var(--text2);
}

.tl-list li::before{
  content:'▹';
  position:absolute;
  left:0;
  color:var(--moon);
  font-size:1.125rem;
}

.tl-techs{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}

.tl-techs span{
  padding:0.375rem 0.75rem;
  background:var(--surface3);
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  font-size:0.8125rem;
  color:var(--text);
  font-weight:500;
  transition:all .2s var(--ease);
}

.tl-techs span:hover{
  background:var(--surface4);
  border-color:var(--border-active);
  color:var(--moon);
  transform:translateY(-2px);
}

/* ════════════════════════════════════════════════════════════════
🎓 CERTIFICATES
════════════════════════════════════════════════════════════════ */
.cert-masonry{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1.25rem;
  max-width:1200px;
  margin:0 auto;
}

.cert-tile{
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.25rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  text-decoration:none;
  overflow:hidden;
  transition:all .35s var(--ease);
}

.cert-tile::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,157,195,.3), transparent);
  opacity:0;
  transition:opacity .3s ease;
}

.cert-tile:hover{
  background:var(--surface2);
  border-color:var(--border-h);
  transform:translateY(-4px);
  box-shadow:var(--glow-hover), var(--shadow-lg);
}

.cert-tile:hover::before{
  opacity:1;
}

.cert-ribbon{
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  transition:width .3s var(--ease);
}

.cert-tile:hover .cert-ribbon{
  width:6px;
}

.cert-ribbon-purple{background:var(--moon)}
.cert-ribbon-cyan{background:#6eccee}
.cert-ribbon-green{background:var(--success)}
.cert-ribbon-gold{background:var(--warning)}

.cert-content{
  display:flex;
  align-items:center;
  gap:1rem;
  flex:1;
}

.cert-icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  font-size:1.5rem;
  transition:all .3s var(--ease);
}

.cert-tile:hover .cert-icon{
  transform:scale(1.1) rotate(5deg);
}

.cert-icon-purple{
  background:rgba(139,157,195,.12);
  border:1px solid rgba(139,157,195,.2);
  color:var(--moon);
}

.cert-icon-cyan{
  background:rgba(110,204,234,.12);
  border:1px solid rgba(110,204,234,.2);
  color:#6eccee;
}

.cert-icon-green{
  background:rgba(109,212,160,.12);
  border:1px solid rgba(109,212,160,.2);
  color:var(--success);
}

.cert-icon-gold{
  background:rgba(244,184,96,.12);
  border:1px solid rgba(244,184,96,.2);
  color:var(--warning);
}

.cert-detail{
  flex:1;
}

.cert-detail h4{
  font-size:1rem;
  font-weight:600;
  color:var(--white);
  margin-bottom:0.25rem;
  line-height:1.4;
}

.cert-org{
  font-size:0.875rem;
  color:var(--text2);
}

.cert-ext{
  font-size:1.25rem;
  color:var(--text2);
  transition:all .25s var(--ease);
}

.cert-tile:hover .cert-ext{
  color:var(--moon);
  transform:translate(3px, -3px);
}

.cert-tile-achievement{
  background:linear-gradient(135deg, rgba(244,184,96,.08), rgba(244,184,96,.02));
}

.achievement-chip{
  padding:0.375rem 0.75rem;
  background:rgba(244,184,96,.12);
  border:1px solid rgba(244,184,96,.2);
  border-radius:100px;
  font-size:0.75rem;
  font-weight:600;
  color:var(--warning);
}

/* ════════════════════════════════════════════════════════════════
📧 CONTACT
════════════════════════════════════════════════════════════════ */
.contact-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  max-width:1200px;
  margin:0 auto;
  align-items:center;
}

.contact-info-side{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

.contact-wave{
  font-size:3rem;
  animation:wave 2s ease-in-out infinite;
}

@keyframes wave{
  0%,100%{transform:rotate(0deg)}
  10%,30%{transform:rotate(14deg)}
  20%,40%{transform:rotate(-8deg)}
}

.contact-info-side h3{
  font-size:1.75rem;
  font-weight:600;
  color:var(--white);
  margin-bottom:0.5rem;
}

.contact-info-side > p{
  font-size:1.0625rem;
  color:var(--text2);
  line-height:1.7;
}

.contact-methods{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.contact-method{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  text-decoration:none;
  transition:all .25s var(--ease);
}

.contact-method:hover{
  background:var(--surface2);
  border-color:var(--border-h);
  transform:translateX(4px);
}

.cm-icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(139,157,195,.12);
  border:1px solid rgba(139,157,195,.2);
  border-radius:var(--radius-sm);
  font-size:1.25rem;
  color:var(--moon);
  transition:all .3s var(--ease);
}

.cm-icon-green{
  background:rgba(109,212,160,.12);
  border-color:rgba(109,212,160,.2);
  color:var(--success);
}

.cm-icon-blue{
  background:rgba(110,204,234,.12);
  border-color:rgba(110,204,234,.2);
  color:#6eccee;
}

.cm-icon-gray{
  background:rgba(139,157,195,.12);
  border-color:rgba(139,157,195,.2);
  color:var(--moon);
}

.contact-method:hover .cm-icon{
  transform:scale(1.1) rotate(-5deg);
}

.cm-text{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

.cm-label{
  font-size:0.8125rem;
  color:var(--text2);
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-weight:600;
}

.cm-value{
  font-size:1rem;
  color:var(--white);
  font-weight:500;
}

.btn-cosmic-full{
  width:100%;
  justify-content:center;
}

.contact-visual-side{
  display:flex;
  align-items:center;
  justify-content:center;
}

.contact-globe{
  position:relative;
  width:300px;
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.globe-ring{
  position:absolute;
  border:1px solid var(--border);
  border-radius:50%;
  animation:rotate-ring 20s linear infinite;
}

.globe-ring-1{
  width:100%;
  height:100%;
  border-color:var(--border-h);
  animation-duration:15s;
}

.globe-ring-2{
  width:85%;
  height:85%;
  border-color:var(--border);
  animation-duration:20s;
  animation-direction:reverse;
}

.globe-ring-3{
  width:70%;
  height:70%;
  border-color:var(--border);
  animation-duration:25s;
}

@keyframes rotate-ring{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.globe-center{
  width:100px;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, var(--surface3), var(--surface4));
  border:2px solid var(--border-h);
  border-radius:50%;
  font-size:2.5rem;
  color:var(--moon);
  box-shadow:var(--shadow-lg);
  animation:pulse-globe 3s ease-in-out infinite;
}

@keyframes pulse-globe{
  0%,100%{transform:scale(1);box-shadow:var(--shadow-lg)}
  50%{transform:scale(1.05);box-shadow:var(--glow-hover), var(--shadow-lg)}
}

.globe-label{
  position:absolute;
  padding:0.5rem 1rem;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:100px;
  font-size:0.875rem;
  font-weight:500;
  white-space:nowrap;
  animation:float-label 4s ease-in-out infinite;
}

.gl-1{
  top:10%;
  left:0;
  color:var(--success);
  animation-delay:0s;
}

.gl-2{
  top:50%;
  right:0;
  color:var(--moon);
  animation-delay:1.5s;
}

.gl-3{
  bottom:10%;
  left:20%;
  color:var(--accent);
  animation-delay:3s;
}

@keyframes float-label{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

.footer-text{
  text-align:center;
  margin-top:4rem;
  padding-top:2rem;
  border-top:1px solid var(--border);
  color:var(--text2);
  font-size:0.9375rem;
}

.footer-text strong{
  color:var(--moon);
}

/* ════════════════════════════════════════════════════════════════
🎬 ANIMATIONS
════════════════════════════════════════════════════════════════ */
.fade-in{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}

.stagger > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

.stagger.visible > *{
  opacity:1;
  transform:translateY(0);
}

.stagger.visible > *:nth-child(1){transition-delay:.05s}
.stagger.visible > *:nth-child(2){transition-delay:.1s}
.stagger.visible > *:nth-child(3){transition-delay:.15s}
.stagger.visible > *:nth-child(4){transition-delay:.2s}
.stagger.visible > *:nth-child(5){transition-delay:.25s}
.stagger.visible > *:nth-child(6){transition-delay:.3s}
.stagger.visible > *:nth-child(7){transition-delay:.35s}
.stagger.visible > *:nth-child(8){transition-delay:.4s}

/* ════════════════════════════════════════════════════════════════
✨ SCROLLBAR
════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar{
  width:6px;
  height:6px;
}

::-webkit-scrollbar-track{
  background:var(--bg);
}

::-webkit-scrollbar-thumb{
  background:var(--dim);
  border-radius:4px;
  transition:background .2s ease;
}

::-webkit-scrollbar-thumb:hover{
  background:var(--muted);
}

::-webkit-scrollbar-thumb:active{
  background:var(--text2);
}

/* ════════════════════════════════════════════════════════════════
🎨 SELECTION & FOCUS
════════════════════════════════════════════════════════════════ */
::selection{
  background:rgba(139,157,195,.25);
  color:var(--white);
}

a:focus-visible,
button:focus-visible{
  outline:none;
  box-shadow:var(--glow-focus);
}

/* ════════════════════════════════════════════════════════════════
📱 RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .bento-lg{grid-column:span 12}
  .bento-md{grid-column:span 6}
  .bento-sm{grid-column:span 6}
  .bento-wide{grid-column:span 12}
  
  .hero-content{
    grid-template-columns:1fr;
    gap:3rem;
  }
  
  .hero-right{
    max-width:500px;
    margin:0 auto;
  }
  
  .contact-split{
    grid-template-columns:1fr;
    gap:3rem;
  }
  
  .contact-globe{
    width:250px;
    height:250px;
  }
}

@media(max-width:768px){
  :root{
    --space-xl:3rem;
    --space-2xl:4rem;
  }
  
  .nav-links{
    position:fixed;
    top:70px;
    left:0;
    right:0;
    flex-direction:column;
    background:rgba(7,11,21,.98);
    backdrop-filter:blur(24px);
    padding:2rem;
    gap:0.5rem;
    transform:translateY(-120%);
    opacity:0;
    transition:all .3s var(--ease);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-xl);
  }
  
  .nav-links.open{
    transform:translateY(0);
    opacity:1;
  }
  
  .nav-link{
    width:100%;
    justify-content:flex-start;
  }
  
  .nav-hamburger{
    display:flex;
  }
  
  section{
    padding:var(--space-xl) max(5vw, 1.5rem);
  }
  
  .bento-grid{
    grid-template-columns:1fr;
  }
  
  .bento-lg,
  .bento-md,
  .bento-sm,
  .bento-wide{
    grid-column:span 1;
  }
  
  .project-showcase{
    grid-template-columns:1fr;
  }
  
  .filter-track{
    overflow-x:auto;
    justify-content:flex-start;
  }
  
  .timeline-container{
    padding-left:2rem;
  }
  
  .tl-line{
    left:0.5rem;
  }
  
  .tl-item{
    grid-template-columns:1fr;
    grid-template-areas:"card";
  }
  
  .tl-right,
  .tl-left{
    grid-template-areas:"card";
  }
  
  .tl-dot{
    position:absolute;
    left:-1.8rem;
    top:1.5rem;
    margin:0 !important;
  }
  
  .cert-masonry{
    grid-template-columns:1fr;
  }
  
  .float-pill{
    display:none;
  }
}

@media(max-width:480px){
  .hero{
    padding:6rem 1.5rem 3rem;
  }
  
  .title-line-2{
    flex-direction:column;
    gap:0;
  }
  
  .hero-chips{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  
  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }
  
  .hero-social{
    justify-content:center;
    margin-left:0;
  }
  
  .btn-cosmic,
  .btn-outline{
    width:100%;
    justify-content:center;
  }
}

/* ════════════════════════════════════════════════════════════════
✨ PERFORMANCE
════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}