:root {
  --bg: #05070c;
  --text: #d8fff7;
  --muted: #8eb6c1;
  --dark: #00f5d4;
  --dark-soft: #7df9ff;
  --light-line: rgba(0, 245, 212, 0.26);
  --surface: rgba(6, 18, 27, 0.94);
  --footer-bg: #030409;
  --button: rgba(0, 245, 212, 0.08);
  --button-line: rgba(0, 180, 228, 0.58);
  --accent: #00b4e4;
  --accent-gold: #0e59a5;
  --accent-soft: rgba(0, 180, 228, 0.12);
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 4px;
  --shadow-card: 0 0 0 1px rgba(0, 245, 212, 0.2),
    0 18px 44px rgba(255, 61, 242, 0.13);
  --font-body: "Cascadia Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular",
    Consolas, "Liberation Mono", ui-monospace, monospace;
  --font-heading: var(--font-body);
  --container-max: 1180px;
  --container-gutter: 2rem;
  --section-block-space: 5rem;
  --section-block-space-sm: 3.5rem;
  --color-on-dark: #effffb;
  --color-on-dark-muted: rgba(216, 255, 247, 0.82);
  --color-on-dark-soft: rgba(142, 182, 193, 0.86);
  --color-on-dark-subtle: rgba(0, 245, 212, 0.72);
  --card-border: rgba(0, 245, 212, 0.3);
  --chip-border: rgba(249, 248, 113, 0.38);
  --link-accent-border: rgba(0, 180, 228, 0.85);
  --card-accent-shadow: inset 3px 0 0 rgba(0, 245, 212, 0.86),
    var(--shadow-card);
  --image-shadow: 0 0 0 1px rgba(0, 245, 212, 0.3),
    0 24px 54px rgba(0, 0, 0, 0.55);
  --button-radius: var(--radius-sm);
  --button-primary-bg: linear-gradient(
    135deg,
    #0e59a5 0%,
    #00b4e4 58%,
    #d8fff7 100%
  );
  --button-primary-border: rgba(0, 180, 228, 0.84);
  --button-primary-text: #030409;
  --button-ghost-border: rgba(0, 180, 228, 0.58);
  --button-ghost-text: #d8fff7;
  --button-ghost-border-strong: rgba(0, 180, 228, 0.82);
  --hero-image: url("/img/jaraco-software-engineers-verlauf-hero.jpg");
  --hero-background: linear-gradient(
      90deg,
      rgba(5, 7, 12, 0.92),
      rgba(5, 7, 12, 0.76)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 245, 212, 0.08) 0 1px,
      transparent 1px 42px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 61, 242, 0.05) 0 1px,
      transparent 1px 42px
    ),
    var(--hero-image) center/cover no-repeat;
  --hero-card-bg: rgba(3, 4, 9, 0.72);
  --hero-card-border: rgba(0, 245, 212, 0.46);
  --header-bg: rgba(3, 4, 9, 0.92);
  --header-bg-scrolled: rgba(3, 4, 9, 0.96);
  --header-shadow: 0 10px 34px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 245, 212, 0.2);
  --header-link: rgba(216, 255, 247, 0.86);
  --header-link-scrolled: #d8fff7;
  --header-control-border-scrolled: rgba(0, 245, 212, 0.46);
  --header-control-bg-scrolled: rgba(0, 245, 212, 0.08);
  --header-active-bg: rgba(255, 61, 242, 0.18);
  --section-soft-bg: linear-gradient(180deg, #07111b 0%, #05070c 100%);
  --section-warm-bg: linear-gradient(180deg, #101313 0%, #05070c 100%);
  --section-office-bg: linear-gradient(180deg, #05070c 0%, #07111b 100%);
  --section-dark-bg: linear-gradient(180deg, #030409 0%, #07111b 100%);
  --story-card-bg: linear-gradient(135deg, #06121b 0%, #0f1019 60%, #120817 100%);
  --slider-dot-bg: rgba(0, 245, 212, 0.28);
  --logo-slider-bg: rgba(216, 255, 247, 0.9);
  --cta-bg: linear-gradient(135deg, rgba(3, 4, 9, 0.96), rgba(12, 4, 18, 0.9)),
    repeating-linear-gradient(
      90deg,
      rgba(249, 248, 113, 0.11) 0 1px,
      transparent 1px 36px
    );
  --code-bg: #020309;
  --code-text: #9dffcb;
  --detail-pricing-bg: rgba(249, 248, 113, 0.08);
  --detail-pricing-border: rgba(249, 248, 113, 0.35);
}