/* =========================================================
   intelliVision1 — Design System
   Palette: Deep navy primary, cyan/teal accent
   Typography: Inter (body) + Space Grotesk (display) via Fontshare/Google
   ========================================================= */

:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-surface: #f5f8fc;
  --color-surface-alt: #eef3fa;
  --color-border: #e4e9f1;
  --color-text: #141821;         /* anthracite / near-black (logo lettering) */
  --color-text-muted: #45505f;
  --color-text-faint: #808b9b;

  --color-navy: #0a1f3d;
  --color-navy-deep: #06142a;
  --color-navy-light: #1a3766;

  /* Primary accent derived from the VISION1 cobalt blue (#2c4b9b) */
  --color-accent: #2c4b9b;
  --color-accent-hover: #223b7d;
  --color-accent-dark: #1b2c5e;
  --color-accent-light: #e6ecf9;  /* pale periwinkle */

  /* Secondary teal (kept from prior brand, used sparingly for washes) */
  --color-teal: #00a5b8;
  --color-teal-soft: rgba(0, 165, 184, 0.09);

  --color-success: #2c7a3e;
  --color-warning: #b35900;
  --color-error: #b8334a;

  /* Type scale */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.625rem;
  --text-hero: 3.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.03), 0 2px 8px -2px rgba(13, 27, 42, 0.05);
  --shadow-md: 0 6px 16px -6px rgba(13, 27, 42, 0.08), 0 16px 40px -12px rgba(13, 27, 42, 0.10);
  --shadow-lg: 0 20px 48px -16px rgba(10, 31, 61, 0.16);

  /* CI pastel washes (logo-blue forward, low opacity) */
  --pastel-blue: rgba(44, 75, 155, 0.12);
  --pastel-peri: rgba(90, 110, 200, 0.13);
  --pastel-cyan: rgba(0, 165, 184, 0.09);
  --pastel-navy: rgba(10, 31, 61, 0.06);
  /* Back-compat aliases used by the appended preview layer */
  --pastel-teal: rgba(44, 75, 155, 0.12);
  --pastel-lilac: rgba(90, 110, 200, 0.10);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Base */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text);
}

h1 { font-size: clamp(2rem, 4.4vw, var(--text-hero)); font-weight: 600; }
h2 { font-size: clamp(1.625rem, 3.2vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { color: var(--color-text-muted); }
strong { color: var(--color-text); font-weight: 600; }

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Layout helpers */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
@media (min-width: 768px) {
  .container, .container-narrow { padding: 0 var(--space-6); }
}

.section { padding: var(--space-9) 0; }
.section--sm { padding: var(--space-7) 0; }
.section--alt { background: var(--color-surface); }
.section--navy { background: var(--color-navy); color: #e6ebf2; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: #b5c0cf; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  display: inline-block;
}
.section--navy .eyebrow { color: #5fd4e0; }

.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  line-height: 1.6;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container.site-header__inner { max-width: 1440px; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 68px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
}
.logo svg { width: 32px; height: 32px; flex-shrink: 0; }
.logo span em { font-style: normal; color: var(--color-accent); font-weight: 600; }
.logo { flex-shrink: 0; }
.brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}
/* Header wordmark (aspect ~12.4:1): legible without the tagline */
.brand-logo--wordmark { height: 24px; }
@media (max-width: 480px) { .brand-logo--wordmark { height: 21px; } }
/* Footer full logo incl. tagline (aspect ~7.5:1) */
.logo--footer .brand-logo--full { height: 46px; }
@media (max-width: 480px) { .logo--footer .brand-logo--full { height: 38px; } }

.nav {
  display: none;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}
.nav a {
  font-size: 0.8125rem;
  color: var(--color-text);
  font-weight: 500;
  padding: 7px 9px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
  position: relative;
}
.nav a:hover { color: var(--color-accent); background: var(--color-surface); }
.nav a[aria-current="page"] { color: var(--color-accent); background: var(--color-accent-light); }

.header-cta { display: none; }

@media (min-width: 1200px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: #fff;
}
.menu-toggle svg { width: 18px; height: 18px; }

@media (min-width: 1200px) {
  .menu-toggle { display: none; }
}

/* Mobile nav */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--color-border);
  background: #fff;
  padding: var(--space-4) 0 var(--space-5);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0; }
.mobile-nav a {
  display: block;
  padding: 12px var(--space-5);
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 500;
  border-bottom: 1px solid var(--color-surface-alt);
}
.mobile-nav a:hover { color: var(--color-accent); }
.mobile-nav .btn { margin: var(--space-4) var(--space-5) 0; display: inline-flex; }

@media (min-width: 1200px) {
  .mobile-nav { display: none !important; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: -0.005em;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(0, 122, 137, 0.45);
}
.btn--ghost {
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: #fff;
}
.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.btn--navy {
  background: var(--color-navy);
  color: #fff;
}
.btn--navy:hover { background: var(--color-navy-light); }
.btn--lg { padding: 14px 26px; font-size: var(--text-base); }
.btn .arrow { transition: transform var(--transition-fast); }
.btn:hover .arrow { transform: translateX(3px); }
@media (max-width: 520px) {
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
  .btn-row,
  .hero__ctas,
  .page-hero__ctas {
    width: 100%;
  }
}

.site-header .header-cta { display: none; }
@media (min-width: 1200px) {
  .site-header .header-cta { display: inline-flex; }
}

/* Hero */
.hero {
  position: relative;
  padding: var(--space-9) 0 var(--space-9);
  overflow: hidden;
  background:
    radial-gradient(1100px 600px at 90% -10%, rgba(0, 165, 184, 0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(10, 31, 61, 0.06), transparent 60%),
    var(--color-bg);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 980px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}
.hero__title { margin-bottom: var(--space-5); }
.hero__sub { margin-bottom: var(--space-6); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.hero__trust {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-3);
  max-width: 48ch;
}
.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 10;
  background: var(--color-surface);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Grids */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.grid > * { min-width: 0; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card h3, .card p { overflow-wrap: break-word; }
/* Stretch only when used inside a grid row that should equalize heights */
.cards > .card,
.grid > .card,
.modules > .card,
.values > .card,
.scenarios > .card {
  height: 100%;
}
.card:hover {
  border-color: #c4d3e3;
  box-shadow: var(--shadow-md);
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-accent-light);
  color: var(--color-accent-hover);
  margin-bottom: var(--space-4);
}
.card__icon svg { width: 22px; height: 22px; }
.card h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.card p { font-size: var(--text-sm); }
.card__link {
  margin-top: auto;
  padding-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  transition: gap var(--transition-fast);
}
.card__link:hover { gap: 10px; }

/* Feature row (image + text alternating) */
.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .feature--reverse .feature__media { order: 2; }
}
.feature__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }

/* Section banner figure (full-width image inside a section) */
.section-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
}
.section-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* List with checkmark */
.checklist {
  display: grid;
  gap: var(--space-3);
}
.checklist li {
  position: relative;
  padding-left: 34px;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.55;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  background: var(--color-accent-light);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px no-repeat;
  background-color: var(--color-accent);
  border-radius: 5px;
}
.section--navy .checklist li { color: #e0e6ef; }
.section--navy .checklist li::before { background-color: #5fd4e0; }

/* Stats / value props row */
.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 760px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-border);
}
.value__badge {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.value h3 { font-size: var(--text-base); margin-bottom: var(--space-2); font-weight: 600; }
.value p { font-size: var(--text-sm); }

/* Company history */
.history-intro {
  max-width: 72ch;
}
.history-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
@media (min-width: 720px) {
  .history-stats { grid-template-columns: repeat(3, 1fr); }
}
.history-stats div {
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.history-stats strong {
  display: block;
  font-family: var(--font-display);
  color: var(--color-navy);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  margin-bottom: 8px;
}
.history-stats span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.timeline {
  position: relative;
  display: grid;
  gap: var(--space-5);
}
.timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 22px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-accent), rgba(0, 165, 184, 0.08));
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
}
.timeline__year {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--color-surface);
}
.timeline__content {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.timeline__content h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.timeline__content p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (min-width: 860px) {
  .timeline {
    gap: var(--space-6);
  }
  .timeline::before {
    left: 92px;
  }
  .timeline__item {
    grid-template-columns: 144px 1fr;
  }
  .timeline__year {
    width: 72px;
    height: 72px;
    font-size: var(--text-base);
    margin-left: 56px;
  }
  .timeline__content {
    padding: var(--space-6);
  }
}

/* CTA block */
.cta-block {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 240px at 80% 0%, rgba(0, 165, 184, 0.25), transparent 60%);
  pointer-events: none;
}
.cta-block > * { position: relative; }
.cta-block h2 { color: #fff; margin-bottom: var(--space-3); }
.cta-block p { color: #b5c0cf; max-width: 52ch; margin: 0 auto var(--space-6); }
.cta-block .btn--primary { background: #fff; color: var(--color-navy); }
.cta-block .btn--primary:hover { background: var(--color-accent-light); color: var(--color-navy); }
.cta-block .btn--ghost { border-color: rgba(255,255,255,0.3); color: #fff; background: transparent; }
.cta-block .btn--ghost:hover { border-color: #fff; color: #fff; }
.cta-block .btn-row { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* FAQ */
.faq { display: grid; gap: var(--space-3); }
.faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--transition-fast);
}
.faq details[open] { border-color: var(--color-accent); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-base);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  color: var(--color-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-accent);
  transition: transform var(--transition-fast);
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* Tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: #fff;
}
table th, table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
table th { background: var(--color-surface); font-weight: 600; color: var(--color-text); }
table tr:last-child td { border-bottom: 0; }

/* Breadcrumb */
.crumb {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.crumb a { color: var(--color-text-muted); }
.crumb a:hover { color: var(--color-accent); }

/* Page hero (sub-pages) */
.page-hero {
  padding: var(--space-8) 0 var(--space-7);
  background:
    linear-gradient(180deg, var(--color-surface) 0%, transparent 100%);
  border-bottom: 1px solid var(--color-border);
}
.page-hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .page-hero__inner { grid-template-columns: 1.1fr 0.9fr; }
}
.page-hero__sub { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 58ch; margin-top: var(--space-4); }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.page-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Two-column content layout */
.two-col {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
}
.two-col > * { min-width: 0; }
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

/* Module list (sub-services) */
.modules { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .modules { grid-template-columns: 1fr 1fr; } }
.module {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  background: #fff;
}
.module h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.module h3::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.module ul li {
  font-size: var(--text-sm);
  padding: 4px 0;
  color: var(--color-text-muted);
}

/* Editorial / support sections */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.article-meta span {
  display: inline-flex;
  align-items: center;
}
.article-meta span + span::before {
  content: "•";
  margin-right: 8px;
  color: var(--color-accent);
}
.article-body {
  display: grid;
  gap: var(--space-5);
}
.article-body h2 {
  margin-top: var(--space-4);
}
.article-body ul {
  display: grid;
  gap: var(--space-3);
  padding-left: 1.2rem;
  list-style: disc;
  color: var(--color-text-muted);
}
.support-panel {
  border: 1px solid rgba(0, 165, 184, 0.35);
  background:
    radial-gradient(520px 240px at 100% 0%, rgba(0, 165, 184, 0.16), transparent 60%),
    #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.support-panel h3 {
  margin-bottom: var(--space-3);
}
.support-steps {
  counter-reset: support-step;
  display: grid;
  gap: var(--space-4);
}
.support-steps li {
  counter-increment: support-step;
  position: relative;
  padding-left: 48px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.support-steps li::before {
  content: counter(support-step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
}

/* Landing pages */
.landing-hero .support-panel {
  align-self: start;
}
.page-hero h1,
.page-hero__sub { overflow-wrap: break-word; hyphens: auto; }
.campaign-note {
  margin-top: var(--space-5);
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.partner-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.partner-card--highlight {
  border-color: rgba(0, 165, 184, 0.5);
  box-shadow: 0 18px 45px rgba(0, 67, 96, 0.12);
}
.partner-card__label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.partner-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.partner-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.mini-list {
  display: grid;
  gap: 8px;
  margin-top: var(--space-4);
  padding-left: 1.1rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.decision-list {
  display: grid;
  gap: var(--space-4);
}
.decision-list div {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: rgba(255,255,255,0.06);
}
.decision-list strong,
.decision-list span {
  display: block;
}
.decision-list strong {
  color: #fff;
  margin-bottom: 6px;
}
.decision-list span {
  color: #b5c0cf;
  font-size: var(--text-sm);
}

/* Managed XDR landing page */
.xdr-architecture {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 960px) {
  .xdr-architecture {
    grid-template-columns: 1fr 1.15fr 0.85fr;
  }
}
.xdr-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.xdr-signal-card,
.xdr-outcomes div {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  padding: var(--space-4);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-sm);
}
.xdr-core {
  min-height: 210px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(460px 240px at 80% 0%, rgba(95, 212, 224, 0.25), transparent 60%),
    linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  color: #fff;
  padding: var(--space-7) var(--space-6);
  display: grid;
  align-content: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-lg);
}
.xdr-core span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.xdr-core strong {
  color: #d6f1f4;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.xdr-outcomes {
  display: grid;
  gap: var(--space-3);
}
.xdr-outcomes div {
  border-color: rgba(0, 165, 184, 0.35);
  background: var(--color-accent-light);
  color: var(--color-navy);
}
.xdr-flow {
  counter-reset: xdr-step;
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 760px) {
  .xdr-flow {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1100px) {
  .xdr-flow {
    grid-template-columns: repeat(3, 1fr);
  }
}
.xdr-flow__step {
  counter-increment: xdr-step;
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: var(--space-6);
  min-height: 170px;
  box-shadow: var(--shadow-sm);
}
.xdr-flow__step::before {
  content: counter(xdr-step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-sm);
}
.xdr-flow__step strong,
.xdr-flow__step span {
  display: block;
}
.xdr-flow__step strong {
  margin-bottom: var(--space-2);
  color: var(--color-text);
}
.xdr-flow__step span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Hybride KI-Architektur (Schichtenmodell) */
.ki-arch {
  display: grid;
  gap: var(--space-4);
}
.ki-arch__layer {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.ki-arch__layer--accent {
  border-color: rgba(0, 165, 184, 0.4);
  background:
    radial-gradient(420px 200px at 85% 0%, rgba(95, 212, 224, 0.18), transparent 60%),
    linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
}
.ki-arch__layer--accent .ki-arch__label { color: #5fd4e0; }
.ki-arch__layer--accent .ki-arch__nodes span {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #eef4ff;
}
.ki-arch__layer--local {
  border-color: rgba(44, 122, 62, 0.35);
  background: #f1f7f2;
}
.ki-arch__layer--local .ki-arch__label { color: var(--color-success); }
.ki-arch__split {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 760px) {
  .ki-arch__split { grid-template-columns: 1fr 1fr; }
}
.ki-arch__cross {
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-accent-light);
  padding: var(--space-5);
}
.ki-arch__cross .ki-arch__label { color: var(--color-navy); }
.ki-arch__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.ki-arch__nodes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ki-arch__nodes span {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  padding: 6px var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ki-arch__label { overflow-wrap: anywhere; }

/* Form (contact) */
.form {
  display: grid;
  gap: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-width: 0;
  max-width: 100%;
}
.form__row { display: grid; gap: var(--space-4); min-width: 0; }
@media (min-width: 600px) {
  .form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.form input,
.form textarea,
.form select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--text-sm);
  color: var(--color-text);
  overflow-wrap: break-word;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: 0;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 165, 184, 0.15);
}
.form textarea { min-height: 130px; resize: vertical; }
.form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.form__consent input { width: 18px; height: 18px; accent-color: var(--color-accent); }

/* Footer */
.site-footer {
  background: var(--color-navy-deep);
  color: #aab4c2;
  padding: var(--space-8) 0 var(--space-6);
  margin-top: var(--space-9);
}
.site-footer a { color: #d3dae3; transition: color var(--transition-fast); }
.site-footer a:hover { color: var(--color-accent); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.footer-col h4 {
  color: #fff;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-col ul { display: grid; gap: 8px; }
.footer-col li, .footer-col p { font-size: var(--text-sm); }
.footer-brand { max-width: 38ch; font-size: var(--text-sm); margin-top: var(--space-4); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: #7c8493;
}

/* Reveal on scroll (lightweight) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Utilities */
.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.hidden { display: none; }

/* =====================================================================
   Microsoft-365-inspired preview layer
   (airy, bright, centered hero; pill badges; soft cards; segmented nav)
   Appended override layer — production rules above are unchanged.
   ===================================================================== */

/* --- Eyebrow as a soft pill badge --- */
.eyebrow {
  background: var(--pastel-teal);
  color: var(--color-accent-hover);
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.08em;
}
.section--navy .eyebrow {
  background: rgba(95, 212, 224, 0.14);
  color: #7fe0ec;
}

/* --- Homepage hero: centered, airy, generous whitespace --- */
.hero {
  padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(3rem, 6vw, 6rem);
  background:
    radial-gradient(1200px 620px at 50% -20%, var(--pastel-teal), transparent 62%),
    radial-gradient(900px 520px at 12% 120%, var(--pastel-lilac), transparent 60%),
    radial-gradient(760px 420px at 88% 110%, var(--pastel-navy), transparent 60%),
    var(--color-bg);
}
.hero .hero__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: clamp(2.25rem, 4vw, 3.25rem);
  max-width: 1000px;
  margin-inline: auto;
}
.hero .hero__title {
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.hero .hero__sub {
  font-size: var(--text-lg);
  max-width: 62ch;
  margin-inline: auto;
}
.hero .hero__ctas { justify-content: center; }
.hero .hero__trust {
  border-left: none;
  padding-left: 0;
  max-width: 52ch;
  margin-inline: auto;
  text-align: center;
}
.hero .hero__media {
  width: 100%;
  max-width: 940px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

/* --- Cards: softer, rounder, gentle hover lift --- */
.card {
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-light);
}
.card__icon {
  background: var(--pastel-teal);
  border-radius: 14px;
}

/* --- Value tiles pick up the same soft treatment --- */
.value { box-shadow: var(--shadow-sm); }

/* --- Page heroes (14 subpages): brighter, more generous, CI chevron wash --- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.75rem, 5vw, 4.75rem) 0 clamp(2.5rem, 4vw, 3.75rem);
  background:
    radial-gradient(960px 480px at 84% -28%, var(--pastel-blue), transparent 60%),
    radial-gradient(680px 360px at 4% 120%, var(--pastel-peri), transparent 62%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
}
/* Paired forward chevrons echoing the logo mark (consistent across all heroes) */
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%;
  right: -3%;
  width: min(34vw, 420px);
  height: min(34vw, 420px);
  background:
    linear-gradient(135deg, transparent 47%, rgba(44, 75, 155, 0.09) 47% 54%, transparent 54%),
    linear-gradient(135deg, transparent 63%, rgba(0, 165, 184, 0.07) 63% 70%, transparent 70%);
  transform: rotate(-8deg);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero__media {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

/* --- Section rhythm: a touch more breathing room --- */
.section { padding: clamp(3.25rem, 6vw, 6rem) 0; }

/* --- Segmented/tab nav rhythm --- */
@media (min-width: 1200px) {
  .nav {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px;
    gap: 1px;
  }
  .nav a { padding: 7px 9px; }
  .nav a:hover { background: #fff; box-shadow: var(--shadow-sm); }
  .nav a[aria-current="page"] { background: #fff; color: var(--color-accent-hover); box-shadow: var(--shadow-sm); }
}
/* Compact the wide logo in the tight 1200–1439 band so the full nav + CTA fit */
@media (min-width: 1200px) and (max-width: 1439px) {
  .brand-logo--wordmark { height: 21px; }
  .nav a { padding: 7px 8px; font-size: 0.78125rem; }
}
@media (min-width: 1440px) { .nav a { padding: 7px 11px; } }

/* --- Buttons: keep pills, add subtle blue depth --- */
.btn--primary { box-shadow: 0 6px 16px -8px rgba(44, 75, 155, 0.55); }
.btn--primary:hover { box-shadow: 0 10px 22px -10px rgba(44, 75, 155, 0.62); }

/* =====================================================================
   intelliVision1 CI background visuals + motion layer
   Abstract "forward / play" chevron & ribbon shapes inspired by the
   logo's double-play mark. Pure CSS, no assets, non-interactive.
   ===================================================================== */

/* Hero: layered blue/periwinkle/cyan washes + abstract chevron ribbons */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1150px 600px at 50% -18%, var(--pastel-blue), transparent 62%),
    radial-gradient(820px 480px at 10% 118%, var(--pastel-peri), transparent 60%),
    radial-gradient(720px 420px at 92% 108%, var(--pastel-cyan), transparent 60%),
    var(--color-bg);
}
/* Paired forward chevrons echoing the logo mark, top-right */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6%;
  right: -4%;
  width: min(46vw, 560px);
  height: min(46vw, 560px);
  background:
    linear-gradient(135deg, transparent 46%, rgba(44, 75, 155, 0.10) 46% 54%, transparent 54%),
    linear-gradient(135deg, transparent 62%, rgba(0, 165, 184, 0.08) 62% 70%, transparent 70%);
  transform: rotate(-8deg);
  pointer-events: none;
}
/* Soft forward-motion ribbon band, lower-left */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -12%;
  bottom: -18%;
  width: min(60vw, 720px);
  height: min(34vw, 420px);
  background: conic-gradient(from 210deg at 40% 50%, rgba(90, 110, 200, 0.10), transparent 38%, rgba(44, 75, 155, 0.08) 62%, transparent 80%);
  border-radius: 50% 50% 46% 54% / 60% 58% 42% 40%;
  filter: blur(2px);
  pointer-events: none;
}

/* CTA block: subtle chevron ribbon overlay on the dark panel */
.cta-block { position: relative; overflow: hidden; isolation: isolate; }
.cta-block::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 40%, rgba(120, 150, 240, 0.10) 40% 47%, transparent 47%),
    linear-gradient(115deg, transparent 55%, rgba(0, 165, 184, 0.10) 55% 62%, transparent 62%);
  pointer-events: none;
}
.cta-block > * { position: relative; z-index: 1; }

/* Reusable floating chevron accent for section headers where wanted */
.section--navy { position: relative; overflow: hidden; }
.section--navy::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -6%;
  width: 420px;
  height: 420px;
  z-index: 0;
  background: linear-gradient(135deg, transparent 48%, rgba(120, 150, 240, 0.10) 48% 55%, transparent 55%);
  transform: rotate(-6deg);
  pointer-events: none;
}
.section--navy > .container { position: relative; z-index: 1; }

/* =====================================================================
   Enhanced scroll-in motion (bottom-to-top, staggered)
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* Stagger for grouped items is applied via inline transition-delay in JS
   (--reveal-delay), so cards in the same row cascade bottom-to-top. */
.reveal { transition-delay: var(--reveal-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
  .hero::after { filter: none; }
}

/* =====================================================================
   CTA-Block als helle Glasflaeche
   Appended override layer — die Regeln oberhalb bleiben unveraendert.

   Ausgangslage: .cta-block war ein dunkles Navy-Panel, steht aber auf
   allen Seiten in hellen Sektionen (<section class="section">). Die
   Eyebrow-Pille der Microsoft-Ebene oben (.eyebrow: helle CI-Flaeche,
   Schrift --color-accent-hover) war auf diesem Navy praktisch unlesbar.
   Der Block wird deshalb zur weissen Glasflaeche mit dezenter 1px-Kante,
   dunkler Typo und CI-blauem Primaerbutton.

   Dunkle Umgebungen: .cta-block--navy stellt die frueheren dunklen
   Farbwerte wieder her (opt-in im Markup, aktuell nirgends verwendet).
   ===================================================================== */
.cta-block {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(244, 248, 255, 0.94) 100%);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--color-text);
}
.cta-block::before {
  background: radial-gradient(600px 240px at 80% 0%, var(--pastel-blue), transparent 62%);
}
.cta-block::after {
  background:
    linear-gradient(115deg, transparent 40%, rgba(44, 75, 155, 0.06) 40% 47%, transparent 47%),
    linear-gradient(115deg, transparent 55%, rgba(0, 165, 184, 0.07) 55% 62%, transparent 62%);
}
.cta-block h2 { color: var(--color-navy); }
.cta-block p { color: var(--color-text-muted); }
/* Eyebrow explizit, damit sie nicht von der Reihenfolge der Ebenen abhaengt */
.cta-block .eyebrow {
  background: var(--pastel-teal);
  color: var(--color-accent-hover);
}
.cta-block .btn--primary { background: var(--color-accent); color: #fff; }
.cta-block .btn--primary:hover { background: var(--color-accent-hover); color: #fff; }
.cta-block .btn--ghost {
  background: #fff;
  border-color: rgba(10, 31, 61, 0.28);
  color: var(--color-text);
}
.cta-block .btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Dunkle Variante fuer bewusst dunkle Umgebungen */
.cta-block--navy {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  color: #fff;
}
.cta-block--navy::before {
  background: radial-gradient(600px 240px at 80% 0%, rgba(0, 165, 184, 0.25), transparent 60%);
}
.cta-block--navy::after {
  background:
    linear-gradient(115deg, transparent 40%, rgba(120, 150, 240, 0.10) 40% 47%, transparent 47%),
    linear-gradient(115deg, transparent 55%, rgba(0, 165, 184, 0.10) 55% 62%, transparent 62%);
}
.cta-block--navy h2 { color: #fff; }
.cta-block--navy p { color: #b5c0cf; }
.cta-block--navy .eyebrow { background: rgba(95, 212, 224, 0.14); color: #7fe0ec; }
.cta-block--navy .btn--primary { background: #fff; color: var(--color-navy); }
.cta-block--navy .btn--primary:hover { background: var(--color-accent-light); color: var(--color-navy); }
.cta-block--navy .btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.34); color: #fff; }
.cta-block--navy .btn--ghost:hover { border-color: #fff; color: #fff; }

/* =====================================================================
   Cards: Textfarben nicht mehr aus der Umgebung erben
   Appended override layer — die Regeln oberhalb bleiben unveraendert.

   Ausgangslage: .card hat eine weisse Flaeche, aber keine eigene
   Schriftfarbe. In einem dunklen Abschnitt erben die Karten deshalb
   .section--navy h3 { color: #fff } und .section--navy p { color: #b5c0cf }
   und zeigen weisse Schrift auf weisser Flaeche (managed-services.php,
   Abschnitt "Nutzen"). Ein Inline-background:#fff behebt das nicht, weil
   nur die Flaeche gesetzt wird, nicht die Schrift.

   Die Karte bringt ihre Farben nun selbst mit. Sie stehen als Variablen
   bereit, damit dunkle oder glasige Karten sie geschlossen umschalten
   koennen, ohne jede einzelne Regel zu wiederholen (.card--navy,
   .card--glass unten).
   ===================================================================== */
.card {
  --card-fg: var(--color-text);
  --card-heading: var(--color-navy);
  --card-muted: var(--color-text-muted);
  --card-link: var(--color-accent);
  color: var(--card-fg);
}
.card h3,
.card h4,
.card strong { color: var(--card-heading); }
.card p,
.card li,
.card small { color: var(--card-muted); }
.card .card__link,
.card a:not(.btn) { color: var(--card-link); }
.card .eyebrow { color: var(--color-accent-hover); }

/* Dunkle Karte: schaltet nur die vier Variablen um */
.card--navy {
  --card-fg: #e6ebf2;
  --card-heading: #fff;
  --card-muted: #b5c0cf;
  --card-link: #7fe0ec;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  border-color: rgba(255, 255, 255, 0.14);
}
.card--navy:hover { border-color: rgba(255, 255, 255, 0.28); }
.card--navy .card__icon { background: rgba(255, 255, 255, 0.12); color: #fff; }
.card--navy .eyebrow { background: rgba(95, 212, 224, 0.14); color: #7fe0ec; }

/* Glasige Karte auf dunklem Grund: Flaeche transluzent, Schrift hell */
.card--glass {
  --card-fg: #e6ebf2;
  --card-heading: #fff;
  --card-muted: #cbd5e4;
  --card-link: #7fe0ec;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.card--glass:hover { border-color: rgba(255, 255, 255, 0.32); }
.card--glass .card__icon { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ===================================================================
   Datenschutz / Consent (Einblendung + Formular auf der Datenschutzseite)
   Angehaengte Ebene – ueberschreibt nichts Bestehendes.
   =================================================================== */

.ry-consent[hidden] { display: none; }
.ry-consent {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.ry-consent__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 42, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ry-consent__dialog {
  position: relative;
  width: 100%;
  max-width: 46rem;
  max-height: 92vh;
  overflow-y: auto;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  backdrop-filter: saturate(150%) blur(16px);
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  animation: ry-consent-in 0.28s ease-out both;
}
@keyframes ry-consent-in {
  from { transform: translateY(1.5rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.ry-consent__title {
  margin: 0;
  font-size: var(--text-xl, 1.25rem);
  color: var(--color-navy);
}
.ry-consent__text {
  margin: 0.6rem 0 0;
  font-size: var(--text-sm, 0.9375rem);
  color: var(--color-text-muted);
}
.ry-consent__list,
.consent-form__list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.ry-consent__item,
.consent-form__list > li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.ry-consent__label,
.consent-form__list label {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
}
.consent-form__list label { cursor: pointer; }
.ry-consent__label input,
.consent-form__list input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
}
.ry-consent__label input:disabled,
.consent-form__list input:disabled { cursor: not-allowed; opacity: 0.75; }
.ry-consent__body,
.consent-form__list label > span:last-child {
  display: block;
}
.ry-consent__body strong,
.consent-form__list label strong {
  display: block;
  color: var(--color-navy);
  font-size: var(--text-sm, 0.9375rem);
}
.ry-consent__hint,
.consent-form__hint {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.ry-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}
.ry-consent__actions .btn { flex: 1 1 12rem; justify-content: center; }
.ry-consent__links {
  margin: 0.9rem 0 0;
  font-size: var(--text-xs, 0.8125rem);
  color: var(--color-text-faint);
}
.ry-consent__links a { color: var(--color-accent); }
.ry-consent :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
html.ry-consent-open { overflow: hidden; }

/* Link „Datenschutzeinstellungen“ im Inhaltsbereich */
.section a[data-ry-consent-open],
.page-hero a[data-ry-consent-open] { color: var(--color-accent); }

/* Serverseitiges Formular auf der Datenschutzseite (funktioniert ohne JS) */
.consent-form {
  margin-top: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 1px 2px rgba(6, 20, 42, 0.05);
}
.consent-form .btn-row { margin-top: 1rem; }
.consent-form__status {
  margin: 0.9rem 0 0;
  font-size: var(--text-xs, 0.8125rem);
  color: var(--color-text-muted);
}

@media (min-width: 48rem) {
  .ry-consent { align-items: center; padding: 1.5rem; }
  .ry-consent__dialog {
    padding: 1.75rem;
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }
  .ry-consent__actions .btn { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ry-consent__dialog { animation: none; }
}

/* ==========================================================================
   Rechtstexte (Impressum / Datenschutz) – redaktionelle Blöcke
   Der Sanitizer entfernt style- und class-Attribute aus dem gepflegten HTML.
   Aussehen und Abstände entstehen deshalb ausschließlich über diese Ebene.
   ========================================================================== */

.legal-body {
  display: grid;
  gap: var(--space-4);
}
.legal-body p,
.legal-body li {
  color: var(--color-text-muted);
}
.legal-body h3,
.legal-body h4 {
  color: var(--color-navy);
  margin-top: var(--space-2);
}
.legal-body ul,
.legal-body ol {
  display: grid;
  gap: var(--space-3);
  padding-left: 1.2rem;
  color: var(--color-text-muted);
}
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }

/* Basis-Regel ist a { color: inherit } – Links im gepflegten HTML brauchen
   daher eine eigene Auszeichnung, weil sie kein style-Attribut tragen können. */
.legal-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-body a:hover { color: var(--color-accent-hover); }

.legal-body code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.legal-body--muted p,
.legal-body--muted li {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ===========================================================================
   Ebene: Wartungsmodus-Hinweis und Fehlerseite 404
   Angehängt, damit die bestehenden Regeln unverändert bleiben. Nach dem
   Einspielen RY_VERSION erhöhen, sonst liefert der Browser-Cache altes CSS.
   =========================================================================== */

/* --- Hinweisstreifen: nur für die angemeldete Administration sichtbar ----- */
.maint-bar {
  background: var(--color-warning);
  color: #fff;
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: var(--space-3) 0;
  position: relative;
  z-index: 60;
}
.maint-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.maint-bar__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .maint-bar__dot { animation: maint-pulse 2s ease-in-out infinite; }
}
@keyframes maint-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.maint-bar__links {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.maint-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.maint-bar a:hover { color: #ffe9c9; }
@media (max-width: 640px) {
  .maint-bar__links { margin-left: 0; width: 100%; }
}

/* --- Adminbereich: Statuskarte Wartungsmodus ------------------------------ */
.maint-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.maint-state__badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.maint-state__badge--on  { background: var(--color-warning); color: #fff; }
.maint-state__badge--off { background: var(--color-success); color: #fff; }
.maint-state__meta { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Fehlerseite 404 ------------------------------------------------------ */
.page-hero > .container-narrow { position: relative; z-index: 1; }
.err404 .page-hero__sub { margin-left: auto; margin-right: auto; }
.err404__ctas { justify-content: center; }
.err404__path {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  overflow-wrap: anywhere;
}
.err404__path code {
  padding: 0.15em 0.45em;
  border-radius: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.err404__suggest,
.err404__map {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.err404__suggest { grid-template-columns: 1fr; }
.err404__map { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.err404__suggest a,
.err404__map a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: 600;
}
.err404__suggest a:hover,
.err404__map a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
}