:root {
  --ink: #101926;
  --ink-soft: #263140;
  --paper: #f3f1e9;
  --paper-bright: #faf9f4;
  --line: rgba(16, 25, 38, 0.14);
  --muted: #747a7d;
  --lime: #dfff38;
  --lime-soft: #e9ff7d;
  --blue: #496cff;
  --orange: #ff875f;
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 38px;
  --shadow: 0 28px 80px rgba(16, 25, 38, 0.13);
  --container: min(1240px, calc(100vw - 64px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

::selection {
  color: var(--ink);
  background: var(--lime);
}

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

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: 99px;
  color: var(--paper);
  background: var(--ink);
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.scroll-progress {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 14px;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1280px, calc(100vw - 32px));
  height: 68px;
  padding: 8px 10px 8px 18px;
  border: 1px solid transparent;
  border-radius: 22px;
  transform: translateX(-50%);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, top 0.35s ease;
}

.site-header.is-scrolled {
  top: 8px;
  border-color: rgba(16, 25, 38, 0.1);
  background: rgba(250, 249, 244, 0.83);
  box-shadow: 0 12px 50px rgba(16, 25, 38, 0.09);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.brand-mark {
  width: 29px;
  height: 29px;
}

.brand-mark path:first-child {
  fill: var(--ink);
}

.brand-mark path:last-child {
  fill: var(--lime);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px;
  border: 1px solid rgba(16, 25, 38, 0.08);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.26);
}

.desktop-nav a {
  padding: 8px 13px;
  border-radius: 99px;
  color: #424b56;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.2s ease, background 0.2s ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--ink);
  background: rgba(16, 25, 38, 0.06);
  outline: none;
}

.header-cta {
  justify-self: end;
}

.button {
  --button-bg: var(--ink);
  --button-color: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 54px;
  padding: 12px 14px 12px 21px;
  border: 0;
  border-radius: 16px;
  color: var(--button-color);
  background: var(--button-bg);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease, background 0.3s ease;
}

.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.14) 45%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}

.button:hover::before {
  transform: translateX(120%);
}

.button:hover {
  box-shadow: 0 12px 30px rgba(16, 25, 38, 0.2);
}

.button:focus-visible,
.text-link:focus-visible,
.card-link:focus-visible,
.cta-mail:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

.button-small {
  min-height: 48px;
  border-radius: 14px;
}

.button-arrow {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: var(--ink);
  background: var(--lime);
  font-size: 16px;
  transition: transform 0.35s var(--ease);
}

.button:hover .button-arrow {
  transform: rotate(7deg) scale(1.06);
}

.button-lime {
  --button-bg: var(--lime);
  --button-color: var(--ink);
}

.button-lime .button-arrow {
  color: #fff;
  background: var(--ink);
}

.button-large {
  min-height: 64px;
  padding-left: 26px;
  border-radius: 19px;
  font-size: 15px;
}

.menu-toggle,
.mobile-menu {
  display: none;
}

.hero {
  position: relative;
  min-height: 930px;
  padding: 175px 0 44px;
  overflow: hidden;
}


.hero-glow {
  position: absolute;
  z-index: -2;
  top: -180px;
  left: -120px;
  width: 750px;
  height: 700px;
  background: radial-gradient(circle, rgba(223, 255, 56, 0.24), transparent 64%);
  filter: blur(10px);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  align-items: center;
  gap: clamp(46px, 6vw, 100px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: 25px 0 30px;
}

.eyebrow,
.section-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 27px;
  color: #4d5660;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hero-title,
.section-title {
  margin: 0;
  font-size: clamp(58px, 6.2vw, 91px);
  font-weight: 500;
  line-height: 0.99;
  letter-spacing: -0.067em;
}

.hero-title {
  max-width: 720px;
}

.title-accent {
  position: relative;
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
}

.lime-dot {
  color: var(--lime);
  text-shadow: 0 3px 0 var(--ink);
}

.hero-lead {
  max-width: 570px;
  margin: 35px 0 0;
  color: #4e5660;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 38px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.text-link span {
  transition: transform 0.3s var(--ease);
}

.text-link:hover span {
  transform: translateY(3px);
}

.hero-alt-contact {
  margin: 18px 0 0;
  color: #697078;
  font-size: 12px;
}

.hero-alt-contact a {
  color: var(--ink);
  border-bottom: 1px solid rgba(16, 25, 38, 0.35);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  transition: border-color 0.2s ease;
}

.hero-alt-contact a:hover,
.hero-alt-contact a:focus-visible {
  border-color: var(--ink);
  outline: none;
}

.hero-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* Hero-Visual: ein realer Ablauf, vertikal gestapelt. Bewusst ohne
   absolute Geometrie - dadurch kann nichts mehr auseinanderlaufen, und
   der Inhalt sagt konkret, was der Kunde davon hat. */
.pipeline {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  padding: 22px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 6%, rgba(223, 255, 56, 0.3), transparent 46%),
    linear-gradient(160deg, #fff, rgba(238, 237, 229, 0.9));
  box-shadow: inset 0 1px 0 #fff, 0 40px 90px rgba(16, 25, 38, 0.14);
}

.pipeline-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 4px 18px;
  border-bottom: 1px solid rgba(16, 25, 38, 0.1);
  color: #5c646d;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pipeline-steps {
  padding: 20px 0 4px;
}

.pstep {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border: 1px solid rgba(16, 25, 38, 0.11);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 25, 38, 0.07);
}

.pstep-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-family: "DM Mono", monospace;
  font-size: 17px;
}

.icon-in { color: var(--ink); background: var(--lime); }
.icon-ai { color: #fff; background: var(--ink); }
.icon-out { color: var(--ink); background: #b9f36a; }

.pstep-body {
  min-width: 0;
  flex: 1;
}

.pstep-body small {
  display: block;
  color: #7d838a;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pstep-body strong {
  display: block;
  margin-top: 3px;
  font-size: 16px;
  letter-spacing: -0.025em;
}

.pstep-body em {
  display: block;
  margin-top: 3px;
  color: #6d747b;
  font-size: 12.5px;
  font-style: normal;
}

.pstep-state {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 99px;
  color: #6d747b;
  background: #f1f0ea;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Der Verbinder ist ein normales Geschwisterelement zwischen zwei
   Zeilen - er kann sich gar nicht erst von ihnen loesen. */
.pipeline-link {
  position: relative;
  height: 34px;
  margin-left: 43px;
}

.pipeline-link::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: repeating-linear-gradient(180deg, rgba(16, 25, 38, 0.42) 0 5px, transparent 5px 10px);
}

.pipeline-link i {
  position: absolute;
  top: 0;
  left: -4.5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime), 0 0 0 3px rgba(223, 255, 56, 0.25);
  opacity: 0;
}

.pipeline-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 20px;
  color: #fff;
  background: var(--ink);
}

.pipeline-foot small {
  display: block;
  color: #949ca6;
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pipeline-foot strong {
  display: block;
  margin-top: 4px;
  font-size: 19px;
  letter-spacing: -0.03em;
}

.pipeline-saved {
  text-align: right;
}

.pipeline-saved strong {
  color: var(--lime);
}

/* Kurzer Impuls, wenn der Zaehler weiterspringt. */
@keyframes count-bump {
  0% { color: #fff; transform: translateY(0); }
  35% { color: var(--lime); transform: translateY(-2px); }
  100% { color: #fff; transform: translateY(0); }
}

.pipeline-count strong span {
  display: inline-block;
}

.pipeline-count strong span.is-bumped {
  animation: count-bump 0.6s var(--ease);
}

/* Ein Durchlauf: Anfrage -> KI -> Angebot raus, dann zaehlt es hoch. */
@keyframes pstep-wake {
  0%, 100% {
    border-color: rgba(16, 25, 38, 0.11);
    box-shadow: 0 12px 30px rgba(16, 25, 38, 0.07);
    transform: translateY(0);
  }
  6% {
    border-color: rgba(16, 25, 38, 0.32);
    box-shadow: 0 18px 40px rgba(16, 25, 38, 0.14);
    transform: translateY(-3px);
  }
  22% {
    border-color: rgba(16, 25, 38, 0.11);
    box-shadow: 0 12px 30px rgba(16, 25, 38, 0.07);
    transform: translateY(0);
  }
}

@keyframes pipeline-drop {
  0%, 4% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  22% { opacity: 1; }
  28% { top: 100%; opacity: 0; }
  100% { top: 100%; opacity: 0; }
}

/* Reihenfolge: Zeile leuchtet auf, Punkt laeuft nach unten, erst wenn er
   angekommen ist, meldet sich die naechste Zeile. */
/* nth-child, nicht nth-of-type: alle Kinder sind div, of-type haette
   die Verbinder verfehlt. */
.pipeline.is-playing .step-in { animation: pstep-wake 7.5s ease-in-out infinite; }
.pipeline.is-playing .pipeline-link:nth-child(2) i { animation: pipeline-drop 7.5s linear 0.7s infinite; }
.pipeline.is-playing .step-ai { animation: pstep-wake 7.5s ease-in-out 2.55s infinite; }
.pipeline.is-playing .pipeline-link:nth-child(4) i { animation: pipeline-drop 7.5s linear 3.3s infinite; }
.pipeline.is-playing .step-out { animation: pstep-wake 7.5s ease-in-out 5.25s infinite; }

.visual-caption {
  margin: 18px 6px 0 0;
  color: #7c8289;
  font-family: "DM Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-align: right;
}

.signal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 90px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.signal-bar p {
  margin: 0;
  color: #7c8287;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.signal-list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.3vw, 34px);
  color: #363f49;
  font-size: 12px;
  font-weight: 700;
}

.signal-list span {
  white-space: nowrap;
}

.signal-list i {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a9adb0;
}

.section-pad {
  padding: 150px 0;
}

.story-section {
  background: var(--paper-bright);
}

.section-kicker {
  gap: 12px;
  margin-bottom: 35px;
  color: #575e65;
  font-size: 13px;
  letter-spacing: 0.09em;
}

/* Statt eines Strichs eine Index-Raute: eigenstaendiges Zeichen,
   das den Abschnitt markiert und die Markenfarbe traegt. */
.section-kicker::before,
.showcase-kicker::before,
.legal-kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--lime);
  box-shadow: 0 0 0 1px rgba(16, 25, 38, 0.22), inset 0 0 0 2px rgba(16, 25, 38, 0.9);
  transform: rotate(45deg);
}

.story-intro,
.services-head,
.process-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  align-items: end;
  gap: 80px;
}

.section-title {
  font-size: clamp(47px, 5.2vw, 76px);
}

.muted {
  color: #a1a3a2;
}

.section-copy {
  max-width: 510px;
  margin: 0 0 5px;
  color: #60676e;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.015em;
}

.day-story {
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  gap: 65px;
  margin-top: 100px;
}

.day-timeline {
  position: relative;
  padding-left: 92px;
}

.timeline-line {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 58px;
  width: 1px;
  background: #deded9;
}

.timeline-line span {
  display: block;
  width: 100%;
  height: 0;
  background: var(--ink);
  transition: height 1.4s var(--ease);
}

.day-story.is-visible .timeline-line span {
  height: 100%;
}

.timeline-item {
  position: relative;
  margin-bottom: 23px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 38px;
  left: -39px;
  width: 11px;
  height: 11px;
  border: 4px solid var(--paper-bright);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(16, 25, 38, 0.18);
}

.time {
  position: absolute;
  top: 37px;
  left: -92px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-weight: 500;
}

.timeline-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 19px;
  min-height: 92px;
  padding: 17px 18px;
  border: 1px solid rgba(16, 25, 38, 0.09);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 35px rgba(16, 25, 38, 0.045);
}


.task-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  font-family: "DM Mono", monospace;
  font-size: 15px;
}

.mail-icon { background: #ebff8a; }
.copy-icon { color: #fff; background: #6982fa; }
.follow-icon { background: #ffd7c9; }

.timeline-card small {
  color: #919599;
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.timeline-card h3 {
  margin: 5px 0 0;
  font-size: 15px;
  letter-spacing: -0.025em;
}

.manual-tag {
  padding: 6px 8px;
  border-radius: 99px;
  color: #8c675a;
  background: #fff1ec;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.day-summary {
  position: sticky;
  top: 110px;
  align-self: start;
  padding: 28px;
  border-radius: 30px;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 30px 70px rgba(16, 25, 38, 0.18);
  overflow: hidden;
}

.day-summary::before {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -90px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: var(--lime);
  filter: blur(80px);
  opacity: 0.18;
}

.summary-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  color: #8c949e;
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.summary-number {
  position: relative;
  z-index: 1;
  margin: 34px 0 0;
}

.summary-number > span {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--lime);
  font-size: 88px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.07em;
}

.summary-number em {
  font-size: 28px;
  font-style: normal;
  letter-spacing: -0.03em;
}

.summary-number small {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

/* Aufschluesselung: dieselben drei Schritte wie im Zeitstrahl links,
   der Balken zeigt den Anteil am Tagestotal. */
.summary-breakdown {
  position: relative;
  z-index: 1;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.summary-breakdown li {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-breakdown li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--share);
  height: 2px;
  border-radius: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease);
}

.day-summary.is-visible .summary-breakdown li::after {
  transform: scaleX(1);
}

.summary-breakdown li:nth-child(2)::after { transition-delay: 0.15s; }
.summary-breakdown li:nth-child(3)::after { transition-delay: 0.3s; }

.summary-breakdown span {
  color: #aab2bc;
  font-size: 13px;
}

.summary-breakdown b {
  flex: 0 0 auto;
  color: #fff;
  font-family: "DM Mono", monospace;
  font-size: 13px;
}

.summary-total {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.summary-total span {
  color: #9199a3;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.summary-total strong {
  flex: 0 0 auto;
  color: var(--lime);
  font-size: 19px;
  letter-spacing: -0.03em;
}

.turning-point {
  position: relative;
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}

.turning-point::before {
  content: "";
  position: absolute;
  top: -300px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: rgba(70, 103, 255, 0.22);
  filter: blur(120px);
}

.turning-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  align-items: end;
  gap: 35px 80px;
}

.section-kicker-light {
  color: #858e99;
}

.light-title span {
  color: var(--lime);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}

.light-copy {
  color: #939aa4;
}

.automation-canvas {
  grid-column: 1 / -1;
  margin-top: 60px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background: #0c1420;
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.26);
  overflow: hidden;
}

.canvas-header,
.canvas-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 55px;
  padding: 0 20px;
  color: #7d8792;
  background: #111b29;
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

.canvas-header > div {
  display: flex;
  gap: 5px;
}

.canvas-header > div i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #324052;
}

.canvas-header > div i:first-child { background: #ff7d5d; }
.canvas-header > div i:nth-child(2) { background: #f6c344; }
.canvas-header > div i:last-child { background: #67cb83; }

.nodes-board {
  position: relative;
  height: 500px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 0.7px, transparent 0.7px);
  background-size: 19px 19px;
  overflow: hidden;
}

.nodes-board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 100px #0c1420;
}

.node-connections {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.node-connections path {
  fill: none;
  stroke: #344154;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.connection-dot {
  fill: var(--lime);
  filter: drop-shadow(0 0 5px var(--lime));
}

/* Ein zusammenhaengender Durchlauf: Trigger -> (AI | Logik) -> CRM -> Ergebnis.
   Jede Etappe startet erst, wenn die vorige ihren Knoten erreicht hat. */
.dot-a1 { offset-path: path("M169 250C232 250 239 144 296 144"); animation: canvas-hop-1 8s linear infinite; }
.dot-a2 { offset-path: path("M169 250C232 250 239 358 296 358"); animation: canvas-hop-1 8s linear infinite; }
.dot-b1 { offset-path: path("M431 144C504 144 499 250 560 250"); animation: canvas-hop-2 8s linear infinite; }
.dot-b2 { offset-path: path("M431 358C504 358 499 250 560 250"); animation: canvas-hop-2 8s linear infinite; }
.dot-c { offset-path: path("M695 250C754 250 780 250 835 250"); animation: canvas-hop-3 8s linear infinite; }

@keyframes canvas-hop-1 {
  0%, 4% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  26% { opacity: 1; }
  30% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes canvas-hop-2 {
  0%, 38% { offset-distance: 0%; opacity: 0; }
  42% { opacity: 1; }
  60% { opacity: 1; }
  64% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes canvas-hop-3 {
  0%, 70% { offset-distance: 0%; opacity: 0; }
  74% { opacity: 1; }
  88% { opacity: 1; }
  92% { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Knoten quittiert die Ankunft des Punktes. */
@keyframes node-receive {
  0%, 100% {
    border-color: #344154;
    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.24);
  }
  4% {
    border-color: rgba(223, 255, 56, 0.8);
    box-shadow: 0 0 0 4px rgba(223, 255, 56, 0.1), 0 14px 25px rgba(0, 0, 0, 0.24);
  }
  16% {
    border-color: #344154;
    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.24);
  }
}

.node-trigger { animation: node-receive 8s linear 7.5s infinite; }
.node-ai,
.node-logic { animation: node-receive 8s linear 2.3s infinite; }
.node-crm { animation: node-receive 8s linear 5s infinite; }
.node-done { animation: node-receive 8s linear 7.2s infinite; }

.flow-node {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 13.5%;
  min-height: 70px;
  padding: 11px;
  border: 1px solid #344154;
  border-radius: 13px;
  background: #152130;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.24);
}


.node-symbol {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 9px;
  color: var(--ink);
  background: var(--lime);
  font-family: "DM Mono", monospace;
  font-size: 12px;
}

.flow-node small,
.flow-node strong {
  display: block;
  line-height: 1.3;
}

.flow-node small {
  margin-bottom: 3px;
  color: #6f7986;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.flow-node strong {
  color: #e9edf3;
  font-size: 10px;
}

.port {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid #0c1420;
  border-radius: 50%;
  background: #637084;
  transform: translateY(-50%);
}

.port-left { left: -5px; }
.port-right { right: -5px; background: var(--lime); }

.node-trigger { top: calc(50% - 35px); left: 3.4%; }
.node-ai { top: calc(28.8% - 35px); left: 29.6%; }
.node-ai .node-symbol { color: #fff; background: var(--blue); }
.node-logic { top: calc(71.6% - 35px); left: 29.6%; }
.node-logic .node-symbol { background: #ff9b75; }
.node-crm { top: calc(50% - 35px); left: 56%; }
.node-crm .node-symbol { color: #fff; background: #687483; }
.node-done { top: calc(50% - 35px); right: 3%; }
.node-done .node-symbol { background: var(--lime); }

.canvas-footer {
  display: flex;
  justify-content: space-between;
  min-height: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.canvas-footer span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.legend-dot.lime { background: var(--lime); }

.outcome-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 42px;
  background: rgba(255, 255, 255, 0.12);
}

.outcome {
  padding: 12px 30px 12px 0;
  background: var(--ink);
}

.outcome:not(:first-child) {
  padding-left: 30px;
}

.outcome strong,
.outcome span {
  display: block;
}

.outcome strong {
  margin-bottom: 9px;
  color: #fff;
  font-size: 13px;
}

.outcome span {
  color: #818a95;
  font-size: 11px;
  line-height: 1.6;
}

.services {
  background: var(--paper);
}

.services-head {
  margin-bottom: 80px;
}

.bento-grid {
  display: grid;
  grid-template-columns: 1.17fr 0.83fr;
  grid-template-rows: repeat(2, minmax(330px, auto));
  gap: 20px;
}

.service-card {
  position: relative;
  padding: 35px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--paper-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}


.service-main {
  grid-row: 1 / 3;
  min-height: 680px;
  background: var(--lime);
}

.service-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-number {
  font-family: "DM Mono", monospace;
  font-size: 10px;
}

.service-pill {
  padding: 7px 10px;
  border: 1px solid rgba(16, 25, 38, 0.13);
  border-radius: 99px;
  color: #626a72;
  background: rgba(255, 255, 255, 0.37);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.service-card h3 {
  margin: 55px 0 15px;
  font-size: clamp(35px, 4vw, 59px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.055em;
}

.service-card p {
  max-width: 460px;
  margin: 0;
  color: #61696f;
  font-size: 14px;
  line-height: 1.7;
}

.service-main p {
  color: rgba(16, 25, 38, 0.7);
}

.service-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}

.service-card li {
  padding: 8px 11px;
  border: 1px solid rgba(16, 25, 38, 0.14);
  border-radius: 99px;
  font-size: 9px;
  font-weight: 600;
}

.card-link {
  position: absolute;
  z-index: 5;
  right: 34px;
  bottom: 30px;
  left: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(16, 25, 38, 0.14);
  font-size: 11px;
  font-weight: 700;
}

.card-link span {
  font-size: 18px;
  transition: transform 0.3s var(--ease);
}

.card-link:hover span {
  transform: translate(3px, -3px);
}

.automation-mini {
  position: absolute;
  right: -45px;
  bottom: 100px;
  left: 40px;
  display: flex;
  align-items: center;
  min-height: 195px;
  padding: 30px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 26px 0 0 26px;
  background: rgba(250, 249, 244, 0.72);
  box-shadow: 0 30px 60px rgba(16, 25, 38, 0.12);
  transform: rotate(-2deg) translateZ(20px);
}

.automation-mini > span {
  display: grid;
  place-items: center;
  gap: 7px;
  min-width: 80px;
  color: #60686e;
  font-family: "DM Mono", monospace;
  font-size: 9px;
}

.automation-mini > span i {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 15px;
  color: var(--ink);
  background: #fff;
  font-style: normal;
  font-size: 13px;
  box-shadow: 0 9px 20px rgba(16, 25, 38, 0.08);
}

.automation-mini > span.mini-center i {
  color: #fff;
  background: var(--ink);
}

.automation-mini b {
  position: relative;
  flex: 1;
  height: 1px;
  margin: 0 6px 18px;
  background: repeating-linear-gradient(90deg, rgba(16, 25, 38, 0.3) 0 4px, transparent 4px 8px);
}

.automation-mini b::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0;
}

/* Erst zur AI, dann weiter zum Ergebnis - nicht beide gleichzeitig. */
.automation-mini b:nth-of-type(1)::after { animation: mini-hop-1 5s linear infinite; }
.automation-mini b:nth-of-type(2)::after { animation: mini-hop-2 5s linear infinite; }

@keyframes mini-hop-1 {
  0%, 5% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  36% { opacity: 1; }
  42% { left: calc(100% - 7px); opacity: 0; }
  100% { left: calc(100% - 7px); opacity: 0; }
}

@keyframes mini-hop-2 {
  0%, 50% { left: 0; opacity: 0; }
  55% { opacity: 1; }
  82% { opacity: 1; }
  88% { left: calc(100% - 7px); opacity: 0; }
  100% { left: calc(100% - 7px); opacity: 0; }
}

/* Die AI-Kachel quittiert die Ankunft. */
@keyframes mini-pulse {
  0%, 38%, 56%, 100% { transform: scale(1); }
  46% { transform: scale(1.14); }
}

.automation-mini > span.mini-center i {
  animation: mini-pulse 5s ease-in-out infinite;
}

.service-web,
.service-search {
  min-height: 440px;
  padding: 29px;
}

.service-web h3,
.service-search h3 {
  margin-top: 32px;
  font-size: 37px;
}

/* Copy oben, Mockup darunter rechts - die Karte ist hoch genug, dass
   sich beide nicht mehr ueberlagern. */
.service-web p,
.service-search p {
  max-width: 92%;
  font-size: 13px;
}

.browser-mini {
  position: absolute;
  right: -18px;
  bottom: 66px;
  width: 54%;
  height: 158px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 16px 0 0 0;
  background: #fff;
  box-shadow: -15px 18px 40px rgba(16, 25, 38, 0.1);
  overflow: hidden;
  transform: rotate(2deg) translateZ(15px);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  background: #edece7;
}

.browser-bar i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #aeb2b5;
}

.browser-bar span {
  flex: 1;
  height: 7px;
  margin-left: 5px;
  border-radius: 5px;
  background: #fff;
}

.browser-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  padding: 27px 16px;
}

.browser-copy small {
  font-family: Georgia, serif;
  font-size: 13px;
  font-style: italic;
}

.browser-copy b {
  width: 66%;
  height: 4px;
  border-radius: 4px;
  background: #deded9;
}

.browser-copy b:nth-of-type(2) { width: 48%; }

.browser-copy em {
  width: max-content;
  margin-top: 3px;
  padding: 5px 8px;
  border-radius: 5px;
  color: #fff;
  background: var(--ink);
  font-size: 9.5px;
  font-style: normal;
}

.browser-orb {
  position: absolute;
  right: -25px;
  bottom: -25px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--lime);
}

/* Karte 02: Inhalt baut sich auf, dann faehrt ein Zeiger zum Button
   und drueckt ihn - der Moment, in dem aus einem Besuch eine Anfrage wird. */
.mini-cursor {
  position: absolute;
  z-index: 4;
  top: 78%;
  left: 22%;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 3px 8px rgba(16, 25, 38, 0.35);
  opacity: 0;
}

.browser-mini .browser-copy small,
.browser-mini .browser-copy b,
.browser-mini .browser-copy em {
  opacity: 0;
}

.no-js .browser-mini .browser-copy small,
.no-js .browser-mini .browser-copy b,
.no-js .browser-mini .browser-copy em,
.no-js .search-mini .result-line,
.no-js .search-mini .ai-answer {
  opacity: 1;
}

@keyframes mini-fade-in {
  0%, 4% { opacity: 0; transform: translateY(5px); }
  12%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes cursor-approach {
  0%, 40% { opacity: 0; top: 78%; left: 22%; }
  46% { opacity: 1; }
  62% { opacity: 1; top: 62%; left: 20%; }
  70% { opacity: 1; transform: scale(0.78); }
  76% { opacity: 1; transform: scale(1); }
  92% { opacity: 0; top: 62%; left: 20%; }
  100% { opacity: 0; }
}

@keyframes button-press {
  0%, 66%, 78%, 100% { transform: scale(1); }
  72% { transform: scale(0.9); }
}

/* "both" ist wichtig: bei reduzierter Bewegung laufen Animationen nur
   einmal und sehr kurz - ohne Fill-Mode faellt der Inhalt danach auf
   opacity 0 zurueck und die Karte waere leer. */
.browser-mini.is-playing .browser-copy small { animation: mini-fade-in 6s ease-out infinite both; }
.browser-mini.is-playing .browser-copy b:nth-of-type(1) { animation: mini-fade-in 6s ease-out 0.25s infinite both; }
.browser-mini.is-playing .browser-copy b:nth-of-type(2) { animation: mini-fade-in 6s ease-out 0.5s infinite both; }
.browser-mini.is-playing .browser-copy em {
  transform-origin: left center;
  animation: mini-fade-in 6s ease-out 0.75s infinite both, button-press 6s ease-in-out infinite;
}
.browser-mini.is-playing .mini-cursor { animation: cursor-approach 6s ease-in-out infinite; }

/* Karte 03: Suchanfrage tippt sich, dann erscheinen Treffer und
   KI-Antwort - die Reihenfolge, in der Sichtbarkeit entsteht. */
.search-mini .result-line,
.search-mini .ai-answer {
  opacity: 0;
}

.search-mini .search-input em {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-style: italic;
}

@keyframes search-type {
  0%, 6% { clip-path: inset(0 100% 0 0); }
  30%, 94% { clip-path: inset(0 -2% 0 0); }
  100% { clip-path: inset(0 -2% 0 0); }
}

@keyframes result-in {
  0%, 40% { opacity: 0; transform: translateY(6px); }
  50%, 94% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes answer-in {
  0%, 62% { opacity: 0; transform: translateY(6px); }
  72%, 94% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

.search-mini.is-playing .search-input em { animation: search-type 6.5s steps(24, end) infinite both; }
.search-mini.is-playing .result-line { animation: result-in 6.5s ease-out infinite both; }
.search-mini.is-playing .ai-answer { animation: answer-in 6.5s ease-out infinite both; }

.search-mini {
  position: absolute;
  right: -15px;
  bottom: 66px;
  width: 55%;
  min-height: 150px;
  padding: 16px;
  border: 1px solid rgba(16, 25, 38, 0.1);
  border-radius: 18px 0 0 0;
  background: #fff;
  box-shadow: -15px 18px 40px rgba(16, 25, 38, 0.1);
  transform: rotate(-1deg) translateZ(15px);
}

.search-input {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid #e2e1dd;
  border-radius: 99px;
  color: #8b9095;
  font-size: 9px;
}

.search-input i {
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--lime);
}

.result-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px;
  border-radius: 9px;
  background: #f4f3ee;
  font-size: 9.5px;
}

.result-line > span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--lime);
}

.result-line b { display: grid; gap: 4px; }
.result-line b i { height: 3px; border-radius: 3px; background: #d5d6d2; }
.result-line b i:last-child { width: 70%; }
.result-line strong { font-size: 9px; }

.ai-answer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(73, 108, 255, 0.18);
  border-radius: 8px;
  color: var(--blue);
  background: rgba(73, 108, 255, 0.05);
  font-size: 9px;
}

.ai-answer p { color: inherit; font-size: inherit; }

.showcases {
  background: var(--paper-bright);
}

.showcases-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  align-items: end;
  gap: 80px;
}

.showcase-list {
  display: grid;
  gap: 115px;
  margin-top: 95px;
}

.showcase {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(48px, 6vw, 90px);
}

/* Mirror the layout by swapping the column widths, not just the order,
   so the stage always keeps the wide column. */
.showcase:nth-child(even) {
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
}

.showcase:nth-child(even) .showcase-copy {
  order: 2;
}

.showcase:nth-child(even) .showcase-stage {
  order: 1;
}

.showcase-copy {
  min-width: 0;
}

.showcase-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #575e65;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.showcase-copy h3 {
  margin: 22px 0 18px;
  font-size: clamp(31px, 3vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.showcase-copy > p {
  max-width: 430px;
  margin: 0;
  color: #687077;
  font-size: 13px;
  line-height: 1.75;
}

.showcase-pill {
  display: inline-block;
  margin-top: 26px;
  padding: 13px 17px;
  border-radius: 16px;
  background: var(--ink);
  box-shadow: 0 14px 30px rgba(16, 25, 38, 0.14);
  transform: rotate(-1deg);
}

.showcase-pill small {
  display: block;
  color: #9299a2;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.showcase-pill strong {
  display: block;
  margin-top: 3px;
  color: var(--lime);
  font-size: 19px;
  letter-spacing: -0.04em;
}

/* Hoehere Spezifitaet als ".showcase-copy > p" (die margin:0 setzt) noetig,
   sonst gewinnt die generische p-Regel und der Abstand faellt weg - genau
   das ist bisher passiert, obwohl der Wert hier korrekt stand. */
.showcase-copy p.showcase-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 68px 0 0;
  color: #777e83;
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.showcase-note i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #58c773;
  box-shadow: 0 0 0 4px rgba(88, 199, 115, 0.14);
}

.showcase-stage {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(16, 25, 38, 0.11);
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 12%, rgba(223, 255, 56, 0.16), transparent 40%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.85), rgba(235, 234, 226, 0.9));
  box-shadow: inset 0 1px 0 #fff, 0 32px 80px rgba(16, 25, 38, 0.11);
  overflow: hidden;
}

.stage-chrome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(16, 25, 38, 0.09);
  color: #7d838a;
  background: rgba(250, 249, 244, 0.75);
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

.stage-chrome > div {
  display: flex;
  gap: 5px;
}

.stage-chrome > div i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d4d3cb;
}

.stage-chrome > div i:first-child { background: #ff7d5d; }
.stage-chrome > div i:nth-child(2) { background: #f6c344; }
.stage-chrome > div i:last-child { background: #67cb83; }

.stage-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 430px;
  padding: 26px;
}

.stage-inbox .stage-body,
.stage-offer .stage-body,
.stage-knowledge .stage-body {
  padding-bottom: 74px;
}

.sc-mail {
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(300px, 92%);
  padding: 11px;
  border: 1px solid rgba(16, 25, 38, 0.11);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 30px rgba(16, 25, 38, 0.08);
}

.sc-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #fff;
  background: var(--ink);
  font-family: "DM Mono", monospace;
  font-size: 12px;
}

.icon-lime {
  color: var(--ink);
  background: var(--lime);
}

.sc-mail small {
  display: block;
  color: #7d838a;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.sc-mail strong {
  display: block;
  font-size: 11px;
}

.sc-mail em {
  margin-left: auto;
  color: #9298a0;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}

.sc-cats small,
.sc-draft small,
.sc-doc small {
  display: block;
  color: #7d838a;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sc-cats small {
  margin-bottom: 8px;
}

.sc-cats > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sc-cat {
  padding: 8px 11px;
  border: 1px solid rgba(16, 25, 38, 0.14);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 9px;
  font-weight: 600;
}

.sc-draft {
  width: min(340px, 94%);
  padding: 14px 16px;
  border: 1px solid rgba(16, 25, 38, 0.11);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 25, 38, 0.07);
}

.type-line {
  margin: 7px 0 0;
  overflow: hidden;
  color: #4e565f;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}

.sc-approve {
  width: min(330px, 94%);
  margin-left: auto;
  padding: 13px 15px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 18px 18px 4px 18px;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 16px 35px rgba(16, 25, 38, 0.18);
}

.sc-approve small {
  display: block;
  color: #9299a2;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.approve-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.approve-btn {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  color: #c6ccd4;
  font-size: 9px;
  font-weight: 700;
}

.btn-send {
  border-color: var(--lime);
  color: var(--ink);
  background: var(--lime);
}

.sc-done {
  position: absolute;
  right: 22px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px 9px 9px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(16, 25, 38, 0.12);
  font-size: 10px;
  font-weight: 700;
}

.sc-done i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--lime);
  font-size: 12px;
  font-style: normal;
}

.sc-url {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(320px, 92%);
  padding: 11px 14px;
  border: 1px solid rgba(16, 25, 38, 0.13);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(16, 25, 38, 0.06);
  color: #8b9095;
  font-size: 11px;
}

.type-url {
  color: #3c444d;
  font-size: 9px;
}

.offer-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.sc-site {
  position: relative;
  flex: 0 0 46%;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16, 25, 38, 0.08);
  overflow: hidden;
}

.sc-site-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  background: #edece7;
}

.sc-site-bar i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #aeb2b5;
}

.sc-site-body {
  display: grid;
  gap: 8px;
  padding: 16px 14px 20px;
}

.sc-site-body b {
  height: 5px;
  border-radius: 5px;
  background: #deded9;
}

.sc-site-body b:first-child {
  width: 55%;
  height: 9px;
  background: #c9c9c2;
}

.sc-site-body .b2 { width: 85%; }
.sc-site-body .b3 { width: 70%; }

.scan-line {
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  height: 26px;
  background: linear-gradient(180deg, rgba(223, 255, 56, 0), rgba(223, 255, 56, 0.55), rgba(223, 255, 56, 0));
  opacity: 0;
}

.sc-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding-top: 6px;
}

.sc-chips span {
  padding: 8px 11px;
  border: 1px solid rgba(16, 25, 38, 0.13);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.75);
  font-size: 9px;
  font-weight: 600;
}

.sc-doc {
  position: relative;
  width: min(340px, 94%);
  padding: 14px 16px 18px;
  border: 1px solid rgba(16, 25, 38, 0.11);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(16, 25, 38, 0.09);
}

.doc-line {
  display: block;
  height: 5px;
  margin-top: 9px;
  border-radius: 5px;
  background: #deded9;
  transform: scaleX(0);
  transform-origin: left;
}

.dl-1 {
  width: 52%;
  height: 8px;
  background: #c9c9c2;
}

.dl-2 { width: 88%; }
.dl-3 { width: 74%; }

.doc-stamp {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 6px 9px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(223, 255, 56, 0.55);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-5deg);
}

.sc-invoice {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.inv-paper {
  position: relative;
  flex: 0 0 40%;
  display: grid;
  gap: 9px;
  padding: 16px 14px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16, 25, 38, 0.09);
  overflow: hidden;
}

.inv-head {
  width: 58%;
  height: 9px;
  border-radius: 5px;
  background: #c9c9c2;
}

.inv-row {
  height: 5px;
  border-radius: 5px;
  background: #deded9;
}

.inv-row.r2 { width: 86%; }
.inv-row.r3 { width: 72%; }

.inv-total {
  width: 44%;
  height: 8px;
  margin-top: 4px;
  border-radius: 5px;
  background: var(--ink);
}

.inv-fields {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.inv-field {
  padding: 9px 11px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  opacity: 0;
}

.inv-field small {
  display: block;
  color: #7d838a;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.inv-field strong {
  display: block;
  margin-top: 2px;
  font-size: 11px;
}

.inv-verdicts {
  display: grid;
  gap: 9px;
  margin-top: auto;
}

.inv-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
}

.inv-verdict i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--lime);
  font-size: 12px;
  font-style: normal;
}

.verdict-flag i {
  color: #fff;
  background: var(--orange);
}

.kn-question {
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(330px, 96%);
  padding: 12px 14px;
  border: 1px solid rgba(16, 25, 38, 0.11);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 30px rgba(16, 25, 38, 0.07);
}

.kn-question p {
  margin: 0;
  font-size: 11px;
}

.kn-sources small,
.kn-answer small {
  display: block;
  color: #7d838a;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kn-sources small {
  margin-bottom: 8px;
}

.kn-sources > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.kn-src {
  padding: 8px 11px;
  border: 1px solid rgba(16, 25, 38, 0.14);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 600;
}

.kn-answer {
  width: min(340px, 96%);
  margin-left: auto;
  padding: 14px 16px;
  border: 1px solid rgba(16, 25, 38, 0.11);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(16, 25, 38, 0.08);
}

.kn-answer p {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
}

.kn-cite {
  display: inline-block;
  margin-top: 9px;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--blue);
  background: rgba(73, 108, 255, 0.09);
  font-family: "DM Mono", monospace;
  font-size: 9px;
}

.stage-invoice .inv-field,
.stage-invoice .inv-verdict,
.stage-knowledge .kn-question,
.stage-knowledge .kn-sources,
.stage-knowledge .kn-answer,
.stage-knowledge .sc-done {
  opacity: 0;
}

.no-js .inv-field,
.no-js .inv-verdict,
.no-js .kn-question,
.no-js .kn-sources,
.no-js .kn-answer,
.no-js .stage-knowledge .sc-done {
  opacity: 1;
}

.stage-invoice.is-playing .scan-line { animation: scan-sweep 1.2s ease-in-out 0.4s 2 both; }
.stage-invoice.is-playing .inv-field:nth-child(1) { animation: stage-pop 0.45s var(--ease) 2.7s both; }
.stage-invoice.is-playing .inv-field:nth-child(2) { animation: stage-pop 0.45s var(--ease) 2.9s both; }
.stage-invoice.is-playing .inv-field:nth-child(3) { animation: stage-pop 0.45s var(--ease) 3.1s both; }
.stage-invoice.is-playing .inv-field:nth-child(4) { animation: stage-pop 0.45s var(--ease) 3.3s both; }
.stage-invoice.is-playing .verdict-ok { animation: stage-in 0.5s var(--ease) 3.9s both; }
.stage-invoice.is-playing .verdict-flag { animation: stage-in 0.5s var(--ease) 4.4s both; }

.stage-knowledge.is-playing .kn-question { animation: stage-in 0.55s var(--ease) 0.15s both; }
.stage-knowledge.is-playing .kn-type { animation: type-clip 0.9s steps(31, end) 0.6s both; }
.stage-knowledge.is-playing .kn-sources { animation: stage-in 0.5s var(--ease) 1.7s both; }
.stage-knowledge.is-playing .src-hit { animation: cat-choose 0.4s ease 2.6s forwards; }
.stage-knowledge.is-playing .kn-src:not(.src-hit) { animation: cat-dim 0.4s ease 2.6s forwards; }
.stage-knowledge.is-playing .kn-answer { animation: stage-in 0.55s var(--ease) 3.2s both; }
.stage-knowledge.is-playing .sc-done { animation: stage-pop 0.5s var(--ease) 4.1s both; }

.stage-sync {
  border-color: rgba(255, 255, 255, 0.12);
  background: #0c1420;
  box-shadow: 0 32px 80px rgba(16, 25, 38, 0.28);
}

.stage-sync .stage-chrome {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #7d8792;
  background: #111b29;
}

.stage-sync .stage-chrome > div i {
  background: #324052;
}

/* One source fanning out to three systems - matches the copy, and the
   fixed aspect ratio lets nodes and connectors share one coordinate grid. */
.sync-board {
  display: block;
  aspect-ratio: 26 / 15;
  min-height: 0;
  padding: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 0.7px, transparent 0.7px);
  background-size: 19px 19px;
}

.sync-node {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 19.1%;
  padding: 0 9px;
  border: 1px solid #344154;
  border-radius: 13px;
  background: #152130;
  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.24);
}

.sync-node small,
.sync-node strong {
  display: block;
  line-height: 1.3;
}

.sync-node small {
  margin-bottom: 2px;
  color: #7c8794;
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  text-transform: uppercase;
}

.sync-node strong {
  color: #e9edf3;
  font-size: 11px;
}

.sync-node .node-symbol {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 12px;
}

/* Prozentwerte statt Container-Query-Einheiten: top bezieht sich auf die
   Board-Hoehe (= 57,7 % der Breite), left und width auf die Breite. */
.sn-source { top: 40.6%; left: 3%; width: 24%; }
.sn-a { top: 11.1%; left: 62%; width: 34%; }
.sn-b { top: 40.6%; left: 62%; width: 34%; }
.sn-c { top: 70%; left: 62%; width: 34%; }

.sn-a .node-symbol { color: #fff; background: var(--blue); }
.sn-b .node-symbol { background: #ff9b75; }

.sync-link {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 100%;
  height: 1px;
  background: #344154;
  transform-origin: 0 50%;
  scale: 0 1;
}

/* Ports sit on the nodes, not on the links, so the draw-in scale
   can never squash them. */
.sn-source::after,
.sn-a::before,
.sn-b::before,
.sn-c::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid #0c1420;
  border-radius: 50%;
  background: #637084;
  transform: translateY(-50%);
}

.sn-source::after {
  right: -5px;
  background: var(--lime);
}

.sn-a::before,
.sn-b::before,
.sn-c::before {
  left: -5px;
}

.sync-link em {
  position: absolute;
  top: 50%;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  opacity: 0;
}

/* Die drei Zielsysteme werden nacheinander bedient, nicht gleichzeitig. */
@keyframes sync-hop-1 {
  0%, 3% { left: 0%; opacity: 0; }
  7% { opacity: 1; }
  24% { opacity: 1; }
  28% { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

@keyframes sync-hop-2 {
  0%, 35% { left: 0%; opacity: 0; }
  39% { opacity: 1; }
  57% { opacity: 1; }
  61% { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

@keyframes sync-hop-3 {
  0%, 68% { left: 0%; opacity: 0; }
  72% { opacity: 1; }
  90% { opacity: 1; }
  94% { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

@keyframes sync-node-receive {
  0%, 100% { border-color: #344154; }
  4% { border-color: rgba(223, 255, 56, 0.8); }
  18% { border-color: #344154; }
}

/* Laengen als Prozent der Quellknoten-Breite (Knoten = 24 % des Boards). */
.link-a { width: 162%; rotate: -25.9deg; }
.link-b { width: 146%; rotate: 0deg; }
.link-c { width: 162%; rotate: 25.9deg; }

@keyframes link-draw {
  to { scale: 1 1; }
}

.stage-inbox .sc-mail,
.stage-inbox .sc-cats,
.stage-inbox .sc-draft,
.stage-inbox .sc-approve,
.stage-inbox .sc-done,
.stage-offer .sc-url,
.stage-offer .sc-site,
.stage-offer .sc-chips span,
.stage-offer .sc-doc,
.stage-offer .sc-done,
.stage-sync .sync-node {
  opacity: 0;
}

/* Without JS nothing gets .is-playing, so show the finished state. */
.no-js .stage-inbox .sc-mail,
.no-js .stage-inbox .sc-cats,
.no-js .stage-inbox .sc-draft,
.no-js .stage-inbox .sc-approve,
.no-js .stage-inbox .sc-done,
.no-js .stage-offer .sc-url,
.no-js .stage-offer .sc-site,
.no-js .stage-offer .sc-chips span,
.no-js .stage-offer .sc-doc,
.no-js .stage-offer .sc-done,
.no-js .stage-sync .sync-node {
  opacity: 1;
}

.no-js .type-line { clip-path: none; }
.no-js .doc-line { transform: scaleX(1); }
.no-js .sync-link { scale: 1 1; }

@keyframes stage-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes stage-pop {
  0% { opacity: 0; transform: scale(0.8); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes type-clip {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 -2% 0 0); }
}

@keyframes cat-choose {
  to { border-color: var(--lime); background: var(--lime); }
}

@keyframes cat-dim {
  to { opacity: 0.45; }
}

@keyframes btn-press {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.92); }
}

@keyframes scan-sweep {
  0% { opacity: 0; transform: translateY(-12px); }
  15%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(78px); }
}

@keyframes doc-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes stamp-in {
  from { opacity: 0; transform: rotate(-5deg) scale(1.7); }
  to { opacity: 1; transform: rotate(-5deg) scale(1); }
}

@keyframes path-draw {
  to { stroke-dashoffset: 0; }
}

.stage-inbox.is-playing .sc-mail { animation: stage-in 0.55s var(--ease) 0.15s both; }
.stage-inbox.is-playing .sc-cats { animation: stage-in 0.55s var(--ease) 0.75s both; }
.stage-inbox.is-playing .cat-hit { animation: cat-choose 0.4s ease 1.6s forwards; }
.stage-inbox.is-playing .sc-cat:not(.cat-hit) { animation: cat-dim 0.4s ease 1.6s forwards; }
.stage-inbox.is-playing .sc-draft { animation: stage-in 0.55s var(--ease) 2.1s both; }
.stage-inbox.is-playing .tl-1 { animation: type-clip 0.8s steps(28, end) 2.5s both; }
.stage-inbox.is-playing .tl-2 { animation: type-clip 0.8s steps(28, end) 3.45s both; }
.stage-inbox.is-playing .tl-3 { animation: type-clip 0.7s steps(22, end) 4.4s both; }
.stage-inbox.is-playing .sc-approve { animation: stage-in 0.55s var(--ease) 5.2s both; }
.stage-inbox.is-playing .btn-send { animation: btn-press 0.45s var(--ease) 6.1s; }
.stage-inbox.is-playing .sc-done { animation: stage-pop 0.5s var(--ease) 6.7s both; }

.stage-offer.is-playing .sc-url { animation: stage-in 0.55s var(--ease) 0.15s both; }
.stage-offer.is-playing .type-url { animation: type-clip 0.8s steps(19, end) 0.55s both; }
.stage-offer.is-playing .sc-site { animation: stage-in 0.55s var(--ease) 1.5s both; }
.stage-offer.is-playing .scan-line { animation: scan-sweep 1.1s ease-in-out 1.9s 2 both; }
.stage-offer.is-playing .sc-chips span:nth-child(1) { animation: stage-pop 0.45s var(--ease) 4.2s both; }
.stage-offer.is-playing .sc-chips span:nth-child(2) { animation: stage-pop 0.45s var(--ease) 4.4s both; }
.stage-offer.is-playing .sc-chips span:nth-child(3) { animation: stage-pop 0.45s var(--ease) 4.6s both; }
.stage-offer.is-playing .sc-doc { animation: stage-in 0.55s var(--ease) 5.2s both; }
.stage-offer.is-playing .dl-1 { animation: doc-grow 0.5s var(--ease) 5.6s both; }
.stage-offer.is-playing .dl-2 { animation: doc-grow 0.5s var(--ease) 5.85s both; }
.stage-offer.is-playing .dl-3 { animation: doc-grow 0.5s var(--ease) 6.1s both; }
.stage-offer.is-playing .doc-stamp { animation: stamp-in 0.5s var(--ease) 6.9s both; }
.stage-offer.is-playing .sc-done { animation: stage-pop 0.5s var(--ease) 7.6s both; }

/* Source in, lines draw, targets land, then the dots start - each dot
   begins only once its own line is fully drawn. */
.stage-sync.is-playing .sn-source { animation: stage-in 0.55s var(--ease) 0.2s both; }
.stage-sync.is-playing .link-a { animation: link-draw 0.6s var(--ease) 0.8s forwards; }
.stage-sync.is-playing .link-b { animation: link-draw 0.6s var(--ease) 1s forwards; }
.stage-sync.is-playing .link-c { animation: link-draw 0.6s var(--ease) 1.2s forwards; }
.stage-sync.is-playing .link-a em { animation: sync-hop-1 6.6s linear 2.3s infinite; }
.stage-sync.is-playing .link-b em { animation: sync-hop-2 6.6s linear 2.3s infinite; }
.stage-sync.is-playing .link-c em { animation: sync-hop-3 6.6s linear 2.3s infinite; }
.stage-sync.is-playing .sn-a { animation: stage-in 0.5s var(--ease) 1.4s both, sync-node-receive 6.6s linear 4.05s infinite; }
.stage-sync.is-playing .sn-b { animation: stage-in 0.5s var(--ease) 1.6s both, sync-node-receive 6.6s linear 6.23s infinite; }
.stage-sync.is-playing .sn-c { animation: stage-in 0.5s var(--ease) 1.8s both, sync-node-receive 6.6s linear 8.5s infinite; }

.showcase-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 110px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.showcase-cta p {
  max-width: 440px;
  margin: 0;
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

.clients {
  position: relative;
  background: #ecebe4;
  overflow: hidden;
}

.clients::before {
  content: "";
  position: absolute;
  top: 70px;
  right: -200px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: rgba(223, 255, 56, 0.13);
  filter: blur(100px);
  pointer-events: none;
}

.clients-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: end;
  gap: 80px;
}

.clients-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
}

.clients-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 99px;
  color: #687077;
  background: rgba(255, 255, 255, 0.44);
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.clients-note i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #58c773;
  box-shadow: 0 0 0 4px rgba(88, 199, 115, 0.14);
}

.case-list {
  position: relative;
  display: grid;
  gap: 130px;
  margin-top: 95px;
}

.case-study {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(310px, 0.72fr);
  align-items: center;
  gap: clamp(48px, 6vw, 90px);
}

.case-pharmacy {
  grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1.28fr);
}

.case-pharmacy .case-visual {
  order: 2;
}

.case-pharmacy .case-content {
  order: 1;
}

.case-visual {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 555px;
  padding: 50px 0 50px 50px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 38px;
  background:
    radial-gradient(circle at 20% 20%, rgba(73, 108, 255, 0.22), transparent 38%),
    #111b2b;
  box-shadow: 0 32px 80px rgba(16, 25, 38, 0.15);
  overflow: hidden;
  isolation: isolate;
}

.case-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.24;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to right, #000, transparent 82%);
}

.case-pharmacy .case-visual {
  padding: 50px 50px 50px 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(223, 255, 56, 0.2), transparent 36%),
    #d5c3a3;
}

.case-pharmacy .case-visual::before {
  opacity: 0.18;
  background-image: linear-gradient(rgba(44, 33, 24, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(44, 33, 24, 0.12) 1px, transparent 1px);
  background-size: 45px 45px;
  mask-image: linear-gradient(to left, #000, transparent 82%);
}

.case-browser {
  position: relative;
  width: calc(100% + 38px);
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-right: 0;
  border-radius: 22px 0 0 22px;
  background: #09111f;
  box-shadow: -15px 28px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: rotate(-1.35deg);
  transform-origin: center;
  transition: transform 0.7s var(--ease), box-shadow 0.7s ease;
}

.case-pharmacy .case-browser {
  border: 1px solid rgba(44, 33, 24, 0.17);
  border-left: 0;
  border-radius: 0 22px 22px 0;
  background: #f4ead6;
  box-shadow: 15px 28px 70px rgba(44, 33, 24, 0.25);
  transform: rotate(1.35deg);
}



.case-browser-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 43px;
  padding: 0 15px;
  color: #8792a1;
  background: #111c2d;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.case-pharmacy .case-browser-bar {
  color: #837563;
  background: #eadcc3;
}

.case-browser-bar > div {
  display: flex;
  gap: 5px;
}

.case-browser-bar i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #31415a;
}

.case-browser-bar i:first-child { background: #ff7d5d; }
.case-browser-bar i:nth-child(2) { background: #f2c244; }
.case-browser-bar i:last-child { background: #68ca82; }

.case-browser-bar > span {
  padding: 5px 16px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.045);
}

.case-pharmacy .case-browser-bar > span {
  background: rgba(255, 255, 255, 0.35);
}

.case-browser-bar b {
  justify-self: end;
  font-size: 12px;
  font-weight: 400;
}

.case-screenshot {
  position: relative;
  aspect-ratio: 1.44 / 1;
  overflow: hidden;
}

.case-screenshot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.case-screenshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 1.1s var(--ease), filter 0.5s ease;
}


.case-view {
  position: absolute;
  z-index: 4;
  right: 25px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  color: #fff;
  background: rgba(10, 17, 29, 0.77);
  backdrop-filter: blur(12px);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 0.35s var(--ease), background 0.35s ease;
}

.case-pharmacy .case-view {
  right: auto;
  left: 25px;
  color: #2c2118;
  border-color: rgba(44, 33, 24, 0.12);
  background: rgba(250, 247, 240, 0.82);
}

.case-view i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--lime);
  font-size: 11px;
  font-style: normal;
}


.case-content {
  min-width: 0;
}

.case-meta {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #7a8084;
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.case-meta i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(223, 255, 56, 0.2);
}

.case-content h3 {
  margin: 25px 0 22px;
  font-size: clamp(40px, 4vw, 59px);
  font-weight: 500;
  line-height: 0.99;
  letter-spacing: -0.06em;
}

.case-content h3 em {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.case-it .case-content h3 em {
  color: #4f70ed;
}

.case-pharmacy .case-content h3 em {
  color: #817057;
}

.case-summary {
  margin: 0;
  color: #687077;
  font-size: 12px;
  line-height: 1.75;
}

.case-content blockquote {
  position: relative;
  margin: 34px 0 25px;
  padding: 25px 22px 23px 54px;
  border: 1px solid rgba(16, 25, 38, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.4);
}

.quote-mark {
  position: absolute;
  top: 16px;
  left: 20px;
  color: var(--lime);
  font-family: Georgia, serif;
  font-size: 40px;
  line-height: 1;
  text-shadow: 0 1px 0 var(--ink);
}

.case-content blockquote p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.35;
}

.case-content blockquote cite {
  display: block;
  margin-top: 10px;
  color: #858b8f;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.case-tags span {
  padding: 7px 9px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 99px;
  color: #6c7378;
  font-size: 9.5px;
  font-weight: 600;
}

.case-self .case-visual {
  justify-content: center;
  padding: 50px 40px;
  background:
    radial-gradient(circle at 18% 14%, rgba(223, 255, 56, 0.16), transparent 42%),
    #111b2b;
}

.case-self .case-visual::before {
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
}

.case-self .case-content h3 em {
  color: #93a637;
}

.case-system {
  width: min(440px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: #0c1420;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: rotate(-1deg);
  transition: transform 0.7s var(--ease);
}


.case-system-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 43px;
  padding: 0 15px;
  color: #8792a1;
  background: #111c2d;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
}

.case-system-bar > div {
  display: flex;
  gap: 5px;
}

.case-system-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #31415a;
}

.case-system-bar i:first-child { background: #ff7d5d; }
.case-system-bar i:nth-child(2) { background: #f2c244; }
.case-system-bar i:last-child { background: #68ca82; }

.case-system-bar b {
  justify-self: end;
  color: var(--lime);
  font-size: 10px;
  font-weight: 400;
}

.case-system-body {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.agent-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid #344154;
  border-radius: 14px;
  background: #152130;
}

.icon-blue {
  color: #fff;
  background: var(--blue);
}

.agent-row small {
  display: block;
  color: #6f7986;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.agent-row strong {
  display: block;
  color: #e9edf3;
  font-size: 10px;
  line-height: 1.35;
}

.agent-row em {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 99px;
  color: #bce545;
  background: rgba(223, 255, 56, 0.08);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.agent-row .tag-human,
.agent-row em.tag-human {
  color: #93a5ff;
  background: rgba(73, 108, 255, 0.14);
}

.case-fact {
  margin: 34px 0 25px;
}

.scenario-block {
  margin-top: 110px;
  padding-top: 45px;
  border-top: 1px solid rgba(16, 25, 38, 0.14);
}

.scenario-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 30px;
}

.scenario-head p {
  max-width: 620px;
  margin: 0;
  color: #6b7278;
  font-size: 13px;
  line-height: 1.7;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 38px;
}

.scenario {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid rgba(16, 25, 38, 0.12);
  border-radius: 26px;
  background: rgba(250, 249, 244, 0.7);
}


.scenario-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #6c7378;
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.scenario-index {
  padding: 6px 9px;
  border: 1px solid rgba(16, 25, 38, 0.13);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.5);
}

.scenario h3 {
  margin: 26px 0 14px;
  font-size: clamp(24px, 2.2vw, 31px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.scenario p {
  margin: 0;
  color: #687077;
  font-size: 13px;
  line-height: 1.75;
}

.scenario ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.scenario li {
  padding: 8px 11px;
  border: 1px solid rgba(16, 25, 38, 0.13);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
}

.clients-transparency {
  max-width: 560px;
  margin: 75px auto 0;
  color: #737a7f;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.clients-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 100px;
  padding-top: 30px;
  border-top: 1px solid rgba(16, 25, 38, 0.14);
}

.clients-transparency + .clients-footer {
  margin-top: 45px;
}

.clients-footer p {
  margin: 0;
  color: #737a7f;
  font-size: 12px;
}

.process {
  padding-top: 110px;
  background: var(--paper-bright);
}

.process-heading {
  margin-bottom: 80px;
}

.process-list {
  border-top: 1px solid var(--line);
}

.process-step {
  display: grid;
  grid-template-columns: 150px 1fr 250px;
  align-items: center;
  gap: 40px;
  min-height: 220px;
  padding: 35px 0;
  border-bottom: 1px solid var(--line);
}

.step-index {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #7c8288;
  font-family: "DM Mono", monospace;
  font-size: 15px;
  font-weight: 500;
}

.step-index i {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--lime);
  box-shadow: 0 0 0 1px rgba(16, 25, 38, 0.22), inset 0 0 0 2px rgba(16, 25, 38, 0.9);
  transform: rotate(45deg);
}

.step-copy h3 {
  margin: 0 0 10px;
  font-size: 37px;
  font-weight: 500;
  letter-spacing: -0.045em;
}

.step-copy p {
  max-width: 540px;
  margin: 0;
  color: #777d82;
  font-size: 13px;
  line-height: 1.7;
}

.step-art {
  position: relative;
  justify-self: end;
  width: 190px;
  height: 130px;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: #f0efe9;
  overflow: hidden;
  transition: transform 0.4s var(--ease), background 0.4s ease;
}


.art-radar i {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(16, 25, 38, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.art-radar i:first-child { width: 42px; height: 42px; }
.art-radar i:nth-child(2) { width: 80px; height: 80px; }
.art-radar i:nth-child(3) { width: 118px; height: 118px; }
.art-radar span { position: absolute; top: 31px; left: 112px; width: 12px; height: 12px; border: 4px solid #f0efe9; border-radius: 50%; background: var(--blue); }

.art-build i {
  position: absolute;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(16, 25, 38, 0.13);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 25, 38, 0.08);
}

.art-build i:first-child { top: 21px; left: 30px; transform: rotate(-8deg); }
.art-build i:nth-child(2) { top: 46px; left: 68px; z-index: 2; background: var(--ink); transform: rotate(4deg); }
.art-build i:nth-child(3) { top: 30px; right: 25px; transform: rotate(10deg); }
.art-build span { position: absolute; z-index: 3; top: 57px; left: 89px; color: var(--lime); font-size: 18px; }

.art-chart {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 8px;
  padding: 25px 45px;
}

.art-chart i { width: 16px; border-radius: 6px 6px 2px 2px; background: rgba(16, 25, 38, 0.15); }
.art-chart i:first-child { height: 30%; }
.art-chart i:nth-child(2) { height: 50%; }
.art-chart i:nth-child(3) { height: 70%; }
.art-chart i:nth-child(4) { height: 100%; background: var(--ink); }
.art-chart span { position: absolute; top: 18px; right: 22px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lime); font-size: 12px; }

/* Das sind wir */
.team {
  background: var(--paper);
}

.team-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  align-items: end;
  gap: 80px;
  margin-bottom: 70px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* Bewusst zurueckhaltend: kompakter Avatar neben dem Text statt
   grossflaechigem Bild - die Personen sollen die Sektion nicht dominieren. */
.team-member {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--paper-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.team-photo {
  position: relative;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 1px solid rgba(16, 25, 38, 0.1);
  border-radius: 50%;
  background: #e9e8e0;
}

.team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.team-body {
  min-width: 0;
  padding-top: 4px;
}

.team-role {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #575e65;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.team-role::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--lime);
  box-shadow: 0 0 0 1px rgba(16, 25, 38, 0.22), inset 0 0 0 2px rgba(16, 25, 38, 0.9);
  transform: rotate(45deg);
}

.team-member h3 {
  margin: 12px 0 10px;
  font-size: clamp(21px, 1.7vw, 26px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.team-member p {
  max-width: 420px;
  margin: 0;
  color: #687077;
  font-size: 13px;
  line-height: 1.75;
}

.team-note {
  margin: 46px 0 0;
  color: #777e83;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.team-note a {
  color: var(--ink);
  border-bottom: 1px solid rgba(16, 25, 38, 0.3);
}

.team-note a:hover {
  border-bottom-color: var(--ink);
}

.calculator-section {
  background: var(--paper);
}

.calculator-wrap {
  display: grid;
  grid-template-columns: 0.68fr 1.32fr;
  align-items: start;
  gap: clamp(55px, 8vw, 120px);
}

.calculator-copy {
  position: sticky;
  top: 120px;
}

.calculator-copy .section-title {
  font-size: clamp(45px, 4.6vw, 67px);
}

.marker {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.marker::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -6px;
  bottom: 3px;
  left: -4px;
  height: 18px;
  border-radius: 4px;
  background: var(--lime);
  transform: rotate(-1deg);
}

.calculator-copy .section-copy {
  margin-top: 35px;
}

.calc-assurance {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  color: #777e83;
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
}

.calc-assurance span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--lime);
}

.calculator {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  border: 1px solid rgba(16, 25, 38, 0.13);
  border-radius: 30px;
  background: var(--paper-bright);
  box-shadow: 0 35px 80px rgba(16, 25, 38, 0.11);
  overflow: hidden;
}

.calculator-sliders {
  display: grid;
  gap: 48px;
  padding: 45px;
}

.calculator label > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 19px;
}

.calculator label strong {
  font-size: 12px;
}

.calculator output {
  min-width: 55px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  text-align: center;
}

.calculator label small {
  display: block;
  margin-top: 10px;
  color: #929699;
  font-size: 9.5px;
  line-height: 1.4;
}

input[type="range"] {
  --range-progress: 25%;
  width: 100%;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ink) var(--range-progress), #deded9 var(--range-progress));
  appearance: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  width: 21px;
  height: 21px;
  border: 5px solid var(--lime);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 3px 10px rgba(16, 25, 38, 0.24);
  appearance: none;
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 5px solid var(--lime);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 3px 10px rgba(16, 25, 38, 0.24);
}

input[type="range"]:focus-visible {
  outline: 3px solid rgba(73, 108, 255, 0.35);
  outline-offset: 5px;
}

.calculator-result {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 525px;
  padding: 40px 35px 35px;
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}

.calculator-result::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(73, 108, 255, 0.38);
  filter: blur(80px);
}

.result-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9aa2ac;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.result-number {
  position: relative;
  margin-top: 58px;
}

.result-number strong,
.result-number span {
  display: block;
}

.result-number strong {
  color: var(--lime);
  font-size: clamp(78px, 8vw, 112px);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.09em;
}

.result-number span {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 600;
}

.result-equivalent {
  position: relative;
  margin-top: 13px;
  color: #949ca6;
  font-size: 10px;
}

.result-equivalent span {
  color: #fff;
  font-weight: 700;
}

.result-chart {
  position: relative;
  display: flex;
  gap: 5px;
  width: 100%;
  height: 6px;
  margin-top: 32px;
}

.result-chart span {
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s var(--ease);
}

.current-bar { width: 30%; background: #3d4858; }
.saved-bar { width: 70%; background: var(--lime); }

.calculator-result > p {
  position: relative;
  margin: 10px 0 0;
  color: #69727e;
  font-size: 9px;
}

.calculator-result .result-note {
  min-height: 46px;
  margin: 20px 0 16px;
  padding: 10px 13px;
  border-left: 2px solid var(--lime);
  border-radius: 0 10px 10px 0;
  color: #c3cad3;
  background: rgba(223, 255, 56, 0.07);
  font-size: 11px;
  line-height: 1.6;
}

.calculator-result .button {
  width: 100%;
  margin-top: auto;
}

.faq {
  padding-top: 120px;
  background: var(--paper-bright);
}

.faq-grid {
  display: grid;
  grid-template-columns: 0.83fr 1.17fr;
  align-items: start;
  gap: 100px;
}

.faq .section-title {
  font-size: clamp(41px, 4.4vw, 62px);
}

.accordion {
  border-top: 1px solid var(--line);
}

.accordion-item {
  border-bottom: 1px solid var(--line);
}

.accordion-item button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 30px;
  width: 100%;
  padding: 28px 0;
  border: 0;
  color: var(--ink);
  background: none;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.accordion-item button i {
  position: relative;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background 0.3s ease, transform 0.3s var(--ease);
}

.accordion-item button i::before,
.accordion-item button i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.accordion-item button i::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.3s var(--ease);
}

.accordion-item button:hover i,
.accordion-item button:focus-visible i,
.accordion-item.is-open button i {
  background: var(--lime);
}

.accordion-item button:focus-visible {
  outline: none;
}

.accordion-item button:focus-visible span {
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 3px;
}

.accordion-item.is-open button i {
  transform: rotate(45deg);
}

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}

.accordion-content > div {
  overflow: hidden;
}

.accordion-item.is-open .accordion-content {
  grid-template-rows: 1fr;
}

.accordion-content p {
  max-width: 610px;
  margin: 0;
  padding: 0 60px 28px 0;
  color: #70777d;
  font-size: 12px;
  line-height: 1.75;
}

.final-cta {
  position: relative;
  min-height: 720px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--ink);
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  top: -150px;
  left: 50%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: rgba(223, 255, 56, 0.1);
  filter: blur(100px);
  transform: translateX(-50%);
}

/* Zweispaltig: links der Textblock, rechts die Terminbuchung.
   Der mailto-Link steht im Markup hinter dem Widget (Tab-Reihenfolge)
   und wird hier per Grid wieder unter den Textblock gesetzt. */
.cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: start;
  gap: 26px clamp(48px, 6vw, 90px);
  padding: 110px 0;
}

.cta-copy {
  grid-column: 1;
  grid-row: 1;
}

.cta-booking {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.cta-alt {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: #929aa5;
  font-size: 14px;
}

.cta-kicker {
  color: #8d96a1;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cta-inner h2 {
  margin: 26px 0 22px;
  font-size: clamp(42px, 4.4vw, 66px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.cta-inner h2 span {
  color: var(--lime);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.cta-inner p {
  max-width: 520px;
  margin: 0;
  color: #929aa5;
  font-size: 15px;
  line-height: 1.7;
}

.cta-hint {
  margin-top: 20px !important;
  color: #b6bec8 !important;
}

.cta-mail {
  color: var(--lime);
  font-family: "DM Mono", monospace;
  font-size: 13px;
  border-bottom: 1px solid rgba(223, 255, 56, 0.45);
}

.cta-mail:hover {
  border-bottom-color: var(--lime);
}

/* Karte im bestehenden Seitenstil - das Widget selbst bleibt unberuehrt. */
.booking-card {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: var(--paper-bright);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
}

.booking-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  color: #575e65;
  font-family: "DM Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.booking-label::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--lime);
  box-shadow: 0 0 0 1px rgba(16, 25, 38, 0.22), inset 0 0 0 2px rgba(16, 25, 38, 0.9);
  transform: rotate(45deg);
}

/* Bis das Widget geladen ist, haelt der Container die Hoehe. */
#dw-booking {
  min-height: 240px;
}

.booking-privacy {
  max-width: none !important;
  margin: 16px 2px 0 !important;
  color: #7b8490 !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
}

.booking-privacy a {
  color: #aab3bd;
  border-bottom: 1px solid #4a545f;
}

.booking-privacy a:hover {
  color: #fff;
}

/* Fallback, wenn das externe Script nicht laedt oder blockiert wird. */
.booking-fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 6px 2px 10px;
}

.booking-fallback p {
  max-width: none;
  margin: 0;
  color: #3c444d;
  font-size: 14.5px;
  line-height: 1.65;
}

.cta-orbit {
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.cta-orbit::before,
.cta-orbit::after,
.cta-orbit i {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
}

.cta-orbit::before { inset: 45px; }
.cta-orbit::after { inset: 90px; }
.cta-orbit i:first-child { top: 22px; left: 80px; width: 17px; height: 17px; background: var(--lime); border: 6px solid var(--ink); }
.cta-orbit i:nth-child(2) { right: 52px; bottom: 65px; width: 10px; height: 10px; background: var(--blue); border: 5px solid var(--ink); }
.cta-orbit i:last-child { top: 50%; left: 50%; width: 5px; height: 5px; background: var(--orange); }
.orbit-left { left: -210px; bottom: -70px; animation: orbit-spin 28s linear infinite; }
.orbit-right { top: -120px; right: -170px; animation: orbit-spin 35s linear infinite reverse; }

.site-footer {
  padding: 80px 0 25px;
  color: #fff;
  background: #0c1420;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 0.72fr);
  gap: 70px;
}

.brand-light .brand-mark path:first-child { fill: #fff; }

.footer-brand p {
  max-width: 340px;
  margin: 22px 0 0;
  color: #78818c;
  font-size: 12px;
  line-height: 1.7;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-column > span {
  margin-bottom: 9px;
  color: #626c77;
  font-family: "DM Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-column a,
.footer-column p {
  margin: 0;
  color: #a3abb3;
  font-size: 10px;
  line-height: 1.75;
  transition: color 0.2s ease;
}

.footer-column a:hover { color: var(--lime); }

.footer-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 75px;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #59636f;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.footer-bottom p { margin: 0; }
.footer-bottom > div { display: flex; gap: 23px; }
.footer-bottom a:hover { color: #fff; }

.back-to-top {
  position: absolute;
  right: 0;
  bottom: 45px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #fff;
  background: transparent;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s var(--ease);
}

.back-to-top:hover {
  color: var(--ink);
  background: var(--lime);
  transform: translateY(-4px);
}

.sticky-cta {
  position: fixed;
  z-index: 90;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(16, 25, 38, 0.14);
  border-radius: 20px;
  background: rgba(250, 249, 244, 0.92);
  box-shadow: 0 18px 50px rgba(16, 25, 38, 0.18);
  backdrop-filter: blur(14px);
  visibility: hidden;
  transform: translateY(140%);
  transition: transform 0.5s var(--ease), visibility 0.5s;
}

.sticky-cta .button {
  flex: 1;
}

.sticky-cta.is-shown {
  visibility: visible;
  transform: translateY(0);
}

.sticky-dismiss {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(16, 25, 38, 0.14);
  border-radius: 12px;
  color: #4d5660;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1120px) {
  :root { --container: min(100% - 48px, 1040px); }

  .desktop-nav { gap: 0; }
  .desktop-nav a { padding-inline: 10px; }
  .hero { min-height: 850px; padding-top: 145px; }
  .hero-grid { gap: 35px; }
  .hero-title { font-size: clamp(54px, 6.2vw, 75px); }
  .calculator-wrap { grid-template-columns: 0.57fr 1.43fr; gap: 55px; }
  .calculator-sliders { padding: 38px 30px; }
  .nodes-board { transform-origin: left center; }
}

@media (max-width: 900px) {
  :root { --container: calc(100vw - 40px); }

  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav,
  .header-cta { display: none; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 47px;
    height: 47px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--ink);
    cursor: pointer;
  }
  .menu-toggle span:not(.sr-only) { display: block; width: 18px; height: 1px; background: #fff; transition: transform 0.3s var(--ease); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu {
    position: fixed;
    z-index: -1;
    top: -10px;
    right: -10px;
    left: -10px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: calc(100vh + 10px);
    padding: 115px 30px 35px;
    color: #fff;
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.35s ease, visibility 0.35s, transform 0.35s var(--ease);
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-menu > a:not(.button) { padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
  .mobile-menu .button { margin-top: auto; }
  .site-header:has(.mobile-menu.is-open) .brand { position: relative; z-index: 2; color: #fff; }
  .site-header:has(.mobile-menu.is-open) .brand-mark path:first-child { fill: #fff; }

  .hero { min-height: auto; padding-top: 145px; }
  .hero-grid,
  .story-intro,
  .services-head,
  .showcases-head,
  .clients-heading,
  .turning-grid,
  .process-heading,
  .team-head,
  .calculator-wrap,
  .cta-inner,
  .faq-grid { grid-template-columns: 1fr; }
  /* Gestapelt: Text, dann Buchung, dann mailto - entspricht der DOM- und
     damit der Tab-Reihenfolge. */
  .cta-copy,
  .cta-booking,
  .cta-alt { grid-column: 1; grid-row: auto; }
  .cta-booking { margin-top: 8px; }
  .cta-inner p { max-width: 620px; }
  .hero-copy { max-width: 700px; }
  .hero-title { font-size: clamp(58px, 10vw, 86px); }
  .hero-visual { width: min(620px, 100%); margin: 34px auto 0; }
  .pipeline { margin-inline: auto; }
  .visual-caption { text-align: left; }
  .signal-bar { margin-top: 70px; }
  .signal-bar p { display: none; }
  .signal-list { width: 100%; justify-content: space-between; }
  .section-pad { padding: 110px 0; }
  .story-intro,
  .services-head,
  .showcases-head,
  .clients-heading,
  .team-head,
  .process-heading { gap: 35px; }
  .team-head { margin-bottom: 45px; }
  .section-copy { max-width: 620px; }
  .showcase-list { gap: 80px; margin-top: 70px; }
  .showcase,
  .showcase:nth-child(even) { grid-template-columns: 1fr; gap: 34px; }
  .showcase:nth-child(even) .showcase-copy,
  .showcase:nth-child(even) .showcase-stage { order: initial; }
  .showcase-copy > p { max-width: 620px; }
  .showcase-stage { max-width: 700px; }
  .day-story { grid-template-columns: 1fr; gap: 50px; }
  .day-summary { position: relative; top: auto; }
  .turning-grid { gap: 30px; }
  .automation-canvas,
  .outcome-row { grid-column: auto; }
  /* Zu schmal fuer das Board: stapeln statt horizontal scrollen, sonst
     wird der letzte Knoten abgeschnitten. */
  .automation-canvas { margin-top: 35px; }
  .nodes-board { display: flex; flex-direction: column; gap: 22px; height: auto; padding: 24px 18px; }
  .node-connections { display: none; }
  .flow-node,
  .node-trigger,
  .node-ai,
  .node-crm,
  .node-logic,
  .node-done { position: relative; top: auto; right: auto; left: auto; width: 100%; }
  .node-trigger { order: 1; }
  .node-ai { order: 2; }
  .node-logic { order: 3; }
  .node-crm { order: 4; }
  .node-done { order: 5; }
  .port { display: none; }
  .flow-node:not(.node-trigger)::after {
    content: "";
    position: absolute;
    top: -18px;
    left: 26px;
    width: 1px;
    height: 15px;
    background: repeating-linear-gradient(180deg, #344154 0 3px, transparent 3px 6px);
  }
  .outcome-row { grid-template-columns: 1fr; gap: 0; background: transparent; }
  .outcome { padding: 22px 0 !important; border-bottom: 1px solid rgba(255,255,255,.12); }
  .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .service-main { grid-row: auto; min-height: 650px; }
  .service-web,
  .service-search { min-height: 380px; }
  .case-list { gap: 90px; margin-top: 70px; }
  .case-study,
  .case-pharmacy { grid-template-columns: 1fr; gap: 42px; }
  .case-pharmacy .case-visual,
  .case-pharmacy .case-content { order: initial; }
  .case-visual { min-height: 520px; }
  .case-content { max-width: 650px; }
  .case-pharmacy .case-content { justify-self: end; }
  .process-step { grid-template-columns: 80px 1fr 190px; gap: 25px; }
  .step-art { width: 170px; }
  .calculator-copy { position: relative; top: auto; }
  .calculator-wrap { gap: 55px; }
  .calculator { max-width: 760px; }
  .faq-grid { gap: 55px; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-column:last-child { display: none; }
  .sticky-cta { display: flex; }
}

@media (max-width: 640px) {
  :root { --container: calc(100vw - 28px); }

  .site-header { width: calc(100vw - 20px); }
  .brand { font-size: 18px; }
  .brand-mark { width: 27px; height: 27px; }
  .hero { padding-top: 125px; }
  .hero-copy { padding-top: 15px; }
  .eyebrow { margin-bottom: 22px; }
  .hero-title { font-size: clamp(50px, 15vw, 68px); line-height: .98; }
  .hero-lead { margin-top: 27px; font-size: 16px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; margin-top: 30px; }
  .hero-note { margin-top: 32px; }
  /* Stage is too small for exact hub geometry: drop the connectors and
     let the chips size themselves so the labels stay readable. */
  .visual-caption { display: none; }
  .signal-bar { margin-top: 50px; overflow: hidden; }
  .signal-list { width: max-content; gap: 18px; animation: mobile-marquee 13s linear infinite; }
  @keyframes mobile-marquee { to { transform: translateX(-36%); } }
  .section-pad { padding: 86px 0; }
  .section-kicker { margin-bottom: 25px; }
  .section-title { font-size: clamp(42px, 12vw, 58px); }
  .story-intro,
  .services-head,
  .showcases-head,
  .process-heading { gap: 28px; }
  .section-copy { font-size: 14px; line-height: 1.7; }
  .showcase-list { gap: 65px; margin-top: 55px; }
  .showcase-copy h3 { font-size: 30px; }
  .showcase-stage { border-radius: 24px; }
  .stage-body { gap: 12px; min-height: 380px; padding: 18px; }
  .stage-inbox .stage-body,
  .stage-offer .stage-body { padding-bottom: 68px; }
  .sc-mail,
  .sc-draft,
  .sc-approve,
  .sc-url,
  .sc-doc,
  .kn-question,
  .kn-answer { width: 100%; }
  .sc-invoice { flex-direction: column; }
  .inv-paper { flex-basis: auto; width: min(240px, 100%); }
  .stage-knowledge .stage-body { padding-bottom: 68px; }
  .offer-row { flex-direction: column; }
  .sc-site { flex-basis: auto; width: min(260px, 100%); }
  .sc-chips { flex-direction: row; flex-wrap: wrap; padding-top: 0; }
  .sc-done { right: 16px; bottom: 16px; }
  /* Too narrow for the fan-out: stack it and connect with short rules. */
  .sync-board { display: flex; flex-direction: column; gap: 22px; aspect-ratio: auto; padding: 22px 16px; }
  .sync-link { display: none; }
  .sync-node,
  .sn-source,
  .sn-a,
  .sn-b,
  .sn-c { position: relative; top: auto; left: auto; width: 100%; height: auto; min-height: 52px; }
  .sn-source::after { display: none; }
  .sn-a::before,
  .sn-b::before,
  .sn-c::before {
    top: -19px;
    left: 23px;
    width: 1px;
    height: 16px;
    border: 0;
    border-radius: 0;
    background: repeating-linear-gradient(180deg, #344154 0 3px, transparent 3px 6px);
    transform: none;
  }
  .showcase-cta { align-items: flex-start; flex-direction: column; gap: 24px; margin-top: 70px; }
  .day-story { margin-top: 65px; }
  .day-timeline { padding-left: 45px; }
  .timeline-line { left: 18px; }
  .timeline-item::before { left: -32px; }
  .time { display: none; }
  .timeline-card { grid-template-columns: auto 1fr; min-height: 105px; padding: 14px; gap: 12px; }
  .timeline-card .manual-tag { display: none; }
  .timeline-card h3 { font-size: 13px; }
  .task-icon { width: 43px; height: 43px; }
  .day-summary { min-height: 0; padding: 23px; }
  .summary-number { margin-top: 28px; }
  .summary-number > span { font-size: 72px; }
  .summary-number em { font-size: 24px; }
  .turning-point { padding-bottom: 95px; }
  /* Auf schmalen Schirmen braucht der Text den Platz mehr als der Status. */
  .pipeline { padding: 16px; border-radius: 24px; }
  .pstep { gap: 12px; padding: 13px; }
  .pstep-state { display: none; }
  .pstep-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
  .pstep-body strong { font-size: 15px; }
  .pipeline-link { margin-left: 39px; }
  .pipeline-foot { padding: 14px 16px; }
  .pipeline-foot strong { font-size: 17px; }
  .automation-canvas { margin-right: -14px; margin-left: -14px; border-right: 0; border-left: 0; border-radius: 0; }
  .nodes-board { gap: 18px; padding: 20px 14px; }
  .flow-node { gap: 10px; padding: 10px; }
  .node-symbol { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }
  .flow-node small { font-size: 9px; }
  .flow-node strong { font-size: 9.5px; }
  .services-head { margin-bottom: 55px; }
  .service-card { padding: 25px; border-radius: 24px; }
  .service-main { min-height: 610px; }
  .service-card h3 { margin-top: 40px; font-size: 42px; }
  .service-web,
  .service-search { min-height: 410px; }
  .service-web h3,
  .service-search h3 { margin-top: 28px; font-size: 36px; }
  .automation-mini { right: -35px; bottom: 90px; left: 18px; min-height: 170px; padding: 17px; }
  .automation-mini > span { min-width: 65px; }
  .automation-mini > span i { width: 43px; height: 43px; }
  .browser-mini,
  .search-mini { width: 72%; }
  .card-link { right: 25px; bottom: 24px; left: 25px; }
  .clients-heading { gap: 28px; }
  .case-list { gap: 75px; margin-top: 55px; }
  .case-study,
  .case-pharmacy { gap: 32px; }
  .case-visual,
  .case-pharmacy .case-visual { min-height: 370px; padding: 32px 0 32px 22px; border-radius: 25px; }
  .case-pharmacy .case-visual { padding: 32px 22px 32px 0; }
  .case-browser { width: calc(100% + 22px); border-radius: 15px 0 0 15px; }
  .case-pharmacy .case-browser { border-radius: 0 15px 15px 0; }
  .case-browser-bar { height: 36px; padding-inline: 11px; }
  .case-browser-bar > span { padding-inline: 9px; }
  .case-view { right: 13px; bottom: 13px; }
  .case-pharmacy .case-view { right: auto; left: 13px; }
  .case-self .case-visual { min-height: auto; padding: 26px 16px 56px; }
  .clients-transparency { margin-top: 55px; text-align: left; }
  .scenario-block { margin-top: 70px; padding-top: 35px; }
  .scenario-head { grid-template-columns: 1fr; gap: 18px; }
  .scenario-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .scenario { padding: 24px; border-radius: 22px; }
  .case-content h3 { margin-top: 20px; font-size: 43px; }
  .case-content blockquote { margin-top: 26px; }
  .clients-footer { align-items: flex-start; flex-direction: column; margin-top: 70px; }
  .process { padding-top: 80px; }
  .process-heading { margin-bottom: 55px; }
  .process-step { grid-template-columns: 50px 1fr; min-height: 200px; gap: 15px; }
  .team-grid { grid-template-columns: 1fr; gap: 16px; }
  .team-member { gap: 18px; padding: 22px; border-radius: 22px; }
  .team-photo { width: 72px; height: 72px; }
  .team-note { margin-top: 34px; }
  .step-copy h3 { font-size: 31px; }
  .step-art { display: none; }
  .calculator-wrap { gap: 45px; }
  .calculator { grid-template-columns: 1fr; border-radius: 24px; }
  .calculator-sliders { gap: 38px; padding: 34px 23px; }
  .calculator-result { min-height: 470px; padding: 35px 25px 25px; }
  .result-number { margin-top: 50px; }
  .result-number strong { font-size: 91px; }
  .faq { padding-top: 80px; }
  .faq-grid { gap: 45px; }
  .accordion-item button { padding: 23px 0; font-size: 13px; }
  .accordion-content p { padding-right: 15px; }
  .final-cta { min-height: 0; }
  .cta-inner { padding: 80px 0; gap: 22px; }
  .cta-inner h2 { font-size: clamp(50px, 14vw, 66px); }
  .cta-inner p { font-size: 13px; }
  .booking-card { padding: 18px; }
  .booking-label { font-size: 12px; margin-bottom: 14px; }
  .cta-orbit { width: 300px; height: 300px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 50px 30px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-bottom > div { order: -1; }
  .back-to-top { bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}