/* ============================================================
   schababerle.digital — App stylesheet
   Design System tokens + components + website layer + neural mesh.
   Dark-first, Steel Blue, terminal motif. Single file, plain CSS.
   ============================================================ */

/* ============================================================
   TOKENS — colors
   ============================================================ */
:root {
  /* Brand: Steel Blue (primary) */
  --blue-50:  #eef3fb;
  --blue-100: #dae5f5;
  --blue-200: #b6cbe9;
  --blue-300: #8aaadd;
  --blue-400: #5e8cd6;
  --blue-500: #3f72c8;
  --blue-600: #345fae;
  --blue-700: #2b4d8c;
  --blue-800: #243c6a;
  --blue-900: #1b2c4c;

  /* Brand: Azure (secondary) */
  --azure-50:  #ecf4fe;
  --azure-100: #d6e8fd;
  --azure-200: #aed0fb;
  --azure-300: #7fb2f6;
  --azure-400: #5398ee;
  --azure-500: #2f80e6;
  --azure-600: #2566c4;
  --azure-700: #1f5099;
  --azure-800: #1b3f72;
  --azure-900: #16304d;

  --sky-light: #a9c6ef;
  --blue-deep: #2a4f9e;

  /* Neutrals: blue-tinted slate */
  --slate-0:   #ffffff;
  --slate-25:  #f8fafc;
  --slate-50:  #f1f5f9;
  --slate-100: #e3e9f1;
  --slate-200: #cbd5e3;
  --slate-300: #a6b3c7;
  --slate-400: #7e8aa0;
  --slate-500: #606b80;
  --slate-600: #48505f;
  --slate-700: #333a47;
  --slate-800: #182236;
  --slate-850: #131b2b;
  --slate-900: #0e1626;
  --slate-950: #0a0f1a;

  /* Status */
  --success-500: #3fae7a;
  --success-600: #2f9265;
  --warning-500: #d7a23a;
  --warning-600: #b9852a;
  --danger-500:  #d65151;
  --danger-600:  #b53d3d;
  --info-500:    #3f72c8;
  --info-600:    #345fae;

  /* Signature gradients */
  --gradient-brand: linear-gradient(135deg, #a9c6ef 0%, #6a93d8 34%, #3f72c8 64%, #2a4f9e 100%);
  --gradient-brand-soft: linear-gradient(135deg, #5e8cd6 0%, #345fae 100%);
  --gradient-text: linear-gradient(120deg, #8aaadd 0%, #3f72c8 55%, #2a4f9e 100%);
  --gradient-glow: radial-gradient(60% 60% at 30% 20%, rgba(63,114,200,0.34) 0%, rgba(94,140,214,0.12) 45%, transparent 75%);

  /* Semantic — dark (default) */
  --bg-base:        var(--slate-950);
  --bg-surface:     var(--slate-900);
  --bg-raised:      var(--slate-850);
  --bg-card:        var(--slate-800);
  --bg-inset:       #070b14;
  --bg-overlay:     rgba(10, 15, 26, 0.72);

  --text-strong:    var(--slate-50);
  --text-body:      #c2ccda;
  --text-muted:     var(--slate-400);
  --text-faint:     var(--slate-500);
  --text-on-brand:  #ffffff;

  --border-subtle:  rgba(120, 150, 200, 0.12);
  --border-default: rgba(120, 150, 200, 0.20);
  --border-strong:  rgba(120, 150, 200, 0.34);

  --brand-primary:   var(--blue-500);
  --brand-primary-hover: var(--blue-400);
  --brand-secondary: var(--azure-500);
  --brand-ring:      rgba(63, 114, 200, 0.45);

  --surface-code:    var(--slate-950);
  --text-code:       #d3dcea;
  --code-comment:    #677488;
  --code-keyword:    #8aaadd;
  --code-string:     #7fb2f6;
  --code-function:   #5e8cd6;
  --code-prompt:     #5e8cd6;
}

/* ============================================================
   TOKENS — typography
   ============================================================ */
:root {
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:1rem;
  --text-md:  1.125rem;
  --text-lg:  1.375rem;
  --text-xl:  1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;
  --text-4xl: 4rem;
  --text-5xl: 5.5rem;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.18em;
}

/* ============================================================
   TOKENS — spacing & layout
   ============================================================ */
:root {
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   2.5rem;
  --space-8:   3rem;
  --space-9:   4rem;
  --space-10:  5rem;
  --space-12:  6rem;
  --space-16:  8rem;

  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1240px;
  --gutter:        clamp(1.25rem, 5vw, 4rem);
  --section-y:     clamp(4rem, 9vw, 8rem);

  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;
  --hit-target:   44px;
}

/* ============================================================
   TOKENS — effects
   ============================================================ */
:root {
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-round:50%;

  --border-hair: 1px;
  --border-thick:2px;

  --shadow-xs:  0 1px 2px rgba(6, 10, 18, 0.40);
  --shadow-sm:  0 2px 8px rgba(6, 10, 18, 0.45);
  --shadow-md:  0 10px 26px rgba(6, 10, 18, 0.50);
  --shadow-lg:  0 22px 56px rgba(6, 10, 18, 0.58);
  --shadow-xl:  0 36px 88px rgba(6, 10, 18, 0.62);

  --glow-primary: 0 0 0 1px rgba(63,114,200,0.35), 0 12px 40px rgba(63,114,200,0.30);
  --glow-accent:  0 0 0 1px rgba(47,128,230,0.35), 0 12px 40px rgba(47,128,230,0.28);
  --ring-focus:   0 0 0 3px var(--brand-ring);

  --inset-field: inset 0 1px 2px rgba(6, 10, 18, 0.35);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
  --dur-slower: 600ms;

  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
}

/* ============================================================
   COMPONENT — Badge
   ============================================================ */
.sd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight); line-height: 1; white-space: nowrap;
  border-radius: var(--radius-pill); border: 1px solid transparent;
}
.sd-badge--dot::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sd-badge--neutral { background: rgba(120,150,200,0.10); color: var(--text-body); border-color: var(--border-default); }
.sd-badge--brand   { background: rgba(63,114,200,0.16); color: var(--blue-300); border-color: rgba(63,114,200,0.30); }
.sd-badge--accent  { background: rgba(47,128,230,0.16); color: var(--azure-300); border-color: rgba(47,128,230,0.30); }
.sd-badge--success { background: rgba(63,174,122,0.15); color: #6fcda0; border-color: rgba(63,174,122,0.32); }
.sd-badge--warning { background: rgba(215,162,58,0.15); color: #e0bd6b; border-color: rgba(215,162,58,0.32); }
.sd-badge--danger  { background: rgba(214,81,81,0.15); color: #e88; border-color: rgba(214,81,81,0.32); }
.sd-badge--solid   { background: var(--gradient-brand-soft); color: #fff; border-color: transparent; }

/* ============================================================
   COMPONENT — Button
   ============================================================ */
.sd-btn {
  --_h: var(--control-h-md);
  --_px: var(--space-5);
  --_fs: var(--text-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--_h); padding: 0 var(--_px);
  font-family: var(--font-sans); font-size: var(--_fs); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight); line-height: 1; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
  text-decoration: none; user-select: none;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.sd-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.sd-btn:active { transform: translateY(1px); }
.sd-btn[disabled], .sd-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.sd-btn--sm { --_h: var(--control-h-sm); --_px: var(--space-4); --_fs: var(--text-xs); }
.sd-btn--lg { --_h: var(--control-h-lg); --_px: var(--space-6); --_fs: var(--text-base); }
.sd-btn--block { width: 100%; }
.sd-btn__icon { display: inline-flex; font-size: 1.05em; }

.sd-btn--primary { background: var(--brand-primary); color: var(--text-on-brand); }
.sd-btn--primary:hover { background: var(--brand-primary-hover); box-shadow: var(--glow-primary); }

.sd-btn--gradient { background: var(--gradient-brand-soft); color: #fff; background-size: 140% 140%; background-position: 0% 50%; }
.sd-btn--gradient:hover { background-position: 100% 50%; box-shadow: var(--glow-accent); }

.sd-btn--secondary { background: var(--bg-card); color: var(--text-strong); border-color: var(--border-default); }
.sd-btn--secondary:hover { background: var(--bg-raised); border-color: var(--border-strong); }

.sd-btn--outline { background: transparent; color: var(--text-strong); border-color: var(--border-strong); }
.sd-btn--outline:hover { border-color: var(--brand-primary); color: var(--blue-300); background: rgba(63,114,200,0.08); }

.sd-btn--ghost { background: transparent; color: var(--text-body); }
.sd-btn--ghost:hover { background: rgba(63,114,200,0.10); color: var(--text-strong); }

.sd-btn--danger { background: var(--danger-500); color: #fff; }
.sd-btn--danger:hover { background: var(--danger-600); }

/* ============================================================
   COMPONENT — Card
   ============================================================ */
.sd-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-5);
  color: var(--text-body);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-out);
}
.sd-card--pad-sm { padding: var(--space-4); }
.sd-card--pad-lg { padding: var(--space-6); }
.sd-card--raised { box-shadow: var(--shadow-md); }
.sd-card--interactive { cursor: pointer; }
.sd-card--interactive:hover {
  border-color: var(--border-strong); transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.sd-card--gradient { border-color: transparent; background:
  linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
  var(--gradient-brand-soft) border-box; }
.sd-card--glow { box-shadow: var(--glow-primary); }

.sd-card__media { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; aspect-ratio: 16/9; }
.sd-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-card__eyebrow { font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--blue-300); margin-bottom: 8px; }
.sd-card__title { font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--text-lg); color: var(--text-strong); margin: 0 0 6px; letter-spacing: var(--tracking-tight); }
.sd-card__body { font-size: var(--text-sm); line-height: var(--leading-normal); margin: 0; }
.sd-card__footer { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-3); }

/* ============================================================
   COMPONENT — Input
   ============================================================ */
.sd-field { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-sans); }
.sd-field__label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.sd-field__label .sd-field__req { color: var(--azure-400); margin-left: 3px; }
.sd-field__wrap { position: relative; display: flex; align-items: center; }
.sd-field__icon { position: absolute; left: 14px; color: var(--text-muted); font-size: var(--text-sm); pointer-events: none; }
.sd-input {
  width: 100%; height: var(--control-h-md); box-sizing: border-box;
  padding: 0 14px; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-strong);
  background: var(--bg-inset); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--inset-field); outline: none;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.sd-input::placeholder { color: var(--text-faint); }
.sd-input:hover { border-color: var(--border-strong); }
.sd-input:focus { border-color: var(--brand-primary); box-shadow: var(--ring-focus); }
.sd-input--has-icon { padding-left: 38px; }
.sd-input:disabled { opacity: .5; cursor: not-allowed; }
textarea.sd-input { height: auto; min-height: 96px; padding: 10px 14px; resize: vertical; line-height: var(--leading-normal); }
.sd-field--error .sd-input { border-color: var(--danger-500); }
.sd-field--error .sd-input:focus { box-shadow: 0 0 0 3px rgba(214,81,81,0.30); }
.sd-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.sd-field--error .sd-field__hint { color: #e88; }

/* ============================================================
   COMPONENT — Tag
   ============================================================ */
.sd-tag {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--text-body); background: var(--bg-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  line-height: 1; white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.sd-tag__icon { font-size: 1.05em; color: var(--blue-300); display: inline-flex; }
.sd-tag--active, .sd-tag--interactive:hover {
  border-color: rgba(63,114,200,0.45); color: var(--text-strong);
  background: rgba(63,114,200,0.10);
}
.sd-tag--interactive { cursor: pointer; }
.sd-tag--removable .sd-tag__x { margin-left: 2px; cursor: pointer; opacity: .6; color: var(--text-muted); }
.sd-tag--removable .sd-tag__x:hover { opacity: 1; color: var(--text-strong); }

/* ============================================================
   COMPONENT — Terminal
   ============================================================ */
.sd-term {
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.75;
  background: var(--surface-code); color: var(--text-code);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.sd-term__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: rgba(255,255,255,0.025);
  border-bottom: 1px solid var(--border-subtle);
}
.sd-term__dot { width: 11px; height: 11px; border-radius: 50%; }
.sd-term__dot--r { background: #e0686b; }
.sd-term__dot--y { background: #d7a23a; }
.sd-term__dot--g { background: #3fae7a; }
.sd-term__title { margin-left: 8px; font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-tight); }
.sd-term__body { padding: var(--space-4) var(--space-5); }
.sd-term__line { white-space: pre-wrap; word-break: break-word; }
.sd-term__line + .sd-term__line { margin-top: 2px; }
.sd-term__prompt { color: var(--code-prompt); user-select: none; margin-right: 8px; }
.sd-term__cmd { color: var(--text-code); }
.sd-term__kw { color: var(--code-keyword); }
.sd-term--out { color: var(--code-comment); }
.sd-term--link { color: var(--code-function); text-decoration: none; }
.sd-term--link:hover { text-decoration: underline; }
.sd-term__cursor { display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
  background: var(--code-prompt); margin-left: 4px; animation: sd-term-blink 1.05s steps(1) infinite; }
@keyframes sd-term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sd-term__cursor { animation: none; } }

/* ============================================================
   WEBSITE LAYER (sx-*)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#sx-scroll { height: 100%; overflow-y: auto; scroll-behavior: smooth; position: relative; }
@media (prefers-reduced-motion: reduce) { #sx-scroll { scroll-behavior: auto; } }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(63, 114, 200, 0.34); color: #fff; }

[data-accent="azure"] {
  --brand-primary: var(--azure-500);
  --brand-primary-hover: var(--azure-400);
  --gradient-brand-soft: linear-gradient(135deg, #5398ee 0%, #1f5099 100%);
  --gradient-text: linear-gradient(120deg, #7fb2f6 0%, #2f80e6 55%, #1f5099 100%);
  --gradient-glow: radial-gradient(60% 60% at 30% 20%, rgba(47,128,230,0.32) 0%, rgba(83,152,238,0.12) 45%, transparent 75%);
  --code-prompt: #5398ee;
}

.sx-container { width: min(var(--container-xl), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.sx-section { padding-block: var(--section-y); position: relative; }
.sx-section--alt { background: var(--bg-surface); border-block: 1px solid var(--border-subtle); }

.sx-eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-300);
  margin: 0 0 var(--space-4); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
}
.sx-eyebrow::before { content: "$"; color: var(--code-prompt); font-weight: var(--fw-bold); }

.sx-h2 {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(2rem, 4.5vw, var(--text-3xl)); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tighter); color: var(--text-strong);
  margin: 0 0 var(--space-4); text-wrap: balance;
}
.sx-h3 {
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-xl);
  color: var(--text-strong); margin: 0 0 var(--space-3); letter-spacing: var(--tracking-tight);
}
.sx-p {
  font-size: var(--text-md); line-height: var(--leading-relaxed); margin: 0 0 var(--space-4);
  max-width: 62ch; text-wrap: pretty; color: var(--text-body);
}
.sx-p--lead { color: var(--text-muted); margin-bottom: 0; max-width: 64ch; }
.sx-grad { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-section__head { max-width: 64ch; margin-bottom: var(--space-8); }

/* reveal on scroll */
.sx-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.sx-reveal.is-in { opacity: 1; transform: none; }
.sx-reveal[data-d="1"] { transition-delay: .06s; }
.sx-reveal[data-d="2"] { transition-delay: .12s; }
.sx-reveal[data-d="3"] { transition-delay: .18s; }
.sx-reveal[data-d="4"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .sx-reveal { opacity: 1; transform: none; transition: none; } }

/* Header */
.sx-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.sx-header.is-scrolled {
  background: var(--bg-overlay); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border-subtle);
}
.sx-header__inner {
  width: min(var(--container-xl), 100%); margin-inline: auto;
  padding: var(--space-3) var(--gutter); display: flex; align-items: center; gap: var(--space-5);
}
.sx-brand { display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-md);
  color: var(--text-strong); letter-spacing: var(--tracking-tight); }
.sx-brand img { width: 36px; height: 36px; border-radius: var(--radius-sm); display: block; }
.sx-brand__dot { color: var(--azure-400); }
.sx-nav { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; }
.sx-nav__link {
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted);
  padding: 8px 12px; border-radius: var(--radius-sm); position: relative; white-space: nowrap;
  transition: color var(--dur-base), background var(--dur-base);
}
.sx-nav__link::after {
  content: ""; position: absolute; left: 12px; right: 100%; bottom: 5px; height: 1.5px;
  background: var(--brand-primary); border-radius: 2px; transition: right var(--dur-base) var(--ease-out);
}
.sx-nav__link:hover { color: var(--text-strong); }
.sx-nav__link:hover::after { right: 12px; }
.sx-header__cta { margin-left: var(--space-2); }
@media (max-width: 760px) { .sx-nav { display: none; } }

/* Hero — base */
.sx-hero { position: relative; overflow: hidden; }
.sx-hero__glow {
  position: absolute; inset: -30% -10% auto -10%; height: 150%;
  background: var(--gradient-glow); pointer-events: none; z-index: 0;
}
.sx-hero[data-glow="off"] .sx-hero__glow { display: none; }
.sx-hero__grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(120,150,200,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,150,200,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%);
}
.sx-hero__inner { position: relative; z-index: 1; width: min(var(--container-xl), 100%);
  margin-inline: auto; padding-inline: var(--gutter); }

.sx-avail {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); white-space: nowrap;
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-muted); padding: 6px 13px 6px 11px; border: 1px solid var(--border-default);
  border-radius: var(--radius-pill); background: var(--bg-card);
}
.sx-avail__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success-500);
  box-shadow: 0 0 0 0 rgba(63,174,122,0.6); animation: sx-pulse 2.4s var(--ease-out) infinite; }
@keyframes sx-pulse {
  0% { box-shadow: 0 0 0 0 rgba(63,174,122,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(63,174,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,174,122,0); }
}
@media (prefers-reduced-motion: reduce) { .sx-avail__dot { animation: none; } }

.sx-hero__role { font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--text-lg); color: var(--text-body); margin: var(--space-4) 0 0; }
.sx-hero__sep { color: var(--text-faint); margin-inline: 8px; }
.sx-hero__lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-muted);
  max-width: 50ch; margin: var(--space-5) 0 var(--space-6); text-wrap: pretty; }
.sx-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

.sx-hero__metrics { display: flex; gap: var(--space-7); flex-wrap: wrap; }
.sx-hero__metric .k { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-xl); line-height: 1; color: var(--text-strong); letter-spacing: var(--tracking-tight); }
.sx-hero__metric .v { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted);
  margin-top: 8px; letter-spacing: var(--tracking-wide); }

/* Hero A: Split */
.sx-heroA__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center; padding-block: clamp(3rem, 8vw, 6.5rem) var(--section-y);
}
.sx-heroA__title {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(3rem, 7vw, var(--text-5xl)); line-height: 0.96;
  letter-spacing: var(--tracking-tighter); color: var(--text-strong);
  margin: var(--space-5) 0 var(--space-3);
}
.sx-heroA .sx-hero__metrics { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.sx-heroA__terminal { filter: drop-shadow(0 30px 60px rgba(6,10,18,0.55)); }

/* About */
.sx-about__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.sx-stats { display: flex; gap: var(--space-7); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
.sx-stat__k { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xl);
  line-height: 1; color: var(--text-strong); letter-spacing: var(--tracking-tight); }
.sx-stat__v { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); margin-top: 8px; letter-spacing: var(--tracking-wide); }

.sx-portrait { position: relative; }
.sx-portrait__frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5;
  background:
    linear-gradient(180deg, var(--bg-raised), var(--bg-card)) padding-box,
    var(--gradient-brand-soft) border-box;
  border: 1px solid transparent; box-shadow: var(--shadow-lg);
}
.sx-portrait__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(63,114,200,0.22), transparent 65%),
    linear-gradient(180deg, transparent 38%, rgba(10,14,22,0.45) 82%, rgba(10,14,22,0.7) 100%);
  mix-blend-mode: normal;
}
.sx-portrait__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
  filter: grayscale(1) contrast(1.08) brightness(0.82); }
.sx-portrait__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--gradient-brand-soft); opacity: 0.16; mix-blend-mode: color;
}
.sx-portrait__badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-strong); white-space: nowrap;
  background: var(--bg-overlay); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 7px 11px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.sx-portrait__badge i { color: var(--blue-300); }

/* Services */
.sx-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.sx-services__grid > .sd-card { height: 100%; display: flex; flex-direction: column; }
.sx-services__grid > .sd-card > .sd-card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.sx-svc { display: flex; flex-direction: column; flex: 1 1 auto; }
.sx-svc__icon {
  width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center;
  font-size: var(--text-lg); color: var(--text-on-brand); background: var(--gradient-brand-soft);
  box-shadow: var(--glow-primary); margin-bottom: var(--space-5);
}
.sx-svc__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-lg);
  color: var(--text-strong); margin: 0 0 var(--space-2); letter-spacing: var(--tracking-tight); }
.sx-svc__body { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); margin: 0 0 var(--space-5); min-height: 9.5em; }
.sx-svc__list { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-direction: column; gap: 10px;
  padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.sx-svc__list li { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--text-body); }
.sx-svc__list li i { color: var(--blue-300); font-size: var(--text-xs); width: 12px; }

/* Projekte */
.sx-proj__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.sx-proj__media { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2rem; color: var(--text-on-brand); }
.sx-proj__media[data-tint="a"] { background: linear-gradient(135deg, #3f72c8, #2a4f9e); }
.sx-proj__media[data-tint="b"] { background: linear-gradient(135deg, #5e8cd6, #345fae); }
.sx-proj__media[data-tint="c"] { background: linear-gradient(135deg, #2f80e6, #1f5099); }
.sx-proj__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }

/* Kontakt */
.sx-contact { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.sx-contact__copy .sd-term { margin-top: var(--space-6); }
.sx-contact__socials { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.sx-contact__socials a {
  width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center;
  font-size: var(--text-md); color: var(--text-muted); background: var(--bg-card);
  border: 1px solid var(--border-default); transition: all var(--dur-base) var(--ease-standard);
}
.sx-contact__socials a:hover { color: var(--text-strong); border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--glow-primary); }

.sx-contact__form-wrap {
  background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, var(--space-7)); box-shadow: var(--shadow-md);
}
.sx-form { display: flex; flex-direction: column; gap: var(--space-4); }
.sx-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.sx-contact__success { text-align: center; padding: var(--space-6) var(--space-4); }
.sx-contact__success-icon { font-size: 2.5rem; color: var(--success-500); margin-bottom: var(--space-4); }

/* Footer */
.sx-footer { border-top: 1px solid var(--border-subtle); background: var(--bg-surface); padding-block: var(--space-9) var(--space-5); }
.sx-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--space-7); padding-bottom: var(--space-7); }
.sx-footer__brand .sx-brand { margin-bottom: var(--space-4); }
.sx-footer__tag { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); max-width: 34ch; margin: 0; }
.sx-footer__h { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--text-faint); margin-bottom: var(--space-4); }
.sx-footer__col a, .sx-footer__col span { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm);
  color: var(--text-muted); padding: 6px 0; transition: color var(--dur-base); }
.sx-footer__col a { cursor: pointer; }
.sx-footer__col a:hover { color: var(--text-strong); }
.sx-footer__col a i { color: var(--text-faint); width: 16px; text-align: center; }
.sx-footer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); flex-wrap: wrap; }
.sx-footer__bar span { font-size: var(--text-xs); color: var(--text-faint); }
.sx-footer__mono { font-family: var(--font-mono); }

/* Responsive */
@media (max-width: 1000px) {
  .sx-services__grid, .sx-proj__grid { grid-template-columns: repeat(2, 1fr); }
  .sx-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
@media (max-width: 820px) {
  .sx-heroA__grid, .sx-about__grid, .sx-contact { grid-template-columns: 1fr; }
  .sx-heroA__grid { gap: var(--space-7); }
  .sx-about__grid { gap: var(--space-7); }
  .sx-portrait { max-width: 380px; }
}
@media (max-width: 560px) {
  .sx-services__grid, .sx-proj__grid { grid-template-columns: 1fr; }
  .sx-form__row { grid-template-columns: 1fr; }
  .sx-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .sx-hero__metrics, .sx-stats { gap: var(--space-5); }
}

/* ============================================================
   NEURAL MESH (nn-*)
   ============================================================ */
.nn-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 50% 45%, rgba(63,114,200,0.18) 0%, transparent 62%),
    radial-gradient(120% 120% at 80% 110%, rgba(42,79,158,0.22) 0%, transparent 60%),
    var(--bg-base);
  border: var(--border-hair) solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  cursor: grab;
  touch-action: none;
}
.nn-stage.is-drag { cursor: grabbing; }
@media (max-width: 720px) { .nn-stage { aspect-ratio: 1 / 1; } }

.nn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.nn-layer { position: absolute; inset: 0; pointer-events: none; }

.nn-node { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform, opacity; }
.nn-node__dot {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-round);
  background:
    radial-gradient(circle at 34% 28%, rgba(120,160,225,0.45) 0%, rgba(40,62,104,0.85) 48%, rgba(16,22,38,0.92) 100%);
  border: var(--border-hair) solid rgba(120,150,200,0.45);
  color: #cfe0fb;
  pointer-events: auto; cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 14px rgba(63,114,200,0.22), inset 0 1px 2px rgba(180,205,245,0.25);
  transition: border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
  will-change: transform;
}
.nn-node--leaf .nn-node__dot { width: 38px; height: 38px; font-size: 15px; }
.nn-node--branch .nn-node__dot {
  width: 58px; height: 58px; font-size: 22px;
  background:
    radial-gradient(circle at 34% 28%, rgba(150,185,240,0.55) 0%, rgba(52,78,130,0.9) 50%, rgba(20,30,52,0.95) 100%);
  border-color: rgba(140,170,220,0.6);
  color: #eaf1fd;
  box-shadow: 0 0 20px rgba(63,114,200,0.32), inset 0 1px 3px rgba(180,205,245,0.3);
}
.nn-node--origin .nn-node__dot {
  width: 26px; height: 26px;
  border-radius: var(--radius-round);
  background: radial-gradient(circle at 50% 50%, #dfeafd 0%, var(--blue-400) 42%, var(--blue-700) 100%);
  border: none;
  box-shadow: 0 0 18px rgba(94,140,214,0.85), 0 0 44px rgba(63,114,200,0.5);
  animation: nn-core-pulse 3.6s var(--ease-standard) infinite;
}
@keyframes nn-core-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(94,140,214,0.7), 0 0 36px rgba(63,114,200,0.4); }
  50%      { box-shadow: 0 0 24px rgba(120,160,225,0.95), 0 0 58px rgba(94,140,214,0.6); }
}
.nn-node--origin.is-active .nn-node__dot { box-shadow: 0 0 24px rgba(120,160,225,0.95), 0 0 58px rgba(94,140,214,0.6); }

.nn-node__dot:hover,
.nn-node.is-active .nn-node__dot {
  border-color: var(--blue-400); color: #fff; box-shadow: var(--glow-accent);
}
.nn-node.is-near .nn-node__dot { border-color: var(--blue-500); color: var(--blue-50); }

.nn-badge__logo { width: 16px; height: 16px; border-radius: 4px; display: block; }

.nn-node__tip {
  position: absolute; left: 0; bottom: 22px;
  transform: translate(-50%, 6px) scale(0.96);
  transform-origin: center bottom;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 13px; border-radius: var(--radius-pill);
  background: var(--bg-overlay);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: var(--border-hair) solid var(--border-strong);
  box-shadow: var(--shadow-md);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.01em;
  color: var(--text-strong);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: 5;
}
.nn-node__tip i { color: var(--blue-300); font-size: 13px; }
.nn-node__tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-1px);
  border: 6px solid transparent; border-top-color: var(--border-strong);
}
.nn-node__dot:hover + .nn-node__tip,
.nn-node.is-active .nn-node__tip { opacity: 1; transform: translate(-50%, 0) scale(1); }

.nn-badge {
  position: absolute; left: 50%; top: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--bg-overlay);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: var(--border-hair) solid var(--border-default);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  color: var(--text-muted); z-index: 6;
}
.nn-badge i { color: var(--blue-300); }

.nn-hint {
  position: absolute; right: 16px; bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  color: var(--text-faint); z-index: 6; pointer-events: none;
}
.nn-hint i { color: var(--blue-400); }
@media (prefers-reduced-motion: reduce) { .nn-hint::after { content: ""; } }

/* ============================================================
   MODALS (Impressum / Datenschutz) — sx-modal
   ============================================================ */
.sx-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-5); }
.sx-modal[hidden] { display: none; }
.sx-modal__backdrop { position: absolute; inset: 0; background: rgba(6,10,18,0.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sx-modal__dialog {
  position: relative; z-index: 1; width: min(720px, 100%); max-height: min(85vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
}
.sx-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle);
}
.sx-modal__title { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-xl); color: var(--text-strong); margin: 0; letter-spacing: var(--tracking-tight); }
.sx-modal__close {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  background: transparent; color: var(--text-muted); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-md);
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
}
.sx-modal__close:hover { color: var(--text-strong); border-color: var(--border-strong); background: rgba(63,114,200,0.10); }
.sx-modal__body { padding: var(--space-6); overflow-y: auto; }
.sx-modal__body p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0 0 var(--space-4); }
.sx-modal__body a { color: var(--blue-300); text-decoration: none; word-break: break-word; }
.sx-modal__body a:hover { text-decoration: underline; }
.sx-modal__body ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); color: var(--text-body); }
.sx-modal__body li { font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: 6px; }
.sx-modal__body .h5 { display: block; font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--fw-bold); color: var(--text-strong); margin: var(--space-6) 0 var(--space-3); }
.sx-modal__body .h6 { display: block; font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--fw-semibold); color: var(--text-strong); margin: var(--space-5) 0 var(--space-2); }
.sx-modal__body .fw-bold { font-weight: var(--fw-bold); }
.sx-modal__body .text-secondary { color: var(--text-muted); }
.sx-modal__body p:first-child { margin-top: 0; }