/* ========================================
   CYBERPUNK PERSONAL WEBSITE — STYLES
   Blue & Pink Theme
   ======================================== */

/* --- CSS Variables --- */
:root {
  --blue: #00d4ff;
  --blue-dim: #0a8ab0;
  --blue-glow: rgba(0, 212, 255, 0.4);
  --pink: #ff2d95;
  --pink-dim: #b0206a;
  --pink-glow: rgba(255, 45, 149, 0.4);
  --violet: #b44aff;
  --violet-glow: rgba(180, 74, 255, 0.3);
  --bg-dark: #0a0a12;
  --bg-card: #10101c;
  --bg-card-hover: #161628;
  --bg-section-alt: #0c0c18;
  --text-primary: #e0e0f0;
  --text-secondary: #8888aa;
  --text-muted: #555570;
  --border: #1a1a30;
  --font-display: "Orbitron", sans-serif;
  --font-body: "Rajdhani", sans-serif;
  --font-mono: "Share Tech Mono", monospace;
  --nav-height: 70px;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 50%, rgba(180, 74, 255, 0.015) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 100%, rgba(255, 45, 149, 0.018) 0%, transparent 45%);
  background-attachment: fixed;
}

::selection {
  background: var(--pink);
  color: var(--bg-dark);
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover {
  color: var(--pink);
}

img {
  max-width: 100%;
  display: block;
}

/* --- Scanlines Overlay --- */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* --- Ambient Glow Orbs --- */
.ambient-glow {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(150px);
  z-index: 0;
}

.glow-blue {
  width: 500px;
  height: 350px;
  background: var(--blue);
  top: -8%;
  right: -8%;
  opacity: 0.06;
  animation: glow-drift-blue 20s ease-in-out infinite alternate;
}

.glow-pink {
  width: 400px;
  height: 500px;
  background: var(--pink);
  bottom: -12%;
  left: -6%;
  opacity: 0.05;
  animation: glow-drift-pink 25s ease-in-out infinite alternate;
}

@keyframes glow-drift-blue {
  0% { transform: translate(0, 0); opacity: 0.06; }
  33% { transform: translate(-15px, 25px); opacity: 0.04; }
  66% { transform: translate(10px, -10px); opacity: 0.07; }
  100% { transform: translate(-5px, 15px); opacity: 0.05; }
}

@keyframes glow-drift-pink {
  0% { transform: translate(0, 0); opacity: 0.05; }
  33% { transform: translate(20px, -15px); opacity: 0.035; }
  66% { transform: translate(-10px, 10px); opacity: 0.06; }
  100% { transform: translate(8px, -20px); opacity: 0.04; }
}

/* --- Noise Texture Overlay --- */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* --- Container --- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 1000;
  background: rgba(10, 10, 18, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s, border-color 0.3s;
}

.nav.scrolled {
  border-bottom-color: rgba(180, 74, 255, 0.15);
  box-shadow: 0 1px 15px rgba(180, 74, 255, 0.06), 0 0 20px rgba(0, 212, 255, 0.04);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 2px;
}

.nav-logo:hover {
  color: var(--text-primary);
}

.logo-bracket {
  color: var(--pink);
  font-weight: 400;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-secondary);
  letter-spacing: 1px;
  position: relative;
  padding: 4px 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--blue);
  box-shadow: 0 0 6px var(--blue-glow);
  transition: width 0.3s;
}

.nav-links a:hover {
  color: var(--blue);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-resume {
  border: 1px solid var(--pink);
  padding: 6px 16px !important;
  border-radius: 2px;
  color: var(--pink) !important;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.nav-resume:hover {
  background: var(--pink);
  color: var(--bg-dark) !important;
  box-shadow: 0 0 15px var(--pink-glow);
}

.nav-resume::after {
  display: none !important;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

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

.nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Hero Section --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 40px 80px;
  overflow: hidden;
}

.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* Synthwave horizon */
.hero-horizon {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.hero-sun {
  position: absolute;
  bottom: 38%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 150, 50, 0.18) 0%, rgba(255, 45, 149, 0.15) 30%, rgba(180, 74, 255, 0.08) 55%, transparent 70%);
  filter: blur(6px);
  /* Horizontal slice lines through the sun */
  mask-image: repeating-linear-gradient(
    0deg,
    black 0px, black 8px,
    transparent 8px, transparent 12px
  );
  -webkit-mask-image: repeating-linear-gradient(
    0deg,
    black 0px, black 8px,
    transparent 8px, transparent 12px
  );
}

.hero-sun-reflection {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 80px;
  background: radial-gradient(ellipse, rgba(255, 45, 149, 0.08) 0%, transparent 70%);
  filter: blur(20px);
}

.hero-horizon-line {
  position: absolute;
  bottom: 40%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(255, 45, 149, 0.25) 30%, rgba(180, 74, 255, 0.35) 50%, rgba(255, 45, 149, 0.25) 70%, transparent 95%);
  box-shadow: 0 0 12px rgba(255, 45, 149, 0.15);
}

.hero-floor-grid {
  position: absolute;
  bottom: 0;
  left: -50%;
  right: -50%;
  height: 42%;
  background-image:
    linear-gradient(rgba(180, 74, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 74, 255, 0.07) 1px, transparent 1px);
  background-size: 80px 24px;
  transform: perspective(350px) rotateX(55deg);
  transform-origin: bottom center;
}

/* Palm tree silhouettes */
.hero-palm {
  position: absolute;
  bottom: 12%;
  width: 180px;
  height: 300px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.hero-palm-left {
  left: 4%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400'%3E%3Cpath d='M95 400 L100 180 Q102 160 98 150 Q60 120 15 100 Q55 110 95 140 Q80 100 40 60 Q75 90 100 135 Q95 90 80 40 Q95 80 105 130 Q110 80 130 30 Q115 85 108 135 Q120 90 155 55 Q125 95 110 140 Q140 110 180 95 Q140 120 105 150 Q103 160 105 180 Z' fill='%23b44aff'/%3E%3C/svg%3E");
  transform: scaleX(-1);
}

.hero-palm-right {
  right: 6%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400'%3E%3Cpath d='M95 400 L100 180 Q102 160 98 150 Q60 120 15 100 Q55 110 95 140 Q80 100 40 60 Q75 90 100 135 Q95 90 80 40 Q95 80 105 130 Q110 80 130 30 Q115 85 108 135 Q120 90 155 55 Q125 95 110 140 Q140 110 180 95 Q140 120 105 150 Q103 160 105 180 Z' fill='%23b44aff'/%3E%3C/svg%3E");
  transform: rotate(5deg);
  opacity: 0.045;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.hero-greeting {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--blue);
  margin-bottom: 16px;
  letter-spacing: 2px;
}

.hero-name {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
}

.name-line {
  display: block;
  font-size: clamp(3rem, 8vw, 5.5rem);
  color: var(--text-primary);
}

.name-line.accent {
  color: var(--pink);
  text-shadow: 0 0 30px var(--pink-glow), 0 0 60px rgba(255, 45, 149, 0.15);
}

.hero-tagline-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.hero-tagline-prefix {
  color: var(--pink);
}

.hero-tagline {
  min-height: 1.5em;
}

.cursor {
  color: var(--blue);
  animation: blink 1s step-end infinite;
}

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

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Glitch text effect */
.glitch-text {
  position: relative;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.glitch-text:hover::before {
  animation: glitch-1 0.3s linear;
  color: var(--pink);
  opacity: 0.7;
}

.glitch-text:hover::after {
  animation: glitch-2 0.3s linear;
  color: var(--blue);
  opacity: 0.7;
}

@keyframes glitch-1 {
  0% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 2px); }
  25% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -2px); }
  50% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 1px); }
  75% { clip-path: inset(10% 0 70% 0); transform: translate(2px, -1px); }
  100% { clip-path: inset(50% 0 20% 0); transform: translate(0); }
}

@keyframes glitch-2 {
  0% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -2px); }
  25% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 2px); }
  50% { clip-path: inset(10% 0 70% 0); transform: translate(2px, -1px); }
  75% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 1px); }
  100% { clip-path: inset(30% 0 40% 0); transform: translate(0); }
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--blue), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: 12px 28px;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
}

.btn-primary {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
}

.btn-primary:hover {
  background: var(--blue);
  color: var(--bg-dark);
  box-shadow: 0 0 20px var(--blue-glow), inset 0 0 20px rgba(0, 212, 255, 0.1);
}

.btn-outline {
  background: transparent;
  border-color: var(--pink);
  color: var(--pink);
}

.btn-outline:hover {
  background: var(--pink);
  color: var(--bg-dark);
  box-shadow: 0 0 20px var(--pink-glow), inset 0 0 20px rgba(255, 45, 149, 0.1);
}

/* --- Sections --- */
.section {
  padding: 100px 0;
  position: relative;
}

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(180, 74, 255, 0.2) 20%,
    rgba(0, 212, 255, 0.3) 50%,
    rgba(255, 45, 149, 0.2) 80%,
    transparent
  );
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.1);
}

.hero + .section::before {
  display: none;
}

.section-alt {
  background: var(--bg-section-alt);
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 50px;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(180, 74, 255, 0.08);
}

.title-decoration {
  color: var(--pink);
  margin-right: 8px;
}

/* --- About Section --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}

.about-text p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-size: 1.05rem;
}

.about-stats {
  display: flex;
  gap: 40px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--blue);
  text-shadow: 0 0 10px var(--blue-glow);
}

.stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-top: 4px;
}

/* Terminal */
.terminal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  box-shadow:
    0 0 15px rgba(180, 74, 255, 0.04),
    inset 0 1px 0 rgba(0, 212, 255, 0.06);
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
}

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

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

.terminal-title {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.terminal-body {
  padding: 20px;
  line-height: 1.8;
}

.terminal-body .prompt {
  color: var(--pink);
}

.terminal-body .output {
  color: var(--text-secondary);
  padding-left: 16px;
}

.terminal-body .accent-text {
  color: var(--blue);
  text-shadow: 0 0 8px var(--blue-glow);
}

/* --- Skills Section --- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.skill-category {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px;
  transition: border-color 0.3s, box-shadow 0.3s;
  position: relative;
}

.skill-category::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.skill-category:hover {
  border-color: var(--blue-dim);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.06), 0 4px 20px rgba(180, 74, 255, 0.04);
}

.skill-category:hover::after {
  opacity: 1;
}

.skill-category-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 18px;
  color: var(--text-primary);
}

.cat-icon {
  color: var(--pink);
  margin-right: 6px;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-secondary);
  transition: all 0.3s;
  cursor: default;
}

.skill-tag:hover {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.15);
  transform: translateY(-2px);
}

/* --- Projects Section --- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--violet), var(--pink));
  opacity: 0;
  transition: opacity 0.3s;
}

.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--pink-dim);
  box-shadow: 0 10px 40px rgba(255, 45, 149, 0.08), 0 0 25px rgba(180, 74, 255, 0.05);
}

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

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.project-icon {
  font-size: 1.8rem;
  color: var(--pink);
}

.project-links {
  display: flex;
  gap: 12px;
}

.project-link {
  color: var(--text-muted);
  transition: color 0.3s, transform 0.3s;
}

.project-link:hover {
  color: var(--blue);
  transform: translateY(-2px);
}

.project-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.project-description {
  color: var(--text-secondary);
  font-size: 0.95rem;
  flex-grow: 1;
  margin-bottom: 20px;
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --- Contact Section --- */
.contact-container {
  text-align: center;
  max-width: 600px;
}

.contact-text {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-bottom: 36px;
}

.contact-links {
  margin-bottom: 40px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.social-link {
  color: var(--text-muted);
  transition: color 0.3s, transform 0.3s;
}

.social-link:hover {
  color: var(--blue);
  transform: translateY(-3px);
}

/* --- Footer --- */
.footer {
  padding: 30px 0;
  text-align: center;
  border-top: 1px solid var(--border);
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(180, 74, 255, 0.15) 30%,
    rgba(0, 212, 255, 0.2) 50%,
    rgba(255, 45, 149, 0.15) 70%,
    transparent
  );
}

.footer-text {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.footer-bracket {
  color: var(--pink);
}

/* --- Section Background Textures --- */

/* Skills: circuit trace pattern */
.section-circuit {
  background-image:
    radial-gradient(circle at 85% 20%, rgba(0, 212, 255, 0.03) 0%, transparent 35%),
    radial-gradient(circle at 15% 80%, rgba(180, 74, 255, 0.025) 0%, transparent 30%);
  background-color: var(--bg-section-alt);
}

.section-circuit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image:
    /* Horizontal traces */
    linear-gradient(0deg, transparent 49.5%, rgba(0, 212, 255, 0.6) 49.5%, rgba(0, 212, 255, 0.6) 50.5%, transparent 50.5%),
    /* Vertical traces */
    linear-gradient(90deg, transparent 49.5%, rgba(180, 74, 255, 0.6) 49.5%, rgba(180, 74, 255, 0.6) 50.5%, transparent 50.5%),
    /* Nodes / dots */
    radial-gradient(circle 2px, rgba(0, 212, 255, 0.8) 100%, transparent 100%);
  background-size: 120px 120px, 120px 120px, 120px 120px;
  mask-image: radial-gradient(ellipse at center, transparent 20%, black 50%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 20%, black 50%, transparent 85%);
}

/* Projects: hex / diamond grid pattern */
.section-hex {
  background-image:
    radial-gradient(circle at 70% 30%, rgba(255, 45, 149, 0.025) 0%, transparent 40%),
    radial-gradient(circle at 30% 70%, rgba(0, 212, 255, 0.02) 0%, transparent 35%);
}

.section-hex::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image:
    linear-gradient(60deg, transparent 48%, rgba(255, 45, 149, 0.4) 48%, rgba(255, 45, 149, 0.4) 52%, transparent 52%),
    linear-gradient(-60deg, transparent 48%, rgba(255, 45, 149, 0.4) 48%, rgba(255, 45, 149, 0.4) 52%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(180, 74, 255, 0.4) 48%, rgba(180, 74, 255, 0.4) 52%, transparent 52%);
  background-size: 60px 104px;
  mask-image: radial-gradient(ellipse at center, transparent 15%, black 45%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 15%, black 45%, transparent 80%);
}

/* Contact: city skyline silhouette + glow */
.section-city {
  background-color: var(--bg-section-alt);
  overflow: hidden;
}

.section-city::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 80 L30 80 L30 50 L50 50 L50 70 L70 70 L70 30 L90 30 L90 70 L110 70 L110 45 L130 45 L130 60 L150 60 L150 20 L170 20 L170 60 L190 60 L190 40 L210 40 L210 65 L240 65 L240 35 L260 35 L260 55 L280 55 L280 75 L300 75 L300 25 L320 25 L320 60 L340 60 L340 45 L360 45 L360 70 L380 70 L380 50 L400 50 L400 15 L420 15 L420 55 L440 55 L440 40 L460 40 L460 70 L480 70 L480 55 L500 55 L500 30 L520 30 L520 65 L540 65 L540 45 L560 45 L560 75 L580 75 L580 35 L600 35 L600 60 L620 60 L620 20 L640 20 L640 50 L660 50 L660 70 L680 70 L680 40 L700 40 L700 65 L720 65 L720 25 L740 25 L740 55 L760 55 L760 45 L780 45 L780 70 L800 70 L800 30 L820 30 L820 60 L840 60 L840 50 L860 50 L860 75 L880 75 L880 20 L900 20 L900 55 L920 55 L920 40 L940 40 L940 65 L960 65 L960 35 L980 35 L980 50 L1000 50 L1000 70 L1020 70 L1020 45 L1040 45 L1040 60 L1060 60 L1060 25 L1080 25 L1080 55 L1100 55 L1100 40 L1120 40 L1120 70 L1140 70 L1140 50 L1160 50 L1160 80 L1200 80 L1200 120 Z' fill='%2300d4ff'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* --- Reveal Animations --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .nav {
    padding: 0 20px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: var(--nav-height);
    right: 0;
    bottom: 0;
    width: 260px;
    flex-direction: column;
    background: rgba(10, 10, 18, 0.97);
    backdrop-filter: blur(16px);
    padding: 40px 30px;
    gap: 24px;
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .hero {
    padding: 100px 24px 60px;
  }

  .about-grid {
    grid-template-columns: 1fr;
  }

  .about-stats {
    justify-content: space-around;
  }

  .skills-grid {
    grid-template-columns: 1fr;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .hero-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-palm {
    width: 100px;
    height: 180px;
    opacity: 0.04;
  }

  .hero-palm-left { left: -2%; }
  .hero-palm-right { right: -2%; }
}