/* ==========================================================================
   claract — v10
   "Editorial / Klarheit" — clarus (klar) + agere (handeln). Magazine layout:
   Fraunces display serif, hairline rules, generous whitespace, type-led cover.
   Luminous azure carries Klarheit; a sparing amber spark carries Handlung.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
}

:root {
  /* Surface — clean paper, lots of it */
  --bg:          #ffffff;
  --bg-soft:     #f8fafc;        /* whisper-cool tint */
  --paper:       #ffffff;
  --paper-deep:  #f4f7fb;        /* alt sections */
  --paper-glass: rgba(255,255,255,0.7);

  /* Ink — crisp near-black for editorial contrast */
  --ink:         #0d1117;
  --ink-soft:    #2b313b;
  --ink-muted:   #5b6470;
  --ink-faint:   #97a0ad;
  --rule:        rgba(13,17,23,0.12);
  --rule-soft:   rgba(13,17,23,0.07);
  --rule-strong: rgba(13,17,23,0.20);

  /* Brand — one royal blue, aus dem claract-Logo abgeleitet (der klare Punkt
     in der Mitte des Pinselkreises). No second accent colour; the wordmark
     uses a subtle ink→blue gradient (--grad-word). */
  --c-indigo:      #396DDD;        /* brand primary — Logo-Punkt */
  --c-indigo-deep: #1c4ea8;        /* hover / depth (vormals Primärton) */
  --c-ink-brush:   #1F2B43;        /* Navy des Logo-Pinselstrichs */
  --c-violet:      #396DDD;        /* alias */
  --c-violet-deep: #1c4ea8;
  --c-cyan:        #2f6f99;        /* muted blue tint (sparingly) */
  --c-teal-deep:   #245a7e;
  --c-ochre:       #396DDD;        /* (retired amber — aliased to blue) */

  /* Aliases */
  --accent:      var(--c-indigo);
  --accent-deep: var(--c-indigo-deep);
  --accent-soft: rgba(57,109,221,0.08);
  --teal:        var(--c-cyan);
  --teal-deep:   var(--c-teal-deep);
  --teal-soft:   rgba(47,111,153,0.10);
  --gold:        var(--c-indigo);
  --gold-deep:   var(--c-indigo-deep);
  --gold-soft:   var(--accent-soft);

  /* Semantic aliases. Amber ist raus; die Startseite fuehrt ein einziges
     tiefes Blau. Die Branchenseiten ueberschreiben --c-indigo weiter unten
     je body[data-industry] — dort kommen bewusst auch warme Toene vor
     (Industrie: Bronze, Oeffentliche Verwaltung: Bordeaux), damit sich die
     Seiten auf den ersten Blick unterscheiden. Alle Aliase haengen an
     --c-indigo, deshalb reicht dort ein einziger Wert. */
  --clear:       var(--c-indigo);
  --clear-soft:  var(--accent-soft);
  --act:         var(--c-indigo);
  --act-soft:    var(--accent-soft);

  /* Gradients — deep royal blue, never rainbow. Used sparingly. */
  --grad-brand:  linear-gradient(135deg, #4A7BE4 0%, #1c4ea8 100%);
  --grad-brand-h:linear-gradient(90deg,  #396DDD 0%, #1c4ea8 100%);
  --grad-soft:   linear-gradient(135deg, rgba(57,109,221,0.06) 0%, rgba(47,111,153,0.05) 100%);
  /* Subtle wordmark gradient — used on every "claract" lockup */
  --grad-word:   linear-gradient(100deg, var(--ink) 0%, var(--c-indigo) 92%);
  /* Hero emphasis — luminous deep-blue→sky gradient (cool, no second hue) */
  --grad-accent: linear-gradient(100deg, #1c4ea8 0%, #396DDD 48%, #5FA9E6 100%);

  /* Status */
  --ok:          #16a34a;
  --no:          #dc2626;

  /* Shadow — restrained, neutral with a hint of azure */
  --shadow-card: 0 1px 2px rgba(13,17,23,0.04),
                 0 8px 24px -12px rgba(13,17,23,0.06),
                 0 24px 56px -28px rgba(57,109,221,0.08);
  --shadow-mock: 0 32px 72px -32px rgba(57,109,221,0.18),
                 0 12px 28px -16px rgba(13,17,23,0.10),
                 0 1px 2px rgba(13,17,23,0.04);
  --shadow-lift: 0 12px 24px -10px rgba(13,17,23,0.10),
                 0 32px 80px -28px rgba(57,109,221,0.14);

  /* Type — Fraunces display serif (character) + Inter body (the clear,
     neutral voice) + JetBrains Mono (kickers, captions, numbering). */
  --display: "Lora", "Iowan Old Style", Georgia, serif;
  --serif: "Lora", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --icons: "Material Symbols Rounded";

  /* Layout — wide editorial canvas; text measures stay constrained per-block */
  --col:        1340px;
  --col-narrow: 820px;
  --industry-banner-h: 44px;

  /* Radii — tightened for editorial crispness */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

html[data-lang="de"] [data-lang-content="en"],
html:not([data-lang="en"]) [data-lang-content="en"] { display: none; }
html[data-lang="en"] [data-lang-content="de"] { display: none; }

.icon {
  font-family: var(--icons);
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "FILL" 0, "GRAD" 0, "opsz" 24;
  display: inline-block;
  line-height: 1;
  user-select: none;
}

/* Reusable: gradient text */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Reusable: dot-grid bg */
.dot-grid {
  background-image:
    radial-gradient(circle, rgba(10,14,31,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}

/* =========================================================================
   NAV — sticky, frosted, subtle gradient hairline
   ========================================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* overlay: sits on top of the hero so the hero fills the full viewport underneath */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease, top 200ms var(--ease);
}
body.banner-visible .nav { top: var(--industry-banner-h); }
.nav.scrolled {
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--rule-soft);
}
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--grad-brand-h);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.nav.scrolled::after { opacity: 0.18; }
.nav-inner {
  max-width: var(--col);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px clamp(20px, 4vw, 48px);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 11px;
  color: var(--ink);
}
/* Lockup: Bildzeichen + Wortmarke. Eigener Flex-Container, damit die
   baseline-Ausrichtung von .brand (Trennstrich, "von OMM") erhalten bleibt. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.brand-mark {
  flex: none;
  width: 26px;
  height: 26px;
  display: block;
  /* optisch minimal angehoben: der Pinselkreis wirkt sonst tiefer als die Schrift */
  transform: translateY(-1px);
}
@media (max-width: 560px) { .brand-mark { width: 23px; height: 23px; } }

.brand-word {
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.015em;
  background: var(--grad-word);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.brand-act { color: inherit; }
.brand-rule {
  align-self: center;
  width: 1px;
  height: 15px;
  background: var(--rule-strong);
}
.brand-slug {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.brand-omm-logo { height: 13px; width: auto; opacity: 0.75; }
@media (max-width: 560px) {
  .brand-rule, .brand-slug { display: none; }
}
.nav-links {
  display: inline-flex;
  gap: 26px;
  margin-left: 16px;
  font-family: var(--display);
  font-size: 15.5px;
  letter-spacing: 0;
  color: var(--ink-soft);
}
.nav-links a {
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
  transition: color 200ms var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--grad-brand-h);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Trust signals — compact mono chips with inline-SVG icons, right-aligned */
.nav-trust {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.trust-chip:first-child { padding-left: 0; }
.trust-chip + .trust-chip { border-left: 1px solid var(--rule-soft); }
.trust-ico {
  width: 13px;
  height: 13px;
  flex: none;
  stroke: var(--c-indigo);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 1400px) { .trust-label { display: none; } }
@media (max-width: 880px)  { .nav-trust { display: none; } }
.nav-lang {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.nav-lang button {
  background: 0;
  border: 0;
  font: inherit;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0 4px;
  transition: color 200ms var(--ease);
}
.nav-lang button.active {
  color: var(--ink);
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  transition: transform 200ms var(--ease), box-shadow 240ms var(--ease);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(57,109,221,0.55);
}
.nav-cta .icon { font-size: 16px; }

/* Hamburger toggle — hidden on desktop, shown once nav-links/nav-trust drop off */
.nav-toggle {
  display: none;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  border-radius: var(--r-sm);
}
.nav-toggle-bars {
  display: block; position: relative;
  width: 18px; height: 13px;
}
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 1.6px;
  background: var(--ink); border-radius: 2px;
  transition: transform 220ms var(--ease), opacity 200ms var(--ease), top 220ms var(--ease);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 50%; margin-top: -0.8px; }
.nav-toggle-bars span:nth-child(3) { top: 100%; margin-top: -1.6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 50%; margin-top: -0.8px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 50%; margin-top: -0.8px; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav-links { display: none; }
  /* nav-trust normally carries margin-left:auto to pin nav-cta right; once it's
     hidden at this breakpoint that anchor disappears too, so the toggle takes
     over pinning itself + the CTA to the right edge. */
  .nav-toggle { display: inline-flex; margin-left: auto; }
}

/* ---- Mobile menu drawer ---- */
/* .mobile-menu/.mobile-menu-backdrop set their own `display` for when shown,
   which otherwise beats the UA [hidden]{display:none} default — this keeps
   `hidden` reliable regardless (same fix as on the calculator page). */
[hidden] { display: none !important; }

.mobile-menu-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(13, 17, 23, 0.4);
  backdrop-filter: blur(2px);
  animation: mm-fade 200ms var(--ease-out);
}
@keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } }

.mobile-menu {
  position: fixed; top: 0; right: 0; z-index: 61;
  width: min(360px, 86vw); height: 100%;
  background: var(--paper);
  box-shadow: -24px 0 48px -16px rgba(13,17,23,0.25);
  padding: clamp(84px, 18vh, 100px) 28px 32px;
  display: flex; flex-direction: column; gap: 28px;
  overflow-y: auto;
  animation: mm-slide-in 260ms var(--ease-out);
}
@keyframes mm-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

.mobile-menu-links { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu-links a {
  font-family: var(--display); font-size: 20px; color: var(--ink);
  padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
}

.mobile-menu-cta { width: 100%; justify-content: center; }

.mobile-menu-trust { display: flex; flex-direction: column; gap: 12px; }
.mobile-trust-chip {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em;
  color: var(--ink-muted);
}
.mobile-trust-chip .trust-ico { width: 15px; height: 15px; flex: none; stroke: var(--c-indigo); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.mobile-menu-footer {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.mobile-menu-omm-logo { height: 14px; width: auto; opacity: 0.8; }

body.mobile-menu-open { overflow: hidden; }

@media (min-width: 881px) {
  .mobile-menu, .mobile-menu-backdrop { display: none !important; }
}

/* ---- Mobile menu: "Branchen" accordion ---- */
.mobile-menu-accordion { display: flex; flex-direction: column; }
.mobile-menu-accordion-toggle {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--display); font-size: 20px; color: var(--ink);
  padding: 12px 0; border-bottom: 1px solid var(--rule-soft);
}
.mobile-menu-accordion-caret { font-size: 22px; color: var(--ink-faint); transition: transform 200ms var(--ease); }
.mobile-menu-accordion-toggle[aria-expanded="true"] .mobile-menu-accordion-caret { transform: rotate(180deg); }
.mobile-menu-accordion-panel { display: flex; flex-direction: column; padding-left: 16px; }
.mobile-menu-accordion-panel a {
  font-family: var(--sans); font-size: 15px; color: var(--ink-muted);
  padding: 10px 0; border-bottom: 1px solid var(--rule-soft);
}

/* ---- Desktop nav "Branchen" dropdown ---- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--display); font-size: 15.5px; color: var(--ink-soft);
  padding: 4px 0; white-space: nowrap;
  transition: color 200ms var(--ease);
}
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle { color: var(--ink); }
.nav-dropdown-caret { font-size: 18px; transition: transform 200ms var(--ease); }
.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, -6px);
  margin-top: 12px; min-width: 240px; padding: 10px;
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--r);
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.nav-dropdown-menu a {
  display: block; font-family: var(--sans); font-size: 14px; color: var(--ink-soft);
  padding: 10px 12px; border-radius: var(--r-sm); white-space: nowrap;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.nav-dropdown-menu a:hover { background: var(--bg-soft); color: var(--c-indigo); }

/* ---- Industry banner ---- */
.industry-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  height: var(--industry-banner-h);
  background: var(--ink); color: #fff;
  transform: translateY(-100%);
  transition: transform 220ms var(--ease);
}
.industry-banner.is-visible { transform: translateY(0); }
.industry-banner-inner {
  height: 100%; max-width: var(--col); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px);
  display: flex; align-items: center; gap: 18px; flex-wrap: nowrap; overflow-x: auto;
}
.industry-banner-label { font-size: 12.5px; color: rgba(255,255,255,0.65); white-space: nowrap; flex-shrink: 0; }
.industry-banner-inner a {
  font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 1px;
  transition: border-color 150ms var(--ease);
}
.industry-banner-inner a:hover { border-color: #fff; }
.industry-banner-close {
  all: unset; box-sizing: border-box; cursor: pointer; flex-shrink: 0; margin-left: auto;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7); border-radius: 50%;
}
.industry-banner-close:hover { color: #fff; background: rgba(255,255,255,0.12); }
.industry-banner-close .icon { font-size: 17px; }

/* ---- Industry picker — standalone strip below the logo marquee ---- */
.industry-picker { padding: clamp(28px, 4vw, 40px) 0; }
.hero-picker {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
@media (max-width: 560px) {
  .hero-picker { justify-content: flex-start; }
}
.hero-picker-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-muted); }
.hero-picker-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-picker-chip {
  display: inline-flex; align-items: center; padding: 7px 16px;
  border: 1px solid var(--rule-strong); border-radius: 9999px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft); background: rgba(255,255,255,0.5);
  transition: border-color 180ms var(--ease), color 180ms var(--ease), background-color 180ms var(--ease);
}
.hero-picker-chip:hover { border-color: var(--c-indigo); color: var(--c-indigo); background: #fff; }

/* =========================================================================
   HERO — editorial cover: full-width kicker + giant duality headline
   ========================================================================= */
.hero {
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 88px);
  position: relative;
  isolation: isolate;
  /* Das .hero-mark ragt bewusst ueber den rechten Rand hinaus. Ohne dieses
     Clipping erzeugt es horizontalen Seiten-Ueberlauf (auf schmalen Screens
     ~45px Scrollbreite). clip statt hidden: beschneidet nur horizontal und
     erzeugt keinen Scroll-Container. */
  overflow-x: clip;
  background: var(--bg-soft);
  margin-top: 0;
  transition: margin-top 200ms var(--ease);
}
body.banner-visible .hero { margin-top: var(--industry-banner-h); }
.hero-wrap {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  position: relative;
}
/* Markenzeichen im Hero — grosses grafisches Statement, rechts, leicht
   ueber den Rand hinaus. Liegt dank isolation:isolate auf .hero hinter
   dem Text, ohne andere Stapelkontexte zu stoeren. */
.hero-mark {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: clamp(-70px, -3vw, -10px);
  width: clamp(240px, 32vw, 480px);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 900px) {
  .hero-mark { width: clamp(200px, 46vw, 300px); opacity: 0.07; right: -60px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-mark { transition: opacity 400ms var(--ease); }
}

/* Kicker row — masthead-style positioning line + slug, hairline below */
.hero-kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.hk-lede {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Giant headline */
.hero-h1 {
  font-family: var(--display);
  font-optical-sizing: auto;
  /* Deckel bei 130px statt 138px: dadurch passen auch die langen
     Branchen-Headlines auf Desktop in 3 statt 4 Zeilen, der Hero bleibt
     niedrig genug und die Logo-Leiste bleibt ohne Scrollen sichtbar. */
  font-size: clamp(46px, 9.4vw, 130px);
  font-weight: 540;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero-h1 .nb { white-space: nowrap; }
/* Auf sehr schmalen Schirmen (iPhone SE & Co.) ist die Untergrenze von 46px
   zu gross: lange Woerter wie "Dokumentation." sind dann breiter als der
   Schirm, und overflow-wrap:break-word schneidet mitten im Wort. Weiche
   Trennzeichen helfen hier nicht — text-wrap:balance nutzt sie nicht. */
@media (max-width: 360px) {
  .hero-h1 { font-size: clamp(36px, 11.5vw, 46px); }
}
@media (max-width: 600px) {
  /* At the hero font-size's mobile floor, some longer industry-page phrases
     (e.g. "für die öffentliche Verwaltung.") don't fit on one line and force
     horizontal overflow — let them wrap like normal text on narrow screens. */
  .hero-h1 .nb { white-space: normal; }
}
.hero-h1 em {
  font-style: italic;
  font-weight: 500;
  background: var(--grad-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* === Minimal hero (v11) — headline + one line + one CTA, max whitespace === */
.hero--min {
  /* A touch under the full screen height (never below 60vh) so the logos
     marquee right after the hero already peeks into the first viewport
     instead of requiring a scroll to appear. */
  min-height: max(60vh, calc(100vh - 220px));
  min-height: max(60dvh, calc(100dvh - 220px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  /* top padding clears the fixed nav (~64px); content stays vertically centred.
     Bewusst knapper als zuvor (13vh/9vh), damit der Hero auf Laptop-Hoehen
     nicht ueber den Viewport hinauswaechst und die Logo-Leiste verdeckt. */
  padding: clamp(96px, 11vh, 150px) 0 clamp(48px, 6vh, 90px);
}
.hero--min .hero-wrap {
  /* As a flex item, this doesn't reliably shrink to the container's cross
     size on its own — pin it explicitly so long headline content wraps
     within the viewport instead of stretching the section wider. */
  width: 100%;
  min-width: 0;
}
.hero-lead {
  font-family: var(--sans);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  margin: clamp(26px, 3vw, 40px) 0 0;
  max-width: 34ch;
}
.hero--min .hero-actions {
  margin-top: clamp(32px, 3.6vw, 48px);
}
.hero-fineprint {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: clamp(22px, 2.6vw, 32px) 0 0;
}

/* Lower row — standfirst + actions (left), demo figure (right) */
.hero-lower {
  margin-top: clamp(40px, 5vw, 68px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 980px) {
  .hero-lower { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 52px); }
}
/* Solo (editorial, no demo image) — serif deck (left) + action aside (right) */
.hero-lower--solo {
  margin-top: clamp(36px, 4.6vw, 68px);
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
}
@media (max-width: 900px) {
  .hero-lower--solo { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 44px); }
}
.hero-deck .hero-sub {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(20px, 2.35vw, 31px);
  line-height: 1.36;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  margin: 0;
  max-width: 34ch;
  text-wrap: pretty;
}
.hero-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 32px);
  padding-top: 6px;
}
.hero-aside .hero-actions { margin-top: 0; }
.hero-aside .hero-trust {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 0;
  font-size: 14px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 6px;
}
.hero-sub {
  font-family: var(--sans);
  font-size: clamp(16.5px, 1.55vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 46ch;
}
.hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 3.2vw, 36px);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: transform 200ms var(--ease), box-shadow 240ms var(--ease), filter 200ms var(--ease);
}
.btn .icon { font-size: 18px; }
.btn-primary {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 8px 24px -10px rgba(57,109,221,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 14px 32px -10px rgba(57,109,221,0.55), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-lg { padding: 17px 30px; font-size: 15px; }
.btn-link {
  font-size: 14px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn-link:hover { color: var(--c-indigo); border-bottom-color: var(--c-violet); }

.hero-trust {
  list-style: none;
  margin: clamp(26px, 3.2vw, 36px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: var(--ink-muted);
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-trust .check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--clear);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}

/* Demo-as-figure — the v9 product mock framed editorially with a caption */
.hero-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-figcap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  padding-left: 2px;
}
.figcap-num {
  flex: none;
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--clear);
  padding-bottom: 1px;
}

/* =========================================================================
   HERO MOCK — glass card with gradient halo
   ========================================================================= */
.hero-mock {
  position: relative;
  background: var(--paper-glass);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-mock);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.5;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}
/* Soft gradient ring — sits behind the mock */
.hero-mock::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(57,109,221,0.45) 0%,
    rgba(57,109,221,0.28) 50%,
    rgba(25,179,230,0.45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.hm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule-soft);
  background: rgba(255,255,255,0.4);
}
.hm-dots { display: inline-flex; gap: 5px; }
.hm-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(10,14,31,0.14);
}
.hm-url {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.hm-url .icon { font-size: 12px; color: var(--ok); }
.hm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-brand);
  padding: 4px 10px;
  border-radius: 9999px;
  box-shadow: 0 4px 10px -4px rgba(57,109,221,0.4);
}
.hm-chip .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: pulse-soft 1.6s ease-in-out infinite;
  flex: 0 0 6px;
}
.hm-body {
  padding: 18px 20px 22px;
  background: rgba(255,255,255,0.6);
}
.hm-question {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 9999px;
  padding: 9px 10px 9px 18px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px -2px rgba(10,14,31,0.04);
}
.hm-question .icon { font-size: 16px; color: var(--ink-muted); }
.hm-question .q {
  flex: 1;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
}
.hm-question .send {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -4px rgba(57,109,221,0.5);
}
.hm-question .send .icon { font-size: 14px; color: inherit; }
.hm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hm-meta .src {
  border: 1px solid var(--rule);
  background: #fff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0.02em;
}
.hm-answer {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  min-height: 110px;
}
.hm-answer p { margin: 0 0 4px; }
.hm-answer p.strong {
  font-weight: 600;
  margin-bottom: 8px;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hm-cite {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hm-cite .icon { font-size: 12px; color: var(--c-cyan); }
.hm-cite[hidden] { display: none; }
.hm-caret::after {
  content: "▍";
  display: inline-block;
  margin-left: 1px;
  color: var(--c-violet);
  animation: caret-blink 1s steps(2) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* =========================================================================
   LOGOS — marquee
   ========================================================================= */
.logos {
  padding: clamp(40px, 5vw, 72px) 0;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--bg-soft);
}
.logos-wrap {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.logos-head {
  text-align: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 clamp(24px, 3vw, 40px);
}
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 88px);
  width: max-content;
  animation: marquee-scroll 170s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track li {
  flex: 0 0 auto;
  min-width: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marquee-track img {
  max-width: 180px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.62;
  transition: opacity 240ms var(--ease), filter 240ms var(--ease);
}
.marquee-track img:hover {
  opacity: 1;
  filter: grayscale(0%);
}
.marquee-track img[alt="Pluta"],
.marquee-track li[aria-hidden="true"] img[src*="pluta"]                  { max-height: 30px; }
.marquee-track img[alt="Südwestmetall"],
.marquee-track li[aria-hidden="true"] img[src*="suedwestmetall"]         { max-height: 26px; }
.marquee-track img[alt="Diakonie Württemberg"],
.marquee-track li[aria-hidden="true"] img[src*="diakonie"]               { max-height: 38px; }
.marquee-track img[alt="Südwesttextil"],
.marquee-track li[aria-hidden="true"] img[src*="suedwesttextil"]         { max-height: 44px; opacity: 0.7; }
.marquee-track img[alt="Menold Bezler"],
.marquee-track li[aria-hidden="true"] img[src*="menold-bezler"]          { max-height: 32px; }
.marquee-track img[alt="RSM Ebner Stolz"],
.marquee-track li[aria-hidden="true"] img[src*="rsm-ebner-stolz"]        { max-height: 34px; }
.marquee-track img[alt="Lutz | Abel"],
.marquee-track li[aria-hidden="true"] img[src*="lutz-abel"]              { max-height: 28px; }
.marquee-track img[alt="Esche Schümann Commichau"],
.marquee-track li[aria-hidden="true"] img[src*="esche-schuemann"]        { max-height: 40px; }
.marquee-track img[alt="BRL"],
.marquee-track li[aria-hidden="true"] img[src*="/brl"]                   { max-height: 30px; }
.marquee-track img[alt="Oppenländer Rechtsanwälte"],
.marquee-track li[aria-hidden="true"] img[src*="oppenlaender"]           { max-height: 26px; }
.marquee-track img[alt="Lapp"],
.marquee-track li[aria-hidden="true"] img[src*="/lapp"]                  { max-height: 24px; }
.marquee-track img[alt="fischertechnik"],
.marquee-track li[aria-hidden="true"] img[src*="fischertechnik"]         { max-height: 22px; }
.marquee-track img[alt="metabo"],
.marquee-track li[aria-hidden="true"] img[src*="metabo"]                 { max-height: 28px; }
.marquee-track img[alt="Schwabe Group"],
.marquee-track li[aria-hidden="true"] img[src*="schwabe-group"]          { max-height: 30px; }
.marquee-track img[alt="CeramTec"],
.marquee-track li[aria-hidden="true"] img[src*="ceramtec"]               { max-height: 26px; }
.marquee-track img[alt="Hartmann"],
.marquee-track li[aria-hidden="true"] img[src*="hartmann"]               { max-height: 32px; }
.marquee-track li.ph {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px dashed var(--rule);
  border-radius: 9999px;
  padding: 8px 18px;
  white-space: nowrap;
}
/* Text-only wordmark — for confirmed references without a usable logo file
   (e.g. municipal/public-sector clients). Solid style, unlike .ph's dashed
   "coming soon" look, so it doesn't read as a placeholder. */
.marquee-track li.textmark {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 240ms var(--ease), color 240ms var(--ease);
}
.marquee-track li.textmark:hover {
  opacity: 1;
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* =========================================================================
   SECTION scaffold
   ========================================================================= */
body { counter-reset: sec; }
.caps, .compare, .brand-story, .trust, .faq, .ask-live {
  padding: clamp(80px, 10vw, 144px) 0;
  position: relative;
  counter-increment: sec;
}

/* ---- Frage stellen — der echte Assistent, inline eingebettet ---- */
.ask-live-frame {
  position: relative;
  margin-top: clamp(32px, 4vw, 48px);
  height: clamp(480px, 64vh, 640px);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.ask-live-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.ask-live-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  background: var(--bg-soft);
}
.ask-live-skeleton img { opacity: 0.5; }
/* Skeleton liegt unter dem Iframe und wird nach dem Mount ausgeblendet */
.ask-live-frame.is-ready .ask-live-skeleton { display: none; }

/* ---- Branchen-Akzent ----
   Jede Branchenseite verschiebt den Markenton minimal, damit sie sich
   beim Blaettern spuerbar von der Startseite abhebt — gleiche Familie,
   nur anderer Charakter. Sanierung: sachlicher, gedeckter, weniger
   leuchtend als das Startseiten-Royalblau. Ueber --c-indigo greift die
   Verschiebung automatisch auf alle Aliasse und Verlaeufe durch. */
body[data-industry="sanierung"] {
  /* Petrol statt Royalblau: echter Farbtonwechsel (219° -> 191°), nicht
     nur dunkler. Teal ist im Markensystem bereits angelegt (--c-cyan,
     --c-teal-deep) und bleibt sachlich — passend zum Verfahren. */
  --c-indigo:      #10717F;
  --c-indigo-deep: #0A4E5A;
  --c-violet:      #10717F;
  --c-violet-deep: #0A4E5A;
  --accent-soft:   rgba(16,113,127,0.10);
  --grad-brand:    linear-gradient(135deg, #16899A 0%, #0A4E5A 100%);
  --grad-brand-h:  linear-gradient(90deg,  #10717F 0%, #0A4E5A 100%);
  --grad-soft:     linear-gradient(135deg, rgba(16,113,127,0.07) 0%, rgba(10,78,90,0.05) 100%);
  --grad-accent:   linear-gradient(100deg, #0A4E5A 0%, #10717F 48%, #4FB3C4 100%);
}

body[data-industry="kanzleien"] {
  /* Indigo-Violett: 251 Grad — klar getrennt vom Royalblau der Startseite
     (221) und vom Petrol der Sanierung (188). Traditionell, seriös. */
  --c-indigo:      #4433A0;
  --c-indigo-deep: #2E2373;
  --c-violet:      #4433A0;
  --c-violet-deep: #2E2373;
  --accent-soft:   rgba(68,51,160,0.09);
  --grad-brand:    linear-gradient(135deg, #5A46C4 0%, #2E2373 100%);
  --grad-brand-h:  linear-gradient(90deg,  #4433A0 0%, #2E2373 100%);
  --grad-soft:     linear-gradient(135deg, rgba(68,51,160,0.07) 0%, rgba(46,35,115,0.05) 100%);
  --grad-accent:   linear-gradient(100deg, #2E2373 0%, #4433A0 48%, #8E7BE8 100%);
}

body[data-industry="industrie"] {
  /* Bronze/Kupfer: 29 Grad. Warm statt kuehl — Metall, Fertigung. Bewusst
     ausserhalb der Blau-Familie, weil fuenf klar trennbare Branchentoene
     nicht alle im blauen Sektor liegen koennen. */
  --c-indigo:      #8C5A2B;
  --c-indigo-deep: #633D18;
  --c-violet:      #8C5A2B;
  --c-violet-deep: #633D18;
  --accent-soft:   rgba(140,90,43,0.10);
  --grad-brand:    linear-gradient(135deg, #A66E36 0%, #633D18 100%);
  --grad-brand-h:  linear-gradient(90deg,  #8C5A2B 0%, #633D18 100%);
  --grad-soft:     linear-gradient(135deg, rgba(140,90,43,0.07) 0%, rgba(99,61,24,0.05) 100%);
  --grad-accent:   linear-gradient(100deg, #633D18 0%, #8C5A2B 48%, #D9A25E 100%);
}

body[data-industry="gesundheitswesen"] {
  /* Gruen: 151 Grad. Versorgung, Ruhe. */
  --c-indigo:      #1E7A4D;
  --c-indigo-deep: #135334;
  --c-violet:      #1E7A4D;
  --c-violet-deep: #135334;
  --accent-soft:   rgba(30,122,77,0.10);
  --grad-brand:    linear-gradient(135deg, #269463 0%, #135334 100%);
  --grad-brand-h:  linear-gradient(90deg,  #1E7A4D 0%, #135334 100%);
  --grad-soft:     linear-gradient(135deg, rgba(30,122,77,0.07) 0%, rgba(19,83,52,0.05) 100%);
  --grad-accent:   linear-gradient(100deg, #135334 0%, #1E7A4D 48%, #63C795 100%);
}

body[data-industry="oeffentliche-verwaltung"] {
  /* Bordeaux: 346 Grad. Siegel, Bescheid, Amtlichkeit. */
  --c-indigo:      #8B2E44;
  --c-indigo-deep: #601F2E;
  --c-violet:      #8B2E44;
  --c-violet-deep: #601F2E;
  --accent-soft:   rgba(139,46,68,0.10);
  --grad-brand:    linear-gradient(135deg, #A63A53 0%, #601F2E 100%);
  --grad-brand-h:  linear-gradient(90deg,  #8B2E44 0%, #601F2E 100%);
  --grad-soft:     linear-gradient(135deg, rgba(139,46,68,0.07) 0%, rgba(96,31,46,0.05) 100%);
  --grad-accent:   linear-gradient(100deg, #601F2E 0%, #8B2E44 48%, #D4788D 100%);
}

/* ---- Fall-Bausteine der Branchenseiten ----
   Generisch benannt (case-*), damit die anderen Branchen dieselben
   Bausteine mit eigenem Fall wiederverwenden koennen. */
.case-intro { padding: clamp(64px, 8vw, 112px) 0; }
.case-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 880px) { .case-intro-grid { grid-template-columns: 1fr; } }
.case-intro-media { margin: 0; }
.case-intro-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
/* Piktogramm-Variante: freigestelltes Motiv statt Foto — kein Rahmen,
   keine Schatten, damit es auf dem Papier steht wie das Markenzeichen. */
.case-intro-media--icon {
  display: flex;
  justify-content: center;
}
/* Deutlich groesser als die frueheren 260px: dort fuellte das Motiv nur 46%
   seiner Spalte und stand als Briefmarke neben einem 539px breiten
   Textblock. Die Zeichnungen tragen viel Weissraum in sich, ihr optisches
   Gewicht liegt also unter der Kastengroesse — deshalb darf der Kasten die
   Texthoehe leicht ueberragen, damit beide Seiten gleich schwer wirken. */
.case-intro-media--icon img {
  width: clamp(280px, 44vw, 470px);
  max-width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}
.case-stat-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 2px;
}
/* Groesser als ein blosses Haken-Symbol es braeuchte: hier steht jetzt ein
   Gesicht drin, und unter ~110px zerfaellt es zu Grau. */
.case-close-icon {
  width: clamp(96px, 10vw, 132px);
  height: auto;
  margin: 0 auto 14px;
  display: block;
}

/* ---- KI-Kennzeichnung auf fotorealistischen Bildern ----
   Die Fotos sind KI-erzeugt. Das gehoert gekennzeichnet — und passt zum
   Produkt: wer KI verkauft, darf zeigen, was sie heute kann, statt
   Stockfotos zu kaufen. Das Abzeichen sitzt bewusst IM Bild, damit die
   Kennzeichnung auch dann mitreist, wenn das Bild allein weitergegeben
   wird. Nur auf Fotos, nicht auf den Pinselstrich-Illustrationen: die
   haelt niemand fuer eine Aufnahme. */
.case-intro-media,
.case-role-media { position: relative; }
.ai-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(14, 17, 23, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}
.ai-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}
.case-role-media figcaption,
.case-intro-media figcaption {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.case-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-indigo);
  margin-bottom: 14px;
}
.case-kicker::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
}
.case-intro-copy h2, .case-role-copy h2 {
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 540;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.case-intro-lead {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.case-intro-note {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0 0 20px;
}
.case-reg {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.case-reg li {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 9999px;
  padding: 6px 13px;
  background: rgba(255,255,255,0.6);
  white-space: nowrap;
}

.case-stats {
  padding: clamp(48px, 6vw, 80px) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.case-stats-head {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 clamp(20px, 3vw, 32px);
}
.case-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
}
@media (max-width: 760px) { .case-stats-grid { grid-template-columns: 1fr; } }
.case-stat {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 8px;
}
.case-stat-value {
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 560;
  letter-spacing: -0.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.case-stat-label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.case-stats-note {
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.case-stats-note a { color: var(--c-indigo); font-weight: 500; }

/* Abschluss des Falls — ruhig, zentriert, direkt vor dem Kontakt */
.case-close {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--bg-soft);
  border-top: 1px solid var(--rule-soft);
  text-align: center;
}
.case-close .case-kicker { justify-content: center; }
.case-close h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 540;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 auto 16px;
  max-width: 22ch;
  text-wrap: balance;
}
.case-close-lead {
  font-size: clamp(15.5px, 1.6vw, 17.5px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 auto 14px;
  max-width: 62ch;
}
.case-close-note {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0;
}

.case-role { padding: clamp(64px, 8vw, 112px) 0; }
.case-role-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 880px) { .case-role-grid { grid-template-columns: 1fr; } }
.case-role-copy p {
  font-size: clamp(15.5px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.case-role-media { margin: 0; }
/* Illustration auf Weiss — verschmilzt bewusst rahmenlos mit dem Papier */
.case-role-media img { display: block; width: 100%; height: auto; }
/* Foto-Variante (Industrie, Gesundheitswesen): braucht Rahmen und Schatten,
   sonst stossen die harten Bildkanten unvermittelt aufs Papier. */
.case-role-media--photo img {
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

/* ---- Echte Fotos: Ansprechpartner + Team ---- */
/* Direkter Draht: Portrait links, daneben auf gleicher Hoehe Titel,
   Zitat und Name/Rolle als ein Block. */
.trust-founder-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.trust-founder-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.trust-founder-intro .name { font-size: 13px; font-weight: 600; }
.trust-founder-intro .role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
}
.trust-avatar {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.35);
}
@media (max-width: 1100px) {
  .trust-founder-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* Team beim Kalender: nur Gesichter als Kreise, bewusst ohne Namen —
   der Termin findet mit dem passenden Kopf aus dem Team statt. */
.contact-team {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}
.contact-team img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.3);
}
.contact-team-note {
  margin: 0 0 22px;
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}
@media (max-width: 560px) {
  .contact-team img { width: 44px; height: 44px; }
}

.caps-wrap {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  position: relative;
}
.caps-wrap-narrow { max-width: 880px; }

/* ---- Brand story — name, mark, vision ---- */
.brand-story-grid {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 720px) {
  .brand-story-grid { grid-template-columns: 1fr; }
}
.brand-story-mark {
  position: sticky;
  top: clamp(96px, 12vh, 140px);
  display: flex;
  justify-content: center;
}
@media (max-width: 720px) {
  .brand-story-mark { position: static; margin: 0 auto; }
}
.brand-story-mark img {
  width: clamp(140px, 16vw, 220px);
  height: auto;
}
.brand-story-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 40px);
}
.brand-story-block h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-indigo);
  margin: 0 0 10px;
}
.brand-story-block p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
.brand-story-block strong { color: var(--ink); font-weight: 600; }
.brand-story-block + .brand-story-block {
  border-top: 1px solid var(--rule-soft);
}

.section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 40px);
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 64px);
  text-align: left;
}
/* Big faint editorial folio numeral (auto-counted per numbered section) */
.section-head::before {
  content: counter(sec, decimal-leading-zero);
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(42px, 6.4vw, 92px);
  line-height: 0.72;
  letter-spacing: -0.03em;
  color: var(--ink);
  opacity: 0.13;
  font-feature-settings: "tnum" 1;
}
.section-head .num {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(10px, 1.3vw, 16px);
  color: var(--clear);
}
.section-head .num::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--clear);
  border-radius: 2px;
}
.section-head h2 {
  grid-column: 2;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(31px, 4.8vw, 60px);
  font-weight: 540;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.section-head h2 em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  color: var(--clear);
}
@media (max-width: 560px) {
  .section-head { gap: 14px; }
  .section-head::before { font-size: 38px; }
}
.section-lead {
  grid-column: 2;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* =========================================================================
   WORKFLOW — 3-phase tabs (Ankommen / Anpacken / Abliefern), homepage only
   for now; industry pages still use the older .bento/.cell grid below.
   ========================================================================= */
/* ---- Scroll-gesteuerte Phasen ----
   Ohne .is-flowing (kein JS, kleine Screens, reduzierte Bewegung) verhaelt
   sich der Abschnitt exakt wie vorher — nur klickbare Reiter. Die Spurhoehe
   setzt initFlowScroll, damit ohne JS keine leere Hoehe entsteht. */
.caps--flow { padding-top: 0; padding-bottom: 0; }
.flow-track { position: relative; padding: clamp(80px, 10vw, 144px) 0; }
.flow-track.is-flowing { padding: 0; }
.flow-track.is-flowing .flow-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* knapp gehalten: die Branchenseiten haben hoehere Panels als die
     Startseite und muessen trotzdem unter eine Bildschirmhoehe passen */
  padding: clamp(22px, 2.8vh, 38px) 0 clamp(14px, 1.8vh, 24px);
}
/* Im Scroll-Modus muss alles zusammen auf einen Bildschirm passen, sonst
   wird beim Anheften unten abgeschnitten. Kopfzeile und Abstaende daher
   zurueckgenommen — nur hier, der normale Abschnitt bleibt gross. */
.flow-track.is-flowing .section-head { margin-bottom: 12px; }
.flow-track.is-flowing .section-head h2 { font-size: clamp(25px, 3vw, 38px); }
.flow-track.is-flowing .section-head::before { font-size: clamp(30px, 3.4vw, 44px); }
.flow-track.is-flowing .section-lead { font-size: 15px; margin-top: 6px; }
.flow-track.is-flowing .workflow-tabs { margin-bottom: 10px; }
.flow-track.is-flowing .workflow-tab { padding: 13px 16px; }

/* Der Faden durch die Phasen — der eigentliche Hinweis, dass Scrollen hier
   etwas bewegt. Die aktive Phase wechselt nur an zwei Schwellen; Linie und
   Punkt laufen dagegen kontinuierlich mit. Nur im Scroll-Modus sichtbar.

   Vertikale Ausrichtung: Der Pfad ist in viewBox 0 0 1244 190 gezeichnet,
   das Kastenband der Zeichnung liegt bei y 61..125. Damit dieses Band exakt
   auf der echten Kastenreihe (.workflow-tabs = Hoehe der Nav) landet, wird
   die absolute Box prozentual ueber die Nav hinaus aufgespannt:
   oben 61/64 = 95.3 %, unten (190-125)/64 = 101.6 % der Nav-Hoehe.
   Prozentwerte statt px, damit die Ausrichtung bei jeder Viewport-Breite
   (und damit Nav-Hoehe) exakt bleibt. */
.workflow-nav { position: relative; }
.flow-path { display: none; }
.flow-track.is-flowing .flow-path {
  display: block;
  position: absolute;
  inset: -95.3% 0 -101.6%;
  z-index: 0;
  pointer-events: none;
}
/* Die Kaesten liegen ueber der hinteren Linie und verdecken die
   Tunnel-Abschnitte; die Front-Kopie (auf den Knoten geclippt) liegt
   darueber, damit der Rueckstrang den Anpacken-Kasten sichtbar packt. */
.flow-track.is-flowing .workflow-tabs { position: relative; z-index: 1; }
.flow-track.is-flowing .flow-path--front { z-index: 2; }
.flow-path svg { display: block; width: 100%; height: 100%; }
.flow-path-base,
.flow-path-lit {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.flow-path-base { stroke: var(--rule); }
.flow-path-lit { stroke: var(--c-indigo); }
/* Der Reisende auf der Linie ist das claract-Zeichen selbst — transparent,
   ohne Scheibe dahinter, die Linie laeuft sichtbar durch den offenen Ring.
   initFlowScroll dreht es mit dem Scroll-Fortschritt ("rollt" die Linie
   entlang); die Drehung steckt im JS-transform, nicht hier. */
.flow-path-dot {
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.flow-path-dot img {
  width: 30px;
  height: 30px;
  display: block;
}
/* Farbeffekt: der Block, in dem man sich inhaltlich befindet, tritt hervor.
   Baut auf dem vorhandenen .is-active auf, im Scroll-Modus mit weichem Schein. */
.flow-track.is-flowing .workflow-tab.is-active {
  box-shadow: 0 10px 30px -14px rgba(57,109,221,0.65);
}

.workflow-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.workflow-tab {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 220px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--paper);
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.workflow-tab:hover { border-color: var(--rule-strong); }
.workflow-tab.is-active {
  border-color: var(--c-indigo);
  background: var(--grad-soft);
  box-shadow: var(--shadow-card);
}
/* Phasen-Zeichen: Varianten des Markenzeichens (offener Pinselkreis).
   01 etwas laeuft hinein · 02 es verdichtet sich zum Punkt · 03 es geht hinaus.
   Inaktiv zurueckgenommen, aktiv in voller Deckung. */
.workflow-tab-mark {
  flex: none;
  width: 38px; height: 38px;
  opacity: 0.28;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.workflow-tab.is-active .workflow-tab-mark { opacity: 1; transform: scale(1.06); }
.workflow-tab:hover .workflow-tab-mark { opacity: 0.6; }
.workflow-tab.is-active:hover .workflow-tab-mark { opacity: 1; }
.workflow-tab-text { display: flex; flex-direction: column; gap: 3px; }
.workflow-tab-title { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); }
.workflow-tab-sub { font-size: 12.5px; color: var(--ink-muted); line-height: 1.4; }

.workflow-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.2vw, 44px);
  box-shadow: var(--shadow-card);
}
.workflow-panel[hidden] { display: none; }
.workflow-panel-title {
  font-family: var(--sans); font-size: clamp(24px, 2.4vw, 30px); font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 12px;
}
.workflow-panel-desc { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 20px; max-width: 46ch; }
.workflow-panel-demo { min-width: 0; }

.demo-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  background: var(--bg-soft);
  border-radius: 999px;
  border: 1px solid var(--rule-soft);
}
.demo-switch-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.demo-switch-btn:hover:not(.is-active) { color: var(--ink); }
.demo-switch-btn.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-card); }

@media (max-width: 900px) {
  .workflow-panel { grid-template-columns: 1fr; }
  .workflow-tabs { flex-direction: column; }
}
@media (max-width: 640px) {
  /* Full-width stacked cards (with subtitle) read as three thick blocks on a
     phone. Below tablet width, collapse to a compact row of small buttons —
     phase mark + short title only, no subtitle — so all three phases
     stay visible side by side without scrolling. */
  .workflow-tabs { flex-direction: row; gap: 6px; }
  .workflow-tab {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 12px 6px;
  }
  .workflow-tab-text { align-items: center; }
  .workflow-tab-sub { display: none; }
  .workflow-tab-title { font-size: 12px; line-height: 1.25; }
  .workflow-tab-mark { width: 28px; height: 28px; }
}

/* =========================================================================
   INTEROP — tools talk to each other and to your systems
   ========================================================================= */
.interop { padding: clamp(72px, 9vw, 120px) 0; }
.interop-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  .interop-grid { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 44px); }
}
.interop-copy .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--clear);
  margin-bottom: 16px;
}
.interop-copy .num::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--clear);
  border-radius: 2px;
}
.interop-h {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 540;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 18ch;
  text-wrap: balance;
}
.interop-sub {
  font-size: clamp(15px, 1.4vw, 17.5px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 46ch;
}
.interop-fig {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 36px) clamp(16px, 2.5vw, 30px);
  position: relative;
}
.io-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  z-index: 1;
}
.io-sys { align-items: flex-end; text-align: right; }
.io-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
.io-chip {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 9999px;
  padding: 6px 13px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(13,17,23,0.03);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.io-chip.is-active {
  color: #fff;
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 4px 14px -4px rgba(57,109,221,0.5);
}
/* Trailing pill making clear the chip list is a sample, not the full set —
   dashed and muted so it doesn't read as an actual tool/system name. */
.io-chip-more {
  color: var(--ink-faint);
  background: transparent;
  border-style: dashed;
  border-color: var(--rule-strong);
  box-shadow: none;
}
.io-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(76px, 9vw, 106px);
  height: clamp(76px, 9vw, 106px);
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-card);
}
.io-core-word {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 18px);
  letter-spacing: -0.01em;
  background: var(--grad-word);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.io-core-act { color: inherit; }
.io-core-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: io-pulse 2.8s ease-out infinite;
}
@keyframes io-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(57,109,221,0.3); }
  70%  { box-shadow: 0 0 0 16px rgba(57,109,221,0); }
  100% { box-shadow: 0 0 0 0 rgba(57,109,221,0); }
}
@media (prefers-reduced-motion: reduce) { .io-core-pulse { animation: none; } }

/* Small dot that travels tool-chip -> core -> system-chip, cycling through
   the three concrete examples named in .interop-sub (see initInteropFlow in
   v11.js). Position is set in JS via getBoundingClientRect, so this works
   the same whether .interop-fig is laid out as 3 columns (drag axis:
   horizontal) or, on narrow screens, stacked (drag axis: vertical). */
.io-packet {
  position: absolute;
  top: 0; left: 0;
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--c-indigo);
  box-shadow: 0 0 0 4px rgba(57,109,221,0.18);
  z-index: 2;
  cursor: grab;
  touch-action: none;
  transition: left 550ms var(--ease), top 550ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.io-packet:hover { transform: scale(1.15); }
/* Just a bit of fun — grab it and slide it back and forth (see
   initInteropFlow in v11.js). Dragging pauses the auto-cycle. */
.io-packet.is-dragging {
  cursor: grabbing;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
  transform: scale(1.3);
  box-shadow: 0 0 0 6px rgba(57,109,221,0.24);
}
.io-flow-caption {
  grid-column: 1 / -1;
  margin-top: clamp(14px, 2vw, 20px);
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-indigo-deep);
  min-height: 1.4em;
}
@media (max-width: 560px) {
  .interop-fig { grid-template-columns: 1fr; gap: 14px; }
  .io-core { justify-self: center; }
  /* Tools/systems still stack as three blocks top-to-bottom, but within each
     block the chips themselves flow left-to-right and wrap (typically two
     rows) instead of one-per-line — five chips stacked vertically ate a lot
     of height for no reason on a narrow screen. */
  .io-col { flex-direction: row; flex-wrap: wrap; gap: 7px; }
  .io-cap { flex-basis: 100%; margin-bottom: 2px; }
  .io-sys { justify-content: flex-start; align-items: flex-start; text-align: left; }
}

/* =========================================================================
   BENTO — capability grid with cursor spotlight + glass
   ========================================================================= */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "ask ask office"
    "extract voice apps";
  gap: 22px;
}
.cell-ask     { grid-area: ask; }
.cell-office  { grid-area: office; }
.cell-extract { grid-area: extract; }
.cell-voice   { grid-area: voice; }
.cell-apps    { grid-area: apps; }

@media (max-width: 980px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "ask ask"
      "office extract"
      "voice apps";
  }
}
@media (max-width: 640px) {
  .bento {
    grid-template-columns: 1fr;
    grid-template-areas:
      "ask"
      "extract"
      "office"
      "voice"
      "apps";
  }
}

.cell {
  --mx: 50%;
  --my: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color 240ms var(--ease);
}
.cell:hover, .cell:focus-within { border-color: var(--rule-strong); }

.cell-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cell-num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(57,109,221,0.5);
}
.cell-title {
  font-family: var(--sans);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}
.cell-ask .cell-title {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cell-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.cell-ask .cell-desc {
  font-size: 16px;
  max-width: 52ch;
}
.cell-link {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-indigo-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 4px 0;
  transition: gap 200ms var(--ease);
}
.cell-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--grad-brand-h);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
.cell-link:hover::after { transform: scaleX(1); }
.cell-link:hover { gap: 10px; }

.demo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* ----- Demo I — Ask ----- */
.demo-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 9999px;
  padding: 6px 6px 6px 18px;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.demo-search:focus-within {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--c-indigo), 0 0 0 5px rgba(57,109,221,0.16);
}
.demo-search .icon { color: var(--ink-muted); font-size: 18px; }
.demo-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  padding: 8px 0;
}
.demo-search input::placeholder { color: var(--ink-faint); }
.demo-search button {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--grad-brand);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -4px rgba(57,109,221,0.5);
  transition: transform 200ms var(--ease), filter 200ms var(--ease);
}
.demo-search button:hover { transform: scale(1.05); filter: brightness(1.06); }
.demo-search button .icon { font-size: 16px; color: inherit; }

.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.demo-chips button {
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  color: var(--ink-soft);
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 12px;
  cursor: pointer;
  transition: all 200ms var(--ease);
}
.demo-chips button:hover {
  border-color: transparent;
  color: #fff;
  background: var(--grad-brand);
}

.demo-answer {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  font-size: 14px;
  line-height: 1.45;
  backdrop-filter: blur(6px);
}
.demo-answer[hidden] { display: none; }
.demo-answer.is-visible { opacity: 1; transform: none; }
.demo-answer-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.demo-answer .pulse {
  width: 6px; height: 6px;
  background: var(--c-violet);
  border-radius: 50%;
  animation: pulse-soft 1.6s ease-in-out infinite;
  flex: 0 0 6px;
  box-shadow: 0 0 0 0 rgba(57,109,221,0.5);
}
@keyframes pulse-soft { 0%,100%{opacity:.4} 50%{opacity:1} }
.demo-answer-sources {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.demo-answer-sources .src {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0.02em;
}
.demo-answer-body p { margin: 0 0 0.4em; color: var(--ink); }
.demo-answer-body p.strong {
  font-weight: 600;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.demo-answer-body p:last-child { margin-bottom: 0; }
.demo-answer-cite {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.demo-answer-cite .icon { font-size: 13px; color: var(--c-cyan); }
.demo-typing {
  display: inline-flex;
  gap: 4px;
}
.demo-typing span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-violet);
  animation: t-bounce 1.05s ease-in-out infinite;
}
.demo-typing span:nth-child(2) { animation-delay: 0.16s; background: var(--c-indigo); }
.demo-typing span:nth-child(3) { animation-delay: 0.32s; background: var(--c-cyan); }
@keyframes t-bounce {
  0%,70%,100% { transform: translateY(0); opacity: .3; }
  35% { transform: translateY(-3px); opacity: 1; }
}

/* Ask chat window */
.ask-chat-window {
  flex: 1;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  background: rgba(244,245,251,0.5);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  overflow: hidden;
}
.ask-chat-window .demo-answer {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
}
.ask-user-msg {
  display: flex;
  justify-content: flex-end;
}
.ask-user-msg[hidden] { display: none; }
.ask-user-text {
  background: var(--grad-brand);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1.45;
  max-width: 82%;
  box-shadow: 0 4px 10px -4px rgba(57,109,221,0.5);
}
.ask-model-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  padding: 1px 7px;
  border-radius: 9999px;
  white-space: nowrap;
}
.ask-mini-charts {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ask-mini-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  background: var(--paper);
  min-height: 110px;
}
.ask-mini-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 96px;
}

/* =========================================================================
   EXTRACT panel
   ========================================================================= */
.demo-extract { gap: 0; }
.ext-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  min-height: 230px;
  background: var(--paper);
}
.ext-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  flex: 0 0 auto;
}
.ext-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 12px;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  flex: 0 0 auto;
}
.ext-x {
  width: 18px; height: 18px;
  background: var(--grad-brand);
  -webkit-text-fill-color: #fff;
  color: #fff;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  font-style: italic;
  flex: 0 0 18px;
}
.ext-file {
  flex: 1;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ext-approve {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: default;
  user-select: none;
  box-shadow: 0 2px 6px -2px rgba(34,197,94,0.4);
}
.ext-approve .icon { font-size: 11px; vertical-align: -2px; }
.ext-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-deep);
  flex: 0 0 auto;
  overflow-x: auto;
}
.ext-tabs span {
  display: inline-block;
  padding: 6px 11px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex: 0 0 auto;
}
.ext-tabs span.active {
  color: var(--c-indigo-deep);
  border-bottom-color: var(--c-indigo);
  background: var(--paper);
}
.ext-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.ext-fields {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-right: 1px solid var(--rule-soft);
  overflow: hidden;
}
.ext-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ext-field .ext-val { opacity: 0; transition: opacity 280ms var(--ease); }
.ext-field.is-in .ext-val { opacity: 1; }
.ext-field.is-current .ext-val {
  background: var(--accent-soft);
  border: 1px solid rgba(57,109,221,0.32);
  border-radius: 4px;
  padding: 3px 6px;
}
.ext-key {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ext-val {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  line-height: 1.3;
}
.ext-edit {
  color: var(--c-indigo);
  font-size: 12px;
  opacity: 0.6;
  flex: 0 0 auto;
}
.ext-field-sel .ext-val {
  background: var(--accent-soft);
  border: 1px solid rgba(57,109,221,0.32);
  border-radius: 4px;
  padding: 3px 6px;
}
.ext-pdf {
  position: relative;
  background: #f0f1f6;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.ext-pdf-scan {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 11px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--c-indigo-deep);
  background: rgba(57,109,221,0.10);
  border: 2px solid rgba(57,109,221,0.50);
  border-radius: 3px;
  padding: 3px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: top 420ms var(--ease), opacity 200ms var(--ease);
}
.ext-pdf-scan.is-in { opacity: 1; }
.ext-pdf-l {
  height: 8px;
  background: rgba(10,14,31,0.10);
  border-radius: 2px;
  width: 100%;
}
.ext-pdf-l--w60 { width: 60%; }
.ext-pdf-l--w65 { width: 65%; }
.ext-pdf-l--w70 { width: 70%; }
.ext-pdf-l--w75 { width: 75%; }
.ext-pdf-l--w80 { width: 80%; }
.ext-pdf-l--w85 { width: 85%; }
.ext-pdf-l--w90 { width: 90%; }
.ext-pdf-sel {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--c-indigo-deep);
  background: rgba(57,109,221,0.10);
  border: 2px solid rgba(57,109,221,0.50);
  border-radius: 3px;
  padding: 3px 6px;
  margin: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================================
   OFFICE — Word mock
   ========================================================================= */
.word-mock {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  background: #f3f3f3;
  overflow: hidden;
  min-height: 240px;
}
.word-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #e8e8e8;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.word-traffic { display: flex; gap: 4px; }
.word-traffic .td { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.word-traffic .td-r { background: #ff5f56; }
.word-traffic .td-y { background: #ffbd2e; }
.word-traffic .td-g { background: #27c93f; }
.word-filename {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 10px;
  color: rgba(10,14,31,0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.word-w {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: #2b579a;
  color: #fff;
  font-weight: 700;
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.word-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 8px;
  background: #f3f3f3;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-family: var(--sans);
  font-size: 9px;
  color: rgba(10,14,31,0.6);
}
.word-tab {
  padding: 5px 9px;
  position: relative;
  white-space: nowrap;
  cursor: default;
}
.word-tab.active {
  color: #2b579a;
  font-weight: 600;
  background: #fff;
  box-shadow: inset 0 -2px 0 #2b579a;
}
.word-tab-ai {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.word-tab-ai .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-violet);
  animation: pulse-soft 1.6s ease-in-out infinite;
}
.word-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  font-family: var(--sans);
}
.word-tb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 10px;
  color: rgba(10,14,31,0.7);
}
.word-tb:hover { background: rgba(0,0,0,0.05); }
.word-tb-font {
  font-size: 9px;
  color: rgba(10,14,31,0.55);
  padding: 0 6px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 3px;
  height: 16px;
}
.word-tb-letter { font-weight: 600; font-size: 11px; }
.word-tb-u { text-decoration: underline; }
.word-tb-sep {
  width: 1px;
  height: 14px;
  background: rgba(0,0,0,0.1);
  margin: 0 2px;
}
.word-tb-icon {
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
  padding: 0 3px;
}
.word-tb-icon .ic {
  display: inline-block;
  background: rgba(10,14,31,0.4);
  border-radius: 1px;
}
.word-tb-icon .ic-1 { width: 8px; height: 1.5px; }
.word-tb-icon .ic-2 { width: 6px; height: 1.5px; }
.word-tb-icon .ic-3 { width: 10px; height: 1.5px; }
.word-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  flex: 1;
  min-height: 0;
}
.word-page {
  background: #fff;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  box-shadow: inset -1px 0 0 rgba(0,0,0,0.04);
}
.word-h {
  height: 7px;
  width: 55%;
  background: #2b579a;
  border-radius: 2px;
  margin-bottom: 4px;
}
.word-h2 {
  height: 5px;
  width: 38%;
  background: rgba(43,87,154,0.7);
  border-radius: 2px;
  margin: 6px 0 2px;
}
.word-l {
  height: 4px;
  background: rgba(10,14,31,0.18);
  border-radius: 2px;
}
.word-l.w-95 { width: 95%; }
.word-l.w-92 { width: 92%; }
.word-l.w-90 { width: 90%; }
.word-l.w-88 { width: 88%; }
.word-l.w-82 { width: 82%; }
.word-l.w-72 { width: 72%; }
.word-l.w-66 { width: 66%; }
.word-l.w-50 { width: 50%; }
.word-hi {
  background: linear-gradient(90deg, rgba(57,109,221,0.4) 0%, rgba(57,109,221,0.4) 100%);
  box-shadow: 0 0 0 2px rgba(57,109,221,0.12);
  border-radius: 2px;
}
.word-side {
  background: #fafafa;
  border-left: 1px solid rgba(0,0,0,0.08);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.word-side-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.word-side-head .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-violet);
  animation: pulse-soft 1.6s ease-in-out infinite;
}
.office-act {
  background: var(--grad-brand);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  align-self: stretch;
  box-shadow: 0 4px 10px -4px rgba(57,109,221,0.4);
  transition: filter 200ms var(--ease), transform 200ms var(--ease);
}
.office-act:hover { filter: brightness(1.08); transform: translateY(-1px); }
.word-side-out {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 32px;
}
.word-side-out .item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 5px;
  border-left: 2px solid var(--c-violet);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}
.word-side-out .item.is-in { opacity: 1; transform: none; }
.word-side-out .item .b {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.word-side-out .item span:last-child {
  font-size: 11px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.3;
}

/* =========================================================================
   VOICE
   ========================================================================= */
.demo-voice { gap: 14px; }
.voice-wave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  height: 72px;
  padding: 0 4px;
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
}
.voice-wave span {
  flex: 1;
  background: var(--grad-brand);
  border-radius: 3px;
  height: 30%;
  animation: wave 1.2s ease-in-out infinite;
}
@keyframes wave {
  0%,100% { height: 18%; opacity: .4; }
  50%     { height: 72%; opacity: 1; }
}
.voice-wave span:nth-child(1)  { animation-delay: 0.00s; }
.voice-wave span:nth-child(2)  { animation-delay: 0.05s; }
.voice-wave span:nth-child(3)  { animation-delay: 0.10s; }
.voice-wave span:nth-child(4)  { animation-delay: 0.15s; }
.voice-wave span:nth-child(5)  { animation-delay: 0.20s; }
.voice-wave span:nth-child(6)  { animation-delay: 0.25s; }
.voice-wave span:nth-child(7)  { animation-delay: 0.30s; }
.voice-wave span:nth-child(8)  { animation-delay: 0.35s; }
.voice-wave span:nth-child(9)  { animation-delay: 0.40s; }
.voice-wave span:nth-child(10) { animation-delay: 0.45s; }
.voice-wave span:nth-child(11) { animation-delay: 0.50s; }
.voice-wave span:nth-child(12) { animation-delay: 0.55s; }
.voice-wave span:nth-child(13) { animation-delay: 0.60s; }
.voice-wave span:nth-child(14) { animation-delay: 0.65s; }
.voice-wave span:nth-child(15) { animation-delay: 0.70s; }
.voice-wave span:nth-child(16) { animation-delay: 0.75s; }
.voice-wave span:nth-child(17) { animation-delay: 0.80s; }
.voice-wave span:nth-child(18) { animation-delay: 0.85s; }
.voice-wave span:nth-child(19) { animation-delay: 0.90s; }
.voice-wave span:nth-child(20) { animation-delay: 0.95s; }
.voice-ticker {
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  min-height: 70px;
}
.voice-line {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  margin-bottom: 8px;
}
.voice-line.is-in { opacity: 1; transform: none; }
.voice-line .spk {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(57,109,221,0.18), rgba(57,109,221,0.18));
  color: var(--c-indigo-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 22px;
}
.voice-line .spk.spk-b {
  background: linear-gradient(135deg, rgba(47,111,153,0.20), rgba(57,109,221,0.20));
  color: var(--teal-deep);
}
.voice-line-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.voice-speaker-name {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.voice-line .txt {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

/* =========================================================================
   APPS builder
   ========================================================================= */
.demo-apps { gap: 12px; }
.apps-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.apps-chips button {
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.6);
  color: var(--ink-soft);
  padding: 6px 13px;
  border-radius: 9999px;
  font-size: 12px;
  cursor: pointer;
  transition: all 200ms var(--ease);
}
.apps-chips button:hover,
.apps-chips button.active {
  border-color: transparent;
  color: #fff;
  background: var(--grad-brand);
}
.apps-card {
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  padding: 14px;
  font-size: 13px;
  flex: 1;
  min-height: 100px;
}
.apps-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}
.apps-card-name {
  font-weight: 600;
  color: var(--ink);
}
.apps-card-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.apps-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.apps-card-list li {
  display: flex;
  gap: 8px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}
.apps-card-list li.is-in { opacity: 1; transform: none; }
.apps-card-list li::before {
  content: "✓";
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  flex: 0 0 auto;
}

/* =========================================================================
   COMPARE
   ========================================================================= */
.compare {
  background: var(--bg-soft);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.cmp-table {
  display: grid;
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  overflow: hidden;
  margin: 0 auto;
  max-width: 940px;
  box-shadow: var(--shadow-card);
}
.cmp-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  align-items: center;
  min-height: 62px;
  border-bottom: 1px solid var(--rule-soft);
}
.cmp-row:last-child { border-bottom: 0; }
.cmp-row > * {
  padding: 16px 18px;
  font-size: 14px;
}
.cmp-row .cmp-us {
  background: linear-gradient(135deg, rgba(57,109,221,0.07) 0%, rgba(57,109,221,0.04) 100%);
  font-weight: 500;
  color: var(--c-indigo-deep);
  position: relative;
}
.cmp-head {
  background: var(--paper-deep);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cmp-head .cmp-us {
  font-weight: 700;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cmp-row [role="rowheader"] {
  font-weight: 500;
  color: var(--ink);
}
.cmp-row .ok  { color: var(--ok); font-weight: 700; font-size: 18px; }
.cmp-row .no  { color: var(--no); font-weight: 700; font-size: 16px; }
.cmp-row .part { color: var(--c-violet); font-weight: 600; font-size: 18px; }
.cmp-foot {
  background: var(--paper-deep);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cmp-price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
}
.cmp-foot .cmp-us.cmp-price {
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.cmp-disclaimer {
  margin: 24px auto 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
@media (max-width: 760px) {
  .cmp-row {
    grid-template-columns: 1fr 64px 64px 64px;
  }
  .cmp-row > * { padding: 12px 8px; font-size: 13px; }
  .cmp-row [role="rowheader"] { padding-left: 12px; }
}

/* =========================================================================
   TRUST
   ========================================================================= */
.trust-maker {
  margin: -12px 0 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.trust-maker p { font-size: 14.5px; color: var(--ink-muted); margin: 0; }
.trust-maker a { color: var(--ink-soft); border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: color 200ms var(--ease), border-color 200ms var(--ease); }
.trust-maker a:hover { color: var(--c-indigo); border-bottom-color: var(--c-violet); }
.trust-maker-logo-link { flex-shrink: 0; line-height: 0; opacity: 0.9; transition: opacity 200ms var(--ease); }
.trust-maker-logo-link:hover { opacity: 1; }
.trust-maker-logo { height: 26px; width: auto; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 880px) {
  .trust-grid { grid-template-columns: 1fr; }
}
.trust-card {
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.trust-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.trust-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--grad-brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 14px -6px rgba(57,109,221,0.5);
}
.trust-card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.trust-list-featured {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 9px 16px 9px 9px;
  font-size: 14px;
  color: var(--ink);
}
.trust-list-featured .trust-icon {
  width: 26px; height: 26px;
  font-size: 16px;
  border-radius: 999px;
  box-shadow: none;
  flex-shrink: 0;
}
.trust-list-featured strong { color: var(--ink); }
.trust-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-soft);
}
.trust-list li {
  padding-left: 20px;
  position: relative;
  line-height: 1.45;
}
.trust-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.trust-list strong {
  color: var(--ink);
  font-weight: 600;
}
/* Founder card — gradient bg */
.trust-founder {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.trust-founder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px circle at 100% 0%, rgba(57,109,221,0.30) 0%, transparent 55%),
    radial-gradient(500px circle at 0% 100%, rgba(47,111,153,0.14) 0%, transparent 55%);
  pointer-events: none;
}
.trust-founder > * { position: relative; }
.trust-founder .trust-icon {
  background: rgba(255,255,255,0.18);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.trust-founder .trust-card-title { color: #fff; }
.trust-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
}
.trust-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 13px;
}
.trust-meta .name { font-weight: 600; }
.trust-meta .role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
}
.trust-meta .tel {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
}
.trust-meta .tel a { border-bottom: 1px solid rgba(255,255,255,0.34); padding-bottom: 1px; }
.trust-cal-link {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 13px 22px;
  border-radius: 9999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 28px -8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: background-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.trust-cal-link:hover {
  background: linear-gradient(135deg, #ffffff 0%, #eef1ff 100%);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -8px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.7);
}
.trust-cal-link .icon { font-size: 18px; color: var(--c-indigo-deep); }

/* =========================================================================
   OMM CONTENTBOT — chat widget (same assistant as omm-solutions.de)
   The widget script injects its own <style> tag at runtime, appended to
   <head> after this stylesheet, with a randomized class-name suffix per
   page load (e.g. "round-btn-a1b2c3") — so target via [class*="..."]
   instead of exact classes, and use !important since equal-specificity
   rules loaded later in the DOM would otherwise win. Only the trigger
   button and the floating panel's outer chrome live in this page's own
   DOM and can be restyled this way; the chat conversation itself renders
   inside a cross-origin iframe (vs.contentbot.dev2.omm.cloud) and keeps
   its own default look — that part isn't reachable from here.
   ========================================================================= */
#omm_cb_widget [class*="round-btn-"] {
  background: var(--grad-brand) !important;
  box-shadow: 0 10px 28px -8px rgba(57,109,221,0.6) !important;
  /* Bigger than the widget's own 64px default — easy to notice and hit on
     any screen size, including with a thumb on mobile. Doubled again on
     large screens (see min-width:1024px below) so it's hard to miss. */
  width: 72px !important;
  height: 72px !important;
  /* No position override needed here — the widget's own `position: fixed`
     (set on this same element, just without !important) already establishes
     a valid containing block for the absolutely-positioned pulse ring
     below. Overriding it to `relative` would un-pin the button from the
     viewport corner entirely. */
}
#omm_cb_widget [class*="round-btn-"]:hover {
  filter: brightness(1.08) !important;
}
/* Pulsing attention ring — a separate pseudo-element rather than animating
   the button's own box-shadow directly, so the static drop-shadow above
   and this ring don't fight over the same property. */
#omm_cb_widget [class*="round-btn-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: omm-cb-btn-pulse 2.6s ease-out infinite;
}
@keyframes omm-cb-btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(57,109,221,0.45); }
  70%  { box-shadow: 0 0 0 22px rgba(57,109,221,0); }
  100% { box-shadow: 0 0 0 0 rgba(57,109,221,0); }
}
@media (prefers-reduced-motion: reduce) {
  #omm_cb_widget [class*="round-btn-"]::after { animation: none; }
}
@media (min-width: 1024px) {
  #omm_cb_widget [class*="round-btn-"] {
    width: 148px !important;
    height: 148px !important;
  }
}
.omm-cb-iframe-floater {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lift) !important;
  border: 1px solid var(--rule) !important;
}
@media (min-width: 1024px) {
  /* Button is bottom:2rem(32px) + height:148px = 180px from the viewport
     bottom on large screens now; clear that with a bit of margin. */
  .omm-cb-iframe-floater { bottom: 200px !important; }
}
@media (max-width: 640px) {
  /* The widget sets a fixed width (28rem) with only "right" positioned, no
     "left" — max-width:100% then clamps the rendered width to the viewport,
     but the box still measures its right edge from `right: 2rem`, so the
     left edge lands off-screen (viewport - 32px - viewport = -32px). Pin
     both left and right instead so the browser computes the width itself. */
  .omm-cb-iframe-floater {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    /* Button is bottom:2rem(32px) + height:72px = 104px from the viewport
       bottom; clear that with a bit of margin. */
    bottom: 116px !important;
  }
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-item {
  border-top: 1px solid var(--rule-soft);
  padding: 20px 0;
}
.faq-item:last-of-type { border-bottom: 1px solid var(--rule-soft); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  padding-right: 4px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon {
  font-size: 22px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--c-indigo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 240ms var(--ease), background 240ms var(--ease), color 240ms var(--ease);
  flex: 0 0 auto;
}
.faq-item[open] summary .icon {
  transform: rotate(45deg);
  background: var(--grad-brand);
  color: #fff;
}
.faq-item p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 64ch;
}

/* =========================================================================
   CONTACT — final CTA
   ========================================================================= */
.contact {
  background: var(--ink);
  color: #fff;
  padding: clamp(96px, 12vw, 160px) 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px circle at 50% 0%, rgba(57,109,221,0.32) 0%, transparent 55%),
    radial-gradient(560px circle at 100% 100%, rgba(47,111,153,0.16) 0%, transparent 60%);
  z-index: -1;
}
.contact-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  text-align: center;
}
.contact-line {
  font-family: var(--sans);
  font-size: clamp(36px, 5.4vw, 64px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}
.contact-line em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-sub {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0 auto 36px;
  max-width: 56ch;
}
.contact .btn-primary {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 32px -10px rgba(57,109,221,0.5);
}
.contact .btn-primary:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f0f0ff 100%);
  filter: none;
}
.contact-calendar {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px -20px rgba(0,0,0,0.5);
  overflow: hidden;
  min-height: 610px;
  text-align: left;
}
.contact-calendar .meetings-iframe-container { min-height: 610px; }

.contact-meta {
  margin: 24px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
}
.contact-meta a {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 1px;
}
.contact-meta a:hover { border-bottom-color: var(--c-violet); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer {
  padding: 48px 0 56px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  border-top: 1px solid var(--rule-soft);
  background: var(--bg-soft);
}
.footer-top {
  max-width: var(--col);
  margin: 0 auto clamp(24px, 3vw, 32px);
  padding: 0 clamp(20px, 5vw, 48px) clamp(20px, 2.6vw, 26px);
  border-bottom: 1px solid var(--rule-soft);
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
/* Footer-Lockup: Zeichen + Wortmarke. Wie im Header gekapselt, damit die
   baseline-Ausrichtung von .footer-top (Claim daneben) erhalten bleibt. */
.footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-mark {
  flex: none;
  width: 24px;
  height: 24px;
  display: block;
  transform: translateY(-1px);
}

.footer-word {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  background: var(--grad-word);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.footer-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.footer-inner {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
}
.footer-org { letter-spacing: 0.04em; }
.footer-org-block { display: flex; flex-direction: column; gap: 5px; }
.footer-org-primary {
  color: var(--ink-soft); font-weight: 600; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 7px;
}
.footer-omm-logo { height: 15px; width: auto; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-links a {
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.footer-links a:hover { color: var(--c-indigo); border-bottom-color: var(--c-violet); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}