:root {
  --bg: #0e1117;
  --surface: #151922;
  --surface-2: #1d2330;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --primary: #34d399; /* emerald */
  --primary-600: #10b981;
  --cyan: #06b6d4;
  --card-tint: rgba(255,255,255,0.14);
  --card-base: rgba(255,255,255,0.05);
  /* category accents */
  --accent-about: #06b6d4;   /* cyan */
  --accent-tech: #a78bfa;    /* violet */
  --accent-values: #34d399;  /* emerald */
  --accent-contact: #f59e0b; /* amber */
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Glassmorphism cards with lighter gradient */
.glass {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--card-tint) 0%, var(--card-base) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 2rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.glass::before {
  /* soft color wash in top-left for depth */
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(600px 240px at -10% -10%, var(--accent-soft, rgba(52,211,153,0.15)), transparent 60%);
  pointer-events: none;
}
.glass:hover {
  transform: translateY(-4px);
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.07) 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  border-color: rgba(255,255,255,0.18);
}

/* Header navigation links */
.nav-link {
  color: var(--muted);
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-link:hover {
  color: #fff;
}

/* Glassy header bar */
.header-glass {
  background: rgba(13, 16, 24, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Subtle section fade-in */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
section, .glass { animation: fadeInUp 0.6s cubic-bezier(0.23, 1, 0.32, 1); }

/* Primary CTA button */
.btn-primary {
  background: var(--primary);
  color: #0b1116;
  border: none;
  border-radius: 9999px;
  padding: 0.9rem 1.6rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 24px rgba(16,185,129,0.25), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover { 
  background: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(16,185,129,0.35);
}

/* Inputs on dark background */
input, textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 10px;
  transition: border 0.2s, box-shadow 0.2s;
}
input::placeholder, textarea::placeholder { color: #8892a6; }
input:focus, textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(6,182,212,0.25);
  outline: none;
}

/* Hero with background image and modern overlay */
.hero {
  position: relative;
  background: #0b0f16 url('images/parallax-bg.jpg') center center / cover no-repeat;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 320px at 20% 10%, rgba(6,182,212,0.15), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 10%, rgba(0,0,0,0.55) 80%);
}
.hero-content { position: relative; z-index: 1; }

/* Icon badge used on cards */
.icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e6fffb;
  background: linear-gradient(145deg, var(--accent-soft, rgba(6,182,212,0.28)), rgba(255,255,255,0.14));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 20px rgba(0,0,0,0.25);
}
.icon-badge svg { width: 22px; height: 22px; opacity: 0.95; }

/* Title color tied to accent */
.section-title { color: var(--accent-color, var(--cyan)); }

/* Accent helpers by section */
.section-theme-about { --accent-color: var(--accent-about); --accent-soft: rgba(6,182,212,0.22); }
.section-theme-tech { --accent-color: var(--accent-tech); --accent-soft: rgba(167,139,250,0.22); }
.section-theme-values { --accent-color: var(--accent-values); --accent-soft: rgba(52,211,153,0.22); }
.section-theme-contact { --accent-color: var(--accent-contact); --accent-soft: rgba(245,158,11,0.20); }

/* Accent left border uses section accent */
.accent-left { border-left: 4px solid var(--accent-color, var(--cyan)); }