* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-lime: #B6FF2E;
  --color-black: #23262F;
  --color-white: #FFFFFF;
  --color-gray: #9A9DA6;
  --color-gray-light: #E4E4E7;
  --color-gray-dark: #2E323C;

  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-headline: 1.5rem;
  --font-size-eyebrow: 1.125rem;
  --font-size-body: 0.875rem;
  --font-size-label: 0.75rem;
  --font-size-badge: clamp(12px, var(--font-size-body), 15px);
  --line-height-tight: 1.4;
  --line-height-relaxed: 1.6;

  --spacing-tight: 4px;
  --spacing-sm: 8px;
  --spacing-icon-gap: 12px;
  --spacing-md: 16px;
  --spacing-loose: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;

  --radius-card: 16px;
  --radius-full: 50%;

  --size-badge: 40px;
  --size-avatar: 96px;
  --size-card: 320px;
  --width-reading-column: 600px;

  --duration-hover: 0.15s;
}

.tap-target {
  padding: var(--spacing-tight);
  line-height: var(--line-height-tight);
}

/* Home page layout */
.main-page {
  background: var(--color-black);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-system);
  padding: max(var(--spacing-lg), env(safe-area-inset-top)) max(var(--spacing-lg), env(safe-area-inset-right)) max(var(--spacing-lg), env(safe-area-inset-bottom)) max(var(--spacing-lg), env(safe-area-inset-left));
}
.main-page .wrapper { display: flex; flex-direction: column; align-items: center; }
.main-page .card { background: var(--color-black); border: 2px solid var(--color-lime); border-radius: var(--radius-card); padding: var(--spacing-2xl) var(--spacing-xl); width: var(--size-card); max-width: 100%; text-align: center; }
.main-page .avatar { width: var(--size-avatar); height: var(--size-avatar); border-radius: var(--radius-full); border: 2px solid var(--color-lime); margin: 0 auto var(--spacing-loose); overflow: hidden; background: var(--color-gray-dark); }
.main-page .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; color: var(--color-white); font-size: var(--font-size-label); text-align: center; }
.main-page .name { color: var(--color-white); font-size: var(--font-size-headline); font-weight: 700; margin: 0 0 var(--spacing-tight); }
.main-page .title { color: var(--color-gray); font-size: var(--font-size-body); margin-bottom: var(--spacing-lg); }
.main-page .links { display: flex; justify-content: center; align-items: center; gap: var(--spacing-icon-gap); }
.main-page .links a { width: var(--size-badge); height: var(--size-badge); border-radius: var(--radius-full); background: var(--color-lime); color: var(--color-black); display: flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; transition: opacity var(--duration-hover) ease; }
.main-page .links a:hover { opacity: 0.85; }
.main-page .links a:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
.main-page .badge-linkedin { font-size: var(--font-size-badge); }
.main-page .badge-xing { font-size: var(--font-size-badge); letter-spacing: -0.02em; }
.main-page .email-text { margin-top: var(--spacing-md); }
.main-page .email-text a { color: var(--color-gray); font-size: var(--font-size-body); text-decoration: none; display: inline-flex; align-items: center; gap: var(--spacing-tight); }
.main-page .email-text svg { flex-shrink: 0; }
.main-page .email-text a:hover,
.main-page .email-text a:focus-visible { color: var(--color-lime); }
.main-page .legal { margin-top: var(--spacing-loose); text-align: center; }
.main-page .legal a { color: var(--color-gray); font-size: var(--font-size-label); text-decoration: none; display: inline-block; margin: 0 var(--spacing-tight); }
.main-page .legal a:hover,
.main-page .legal a:focus-visible { color: var(--color-lime); }

/* Legal page layout */
html:has(body.legal-page) {
  scrollbar-gutter: stable;
}
.legal-page {
  background: var(--color-black);
  color: var(--color-gray-light);
  font-family: var(--font-family-system);
  line-height: var(--line-height-relaxed);
  text-wrap: pretty;
  padding: max(var(--spacing-3xl), env(safe-area-inset-top)) max(var(--spacing-loose), env(safe-area-inset-right)) max(var(--spacing-3xl), env(safe-area-inset-bottom)) max(var(--spacing-loose), env(safe-area-inset-left));
}
.legal-page main { max-width: var(--width-reading-column); margin: 0 auto; }
.legal-page h1 { color: var(--color-white); font-size: var(--font-size-headline); margin-bottom: var(--spacing-lg); }
.legal-page h2 { color: var(--color-lime); font-size: var(--font-size-eyebrow); margin: var(--spacing-xl) 0 var(--spacing-sm); scroll-margin-top: var(--spacing-lg); }
.legal-page p { color: var(--color-gray); font-size: var(--font-size-body); margin-bottom: var(--spacing-sm); }
.legal-page ul { margin: 0 0 var(--spacing-sm); padding-left: var(--spacing-lg); }
.legal-page li { color: var(--color-gray); font-size: var(--font-size-body); margin-bottom: var(--spacing-tight); }
.legal-page li:last-child { margin-bottom: 0; }
.legal-page a { color: var(--color-lime); text-decoration: none; }
.legal-page a:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
.legal-page .back { display: inline-block; margin-bottom: var(--spacing-xl); font-size: var(--font-size-body); color: var(--color-lime); text-decoration: none; }