/* ============================================================
   STYLE.CSS — Alex de Vries Portfolio
   ============================================================
   Inhoudsopgave:
     1.  Google Fonts import
     2.  CSS Custom Properties (design tokens)
     3.  Reset & base styles
     4.  Typography
     5.  Layout helpers (container, section)
     6.  CSS Animations / keyframes
     7.  Componenten: Buttons
     8.  Componenten: Badges
     9.  Navigatie (header)
    10.  Sectie 1: Hero
    11.  Sectie 2: Over mij
    12.  Sectie 3: Projecten
    13.  Sectie 4: Showcase
    14.  Sectie 5: Contact
    15.  Footer
    16.  Responsive (media queries)
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');


/* ============================================================
   2. CSS CUSTOM PROPERTIES — aanpasbare design tokens
   Verander hier kleuren, fonts en spacing voor de hele site.
   ============================================================ */
:root {

  /* --- Kleuren --- */
  --color-bg: #fafaf9;
  /* Warm off-white achtergrond */
  --color-bg-alt: #f4f3f0;
  /* Licht gebroken wit voor secties */
  --color-bg-dark: #111110;
  /* Donkere achtergrond (showcase) */
  --color-surface: #ffffff;
  /* Card / surface wit */
  --color-surface-dark: #1c1c1b;
  /* Donker surface */

  --color-ink: #111110;
  /* Primaire tekstkleur */
  --color-ink-muted: #6b6a66;
  /* Secundaire, minder prominente tekst */
  --color-ink-subtle: #a8a7a2;
  /* Subtiele hints, labels */
  --color-ink-invert: #fafaf9;
  /* Tekst op donkere achtergrond */

  --color-border: #e5e4e0;
  /* Standaard rand */
  --color-border-dark: #2a2a28;
  /* Rand op donkere achtergrond */

  --color-accent: #111110;
  /* Primaire accent = ink (monochroom) */
  --color-accent-hover: #2a2a28;

  /* LinkedIn blauw */
  --color-linkedin: #0a66c2;
  --color-linkedin-hover: #004182;

  /* --- Typografie --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-base: 1rem;
  /* 16px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-xl: 1.25rem;
  /* 20px */
  --text-2xl: 1.5rem;
  /* 24px */
  --text-3xl: 1.875rem;
  /* 30px */
  --text-4xl: 2.25rem;
  /* 36px */
  --text-5xl: 3rem;
  /* 48px */
  --text-6xl: 3.75rem;
  /* 60px */
  --text-7xl: 4.5rem;
  /* 72px */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Border radius --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --- Schaduwen --- */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 6px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 12px 32px -6px rgb(0 0 0 / 0.12), 0 4px 10px -4px rgb(0 0 0 / 0.06);
  --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.18);
  --shadow-inset: inset 0 1px 0 0 rgb(255 255 255 / 0.06);

  /* --- Transities --- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Nav hoogte --- */
  --nav-height: 68px;
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

/* Smooth focus outlines (toegankelijkheid) */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   4. TYPOGRAFIE
   ============================================================ */

/* Display headings (Playfair Display) */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 500;
}

em {
  font-style: italic;
  font-family: var(--font-display);
}

p {
  line-height: var(--leading-relaxed);
}

/* Selectie kleur */
::selection {
  background: var(--color-ink);
  color: var(--color-ink-invert);
}


/* ============================================================
   5. LAYOUT HELPERS
   ============================================================ */

/* Gecentreerde container met max-breedte */
.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-8);
  /* 32px gutter */
}

/* Standaard sectie verticale spacing */
.section {
  padding-block: var(--space-32);
  /* 128px top & bottom */
}

/* Sectie header patroon (label + grote titel) */
.section-header {
  margin-bottom: var(--space-16);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}

/* Streepje voor het label */
.section-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.section-title {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}

.section-title em {
  font-style: italic;
  font-weight: 400;
}

/* Light varianten (voor donkere secties) */
.section-label--light {
  color: rgba(255 255 255 / 0.5);
}

.section-title--light {
  color: var(--color-ink-invert);
}


/* ============================================================
   6. CSS ANIMATIONS & KEYFRAMES
   ============================================================ */

/* --- Fade-up (hero entry, algemeen) --- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Fade-in --- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --- Float (showcase elementen) --- */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-14px) rotate(2deg);
  }

  66% {
    transform: translateY(-6px) rotate(-1deg);
  }
}

/* --- Float alternatief --- */
@keyframes floatAlt {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-18px) rotate(-3deg);
  }
}

/* --- Pulse (badge dot) --- */
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

/* --- Gradient rotate (orbs) --- */
@keyframes gradientRotate {
  from {
    transform: rotate(0deg) translateX(40px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(40px) rotate(-360deg);
  }
}

/* --- Orb float --- */
@keyframes orbFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(20px, -15px) scale(1.05);
  }

  66% {
    transform: translate(-10px, -25px) scale(0.97);
  }
}

/* --- Scroll line (hero) --- */
@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 1;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
    opacity: 1;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
  }
}

/* --- Blink (cursor) --- */
@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* --- Typewriter reveal --- */
@keyframes typeReveal {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* --- Nav glow pulse --- */
@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.06;
  }

  50% {
    opacity: 0.12;
  }
}

/* --- Card border shimmer --- */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Animate helper klasse: fade-up met variabele delay */
.animate-fade-up {
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--delay, 0s);
}


/* ============================================================
   7. COMPONENTEN: BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65rem var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* Primair: zwart gevuld */
.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink-invert);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Outline: transparant met rand */
.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink);
}

.btn-outline:hover {
  border-color: var(--color-ink);
  background: var(--color-surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Ghost: geen rand, subtiele hover */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-ink-muted);
}

.btn-ghost:hover {
  background: var(--color-bg-alt);
  color: var(--color-ink);
}

/* LinkedIn knop */
.btn-linkedin {
  background: var(--color-linkedin);
  border-color: var(--color-linkedin);
  color: white;
  padding: 0.75rem var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
}

.btn-linkedin:hover {
  background: var(--color-linkedin-hover);
  border-color: var(--color-linkedin-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgb(10 102 194 / 0.35);
}

/* Kleine variant */
.btn-sm {
  padding: 0.5rem var(--space-4);
  font-size: var(--text-sm);
}

/* Pijl in de knop */
.btn-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}


/* ============================================================
   8. COMPONENTEN: BADGES
   ============================================================ */

/* Skill badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  font-family: var(--font-body);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-ink-muted);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
  cursor: default;
}

.badge:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-ink-invert);
  transform: translateY(-1px);
}

/* Tech badge (project cards) */
.tech-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-body);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-ink-muted);
}

/* Status dot */
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  /* groen = beschikbaar */
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

/* Pulserende versie (contact sectie) */
.badge-dot--pulse {
  width: 8px;
  height: 8px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgb(34 197 94 / 0.4);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}


/* ============================================================
   9. NAVIGATIE
   ============================================================ */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(250 250 249 / 0.88);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  animation: fadeIn 0.5s ease forwards;
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity var(--transition-fast);
}

.nav-logo:hover {
  opacity: 0.7;
}

.nav-logo-mark {
  font-size: 1rem;
  line-height: 1;
  animation: pulse 3s ease-in-out infinite;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-links a {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-muted);
  border-radius: var(--radius-sm);
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.nav-links a:hover {
  color: var(--color-ink);
  background: var(--color-bg-alt);
}


/* ============================================================
   10. SECTIE 1 — HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--nav-height);
  padding-block: var(--space-20);
  position: relative;
  overflow: hidden;
}

/* Decoratief: subtiel grid patroon op de achtergrond */
.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 80%);
  pointer-events: none;
}

/* Decoratief: zachte glow in het midden */
.hero-bg-glow {
  position: absolute;
  top: 20%;
  right: -10%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at 50% 50%, rgba(180, 170, 150, 0.14) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

/* Beschikbaarheid badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-muted);
  box-shadow: var(--shadow-sm);
}

/* Grote hero titel */
.hero-title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--text-5xl), 10vw, var(--text-7xl));
  line-height: var(--leading-tight);
  letter-spacing: -0.04em;
  color: var(--color-ink);
}

.hero-title-line {
  display: block;
}

/* Italic accent regel */
.hero-title-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--color-ink-muted);
}

/* Bio tekst */
.hero-bio {
  max-width: 520px;
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
}

/* CTA knoppen */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Stats row */
.hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-4);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
  line-height: 1;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-weight: 400;
}

.hero-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* Scroll indicator (links-onder) */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-10);
  left: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.scroll-text {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  writing-mode: vertical-rl;
}

.scroll-line {
  width: 1px;
  height: 48px;
  background: var(--color-border);
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  animation: scrollLine 2s ease-in-out infinite;
}


/* ============================================================
   11. SECTIE 2 — OVER MIJ
   ============================================================ */
.about {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

/* 2-koloms grid: tekst | skills */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* Tekst kolom */
.about-lead {
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin-bottom: var(--space-6);
}

.about-body {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.about-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  border-bottom: 1.5px solid var(--color-ink);
  padding-bottom: 2px;
  margin-top: var(--space-6);
  transition: gap var(--transition-fast), opacity var(--transition-fast);
  text-decoration: none;
}

.about-cta:hover {
  gap: var(--space-3);
  opacity: 0.7;
}

/* Skills kolom */
.about-skills {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.skill-group {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.skill-group:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.skill-group-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-bottom: var(--space-4);
}

.skill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* ============================================================
   12. SECTIE 3 — PROJECTEN
   ============================================================ */
.projects {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* 2-koloms grid voor project cards */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* Project card */
.project-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition-slow),
    border-color var(--transition-slow);
}

.project-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
  border-color: rgba(0 0 0 / 0.12);
}

/* Uitgelichte kaart: lichtgrijze bodem tint */
.project-card--featured {
  background: linear-gradient(145deg, #ffffff, #faf9f7);
}

/* Featured label (top-right) */
.project-featured-label {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

/* Card header */
.project-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Project icoon */
.project-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  flex-shrink: 0;
}

/* Alternatief icoon (featured kaart) */
.project-icon--alt {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-ink-invert);
}

/* Meta: type + stars */
.project-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.project-type {
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
  font-weight: 400;
}

.project-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-muted);
}

/* Card body */
.project-card-body {
  flex: 1;
}

.project-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.project-title a {
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.project-title a:hover {
  opacity: 0.65;
}

.project-description {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
}

/* Tech badges rij */
.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Card footer */
.project-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Taal indicator */
.project-lang {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
}

.lang-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lang-ts {
  background: #3178c6;
}

/* TypeScript blauw */
.lang-js {
  background: #f0db4f;
}

/* JavaScript geel */

/* Decoratief hoek-accent (kaart rechtsboven) */
.card-corner-accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top right, rgba(0 0 0 / 0.03), transparent 70%);
  pointer-events: none;
}

/* Link naar alle projecten */
.projects-more {
  margin-top: var(--space-10);
  text-align: center;
}


/* ============================================================
   13. SECTIE 4 — ANIMATED WORK SHOWCASE
   ============================================================ */
.showcase {
  background: var(--color-bg-dark);
  padding-block: var(--space-32);
}

/* Bento-grid voor showcase cards */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: var(--space-4);
}

/* Basis showcase card */
.showcase-card {
  background: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    transform var(--transition-slow),
    border-color var(--transition-slow),
    box-shadow var(--transition-slow);
  cursor: default;
}

.showcase-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255 255 255 / 0.12);
  box-shadow: 0 20px 50px -12px rgba(0 0 0 / 0.5);
}

/* Hoge kaart (eerste item) */
.showcase-card--tall {
  grid-row: span 2;
}

/* Brede kaart (laatste item) */
.showcase-card--wide {
  grid-column: span 2;
}

.showcase-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Demo container (animatie gebied) */
.showcase-card [class^="demo-"] {
  flex: 1;
  min-height: 180px;
  position: relative;
  overflow: hidden;
}

/* Card label / beschrijving */
.showcase-card-label {
  padding: var(--space-6);
  border-top: 1px solid var(--color-border-dark);
}

.showcase-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255 255 255 / 0.35);
  margin-bottom: var(--space-2);
}

.showcase-card-label h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-ink-invert);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.showcase-card-label p {
  font-size: var(--text-sm);
  color: rgba(255 255 255 / 0.45);
  line-height: var(--leading-relaxed);
}

/* -------- Demo 1: Floating elements -------- */
.demo-floating {
  background: #161615;
  position: relative;
}

/* Grid lijnen op donkere achtergrond */
.float-grid {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-evenly;
}

.float-grid-line {
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255 255 255 / 0.05), transparent);
  height: 100%;
}

/* Zwevende elementen */
.float-el {
  position: absolute;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255 255 255 / 0.1);
}

.float-el--1 {
  width: 56px;
  height: 56px;
  top: 20%;
  left: 15%;
  background: rgba(255 255 255 / 0.04);
  animation: float 5s ease-in-out infinite;
  border-radius: var(--radius-lg);
}

.float-el--2 {
  width: 80px;
  height: 36px;
  top: 55%;
  left: 50%;
  background: rgba(255 255 255 / 0.06);
  border-radius: var(--radius-md);
  animation: float 6.5s ease-in-out infinite 0.8s;
}

.float-el--3 {
  width: 40px;
  height: 40px;
  top: 30%;
  right: 20%;
  background: rgba(255 255 255 / 0.08);
  border-radius: 50%;
  animation: floatAlt 4.5s ease-in-out infinite 0.4s;
}

.float-el--4 {
  width: 24px;
  height: 24px;
  bottom: 20%;
  left: 35%;
  background: rgba(255 255 255 / 0.05);
  border-radius: 4px;
  animation: float 7s ease-in-out infinite 1.2s;
  transform: rotate(45deg);
}

/* -------- Demo 2: Gradient orbs -------- */
.demo-gradient {
  background: #0a0a09;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.gradient-orb--1 {
  width: 200px;
  height: 200px;
  background: rgba(100, 90, 220, 0.25);
  top: -20%;
  left: -10%;
  animation: orbFloat 6s ease-in-out infinite;
}

.gradient-orb--2 {
  width: 160px;
  height: 160px;
  background: rgba(220, 100, 80, 0.2);
  bottom: -10%;
  right: -5%;
  animation: orbFloat 8s ease-in-out infinite 2s;
}

.gradient-text-demo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.gradient-text-demo span {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255 255 255 / 0.4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.05;
  text-align: center;
}

/* -------- Demo 3: Typewriter / code window -------- */
.demo-type {
  background: #0f0f0e;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.type-window {
  width: 100%;
  max-width: 260px;
  background: #1a1a18;
  border: 1px solid rgba(255 255 255 / 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px -8px rgba(0 0 0 / 0.6);
}

.type-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255 255 255 / 0.04);
  border-bottom: 1px solid rgba(255 255 255 / 0.06);
}

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

.type-dot--red {
  background: #ff5f57;
}

.type-dot--yellow {
  background: #febc2e;
}

.type-dot--green {
  background: #28c840;
}

.type-content {
  padding: var(--space-4) var(--space-4);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255 255 255 / 0.6);
  display: flex;
  flex-direction: column;
}

.type-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

/* Staggered reveal animaties voor elke coderegel */
.type-line--1 {
  animation: typeReveal 0.8s steps(20) forwards 0s;
  width: 0;
}

.type-line--2 {
  animation: typeReveal 0.8s steps(22) forwards 1s;
  width: 0;
}

.type-line--3 {
  animation: typeReveal 0.4s steps(8) forwards 2s;
  width: 0;
}

.type-line em {
  color: #f59e0b;
  font-style: normal;
  font-family: 'Courier New', Courier, monospace;
}

.type-cursor {
  color: rgba(255 255 255 / 0.7);
  animation: blink 1s step-end infinite;
  font-size: 15px;
  line-height: 1;
  margin-top: 2px;
}

/* -------- Demo 4: Hover cards -------- */
.demo-hover-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
  background: #111110;
  min-height: 150px;
}

.hover-demo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255 255 255 / 0.08);
  cursor: pointer;
  transition:
    transform var(--transition-spring),
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-slow);
}

.hover-demo-card span {
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255 255 255 / 0.35);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.hover-demo-card--1 {
  width: 100px;
  height: 80px;
  background: rgba(255 255 255 / 0.03);
}

.hover-demo-card--2 {
  width: 90px;
  height: 90px;
  background: rgba(255 255 255 / 0.05);
}

.hover-demo-card--3 {
  width: 100px;
  height: 75px;
  background: rgba(255 255 255 / 0.03);
}

.hover-demo-card:hover {
  transform: translateY(-8px) scale(1.05);
  background: rgba(255 255 255 / 0.1);
  border-color: rgba(255 255 255 / 0.2);
  box-shadow: 0 16px 40px -8px rgba(0 0 0 / 0.5);
}

.hover-demo-card:hover span {
  color: rgba(255 255 255 / 0.9);
}


/* ============================================================
   14. SECTIE 5 — CONTACT
   ============================================================ */
.contact {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

/* 2-koloms grid */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* Linker kolom */
.contact-lead {
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.contact-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Rechter kolom: info block */
.contact-info-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Elk info-item */
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Icoon wrapper */
.contact-info-icon {
  width: 38px;
  height: 38px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-muted);
  flex-shrink: 0;
}

.contact-info-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-info-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

.contact-info-value {
  font-size: var(--text-base);
  color: var(--color-ink);
  font-weight: 400;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a.contact-info-value:hover {
  color: var(--color-ink-muted);
}

/* Socials */
.social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.social-link {
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1px;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.social-link:hover {
  color: var(--color-ink-muted);
  border-color: var(--color-ink-muted);
}

.social-separator {
  color: var(--color-border);
}

/* Beschikbaarheid rij */
.contact-availability {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  font-weight: 400;
}


/* ============================================================
   15. FOOTER
   ============================================================ */
.footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-logo {
  font-size: var(--text-sm);
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.footer-links a {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-ink);
  background: var(--color-border);
}


/* ============================================================
   16. RESPONSIVE — Media Queries
   ============================================================ */

/* ---- Tablet: max 1024px ---- */
@media (max-width: 1024px) {

  /* Container padding verkleinen */
  .container {
    padding-inline: var(--space-6);
  }

  /* Sectie spacing verkleinen */
  .section {
    padding-block: var(--space-20);
  }

  /* About grid: stack */
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Contact grid: stack */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Showcase: 2 kolommen behouden maar kleinere gap */
  .showcase-grid {
    gap: var(--space-3);
  }

}

/* ---- Mobile: max 768px ---- */
@media (max-width: 768px) {

  /* Container */
  .container {
    padding-inline: var(--space-4);
  }

  /* Sectie */
  .section {
    padding-block: var(--space-16);
  }

  /* Nav: verberg links, behoud logo + CTA */
  .nav-links {
    display: none;
  }

  .nav-inner {
    justify-content: space-between;
  }

  /* Hero */
  .hero {
    padding-block: var(--space-12);
    min-height: auto;
    padding-top: calc(var(--nav-height) + var(--space-8));
  }

  .hero-title {
    font-size: clamp(var(--text-4xl), 13vw, var(--text-6xl));
  }

  .hero-bio {
    font-size: var(--text-base);
  }

  .hero-stats {
    gap: var(--space-5);
    flex-wrap: wrap;
  }

  /* Scroll indicator verbergen op mobiel */
  .scroll-indicator {
    display: none;
  }

  /* Projecten grid: 1 kolom */
  .projects-grid {
    grid-template-columns: 1fr;
  }

  /* Showcase: 1 kolom */
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .showcase-card--tall {
    grid-row: span 1;
  }

  .showcase-card--wide {
    grid-column: span 1;
  }

  /* Demo hover cards smaller */
  .demo-hover-cards {
    gap: var(--space-3);
  }

  .hover-demo-card--1,
  .hover-demo-card--3 {
    width: 80px;
    height: 65px;
  }

  .hover-demo-card--2 {
    width: 75px;
    height: 75px;
  }

  /* Contact */
  .contact-intro .btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .footer-links {
    gap: var(--space-1);
  }

}

/* ---- Klein mobiel: max 480px ---- */
@media (max-width: 480px) {

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    gap: var(--space-4);
  }

  .hero-stat-divider {
    height: 30px;
  }

  .stat-number {
    font-size: var(--text-2xl);
  }

  .section-title {
    font-size: clamp(var(--text-3xl), 11vw, var(--text-4xl));
  }

  .project-card {
    padding: var(--space-6);
  }

  .contact-info-block {
    padding: var(--space-6);
  }

}

/* ============================================================
   EINDE VAN STYLE.CSS
   Bewerk de :root variabelen bovenaan om kleuren en spacing
   eenvoudig te wijzigen voor de hele website.
   ============================================================ */


/* ============================================================
   SHOWCASE — CODE WINDOWS
   Styles voor de Klantio CRM code snippet cards.
   Voeg dit toe onderaan style.css
   ============================================================ */

/* ---- Code window container (vervangt demo-floating etc.) ---- */
.demo-code {
  flex: 1;
  min-height: 200px;
  background: #0d0d0c;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}

/* Subtiel grid op achtergrond van code demo */
.demo-code::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255 255 255 / 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255 255 255 / 0.02) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Wide variant: geen min-height, vult flexbox */
.demo-code--wide {
  min-height: unset;
  flex: 1;
  align-self: stretch;
}

/* ---- Code window (macOS-stijl) ---- */
.code-window {
  width: 100%;
  max-width: 340px;
  background: #181817;
  border: 1px solid rgba(255 255 255 / 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0 0 0 / 0.4),
    0 12px 40px -8px rgba(0 0 0 / 0.7);
  position: relative;
  z-index: 1;
}

/* Balk met dots + bestandsnaam */
.code-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255 255 255 / 0.04);
  border-bottom: 1px solid rgba(255 255 255 / 0.06);
}

.code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.code-dot--red {
  background: #ff5f57;
}

.code-dot--yellow {
  background: #febc2e;
}

.code-dot--green {
  background: #28c840;
}

.code-filename {
  margin-left: var(--space-2);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  color: rgba(255 255 255 / 0.3);
  letter-spacing: 0.02em;
}

/* Code inhoud */
.code-body {
  padding: var(--space-4) var(--space-5);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1.75;
  color: rgba(255 255 255 / 0.7);
  overflow: hidden;
}

/* Elke individuele regel */
.code-line {
  display: block;
  white-space: pre;
  opacity: 0;
  transform: translateY(5px);
  animation: codeLineIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered entry: elke regel 90ms later */
.cl--1 {
  animation-delay: 0.05s;
}

.cl--2 {
  animation-delay: 0.14s;
}

.cl--3 {
  animation-delay: 0.23s;
}

.cl--4 {
  animation-delay: 0.32s;
}

.cl--5 {
  animation-delay: 0.41s;
}

.cl--6 {
  animation-delay: 0.50s;
}

.cl--7 {
  animation-delay: 0.59s;
}

.cl--8 {
  animation-delay: 0.68s;
}

.cl--9 {
  animation-delay: 0.77s;
}

.cl--10 {
  animation-delay: 0.86s;
}

.cl--11 {
  animation-delay: 0.95s;
}

.cl--12 {
  animation-delay: 1.04s;
}

.cl--13 {
  animation-delay: 1.13s;
}

.cl--14 {
  animation-delay: 1.22s;
}

/* Keyframe: slide-up + fade-in per regel */
@keyframes codeLineIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Syntax highlighting tokens ---- */

/* keyword: for, const, if, return, let, await */
.ck {
  color: #c792ea;
  /* paars */
  font-weight: 600;
}

/* function name */
.cf {
  color: #82aaff;
  /* blauw */
}

/* variable / identifier */
.cv {
  color: #eeffff;
  /* bijna-wit */
}

/* string / template literal */
.cs {
  color: #c3e88d;
  /* groen */
}

/* comment */
.cm {
  color: #546e7a;
  /* donkergrijs */
  font-style: italic;
}

/* number */
.cn {
  color: #f78c6c;
  /* oranje */
}

/* inline code in labels */
.showcase-card-label code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  background: rgba(255 255 255 / 0.08);
  border: 1px solid rgba(255 255 255 / 0.1);
  border-radius: 4px;
  padding: 1px 5px;
  color: #c3e88d;
}

/* ---- Wide card: horizontale layout ---- */
.showcase-card-inner--horizontal {
  flex-direction: row !important;
  align-items: stretch;
}

.showcase-card-label--side {
  flex: 1;
  border-top: none !important;
  border-left: 1px solid var(--color-border-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

/* ---- Score visualisatie (Card 4) ---- */
.snippet-score-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 10px;
  background: rgba(255 255 255 / 0.03);
  border: 1px solid rgba(255 255 255 / 0.06);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.score-row:hover {
  background: rgba(255 255 255 / 0.07);
}

.score-url {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  color: rgba(255 255 255 / 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.score-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  text-align: center;
  min-width: 50px;
}

.score-badge--high {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.score-badge--mid {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.score-badge--low {
  background: rgba(255 255 255 / 0.04);
  color: rgba(255 255 255 / 0.25);
  border: 1px solid rgba(255 255 255 / 0.08);
}

/* ---- Responsive aanpassingen voor code cards ---- */
@media (max-width: 768px) {

  /* Brede card: terug naar verticaal op mobiel */
  .showcase-card-inner--horizontal {
    flex-direction: column !important;
  }

  .showcase-card-label--side {
    border-left: none !important;
    border-top: 1px solid var(--color-border-dark) !important;
  }

  .demo-code--wide {
    min-height: 200px;
  }

  /* Code window iets kleiner op kleine schermen */
  .code-body {
    font-size: 11px;
  }

  .code-window {
    max-width: 100%;
  }
}

/* ============================================================
   EINDE — code window styles
   ============================================================ */
/* ============================================================
   STYLE.CSS — Alex de Vries Portfolio
   ============================================================
   Inhoudsopgave:
     1.  Google Fonts import
     2.  CSS Custom Properties (design tokens)
     3.  Reset & base styles
     4.  Typography
     5.  Layout helpers (container, section)
     6.  CSS Animations / keyframes
     7.  Componenten: Buttons
     8.  Componenten: Badges
     9.  Navigatie (header)
    10.  Sectie 1: Hero
    11.  Sectie 2: Over mij
    12.  Sectie 3: Projecten
    13.  Sectie 4: Showcase
    14.  Sectie 5: Contact
    15.  Footer
    16.  Responsive (media queries)
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');


/* ============================================================
   2. CSS CUSTOM PROPERTIES — aanpasbare design tokens
   Verander hier kleuren, fonts en spacing voor de hele site.
   ============================================================ */
:root {

  /* --- Kleuren --- */
  --color-bg: #fafaf9;
  /* Warm off-white achtergrond */
  --color-bg-alt: #f4f3f0;
  /* Licht gebroken wit voor secties */
  --color-bg-dark: #111110;
  /* Donkere achtergrond (showcase) */
  --color-surface: #ffffff;
  /* Card / surface wit */
  --color-surface-dark: #1c1c1b;
  /* Donker surface */

  --color-ink: #111110;
  /* Primaire tekstkleur */
  --color-ink-muted: #6b6a66;
  /* Secundaire, minder prominente tekst */
  --color-ink-subtle: #a8a7a2;
  /* Subtiele hints, labels */
  --color-ink-invert: #fafaf9;
  /* Tekst op donkere achtergrond */

  --color-border: #e5e4e0;
  /* Standaard rand */
  --color-border-dark: #2a2a28;
  /* Rand op donkere achtergrond */

  --color-accent: #111110;
  /* Primaire accent = ink (monochroom) */
  --color-accent-hover: #2a2a28;

  /* LinkedIn blauw */
  --color-linkedin: #0a66c2;
  --color-linkedin-hover: #004182;

  /* --- Typografie --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-base: 1rem;
  /* 16px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-xl: 1.25rem;
  /* 20px */
  --text-2xl: 1.5rem;
  /* 24px */
  --text-3xl: 1.875rem;
  /* 30px */
  --text-4xl: 2.25rem;
  /* 36px */
  --text-5xl: 3rem;
  /* 48px */
  --text-6xl: 3.75rem;
  /* 60px */
  --text-7xl: 4.5rem;
  /* 72px */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Border radius --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* --- Schaduwen --- */
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 6px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 12px 32px -6px rgb(0 0 0 / 0.12), 0 4px 10px -4px rgb(0 0 0 / 0.06);
  --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.18);
  --shadow-inset: inset 0 1px 0 0 rgb(255 255 255 / 0.06);

  /* --- Transities --- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Nav hoogte --- */
  --nav-height: 68px;
}


/* ============================================================
   3. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

/* Smooth focus outlines (toegankelijkheid) */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ============================================================
   4. TYPOGRAFIE
   ============================================================ */

/* Display headings (Playfair Display) */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 500;
}

em {
  font-style: italic;
  font-family: var(--font-display);
}

p {
  line-height: var(--leading-relaxed);
}

/* Selectie kleur */
::selection {
  background: var(--color-ink);
  color: var(--color-ink-invert);
}


/* ============================================================
   5. LAYOUT HELPERS
   ============================================================ */

/* Gecentreerde container met max-breedte */
.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-8);
  /* 32px gutter */
}

/* Standaard sectie verticale spacing */
.section {
  padding-block: var(--space-32);
  /* 128px top & bottom */
}

/* Sectie header patroon (label + grote titel) */
.section-header {
  margin-bottom: var(--space-16);
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}

/* Streepje voor het label */
.section-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}

.section-title {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}

.section-title em {
  font-style: italic;
  font-weight: 400;
}

/* Light varianten (voor donkere secties) */
.section-label--light {
  color: rgba(255 255 255 / 0.5);
}

.section-title--light {
  color: var(--color-ink-invert);
}


/* ============================================================
   6. CSS ANIMATIONS & KEYFRAMES
   ============================================================ */

/* --- Fade-up (hero entry, algemeen) --- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Fade-in --- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --- Float (showcase elementen) --- */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-14px) rotate(2deg);
  }

  66% {
    transform: translateY(-6px) rotate(-1deg);
  }
}

/* --- Float alternatief --- */
@keyframes floatAlt {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-18px) rotate(-3deg);
  }
}

/* --- Pulse (badge dot) --- */
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

/* --- Gradient rotate (orbs) --- */
@keyframes gradientRotate {
  from {
    transform: rotate(0deg) translateX(40px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(40px) rotate(-360deg);
  }
}

/* --- Orb float --- */
@keyframes orbFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(20px, -15px) scale(1.05);
  }

  66% {
    transform: translate(-10px, -25px) scale(0.97);
  }
}

/* --- Scroll line (hero) --- */
@keyframes scrollLine {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 1;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
    opacity: 1;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
  }
}

/* --- Blink (cursor) --- */
@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* --- Typewriter reveal --- */
@keyframes typeReveal {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* --- Nav glow pulse --- */
@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.06;
  }

  50% {
    opacity: 0.12;
  }
}

/* --- Card border shimmer --- */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Animate helper klasse: fade-up met variabele delay */
.animate-fade-up {
  opacity: 0;
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--delay, 0s);
}


/* ============================================================
   7. COMPONENTEN: BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65rem var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

/* Primair: zwart gevuld */
.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink-invert);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Outline: transparant met rand */
.btn-outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-ink);
}

.btn-outline:hover {
  border-color: var(--color-ink);
  background: var(--color-surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Ghost: geen rand, subtiele hover */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-ink-muted);
}

.btn-ghost:hover {
  background: var(--color-bg-alt);
  color: var(--color-ink);
}

/* LinkedIn knop */
.btn-linkedin {
  background: var(--color-linkedin);
  border-color: var(--color-linkedin);
  color: white;
  padding: 0.75rem var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
}

.btn-linkedin:hover {
  background: var(--color-linkedin-hover);
  border-color: var(--color-linkedin-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgb(10 102 194 / 0.35);
}

/* Kleine variant */
.btn-sm {
  padding: 0.5rem var(--space-4);
  font-size: var(--text-sm);
}

/* Pijl in de knop */
.btn-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}


/* ============================================================
   8. COMPONENTEN: BADGES
   ============================================================ */

/* Skill badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  font-family: var(--font-body);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-ink-muted);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
  cursor: default;
}

.badge:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-ink-invert);
  transform: translateY(-1px);
}

/* Tech badge (project cards) */
.tech-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-body);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-ink-muted);
}

/* Status dot */
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  /* groen = beschikbaar */
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

/* Pulserende versie (contact sectie) */
.badge-dot--pulse {
  width: 8px;
  height: 8px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgb(34 197 94 / 0.4);
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}


/* ============================================================
   9. NAVIGATIE
   ============================================================ */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(250 250 249 / 0.88);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  animation: fadeIn 0.5s ease forwards;
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity var(--transition-fast);
}

.nav-logo:hover {
  opacity: 0.7;
}

.nav-logo-mark {
  font-size: 1rem;
  line-height: 1;
  animation: pulse 3s ease-in-out infinite;
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-links a {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-muted);
  border-radius: var(--radius-sm);
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.nav-links a:hover {
  color: var(--color-ink);
  background: var(--color-bg-alt);
}


/* ============================================================
   10. SECTIE 1 — HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--nav-height);
  padding-block: var(--space-20);
  position: relative;
  overflow: hidden;
}

/* Decoratief: subtiel grid patroon op de achtergrond */
.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 80%);
  pointer-events: none;
}

/* Decoratief: zachte glow in het midden */
.hero-bg-glow {
  position: absolute;
  top: 20%;
  right: -10%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle at 50% 50%, rgba(180, 170, 150, 0.14) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

/* Beschikbaarheid badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-muted);
  box-shadow: var(--shadow-sm);
}

/* Grote hero titel */
.hero-title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--text-5xl), 10vw, var(--text-7xl));
  line-height: var(--leading-tight);
  letter-spacing: -0.04em;
  color: var(--color-ink);
}

.hero-title-line {
  display: block;
}

/* Italic accent regel */
.hero-title-accent {
  font-style: italic;
  font-weight: 400;
  color: var(--color-ink-muted);
}

/* Bio tekst */
.hero-bio {
  max-width: 520px;
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
}

/* CTA knoppen */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Stats row */
.hero-stats {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-4);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
  line-height: 1;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  font-weight: 400;
}

.hero-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* Scroll indicator (links-onder) */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-10);
  left: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.scroll-text {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  writing-mode: vertical-rl;
}

.scroll-line {
  width: 1px;
  height: 48px;
  background: var(--color-border);
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  animation: scrollLine 2s ease-in-out infinite;
}


/* ============================================================
   11. SECTIE 2 — OVER MIJ
   ============================================================ */
.about {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

/* 2-koloms grid: tekst | skills */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* Tekst kolom */
.about-lead {
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  margin-bottom: var(--space-6);
}

.about-body {
  font-size: var(--text-base);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.about-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  border-bottom: 1.5px solid var(--color-ink);
  padding-bottom: 2px;
  margin-top: var(--space-6);
  transition: gap var(--transition-fast), opacity var(--transition-fast);
  text-decoration: none;
}

.about-cta:hover {
  gap: var(--space-3);
  opacity: 0.7;
}

/* Skills kolom */
.about-skills {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.skill-group {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.skill-group:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.skill-group-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-bottom: var(--space-4);
}

.skill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}


/* ============================================================
   12. SECTIE 3 — PROJECTEN
   ============================================================ */
.projects {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* 2-koloms grid voor project cards */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* Project card */
.project-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    box-shadow var(--transition-slow),
    transform var(--transition-slow),
    border-color var(--transition-slow);
}

.project-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
  border-color: rgba(0 0 0 / 0.12);
}

/* Uitgelichte kaart: lichtgrijze bodem tint */
.project-card--featured {
  background: linear-gradient(145deg, #ffffff, #faf9f7);
}

/* Featured label (top-right) */
.project-featured-label {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

/* Card header */
.project-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Project icoon */
.project-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  flex-shrink: 0;
}

/* Alternatief icoon (featured kaart) */
.project-icon--alt {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-ink-invert);
}

/* Meta: type + stars */
.project-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.project-type {
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
  font-weight: 400;
}

.project-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-ink-muted);
}

/* Card body */
.project-card-body {
  flex: 1;
}

.project-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.project-title a {
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.project-title a:hover {
  opacity: 0.65;
}

.project-description {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
}

/* Tech badges rij */
.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Card footer */
.project-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* Taal indicator */
.project-lang {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
}

.lang-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lang-ts {
  background: #3178c6;
}

/* TypeScript blauw */
.lang-js {
  background: #f0db4f;
}

/* JavaScript geel */

/* Decoratief hoek-accent (kaart rechtsboven) */
.card-corner-accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top right, rgba(0 0 0 / 0.03), transparent 70%);
  pointer-events: none;
}

/* Link naar alle projecten */
.projects-more {
  margin-top: var(--space-10);
  text-align: center;
}


/* ============================================================
   13. SECTIE 4 — ANIMATED WORK SHOWCASE
   ============================================================ */
.showcase {
  background: var(--color-bg-dark);
  padding-block: var(--space-32);
}

/* Bento-grid voor showcase cards */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: var(--space-4);
}

/* Basis showcase card */
.showcase-card {
  background: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    transform var(--transition-slow),
    border-color var(--transition-slow),
    box-shadow var(--transition-slow);
  cursor: default;
}

.showcase-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255 255 255 / 0.12);
  box-shadow: 0 20px 50px -12px rgba(0 0 0 / 0.5);
}

/* Hoge kaart (eerste item) */
.showcase-card--tall {
  grid-row: span 2;
}

/* Brede kaart (laatste item) */
.showcase-card--wide {
  grid-column: span 2;
}

.showcase-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Demo container (animatie gebied) */
.showcase-card [class^="demo-"] {
  flex: 1;
  min-height: 180px;
  position: relative;
  overflow: hidden;
}

/* Card label / beschrijving */
.showcase-card-label {
  padding: var(--space-6);
  border-top: 1px solid var(--color-border-dark);
}

.showcase-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255 255 255 / 0.35);
  margin-bottom: var(--space-2);
}

.showcase-card-label h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-ink-invert);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.showcase-card-label p {
  font-size: var(--text-sm);
  color: rgba(255 255 255 / 0.45);
  line-height: var(--leading-relaxed);
}

/* -------- Demo 1: Floating elements -------- */
.demo-floating {
  background: #161615;
  position: relative;
}

/* Grid lijnen op donkere achtergrond */
.float-grid {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-evenly;
}

.float-grid-line {
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255 255 255 / 0.05), transparent);
  height: 100%;
}

/* Zwevende elementen */
.float-el {
  position: absolute;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255 255 255 / 0.1);
}

.float-el--1 {
  width: 56px;
  height: 56px;
  top: 20%;
  left: 15%;
  background: rgba(255 255 255 / 0.04);
  animation: float 5s ease-in-out infinite;
  border-radius: var(--radius-lg);
}

.float-el--2 {
  width: 80px;
  height: 36px;
  top: 55%;
  left: 50%;
  background: rgba(255 255 255 / 0.06);
  border-radius: var(--radius-md);
  animation: float 6.5s ease-in-out infinite 0.8s;
}

.float-el--3 {
  width: 40px;
  height: 40px;
  top: 30%;
  right: 20%;
  background: rgba(255 255 255 / 0.08);
  border-radius: 50%;
  animation: floatAlt 4.5s ease-in-out infinite 0.4s;
}

.float-el--4 {
  width: 24px;
  height: 24px;
  bottom: 20%;
  left: 35%;
  background: rgba(255 255 255 / 0.05);
  border-radius: 4px;
  animation: float 7s ease-in-out infinite 1.2s;
  transform: rotate(45deg);
}

/* -------- Demo 2: Gradient orbs -------- */
.demo-gradient {
  background: #0a0a09;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

.gradient-orb--1 {
  width: 200px;
  height: 200px;
  background: rgba(100, 90, 220, 0.25);
  top: -20%;
  left: -10%;
  animation: orbFloat 6s ease-in-out infinite;
}

.gradient-orb--2 {
  width: 160px;
  height: 160px;
  background: rgba(220, 100, 80, 0.2);
  bottom: -10%;
  right: -5%;
  animation: orbFloat 8s ease-in-out infinite 2s;
}

.gradient-text-demo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.gradient-text-demo span {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255 255 255 / 0.4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.05;
  text-align: center;
}

/* -------- Demo 3: Typewriter / code window -------- */
.demo-type {
  background: #0f0f0e;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.type-window {
  width: 100%;
  max-width: 260px;
  background: #1a1a18;
  border: 1px solid rgba(255 255 255 / 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px -8px rgba(0 0 0 / 0.6);
}

.type-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255 255 255 / 0.04);
  border-bottom: 1px solid rgba(255 255 255 / 0.06);
}

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

.type-dot--red {
  background: #ff5f57;
}

.type-dot--yellow {
  background: #febc2e;
}

.type-dot--green {
  background: #28c840;
}

.type-content {
  padding: var(--space-4) var(--space-4);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255 255 255 / 0.6);
  display: flex;
  flex-direction: column;
}

.type-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

/* Staggered reveal animaties voor elke coderegel */
.type-line--1 {
  animation: typeReveal 0.8s steps(20) forwards 0s;
  width: 0;
}

.type-line--2 {
  animation: typeReveal 0.8s steps(22) forwards 1s;
  width: 0;
}

.type-line--3 {
  animation: typeReveal 0.4s steps(8) forwards 2s;
  width: 0;
}

.type-line em {
  color: #f59e0b;
  font-style: normal;
  font-family: 'Courier New', Courier, monospace;
}

.type-cursor {
  color: rgba(255 255 255 / 0.7);
  animation: blink 1s step-end infinite;
  font-size: 15px;
  line-height: 1;
  margin-top: 2px;
}

/* -------- Demo 4: Hover cards -------- */
.demo-hover-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
  background: #111110;
  min-height: 150px;
}

.hover-demo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255 255 255 / 0.08);
  cursor: pointer;
  transition:
    transform var(--transition-spring),
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-slow);
}

.hover-demo-card span {
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255 255 255 / 0.35);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.hover-demo-card--1 {
  width: 100px;
  height: 80px;
  background: rgba(255 255 255 / 0.03);
}

.hover-demo-card--2 {
  width: 90px;
  height: 90px;
  background: rgba(255 255 255 / 0.05);
}

.hover-demo-card--3 {
  width: 100px;
  height: 75px;
  background: rgba(255 255 255 / 0.03);
}

.hover-demo-card:hover {
  transform: translateY(-8px) scale(1.05);
  background: rgba(255 255 255 / 0.1);
  border-color: rgba(255 255 255 / 0.2);
  box-shadow: 0 16px 40px -8px rgba(0 0 0 / 0.5);
}

.hover-demo-card:hover span {
  color: rgba(255 255 255 / 0.9);
}


/* ============================================================
   14. SECTIE 5 — CONTACT
   ============================================================ */
.contact {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

/* 2-koloms grid */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* Linker kolom */
.contact-lead {
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-ink-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-8);
}

.contact-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Rechter kolom: info block */
.contact-info-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Elk info-item */
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

/* Icoon wrapper */
.contact-info-icon {
  width: 38px;
  height: 38px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-muted);
  flex-shrink: 0;
}

.contact-info-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-info-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

.contact-info-value {
  font-size: var(--text-base);
  color: var(--color-ink);
  font-weight: 400;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a.contact-info-value:hover {
  color: var(--color-ink-muted);
}

/* Socials */
.social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.social-link {
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1px;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.social-link:hover {
  color: var(--color-ink-muted);
  border-color: var(--color-ink-muted);
}

.social-separator {
  color: var(--color-border);
}

/* Beschikbaarheid rij */
.contact-availability {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  font-weight: 400;
}


/* ============================================================
   15. FOOTER
   ============================================================ */
.footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-logo {
  font-size: var(--text-sm);
}

.footer-copy {
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.footer-links a {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-subtle);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-ink);
  background: var(--color-border);
}


/* ============================================================
   16. RESPONSIVE — Media Queries
   ============================================================ */

/* ---- Tablet: max 1024px ---- */
@media (max-width: 1024px) {

  /* Container padding verkleinen */
  .container {
    padding-inline: var(--space-6);
  }

  /* Sectie spacing verkleinen */
  .section {
    padding-block: var(--space-20);
  }

  /* About grid: stack */
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Contact grid: stack */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Showcase: 2 kolommen behouden maar kleinere gap */
  .showcase-grid {
    gap: var(--space-3);
  }

}

/* ---- Mobile: max 768px ---- */
@media (max-width: 768px) {

  /* Container */
  .container {
    padding-inline: var(--space-4);
  }

  /* Sectie */
  .section {
    padding-block: var(--space-16);
  }

  /* Nav: verberg links, behoud logo + CTA */
  .nav-links {
    display: none;
  }

  .nav-inner {
    justify-content: space-between;
  }

  /* Hero */
  .hero {
    padding-block: var(--space-12);
    min-height: auto;
    padding-top: calc(var(--nav-height) + var(--space-8));
  }

  .hero-title {
    font-size: clamp(var(--text-4xl), 13vw, var(--text-6xl));
  }

  .hero-bio {
    font-size: var(--text-base);
  }

  .hero-stats {
    gap: var(--space-5);
    flex-wrap: wrap;
  }

  /* Scroll indicator verbergen op mobiel */
  .scroll-indicator {
    display: none;
  }

  /* Projecten grid: 1 kolom */
  .projects-grid {
    grid-template-columns: 1fr;
  }

  /* Showcase: 1 kolom */
  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .showcase-card--tall {
    grid-row: span 1;
  }

  .showcase-card--wide {
    grid-column: span 1;
  }

  /* Demo hover cards smaller */
  .demo-hover-cards {
    gap: var(--space-3);
  }

  .hover-demo-card--1,
  .hover-demo-card--3 {
    width: 80px;
    height: 65px;
  }

  .hover-demo-card--2 {
    width: 75px;
    height: 75px;
  }

  /* Contact */
  .contact-intro .btn {
    width: 100%;
    justify-content: center;
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .footer-links {
    gap: var(--space-1);
  }

}

/* ---- Klein mobiel: max 480px ---- */
@media (max-width: 480px) {

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    gap: var(--space-4);
  }

  .hero-stat-divider {
    height: 30px;
  }

  .stat-number {
    font-size: var(--text-2xl);
  }

  .section-title {
    font-size: clamp(var(--text-3xl), 11vw, var(--text-4xl));
  }

  .project-card {
    padding: var(--space-6);
  }

  .contact-info-block {
    padding: var(--space-6);
  }

}

/* ============================================================
   EINDE VAN STYLE.CSS
   Bewerk de :root variabelen bovenaan om kleuren en spacing
   eenvoudig te wijzigen voor de hele website.
   ============================================================ */


/* ============================================================
   SHOWCASE — CODE WINDOWS
   Styles voor de Klantio CRM code snippet cards.
   Voeg dit toe onderaan style.css
   ============================================================ */

/* ---- Code window container (vervangt demo-floating etc.) ---- */
.demo-code {
  flex: 1;
  min-height: 200px;
  background: #0d0d0c;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}

/* Subtiel grid op achtergrond van code demo */
.demo-code::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255 255 255 / 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255 255 255 / 0.02) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Wide variant: geen min-height, vult flexbox */
.demo-code--wide {
  min-height: unset;
  flex: 1;
  align-self: stretch;
}

/* ---- Code window (macOS-stijl) ---- */
.code-window {
  width: 100%;
  max-width: 340px;
  background: #181817;
  border: 1px solid rgba(255 255 255 / 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0 0 0 / 0.4),
    0 12px 40px -8px rgba(0 0 0 / 0.7);
  position: relative;
  z-index: 1;
}

/* Balk met dots + bestandsnaam */
.code-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255 255 255 / 0.04);
  border-bottom: 1px solid rgba(255 255 255 / 0.06);
}

.code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.code-dot--red {
  background: #ff5f57;
}

.code-dot--yellow {
  background: #febc2e;
}

.code-dot--green {
  background: #28c840;
}

.code-filename {
  margin-left: var(--space-2);
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  color: rgba(255 255 255 / 0.3);
  letter-spacing: 0.02em;
}

/* Code inhoud */
.code-body {
  padding: var(--space-4) var(--space-5);
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1.75;
  color: rgba(255 255 255 / 0.7);
  overflow: hidden;
}

/* Elke individuele regel */
.code-line {
  display: block;
  white-space: pre;
  opacity: 0;
  transform: translateY(5px);
  animation: codeLineIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered entry: elke regel 90ms later */
.cl--1 {
  animation-delay: 0.05s;
}

.cl--2 {
  animation-delay: 0.14s;
}

.cl--3 {
  animation-delay: 0.23s;
}

.cl--4 {
  animation-delay: 0.32s;
}

.cl--5 {
  animation-delay: 0.41s;
}

.cl--6 {
  animation-delay: 0.50s;
}

.cl--7 {
  animation-delay: 0.59s;
}

.cl--8 {
  animation-delay: 0.68s;
}

.cl--9 {
  animation-delay: 0.77s;
}

.cl--10 {
  animation-delay: 0.86s;
}

.cl--11 {
  animation-delay: 0.95s;
}

.cl--12 {
  animation-delay: 1.04s;
}

.cl--13 {
  animation-delay: 1.13s;
}

.cl--14 {
  animation-delay: 1.22s;
}

/* Keyframe: slide-up + fade-in per regel */
@keyframes codeLineIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Syntax highlighting tokens ---- */

/* keyword: for, const, if, return, let, await */
.ck {
  color: #c792ea;
  /* paars */
  font-weight: 600;
}

/* function name */
.cf {
  color: #82aaff;
  /* blauw */
}

/* variable / identifier */
.cv {
  color: #eeffff;
  /* bijna-wit */
}

/* string / template literal */
.cs {
  color: #c3e88d;
  /* groen */
}

/* comment */
.cm {
  color: #546e7a;
  /* donkergrijs */
  font-style: italic;
}

/* number */
.cn {
  color: #f78c6c;
  /* oranje */
}

/* inline code in labels */
.showcase-card-label code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  background: rgba(255 255 255 / 0.08);
  border: 1px solid rgba(255 255 255 / 0.1);
  border-radius: 4px;
  padding: 1px 5px;
  color: #c3e88d;
}

/* ---- Wide card: horizontale layout ---- */
.showcase-card-inner--horizontal {
  flex-direction: row !important;
  align-items: stretch;
}

.showcase-card-label--side {
  flex: 1;
  border-top: none !important;
  border-left: 1px solid var(--color-border-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}

/* ---- Score visualisatie (Card 4) ---- */
.snippet-score-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 10px;
  background: rgba(255 255 255 / 0.03);
  border: 1px solid rgba(255 255 255 / 0.06);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.score-row:hover {
  background: rgba(255 255 255 / 0.07);
}

.score-url {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  color: rgba(255 255 255 / 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.score-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  text-align: center;
  min-width: 50px;
}

.score-badge--high {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.score-badge--mid {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.score-badge--low {
  background: rgba(255 255 255 / 0.04);
  color: rgba(255 255 255 / 0.25);
  border: 1px solid rgba(255 255 255 / 0.08);
}

/* ---- Responsive aanpassingen voor code cards ---- */
@media (max-width: 768px) {

  /* Brede card: terug naar verticaal op mobiel */
  .showcase-card-inner--horizontal {
    flex-direction: column !important;
  }

  .showcase-card-label--side {
    border-left: none !important;
    border-top: 1px solid var(--color-border-dark) !important;
  }

  .demo-code--wide {
    min-height: 200px;
  }

  /* Code window iets kleiner op kleine schermen */
  .code-body {
    font-size: 11px;
  }

  .code-window {
    max-width: 100%;
  }
}

/* ============================================================
   EINDE — code window styles
   ============================================================ */