:root {
  --bg: #050810;
  --bg2: #080d1a;
  --bg3: #0b1120;
  --cyan: #00ffe7;
  --magenta: #ff00c8;
  --purple: #9b5de5;
  --yellow: #f5e642;
  --dim: #1a2340;
  --text: #c8d8f0;
  --muted: #8398b8;
  --border: rgba(0, 255, 231, 0.15);
  --glow-c: 0 0 20px rgba(0, 255, 231, 0.4);
  --glow-m: 0 0 20px rgba(255, 0, 200, 0.4);
  --primary-color: #f0f7ed;
  --secondary-color: black;
  --glitch-steps: 20;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Rajdhani", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* Only hide cursor on non-touch devices */
@media (hover: hover) {
  body {
    cursor: none;
  }
  .cursor,
  .cursor-ring {
    display: block;
  }
}
@media (hover: none) {
  .cursor,
  .cursor-ring {
    display: none;
  }
}

/* CUSTOM CURSOR */
.cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background: var(--cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 8500;
  mix-blend-mode: screen;
  transition: transform 0.1s;
  box-shadow:
    0 0 10px var(--cyan),
    0 0 20px var(--cyan);
}
.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 255, 231, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 8000;
  transition:
    transform 0.15s,
    width 0.2s,
    height 0.2s;
}

/* SCANLINES */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.07) 2px,
    rgba(0, 0, 0, 0.07) 4px
  );
  pointer-events: none;
  z-index: 4000;
}

/* ─── NAV ─────────────────────────────────── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: rgba(5, 8, 16, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-family: "Orbitron", monospace;
  font-size: 1rem;
  font-weight: 900;
  color: var(--cyan);
  text-shadow: var(--glow-c);
  letter-spacing: 0.2em;
  text-decoration: none;
}
.nav-logo span {
  color: var(--magenta);
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.90rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.2s;
  position: relative;
}
.nav-links a::before {
  content: "// ";
  color: var(--cyan);
  opacity: 0;
  transition: opacity 0.2s;
}
.nav-links a:hover {
  color: var(--cyan);
}
.nav-links a:hover::before {
  opacity: 1;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1001;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cyan);
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 16, 0.97);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a {
  font-family: "Orbitron", monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.mobile-menu a:hover {
  color: var(--cyan);
}

/* ─── HERO ─────────────────────────────────── */
#hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 7rem 1.5rem 4rem;
  overflow: hidden;
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 255, 231, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 231, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
}
.hero-glow-orb {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(155, 93, 229, 0.15) 0%,
    transparent 70%
  );
  top: -100px;
  right: -100px;
  pointer-events: none;
}
.hero-glow-orb2 {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(
    circle,
    rgba(255, 0, 200, 0.08) 0%,
    transparent 70%
  );
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.hero-label {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards 0.2s;
}
.hero-label::before {
  content: "> ";
}

.hero-name {
  font-family: "Orbitron", monospace;
  font-size: clamp(2.4rem, 9vw, 6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards 0.4s;
}
.hero-name .line2 {
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 255, 231, 0.6);
}

.hero-title {
  font-family: "Rajdhani", sans-serif;
  font-size: clamp(1rem, 3vw, 1.6rem);
  font-weight: 500;
  color: var(--magenta);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards 0.6s;
}

.hero-bio {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.85;
  color: var(--text);
  max-width: 560px;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards 0.8s;
  margin-bottom: 2.5rem;
}
.hero-bio strong {
  color: var(--cyan);
  font-weight: 600;
}

.hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards 1s;
}
.stat-num {
  font-family: "Orbitron", monospace;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--cyan);
  text-shadow: var(--glow-c);
  line-height: 1;
}
.stat-label {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards 1.1s;
}

.btn {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border: 1px solid;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.btn:hover::before {
  transform: translateX(0);
}
.btn span {
  position: relative;
  z-index: 1;
}
.btn-primary {
  border-color: var(--cyan);
  color: var(--bg);
  background: var(--cyan);
  box-shadow: var(--glow-c);
}
.btn-primary:hover {
  box-shadow: 0 0 40px rgba(0, 255, 231, 0.6);
  background: transparent;
  color: var(--cyan);
}
.btn-outline {
  border-color: rgba(0, 255, 231, 0.3);
  color: var(--cyan);
  background: transparent;
}
.btn-outline::before {
  background: rgba(0, 255, 231, 0.07);
}
.btn-outline:hover {
  border-color: var(--cyan);
  box-shadow: var(--glow-c);
}

/* Terminal - desktop only */
.hero-terminal {
  display: none;
  position: absolute;
  right: 3rem;
  top: 20%;
  transform: translateY(-50%);
  width: 360px;
  background: rgba(8, 13, 26, 0.9);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.80rem;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards 1.3s;
}
.terminal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: rgba(0, 255, 231, 0.05);
  border-bottom: 1px solid var(--border);
}
.t-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.t-red {
  background: #ff5f57;
}
.t-yellow {
  background: #febc2e;
}
.t-green {
  background: #28c840;
}
.terminal-title {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}
.terminal-body {
  padding: 1.2rem;
  line-height: 2;
  color: var(--text);
}
.t-prompt {
  color: var(--cyan);
}
.t-cmd {
  color: #fff;
}
.t-out {
  color: var(--muted);
}
.t-val {
  color: var(--magenta);
}
.t-green-text {
  color: #28c840;
}
.t-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--cyan);
  animation: blink 1s step-end infinite;
  vertical-align: middle;
  margin-left: 2px;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ─── SECTIONS ─────────────────────────────── */
section {
  padding: 5rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.section-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 3rem;
}
.section-num {
  font-family: "Orbitron", monospace;
  font-size: 0.7rem;
  color: var(--cyan);
  letter-spacing: 0.3em;
}
.section-title {
  font-family: "Orbitron", monospace;
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: 0.3;
}

/* ─── EXPERIENCE ─────────────────────────────── */
.exp-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}
.exp-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.exp-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.exp-date {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.7rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
}
.exp-company {
  font-size: 1.2rem;
  font-weight: 600;
  /* color: var(--muted); */
  color: #fff;
  letter-spacing: 0.05em;
}

.exp-link {
  text-decoration: none;
  color: #fff;
  transition: color 0.2s;

}

.exp-role {
  font-family: "Orbitron", monospace;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.4rem;
}
.exp-tag {
  display: inline-block;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--magenta);
  color: var(--magenta);
  margin-bottom: 1rem;
}

.exp-points {
  list-style: none;
}
.exp-points li {
  font-size: clamp(0.9rem, 2vw, 1rem);
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 0.5rem;
  padding-left: 1.2rem;
  position: relative;
}
.exp-points li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--cyan);
}
.exp-highlight {
  color: var(--cyan);
  font-weight: 600;
}

/* ─── PROJECTS ─────────────────────────────── */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.project-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.3s,
    transform 0.3s;
}
.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.project-card:hover {
  border-color: rgba(0, 255, 231, 0.3);
  transform: translateY(-3px);
}
.project-card:hover::before {
  transform: scaleX(1);
}

/* Screenshot placeholder */
.project-screenshot {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}
.project-screenshot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 255, 231, 0.03) 0%,
    rgba(255, 0, 200, 0.03) 100%
  );
}
.project-screenshot-icon {
  font-size: 2rem;
  opacity: 0.25;
}
.project-screenshot-label {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ── Screenshot images ───────────────────────────────────────────────── */
/* Consistent-height container so cards stay aligned in the grid */
.project-screenshot-wrap {
  width: 100%;
  height: 220px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Soft gradient so edge pixels blend into the card body */
.project-screenshot-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, var(--bg2) 100%);
  pointer-events: none;
}

/* Portrait phone screenshots — show full image, centred */
.project-screenshot-img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
}

/* Landscape / website screenshots — fill width */
.project-screenshot-img.landscape {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@media (min-width: 600px) {
  .project-screenshot-wrap { height: 240px; }
}
@media (min-width: 900px) {
  .project-screenshot-wrap { height: 260px; }
}

/* Backward-compat portrait placeholder class */
.project-screenshot.portrait {
  aspect-ratio: 9/16;
  max-height: 280px;
}

.project-body {
  padding: 1.5rem;
}
/* .project-corner { position: absolute; top: 0; right: 0; width: 36px; height: 36px; border-left: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); } */
.project-tag {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--magenta);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.project-name {
  font-family: "Orbitron", monospace;
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.7rem;
  line-height: 1.3;
}
.project-desc {
  font-size: clamp(0.9rem, 2vw, 0.95rem);
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 1.2rem;
}
.project-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.project-stat {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
}
.project-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.stack-pill {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.62rem;
  padding: 0.25rem 0.65rem;
  background: rgba(0, 255, 231, 0.05);
  border: 1px solid rgba(0, 255, 231, 0.15);
  color: var(--muted);
  letter-spacing: 0.1em;
}
.project-links {
  display: flex;
  gap: 1rem;
}
.project-link {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--cyan);
  text-decoration: none;
  text-transform: uppercase;
  transition: text-shadow 0.2s;
}
.project-link:hover {
  text-shadow: var(--glow-c);
}
.project-link-m {
  color: var(--magenta);
}
.project-link-m:hover {
  text-shadow: var(--glow-m);
}

/* ─── SKILLS ─────────────────────────────── */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.skill-group {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 1.25rem;
}
.skill-group-name {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.skill-list {
  list-style: none;
}
.skill-list li {
  font-size: clamp(0.9rem, 2vw, 0.95rem);
  color: var(--text);
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.skill-list li::before {
  content: "◆";
  font-size: 0.4rem;
  color: var(--purple);
  flex-shrink: 0;
}

/* ─── BLOG ─────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.blog-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
  text-decoration: none;
  display: block;
}
.blog-card:hover {
  border-color: rgba(155, 93, 229, 0.4);
}
.blog-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.blog-card:hover::after {
  transform: scaleX(1);
}
.blog-date {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
}
.blog-title {
  font-family: "Rajdhani", sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.25rem);
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.7rem;
  line-height: 1.4;
}
.blog-excerpt {
  font-size: clamp(0.9rem, 2vw, 0.92rem);
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.blog-read-more {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.62rem;
  color: var(--purple);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ─── CONTACT ─────────────────────────────── */
#contact-section {
  padding: 5rem 1.5rem;
  position: relative;
}
.contact-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

.contact-tagline {
  font-family: "Orbitron", monospace;
  font-size: clamp(1.2rem, 3vw, 1.9rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 1.25rem;
}
.contact-tagline span {
  color: var(--cyan);
}
.contact-desc {
  font-size: clamp(0.95rem, 2vw, 1rem);
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 2rem;
}
.contact-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  border: 1px solid transparent;
  transition:
    border-color 0.2s,
    background 0.2s,
    color 0.2s;
}
.contact-link:hover {
  border-color: var(--border);
  background: rgba(0, 255, 231, 0.03);
  color: var(--cyan);
}
.contact-link-icon {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
  color: var(--cyan);
  letter-spacing: 0.1em;
  min-width: 75px;
}
.contact-link-val {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.85rem;
}

/* FORM */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-label {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
}
.form-input,
.form-textarea {
  background: rgba(0, 255, 231, 0.03);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "Share Tech Mono", monospace;
  font-size: 0.9rem;
  padding: 0.9rem 1rem;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  resize: none;
  width: 100%;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
.form-input:focus,
.form-textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 15px rgba(0, 255, 231, 0.1);
}
.form-textarea {
  height: 130px;
}

.form-submit {
  align-self: flex-start;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  background: transparent;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
  position: relative;
}
.form-submit:hover:not(:disabled) {
  background: var(--cyan);
  color: var(--bg);
  box-shadow: var(--glow-c);
}
.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-status {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  padding: 0.75rem 1rem;
  border: 1px solid;
  display: none;
}
.form-status.success {
  color: #28c840;
  border-color: rgba(40, 200, 64, 0.3);
  background: rgba(40, 200, 64, 0.05);
  display: block;
}
.form-status.error {
  color: var(--magenta);
  border-color: rgba(255, 0, 200, 0.3);
  background: rgba(255, 0, 200, 0.05);
  display: block;
}

/* ─── FOOTER ─────────────────────────────── */
footer {
  border-top: 1px solid var(--border);
  padding: 2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-copy,
.footer-sig {
  font-family: "Share Tech Mono", monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.footer-sig span {
  color: var(--cyan);
}
/* ─── ANIMATIONS ─────────────────────────────── */
/* --------------------------------------------------------------- *
    1. NEON GLOW PULSE (main glow breathing effect)
    --------------------------------------------------------------- */
@keyframes neon-glow {
  0% {
    box-shadow: 0 0 4px #ff0099, inset 0 0 1px #ff0099;
    filter: brightness(0.97);
  }
  100% {
    box-shadow: 0 0 7px #ff0099, inset 0 0 3px #ff0099;
    filter: brightness(1.05);
  }
}
/* ---------------------------------------------------------------
    2. RANDOM MICRO-FLICKER (distant-server-room energy noise)
    --------------------------------------------------------------- */
@keyframes micro-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 0.97; }
  93% { opacity: 0.85; }
  94% { opacity: 0.75; }
  96% { opacity: 0.93; }
  98% { opacity: 0.70; }
}
/* ---------------------------------------------------------------
    3. POWER HICCUP / BROWNOUT
    --------------------------------------------------------------- */
@keyframes power-hiccup {
  0%, 90% {
    filter: opacity(1) brightness(1);
  }
  91% { filter: opacity(0.25) brightness(0.45); }
  93% { filter: opacity(0.9) brightness(0.9); }
  94% { filter: opacity(0.15) brightness(0.35); }
  95% { filter: opacity(0.55) brightness(0.8); }
  97% { filter: opacity(0.05) brightness(0.15); }
  100% { filter: opacity(1) brightness(1); }
}
/* ---------------------------------------------------------------
    4. CRT VERTICAL SCAN DRIFT (subtle vertical jitter)
    --------------------------------------------------------------- */
@keyframes crt-drift {
  0%   { transform: translateY(0px); }
  30%  { transform: translateY(0.3px); }
  60%  { transform: translateY(-0.4px); }
  85%  { transform: translateY(0.2px); }
  100% { transform: translateY(0px); }
}
/* ---------------------------------------------------------------
    5. BORDER WARP (melted plastic casing effect)
    --------------------------------------------------------------- */
@keyframes border-warp {
  0% {
    border-radius: 4px;
    clip-path: inset(0 round 4px);
  }
  25% {
    clip-path: inset(0.3px -0.5px 0px 0.5px round 5px);
  }
  50% {
    clip-path: inset(0px 0.3px 0.4px -0.3px round 3px);
  }
  75% {
    clip-path: inset(-0.4px 0px 0.2px 0px round 4px);
  }
  100% {
    clip-path: inset(0 round 4px);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── GLITCH EFFECT (clip-rect scan) ──────────────────────── */
.glitch {
  position: relative;
  color: var(--primary-color);
  font-family: "Exo", sans-serif;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transform: scale3d(1, 1, 1);
  font-size: clamp(36px, 4vw, 54px) !important;
  text-shadow:
    -2px 0 #00ffff,
    2px 0 #ff0000;
  /* FIX: Critical for mobile */
  max-width: 100%;
  word-wrap: break-word;
  display: inline-block;
  will-change: transform;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  width: 100%;
}
/* Magenta layer — always animating */
.glitch::before {
  color: var(--magenta);
  left: 2px;
  animation: glitch-scan-before 6s steps(1) infinite;
}
/* Cyan layer — always animating, offset phase */
.glitch::after {
  color: var(--cyan);
  left: -2px;
  animation: glitch-scan-after 6s steps(1) infinite;
}

@keyframes glitch-scan-before {
  0% {
    clip: rect(9999px, 9999px, 9999px, 0);
    transform: translate(0);
  }
  5% {
    clip: rect(42px, 9999px, 44px, 0);
    transform: translate(-3px, 0);
  }
  7.5% {
    clip: rect(15px, 9999px, 17px, 0);
    transform: translate(2px, 0);
  }
  10% {
    clip: rect(70px, 9999px, 72px, 0);
    transform: translate(-2px, 0);
  }
  12.5% {
    clip: rect(5px, 9999px, 7px, 0);
    transform: translate(3px, 0);
  }
  15% {
    clip: rect(88px, 9999px, 90px, 0);
    transform: translate(-1px, 0);
  }
  17.5% {
    clip: rect(33px, 9999px, 35px, 0);
    transform: translate(2px, 0);
  }
  20% {
    clip: rect(60px, 9999px, 62px, 0);
    transform: translate(-3px, 0);
  }
  22.5% {
    clip: rect(22px, 9999px, 24px, 0);
    transform: translate(1px, 0);
  }
  25% {
    clip: rect(77px, 9999px, 79px, 0);
    transform: translate(-2px, 0);
  }
  27.5% {
    clip: rect(48px, 9999px, 50px, 0);
    transform: translate(3px, 0);
  }
  30% {
    clip: rect(11px, 9999px, 13px, 0);
    transform: translate(-1px, 0);
  }
  32.5% {
    clip: rect(77px, 9999px, 79px, 0);
    transform: translate(2px, 0);
  }
  35% {
    clip: rect(22px, 9999px, 24px, 0);
    transform: translate(-3px, 0);
  }
  37.5% {
    clip: rect(65px, 9999px, 67px, 0);
    transform: translate(1px, 0);
  }
  40% {
    clip: rect(10px, 9999px, 12px, 0);
    transform: translate(-2px, 0);
  }
  42.5% {
    clip: rect(55px, 9999px, 57px, 0);
    transform: translate(3px, 0);
  }
  45% {
    clip: rect(30px, 9999px, 32px, 0);
    transform: translate(-1px, 0);
  }
  47.5% {
    clip: rect(85px, 9999px, 87px, 0);
    transform: translate(2px, 0);
  }
  50% {
    clip: rect(48px, 9999px, 50px, 0);
    transform: translate(-3px, 0);
  }
  52.5% {
    clip: rect(18px, 9999px, 20px, 0);
    transform: translate(1px, 0);
  }
  55% {
    clip: rect(73px, 9999px, 75px, 0);
    transform: translate(-2px, 0);
  }
  57.5% {
    clip: rect(3px, 9999px, 5px, 0);
    transform: translate(3px, 0);
  }
  60% {
    clip: rect(92px, 9999px, 94px, 0);
    transform: translate(-1px, 0);
  }
  62.5% {
    clip: rect(28px, 9999px, 30px, 0);
    transform: translate(2px, 0);
  }
  65% {
    clip: rect(68px, 9999px, 70px, 0);
    transform: translate(-3px, 0);
  }
  67.5% {
    clip: rect(17px, 9999px, 19px, 0);
    transform: translate(1px, 0);
  }
  70% {
    clip: rect(58px, 9999px, 60px, 0);
    transform: translate(-2px, 0);
  }
  72.5% {
    clip: rect(40px, 9999px, 42px, 0);
    transform: translate(3px, 0);
  }
  75% {
    clip: rect(82px, 9999px, 84px, 0);
    transform: translate(-1px, 0);
  }
  77.5% {
    clip: rect(7px, 9999px, 9px, 0);
    transform: translate(2px, 0);
  }
  80% {
    clip: rect(32px, 9999px, 34px, 0);
    transform: translate(-3px, 0);
  }
  82.5% {
    clip: rect(75px, 9999px, 77px, 0);
    transform: translate(1px, 0);
  }
  85% {
    clip: rect(45px, 9999px, 47px, 0);
    transform: translate(-2px, 0);
  }
  87.5% {
    clip: rect(2px, 9999px, 4px, 0);
    transform: translate(3px, 0);
  }
  90% {
    clip: rect(88px, 9999px, 90px, 0);
    transform: translate(-1px, 0);
  }
  92.5% {
    clip: rect(37px, 9999px, 39px, 0);
    transform: translate(2px, 0);
  }
  95% {
    clip: rect(62px, 9999px, 64px, 0);
    transform: translate(-3px, 0);
  }
  97.5% {
    clip: rect(20px, 9999px, 22px, 0);
    transform: translate(1px, 0);
  }
  100% {
    clip: rect(9999px, 9999px, 9999px, 0);
    transform: translate(0);
  }
}

@keyframes glitch-scan-after {
  0% {
    clip: rect(9999px, 9999px, 9999px, 0);
    transform: translate(0);
  }
  6% {
    clip: rect(55px, 9999px, 57px, 0);
    transform: translate(3px, 0);
  }
  9% {
    clip: rect(28px, 9999px, 30px, 0);
    transform: translate(-2px, 0);
  }
  11.5% {
    clip: rect(82px, 9999px, 84px, 0);
    transform: translate(1px, 0);
  }
  14% {
    clip: rect(14px, 9999px, 16px, 0);
    transform: translate(-3px, 0);
  }
  16.5% {
    clip: rect(67px, 9999px, 69px, 0);
    transform: translate(2px, 0);
  }
  19% {
    clip: rect(38px, 9999px, 40px, 0);
    transform: translate(-1px, 0);
  }
  21.5% {
    clip: rect(91px, 9999px, 93px, 0);
    transform: translate(3px, 0);
  }
  24% {
    clip: rect(6px, 9999px, 8px, 0);
    transform: translate(-2px, 0);
  }
  26.5% {
    clip: rect(50px, 9999px, 52px, 0);
    transform: translate(1px, 0);
  }
  29% {
    clip: rect(74px, 9999px, 76px, 0);
    transform: translate(-3px, 0);
  }
  31.5% {
    clip: rect(19px, 9999px, 21px, 0);
    transform: translate(2px, 0);
  }
  34% {
    clip: rect(44px, 9999px, 46px, 0);
    transform: translate(-1px, 0);
  }
  36.5% {
    clip: rect(80px, 9999px, 82px, 0);
    transform: translate(3px, 0);
  }
  39% {
    clip: rect(25px, 9999px, 27px, 0);
    transform: translate(-2px, 0);
  }
  41.5% {
    clip: rect(60px, 9999px, 62px, 0);
    transform: translate(1px, 0);
  }
  44% {
    clip: rect(8px, 9999px, 10px, 0);
    transform: translate(-3px, 0);
  }
  46.5% {
    clip: rect(95px, 9999px, 97px, 0);
    transform: translate(2px, 0);
  }
  49% {
    clip: rect(35px, 9999px, 37px, 0);
    transform: translate(-1px, 0);
  }
  51.5% {
    clip: rect(70px, 9999px, 72px, 0);
    transform: translate(3px, 0);
  }
  54% {
    clip: rect(12px, 9999px, 14px, 0);
    transform: translate(-2px, 0);
  }
  56.5% {
    clip: rect(85px, 9999px, 87px, 0);
    transform: translate(1px, 0);
  }
  59% {
    clip: rect(48px, 9999px, 50px, 0);
    transform: translate(-3px, 0);
  }
  61.5% {
    clip: rect(3px, 9999px, 5px, 0);
    transform: translate(2px, 0);
  }
  64% {
    clip: rect(77px, 9999px, 79px, 0);
    transform: translate(-1px, 0);
  }
  66.5% {
    clip: rect(22px, 9999px, 24px, 0);
    transform: translate(3px, 0);
  }
  69% {
    clip: rect(63px, 9999px, 65px, 0);
    transform: translate(-2px, 0);
  }
  71.5% {
    clip: rect(17px, 9999px, 19px, 0);
    transform: translate(1px, 0);
  }
  74% {
    clip: rect(90px, 9999px, 92px, 0);
    transform: translate(-3px, 0);
  }
  76.5% {
    clip: rect(41px, 9999px, 43px, 0);
    transform: translate(2px, 0);
  }
  79% {
    clip: rect(58px, 9999px, 60px, 0);
    transform: translate(-1px, 0);
  }
  81.5% {
    clip: rect(29px, 9999px, 31px, 0);
    transform: translate(3px, 0);
  }
  84% {
    clip: rect(73px, 9999px, 75px, 0);
    transform: translate(-2px, 0);
  }
  86.5% {
    clip: rect(15px, 9999px, 17px, 0);
    transform: translate(1px, 0);
  }
  89% {
    clip: rect(52px, 9999px, 54px, 0);
    transform: translate(-3px, 0);
  }
  91.5% {
    clip: rect(87px, 9999px, 89px, 0);
    transform: translate(2px, 0);
  }
  94% {
    clip: rect(33px, 9999px, 35px, 0);
    transform: translate(-1px, 0);
  }
  96.5% {
    clip: rect(68px, 9999px, 70px, 0);
    transform: translate(3px, 0);
  }
  99% {
    clip: rect(10px, 9999px, 12px, 0);
    transform: translate(-2px, 0);
  }
  100% {
    clip: rect(9999px, 9999px, 9999px, 0);
    transform: translate(0);
  }
}

/* Mobile: tighten font size to prevent overflow */
@media (max-width: 600px) {
  .glitch,
  .glitch::before,
  .glitch::after {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(2rem, 9vw, 3.5rem) !important;
  }
}
/* ─── RESPONSIVE ─────────────────────────────── */
@media (min-width: 600px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  nav {
    padding: 1.2rem 3rem;
  }
  #hero {
    padding: 0 3rem;
  }
  section {
    padding: 6rem 3rem;
  }
  #contact-section {
    padding: 6rem 3rem;
  }

  .nav-links {
    display: flex !important;
  }
  .nav-hamburger {
    display: none !important;
  }

  .hero-terminal {
    display: block;
  }
  .skills-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }

  .exp-item {
    grid-template-columns: 180px 1fr;
    gap: 2rem;
    padding-left: 0;
    position: relative;
  }
  .exp-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  .exp-right {
    padding-left: 2.5rem;
    border-left: 1px solid rgba(0, 255, 231, 0.1);
  }
}

@media (max-width: 899px) {
  .nav-links {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }
}

@media (min-width: 1100px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}