/* ══ TERMINAL ══ */
.terminal-window {
  background: var(--p1); border: 1px solid var(--border);
  border-radius: var(--rl); overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.025);
}
.term-header {
  display: flex; align-items: center; gap: .8rem;
  padding: .65rem 1.2rem; background: var(--p2);
  border-bottom: 1px solid var(--border);
}
.term-dots { display: flex; gap: .4rem; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.dot.red    { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green-dot { background: #28c840; }
.term-title { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.term-body  { padding: 1.4rem; font-family: var(--mono); font-size: .8rem; }
.prompt { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; flex-wrap: wrap; }
.cursor { color: var(--cyan); animation: blink .85s step-end infinite; }
.cursor-sm { color: var(--cyan); font-size: .85rem; animation: blink .85s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ══ NEOFETCH ══ */
.neofetch { display: flex; gap: 1.5rem; margin: .8rem 0; }
.neo-photo { width: 90px; height: 90px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); filter: saturate(.9) contrast(1.05); display: block; }
.neo-info { flex: 1; min-width: 0; }
.neo-user { font-size: .88rem; font-weight: 700; color: var(--text); margin-bottom: .1rem; }
.neo-sep  { font-size: .65rem; color: var(--cyan); margin-bottom: .4rem; }
.neo-row  { font-size: .72rem; margin-bottom: .15rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.neo-k    { color: var(--cyan); font-weight: 700; min-width: 65px; }
.neo-colors { display: flex; gap: 3px; margin-top: .7rem; }
.neo-colors span { width: 16px; height: 16px; border-radius: 3px; }

/* ══ HERO ══ */
#hero {
  min-height: 100vh;
  padding: calc(24px + 56px + 5rem) 2.5rem 5rem;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
#particle-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
  position: relative; z-index: 3;
}
.hero-right {}
.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; color: var(--green);
  background: rgba(0,255,157,.06); border: 1px solid rgba(0,255,157,.2);
  padding: .3rem .95rem; border-radius: 100px; margin-bottom: 1.5rem;
}

/* GLITCH EFFECT */
.glitch { position: relative; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; width: 100%;
  font-size: inherit; font-weight: inherit; line-height: inherit;
  letter-spacing: inherit; color: inherit;
}
.glitch::before {
  left: 2px; text-shadow: -2px 0 var(--red);
  clip-path: polygon(0 20%, 100% 20%, 100% 35%, 0 35%);
  animation: glitch-1 4s infinite linear;
}
.glitch::after {
  left: -2px; text-shadow: 2px 0 var(--cyan);
  clip-path: polygon(0 65%, 100% 65%, 100% 80%, 0 80%);
  animation: glitch-2 4s infinite linear;
}
@keyframes glitch-1 {
  0%,90%,100%{clip-path:polygon(0 20%,100% 20%,100% 35%,0 35%);transform:translateX(0)}
  92%{clip-path:polygon(0 10%,100% 10%,100% 30%,0 30%);transform:translateX(-3px)}
  94%{clip-path:polygon(0 50%,100% 50%,100% 65%,0 65%);transform:translateX(3px)}
  96%{clip-path:polygon(0 5%,100% 5%,100% 20%,0 20%);transform:translateX(-2px)}
  98%{clip-path:polygon(0 75%,100% 75%,100% 90%,0 90%);transform:translateX(2px)}
}
@keyframes glitch-2 {
  0%,93%,100%{clip-path:polygon(0 65%,100% 65%,100% 80%,0 80%);transform:translateX(0)}
  95%{clip-path:polygon(0 40%,100% 40%,100% 55%,0 55%);transform:translateX(3px)}
  97%{clip-path:polygon(0 80%,100% 80%,100% 95%,0 95%);transform:translateX(-3px)}
  99%{clip-path:polygon(0 25%,100% 25%,100% 40%,0 40%);transform:translateX(2px)}
}

.hero-name {
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  font-weight: 900; line-height: 1;
  letter-spacing: -2px; margin-bottom: 1rem;
}
.hero-typing-wrap {
  font-size: .9rem; margin-bottom: 1rem; min-height: 1.6rem;
}
.hero-desc {
  color: var(--text); font-size: .9rem; opacity: .8;
  max-width: 440px; margin-bottom: 2rem; line-height: 1.78;
}

/* OS Badges */
.os-badges { display: flex; gap: .6rem; margin-bottom: 2rem; flex-wrap: wrap; }
.os-badge {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .9rem;
  background: var(--p1); border: 1px solid var(--border);
  border-radius: 8px; font-family: var(--mono); font-size: .75rem;
  color: var(--text); cursor: default; transition: all .2s;
}
.os-badge:nth-child(1) i { color: var(--yellow); }
.os-badge:nth-child(2) i { color: #ccc; }
.os-badge:nth-child(3) i { color: var(--cyan); }
.os-badge:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }

/* Buttons */
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .75rem 1.7rem;
  background: var(--cyan); color: #011824;
  font-weight: 700; font-size: .86rem;
  border: none; border-radius: 8px;
  text-decoration: none; cursor: pointer; transition: all .25s;
  box-shadow: 0 0 24px rgba(0,212,255,.25);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 48px rgba(0,212,255,.5); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .75rem 1.7rem;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: .86rem; font-weight: 500;
  text-decoration: none; cursor: pointer; transition: all .25s;
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-3px); }

/* Hero scroll hint */
.hero-scroll-hint {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  z-index: 3; animation: float-hint 3s ease-in-out infinite;
}
.scroll-arrow {
  width: 20px; height: 20px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}
@keyframes float-hint { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }

/* Hero reveal animations */
.reveal-hero { animation: fadeUpIn .9s .8s both; }
.reveal-hero-r { animation: fadeUpIn .9s 1s both; }
@keyframes fadeUpIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} }

/* ══ METRICS ══ */
#metrics {
  background: var(--p1); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); padding: 2.2rem 2.5rem;
}
.metrics-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.metric-card {
  text-align: center; padding: 1.4rem 1rem;
  background: var(--p2); border: 1px solid var(--border);
  border-radius: var(--r); position: relative; overflow: hidden;
  transition: border-color .25s;
}
.metric-card:hover { border-color: rgba(0,212,255,.35); }
.metric-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,212,255,.04) 100%);
}
.metric-val  { font-family: var(--mono); font-size: 2rem; font-weight: 800; color: var(--cyan); }
.metric-unit { font-family: var(--mono); font-size: 1rem; color: var(--cyan); }
.metric-lbl  { display: block; font-size: .7rem; color: var(--muted); margin-top: .4rem; }