/* Starter page: palette + AIGENTENWERK branding only. Layout and scroll animation stay untouched. */
:root {
  --bg: #fbfcff;
  --bg-tint: #edf4ff;
  --surface: #ffffff;
  --ink: #0a0c11;
  --muted: #667085;
  --line: #e6eaf2;
  --indigo: #3f6df6;
  --cyan: #36c9f6;
  --grad: linear-gradient(120deg, #254fd1 0%, #3f6df6 58%, #8b5cf6 100%);
  --green: #18a875;
  --red: #d92d20;
  --shadow: 0 12px 38px rgba(37, 55, 105, .09);
  --shadow-btn: 0 12px 30px rgba(63, 109, 246, .25);
  --primary: #3f6df6;
  --primary-d: #254fd1;
  --accent: #18a875;
  --ink-deep: #0a0c11;
  --gold: #8b5cf6;
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(88,147,255,.12), transparent 26rem),
    radial-gradient(circle at 94% 8%, rgba(139,92,246,.10), transparent 30rem),
    var(--bg);
}

.topbar { background: var(--grad); }
.header { background: rgba(255,255,255,.86); border-color: rgba(63,109,246,.10); }
.starter-brand { display: inline-flex; align-items: center; text-decoration: none; }
.starter-brand img { width: clamp(176px, 19vw, 238px); height: auto; }
.btn { background: var(--grad); box-shadow: var(--shadow-btn); }
.btn:hover { box-shadow: 0 15px 36px rgba(63,109,246,.32); }
.hero__canvas { background: var(--bg-tint); }
.hero__veil {
  background: linear-gradient(180deg, rgba(248,250,255,.58) 0%, rgba(248,250,255,.16) 45%, rgba(248,250,255,.48) 100%);
}
.hero__cap { text-shadow: 0 1px 24px rgba(248,250,255,.94); }
.card, .stack li { border-color: var(--line); box-shadow: var(--shadow); }
.compare__col--hard, .fit--no { background: #f8faff; }
.guarantee { background: #effaf6; border-color: #ccefe2; }
.footer__brand { display: inline-flex; justify-content: center; margin-bottom: 24px; }
.footer__brand img { width: min(250px, 72vw); height: auto; }

@media (max-width: 640px) {
  .starter-brand img { width: 164px; }
}