/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
      --c-bg:      #f5f4f0;
      --c-surface: #ffffff;
      --c-ink:     #1a1a1a;
      --c-muted:   #6b6b6b;
      --c-accent:  #3a9cc8;
      --c-accent2: #2b7fa3;
      --c-logo:    #3a9cc8;
      --c-border:  #e2e1dc;
      --c-teal:    #0d9488;
      --c-violet:  #7c3aed;
      --c-amber:   #d97706;
      --c-rose:    #e11d48;
      --c-emerald: #059669;
      --c-sky:     #0284c7;
      --c-indigo:  #4f46e5;
      --c-orange:  #ea580c;
      --c-fuchsia: #c026d3;
      --radius:    12px;
      --max:       1100px;
      --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
      --font-mono: ui-monospace, 'Cascadia Code', 'Fira Mono', Consolas, monospace;
    }

/* ─── DARK MODE ─────────────────────────────────────────── */
    [data-theme="dark"] {
      --c-bg:      #121218;
      --c-surface: #1e1e2a;
      --c-ink:     #e8e8ec;
      --c-muted:   #9a9aaa;
      --c-border:  #2e2e3a;
    }

/* ─── RESET ──────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
      font-family: var(--font-body);
      background: var(--c-bg);
      color: var(--c-ink);
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

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

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

.logo__divider {
      width: 1.5px;
      height: 40px;
      background: #3a9cc8;
      opacity: 0.5;
      flex-shrink: 0;
    }

.logo__text {
      display: flex;
      flex-direction: column;
    }

.logo__wordmark {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: 1.45rem;
      letter-spacing: 0.01em;
      color: #3a9cc8;
      white-space: nowrap;
      line-height: 1.2;
    }

.logo__subtitle {
      font-family: var(--font-body);
      font-size: 0.65rem;
      font-weight: 400;
      color: var(--c-muted);
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

header .logo__subtitle { color: rgba(255,255,255,0.45); }

.logo {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      user-select: none;
      text-decoration: none;
    }

/* SVG-like icon built purely with CSS boxes */
    .logo__icon {
      position: relative;
      width: 46px;
      height: 46px;
      flex-shrink: 0;
    }

/* ─── HEADER / NAV ───────────────────────────────────────── */
    header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(22,22,30,0.97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 2px solid transparent;
      border-image: linear-gradient(90deg, var(--c-accent), var(--c-violet), var(--c-rose)) 1;
      box-shadow: 0 4px 24px rgba(0,0,0,0.20);
    }

nav {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 2rem;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }

header .logo__wordmark { color: #fff; }

header .logo__divider { background: rgba(255,255,255,0.3); }

.nav__links {
      display: flex;
      gap: 2rem;
      align-items: center;
      list-style: none;
    }

.nav__links a {
      font-size: 0.875rem;
      font-weight: 500;
      color: rgba(255,255,255,0.65);
      transition: color .2s;
    }

.nav__links a:hover { color: #fff; }

.nav__hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.4rem;
      color: rgba(255,255,255,0.85);
    }

.nav__hamburger svg {
      width: 26px;
      height: 26px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
    }

.nav__cta {
      background: var(--c-accent);
      color: #fff !important;
      padding: 0.45rem 1.1rem;
      border-radius: 999px;
      font-size: 0.82rem !important;
      font-weight: 600 !important;
      transition: opacity .2s !important;
    }

.nav__cta:hover { opacity: .85 !important; }

/* ─── FOOTER ─────────────────────────────────────────────── */
    footer {
      border-top: 1px solid var(--c-border);
      background: var(--c-surface);
      padding: 2rem;
    }

.footer-inner {
      max-width: var(--max);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

.footer-links {
      display: flex;
      gap: 1.5rem;
      list-style: none;
    }

.footer-links a {
      font-size: 0.82rem;
      color: var(--c-muted);
      transition: color .2s;
    }

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

.footer-copy {
      font-size: 0.78rem;
      color: var(--c-muted);
      font-family: var(--font-mono);
    }

/* ─── NETWORK CANVAS ─────────────────────────────────────── */
    #network-canvas {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      z-index: 0;
    }

body > * { position: relative; z-index: 1; }

body > header { z-index: 100; }

/* Make all section backgrounds semi-transparent so canvas shows through */
    body        { background: #eef4f8; }

header      { background: rgba(22,22,30,0.97) !important; }

footer      { background: rgba(255,255,255,0.80); }

/* ─── DARK MODE OVERRIDES ──────────────────────────────── */
    [data-theme="dark"] body,
    [data-theme="dark"]        { background: #0e0e14; }

[data-theme="dark"] .hero  { background: transparent; }

[data-theme="dark"] .partners   { background: rgba(30,30,42,0.80); }

[data-theme="dark"] #services   { background: rgba(30,30,42,0.60); }

[data-theme="dark"] .quote-band { background: linear-gradient(135deg, rgba(10,10,16,0.95), rgba(30,15,50,0.93)); }

[data-theme="dark"] #kontakt    { background: rgba(18,18,24,0.85); }

[data-theme="dark"] footer      { background: rgba(30,30,42,0.85); }

[data-theme="dark"] .metric     { background: rgba(30,30,42,0.85); }

[data-theme="dark"] .hero__card { background: rgba(30,30,42,0.85); }

[data-theme="dark"] .service-card {
      background: rgba(30,30,42,0.70);
      border-color: rgba(255,255,255,0.08);
    }

[data-theme="dark"] .testimonial-card {
      background: rgba(30,30,42,0.70);
      border-color: rgba(255,255,255,0.08);
    }

[data-theme="dark"] .service-card__visual {
      background: rgba(58,156,200,0.08);
      border-color: rgba(58,156,200,0.15);
    }

[data-theme="dark"] .monitor-graph { background: rgba(58,156,200,0.08); }

[data-theme="dark"] input,
    [data-theme="dark"] textarea {
      background: var(--c-surface);
      border-color: var(--c-border);
      color: var(--c-ink);
    }

[data-theme="dark"] .contact-row__icon {
      background: var(--c-surface);
      border-color: var(--c-border);
    }

[data-theme="dark"] .partner-chip {
      border-color: var(--c-border);
      color: var(--c-muted);
    }

[data-theme="dark"] .card-bar-track { background: rgba(58,156,200,0.15); }

/* Footer logo: switch white fills to dark in dark mode */
    [data-theme="dark"] footer .logo__icon rect[fill="white"] { fill: #1e1e2a; }

/* ─── THEME TOGGLE ─────────────────────────────────────── */
    .theme-toggle {
      background: none;
      border: 1.5px solid rgba(255,255,255,0.2);
      border-radius: 50%;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color .2s, background .2s;
      flex-shrink: 0;
    }

.theme-toggle:hover {
      border-color: rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.08);
    }

.theme-toggle svg {
      width: 18px;
      height: 18px;
      stroke: #fff;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

.theme-toggle .icon-moon { display: none; }

[data-theme="dark"] .theme-toggle .icon-sun { display: none; }

[data-theme="dark"] .theme-toggle .icon-moon { display: block; }