/* Three-panel website preview inspired by the supplied reference screens. */
.web-showcase.web-cinema {
  display: block !important;
  position: relative;
  width: min(1240px, calc(100vw - 120px));
  max-width: none !important;
  min-height: clamp(520px, 68svh, 720px) !important;
  margin: clamp(104px, 13vw, 180px) auto clamp(118px, 14vw, 200px) !important;
  padding: 0 !important;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  isolation: isolate;
}

.web-showcase.web-cinema::before {
  content: none;
}

.web-showcase.web-cinema::after {
  content: none;
}

.web-cinema-track {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0;
  height: clamp(520px, 68svh, 720px) !important;
  min-height: inherit;
  overflow: hidden;
  border: 1px solid rgba(246, 246, 243, 0.16);
  border-radius: 16px;
  background: #050505;
  box-shadow: 0 32px 110px rgba(0, 0, 0, 0.38);
}

.web-cinema-track::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 38%, rgba(0, 0, 0, 0.2));
}

.web-cinema-card {
  position: relative;
  flex: 0 0 clamp(118px, 14vw, 168px);
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 0;
  color: #f6f6f3;
  background: var(--web-image) center / cover no-repeat;
  background-color: #050505;
  cursor: pointer;
  transition: flex 580ms cubic-bezier(0.22, 1, 0.36, 1);
}

.web-cinema-card + .web-cinema-card {
  margin-left: -1px;
}

.web-cinema-card.is-active {
  flex: 1 1 0;
  z-index: 1;
}

.web-cinema-card img {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  opacity: 0.78;
  filter: grayscale(0.95) contrast(1.05) brightness(0.6);
  transform: scale(1.04);
  transition: opacity 520ms ease, filter 520ms ease, transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.web-cinema-card::before,
.web-cinema-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.web-cinema-card::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 46%, rgba(0, 0, 0, 0.28)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.82));
  opacity: 0.95;
}

.web-cinema-card::after {
  z-index: 2;
  background: rgba(0, 0, 0, 0.46);
  transition: opacity 520ms ease;
}

.web-cinema-card.is-active img {
  opacity: 0.96;
  filter: grayscale(0.55) contrast(1.08) brightness(0.72);
  transform: scale(1);
}

.web-cinema-card.is-active::after {
  opacity: 0;
}

.web-cinema-content {
  position: absolute;
  left: clamp(24px, 3.2vw, 40px);
  right: clamp(22px, 3vw, 42px);
  bottom: clamp(28px, 4vw, 50px);
  z-index: 5;
  max-width: min(540px, calc(100% - 10px));
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
  pointer-events: none;
}

.web-cinema-card.is-active .web-cinema-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 240ms ease 50ms, transform 240ms cubic-bezier(0.22, 1, 0.36, 1) 50ms, visibility 0s;
  pointer-events: auto;
}

.web-cinema-number {
  display: block;
  margin-bottom: clamp(10px, 1.2vw, 16px);
  color: rgba(246, 246, 243, 0.48);
  font-size: clamp(3.4rem, 6.4vw, 6rem);
  font-weight: 250;
  line-height: 0.82;
}

.web-cinema-tags,
.web-cinema .web-panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-cinema-tags {
  margin-bottom: 14px;
}

.web-cinema-tags span,
.web-cinema .web-panel-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(246, 246, 243, 0.22);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.34);
  color: rgba(246, 246, 243, 0.78);
  font-size: 0.72rem;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.web-cinema-card h3 {
  max-width: 13ch;
  margin: 0 0 12px;
  color: #ffffff;
  font-size: clamp(2.25rem, 4vw, 4.4rem);
  font-weight: 950;
  line-height: 0.94;
  letter-spacing: 0;
  text-shadow: 0 18px 56px rgba(0, 0, 0, 0.56);
}

.web-cinema-card p {
  max-width: 52ch;
  margin: 0;
  color: rgba(246, 246, 243, 0.74);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.55;
}

.web-cinema .web-panel-meta {
  margin-top: clamp(18px, 2vw, 26px);
}

.web-cinema .web-panel-link {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  display: inline-flex;
  width: max-content;
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  background: rgba(246, 246, 243, 0.11);
}

.web-cinema-toggle,
.web-cinema-nav {
  position: absolute;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(246, 246, 243, 0.18);
  border-radius: 50%;
  background: rgba(246, 246, 243, 0.13);
  color: rgba(246, 246, 243, 0.92);
  font: inherit;
  font-weight: 900;
  line-height: 1;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease;
}

.web-cinema-toggle {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.web-cinema-toggle:hover,
.web-cinema-nav:hover,
.web-cinema-toggle:focus-visible,
.web-cinema-nav:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(246, 246, 243, 0.42);
  background: rgba(246, 246, 243, 0.2);
}

.web-cinema-toggle {
  right: 18px;
  bottom: 18px;
  width: 38px;
  height: 38px;
}

.web-cinema-nav {
  top: 50%;
  width: 50px;
  height: 50px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.35rem;
  transform: translateY(-50%);
}

.web-cinema-nav:hover,
.web-cinema-nav:focus-visible {
  transform: translateY(calc(-50% - 2px));
}

.web-cinema-prev {
  left: auto;
  right: 100%;
  margin-right: 12px;
}

.web-cinema-next {
  right: auto;
  left: 100%;
  margin-left: 12px;
}

html[data-theme="light"] .web-cinema-track {
  border-color: rgba(17, 17, 17, 0.12);
  background: #111111;
}

@media (max-width: 920px) {
  .web-showcase.web-cinema {
    width: min(100%, calc(100vw - 88px));
    min-height: auto !important;
    margin-top: clamp(76px, 18vw, 116px) !important;
    margin-bottom: clamp(86px, 20vw, 130px) !important;
  }

  .web-cinema-track {
    display: block;
    height: min(660px, 82svh) !important;
    min-height: 560px;
    transform: none !important;
  }

  .web-cinema-card {
    display: none;
    flex: none !important;
    width: 100%;
    height: 100%;
    margin-left: 0;
    transition: none !important;
  }

  .web-cinema-card.is-active {
    display: block;
  }
}

@media (max-width: 620px) {
  .web-cinema-track {
    min-height: 620px;
  }

  .web-cinema-content {
    inset: auto 18px 26px;
  }

  .web-cinema-number {
    font-size: clamp(3rem, 18vw, 4.6rem);
  }

  .web-cinema-card h3 {
    max-width: 12ch;
    font-size: clamp(2.1rem, 11vw, 3.45rem);
  }

  .web-cinema-card p {
    font-size: 0.94rem;
  }

  .web-cinema .web-panel-link {
    width: 100%;
  }

  .web-cinema-nav {
    top: 30%;
    width: 44px;
    height: 44px;
  }

  .web-cinema-prev {
    right: calc(100% + 10px);
    margin-right: 0;
  }

  .web-cinema-next {
    left: calc(100% + 10px);
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .web-cinema-track,
  .web-cinema-card,
  .web-cinema-card img,
  .web-cinema-content,
  .web-cinema-toggle,
  .web-cinema-nav {
    transition: none !important;
  }

}
:root {
  --ink: #f6f6f3;
  --muted: rgba(241, 255, 244, 0.68);
  --faint: rgba(255, 255, 255, 0.08);
  --paper: #f3f5ef;
  --dark: #050505;
  --panel: rgba(7, 12, 8, 0.82);
  --line: rgba(128, 255, 159, 0.15);
  --surface: #0b0b0b;
  --control-bg: rgba(3, 5, 3, 0.94);
  --control-ink: #f6f6f3;
  --control-panel: rgba(255, 255, 255, 0.08);
  --header-mark: #f6f6f3;
  --contact-bg: #050505;
  --contact-ink: #f6f6f3;
  --contact-muted: rgba(241, 255, 244, 0.66);
  --accent: #f4f4f4;
  --accent-soft: #a8a8a8;
  --accent-hover: #ffffff;
  --accent-ink: #050505;
  --accent-ink-muted: rgba(2, 4, 2, 0.72);
  --rust: #777777;
  --max: 1180px;
  --map-image-dark: url("Bilder/waves-dark.svg");
  --map-image-light: url("Bilder/waves-light.svg");
  --map-image: var(--map-image-dark);
  --map-filter: saturate(1.02) contrast(1.05) brightness(0.9);
  --waves-bg: #050505;
  --waves-stroke: #5f7863;
  --hero-ink: #f7fffc;
  --hero-shadow: 0 3px 30px rgba(0, 0, 0, 0.68);
  --page-progress: 0deg;
  color-scheme: dark;
}

html[data-theme="light"] {
  --ink: #1d1b3a;
  --muted: rgba(29, 27, 58, 0.62);
  --faint: rgba(0, 0, 0, 0.08);
  --paper: #f4f4fb;
  --dark: #f4f4fb;
  --panel: rgba(252, 251, 255, 0.82);
  --line: rgba(29, 27, 58, 0.13);
  --surface: rgba(252, 251, 255, 0.94);
  --control-bg: rgba(20, 16, 46, 0.94);
  --control-ink: #f1f0fb;
  --control-panel: rgba(255, 255, 255, 0.14);
  --header-mark: #1d1b3a;
  --contact-bg: #161333;
  --contact-ink: #f1f0fb;
  --contact-muted: rgba(241, 240, 251, 0.68);
  --accent: #111111;
  --accent-soft: #555555;
  --accent-hover: #0d5f59;
  --accent-ink: #ffffff;
  --accent-ink-muted: rgba(255, 255, 255, 0.78);
  --map-image: var(--map-image-light);
  --map-filter: saturate(0.95) contrast(1.02) brightness(1.01);
  --waves-bg: #f4f4fb;
  --waves-stroke: #8983b8;
  --hero-ink: #1d1b3a;
  --hero-shadow: 0 2px 24px rgba(255, 255, 255, 0.78);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--dark);
  color: var(--ink);
  letter-spacing: 0;
  overflow-x: hidden;
  cursor: auto;
}

body.detail-page {
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 255, 255, 0.075), transparent 32%),
    var(--dark);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.008;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

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

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

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

button,
a,
input,
textarea,
select {
  cursor: pointer;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  justify-items: center;
  align-items: center;
  padding: 12px clamp(18px, 4vw, 42px) 0;
  color: var(--control-ink);
  transition: padding 300ms ease;
  border-bottom: 1px solid transparent;
  pointer-events: none;
}

body.menu-open .site-header {
  padding-top: 12px;
}

.site-header.is-scrolled {
  padding-top: 12px;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.header-mark {
  margin-bottom: 6px;
  color: var(--header-mark);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.16);
}

.control-bar {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 40px auto;
  grid-template-rows: 40px 0fr;
  align-items: center;
  align-content: center;
  column-gap: 4px;
  row-gap: 0;
  min-height: 52px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--control-ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
  transition: grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 300ms ease, padding 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.control-bar.is-notifying {
  grid-template-rows: 40px 1fr;
  row-gap: 4px;
  border-radius: 26px;
  min-height: 84px;
  padding-bottom: 13px;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.34);
  transform: translateY(1px);
}

.menu-toggle {
  pointer-events: auto;
  position: absolute;
  top: 32px;
  right: clamp(18px, 4vw, 42px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 17px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: var(--control-bg);
  color: inherit;
  font: inherit;
  cursor: pointer;
  z-index: 80;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.menu-toggle[aria-expanded="true"] {
  border-color: transparent;
}

.theme-toggle,
.language-control,
.scroll-percent {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}

.theme-toggle {
  font: inherit;
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.theme-icon {
  width: 16px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
  background: transparent;
}

.theme-icon::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: repeating-conic-gradient(currentColor 0 10deg, transparent 10deg 30deg);
  mask: radial-gradient(circle, transparent 0 56%, #000 58% 64%, transparent 66%);
}

html[data-theme="dark"] .theme-icon {
  width: 17px;
  border: 0;
  background: transparent;
  box-shadow: inset -6px 0 0 currentColor;
}

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

html[data-theme="dark"] .theme-icon::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 2px;
  width: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -9px 4px 0 currentColor, -3px 11px 0 currentColor;
}

.language-control {
  width: auto;
  min-width: 60px;
  padding: 0 12px;
  border-radius: 999px;
}

.language-control select {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.03rem;
  font-weight: 900;
  text-transform: uppercase;
  appearance: none;
  text-align: center;
}

.language-control select option {
  color: #111712;
}

.scroll-percent {
  min-width: 62px;
  width: auto;
  padding-inline: 12px;
  border-radius: 999px;
  background: var(--control-panel);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1;
  color: inherit;
  user-select: none;
}

.island-message {
  grid-column: 1 / -1;
  justify-self: center;
  display: block;
  min-width: 100%;
  max-width: 240px;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  color: rgba(248, 246, 241, 0.84);
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  transition: opacity 240ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1), margin-top 300ms ease, padding-top 300ms ease;
}

.control-bar.is-notifying .island-message {
  margin-top: 5px;
  padding-top: 4px;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.control-bar.is-switching .island-message {
  opacity: 0;
  transform: translateY(4px) scale(0.99);
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  transition: transform 240ms ease, opacity 240ms ease;
}

.menu-icon {
  position: relative;
  width: 15px;
  height: 15px;
  background: transparent;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 15px;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}

.menu-icon::before {
  transform: translateY(-50%);
}

.menu-icon::after {
  transform: translateY(-50%) rotate(90deg);
}

.menu-toggle[aria-expanded="true"] .menu-icon::before {
  transform: translateY(-50%) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-icon::after {
  transform: translateY(-50%) rotate(-45deg);
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: minmax(360px, 49.8vw) minmax(460px, 1fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 20%, rgba(244, 244, 244, 0.14), transparent 30vw),
    linear-gradient(110deg, #050505 0%, #07100d 46%, #111111 100%);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms ease, visibility 320ms ease;
}

.menu-overlay::before {
  content: "";
  position: absolute;
  left: -9vw;
  bottom: -23vw;
  width: 42vw;
  aspect-ratio: 1;
  border: 1px solid rgba(244, 242, 235, 0.17);
  border-radius: 50%;
  opacity: 0.72;
}

.menu-overlay::after {
  content: "";
  position: absolute;
  top: 53px;
  left: 53%;
  width: 4px;
  aspect-ratio: 1;
  background: rgba(244, 242, 235, 0.34);
  box-shadow: 20px -22px 0 rgba(244, 242, 235, 0.32);
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu-visual {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4, 7, 6, 0.16), rgba(4, 7, 6, 0.86)),
    linear-gradient(rgba(4, 7, 6, 0.1), rgba(4, 7, 6, 0.44)),
    var(--map-image);
  background-position: 42% center;
  background-size: cover;
  border-right: 1px solid rgba(244, 242, 235, 0.18);
  opacity: 0.94;
  transform: translateX(-18px);
  transition: transform 560ms ease, filter 560ms ease, opacity 560ms ease;
}

.menu-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244, 242, 235, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 242, 235, 0.13) 1px, transparent 1px);
  background-size: 78px 78px;
  opacity: 0.34;
}

.menu-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 78%, rgba(244, 242, 235, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 12%, rgba(244, 242, 235, 0.2) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent, rgba(5, 8, 7, 0.5));
  background-size: 132px 132px, 172px 172px, auto;
}

.menu-overlay.is-open .menu-visual {
  transform: translateX(0);
}

.menu-content {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  align-content: stretch;
  width: min(38vw, 500px);
  margin-left: clamp(54px, 9vw, 140px);
  padding: clamp(66px, 8vh, 84px) clamp(18px, 2.4vw, 30px) 18px 0;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 520ms ease, opacity 520ms ease;
}

.menu-overlay.is-open .menu-content {
  transform: translateY(0);
  opacity: 1;
}

.menu-main {
  display: grid;
  grid-row: 2;
  gap: clamp(4px, 0.7vh, 9px);
}

.menu-main a {
  width: fit-content;
  max-width: 100%;
  padding: 0.02em 0.18em 0.08em;
  border: 1px solid transparent;
  border-radius: 16px;
  color: rgba(246, 246, 243, 0.84);
  font-size: clamp(2.45rem, 5.15vw, 3.65rem);
  line-height: 0.98;
  font-weight: 780;
  letter-spacing: 0;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.08em;
  transition: color 180ms ease, transform 180ms ease, background 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.menu-main a:hover,
.menu-main a:focus-visible {
  color: #b7ffd0;
  transform: translateX(10px);
}

.menu-main a.is-current:hover,
.menu-main a.is-current:focus-visible {
  color: #ffffff;
}

.menu-main a.is-current {
  border-color: rgba(246, 246, 243, 0.3);
  background: rgba(246, 246, 243, 0.12);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.menu-sub {
  display: grid;
  grid-row: 3;
  gap: 8px;
  margin-top: clamp(36px, 6vh, 52px);
}

.menu-sub a,
.menu-meta {
  color: rgba(244, 242, 235, 0.72);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.menu-sub a:hover,
.menu-sub a:focus-visible,
.menu-meta a:hover,
.menu-meta a:focus-visible {
  color: var(--accent);
}

.menu-cta {
  grid-row: 4;
  align-self: start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: clamp(34px, 6vh, 42px);
  padding: 0 32px 0 20px;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 86% 100%, 0 100%);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease;
}

.menu-cta:hover,
.menu-cta:focus-visible {
  transform: translateY(-2px);
  background: var(--accent-soft);
}

.menu-meta {
  grid-row: 5;
  display: flex;
  position: fixed;
  left: clamp(18px, 2.2vw, 32px);
  right: clamp(18px, 2.2vw, 32px);
  bottom: clamp(14px, 2vh, 24px);
  width: auto;
  margin-left: 0;
  justify-content: space-between;
  gap: 18px;
  align-self: end;
  color: rgba(244, 242, 235, 0.36);
}

body.menu-open {
  overflow: hidden;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: 120px clamp(18px, 5vw, 64px) 28px;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: start;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  padding-bottom: 46px;
  color: var(--hero-ink);
  text-shadow: var(--hero-shadow);
}

.eyebrow,
.section-kicker {
  margin: 0 0 20px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 26px;
  max-width: 760px;
  font-size: clamp(3.4rem, 7.2vw, 6.7rem);
  line-height: 0.9;
  font-weight: 560;
  letter-spacing: 0;
}

.hero-copy {
  max-width: 560px;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 28px 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 88% 100%, 0 100%);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.button.primary:hover,
.button.primary:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.button.secondary {
  background: var(--faint);
  border-color: var(--line);
  color: var(--ink);
}

.button.secondary:hover,
.button.secondary:focus-visible {
  background: var(--line);
  color: var(--ink);
}

.service-card span {
  color: var(--accent-soft);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 112px clamp(18px, 4vw, 34px);
}

.map-story {
  position: relative;
  min-height: 870svh;
  background: var(--dark);
  overflow: clip;
}

.map-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  --map-scale: 1.01;
  --index-opacity: 0;
}

.map-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  filter: var(--map-filter);
  transform: scale(var(--map-scale));
  will-change: filter, transform;
  transition: filter 760ms ease, background-color 760ms ease;
  background-color: var(--waves-bg);
}

.map-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.map-waves path {
  stroke: var(--waves-stroke);
  transition: stroke 760ms ease;
}
.map-image:has(.map-waves) .map-image-layer { display: none; }

.map-image-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% var(--map-y, 50%);
  background-repeat: no-repeat;
  will-change: background-position, opacity;
  transition: opacity 860ms cubic-bezier(0.22, 1, 0.36, 1);
}

.map-image-layer-dark {
  background-image: var(--map-image-dark);
  opacity: 1;
}

.map-image-layer-light {
  background-image: var(--map-image-light);
  opacity: 0;
}

html[data-theme="light"] .map-image-layer-dark {
  opacity: 0;
}

html[data-theme="light"] .map-image-layer-light {
  opacity: 1;
}

.map-vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(5, 8, 7, 0.5) 0%, rgba(5, 8, 7, 0.02) 46%, rgba(5, 8, 7, 0.28) 100%),
    linear-gradient(0deg, rgba(5, 8, 7, 0.66) 0%, rgba(5, 8, 7, 0.02) 48%, rgba(5, 8, 7, 0.26) 100%),
    radial-gradient(circle at 68% 34%, rgba(244, 242, 235, 0.14), transparent 36%);
}

html[data-theme="light"] body::before {
  opacity: 0.006;
}

html[data-theme="light"] .map-vignette {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, transparent 48%, rgba(255, 255, 255, 0.06) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, transparent 44%, rgba(255, 255, 255, 0.04) 100%);
}

html[data-theme="light"] .map-step {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

html[data-theme="light"] .menu-visual {
  background:
    linear-gradient(rgba(4, 7, 6, 0.45), rgba(4, 7, 6, 0.76)),
    var(--map-image);
}

html[data-theme="light"] .statement {
  background:
    linear-gradient(rgba(8, 10, 9, 0.78), rgba(8, 10, 9, 0.82)),
    var(--map-image);
}

.map-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-top: 1px solid rgba(244, 242, 235, 0.62);
  background-image: radial-gradient(circle at 2px 2px, rgba(244, 242, 235, 0.16) 0 1px, transparent 1.7px);
  background-size: 138px 138px;
  opacity: 0.16;
}

.index_inner {
  position: absolute;
  top: clamp(72px, 12vh, 104px);
  left: clamp(28px, 10.5vw, 194px);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 96px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(244, 242, 235, 0.34);
  border-radius: 999px;
  background: rgba(5, 8, 7, 0.22);
  color: rgba(244, 242, 235, 0.95);
  backdrop-filter: blur(14px);
  opacity: var(--index-opacity, 0);
  pointer-events: none;
  transform: translateY(calc((1 - var(--index-opacity, 0)) * -8px));
  will-change: opacity, transform;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.index_divider,
.index_total {
  color: rgba(244, 242, 235, 0.64);
}

.map-flow {
  position: relative;
  z-index: 2;
  margin-top: -100svh;
}

.map-title {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: min(1160px, calc(100vw - 48px));
  margin: 0 auto;
  padding: clamp(110px, 17vh, 160px) clamp(18px, 5vw, 74px) clamp(70px, 11vh, 118px);
  color: #f4f2eb;
  text-align: left;
  text-shadow: 0 10px 42px rgba(0, 0, 0, 0.8), 0 2px 3px rgba(0, 0, 0, 0.9);
}

.map-title::before {
  content: "";
  position: absolute;
  left: clamp(18px, 5vw, 74px);
  top: 19vh;
  bottom: 15vh;
  width: 1px;
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--accent) 18%, rgba(255, 255, 255, 0.14) 72%, transparent);
  box-shadow: 0 0 32px rgba(255, 255, 255, 0.14);
}

.map-title::after {
  content: "";
  position: absolute;
  left: clamp(54px, 11vw, 160px);
  bottom: 22vh;
  width: min(420px, 42vw);
  height: 1px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--accent), rgba(244, 242, 235, 0.28), transparent);
  opacity: 0.78;
}

.map-title .eyebrow {
  position: relative;
  margin: 0 0 clamp(22px, 4vh, 34px) clamp(44px, 7vw, 86px);
  color: var(--accent);
  font-size: clamp(0.72rem, 0.82vw, 0.9rem);
  letter-spacing: 0.18em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.82);
}

.map-title .eyebrow::before,
.map-title .eyebrow::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background: currentColor;
  opacity: 0.62;
}

.map-title .eyebrow::before {
  right: calc(100% + 18px);
  width: clamp(26px, 4vw, 52px);
}

.map-title .eyebrow::after {
  left: calc(100% + 18px);
  width: clamp(70px, 12vw, 160px);
}

.map-title h2 {
  max-width: 1080px;
  margin-left: clamp(44px, 7vw, 86px);
  font-size: clamp(3.25rem, 7.15vw, 8.2rem);
  line-height: 0.86;
  font-weight: 660;
  text-wrap: balance;
}

.map-step {
  position: relative;
  z-index: 3;
  min-height: 200svh;
  height: 200svh;
  width: 100%;
  margin: 0;
  overflow: visible;
  --text-progress: 0;
  --panel-opacity: 0;
}

.map-step-inner {
  position: fixed;
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: min(640px, calc(100vw - 40px));
  padding: clamp(28px, 4.2vh, 48px) clamp(28px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2vh, 22px);
  color: #f4f2eb;
  text-align: left;
  text-shadow: none;
  background: rgba(8, 10, 9, 0.78);
  border: 1px solid rgba(244, 242, 235, 0.14);
  border-radius: 18px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  opacity: var(--panel-opacity, 0);
  pointer-events: none;
  will-change: opacity, transform;
}
html[data-theme="light"] .map-step-inner {
  color: #11140f;
  background: rgba(248, 246, 240, 0.88);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
}

.map-step.reveal,
.map-step.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.map-step-inner::before,
.map-step-inner::after {
  content: none;
}

.map-step:nth-of-type(2) { z-index: 4; }
.map-step:nth-of-type(3) { z-index: 5; }

.map-step-inner > span {
  display: inline-block;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
}

.map-step-inner h3 {
  position: relative;
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.04;
  font-weight: 640;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.map-step-inner p {
  position: relative;
  margin: 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.55;
  font-weight: 420;
  color: rgba(244, 242, 235, calc(0.72 + (var(--text-progress, 0) * 0.28)));
  text-wrap: pretty;
}
html[data-theme="light"] .map-step-inner p {
  color: rgba(20, 22, 18, calc(0.7 + (var(--text-progress, 0) * 0.3)));
}

.map-step.is-active p {
  color: rgba(244, 242, 235, calc(0.82 + (var(--text-progress, 0) * 0.18)));
}
html[data-theme="light"] .map-step.is-active p {
  color: rgba(20, 22, 18, calc(0.78 + (var(--text-progress, 0) * 0.22)));
}

.story-word {
  display: inline-block;
  white-space: nowrap;
}

.story-char {
  color: inherit;
  opacity: 0.22;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(28px, 6vw, 80px);
  align-items: start;
  margin-bottom: 56px;
}

.intro-grid.compact {
  margin-bottom: 42px;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(2.35rem, 5.4vw, 5.7rem);
  line-height: 0.95;
  font-weight: 610;
  letter-spacing: 0;
}

.intro-grid p,
.split-copy > p,
.contact-inner > p {
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.65;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.service-card {
  min-height: 260px;
  padding: 28px;
  background: var(--surface);
}

.service-card h3 {
  margin: 48px 0 16px;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.04;
}

.service-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.page-links {
  padding-top: 94px;
}

.page-link-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.page-link-grid a {
  min-height: 230px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 24px;
  background: var(--surface);
  transition: background 180ms ease, color 180ms ease;
}

.page-link-grid a:hover,
.page-link-grid a:focus-visible {
  background: var(--accent);
  color: var(--accent-ink);
}

.page-link-grid span {
  color: var(--accent-soft);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.page-link-grid strong {
  display: block;
  font-size: clamp(1.28rem, 2vw, 1.85rem);
  line-height: 1.05;
}

.page-link-grid small {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.solutions .page-link-grid a {
  min-height: 300px;
}

.solutions .page-link-grid small {
  font-size: 0.88rem;
}

.ai-section {
  padding-top: 62px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cyber-section {
  padding-top: 84px;
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.offer-grid article {
  min-height: 320px;
  padding: 26px;
  background: var(--surface);
}

.offer-grid span {
  color: var(--accent-soft);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.offer-grid h3 {
  margin: 54px 0 16px;
  font-size: clamp(1.32rem, 2vw, 1.92rem);
  line-height: 1.05;
}

.offer-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.page-link-grid a:hover span,
.page-link-grid a:hover small,
.page-link-grid a:focus-visible span,
.page-link-grid a:focus-visible small {
  color: var(--accent-ink-muted);
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
  min-height: 760px;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
}

.split-media {
  min-height: 560px;
  background-image:
    linear-gradient(0deg, rgba(6, 9, 9, 0.16), rgba(6, 9, 9, 0.16)),
    var(--map-image);
  background-size: cover;
  background-position: center 48%;
}

.split-copy {
  align-self: center;
  padding: clamp(40px, 7vw, 90px);
}

.split-copy h2 {
  margin-bottom: 28px;
}

.metric-list {
  display: grid;
  margin: 44px 0 0;
  border-top: 1px solid var(--line);
}

.metric-list div {
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.metric-list dt {
  color: var(--accent-soft);
  font-weight: 850;
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}

.metric-list dd {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.workforce {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.8fr);
  gap: clamp(34px, 8vw, 92px);
  align-items: start;
}

.workforce-head h2 {
  font-size: clamp(2.2rem, 4.4vw, 4.6rem);
}

.tabs {
  position: sticky;
  top: 96px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
}

.tab-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}

.tab {
  min-height: 48px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.tab.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

.tab-panel {
  display: none;
  min-height: 280px;
  padding: 30px;
}

.tab-panel.is-active {
  display: block;
  animation: fadeLift 360ms ease both;
}

.tab-panel h3 {
  margin-bottom: 28px;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
}

.tab-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.05rem;
}

.statement {
  display: grid;
  place-items: center;
  min-height: 68svh;
  padding: 90px clamp(18px, 5vw, 64px);
  background:
    linear-gradient(rgba(8, 10, 9, 0.78), rgba(8, 10, 9, 0.82)),
    var(--map-image);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
}

.statement blockquote {
  max-width: 980px;
  margin: 0;
  font-size: clamp(2.2rem, 5.2vw, 6rem);
  line-height: 0.98;
  text-align: center;
  font-weight: 620;
}

.contact {
  min-height: 82svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 100px clamp(18px, 5vw, 64px) 28px;
  background: var(--contact-bg);
  color: var(--contact-ink);
}

.contact .section-kicker {
  color: var(--accent);
}

.contact-inner {
  max-width: 920px;
}

.contact h2 {
  margin-bottom: 28px;
  color: var(--contact-ink);
}

.contact-inner > p {
  max-width: 640px;
  color: var(--contact-muted);
  margin-bottom: 28px;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 64px;
  color: var(--contact-muted);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms ease;
}

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

.reveal.is-anchor-visible,
.reveal.is-anchor-visible [data-fx] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: inset(0 0 0 0) !important;
  transition: none !important;
  transition-delay: 0ms !important;
}

@keyframes gridMove {
  from { background-position: 0 0; }
  to { background-position: 86px 86px; }
}

@keyframes fadeLift {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-height: 720px) and (min-width: 661px) {
  .map-step-inner {
    padding: clamp(20px, 3vh, 32px) clamp(22px, 3.5vw, 40px);
  }

  .map-step-inner h3 {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  }

  .map-step-inner p {
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  }

  .menu-content {
    padding-top: 56px;
  }

  .menu-main a {
    font-size: clamp(2.35rem, 5vw, 3.35rem);
    line-height: 0.98;
  }

  .menu-sub {
    margin-top: 18px;
  }

  .menu-cta {
    min-height: 40px;
    margin-top: 22px;
  }
}

@media (max-width: 980px) {
  .menu-overlay {
    grid-template-columns: 1fr;
  }

  .menu-visual {
    display: none;
  }

  .menu-content {
    width: min(78vw, 540px);
    margin-left: clamp(24px, 11vw, 96px);
  }

  .menu-meta {
    left: 18px;
    right: 18px;
    width: auto;
    margin-left: 0;
  }

  .hero {
    min-height: 100svh;
    align-items: end;
    padding-top: 106px;
    padding-bottom: 56px;
  }

  .map-title {
    align-content: center;
  }

  .map-step-inner,
  .map-step:nth-of-type(2) .map-step-inner,
  .map-step:nth-of-type(3) .map-step-inner {
    width: min(560px, calc(100vw - 24px));
    gap: clamp(12px, 2vh, 18px);
    padding: clamp(22px, 4vh, 36px) clamp(20px, 5vw, 36px);
  }

  .index_inner {
    left: clamp(20px, 6vw, 58px);
  }

  .intro-grid,
  .workforce,
  .split-section {
    grid-template-columns: 1fr;
  }

  .split-section {
    min-height: 0;
  }

  .tabs {
    position: static;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .page-link-grid,
  .offer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 660px) {
  body,
  button,
  a,
  input,
  textarea,
  select {
    cursor: pointer;
  }

  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 22px 12px 0;
  }

  .header-mark {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
  }

  .control-bar {
    justify-self: start;
    max-width: calc(100vw - 112px);
    min-height: 50px;
    column-gap: 4px;
    row-gap: 0;
    padding: 5px;
  }

  .menu-toggle {
    position: static;
    flex: 0 0 auto;
    min-height: 50px;
    margin: 0;
    padding-inline: 13px 12px;
  }

  .language-control {
    min-width: 54px;
    padding-inline: 9px;
  }

  .theme-toggle,
  .language-control,
  .scroll-percent {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .scroll-percent {
    min-width: 54px;
    padding-inline: 8px;
    font-size: 0.88rem;
  }

  h1 {
    font-size: clamp(3rem, 15vw, 4.45rem);
  }

  .hero {
    padding-bottom: 44px;
  }

  .map-story {
    min-height: 870svh;
  }

  .map-image-layer {
    background-size: cover;
  }

  .map-vignette {
    background:
      linear-gradient(0deg, rgba(4, 7, 7, 0.62) 0%, rgba(4, 7, 7, 0.12) 45%, rgba(4, 7, 7, 0.42) 100%);
  }

  .map-title h2 {
    font-size: clamp(2.6rem, 13vw, 4.2rem);
    line-height: 0.9;
  }

  .map-title {
    width: min(100%, calc(100vw - 24px));
    padding: 116px 18px 0;
    text-align: left;
  }

  .map-title::before {
    left: 0;
    top: 23vh;
    bottom: 18vh;
  }

  .map-title::after {
    left: 34px;
    bottom: 21vh;
    width: min(240px, 64vw);
  }

  .map-title .eyebrow,
  .map-title h2 {
    margin-left: 26px;
  }

  .map-title .eyebrow {
    max-width: calc(100vw - 80px);
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .map-title .eyebrow::before {
    right: calc(100% + 12px);
    width: 22px;
  }

  .map-title .eyebrow::after {
    left: calc(100% + 12px);
    width: 48px;
  }

  .map-step,
  .map-step:nth-of-type(2),
  .map-step:nth-of-type(3) {
    min-height: 270svh;
    height: 270svh;
  }

  .map-step-inner,
  .map-step:nth-of-type(2) .map-step-inner,
  .map-step:nth-of-type(3) .map-step-inner {
    padding: 102px 18px 58px;
    gap: 24px;
  }

  .map-step-inner::before {
    top: 28px;
    left: 18px;
    right: 18px;
  }

  .index_inner {
    top: 92px;
    left: 18px;
    min-width: 88px;
    min-height: 38px;
    padding-inline: 14px;
    font-size: 0.76rem;
  }

  .map-step-inner h3 {
    font-size: clamp(2.9rem, 15vw, 4.5rem);
    line-height: 0.92;
  }

  .map-step-inner p {
    max-width: none;
    font-size: clamp(2rem, 10.5vw, 3.5rem);
    line-height: 0.98;
  }

  .menu-main a {
    font-size: clamp(2.35rem, 12vw, 3.55rem);
    line-height: 1;
  }

  .menu-content {
    width: calc(100vw - 48px);
    margin-left: 24px;
    padding-top: 90px;
  }

  .menu-overlay::before {
    left: -26vw;
    bottom: -24vw;
    width: 62vw;
  }

  .menu-overlay::after {
    left: 78%;
  }

  .menu-meta {
    left: 18px;
    right: 18px;
    width: auto;
    margin-left: 0;
  }

  .page-link-grid,
  .offer-grid {
    grid-template-columns: 1fr;
  }

  .solutions .page-link-grid a,
  .offer-grid article {
    min-height: 250px;
  }

  .section {
    padding-block: 82px;
  }

  .split-media {
    min-height: 380px;
  }

  .split-copy {
    padding: 48px 18px 72px;
  }

  .metric-list div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tab-list {
    grid-template-columns: 1fr;
  }

  .statement {
    background-attachment: scroll;
  }

  .site-footer {
    display: grid;
  }
}



/* ============================================================
   Animation Suite — added enhancements
   ============================================================ */

:root {
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fx-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fx-dur: 900ms;
  --pointer-x: 50%;
  --pointer-y: 50%;
}

/* Pointer-following ambient glow removed */

/* Floating ambient orbs in hero */
.fx-orb {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(70px);
  opacity: 0.35;
  mix-blend-mode: screen;
  animation: orbFloat 18s ease-in-out infinite;
}
.fx-orb-1 { top: 8%; left: -120px; background: radial-gradient(circle, var(--accent) 0%, transparent 65%); }
.fx-orb-2 { bottom: -120px; right: -80px; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 65%); animation-delay: -6s; animation-duration: 22s; }
.fx-orb-3 { top: 40%; right: 20%; width: 320px; height: 320px; background: radial-gradient(circle, var(--rust) 0%, transparent 65%); animation-delay: -12s; animation-duration: 26s; opacity: 0.22; }
html[data-theme="light"] .fx-orb { mix-blend-mode: multiply; opacity: 0.18; }
@keyframes orbFloat {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  33%     { transform: translate3d(8vw,-6vh,0) scale(1.12); }
  66%     { transform: translate3d(-5vw,7vh,0) scale(0.94); }
}

/* Hero headline character entrance */
.hero h1 .fx-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(60%) rotate(8deg);
  animation: charIn 900ms var(--fx-ease) forwards;
  animation-delay: calc(var(--i, 0) * 38ms + 120ms);
  will-change: transform, opacity;
}
.hero h1 .fx-char.fx-space { width: 0.32em; }
@keyframes charIn {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

/* Hero eyebrow shimmer */
.hero .eyebrow {
  position: relative;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 40%, color-mix(in srgb, var(--accent) 35%, #fff) 50%, var(--accent) 60%, var(--accent) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: shimmer 4.5s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* Section-kicker animated underline that grows on reveal */
.section-kicker,
.eyebrow {
  display: inline-block;
  position: relative;
}
.section .section-kicker::after,
.workforce-head .section-kicker::after,
.contact-inner .section-kicker::after {
  content: "";
  display: block;
  margin-top: 8px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  transition: width 1100ms var(--fx-ease) 200ms;
}
.reveal.is-visible .section-kicker::after,
.section.reveal.is-visible .section-kicker::after,
.workforce.reveal.is-visible .section-kicker::after,
.contact .reveal.is-visible .section-kicker::after { width: 96px; }

/* FX reveal variants — apply via data-fx */
[data-fx] {
  opacity: 0;
  transition:
    opacity var(--fx-dur) var(--fx-ease),
    transform var(--fx-dur) var(--fx-ease),
    filter var(--fx-dur) var(--fx-ease),
    clip-path var(--fx-dur) var(--fx-ease);
  transition-delay: calc(var(--i, 0) * 80ms + var(--fx-delay, 0ms));
  will-change: transform, opacity, filter;
}
[data-fx="up"]     { transform: translate3d(0, 48px, 0); }
[data-fx="down"]   { transform: translate3d(0, -48px, 0); }
[data-fx="left"]   { transform: translate3d(-56px, 0, 0); }
[data-fx="right"]  { transform: translate3d(56px, 0, 0); }
[data-fx="scale"]  { transform: scale(0.84); }
[data-fx="zoom"]   { transform: scale(1.18); filter: blur(14px); }
[data-fx="blur"]   { filter: blur(18px); transform: translate3d(0, 28px, 0); }
[data-fx="rotate"] { transform: rotate(-6deg) translate3d(0, 36px, 0); transform-origin: left bottom; }
[data-fx="clip"]   { clip-path: inset(0 100% 0 0); transform: none; }
[data-fx="flip"]   { transform: perspective(900px) rotateX(-22deg) translate3d(0, 36px, 0); transform-origin: bottom; }

[data-fx].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Tilt / lift on cards */
.service-card,
.offer-grid article,
.page-link-grid a,
.metric-list div {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 480ms var(--fx-ease), box-shadow 420ms ease, border-color 420ms ease, background 420ms ease;
  will-change: transform;
}
.service-card:hover,
.offer-grid article:not(.cyber-flip-card):hover,
.metric-list div:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 28px 60px -28px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Sheen / spotlight that follows pointer on cards */
.service-card,
.offer-grid article,
.page-link-grid a {
  --mx: 50%;
  --my: 50%;
  overflow: hidden;
  isolation: isolate;
}
.service-card::after,
.offer-grid article::after,
.page-link-grid a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 420ms ease;
  z-index: 0;
}
.service-card:hover::after,
.offer-grid article:hover::after,
.page-link-grid a:hover::after { opacity: 1; }
.service-card > *,
.offer-grid article > *,
.page-link-grid a > * { position: relative; z-index: 1; }

/* Buttons: magnetic + sheen */
.button {
  position: relative;
  overflow: hidden;
  transition: transform 320ms var(--fx-ease-back), border-color 240ms ease, background 240ms ease, color 240ms ease, box-shadow 320ms ease;
  will-change: transform;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, #fff 55%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 720ms var(--fx-ease);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.button:hover::before,
.button:focus-visible::before { transform: translateX(120%); }
.button.primary:hover,
.button.primary:focus-visible {
  box-shadow: 0 16px 38px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* Menu link underline + slide */
.menu-main a {
  background-image: none;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0;
  transition: color 240ms ease, transform 320ms var(--fx-ease), background 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  will-change: transform;
}
.menu-main a:hover,
.menu-main a:focus-visible {
  background-size: 0;
  color: #b7ffd0;
  transform: translateX(6px);
}

.menu-main a.is-current:hover,
.menu-main a.is-current:focus-visible {
  color: #ffffff;
}

/* Staggered menu entrance when overlay opens */
.menu-overlay.is-open .menu-main a {
  animation: menuItemIn 700ms var(--fx-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}
@keyframes menuItemIn {
  from { opacity: 0; transform: translate3d(40px, 20px, 0); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Tab panel slide-in */
.tab-panel.is-active { animation: panelIn 520ms var(--fx-ease) both; }
@keyframes panelIn {
  from { opacity: 0; transform: translate3d(0, 20px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Tab buttons: animated indicator */
.tab { position: relative; overflow: hidden; }
.tab::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 480ms var(--fx-ease);
}
.tab:hover::before,
.tab.is-active::before { transform: scaleX(1); }

/* Statement quote word-by-word reveal */
.statement blockquote .fx-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40%);
  filter: blur(10px);
  transition: opacity 720ms var(--fx-ease), transform 720ms var(--fx-ease), filter 720ms var(--fx-ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.statement.is-in blockquote .fx-word {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Split media parallax helper */
.split-media {
  --p: 0;
  position: relative;
  overflow: hidden;
}

/* Header (no accent line) */
.site-header.is-scrolled {
  box-shadow: none;
}

/* Smooth fade-out at the bottom of the map story so it doesn't pop */
.map-stage {
  --exit-fade: 0;
}
.map-stage::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 34%, var(--dark) 82%, var(--dark) 100%);
  opacity: var(--exit-fade, 0);
  transition: opacity 90ms cubic-bezier(0.22, 1, 0.36, 1);
}
.map-stage .map-image {
  transform-origin: 50% 56%;
  transform: scale(calc(1 + var(--exit-fade, 0) * 0.05)) translate3d(0, calc(var(--exit-fade, 0) * -4%), 0);
  opacity: calc(1 - var(--exit-fade, 0) * 0.9);
  filter: var(--map-filter) blur(calc(var(--exit-fade, 0) * 4px));
  transition: opacity 90ms cubic-bezier(0.22, 1, 0.36, 1), transform 90ms cubic-bezier(0.22, 1, 0.36, 1), filter 90ms linear;
}
.map-stage .map-vignette,
.map-stage::after {
  opacity: calc((1 - var(--exit-fade, 0)) * 0.16);
  transition: opacity 90ms cubic-bezier(0.22, 1, 0.36, 1);
}
.map-stage .index_inner {
  opacity: calc(var(--index-opacity, 0) * (1 - var(--exit-fade, 0)));
  transition: opacity 90ms cubic-bezier(0.22, 1, 0.36, 1);
}

.map-story .index_inner {
  display: none;
}
.map-story .map-step:last-of-type .map-step-inner {
  opacity: calc(var(--panel-opacity, 0) * (1 - var(--exit-fade, 0)));
  transform: translate(-50%, calc(-50% + (var(--exit-fade, 0) * -4vh)));
  transition: opacity 90ms cubic-bezier(0.22, 1, 0.36, 1), transform 90ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Keep hero title words from breaking mid-word during char animation */
.hero h1 .fx-word-wrap {
  display: inline-block;
  white-space: nowrap;
}

/* Page-link-grid number sweep + underline */
.page-link-grid a span {
  transition: transform 520ms var(--fx-ease), color 320ms ease, letter-spacing 520ms var(--fx-ease);
  display: inline-block;
}
.page-link-grid a:hover span,
.page-link-grid a:focus-visible span {
  transform: translateY(-4px);
  letter-spacing: 0.22em;
  color: var(--accent);
}
.page-link-grid a strong {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 520ms var(--fx-ease);
}
.page-link-grid a:hover strong,
.page-link-grid a:focus-visible strong { background-size: 100% 2px; }

/* Metric-list pulse dot on reveal */
.metric-list dt {
  position: relative;
}
.metric-list dt::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 520ms var(--fx-ease-back) 200ms, box-shadow 600ms ease;
}
.reveal.is-visible .metric-list dt::before,
.is-in .metric-list dt::before {
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent);
  animation: pulseDot 2.4s ease-out infinite 1s;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 16px transparent; }
}

/* Index counter morph */
.index_current { transition: transform 520ms var(--fx-ease), color 320ms ease; will-change: transform; }
.index_current.is-flip { animation: flipNum 520ms var(--fx-ease); }
@keyframes flipNum {
  0%   { transform: translateY(0); opacity: 1; }
  45%  { transform: translateY(-60%); opacity: 0; filter: blur(4px); }
  55%  { transform: translateY(60%); opacity: 0; filter: blur(4px); }
  100% { transform: translateY(0); opacity: 1; filter: none; }
}

/* Top scroll-progress bar (replaces accent fill on pill) */
.scroll-percent { background-image: none !important; }

.scroll-bar {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.scroll-bar::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--page-progress, 0%);
  background: var(--ink);
  opacity: 0.92;
  transition: width 80ms linear;
}
html[data-theme="dark"] .scroll-bar::before { background: #ffffff; }

/* Theme toggle spin */
.theme-toggle:hover .theme-icon,
.theme-toggle:focus-visible .theme-icon {
  animation: themeSpin 720ms var(--fx-ease-back);
}
@keyframes themeSpin {
  from { transform: rotate(0) scale(1); }
  50%  { transform: rotate(180deg) scale(1.18); }
  to   { transform: rotate(360deg) scale(1); }
}

/* Reduced motion: kill flashy stuff */
@media (prefers-reduced-motion: reduce) {
  .fx-orb,
  .hero .eyebrow { animation: none !important; }
  .hero h1 .fx-char { opacity: 1 !important; transform: none !important; animation: none !important; }
  [data-fx] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* === Pinned story: fullscreen text reveal === */
.map-story {
  min-height: auto;
  padding-bottom: 110svh;
}

.map-stage {
  position: sticky;
  top: 0;
  height: 100svh;
}

.map-flow {
  margin-top: -100svh;
  display: block;
}

.map-title {
  min-height: 100svh;
  padding: clamp(112px, 18vh, 168px) clamp(18px, 5vw, 74px) clamp(78px, 12vh, 126px);
}

.map-step {
  position: relative;
  min-height: 170svh;
  height: 170svh;
  display: block;
  margin: 0;
  pointer-events: none;
}

.map-step:first-of-type {
  margin-top: 8svh;
}

.map-step:last-of-type {
  margin-bottom: 70svh;
}

.map-step-inner,
.map-step:nth-of-type(2) .map-step-inner,
.map-step:nth-of-type(3) .map-step-inner,
.map-story .map-step:last-of-type .map-step-inner {
  position: fixed !important;
  inset: auto !important;
  left: clamp(22px, 7.5vw, 128px) !important;
  right: clamp(22px, 7.5vw, 128px) !important;
  top: 55% !important;
  transform: translate3d(0, calc(-50% + (1 - var(--panel-opacity, 0)) * 18px), 0) !important;
  width: min(1040px, calc(100vw - clamp(44px, 15vw, 256px))) !important;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: clamp(20px, 3vh, 34px);
  color: #f4f2eb;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 10px 44px rgba(0, 0, 0, 0.72), 0 1px 2px rgba(0, 0, 0, 0.88);
  opacity: var(--panel-opacity, 0) !important;
  pointer-events: none !important;
  overflow: visible;
}

.map-step-inner::before {
  content: attr(data-step-label);
  display: inline-grid;
  place-items: center;
  width: fit-content;
  min-height: 34px;
  margin-bottom: clamp(2px, 1vh, 8px);
  padding: 0 14px;
  border: 1px solid rgba(244, 242, 235, 0.32);
  border-radius: 999px;
  background: rgba(6, 16, 14, 0.22);
  color: rgba(244, 242, 235, 0.92);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.74rem, 0.9vw, 0.88rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.54);
  opacity: calc(0.28 + (var(--text-progress, 0) * 0.72));
  transform: translate3d(0, calc((1 - var(--text-progress, 0)) * 10px), 0);
}

.map-step:nth-of-type(2) .map-step-inner::before {
  color: #f1f1ee;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
}

.map-step:nth-of-type(3) .map-step-inner::before {
  color: #e3e3df;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner {
  color: #fbfaf5;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.map-step-inner > span {
  color: rgba(244, 242, 235, 0.92);
  text-shadow: inherit;
}

.map-step-inner h3 {
  max-width: 11.5ch;
  font-size: clamp(3.45rem, 7.9vw, 8.45rem);
  line-height: 0.88;
  font-weight: 760;
  letter-spacing: 0;
}

.map-step-inner p {
  max-width: 27ch;
  font-size: clamp(1.68rem, 4.05vw, 4.55rem);
  line-height: 1.02;
  font-weight: 620;
  color: rgba(244, 242, 235, 0.96);
  text-wrap: balance;
}

html[data-theme="light"] .map-step-inner p,
html[data-theme="light"] .map-step.is-active p {
  color: rgba(251, 250, 245, 0.96);
}

@media (max-width: 660px) {
  .map-step {
    min-height: 185svh;
    height: 185svh;
  }

  .map-step:last-of-type {
    margin-bottom: 56svh;
  }

  .map-step-inner,
  .map-step:nth-of-type(2) .map-step-inner,
  .map-step:nth-of-type(3) .map-step-inner,
  .map-story .map-step:last-of-type .map-step-inner {
    inset: auto !important;
    left: 18px !important;
    right: 18px !important;
    top: 56% !important;
    width: calc(100vw - 36px) !important;
    gap: 18px;
  }

  .map-step-inner h3 {
    font-size: clamp(3rem, 14.5vw, 5.35rem);
    line-height: 0.9;
  }

  .map-step-inner p {
    font-size: clamp(1.48rem, 8.3vw, 3.05rem);
    line-height: 1.04;
  }
}

/* Software section polish */
.split-section {
  position: relative;
  grid-template-columns: minmax(420px, 0.92fr) minmax(420px, 1.08fr);
  min-height: 720px;
  padding: clamp(18px, 3vw, 42px);
  gap: clamp(24px, 4vw, 58px);
  align-items: stretch;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 72%, transparent), transparent 58%),
    radial-gradient(circle at 74% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    var(--dark);
}

.split-media {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
    linear-gradient(0deg, color-mix(in srgb, var(--dark) 64%, transparent), color-mix(in srgb, var(--dark) 18%, transparent)),
    var(--map-image);
  background-size: auto, auto, cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent), 0 28px 80px rgba(0, 0, 0, 0.22);
  isolation: isolate;
}

.split-media::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 6px;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 0.55;
  pointer-events: none;
}

.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 42%, rgba(0, 0, 0, 0.18)),
    radial-gradient(circle at 50% 50%, transparent 0 36%, color-mix(in srgb, var(--dark) 72%, transparent) 72%);
  pointer-events: none;
}

.software-orbit {
  position: absolute;
  inset: 46% auto auto 50%;
  width: min(58%, 380px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.orbit-ring,
.orbit-ring::before,
.orbit-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 34%, transparent);
  border-radius: 50%;
}

.orbit-ring::before {
  inset: 18%;
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

.orbit-ring::after {
  inset: 35%;
  border-color: color-mix(in srgb, var(--accent-soft) 48%, transparent);
}

.orbit-core,
.orbit-node,
.software-stack span {
  position: absolute;
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--ink);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.orbit-core {
  inset: 50% auto auto 50%;
  min-width: 118px;
  min-height: 118px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}

.orbit-node {
  color: color-mix(in srgb, var(--ink) 88%, var(--accent));
}

.node-erp { left: 3%; top: 22%; }
.node-crm { right: 2%; top: 28%; }
.node-api { left: 15%; bottom: 9%; }
.node-ai { right: 16%; bottom: 5%; }

.software-stack {
  position: absolute;
  left: clamp(28px, 6vw, 72px);
  right: clamp(28px, 6vw, 72px);
  bottom: clamp(22px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.software-stack span {
  position: relative;
  min-height: 44px;
  border-radius: 6px;
}

.software-showcase {
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 56px);
}

.software-laptop {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  color: var(--ink);
}

.software-tabbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 auto 14px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.software-tab {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.software-tab span {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.software-tab b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.software-tab:hover,
.software-tab:focus-visible {
  color: var(--ink);
  transform: translateY(-1px);
}

.software-tab.is-active {
  background: var(--ink);
  color: var(--dark);
}

.software-screen {
  position: relative;
  min-height: 356px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--dark) 92%, transparent)),
    radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 34%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent), 0 34px 80px rgba(0, 0, 0, 0.34);
}

.software-screen::before {
  content: "";
  position: absolute;
  inset: 46px 0 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, #000, transparent 86%);
  pointer-events: none;
}

.software-window-bar {
  position: relative;
  z-index: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.software-window-bar span {
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
}

.software-window-bar span:first-child { background: #ff6159; }
.software-window-bar span:nth-child(2) { background: #ffbd2e; }
.software-window-bar span:nth-child(3) { background: #f4f4f4; }

.software-window-bar em {
  margin-left: auto;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.software-panels {
  position: relative;
  z-index: 1;
}

.software-panel {
  display: none;
  min-height: 312px;
  padding: clamp(26px, 4vw, 40px);
}

.software-panel.is-active {
  display: grid;
  align-content: stretch;
  gap: 0;
  animation: fadeLift 320ms ease both;
}

.software-dashboard {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(230px, 0.75fr);
  gap: clamp(16px, 2vw, 28px);
}

.software-dashboard-main,
.software-dashboard-side {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: clamp(14px, 1.7vw, 22px);
}

.software-dashboard-main {
  align-content: space-between;
}

.software-dashboard-side {
  align-content: stretch;
}

.software-panel-head {
  display: grid;
  gap: clamp(9px, 1vw, 14px);
}

.software-panel-head small {
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 999px;
  color: var(--accent-soft);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  font-weight: 900;
}

.software-panel h3 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 0.94;
  font-weight: 720;
  text-wrap: balance;
}

.software-panel p {
  max-width: 42ch;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.58;
}

.software-status-grid,
.software-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
}

.software-module-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.software-status-grid div,
.software-module-grid div,
.software-card,
.software-roadmap div {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.018);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.software-status-grid div,
.software-module-grid div {
  min-height: clamp(82px, 8vw, 118px);
  display: grid;
  align-content: space-between;
  padding: clamp(12px, 1.4vw, 18px);
}

.software-status-grid span,
.software-module-grid span,
.software-card span {
  color: rgba(244, 244, 244, 0.58);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.62rem, 0.75vw, 0.78rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.software-status-grid strong,
.software-card strong {
  color: #f4f4f4;
  font-size: clamp(1.55rem, 3vw, 3.1rem);
  line-height: 0.92;
  letter-spacing: 0;
}

.software-status-grid em,
.software-card em,
.software-roadmap em {
  color: rgba(244, 244, 244, 0.58);
  font-size: clamp(0.72rem, 0.9vw, 0.9rem);
  font-style: normal;
  line-height: 1.35;
}

.software-module-grid strong {
  color: #f4f4f4;
  font-size: clamp(0.82rem, 1vw, 1rem);
  line-height: 1.2;
}

.software-card {
  display: grid;
  align-content: space-between;
  gap: 14px;
  padding: clamp(14px, 1.6vw, 20px);
}

.software-card.accent {
  background:
    radial-gradient(circle at 84% 10%, rgba(244, 244, 244, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(244, 244, 244, 0.1), rgba(244, 244, 244, 0.025));
}

.software-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(244, 244, 244, 0.76);
  font-size: clamp(0.74rem, 0.95vw, 0.96rem);
  line-height: 1.35;
}

.software-card li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.software-card li b {
  width: 7px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f4f4f4;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1);
}

.code-card i {
  width: var(--w);
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f4f4f4, rgba(244, 244, 244, 0.24));
}

.code-card small {
  color: rgba(244, 244, 244, 0.52);
  font-size: clamp(0.68rem, 0.8vw, 0.82rem);
  font-weight: 780;
}

.software-roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
}

.software-roadmap div {
  position: relative;
  min-height: clamp(118px, 10vw, 156px);
  display: grid;
  align-content: space-between;
  padding: clamp(14px, 1.5vw, 20px);
}

.software-roadmap span {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(244, 244, 244, 0.09);
  color: rgba(244, 244, 244, 0.58);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.7rem;
  font-weight: 900;
}

.software-roadmap strong {
  color: #f4f4f4;
  font-size: clamp(1rem, 1.35vw, 1.38rem);
  line-height: 1.08;
}

.software-ui-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.software-ui-grid span,
.software-timeline span {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.software-code-lines {
  display: grid;
  gap: 10px;
  max-width: 360px;
}

.software-code-lines span {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--ink) 24%, transparent));
  opacity: 0.78;
}

.software-code-lines span:nth-child(2) { width: 78%; }
.software-code-lines span:nth-child(3) { width: 56%; }
.software-code-lines span:nth-child(4) { width: 88%; }

.software-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.software-laptop-base {
  width: 78%;
  height: 18px;
  margin: 0 auto;
  border-radius: 0 0 22px 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 26%, transparent), color-mix(in srgb, var(--ink) 9%, transparent));
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.26);
}

.software-solo-section {
  width: 100%;
  min-height: 92svh;
  display: grid;
  place-items: center;
  padding: clamp(84px, 9vw, 132px) 0 clamp(52px, 7vw, 96px);
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(ellipse at 50% 28%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 42%),
    var(--dark);
}

.software-solo-center {
  width: min(100%, 1560px);
  display: grid;
  place-items: center;
  padding-inline: clamp(10px, 2vw, 28px);
}

.software-laptop.software-laptop-solo {
  width: min(98vw, 1360px);
  max-width: none;
  margin: 0 auto;
  aspect-ratio: 3944 / 2564;
  filter: drop-shadow(0 44px 80px rgba(0, 0, 0, 0.46));
}

.software-laptop-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

.software-laptop-interface {
  position: absolute;
  z-index: 2;
  left: 11.65%;
  top: 11.72%;
  width: 76.78%;
  height: 74.48%;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.8vw, 14px);
  padding: clamp(14px, 2vw, 34px);
  overflow: hidden;
  border-radius: clamp(10px, 1.45vw, 23px);
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.09), transparent 34%),
    linear-gradient(180deg, rgba(6, 8, 7, 0.78), rgba(2, 2, 2, 0.92));
}

.software-laptop-interface .software-tabbar {
  flex: 0 0 auto;
  width: min(720px, 100%);
  margin: 0;
  align-self: flex-start;
}

.software-laptop-interface .software-screen {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: clamp(8px, 0.9vw, 16px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 1px) 0 0 / 46px 46px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.025), transparent 1px) 0 0 / 46px 46px,
    rgba(3, 4, 4, 0.68);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
}

.software-laptop-interface .software-panel {
  min-height: 0;
  height: 100%;
  padding: clamp(22px, 3.2vw, 54px);
}

.software-laptop-interface .software-panel h3 {
  max-width: 13ch;
  font-size: clamp(2.4rem, 5.8vw, 6.8rem);
}

.software-laptop-interface .software-panel p {
  max-width: 54ch;
  font-size: clamp(0.92rem, 1.35vw, 1.32rem);
}

.software-laptop-interface .software-laptop-base {
  display: none;
}

.split-copy {
  align-self: center;
  width: 100%;
  max-width: 760px;
  padding: clamp(42px, 6vw, 84px) clamp(18px, 4vw, 52px);
}

.split-copy .section-kicker {
  margin-bottom: 18px;
}

.split-copy h2 {
  max-width: 11.8ch;
  margin-bottom: 26px;
  font-size: clamp(2.9rem, 5.1vw, 5.6rem);
  line-height: 0.95;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  text-wrap: balance;
}

.split-copy > p {
  max-width: 66ch;
}

.metric-list {
  gap: 10px;
  margin-top: 42px;
  border-top: 0;
}

.metric-list div {
  grid-template-columns: minmax(128px, 0.38fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.metric-list div:first-child {
  border-top: 1px solid var(--line);
}

.metric-list dt {
  padding-left: 16px;
  color: var(--accent-soft);
  line-height: 1.25;
}

.metric-list dd {
  max-width: 58ch;
  font-size: 0.98rem;
}

.metric-list dt::before {
  left: 0;
}

html[data-theme="light"] .split-section {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.8), transparent 58%),
    radial-gradient(circle at 74% 18%, rgba(0, 0, 0, 0.08), transparent 34%),
    var(--dark);
}

html[data-theme="light"] .split-media {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 28px 80px rgba(29, 27, 58, 0.12);
}

@media (max-width: 980px) {
  .split-section {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: clamp(14px, 4vw, 24px);
  }

  .split-media {
    min-height: clamp(420px, 60vw, 560px);
  }

  .split-copy {
    max-width: none;
    padding: clamp(34px, 6vw, 58px) clamp(6px, 2vw, 18px) clamp(46px, 7vw, 68px);
  }

  .split-copy h2 {
    max-width: 12ch;
  }
}

@media (max-width: 660px) {
  .split-section {
    padding: 12px;
    gap: 26px;
  }

  .split-media {
    min-height: 390px;
  }

  .split-media::before {
    inset: 12px;
    background-size: 42px 42px;
  }

  .software-orbit {
    width: min(82%, 320px);
  }

  .orbit-core {
    min-width: 94px;
    min-height: 94px;
  }

  .software-stack {
    left: 18px;
    right: 18px;
    bottom: 18px;
    grid-template-columns: 1fr;
  }

  .software-stack span {
    min-height: 38px;
  }

  .software-showcase {
    padding: 18px;
  }

  .software-tabbar {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .software-tab {
    min-height: 38px;
  }

  .software-screen {
    min-height: 360px;
  }

  .software-panel {
    min-height: 314px;
    padding: 24px;
  }

  .software-panel h3 {
    font-size: clamp(2rem, 12vw, 3.2rem);
  }

  .software-ui-grid,
  .software-timeline {
    grid-template-columns: 1fr;
  }

  .software-solo-section {
    min-height: 72svh;
    padding-block: 92px 42px;
  }

  .software-laptop.software-laptop-solo {
    width: 132vw;
    margin-left: -16vw;
    margin-right: -16vw;
  }

  .software-laptop-interface {
    padding: 10px;
    gap: 6px;
  }

  .software-laptop-interface .software-tabbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
  }

  .software-laptop-interface .software-tab {
    min-height: 28px;
    gap: 5px;
    font-size: 0.62rem;
  }

  .software-laptop-interface .software-screen {
    min-height: 0;
  }

  .software-laptop-interface .software-panel {
    min-height: 0;
    padding: 14px;
    gap: 10px;
  }

  .software-laptop-interface .software-panel h3 {
    font-size: clamp(1.5rem, 8vw, 2.2rem);
  }

  .software-laptop-interface .software-panel p {
    font-size: 0.72rem;
    line-height: 1.42;
  }

  .software-dashboard {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .software-dashboard-side {
    display: none;
  }

  .software-status-grid,
  .software-module-grid,
  .software-roadmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .software-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .software-status-grid div,
  .software-module-grid div,
  .software-roadmap div {
    min-height: 58px;
    padding: 8px;
  }

  .software-status-grid strong {
    font-size: 1.12rem;
  }

  .software-roadmap em,
  .software-status-grid em {
    display: none;
  }

  .split-copy {
    padding: 0 6px 54px;
  }

  .split-copy h2 {
    max-width: 9.5ch;
    font-size: clamp(2.8rem, 13vw, 4.6rem);
  }

  .metric-list div {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
  }
}

.map-step-inner > span {
  display: none !important;
}

.map-step-inner p {
  color: rgba(244, 242, 235, calc(0.84 + (var(--text-progress, 0) * 0.12))) !important;
}

.story-char {
  display: inline-block;
  opacity: 0.08;
  transform: translate3d(0, 0.42em, 0) scale(0.96);
  filter: blur(6px);
  transform-origin: 50% 78%;
  transition: opacity 120ms linear, transform 120ms linear, filter 120ms linear;
  will-change: opacity, transform, filter;
}

.map-step-inner h3 .story-char {
  text-shadow: 0 14px 52px rgba(0, 0, 0, 0.78), 0 2px 0 rgba(0, 0, 0, 0.18);
}

.map-step-inner p .story-char {
  text-shadow: 0 10px 38px rgba(0, 0, 0, 0.68);
}

/* === Story redesign: animated system map === */
.map-story {
  --active-step: 0;
  --exit-fade: 0;
  --story-primary: #f4f4f4;
  --story-primary-soft: rgba(255, 255, 255, 0.1);
  --story-primary-line: rgba(255, 255, 255, 0.58);
  --story-secondary: #a8a8a8;
  --story-secondary-soft: rgba(255, 255, 255, 0.09);
  --story-ink: #f6f6f3;
}

.map-stage {
  background:
    linear-gradient(115deg, rgba(2, 4, 2, 0.98), rgba(7, 11, 7, 0.92) 46%, rgba(11, 18, 10, 0.86));
}

.map-image {
  opacity: calc(0.5 - (var(--exit-fade, 0) * 0.28));
  filter: saturate(0.55) contrast(1.28) brightness(0.64);
  transform: scale(calc(1.08 + (var(--story-progress, 0) * 0.08))) rotate(calc((var(--story-progress, 0) - 0.5) * 1.4deg));
  mix-blend-mode: screen;
}

html[data-theme="light"] .map-story {
  --story-primary: #111111;
  --story-primary-soft: rgba(0, 0, 0, 0.08);
  --story-primary-line: rgba(0, 0, 0, 0.34);
  --story-secondary: #555555;
  --story-secondary-soft: rgba(183, 121, 31, 0.14);
  --story-ink: #1c1c1c;
}

html[data-theme="light"] .map-stage {
  background:
    linear-gradient(115deg, rgba(247, 249, 246, 0.98), rgba(238, 246, 244, 0.92) 46%, rgba(255, 247, 232, 0.9));
}

html[data-theme="light"] .map-image {
  opacity: calc(0.38 - (var(--exit-fade, 0) * 0.2));
  filter: saturate(0.5) contrast(1.06) brightness(1.05);
  mix-blend-mode: multiply;
}

.map-vignette {
  background:
    linear-gradient(90deg, rgba(2, 4, 2, 0.82), rgba(2, 4, 2, 0.05) 50%, rgba(7, 11, 5, 0.68)),
    linear-gradient(0deg, rgba(2, 4, 2, 0.76), transparent 38%, rgba(4, 8, 4, 0.48)),
    repeating-linear-gradient(90deg, rgba(237, 247, 244, 0.055) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(237, 247, 244, 0.045) 0 1px, transparent 1px 96px);
}

html[data-theme="light"] .map-vignette {
  background:
    linear-gradient(90deg, rgba(248, 249, 246, 0.9), rgba(248, 249, 246, 0.18) 50%, rgba(255, 248, 235, 0.5)),
    linear-gradient(0deg, rgba(248, 249, 246, 0.72), transparent 42%, rgba(248, 249, 246, 0.34)),
    repeating-linear-gradient(90deg, rgba(29, 27, 58, 0.07) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(29, 27, 58, 0.055) 0 1px, transparent 1px 96px);
}

.map-stage::after {
  border-top: 0;
  background:
    linear-gradient(90deg, transparent 0 12%, var(--story-primary-line) 12.05%, transparent 12.16% 87.84%, rgba(255, 255, 255, 0.22) 87.95%, transparent 88.06%),
    linear-gradient(0deg, transparent 0 17%, rgba(237, 247, 244, 0.18) 17.08%, transparent 17.16% 82.84%, rgba(237, 247, 244, 0.14) 82.92%, transparent 83%);
  opacity: calc(0.36 - (var(--exit-fade, 0) * 0.24));
}

.story-system {
  position: absolute;
  inset: clamp(84px, 12svh, 124px) clamp(18px, 5vw, 72px) clamp(34px, 7svh, 78px);
  z-index: 1;
  pointer-events: none;
  opacity: calc(0.96 - (var(--exit-fade, 0) * 0.88));
}

.story-system-frame {
  display: none;
}

.story-axis {
  position: absolute;
  top: 16%;
  bottom: 16%;
  right: clamp(22px, 7vw, 108px);
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--story-primary-line), rgba(255, 255, 255, 0.42), transparent);
  box-shadow: 0 0 34px var(--story-primary-soft);
}

.story-axis span {
  position: absolute;
  left: 50%;
  top: calc(var(--point) * 50%);
  width: 18px;
  aspect-ratio: 1;
  border: 1px solid rgba(237, 247, 244, 0.72);
  background: rgba(6, 16, 14, 0.72);
  transform: translate(-50%, -50%) rotate(45deg) scale(0.72);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background 420ms ease, border-color 420ms ease;
}

.map-stage[data-active-step="0"] .story-axis span:nth-child(1),
.map-stage[data-active-step="1"] .story-axis span:nth-child(2),
.map-stage[data-active-step="2"] .story-axis span:nth-child(3) {
  border-color: var(--story-primary);
  background: var(--story-primary);
  transform: translate(-50%, -50%) rotate(45deg) scale(1.14);
  box-shadow: 0 0 0 9px var(--story-primary-soft), 0 0 34px rgba(255, 255, 255, 0.22);
}

.story-scan {
  display: none;
}

.story-metrics {
  display: none;
}

.story-metrics i {
  display: block;
  height: calc(18px + (var(--story-progress, 0) * 62px));
  min-height: 18px;
  border: 1px solid rgba(237, 247, 244, 0.18);
  background: linear-gradient(180deg, var(--story-primary-line), var(--story-secondary-soft));
  transform-origin: bottom;
  animation: metricPulse 2.8s ease-in-out infinite;
}

.story-metrics i:nth-child(2) { height: calc(42px + (var(--story-progress, 0) * 36px)); animation-delay: -0.5s; }
.story-metrics i:nth-child(3) { height: calc(28px + (var(--story-progress, 0) * 54px)); animation-delay: -1s; }
.story-metrics i:nth-child(4) { height: calc(56px + (var(--story-progress, 0) * 24px)); animation-delay: -1.5s; }

@keyframes metricPulse {
  0%, 100% { opacity: 0.38; transform: scaleY(0.76); }
  45% { opacity: 0.9; transform: scaleY(1); }
}

.map-title {
  width: min(1280px, calc(100vw - 48px));
  padding: 0 clamp(26px, 6vw, 92px);
  justify-content: center;
  color: var(--story-ink);
  text-shadow: 0 18px 60px rgba(0, 0, 0, 0.72);
}

.map-title::before {
  display: none;
}

.map-title::after {
  display: none;
}

.map-title .eyebrow {
  margin: 0 0 26px clamp(28px, 5vw, 72px);
  color: var(--story-primary);
  font-size: 0.84rem;
  letter-spacing: 0.16em;
}

.map-title h2 {
  position: relative;
  max-width: min(1010px, calc(100vw - 220px));
  margin-left: clamp(28px, 5vw, 72px);
  font-size: clamp(4.9rem, 8.1vw, 7.55rem);
  line-height: 0.88;
  font-weight: 860;
  text-wrap: balance;
  perspective: 900px;
}

.map-title h2::before,
.map-title h2::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.map-title h2::before {
  display: none;
}

.map-title h2::after {
  display: none;
}

.story-title-word {
  position: relative;
  display: inline-block;
  margin-right: 0.08em;
  transform: translate3d(0, calc((1 - var(--story-progress, 0)) * 0.08em), 0);
  transition: color 320ms ease, filter 320ms ease;
}

.story-title-word.is-primary,
.story-title-word.is-final {
  color: color-mix(in srgb, var(--story-primary) 72%, var(--story-ink));
  text-shadow: 0 16px 46px var(--story-primary-soft);
}

.story-title-word.is-primary::before,
.story-title-word.is-final::before {
  content: "";
  position: absolute;
  left: -0.08em;
  right: -0.08em;
  bottom: 0.03em;
  height: 0.24em;
  z-index: -1;
  background: linear-gradient(90deg, var(--story-primary-soft), var(--story-secondary-soft));
  transform: skewX(-12deg) scaleX(calc(0.72 + (var(--story-progress, 0) * 0.28)));
  transform-origin: left center;
}

.story-title-word.is-secondary {
  color: color-mix(in srgb, var(--story-secondary) 58%, var(--story-ink));
}

.story-title-word.is-secondary::after {
  content: "";
  position: absolute;
  left: 0.05em;
  right: 0.05em;
  top: 50%;
  height: 0.06em;
  background: var(--story-secondary);
  opacity: 0.7;
  transform: translateY(-50%) scaleX(calc(0.2 + (var(--story-progress, 0) * 0.8)));
  transform-origin: left center;
}

.map-title .eyebrow::before,
.map-title .eyebrow::after {
  display: none;
}

.map-step-inner,
.map-step:nth-of-type(2) .map-step-inner,
.map-step:nth-of-type(3) .map-step-inner,
.map-story .map-step:last-of-type .map-step-inner {
  left: clamp(22px, 8vw, 142px) !important;
  right: auto !important;
  top: 53% !important;
  width: min(760px, calc(100vw - 210px)) !important;
  padding: clamp(26px, 4vh, 42px) clamp(24px, 4vw, 46px) !important;
  border-left: 8px solid var(--story-primary) !important;
  background:
    linear-gradient(135deg, rgba(4, 8, 4, 0.78), rgba(4, 8, 4, 0.3)),
    linear-gradient(90deg, var(--story-primary-soft), transparent 42%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px) saturate(132%);
  -webkit-backdrop-filter: blur(16px) saturate(132%);
  text-shadow: none;
}

.map-step:nth-of-type(2) .map-step-inner {
  left: auto !important;
  right: clamp(22px, 8vw, 142px) !important;
  border-left-color: var(--story-secondary) !important;
  background:
    linear-gradient(135deg, rgba(10, 16, 5, 0.74), rgba(4, 8, 4, 0.28)),
    linear-gradient(90deg, var(--story-secondary-soft), transparent 44%);
}

.map-step:nth-of-type(3) .map-step-inner {
  border-left-color: #d8d8d8 !important;
  background:
    linear-gradient(135deg, rgba(7, 18, 9, 0.76), rgba(4, 8, 4, 0.3)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 42%);
}

.map-step-inner::before {
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--story-primary);
  letter-spacing: 0.14em;
  text-shadow: none;
}

.map-step:nth-of-type(2) .map-step-inner::before { color: var(--story-secondary); }
.map-step:nth-of-type(3) .map-step-inner::before { color: #d8ff98; }

.map-step-inner h3 {
  max-width: 12ch;
  font-size: 4.85rem;
  line-height: 0.92;
  font-weight: 830;
}

.map-step-inner p {
  max-width: 34ch;
  font-size: 1.62rem;
  line-height: 1.22;
  font-weight: 560;
  color: rgba(247, 255, 252, calc(0.84 + (var(--text-progress, 0) * 0.16))) !important;
}

html[data-theme="light"] .map-title,
html[data-theme="light"] .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner {
  color: #171633;
  text-shadow: none;
}

html[data-theme="light"] .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner {
  border-left: 8px solid var(--story-primary) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.38)),
    linear-gradient(90deg, var(--story-primary-soft), transparent 42%);
  box-shadow: 0 28px 80px rgba(29, 27, 58, 0.12);
}

html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner {
  border-left-color: var(--story-secondary) !important;
}

html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner {
  border-left-color: #777777 !important;
}

html[data-theme="light"] .map-step-inner p,
html[data-theme="light"] .map-step.is-active p {
  color: rgba(23, 22, 51, calc(0.82 + (var(--text-progress, 0) * 0.16))) !important;
}

html[data-theme="light"] .map-title .eyebrow,
html[data-theme="light"] .map-step-inner::before {
  color: var(--story-primary);
}

@media (max-width: 980px) {
  .story-axis {
    right: 28px;
  }

  .story-metrics {
    display: none;
  }

  .map-title h2 {
    max-width: calc(100vw - 120px);
    font-size: clamp(4rem, 8.8vw, 5.15rem);
  }

  .map-step-inner,
  .map-step:nth-of-type(2) .map-step-inner,
  .map-step:nth-of-type(3) .map-step-inner,
  .map-story .map-step:last-of-type .map-step-inner {
    left: 24px !important;
    right: 74px !important;
    width: auto !important;
  }
}

@media (max-width: 660px) {
  .story-system {
    inset: 96px 12px 24px;
  }

  .story-system-frame {
    clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  }

  .story-axis {
    top: auto;
    left: 22px;
    right: 22px;
    bottom: 28px;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--story-primary-line), rgba(255, 255, 255, 0.42), transparent);
  }

  .story-axis span {
    left: calc(var(--point) * 50%);
    top: 50%;
  }

  .map-title {
    width: min(100%, calc(100vw - 24px));
    padding: 116px 18px 0;
  }

  .map-title::before {
    left: 18px;
    top: 24%;
    bottom: 28%;
    width: 5px;
  }

  .map-title::after {
    left: 18px;
    right: 18px;
    bottom: 24%;
  }

  .map-title .eyebrow,
  .map-title h2 {
    margin-left: 26px;
  }

  .map-title h2 {
    max-width: calc(100vw - 76px);
    font-size: clamp(2.86rem, 12.2vw, 3.8rem);
    line-height: 0.96;
  }

  .map-title h2::before {
    width: 82vw;
    height: 1em;
  }

  .map-title h2::after {
    right: 0;
    width: 1.45em;
    height: 1.45em;
  }

  .map-step-inner,
  .map-step:nth-of-type(2) .map-step-inner,
  .map-step:nth-of-type(3) .map-step-inner,
  .map-story .map-step:last-of-type .map-step-inner {
    left: 18px !important;
    right: 18px !important;
    top: 52% !important;
    width: auto !important;
    padding: 24px 22px !important;
    border-left-width: 5px !important;
  }

  .map-step-inner h3 {
    font-size: 3.15rem;
    line-height: 0.94;
  }

  .map-step-inner p {
    font-size: 1.32rem;
    line-height: 1.26;
  }
}

/* === Palette consolidation: monochrome === */
.control-bar,
.menu-toggle {
  border-color: rgba(128, 255, 159, 0.17);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.theme-toggle {
  border-color: rgba(128, 255, 159, 0.27);
}

.language-control select option {
  color: #14231f;
  background: #f5f7f2;
}

.menu-overlay::before {
  border-color: rgba(255, 255, 255, 0.16);
}

.menu-overlay::after {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 20px -22px 0 rgba(255, 255, 255, 0.18);
}

.menu-visual {
  background:
    linear-gradient(rgba(3, 6, 3, 0.44), rgba(3, 6, 3, 0.82)),
    var(--map-image);
  border-right-color: rgba(128, 255, 159, 0.16);
}

.menu-visual::before {
  background-image:
    linear-gradient(rgba(128, 255, 159, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 255, 159, 0.11) 1px, transparent 1px);
}

.menu-visual::after {
  background:
    radial-gradient(circle at 18% 78%, rgba(255, 255, 255, 0.1) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.08) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent, rgba(3, 6, 3, 0.62));
}

.menu-sub a,
.menu-meta {
  color: rgba(237, 247, 244, 0.68);
}

.menu-meta {
  color: rgba(237, 247, 244, 0.42);
}

.button {
  border-color: rgba(128, 255, 159, 0.18);
}

.map-vignette {
  background:
    linear-gradient(90deg, rgba(3, 6, 3, 0.74) 0%, rgba(3, 6, 3, 0.04) 46%, rgba(6, 10, 5, 0.38) 100%),
    linear-gradient(0deg, rgba(3, 6, 3, 0.8) 0%, rgba(3, 6, 3, 0.04) 48%, rgba(6, 10, 5, 0.36) 100%),
    radial-gradient(circle at 66% 34%, rgba(255, 255, 255, 0.08), transparent 38%);
}

html[data-theme="light"] .map-vignette {
  background:
    linear-gradient(90deg, rgba(245, 247, 242, 0.44) 0%, rgba(245, 247, 242, 0.02) 48%, rgba(245, 247, 242, 0.34) 100%),
    linear-gradient(0deg, rgba(245, 247, 242, 0.48) 0%, transparent 44%, rgba(245, 247, 242, 0.16) 100%),
    radial-gradient(circle at 66% 34%, rgba(0, 143, 134, 0.13), transparent 38%);
}

html[data-theme="light"] .menu-visual {
  background:
    linear-gradient(rgba(6, 16, 14, 0.42), rgba(6, 16, 14, 0.78)),
    var(--map-image);
}

.map-stage::after {
  border-top-color: rgba(128, 255, 159, 0.28);
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.08) 0 1px, transparent 1.7px);
}

.index_inner {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(3, 6, 3, 0.42);
  color: rgba(237, 247, 244, 0.96);
}

.index_divider,
.index_total {
  color: rgba(237, 247, 244, 0.62);
}

.map-title {
  color: #edf7f4;
}

.map-title::after {
  background: linear-gradient(90deg, var(--accent), rgba(237, 247, 244, 0.22), transparent);
}

.split-section,
.statement,
.ai-section {
  border-color: var(--line);
}

.split-media {
  background-image:
    linear-gradient(0deg, rgba(3, 6, 3, 0.24), rgba(3, 6, 3, 0.24)),
    var(--map-image);
}

.tabs {
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.statement {
  background:
    linear-gradient(rgba(3, 6, 3, 0.84), rgba(3, 6, 3, 0.88)),
    var(--map-image);
}

.contact .section-kicker {
  color: var(--accent-soft);
}

.scroll-bar::before,
html[data-theme="dark"] .scroll-bar::before {
  background: var(--accent);
}

html[data-theme="light"] .service-card,
html[data-theme="light"] .page-link-grid a,
html[data-theme="light"] .offer-grid article,
html[data-theme="light"] .tab {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

html[data-theme="light"] .hero-content,
html[data-theme="light"] .map-title,
html[data-theme="light"] .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner {
  color: #14231f !important;
  text-shadow: 0 2px 24px rgba(255, 255, 255, 0.78), 0 1px 0 rgba(255, 255, 255, 0.72);
}

html[data-theme="light"] .map-step-inner p,
html[data-theme="light"] .map-step.is-active p {
  color: rgba(20, 35, 31, calc(0.74 + (var(--text-progress, 0) * 0.2))) !important;
}

html[data-theme="light"] .map-title .eyebrow {
  color: var(--accent);
  text-shadow: none;
}

/* === Apple-inspired refinement layer === */
:root {
  --ink: #f6f6f3;
  --muted: rgba(241, 255, 244, 0.68);
  --faint: rgba(255, 255, 255, 0.08);
  --paper: #f5f5f7;
  --dark: #050505;
  --panel: rgba(7, 12, 8, 0.76);
  --line: rgba(128, 255, 159, 0.14);
  --surface: rgba(9, 13, 9, 0.82);
  --control-bg: rgba(3, 5, 3, 0.82);
  --control-ink: #f6f6f3;
  --control-panel: rgba(255, 255, 255, 0.08);
  --header-mark: rgba(241, 255, 244, 0.88);
  --contact-bg: #050505;
  --contact-ink: #f6f6f3;
  --contact-muted: rgba(241, 255, 244, 0.66);
  --accent: #f4f4f4;
  --accent-soft: #a8a8a8;
  --accent-hover: #ffffff;
  --accent-ink: #050505;
  --accent-ink-muted: rgba(2, 4, 2, 0.72);
  --rust: #777777;
  --shadow-soft: 0 28px 80px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 22px 60px rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] {
  --ink: #16171c;
  --muted: rgba(22, 23, 28, 0.62);
  --faint: rgba(0, 0, 0, 0.06);
  --paper: #f5f5f7;
  --dark: #f5f5f7;
  --panel: rgba(255, 255, 255, 0.72);
  --line: rgba(0, 0, 0, 0.09);
  --surface: rgba(255, 255, 255, 0.74);
  --control-bg: rgba(30, 31, 38, 0.78);
  --control-ink: #fbfbfd;
  --control-panel: rgba(255, 255, 255, 0.12);
  --header-mark: rgba(22, 23, 28, 0.78);
  --contact-bg: #111217;
  --contact-ink: #f5f5f7;
  --contact-muted: rgba(245, 245, 247, 0.66);
  --accent: #111111;
  --accent-soft: #555555;
  --accent-hover: #0d5f59;
  --accent-ink: #ffffff;
  --accent-ink-muted: rgba(255, 255, 255, 0.82);
  --waves-bg: #f5f5f7;
  --waves-stroke: #b8c0cc;
  --hero-ink: #111217;
  --hero-shadow: 0 2px 26px rgba(255, 255, 255, 0.7);
}

body {
  background:
    linear-gradient(180deg, var(--dark) 0%, color-mix(in srgb, var(--dark) 94%, var(--accent)) 42%, var(--dark) 100%);
  font-feature-settings: "liga" 1, "calt" 1;
}

body::before,
.fx-orb {
  display: none !important;
}

.site-header {
  padding-top: 18px;
}

.header-mark {
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.01em;
}

.control-bar,
.menu-toggle,
.index_inner {
  border-color: rgba(255, 255, 255, 0.22);
  background: color-mix(in srgb, var(--control-bg) 82%, transparent);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.menu-toggle {
  min-height: 44px;
  padding-inline: 16px 18px;
  font-weight: 760;
}

.theme-toggle,
.language-control,
.scroll-percent {
  height: 40px;
}

.theme-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.language-control select,
.scroll-percent {
  font-weight: 760;
}

.menu-overlay {
  background:
    radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 30vw),
    linear-gradient(135deg, color-mix(in srgb, var(--dark) 96%, var(--accent)) 0%, var(--dark) 58%, color-mix(in srgb, var(--dark) 92%, var(--accent-soft)) 100%);
}

.menu-overlay::before,
.menu-overlay::after,
.menu-visual::after {
  content: none;
}

.menu-visual {
  border-right-color: var(--line);
  opacity: 0.82;
}

.menu-main a {
  font-weight: 680;
  line-height: 0.98;
}

.menu-cta,
.button {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  clip-path: none;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.94rem;
  font-weight: 760;
}

.button.primary,
.menu-cta {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border-color: color-mix(in srgb, var(--accent) 86%, #fff);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.button.secondary {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.eyebrow,
.section-kicker {
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

h1,
h2,
h3 {
  font-weight: 720;
}

h1 {
  letter-spacing: -0.03em;
}

.hero h1 {
  width: max-content;
  max-width: 100%;
  font-size: clamp(2.35rem, 7.2vw, 6.7rem);
  white-space: nowrap;
}

@media (max-width: 660px) {
  .hero h1 {
    font-size: clamp(2.35rem, 10.2vw, 3.65rem);
  }
}

h2 {
  letter-spacing: -0.028em;
}

.section {
  width: min(var(--max), calc(100vw - 40px));
  padding: 76px 0 96px;
  scroll-margin-top: 88px;
}

.split-section,
.statement,
.contact,
.map-story section,
.map-story article {
  scroll-margin-top: 88px;
}

.intro h2,
.solutions h2,
.ai-section h2,
.cyber-section h2 {
  max-width: 11.6ch;
  font-size: clamp(2.55rem, 4.75vw, 5.15rem);
  line-height: 0.97;
}

.intro {
  padding-top: 36px;
  padding-bottom: 70px;
}

.intro h2 {
  max-width: 13.4ch;
  font-size: clamp(2.25rem, 3.35vw, 3.85rem);
  line-height: 1;
}

.intro .intro-grid {
  align-items: center;
  margin-bottom: 8px;
}

.intro .intro-grid p {
  max-width: 45ch;
  font-size: clamp(0.98rem, 1.18vw, 1.08rem);
  line-height: 1.56;
}

.intro-grid.compact h2 {
  max-width: 12.8ch;
}

.intro-grid {
  gap: clamp(34px, 7vw, 92px);
  margin-bottom: 28px;
}

.intro-grid p,
.split-copy > p,
.contact-inner > p,
.service-card p,
.offer-grid p,
.page-link-grid small,
.metric-list dd,
.tab-panel p {
  line-height: 1.62;
}

.service-grid,
.page-link-grid,
.offer-grid {
  gap: 14px;
  border: 0;
  background: transparent;
}

.service-card,
.slider-card,
.page-link-grid a,
.offer-grid article,
.tabs,
.tab-panel,
.split-copy {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 44%),
    var(--surface);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.service-card {
  min-height: 274px;
  padding: 30px;
  display: grid;
  align-content: space-between;
  gap: 22px;
}

.service-card h3,
.offer-grid h3 {
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.service-card p,
.slider-card p,
.offer-grid p {
  margin: 0;
}

.service-card span,
.slider-card span,
.page-link-grid span,
.offer-grid span,
.metric-list dt {
  color: var(--accent-soft);
  font-weight: 820;
}

.slider-card span {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--accent-soft) 64%, var(--muted));
  transition: color 420ms ease, letter-spacing 420ms ease;
}

.slider-card.is-active span {
  color: var(--accent);
  letter-spacing: 0.26em;
}

.page-link-grid a,
.offer-grid article {
  padding: 26px;
}

.offer-grid article {
  display: grid;
  align-content: space-between;
  gap: 24px;
}

.card-slider {
  position: relative;
  margin-top: 0;
  padding: 0 0 8px;
  overflow: hidden;
  overflow: clip;
  contain: layout paint;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
  perspective: 1200px;
}

.card-slider.is-dragging {
  cursor: grabbing;
}

.card-slider::before,
.card-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 8;
  width: clamp(46px, 10vw, 150px);
  pointer-events: none;
}

.card-slider::before {
  left: 0;
  background: linear-gradient(90deg, var(--dark), transparent);
}

.card-slider::after {
  right: 0;
  background: linear-gradient(270deg, var(--dark), transparent);
}

.card-slider-stage {
  position: relative;
  overflow: visible;
}

.card-slider-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}

.card-slider.is-enhanced .card-slider-stage {
  height: clamp(330px, 30vw, 386px);
  overflow: hidden;
  overflow: clip;
}

.card-slider.is-enhanced .card-slider-track {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.slider-card {
  position: relative;
  width: clamp(252px, 23vw, 300px);
  min-height: clamp(290px, 26vw, 346px);
  display: grid;
  align-content: space-between;
  gap: 22px;
  padding: clamp(24px, 3vw, 34px);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.card-slider.is-enhanced .slider-card {
  padding-bottom: clamp(72px, 6vw, 86px);
}

.card-slider.is-enhanced .slider-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transition: border-color 420ms ease, box-shadow 420ms ease;
}

.slider-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.14), transparent 36%),
    radial-gradient(520px circle at 18% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%);
  opacity: 0;
  transition: opacity 360ms ease;
}

.slider-card.is-active::before {
  opacity: 1;
}

.card-slider.is-enhanced .slider-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  box-shadow:
    0 36px 96px rgba(0, 0, 0, 0.34),
    0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.slider-card > * {
  position: relative;
  z-index: 1;
}

.slider-card h3 {
  max-width: 9.8ch;
  margin: 0 0 12px;
  font-size: clamp(1.28rem, 1.65vw, 1.64rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.slider-card p {
  color: var(--muted);
  font-size: clamp(0.86rem, 0.9vw, 0.92rem);
  line-height: 1.5;
}

.card-slider-controls {
  position: relative;
  left: 50%;
  bottom: auto;
  margin-top: 14px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--control-bg) 76%, transparent);
  color: var(--control-ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transform: translateX(-50%);
}

.card-slider.is-enhanced .card-slider-controls {
  position: absolute;
  bottom: 12px;
  z-index: 220;
  margin-top: 0;
}

.slider-nav {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 860;
  line-height: 1;
  transition: transform 180ms ease, background 180ms ease;
}

.slider-nav:hover,
.slider-nav:focus-visible {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 40%, transparent);
}

.slider-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 70px;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  font-weight: 860;
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .card-slider::before {
  background: linear-gradient(90deg, var(--dark), transparent);
}

html[data-theme="light"] .card-slider::after {
  background: linear-gradient(270deg, var(--dark), transparent);
}

html[data-theme="light"] .slider-card::before {
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.84), transparent 38%),
    radial-gradient(520px circle at 18% 0%, rgba(0, 0, 0, 0.08), transparent 58%);
}

.page-link-grid a:hover,
.page-link-grid a:focus-visible {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent));
  color: #fff;
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.split-section {
  width: min(1280px, calc(100vw - 40px));
  margin: 0 auto;
  min-height: 720px;
  gap: 14px;
  border-block: 0;
  padding-block: 28px;
}

.split-media {
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.split-copy {
  align-self: stretch;
  display: grid;
  align-content: center;
}

.metric-list {
  gap: 10px;
  border-top: 0;
}

.metric-list div {
  grid-template-columns: 0.42fr 1fr;
  padding: 18px 0;
}

.tabs {
  overflow: hidden;
}

.tab-list {
  gap: 6px;
  padding: 6px;
  background: transparent;
}

.tab {
  min-height: 42px;
  border-radius: 999px;
  background: transparent;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.94rem;
  font-weight: 720;
}

.tab.is-active {
  background: color-mix(in srgb, var(--accent) 96%, #fff);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.tab::before {
  content: none;
}

.tab-panel {
  border-inline: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.ai-section,
.cyber-section {
  border-top: 0;
}

.statement {
  min-height: 62svh;
  margin-top: 28px;
  border-block: 0;
}

.statement blockquote {
  letter-spacing: -0.03em;
}

.contact {
  margin: 28px auto 0;
  width: min(1280px, calc(100vw - 40px));
  min-height: 78svh;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -24px 80px rgba(0, 0, 0, 0.18);
}

.contact-inner {
  max-width: 960px;
}

.scroll-bar {
  height: 3px;
  z-index: 110;
}

.scroll-bar::before,
html[data-theme="dark"] .scroll-bar::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}

@media (max-width: 980px) {
  .section,
  .split-section,
  .contact {
    width: min(100% - 28px, var(--max));
  }

  .split-section {
    padding-block: 14px;
  }
}

@media (max-width: 660px) {
  .site-header {
    padding-top: 20px;
  }

  .section {
    padding-block: 86px;
  }

  .service-grid,
  .page-link-grid,
  .offer-grid,
  .split-section {
    gap: 10px;
  }

  .card-slider {
    margin-inline: -14px;
    padding-bottom: 66px;
  }

  .card-slider-stage {
    height: 330px;
  }

  .slider-card {
    width: min(78vw, 310px);
    min-height: 270px;
  }

  .service-card,
  .page-link-grid a,
  .offer-grid article {
    min-height: auto;
    padding: 24px;
  }

  .service-card h3,
  .offer-grid h3 {
    margin-top: 0;
  }

  .tab-list {
    grid-template-columns: 1fr;
  }

  .contact {
    width: 100%;
    margin-top: 12px;
    border-radius: 0;
  }
}

/* Final story label contrast: keep the step marker readable on the light wave background. */
.map-step-inner::before {
  min-height: 38px;
  padding: 0 16px;
  opacity: calc(0.72 + (var(--text-progress, 0) * 0.28));
}

html[data-theme="light"] .map-step-inner::before,
html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner::before,
html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner::before {
  color: #ffffff;
  border-color: rgba(17, 18, 23, 0.18);
  background: rgba(17, 18, 23, 0.86);
  box-shadow: 0 12px 32px rgba(17, 18, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: none;
}

.map-story .index_inner {
  display: none !important;
}

/* Final card polish */
.map-step-inner,
.map-step:nth-of-type(2) .map-step-inner,
.map-step:nth-of-type(3) .map-step-inner,
.map-story .map-step:last-of-type .map-step-inner {
  width: min(680px, calc(100vw - 210px)) !important;
  border: 1px solid rgba(237, 247, 244, 0.18) !important;
  border-left: 7px solid var(--story-primary) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(145deg, rgba(237, 247, 244, 0.12), transparent 34%),
    radial-gradient(620px circle at 10% 4%, color-mix(in srgb, var(--story-primary) 22%, transparent), transparent 58%),
    linear-gradient(135deg, rgba(6, 16, 14, 0.86), rgba(6, 16, 14, 0.56) 56%, rgba(6, 16, 14, 0.72));
  box-shadow:
    0 34px 86px rgba(0, 0, 0, 0.34),
    0 8px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  overflow: hidden;
}

.map-step:nth-of-type(2) .map-step-inner {
  border-left-color: var(--story-secondary) !important;
  background:
    linear-gradient(145deg, rgba(255, 246, 220, 0.13), transparent 34%),
    radial-gradient(620px circle at 10% 4%, color-mix(in srgb, var(--story-secondary) 24%, transparent), transparent 58%),
    linear-gradient(135deg, rgba(18, 15, 8, 0.86), rgba(6, 16, 14, 0.56) 56%, rgba(6, 16, 14, 0.72));
}

.map-step:nth-of-type(3) .map-step-inner,
.map-story .map-step:last-of-type .map-step-inner {
  border-left-color: #d8d8d8 !important;
  background:
    linear-gradient(145deg, rgba(229, 255, 196, 0.13), transparent 34%),
    radial-gradient(620px circle at 10% 4%, rgba(255, 255, 255, 0.14), transparent 58%),
    linear-gradient(135deg, rgba(7, 17, 12, 0.86), rgba(6, 16, 14, 0.56) 56%, rgba(6, 16, 14, 0.72));
}

.map-step-inner::after {
  content: "";
  position: absolute;
  top: 26px;
  right: 26px;
  width: 96px;
  height: 96px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--story-primary) 42%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--story-primary) 38%, transparent) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, color-mix(in srgb, var(--story-primary) 38%, transparent) 49% 51%, transparent 52%),
    radial-gradient(circle, color-mix(in srgb, var(--story-primary) 24%, transparent) 0 2px, transparent 3px);
  opacity: 0.52;
}

.map-step:nth-of-type(2) .map-step-inner::after {
  border-color: color-mix(in srgb, var(--story-secondary) 42%, transparent);
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--story-secondary) 38%, transparent) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, color-mix(in srgb, var(--story-secondary) 38%, transparent) 49% 51%, transparent 52%),
    radial-gradient(circle, color-mix(in srgb, var(--story-secondary) 24%, transparent) 0 2px, transparent 3px);
}

.map-step:nth-of-type(3) .map-step-inner::after,
.map-story .map-step:last-of-type .map-step-inner::after {
  border-color: rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.22) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(255, 255, 255, 0.22) 49% 51%, transparent 52%),
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px);
}

.map-step-inner::before {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(237, 247, 244, 0.18);
  border-radius: 999px;
  background: rgba(6, 16, 14, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.map-step-inner h3,
.map-step-inner p {
  position: relative;
  z-index: 1;
}

.map-step-inner h3 {
  max-width: 10.5ch;
  font-size: clamp(3.7rem, 6.4vw, 5.1rem);
  text-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
}

.map-step-inner p {
  max-width: 29ch;
  font-size: clamp(1.28rem, 2.15vw, 1.72rem);
}

html[data-theme="light"] .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner {
  border-color: rgba(23, 22, 51, 0.08) !important;
  border-left-color: var(--story-primary) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.58) 42%, rgba(244, 250, 247, 0.76)),
    radial-gradient(640px circle at 6% 0%, color-mix(in srgb, var(--story-primary) 13%, transparent), transparent 58%);
  box-shadow:
    0 34px 82px rgba(29, 27, 58, 0.13),
    0 10px 30px rgba(29, 27, 58, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner {
  border-left-color: var(--story-secondary) !important;
}

html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner {
  border-left-color: #777777 !important;
}

html[data-theme="light"] .map-step-inner::after {
  opacity: 0.36;
}

html[data-theme="light"] .map-step-inner::before,
html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner::before,
html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner::before {
  color: #ffffff;
  background: #2b2f35;
}

.slider-card,
.page-link-grid a,
.service-card,
.offer-grid article {
  border-color: color-mix(in srgb, var(--line) 72%, rgba(255, 255, 255, 0.22));
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.075), transparent 35%),
    radial-gradient(520px circle at 12% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%),
    var(--surface);
}

.slider-card span,
.page-link-grid span {
  display: inline-grid;
  place-items: center;
  width: fit-content;
  min-width: 46px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
}

.slider-card h3,
.page-link-grid strong {
  max-width: 12ch;
  text-wrap: balance;
}

.slider-card.is-active {
  transform-style: preserve-3d;
}

.page-link-grid a {
  min-height: 285px;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.page-link-grid a:hover,
.page-link-grid a:focus-visible {
  transform: translate3d(0, -6px, 0);
}

html[data-theme="light"] .slider-card,
html[data-theme="light"] .page-link-grid a,
html[data-theme="light"] .service-card,
html[data-theme="light"] .offer-grid article {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.48) 38%),
    radial-gradient(520px circle at 12% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 58%),
    var(--surface);
}

@media (max-width: 660px) {
  .map-step-inner,
  .map-step:nth-of-type(2) .map-step-inner,
  .map-step:nth-of-type(3) .map-step-inner,
  .map-story .map-step:last-of-type .map-step-inner {
    border-left-width: 5px !important;
  }

  .map-step-inner::after {
    width: 66px;
    height: 66px;
    top: 18px;
    right: 18px;
  }

  .page-link-grid a {
    min-height: 240px;
  }
}

/* Open layout refinement */
.map-step-inner,
.map-step:nth-of-type(2) .map-step-inner,
.map-step:nth-of-type(3) .map-step-inner,
.map-story .map-step:last-of-type .map-step-inner {
  width: min(760px, calc(100vw - 120px)) !important;
  padding: clamp(18px, 3vh, 34px) 0 clamp(18px, 3vh, 34px) clamp(24px, 4vw, 46px) !important;
  border: 0 !important;
  border-left: 6px solid var(--story-primary) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

.map-step:nth-of-type(2) .map-step-inner {
  border-left-color: var(--story-secondary) !important;
}

.map-step:nth-of-type(3) .map-step-inner,
.map-story .map-step:last-of-type .map-step-inner {
  border-left-color: #7fb034 !important;
}

.map-step-inner::after,
.map-step-inner::before {
  content: none !important;
}

.map-step-inner > span {
  min-height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(237, 247, 244, 0.2);
  background: rgba(6, 16, 14, 0.74);
  color: #edf7f4;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);
}

.map-step-inner h3 {
  max-width: 9.8ch;
  color: #edf7f4;
  font-size: clamp(4rem, 7.2vw, 6.2rem);
  line-height: 0.9;
  text-shadow: 0 16px 44px rgba(0, 0, 0, 0.26);
}

.map-step-inner p {
  max-width: 30ch;
  color: rgba(237, 247, 244, calc(0.78 + (var(--text-progress, 0) * 0.22))) !important;
  font-size: clamp(1.3rem, 2.35vw, 1.92rem);
  line-height: 1.13;
  font-weight: 620;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

html[data-theme="light"] .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner {
  border-left-color: var(--story-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner {
  border-left-color: var(--story-secondary) !important;
}

html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner {
  border-left-color: #6d982d !important;
}

html[data-theme="light"] .map-step-inner h3 {
  color: #10231e;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.52), 0 16px 38px rgba(16, 35, 30, 0.12);
}

html[data-theme="light"] .map-step-inner p {
  color: rgba(16, 35, 30, calc(0.76 + (var(--text-progress, 0) * 0.24))) !important;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.48), 0 12px 32px rgba(16, 35, 30, 0.1);
}

.service-card,
.slider-card,
.page-link-grid a,
.offer-grid article,
.tabs,
.tab-panel,
.split-copy {
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.service-card,
.slider-card,
.page-link-grid a,
.offer-grid article {
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
}

.service-card::after,
.slider-card::before,
.page-link-grid a::after,
.offer-grid article::after {
  content: none !important;
}

.card-slider {
  overflow: visible;
  contain: layout;
}

.card-slider::before,
.card-slider::after {
  content: none !important;
}

.slider-card {
  padding-inline: clamp(18px, 2.4vw, 28px);
  min-height: clamp(250px, 23vw, 300px);
  border-top-color: rgba(237, 247, 244, 0.09) !important;
  opacity: 0.42;
}

.card-slider.is-enhanced .slider-card.is-active {
  border-top-color: var(--accent) !important;
  box-shadow: none !important;
  opacity: 1;
}

.card-slider.is-enhanced .slider-card:not(.is-active) {
  filter: saturate(0.8);
}

.slider-card h3 {
  max-width: 13ch;
}

.slider-card p {
  max-width: 24ch;
}

.card-slider-controls {
  border-color: rgba(237, 247, 244, 0.14);
  background: rgba(12, 20, 29, 0.78);
}

.slider-card span,
.page-link-grid span {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-link-grid,
.offer-grid,
.service-grid {
  gap: clamp(16px, 2.4vw, 30px);
}

.page-link-grid a,
.offer-grid article,
.service-card {
  min-height: 0;
  padding: clamp(20px, 2.5vw, 30px) 0 0;
}

.solutions .page-link-grid a {
  min-height: 0;
}

.page-link-grid a:hover,
.page-link-grid a:focus-visible {
  color: var(--ink);
  background: transparent;
  transform: translate3d(0, -4px, 0);
}

.page-link-grid a:hover strong,
.page-link-grid a:focus-visible strong,
.offer-grid article:hover h3,
.service-card:hover h3 {
  color: var(--accent);
}

.page-link-grid a:hover span,
.page-link-grid a:hover small,
.page-link-grid a:focus-visible span,
.page-link-grid a:focus-visible small {
  color: var(--muted);
}

.offer-grid article:not(.cyber-flip-card):hover,
.service-card:hover,
.metric-list div:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: none;
}

.tabs {
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
}

.tab-list {
  gap: 8px;
  background: transparent;
}

.tab {
  border: 1px solid var(--line);
  background: transparent;
}

.tab-panel {
  min-height: 220px;
  padding: 30px 0 0;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
}

.split-copy {
  border: 0 !important;
  background: transparent !important;
}

@media (max-width: 660px) {
  .map-step-inner,
  .map-step:nth-of-type(2) .map-step-inner,
  .map-step:nth-of-type(3) .map-step-inner,
  .map-story .map-step:last-of-type .map-step-inner {
    width: calc(100vw - 36px) !important;
    padding: 92px 0 44px 22px !important;
    border-left-width: 5px !important;
  }

  .map-step-inner h3 {
    font-size: clamp(3.1rem, 15vw, 4.7rem);
  }

  .map-step-inner p {
    max-width: 12ch;
    font-size: clamp(1.82rem, 9vw, 3.1rem);
    line-height: 1;
  }

  .card-slider {
    margin-inline: 0;
  }
}

/* Landing cover refresh */
.map-stage {
  background:
    radial-gradient(ellipse at 72% 34%, rgba(255, 255, 255, 0.1), transparent 34%),
    radial-gradient(ellipse at 16% 82%, rgba(255, 255, 255, 0.06), transparent 28%),
    linear-gradient(115deg, #020302 0%, #07100d 44%, #020302 100%);
}

.map-image {
  opacity: calc(0.42 - (var(--exit-fade, 0) * 0.24));
  background:
    linear-gradient(135deg, transparent 0 34%, rgba(255, 255, 255, 0.06) 34.2% 34.8%, transparent 35% 64%, rgba(255, 255, 255, 0.05) 64.2% 64.8%, transparent 65%),
    repeating-radial-gradient(circle at 52% 48%, rgba(237, 247, 244, 0.12) 0 1px, transparent 1px 18px),
    conic-gradient(from 118deg at 50% 50%, rgba(255, 255, 255, 0.08), transparent 21%, rgba(255, 255, 255, 0.05), transparent 58%, rgba(255, 255, 255, 0.08), transparent 86%);
  background-size: 620px 620px, 74px 74px, cover;
  background-position: center;
  filter: saturate(1.15) contrast(1.08) brightness(0.86);
  mix-blend-mode: screen;
}

.map-image-layer {
  display: none;
}

.map-vignette {
  background:
    linear-gradient(90deg, rgba(2, 3, 2, 0.9), rgba(2, 3, 2, 0.16) 46%, rgba(2, 3, 2, 0.72)),
    linear-gradient(0deg, rgba(2, 3, 2, 0.82), rgba(2, 3, 2, 0.08) 46%, rgba(2, 3, 2, 0.58)),
    repeating-linear-gradient(135deg, rgba(237, 247, 244, 0.055) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(2, 3, 2, 0.4) 70%);
}

.map-stage::after {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255, 255, 255, 0.2) 18.08%, transparent 18.2% 81.8%, rgba(255, 255, 255, 0.14) 81.92%, transparent 82.04%),
    linear-gradient(0deg, transparent 0 22%, rgba(237, 247, 244, 0.1) 22.08%, transparent 22.18% 77.82%, rgba(237, 247, 244, 0.09) 77.92%, transparent 78.02%);
  opacity: calc(0.28 - (var(--exit-fade, 0) * 0.2));
}

.story-system {
  opacity: 0;
}

.hero {
  align-items: center;
  justify-items: center;
  min-height: 100svh;
  padding: clamp(112px, 15svh, 150px) clamp(18px, 5vw, 64px) clamp(38px, 7svh, 68px);
}

.hero-content {
  width: min(1120px, 100%);
  min-height: clamp(420px, 62svh, 620px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-content: center;
  justify-items: center;
  padding: clamp(28px, 5vw, 58px);
  color: #f7fffc;
  text-align: center;
  text-shadow: 0 18px 56px rgba(0, 0, 0, 0.72);
}

.hero-content::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.6vw, 18px) clamp(8px, 1.4vw, 16px);
  z-index: -1;
  border: 1px solid rgba(237, 247, 244, 0.38);
  background:
    linear-gradient(90deg, rgba(237, 247, 244, 0.42), transparent 18% 82%, rgba(237, 247, 244, 0.42)) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(237, 247, 244, 0.42), transparent 18% 82%, rgba(237, 247, 244, 0.42)) 0 100% / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(237, 247, 244, 0.34), transparent 30% 70%, rgba(237, 247, 244, 0.34)) 0 0 / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(237, 247, 244, 0.34), transparent 30% 70%, rgba(237, 247, 244, 0.34)) 100% 0 / 1px 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 28px 90px rgba(0, 0, 0, 0.24);
}

.hero .eyebrow {
  align-self: start;
  margin: 0 0 clamp(24px, 5svh, 46px);
  color: rgba(255, 255, 255, 0.76);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.68rem, 0.95vw, 0.92rem);
  letter-spacing: 0.22em;
  animation: none;
}

.hero h1 {
  align-self: center;
  width: auto;
  max-width: 100%;
  margin: 0;
  color: #ffffff;
  font-size: clamp(4.3rem, 14.5vw, 13rem);
  line-height: 0.76;
  font-weight: 760;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero h1 .fx-char {
  animation-delay: calc(var(--i, 0) * 42ms + 80ms);
}

.hero-copy {
  max-width: 660px;
  margin: clamp(20px, 4svh, 34px) 0 0;
  color: rgba(237, 247, 244, 0.82);
  font-size: clamp(1rem, 1.5vw, 1.24rem);
  line-height: 1.5;
  text-wrap: balance;
}

.hero-actions {
  justify-content: center;
  margin-top: clamp(22px, 4svh, 34px);
}

.hero-meta {
  align-self: end;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(26px, 6svh, 62px);
  color: rgba(237, 247, 244, 0.72);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.68rem, 0.88vw, 0.84rem);
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[data-theme="light"] .map-stage {
  background:
    radial-gradient(ellipse at 72% 34%, rgba(0, 0, 0, 0.1), transparent 34%),
    radial-gradient(ellipse at 14% 84%, rgba(183, 121, 31, 0.12), transparent 30%),
    linear-gradient(115deg, #f7f8f5 0%, #e9f3ef 48%, #f6f1e7 100%);
}

html[data-theme="light"] .map-image {
  opacity: calc(0.4 - (var(--exit-fade, 0) * 0.22));
  filter: saturate(0.88) contrast(1.02) brightness(1.02);
  mix-blend-mode: multiply;
}

html[data-theme="light"] .map-vignette {
  background:
    linear-gradient(90deg, rgba(247, 248, 245, 0.86), rgba(247, 248, 245, 0.16) 46%, rgba(246, 241, 231, 0.78)),
    linear-gradient(0deg, rgba(247, 248, 245, 0.78), rgba(247, 248, 245, 0.08) 46%, rgba(247, 248, 245, 0.5)),
    repeating-linear-gradient(135deg, rgba(20, 35, 31, 0.055) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 50% 50%, transparent 0 30%, rgba(247, 248, 245, 0.38) 72%);
}

html[data-theme="light"] .hero-content {
  color: #13221e !important;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.64), 0 18px 48px rgba(17, 24, 20, 0.12) !important;
}

html[data-theme="light"] .hero-content::before {
  border-color: rgba(19, 34, 30, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 28px 82px rgba(17, 24, 20, 0.1);
}

html[data-theme="light"] .hero h1 {
  color: #13221e;
}

html[data-theme="light"] .hero-copy,
html[data-theme="light"] .hero-meta {
  color: rgba(19, 34, 30, 0.72);
}

@media (max-width: 980px) {
  .hero-content {
    min-height: clamp(430px, 66svh, 600px);
  }

  .hero h1 {
    font-size: clamp(4rem, 15vw, 9rem);
  }
}

@media (max-width: 660px) {
  .hero {
    padding: 112px 14px 34px;
  }

  .hero-content {
    min-height: calc(100svh - 146px);
    padding: 28px 18px;
  }

  .hero .eyebrow {
    max-width: 24ch;
    margin-bottom: 28px;
    line-height: 1.45;
    letter-spacing: 0.16em;
  }

  .hero h1 {
    font-size: clamp(3.8rem, 18vw, 5.5rem);
    letter-spacing: 0.01em;
  }

  .hero-copy {
    max-width: 30ch;
    font-size: 0.98rem;
  }

  .hero-meta {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
  }
}

/* Cleaner cover pattern: dots and facets instead of line-heavy waves. */
.map-image {
  opacity: calc(0.46 - (var(--exit-fade, 0) * 0.26));
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 73% 31%, rgba(255, 255, 255, 0.14) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 72%, rgba(255, 255, 255, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(237, 247, 244, 0.115) 0 1.2px, transparent 1.8px),
    linear-gradient(132deg, transparent 0 38%, rgba(255, 255, 255, 0.08) 38.4% 52%, transparent 52.4%),
    linear-gradient(28deg, transparent 0 48%, rgba(255, 255, 255, 0.05) 48.4% 61%, transparent 61.4%);
  background-size: auto, auto, auto, 32px 32px, cover, cover;
  background-position: center;
}

.map-vignette {
  background:
    radial-gradient(ellipse at 50% 36%, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(90deg, rgba(2, 3, 2, 0.92), rgba(2, 3, 2, 0.16) 47%, rgba(2, 3, 2, 0.74)),
    linear-gradient(0deg, rgba(2, 3, 2, 0.84), rgba(2, 3, 2, 0.08) 46%, rgba(2, 3, 2, 0.56));
}

.map-stage::after {
  background:
    radial-gradient(circle at 19% 22%, rgba(255, 255, 255, 0.16) 0 5px, transparent 6px),
    radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.1) 0 8px, transparent 9px),
    radial-gradient(circle at 86% 78%, rgba(255, 255, 255, 0.08) 0 6px, transparent 7px);
  opacity: calc(0.5 - (var(--exit-fade, 0) * 0.38));
}

html[data-theme="light"] .map-vignette {
  background:
    radial-gradient(ellipse at 50% 36%, rgba(0, 0, 0, 0.06), transparent 38%),
    linear-gradient(90deg, rgba(247, 248, 245, 0.88), rgba(247, 248, 245, 0.16) 47%, rgba(246, 241, 231, 0.72)),
    linear-gradient(0deg, rgba(247, 248, 245, 0.78), rgba(247, 248, 245, 0.08) 46%, rgba(247, 248, 245, 0.5));
}

@media (max-width: 660px) {
  html,
  body {
    overflow-x: hidden;
  }

  .card-slider {
    overflow: hidden;
    overflow: clip;
    contain: layout paint;
  }
}

/* Monochrome landing pass */
:root {
  --accent: #f4f4f4;
  --accent-soft: #a8a8a8;
  --accent-hover: #d7d7d7;
  --accent-ink: #060606;
  --rust: #777777;
}

.map-story {
  --story-primary: #f2f2f2;
  --story-primary-soft: rgba(255, 255, 255, 0.12);
  --story-primary-line: rgba(255, 255, 255, 0.36);
  --story-secondary: #9c9c9c;
  --story-secondary-soft: rgba(255, 255, 255, 0.08);
}

.story-system {
  display: none;
}

.map-stage {
  background:
    radial-gradient(ellipse at 50% 32%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(115deg, #030303 0%, #111111 44%, #020202 100%);
}

.map-image {
  opacity: calc(0.42 - (var(--exit-fade, 0) * 0.24));
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 30%, rgba(210, 210, 210, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 63% 72%, rgba(160, 160, 160, 0.14) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.095) 0 1.2px, transparent 1.8px),
    linear-gradient(132deg, transparent 0 38%, rgba(255, 255, 255, 0.075) 38.4% 52%, transparent 52.4%),
    linear-gradient(28deg, transparent 0 48%, rgba(180, 180, 180, 0.06) 48.4% 61%, transparent 61.4%);
  background-size: auto, auto, auto, 32px 32px, cover, cover;
  filter: saturate(0) contrast(1.06) brightness(0.92);
}

.map-vignette {
  background:
    radial-gradient(ellipse at 50% 36%, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(90deg, rgba(2, 2, 2, 0.94), rgba(2, 2, 2, 0.18) 47%, rgba(2, 2, 2, 0.78)),
    linear-gradient(0deg, rgba(2, 2, 2, 0.86), rgba(2, 2, 2, 0.08) 46%, rgba(2, 2, 2, 0.58));
}

.map-stage::after {
  background:
    radial-gradient(circle at 19% 22%, rgba(255, 255, 255, 0.18) 0 5px, transparent 6px),
    radial-gradient(circle at 82% 28%, rgba(190, 190, 190, 0.13) 0 8px, transparent 9px),
    radial-gradient(circle at 86% 78%, rgba(150, 150, 150, 0.1) 0 6px, transparent 7px);
  opacity: calc(0.42 - (var(--exit-fade, 0) * 0.32));
}

.hero-content::before {
  content: none;
}

.hero .eyebrow {
  color: rgba(235, 235, 235, 0.82);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem);
  font-weight: 780;
  letter-spacing: 0.15em;
  text-shadow: none;
}

.hero-copy,
.hero-meta {
  color: rgba(238, 238, 238, 0.72);
}

.hero .button.primary {
  border-color: rgba(255, 255, 255, 0.64);
  background: rgba(244, 244, 244, 0.92);
  color: #060606;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.42);
  text-shadow: none;
}

.hero .button.primary:hover,
.hero .button.primary:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
}

.control-bar,
.menu-toggle {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(6, 6, 6, 0.78);
  color: #f4f4f4;
}

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

.scroll-percent {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="light"] .map-stage {
  background:
    radial-gradient(ellipse at 50% 32%, rgba(0, 0, 0, 0.1), transparent 34%),
    linear-gradient(115deg, #f0f0f0 0%, #d8d8d8 48%, #f8f8f8 100%);
}

html[data-theme="light"] .map-image {
  opacity: calc(0.78 - (var(--exit-fade, 0) * 0.32));
  background:
    radial-gradient(circle at 22% 24%, rgba(0, 0, 0, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 30%, rgba(0, 0, 0, 0.15) 0 2px, transparent 3px),
    radial-gradient(circle at 63% 72%, rgba(0, 0, 0, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(0, 0, 0, 0.16) 0 1.2px, transparent 1.9px),
    linear-gradient(132deg, transparent 0 34%, rgba(0, 0, 0, 0.16) 34.4% 53%, transparent 53.4%),
    linear-gradient(28deg, transparent 0 45%, rgba(0, 0, 0, 0.12) 45.4% 62%, transparent 62.4%);
  background-size: auto, auto, auto, 32px 32px, cover, cover;
  filter: saturate(0) contrast(1.08) brightness(0.98);
  mix-blend-mode: multiply;
}

html[data-theme="light"] .map-vignette {
  background:
    radial-gradient(ellipse at 50% 36%, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(90deg, rgba(245, 245, 245, 0.34), rgba(245, 245, 245, 0.02) 47%, rgba(255, 255, 255, 0.28)),
    linear-gradient(0deg, rgba(245, 245, 245, 0.42), rgba(245, 245, 245, 0.02) 48%, rgba(245, 245, 245, 0.18));
}

html[data-theme="light"] .map-stage::after {
  background:
    radial-gradient(circle at 19% 22%, rgba(0, 0, 0, 0.2) 0 5px, transparent 6px),
    radial-gradient(circle at 82% 28%, rgba(0, 0, 0, 0.13) 0 8px, transparent 9px),
    radial-gradient(circle at 86% 78%, rgba(0, 0, 0, 0.12) 0 6px, transparent 7px);
  opacity: calc(0.62 - (var(--exit-fade, 0) * 0.38));
}

html[data-theme="light"] .hero-content::before {
  content: none;
}

html[data-theme="light"] .hero h1 {
  color: #111111;
}

html[data-theme="light"] .hero .eyebrow {
  color: rgba(8, 8, 8, 0.84);
  font-weight: 780;
  text-shadow: none;
}

html[data-theme="light"] .hero-copy,
html[data-theme="light"] .hero-meta {
  color: rgba(8, 8, 8, 0.82);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
}

html[data-theme="light"] .hero .button.primary {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

html[data-theme="light"] .hero .button.primary:hover,
html[data-theme="light"] .hero .button.primary:focus-visible {
  border-color: #000000;
  background: #000000;
}

/* First-view intro animation */
body.intro-pending {
  overflow: hidden;
}

.intro-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f7f7f7;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(115deg, #020202 0%, #111111 48%, #020202 100%);
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1), visibility 720ms ease;
  cursor: default;
}

.intro-loader::before,
.intro-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-loader::before {
  background:
    linear-gradient(132deg, transparent 0 34%, rgba(255, 255, 255, 0.09) 34.4% 53%, transparent 53.4%),
    linear-gradient(28deg, transparent 0 45%, rgba(180, 180, 180, 0.07) 45.4% 62%, transparent 62.4%);
  opacity: 0;
  transform: scale(1.08) rotate(0.001deg);
  animation: introFacetIn 1200ms cubic-bezier(0.22, 1, 0.36, 1) 140ms forwards;
}

.intro-loader::after {
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 30%, rgba(210, 210, 210, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 63% 72%, rgba(160, 160, 160, 0.14) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 0 1.2px, transparent 1.8px);
  background-size: auto, auto, auto, 32px 32px;
  opacity: 0;
  animation: introDotsIn 900ms ease 280ms forwards;
}

.intro-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0 49.88%, rgba(255, 255, 255, 0.12) 49.92% 50.08%, transparent 50.12%),
    linear-gradient(0deg, transparent 0 49.88%, rgba(255, 255, 255, 0.1) 49.92% 50.08%, transparent 50.12%);
  transform: scaleX(0.15);
  animation: introCrossIn 880ms cubic-bezier(0.22, 1, 0.36, 1) 560ms forwards;
}

.intro-scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transform: translateX(-120%) skewX(-18deg);
  animation: introScan 1250ms cubic-bezier(0.22, 1, 0.36, 1) 860ms forwards;
  pointer-events: none;
}

.intro-lockup {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  width: min(1060px, calc(100vw - 36px));
  padding: clamp(26px, 5vw, 58px);
  text-align: center;
}

.intro-kicker {
  margin-bottom: clamp(24px, 4.5svh, 42px);
  color: rgba(235, 235, 235, 0.78);
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.66rem, 0.78vw, 0.82rem);
  font-weight: 760;
  letter-spacing: 0.13em;
  line-height: 1;
  text-shadow: none;
  opacity: 0;
  transform: translateY(12px);
  animation: introSoftIn 620ms ease 420ms forwards;
}

.intro-word {
  display: flex;
  justify-content: center;
  gap: clamp(0.1em, 1.1vw, 0.22em);
  color: #ffffff;
  font-size: clamp(4rem, 14.5vw, 13rem);
  font-weight: 780;
  line-height: 0.78;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-shadow: 0 24px 70px rgba(0, 0, 0, 0.72);
}

.intro-word span {
  --morph: 0;
  position: relative;
  display: inline-block;
  min-width: 0.54em;
  opacity: 0;
  text-align: center;
  filter: blur(18px);
  transform: translate3d(0, 0.42em, 0) scale(0.74);
  clip-path: polygon(
    calc(var(--morph) * 4%) 0,
    100% 0,
    calc(100% - (var(--morph) * 7%)) 100%,
    0 100%
  );
  animation:
    introLetterIn 820ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
    introGlyphWarp 1180ms steps(3, end) infinite;
  animation-delay: calc(640ms + (var(--i) * 62ms)), calc(1040ms + (var(--i) * 41ms));
}

.intro-word span::before,
.intro-word span::after {
  content: attr(data-final);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc((1 - var(--morph)) * 0.24);
  mix-blend-mode: screen;
}

.intro-word span::before {
  transform: translate3d(-0.045em, -0.018em, 0) skewX(-8deg);
  color: rgba(255, 255, 255, 0.42);
  clip-path: inset(0 0 48% 0);
}

.intro-word span::after {
  transform: translate3d(0.045em, 0.022em, 0) skewX(10deg);
  color: rgba(180, 180, 180, 0.36);
  clip-path: inset(52% 0 0 0);
}

.intro-word span.is-locked {
  filter: blur(0) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  animation: introLetterLock 360ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.intro-word span.is-locked::before,
.intro-word span.is-locked::after {
  opacity: 0;
}

.intro-status {
  display: grid;
  gap: 14px;
  width: min(430px, 78vw);
  margin-top: clamp(28px, 5svh, 48px);
  opacity: 0;
  transform: translateY(10px);
  animation: introSoftIn 620ms ease 1250ms forwards;
}

.intro-readout,
.intro-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.intro-bar {
  position: relative;
  display: block;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}

.intro-bar i {
  position: absolute;
  inset: 0;
  display: block;
  background: #f7f7f7;
  transform: scaleX(0.012);
  transform-origin: left center;
  transition: transform 180ms linear;
}

.intro-status strong,
.intro-status em,
.intro-steps span {
  color: rgba(240, 240, 240, 0.72);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.intro-status em {
  min-width: 58px;
  color: #ffffff;
  font-style: normal;
  text-align: right;
}

.intro-steps span {
  position: relative;
  color: rgba(240, 240, 240, 0.32);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  transition: color 220ms ease, transform 220ms ease;
}

.intro-steps span::before {
  content: "";
  display: inline-block;
  width: 6px;
  aspect-ratio: 1;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.08em;
}

.intro-steps span.is-active {
  color: rgba(255, 255, 255, 0.86);
  transform: translateY(-1px);
}

.intro-loader.is-exiting {
  opacity: 0;
  visibility: hidden;
}

.intro-loader.is-exiting .intro-lockup {
  animation: introLockupOut 860ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.intro-loader.is-exiting::before {
  animation: introFacetOut 860ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.intro-pending .site-header,
body.intro-pending .map-flow {
  opacity: 0;
}

body.intro-revealing .site-header,
body.intro-revealing .map-flow {
  opacity: 1;
  transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

html[data-theme="light"] .intro-loader {
  color: #111111;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(0, 0, 0, 0.08), transparent 36%),
    linear-gradient(115deg, #f0f0f0 0%, #d8d8d8 48%, #f8f8f8 100%);
}

html[data-theme="light"] .intro-loader::before {
  background:
    linear-gradient(132deg, transparent 0 34%, rgba(0, 0, 0, 0.16) 34.4% 53%, transparent 53.4%),
    linear-gradient(28deg, transparent 0 45%, rgba(0, 0, 0, 0.12) 45.4% 62%, transparent 62.4%);
}

html[data-theme="light"] .intro-loader::after {
  background:
    radial-gradient(circle at 22% 24%, rgba(0, 0, 0, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 30%, rgba(0, 0, 0, 0.15) 0 2px, transparent 3px),
    radial-gradient(circle at 63% 72%, rgba(0, 0, 0, 0.12) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(0, 0, 0, 0.16) 0 1.2px, transparent 1.9px);
  background-size: auto, auto, auto, 32px 32px;
}

html[data-theme="light"] .intro-pattern {
  background:
    linear-gradient(90deg, transparent 0 49.88%, rgba(0, 0, 0, 0.13) 49.92% 50.08%, transparent 50.12%),
    linear-gradient(0deg, transparent 0 49.88%, rgba(0, 0, 0, 0.1) 49.92% 50.08%, transparent 50.12%);
}

html[data-theme="light"] .intro-kicker,
html[data-theme="light"] .intro-status strong,
html[data-theme="light"] .intro-steps span {
  color: rgba(8, 8, 8, 0.78);
}

html[data-theme="light"] .intro-kicker {
  border-color: rgba(0, 0, 0, 0.11);
  background: rgba(255, 255, 255, 0.38);
  color: rgba(8, 8, 8, 0.82);
}

html[data-theme="light"] .intro-word {
  color: #111111;
  text-shadow: 0 22px 58px rgba(0, 0, 0, 0.16);
}

html[data-theme="light"] .intro-word span::before {
  color: rgba(0, 0, 0, 0.3);
  mix-blend-mode: multiply;
}

html[data-theme="light"] .intro-word span::after {
  color: rgba(0, 0, 0, 0.22);
  mix-blend-mode: multiply;
}

html[data-theme="light"] .intro-bar {
  background: rgba(0, 0, 0, 0.16);
}

html[data-theme="light"] .intro-bar i {
  background: #111111;
}

html[data-theme="light"] .intro-status em {
  color: #111111;
}

/* === 2026 clickable hub and detail pages === */
.hero-link-hub,
.detail-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
  color: #f6f6f3;
}

.hero-link-hub::before,
.detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.13) 1px, transparent 1.5px),
    linear-gradient(118deg, transparent 0 36%, rgba(255, 255, 255, 0.055) 36.2% 58%, transparent 58.2%),
    linear-gradient(32deg, transparent 0 52%, rgba(255, 255, 255, 0.08) 52.2% 77%, transparent 77.2%);
  background-size: 32px 32px, 100% 100%, 100% 100%;
  opacity: 0.72;
}

.hub-background,
.detail-hero::after {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.74), transparent 48%, rgba(0, 0, 0, 0.28)),
    radial-gradient(circle at 18% 80%, rgba(255, 255, 255, 0.08), transparent 32%),
    var(--map-image);
  background-size: auto, auto, cover;
  background-position: center;
  filter: saturate(0) contrast(1.08) brightness(0.68);
  opacity: 0.86;
}

.detail-hero::after {
  content: "";
}

.hub-rail {
  position: absolute;
  left: clamp(16px, 5vw, 58px);
  top: clamp(84px, 11vh, 132px);
  bottom: clamp(50px, 9vh, 90px);
  z-index: 3;
  width: 32px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.18), 0 18px 48px rgba(0, 0, 0, 0.34);
}

.hub-rail span {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 12px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
}

.hub-shell {
  position: relative;
  z-index: 2;
  width: min(1280px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding: clamp(118px, 14vh, 164px) clamp(20px, 5vw, 70px) clamp(34px, 6vh, 72px) clamp(88px, 10vw, 134px);
}

.hub-intro {
  max-width: 820px;
  padding-bottom: 0;
  text-shadow: 0 6px 34px rgba(0, 0, 0, 0.74);
}

.hub-intro h1,
.detail-hero h1 {
  max-width: 9ch;
  margin: 0 0 28px;
  color: #f7f7f3;
  font-size: clamp(4.8rem, 13vw, 12.5rem);
  line-height: 0.82;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

.hub-intro h1 {
  max-width: 100%;
  font-size: clamp(5.4rem, 14vw, 13rem);
}

.hub-intro p:not(.eyebrow),
.detail-hero p:not(.eyebrow) {
  max-width: 620px;
  color: rgba(246, 246, 243, 0.74);
  font-size: clamp(1.1rem, 2.1vw, 1.72rem);
  line-height: 1.26;
  font-weight: 780;
}

.overview-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 36px) clamp(28px, 5vw, 72px);
}

.service-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(34px, 7vw, 92px);
  align-items: start;
  border-top: 1px solid var(--line);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.035), transparent 52%),
    radial-gradient(circle at 76% 10%, rgba(255, 255, 255, 0.045), transparent 34%);
}

.overview-copy {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 22px;
}

.overview-copy h2 {
  max-width: 14ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(3rem, 5.5vw, 5.9rem);
  line-height: 0.94;
  font-weight: 930;
  text-wrap: balance;
}

.overview-copy p:not(.section-kicker) {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  line-height: 1.65;
}

.hub-card {
  position: relative;
  min-height: 230px;
  display: grid;
  gap: 9px;
  align-content: space-between;
  padding: 0 0 clamp(24px, 3vw, 34px);
  overflow: visible;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.hub-card::before {
  content: none;
}

.hub-card:hover,
.hub-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.56);
  background: transparent;
}

.hub-card > * {
  position: relative;
  z-index: 1;
}

.hub-card span,
.detail-card span,
.emergency-band span {
  color: rgba(246, 246, 243, 0.64);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-card strong {
  color: #f7f7f3;
  font-size: clamp(1.55rem, 2.5vw, 3rem);
  line-height: 0.96;
  font-weight: 940;
}

.hub-card small {
  max-width: 48ch;
  color: rgba(246, 246, 243, 0.58);
  font-size: clamp(0.94rem, 1vw, 1.08rem);
  line-height: 1.5;
}

.hub-card.is-featured {
  min-height: 230px;
}

.hub-card.is-urgent {
  border-color: rgba(255, 255, 255, 0.36);
}

.emergency-band {
  width: min(var(--max), calc(100% - clamp(36px, 8vw, 76px)));
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.12), transparent 55%),
    rgba(8, 8, 8, 0.82);
}

.emergency-band h2 {
  margin: 8px 0 10px;
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 5.2rem);
  line-height: 1.08;
  font-weight: 930;
  text-wrap: balance;
}

.emergency-band p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

.detail-hero {
  min-height: 78svh;
  display: grid;
  align-items: end;
  padding: clamp(116px, 15vh, 170px) clamp(22px, 6vw, 82px) clamp(44px, 8vh, 92px);
}

.detail-hero-inner {
  position: relative;
  z-index: 2;
  width: min(980px, 100%);
  margin-left: clamp(40px, 6vw, 74px);
}

.detail-main {
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: clamp(76px, 9vw, 124px) clamp(18px, 4vw, 34px);
}

.detail-section {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 6vw, 72px);
  padding: clamp(40px, 7vw, 82px) 0;
  border-top: 1px solid var(--line);
}

.detail-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.detail-section h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.3rem, 5.8vw, 6.2rem);
  line-height: 0.9;
  font-weight: 920;
}

.detail-copy {
  display: grid;
  gap: 18px;
  color: var(--muted);
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  line-height: 1.68;
}

.detail-copy p,
.detail-copy ul {
  margin: 0;
}

.detail-copy ul {
  display: grid;
  gap: 10px;
  padding-left: 1.05em;
}

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

.detail-card {
  min-height: 190px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 54%),
    color-mix(in srgb, var(--surface) 78%, transparent);
}

.detail-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.1vw, 2.4rem);
  line-height: 1;
}

.detail-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.detail-page .contact {
  min-height: auto;
}

@media (max-width: 1080px) {
  .service-overview {
    grid-template-columns: 1fr;
  }

  .overview-copy {
    position: static;
  }
}

@media (max-width: 760px) {
  .hub-rail {
    display: none;
  }

  .hub-shell {
    padding: 112px 18px 32px;
  }

  .hub-intro h1,
  .detail-hero h1 {
    font-size: clamp(3.8rem, 18vw, 5.8rem);
  }

  .overview-link-grid,
  .detail-section,
  .detail-grid,
  .emergency-band {
    grid-template-columns: 1fr;
  }

  .hub-card:hover,
  .hub-card:focus-visible {
    transform: translateY(-3px);
  }

  .detail-hero-inner {
    margin-left: 0;
  }
}

html[data-theme="light"] .intro-steps span {
  color: rgba(8, 8, 8, 0.34);
}

html[data-theme="light"] .intro-steps span.is-active {
  color: rgba(8, 8, 8, 0.82);
}

@keyframes introFacetIn {
  to { opacity: 1; transform: scale(1) rotate(0.001deg); }
}

@keyframes introDotsIn {
  to { opacity: 1; }
}

@keyframes introCrossIn {
  to { opacity: 1; transform: scaleX(1); }
}

/* === Final monochrome Digeasy art direction === */
:root,
html[data-theme="dark"] {
  --accent: #f4f4f4;
  --accent-soft: #a8a8a8;
  --accent-hover: #ffffff;
  --accent-ink: #050505;
  --accent-ink-muted: rgba(5, 5, 5, 0.72);
  --faint: rgba(255, 255, 255, 0.08);
  --control-panel: rgba(255, 255, 255, 0.1);
  --rust: #777777;
}

html[data-theme="light"] {
  --accent: #111111;
  --accent-soft: #555555;
  --accent-hover: #000000;
  --accent-ink: #ffffff;
  --accent-ink-muted: rgba(255, 255, 255, 0.78);
  --faint: rgba(0, 0, 0, 0.07);
  --control-panel: rgba(0, 0, 0, 0.08);
  --rust: #777777;
}

.hero-link-hub {
  background:
    radial-gradient(ellipse at 49% 50%, rgba(255, 255, 255, 0.11), transparent 31%),
    linear-gradient(115deg, #030303 0%, #111111 48%, #020202 100%);
}

.hero-link-hub::before {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.095) 1px, transparent 1.5px),
    linear-gradient(118deg, transparent 0 36%, rgba(255, 255, 255, 0.055) 36.2% 58%, transparent 58.2%),
    linear-gradient(32deg, transparent 0 52%, rgba(255, 255, 255, 0.08) 52.2% 77%, transparent 77.2%);
  background-size: 32px 32px, 100% 100%, 100% 100%;
}

.hero-link-hub::after {
  content: "D";
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: -1;
  transform: translate(-50%, -50%) scaleX(0.9);
  color: transparent;
  -webkit-text-stroke: clamp(2px, 0.42vw, 7px) rgba(255, 255, 255, 0.075);
  font-size: clamp(28rem, 58vw, 54rem);
  line-height: 0.72;
  font-weight: 950;
  letter-spacing: 0;
  opacity: 0.88;
  pointer-events: none;
  text-shadow:
    0 0 80px rgba(255, 255, 255, 0.08),
    0 0 180px rgba(255, 255, 255, 0.04);
}

.hub-background {
  background:
    radial-gradient(ellipse at 47% 51%, rgba(255, 255, 255, 0.2), transparent 19%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.08), transparent 31%),
    repeating-radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.16) 0 1px, transparent 2px 22px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.76), transparent 48%, rgba(0, 0, 0, 0.3));
  background-size: auto, auto, 100% 100%, auto;
  filter: saturate(0) contrast(1.06) brightness(0.86);
  opacity: 0.78;
}

.hub-intro {
  position: relative;
}

.hub-intro::before {
  content: "DIGEASY.IO";
  position: absolute;
  left: 2px;
  bottom: -54px;
  color: rgba(255, 255, 255, 0.18);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.hub-intro .eyebrow,
.hero-link-hub .eyebrow,
.section-kicker,
.detail-card span,
.hub-card span,
.emergency-band span {
  color: rgba(246, 246, 243, 0.62) !important;
}

.button.primary,
.menu-cta {
  background: #f4f4f4 !important;
  border-color: #f4f4f4 !important;
  color: #050505 !important;
}

.button.primary:hover,
.button.primary:focus-visible,
.menu-cta:hover,
.menu-cta:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

.button:not(.primary) {
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: rgba(246, 246, 243, 0.82);
  background: rgba(0, 0, 0, 0.04);
}

.button:not(.primary):hover,
.button:not(.primary):focus-visible {
  border-color: rgba(255, 255, 255, 0.48) !important;
  background: rgba(255, 255, 255, 0.08);
}

.control-bar,
.menu-toggle,
.theme-toggle,
.scroll-percent,
.language-control select,
.hub-rail,
.software-screen,
.software-tabbar,
.detail-card,
.emergency-band,
.tabs,
.tab,
.tab-panel {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.menu-overlay::before,
.menu-overlay::after,
.story-axis,
.story-system,
.story-scan,
.fx-orb {
  filter: saturate(0) !important;
}

.software-window-bar span:nth-child(3),
.software-card li b {
  background: #f4f4f4 !important;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="light"] .hero-link-hub {
  background:
    radial-gradient(ellipse at 49% 50%, rgba(0, 0, 0, 0.1), transparent 31%),
    linear-gradient(115deg, #f0f0f0 0%, #d8d8d8 48%, #f8f8f8 100%);
}

html[data-theme="light"] .hero-link-hub::after {
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.11);
  text-shadow: 0 0 120px rgba(0, 0, 0, 0.08);
}

html[data-theme="light"] .hub-background {
  background:
    radial-gradient(ellipse at 47% 51%, rgba(0, 0, 0, 0.14), transparent 19%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.07), transparent 31%),
    repeating-radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.13) 0 1px, transparent 2px 22px),
    linear-gradient(90deg, rgba(245, 245, 245, 0.76), transparent 48%, rgba(245, 245, 245, 0.3));
}

html[data-theme="light"] .hub-intro .eyebrow,
html[data-theme="light"] .hero-link-hub .eyebrow,
html[data-theme="light"] .section-kicker,
html[data-theme="light"] .detail-card span,
html[data-theme="light"] .hub-card span,
html[data-theme="light"] .emergency-band span {
  color: rgba(8, 8, 8, 0.62) !important;
}

html[data-theme="light"] .button:not(.primary) {
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: rgba(8, 8, 8, 0.78);
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 760px) {
  .hero-link-hub::after {
    left: 54%;
    top: 48%;
    font-size: clamp(18rem, 92vw, 26rem);
  }

  .hub-intro::before {
    bottom: -38px;
  }
}

/* Prevent the oversized homepage wordmark from colliding with the claim. */
.hub-intro h1 {
  display: block;
  margin-bottom: clamp(26px, 3.4vw, 52px) !important;
  font-size: clamp(5rem, 12.4vw, 12.2rem) !important;
  line-height: 0.92 !important;
}

.hub-intro p:not(.eyebrow) {
  display: block;
  margin: 0;
  max-width: 680px;
  line-height: 1.34;
}

.hub-intro .hero-actions {
  margin-top: clamp(26px, 3.8vw, 42px);
  justify-content: flex-start;
}

@media (max-width: 760px) {
  .hub-intro h1 {
    margin-bottom: 24px !important;
    font-size: clamp(3.65rem, 17vw, 5.25rem) !important;
    line-height: 0.98 !important;
  }

  .hub-intro p:not(.eyebrow) {
    font-size: clamp(1rem, 5vw, 1.28rem);
    line-height: 1.38;
  }
}

@keyframes introScan {
  0% { opacity: 0; transform: translateX(-120%) skewX(-18deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%) skewX(-18deg); }
}

@keyframes introSoftIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes introLetterIn {
  72% { opacity: 1; filter: blur(0); transform: translate3d(0, -0.035em, 0) scale(1.035); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes introGlyphWarp {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(1) skewX(0deg); filter: blur(0); }
  34% { transform: translate3d(-0.01em, 0, 0) scaleX(0.94) skewX(-3deg); filter: blur(0.25px); }
  68% { transform: translate3d(0.012em, -0.004em, 0) scaleX(1.04) skewX(3deg); filter: blur(0); }
}

/* === Short WWW-style landing-to-reading flow === */
.hero-link-hub {
  min-height: min(94svh, 840px);
  overflow: clip;
}

.hub-shell {
  min-height: min(94svh, 840px);
  align-items: center;
  padding-top: clamp(96px, 11vh, 132px);
  padding-bottom: clamp(46px, 7vh, 76px);
}

.hub-background::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(90px, 16vh, 150px);
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #050505 78%);
}

.hero-continue {
  width: fit-content;
  margin-top: clamp(30px, 4vh, 46px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(246, 246, 243, 0.58);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.hero-continue::after {
  content: "";
  width: clamp(42px, 6vw, 86px);
  height: 1px;
  background: rgba(246, 246, 243, 0.28);
  transform-origin: left center;
  transition: transform 180ms ease, background 180ms ease;
}

.hero-continue:hover,
.hero-continue:focus-visible {
  color: rgba(246, 246, 243, 0.88);
}

.hero-continue:hover::after,
.hero-continue:focus-visible::after {
  transform: scaleX(1.18);
  background: rgba(246, 246, 243, 0.54);
}

.service-overview {
  position: relative;
  width: min(1240px, calc(100% - clamp(36px, 8vw, 112px)));
  max-width: none;
  margin: 0 auto;
  padding: clamp(58px, 8vw, 92px) 0 clamp(88px, 10vw, 132px);
  grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.12fr);
  gap: clamp(42px, 8vw, 112px);
  border-top: 0;
  background:
    radial-gradient(920px circle at 78% 16%, rgba(255, 255, 255, 0.055), transparent 56%),
    linear-gradient(180deg, #050505 0%, #080808 54%, #050505 100%);
  color: #f6f6f3;
  isolation: isolate;
}

.service-overview::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -2;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.045), transparent 38%),
    linear-gradient(180deg, #050505, #080808 58%, #050505);
}

.service-overview::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(246, 246, 243, 0.42), rgba(246, 246, 243, 0.12) 46%, transparent);
}

.overview-copy {
  top: clamp(84px, 12vh, 132px);
  gap: clamp(18px, 2.4vw, 28px);
  align-self: start;
}

.overview-copy h2 {
  max-width: 10.8ch;
  color: #f6f6f3;
  font-size: clamp(2.85rem, 5.1vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.overview-copy p:not(.section-kicker) {
  max-width: 45ch;
  color: rgba(246, 246, 243, 0.62);
  font-size: clamp(1rem, 1.18vw, 1.13rem);
  line-height: 1.62;
  font-weight: 620;
}

.overview-link-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: clamp(34px, 5vw, 58px) clamp(34px, 5.5vw, 78px);
}

.hub-card {
  min-height: clamp(152px, 16vw, 190px);
  padding: clamp(18px, 2vw, 24px) 0 clamp(18px, 2.4vw, 30px);
  gap: clamp(12px, 1.4vw, 18px);
  align-content: start;
  border-top-color: rgba(246, 246, 243, 0.24);
}

.hub-card span {
  color: rgba(246, 246, 243, 0.54) !important;
}

.hub-card strong {
  max-width: 9.6ch;
  color: #f6f6f3;
  font-size: clamp(1.72rem, 3vw, 3.05rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.hub-card small {
  max-width: 31ch;
  color: rgba(246, 246, 243, 0.56);
  font-size: clamp(0.96rem, 1.08vw, 1.08rem);
  line-height: 1.52;
  font-weight: 620;
}

.hub-card:hover,
.hub-card:focus-visible {
  border-color: rgba(246, 246, 243, 0.62);
  transform: translateY(-4px);
}

@media (max-width: 1080px) {
  .service-overview {
    width: min(760px, calc(100% - 36px));
    grid-template-columns: 1fr;
    gap: clamp(36px, 7vw, 56px);
  }

  .overview-copy {
    position: static;
  }

  .overview-copy h2 {
    max-width: 12ch;
  }
}

@media (max-width: 760px) {
  .hero-link-hub,
  .hub-shell {
    min-height: 88svh;
  }

  .hub-shell {
    padding-top: 104px;
    padding-bottom: 42px;
  }

  .hero-continue {
    margin-top: 28px;
  }

  .service-overview {
    width: calc(100% - 36px);
    padding-top: 46px;
    padding-bottom: 78px;
  }

  .overview-copy h2 {
    font-size: clamp(2.6rem, 14vw, 4.7rem);
  }

  .overview-link-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hub-card {
    min-height: auto;
  }

  .hub-card strong {
    max-width: 12ch;
  }
}

@keyframes introLetterLock {
  0% { opacity: 1; filter: blur(4px); transform: translate3d(0, 0, 0) scale(1.08); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes introLockupOut {
  to { opacity: 0; filter: blur(10px); transform: translate3d(0, -4svh, 0) scale(1.08); }
}

@keyframes introFacetOut {
  to { opacity: 0; transform: scale(1.12) rotate(0.001deg); }
}

@media (max-width: 660px) {
  .intro-lockup {
    width: min(100%, calc(100vw - 28px));
    padding: 24px 10px;
  }

  .intro-kicker {
    max-width: 25ch;
    line-height: 1.45;
    letter-spacing: 0.11em;
  }

  .intro-word {
    gap: 0.08em;
    font-size: clamp(3.6rem, 17vw, 5.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-loader {
    display: none;
  }
}

/* === WWW-inspired first viewport landing pass === */
.hero-link-hub {
  min-height: 100svh;
  background: #000;
  color: #fff;
}

.hero-link-hub::before {
  z-index: -5;
  background:
    radial-gradient(ellipse at 50% 43%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 30%),
    #000;
  opacity: 1;
}

.hero-link-hub::after {
  content: "";
  inset: 0;
  left: auto;
  top: auto;
  z-index: -2;
  transform: none;
  width: 100%;
  height: 100%;
  opacity: 0.78;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 38% 50%, rgba(255, 255, 255, 0.18), transparent 18%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.9), transparent 26%, transparent 74%, rgba(0, 0, 0, 0.86)),
    repeating-linear-gradient(104deg,
      transparent 0 8.5vw,
      rgba(255, 255, 255, 0.06) 8.8vw 9.1vw,
      rgba(255, 255, 255, 0.22) 9.25vw 9.55vw,
      rgba(255, 255, 255, 0.05) 9.72vw 10.05vw,
      transparent 10.35vw 15.8vw);
  filter: blur(0.2px) contrast(1.18);
  mix-blend-mode: screen;
}

.hub-background {
  z-index: -4;
  opacity: 1;
  filter: saturate(0) contrast(1.18) brightness(0.7);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.78), transparent 31%, transparent 70%, rgba(0, 0, 0, 0.82)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.72)),
    var(--map-image);
  background-size: auto, auto, cover;
  background-position: center;
}

.hub-background::before {
  content: "";
  position: absolute;
  inset: -10% -4%;
  z-index: 1;
  background:
    radial-gradient(ellipse at 12% 42%, rgba(255, 255, 255, 0.16), transparent 23%),
    radial-gradient(ellipse at 64% 34%, rgba(255, 255, 255, 0.18), transparent 21%),
    repeating-linear-gradient(100deg,
      rgba(255, 255, 255, 0.02) 0 5.2vw,
      rgba(255, 255, 255, 0.16) 5.7vw 6vw,
      rgba(255, 255, 255, 0.02) 6.25vw 8.7vw,
      rgba(0, 0, 0, 0.76) 9vw 12.6vw);
  opacity: 0.72;
  transform: skewX(-7deg) translateX(-2vw);
}

.hub-background::after {
  height: 34svh;
  background: linear-gradient(180deg, transparent, #000 82%);
}

.landing-mark,
.landing-meta {
  position: absolute;
  z-index: 4;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 10px 32px rgba(0, 0, 0, 0.74);
}

.landing-mark {
  left: clamp(22px, 6vw, 96px);
  top: clamp(18px, 4.8vh, 42px);
  font-size: clamp(1.35rem, 3.1vw, 2.9rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
}

.landing-meta {
  right: clamp(110px, 15vw, 250px);
  top: clamp(29px, 5.2vh, 48px);
  display: flex;
  gap: clamp(18px, 2.6vw, 38px);
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.hero-link-hub .hub-rail {
  left: 50%;
  top: auto;
  bottom: clamp(92px, 14vh, 135px);
  width: 22px;
  height: 38px;
  transform: translateX(-50%);
  border-width: 3px;
  border-color: rgba(255, 255, 255, 0.9) !important;
  background: transparent;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}

.hero-link-hub .hub-rail span {
  top: 7px;
  width: 4px;
  background: #fff;
  border: 0;
  animation: landingScrollDot 1.8s ease-in-out infinite;
}

.hero-link-hub .hub-shell {
  width: min(1280px, 100%);
  min-height: 100svh;
  place-items: center;
  padding: clamp(104px, 12vh, 132px) clamp(18px, 6vw, 70px) clamp(86px, 11vh, 132px);
}

.hero-link-hub .hub-intro {
  max-width: min(900px, 100%);
  display: grid;
  justify-items: center;
  text-align: center;
  text-shadow: 0 7px 34px rgba(0, 0, 0, 0.92);
}

.hero-link-hub .hub-intro::before,
.hero-link-hub .hero-actions {
  display: none;
}

.hero-link-hub .eyebrow {
  margin-bottom: clamp(24px, 3.5vh, 36px);
  color: rgba(255, 255, 255, 0.78) !important;
  letter-spacing: 0.2em;
}

.hero-link-hub .hub-intro h1 {
  max-width: 12ch;
  margin: 0 0 clamp(20px, 3vh, 30px) !important;
  color: #fff;
  font-size: clamp(4.1rem, 9.4vw, 9.6rem) !important;
  line-height: 0.9 !important;
  font-weight: 820;
  letter-spacing: 0 !important;
  text-transform: lowercase;
  text-wrap: balance;
}

.hero-link-hub .hub-intro p:not(.eyebrow) {
  max-width: 670px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(1.08rem, 1.9vw, 1.58rem);
  line-height: 1.46;
  font-weight: 640;
  text-wrap: balance;
}

.hero-link-hub .hero-continue {
  position: absolute;
  left: 50%;
  bottom: clamp(34px, 5.8vh, 62px);
  margin: 0;
  transform: translateX(-50%);
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
}

html[data-theme="light"] .hero-link-hub,
html[data-theme="light"] .hero-link-hub::before {
  background: #000;
}

html[data-theme="light"] .hero-link-hub::after,
html[data-theme="light"] .hub-background,
html[data-theme="light"] .hub-background::before {
  filter: saturate(0) contrast(1.18) brightness(0.72);
}

@keyframes landingScrollDot {
  0%, 100% { opacity: 0.42; transform: translate(-50%, 0); }
  42% { opacity: 1; transform: translate(-50%, 12px); }
}

@media (max-width: 900px) {
  .landing-meta {
    display: none;
  }

  .landing-mark {
    left: 22px;
  }
}

@media (max-width: 760px) {
  .hero-link-hub,
  .hero-link-hub .hub-shell {
    min-height: 100svh;
  }

  .hero-link-hub .hub-shell {
    padding: 112px 18px 104px;
  }

  .hero-link-hub .hub-intro h1 {
    font-size: clamp(3.15rem, 16vw, 5.2rem) !important;
    line-height: 0.94 !important;
  }

  .hero-link-hub .hub-intro p:not(.eyebrow) {
    max-width: 23rem;
    font-size: clamp(1rem, 4.7vw, 1.18rem);
  }

  .hero-link-hub::after {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.9), transparent 34%, transparent 66%, rgba(0, 0, 0, 0.88)),
      repeating-linear-gradient(104deg,
        transparent 0 18vw,
        rgba(255, 255, 255, 0.16) 19vw 20vw,
        rgba(255, 255, 255, 0.04) 20.6vw 22vw,
        transparent 23vw 36vw);
  }
}

/* Monochrome story-step detail pass: open layout, no cards. */
.map-step-inner,
.map-step:nth-of-type(2) .map-step-inner,
.map-step:nth-of-type(3) .map-step-inner,
.map-story .map-step:last-of-type .map-step-inner {
  --step-rail: rgba(245, 245, 245, 0.7);
  --step-rail-soft: rgba(245, 245, 245, 0.16);
  --step-ink: #f4f4f4;
  --step-muted: rgba(244, 244, 244, 0.76);
  --step-faint: rgba(244, 244, 244, 0.13);
  left: clamp(30px, 7.2vw, 116px) !important;
  right: auto !important;
  width: min(720px, calc(100vw - 128px)) !important;
  padding: clamp(22px, 3.8vh, 40px) 0 clamp(22px, 3.8vh, 40px) clamp(42px, 5.4vw, 72px) !important;
  border: 0 !important;
  border-left: 1px solid var(--step-rail-soft) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  overflow: visible !important;
}

.map-step:nth-of-type(2) .map-step-inner {
  left: auto !important;
  right: clamp(30px, 7.2vw, 116px) !important;
}

.map-step-inner::before,
.map-step:nth-of-type(2) .map-step-inner::before,
.map-step:nth-of-type(3) .map-step-inner::before,
.map-story .map-step:last-of-type .map-step-inner::before {
  content: "" !important;
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--step-rail) 18%, var(--step-rail) 82%, transparent);
  box-shadow: 0 0 28px var(--step-faint);
  opacity: calc(0.58 + (var(--text-progress, 0) * 0.36));
}

.map-step-inner::after,
.map-step:nth-of-type(2) .map-step-inner::after,
.map-step:nth-of-type(3) .map-step-inner::after,
.map-story .map-step:last-of-type .map-step-inner::after {
  content: "" !important;
  position: absolute;
  left: -5px;
  top: clamp(26px, 4vh, 42px);
  width: 9px;
  height: 9px;
  border: 1px solid var(--step-rail);
  background: var(--dark);
  transform: rotate(45deg) scale(calc(0.78 + (var(--text-progress, 0) * 0.22)));
  box-shadow: 0 0 0 8px rgba(245, 245, 245, 0.045), 0 0 24px rgba(245, 245, 245, 0.12);
  opacity: calc(0.66 + (var(--text-progress, 0) * 0.28));
}

.map-step-inner > span {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(244, 244, 244, 0.66) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.68rem, 0.86vw, 0.82rem) !important;
  font-weight: 780 !important;
  letter-spacing: 0.18em !important;
}

.map-step-inner > span::after {
  content: "";
  display: inline-block;
  width: clamp(46px, 7vw, 92px);
  height: 1px;
  margin-left: 16px;
  background: linear-gradient(90deg, rgba(244, 244, 244, 0.48), transparent);
  vertical-align: 0.32em;
}

.map-step-inner h3 {
  max-width: 10.8ch;
  color: var(--step-ink) !important;
  font-size: clamp(4.1rem, 7.6vw, 6.6rem) !important;
  line-height: 0.86 !important;
  font-weight: 820 !important;
  letter-spacing: -0.035em;
  text-shadow: 0 18px 54px rgba(0, 0, 0, 0.44) !important;
}

.map-step-inner p {
  max-width: 31ch;
  color: rgba(244, 244, 244, calc(0.7 + (var(--text-progress, 0) * 0.25))) !important;
  font-size: clamp(1.26rem, 2vw, 1.68rem) !important;
  line-height: 1.18 !important;
  font-weight: 620 !important;
  letter-spacing: -0.012em;
  text-shadow: 0 12px 36px rgba(0, 0, 0, 0.32) !important;
}

.map-step-inner h3 .story-char,
.map-step-inner p .story-char {
  filter: none !important;
  transform: none !important;
}

.map-step-inner h3 .story-char {
  opacity: 1 !important;
}

.map-step-inner p .story-char {
  opacity: calc(0.68 + (var(--text-progress, 0) * 0.32)) !important;
}

.map-step-inner h3::after {
  content: "";
  display: block;
  width: min(220px, 42vw);
  height: 1px;
  margin-top: clamp(18px, 2.6vh, 26px);
  background: linear-gradient(90deg, rgba(244, 244, 244, 0.34), rgba(244, 244, 244, 0.08), transparent);
}

html[data-theme="light"] .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner,
html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner {
  --step-rail: rgba(15, 15, 15, 0.62);
  --step-rail-soft: rgba(15, 15, 15, 0.16);
  --step-ink: #111111;
  --step-muted: rgba(17, 17, 17, 0.74);
  --step-faint: rgba(17, 17, 17, 0.1);
  color: #111111 !important;
  border: 0 !important;
  border-left: 1px solid var(--step-rail-soft) !important;
  text-shadow: none !important;
}

html[data-theme="light"] .map-step-inner::before,
html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner::before,
html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner::before,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner::before {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, transparent, var(--step-rail) 18%, var(--step-rail) 82%, transparent) !important;
  box-shadow: 0 0 24px var(--step-faint) !important;
}

html[data-theme="light"] .map-step-inner::after,
html[data-theme="light"] .map-step:nth-of-type(2) .map-step-inner::after,
html[data-theme="light"] .map-step:nth-of-type(3) .map-step-inner::after,
html[data-theme="light"] .map-story .map-step:last-of-type .map-step-inner::after {
  border-radius: 0 !important;
  background: var(--dark) !important;
  box-shadow: 0 0 0 7px rgba(17, 17, 17, 0.035), 0 0 22px rgba(17, 17, 17, 0.1) !important;
}

html[data-theme="light"] .map-step-inner > span {
  color: rgba(17, 17, 17, 0.62) !important;
}

html[data-theme="light"] .map-step-inner > span::after,
html[data-theme="light"] .map-step-inner h3::after {
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.32), rgba(17, 17, 17, 0.08), transparent);
}

html[data-theme="light"] .map-step-inner h3 {
  color: #111111 !important;
  text-shadow: 0 18px 48px rgba(17, 17, 17, 0.12) !important;
}

html[data-theme="light"] .map-step-inner p,
html[data-theme="light"] .map-step.is-active p {
  color: rgba(17, 17, 17, calc(0.68 + (var(--text-progress, 0) * 0.24))) !important;
  text-shadow: 0 14px 36px rgba(255, 255, 255, 0.5) !important;
}

@media (max-width: 660px) {
  .map-step-inner,
  .map-step:nth-of-type(2) .map-step-inner,
  .map-step:nth-of-type(3) .map-step-inner,
  .map-story .map-step:last-of-type .map-step-inner {
    left: 22px !important;
    right: 18px !important;
    width: auto !important;
    padding: 72px 0 36px 28px !important;
  }

  .map-step:nth-of-type(2) .map-step-inner {
    left: 22px !important;
    right: 18px !important;
  }

  .map-step-inner h3 {
    font-size: clamp(3.25rem, 15vw, 5rem) !important;
    line-height: 0.88 !important;
  }

  .map-step-inner p {
    max-width: 15ch;
    font-size: clamp(1.48rem, 7.2vw, 2.42rem) !important;
    line-height: 1.02 !important;
  }
}

/* Consulting slider detail pass: open monochrome system, no cards. */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  --accent: #f4f4f4;
  --accent-soft: #a8a8a8;
  --accent-hover: #d7d7d7;
  --accent-ink: #060606;
}

html[data-theme="light"] {
  --ink: #111111;
  --muted: rgba(17, 17, 17, 0.64);
  --line: rgba(17, 17, 17, 0.14);
  --surface: rgba(255, 255, 255, 0);
  --control-bg: rgba(18, 18, 18, 0.82);
  --control-ink: #f4f4f4;
  --dark: #f5f5f7;
  --paper: #f5f5f7;
}

html[data-theme="dark"] {
  --ink: #f4f4f4;
  --muted: rgba(244, 244, 244, 0.64);
  --line: rgba(244, 244, 244, 0.14);
  --surface: rgba(255, 255, 255, 0);
}

.section.intro#beratung {
  position: relative;
  max-width: min(1260px, calc(100vw - 40px));
  padding-top: clamp(34px, 5vw, 64px);
  padding-bottom: clamp(58px, 7vw, 92px);
  isolation: isolate;
  overflow: clip;
}

.section.intro#beratung::before {
  content: "";
  position: absolute;
  inset: clamp(28px, 4vw, 48px) 0 auto;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 28%, transparent) 18%, color-mix(in srgb, var(--ink) 8%, transparent) 66%, transparent);
}

.section.intro#beratung .section-kicker {
  position: relative;
  width: fit-content;
  margin-bottom: clamp(26px, 4vw, 42px);
  color: color-mix(in srgb, var(--ink) 78%, transparent) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.68rem, 0.76vw, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-shadow: none !important;
}

.section.intro#beratung .section-kicker::after {
  content: "";
  position: absolute;
  left: 0;
  right: -84px;
  bottom: -12px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 42%, transparent), transparent);
}

.section.intro#beratung .intro-grid {
  position: relative;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.72fr);
  gap: clamp(44px, 9vw, 118px);
  align-items: start;
  margin-bottom: clamp(0px, 1.1vw, 12px);
}

.section.intro#beratung .intro-grid::after {
  content: "";
  position: absolute;
  left: calc(55% + clamp(18px, 3vw, 36px));
  top: 2px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 18%, transparent), transparent);
}

.section.intro#beratung h2 {
  max-width: 12.8ch;
  color: var(--ink);
  font-size: clamp(2.72rem, 4.62vw, 5.08rem);
  line-height: 0.93;
  font-weight: 850;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.section.intro#beratung .intro-grid p {
  max-width: 43ch;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.22vw, 1.18rem);
  line-height: 1.58;
  font-weight: 560;
}

.section.intro#beratung .card-slider {
  margin-top: 0;
  padding: 0 0 clamp(12px, 1.8vw, 22px);
  overflow: hidden !important;
  contain: layout paint;
  perspective: none;
}

.section.intro#beratung .card-slider::before,
.section.intro#beratung .card-slider::after {
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  width: auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 30%, transparent), transparent) !important;
}

.section.intro#beratung .card-slider::before {
  top: clamp(6px, 1.2vw, 14px);
  bottom: auto;
}

.section.intro#beratung .card-slider::after {
  top: clamp(232px, 20vw, 286px);
  bottom: auto;
  opacity: 0.32;
}

.section.intro#beratung .card-slider-stage,
.section.intro#beratung .card-slider.is-enhanced .card-slider-stage {
  height: clamp(244px, 21vw, 294px);
  overflow: visible;
}

.section.intro#beratung .card-slider-track,
.section.intro#beratung .card-slider.is-enhanced .card-slider-track {
  overflow: visible;
}

.section.intro#beratung .slider-card,
.section.intro#beratung .card-slider.is-enhanced .slider-card {
  width: clamp(246px, 22vw, 318px);
  min-height: clamp(204px, 18vw, 248px);
  padding: clamp(20px, 2.5vw, 30px) clamp(16px, 2vw, 24px) 0 0 !important;
  display: grid;
  align-content: start;
  gap: clamp(18px, 2vw, 26px);
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0.68;
  filter: none !important;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), color 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section.intro#beratung .slider-card::before {
  content: "" !important;
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: clamp(52px, 6vw, 88px);
  border-radius: 0 !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 42%, transparent), transparent) !important;
  box-shadow: none !important;
  opacity: 0.62 !important;
  transition: height 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), background 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section.intro#beratung .slider-card::after {
  content: "" !important;
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 9px;
  border: 1px solid color-mix(in srgb, var(--ink) 54%, transparent);
  background: var(--dark);
  transform: rotate(45deg) scale(0.72);
  opacity: 0.42;
  transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), background 560ms cubic-bezier(0.22, 1, 0.36, 1), border-color 560ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section.intro#beratung .card-slider.is-enhanced .slider-card.is-active {
  opacity: 1;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.section.intro#beratung .card-slider.is-enhanced .slider-card.is-active::before {
  height: clamp(86px, 9vw, 126px);
  background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 16%, transparent), transparent) !important;
  opacity: 0.92 !important;
}

.section.intro#beratung .card-slider.is-enhanced .slider-card.is-active::after {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--ink) 5%, transparent), 0 0 26px color-mix(in srgb, var(--ink) 13%, transparent);
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.section.intro#beratung .slider-card > * {
  position: relative;
  z-index: 1;
  margin-left: clamp(22px, 2.8vw, 36px);
}

.section.intro#beratung .slider-card span {
  color: color-mix(in srgb, var(--ink) 46%, transparent) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.68rem, 0.78vw, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.16em !important;
  transition: color 520ms cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section.intro#beratung .slider-card h3 {
  max-width: 12.5ch;
  margin: 0;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  font-size: clamp(1.58rem, 2.18vw, 2.32rem);
  line-height: 0.98;
  font-weight: 840;
  letter-spacing: -0.038em;
  text-wrap: balance;
  transition: color 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section.intro#beratung .slider-card p {
  max-width: 24ch;
  color: color-mix(in srgb, var(--ink) 66%, transparent) !important;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.5;
  font-weight: 560;
}

.section.intro#beratung .slider-card.is-active span {
  color: color-mix(in srgb, var(--ink) 74%, transparent) !important;
  letter-spacing: 0.24em !important;
}

.section.intro#beratung .slider-card.is-active h3 {
  color: var(--ink);
}

.section.intro#beratung .slider-card.is-active p {
  color: color-mix(in srgb, var(--ink) 68%, transparent) !important;
}

.section.intro#beratung .card-slider-controls {
  border-color: color-mix(in srgb, var(--ink) 14%, transparent) !important;
  background: color-mix(in srgb, var(--control-bg) 82%, transparent) !important;
  color: var(--control-ink) !important;
  box-shadow: 0 18px 52px color-mix(in srgb, #000 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.section.intro#beratung .slider-nav {
  background: rgba(255, 255, 255, 0.08);
}

.section.intro#beratung .slider-nav:hover,
.section.intro#beratung .slider-nav:focus-visible {
  background: #f4f4f4;
  color: #080808;
  box-shadow: none;
}

.section.intro#beratung .slider-count {
  color: color-mix(in srgb, var(--control-ink) 82%, transparent);
}

html[data-theme="light"] .section.intro#beratung .card-slider-controls {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(18, 18, 18, 0.78) !important;
}

html[data-theme="light"] .section.intro#beratung .slider-card::after {
  background: #f5f5f7;
}

html[data-theme="light"] .section.intro#beratung .slider-card.is-active::after {
  background: #111111;
}

@media (max-width: 760px) {
  .section.intro#beratung .intro-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .section.intro#beratung .intro-grid::after {
    display: none;
  }
}

@media (max-width: 660px) {
  .section.intro#beratung {
    max-width: calc(100vw - 28px);
    padding-top: 48px;
  }

  .section.intro#beratung h2 {
    font-size: clamp(2.35rem, 11vw, 3.85rem);
  }

  .section.intro#beratung .card-slider-stage,
  .section.intro#beratung .card-slider.is-enhanced .card-slider-stage {
    height: 306px;
  }

  .section.intro#beratung .slider-card,
  .section.intro#beratung .card-slider.is-enhanced .slider-card {
    width: min(76vw, 292px);
  }

  .section.intro#beratung .card-slider::after {
    top: 286px;
  }
}

/* Whole-site darkmode alignment: open monochrome layouts across remaining sections. */
html[data-theme="dark"] {
  --ink: #f4f4f4;
  --muted: rgba(244, 244, 244, 0.66);
  --faint: rgba(244, 244, 244, 0.08);
  --paper: #070707;
  --dark: #070707;
  --panel: transparent;
  --line: rgba(244, 244, 244, 0.13);
  --surface: transparent;
  --control-bg: rgba(10, 10, 10, 0.82);
  --control-ink: #f4f4f4;
  --control-panel: rgba(255, 255, 255, 0.08);
  --header-mark: #f4f4f4;
  --contact-bg: #050505;
  --contact-ink: #f4f4f4;
  --contact-muted: rgba(244, 244, 244, 0.64);
  --accent: #f4f4f4;
  --accent-soft: #a8a8a8;
  --accent-hover: #ffffff;
  --accent-ink: #060606;
  --accent-ink-muted: rgba(6, 6, 6, 0.68);
  --rust: #777777;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.045), transparent 34rem),
    linear-gradient(180deg, #080808 0%, #050505 100%);
  color: var(--ink);
}

html[data-theme="dark"] .section,
html[data-theme="dark"] .split-section,
html[data-theme="dark"] .statement,
html[data-theme="dark"] .contact {
  color: var(--ink);
  background: transparent !important;
}

html[data-theme="dark"] .section:not(#beratung),
html[data-theme="dark"] .split-section,
html[data-theme="dark"] .statement,
html[data-theme="dark"] .contact {
  position: relative;
  border-color: rgba(244, 244, 244, 0.1) !important;
}

html[data-theme="dark"] .section:not(#beratung)::before,
html[data-theme="dark"] .split-section::before,
html[data-theme="dark"] .statement::before,
html[data-theme="dark"] .contact::before {
  content: "";
  position: absolute;
  left: clamp(18px, 5vw, 64px);
  right: clamp(18px, 5vw, 64px);
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244, 244, 244, 0.22), rgba(244, 244, 244, 0.06), transparent);
}

html[data-theme="dark"] .section-kicker,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .contact .section-kicker,
html[data-theme="dark"] .split-copy .section-kicker {
  color: rgba(244, 244, 244, 0.72) !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .intro-grid p,
html[data-theme="dark"] .split-copy > p,
html[data-theme="dark"] .contact-inner > p,
html[data-theme="dark"] .tab-panel p,
html[data-theme="dark"] .page-link-grid small,
html[data-theme="dark"] .offer-grid p,
html[data-theme="dark"] .metric-list dd {
  color: rgba(244, 244, 244, 0.64) !important;
}

html[data-theme="dark"] .split-section {
  border-block: 1px solid rgba(244, 244, 244, 0.1) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 1px) 50% 0 / 1px 100% no-repeat !important;
}

html[data-theme="dark"] .split-media {
  position: relative;
  min-height: 620px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.08), transparent 18rem),
    radial-gradient(circle, rgba(255, 255, 255, 0.085) 0 1px, transparent 1.7px),
    linear-gradient(135deg, #050505, #111111 48%, #050505) !important;
  background-size: auto, 32px 32px, auto !important;
  overflow: hidden;
}

html[data-theme="dark"] .split-media::before {
  background:
    linear-gradient(90deg, transparent 49.85%, rgba(244, 244, 244, 0.13) 49.9% 50.1%, transparent 50.15%),
    linear-gradient(0deg, transparent 49.85%, rgba(244, 244, 244, 0.1) 49.9% 50.1%, transparent 50.15%) !important;
  opacity: 0.7 !important;
}

html[data-theme="dark"] .split-media::after {
  border-color: rgba(244, 244, 244, 0.16) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .orbit-ring,
html[data-theme="dark"] .orbit-ring::before,
html[data-theme="dark"] .orbit-ring::after {
  border-color: rgba(244, 244, 244, 0.22) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .orbit-core,
html[data-theme="dark"] .orbit-node,
html[data-theme="dark"] .software-stack span {
  border-color: rgba(244, 244, 244, 0.18) !important;
  background: rgba(8, 8, 8, 0.72) !important;
  color: #f4f4f4 !important;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .orbit-core {
  background: #f4f4f4 !important;
  color: #070707 !important;
}

html[data-theme="dark"] .software-tabbar {
  border-color: rgba(244, 244, 244, 0.15) !important;
  background: rgba(8, 8, 8, 0.72) !important;
}

html[data-theme="dark"] .software-tab {
  color: rgba(244, 244, 244, 0.62) !important;
}

html[data-theme="dark"] .software-tab:hover,
html[data-theme="dark"] .software-tab:focus-visible {
  color: #f4f4f4 !important;
}

html[data-theme="dark"] .software-tab.is-active {
  background: #f4f4f4 !important;
  color: #070707 !important;
}

html[data-theme="dark"] .software-screen {
  border-color: rgba(244, 244, 244, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(15, 15, 15, 0.96), rgba(3, 3, 3, 0.96)),
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.12), transparent 34%) !important;
}

html[data-theme="dark"] .software-window-bar {
  border-bottom-color: rgba(244, 244, 244, 0.12) !important;
  background: rgba(10, 10, 10, 0.8) !important;
}

html[data-theme="dark"] .software-panel-head small,
html[data-theme="dark"] .software-ui-grid span,
html[data-theme="dark"] .software-timeline span {
  border-color: rgba(244, 244, 244, 0.15) !important;
  background: rgba(244, 244, 244, 0.055) !important;
}

html[data-theme="dark"] .split-copy,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .tab-panel {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"] .metric-list,
html[data-theme="dark"] .metric-list div,
html[data-theme="dark"] .tab-panel,
html[data-theme="dark"] .tabs {
  border-color: rgba(244, 244, 244, 0.13) !important;
}

html[data-theme="dark"] .metric-list dt,
html[data-theme="dark"] .page-link-grid span,
html[data-theme="dark"] .offer-grid span,
html[data-theme="dark"] .service-card span {
  color: rgba(244, 244, 244, 0.56) !important;
}

html[data-theme="dark"] .metric-list dt::before {
  background: #f4f4f4 !important;
  box-shadow: 0 0 0 6px rgba(244, 244, 244, 0.08) !important;
}

html[data-theme="dark"] .page-link-grid,
html[data-theme="dark"] .offer-grid,
html[data-theme="dark"] .service-grid {
  gap: clamp(18px, 2.6vw, 34px) !important;
  border: 0 !important;
  background: transparent !important;
}

html[data-theme="dark"] .page-link-grid a,
html[data-theme="dark"] .offer-grid article,
html[data-theme="dark"] .service-card {
  position: relative;
  min-height: 0 !important;
  padding: clamp(28px, 3vw, 42px) 0 0 clamp(24px, 2.8vw, 38px) !important;
  border: 0 !important;
  border-left: 1px solid rgba(244, 244, 244, 0.13) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .page-link-grid a::before,
html[data-theme="dark"] .offer-grid article::before,
html[data-theme="dark"] .service-card::before {
  content: "" !important;
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: clamp(54px, 7vw, 98px);
  background: linear-gradient(180deg, rgba(244, 244, 244, 0.7), transparent) !important;
  opacity: 0.74;
}

html[data-theme="dark"] .page-link-grid a::after,
html[data-theme="dark"] .offer-grid article::after,
html[data-theme="dark"] .service-card::after {
  content: "" !important;
  position: absolute;
  left: -5px;
  top: 0;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(244, 244, 244, 0.64);
  background: #070707 !important;
  opacity: 0.74 !important;
  transform: rotate(45deg);
  box-shadow: 0 0 0 7px rgba(244, 244, 244, 0.035) !important;
}

html[data-theme="dark"] .page-link-grid a:hover,
html[data-theme="dark"] .page-link-grid a:focus-visible,
html[data-theme="dark"] .offer-grid article:hover,
html[data-theme="dark"] .offer-grid article:focus-within,
html[data-theme="dark"] .service-card:hover {
  color: #ffffff !important;
  background: transparent !important;
  transform: translate3d(0, -4px, 0);
}

html[data-theme="dark"] .page-link-grid strong,
html[data-theme="dark"] .offer-grid h3,
html[data-theme="dark"] .service-card h3 {
  color: #f4f4f4 !important;
  letter-spacing: -0.035em;
}

html[data-theme="dark"] .page-link-grid a:hover strong,
html[data-theme="dark"] .page-link-grid a:focus-visible strong,
html[data-theme="dark"] .offer-grid article:not(.cyber-flip-card):hover h3,
html[data-theme="dark"] .service-card:hover h3 {
  color: #ffffff !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)) !important;
}

html[data-theme="dark"] .tab-list {
  gap: 10px !important;
  background: transparent !important;
}

html[data-theme="dark"] .tab {
  border: 1px solid rgba(244, 244, 244, 0.14) !important;
  background: transparent !important;
  color: rgba(244, 244, 244, 0.62) !important;
}

html[data-theme="dark"] .tab.is-active {
  background: #f4f4f4 !important;
  color: #070707 !important;
  border-color: #f4f4f4 !important;
}

html[data-theme="dark"] .tab-panel {
  min-height: 240px;
  padding: clamp(28px, 4vw, 46px) 0 0 !important;
  border-top: 1px solid rgba(244, 244, 244, 0.14) !important;
}

html[data-theme="dark"] .statement {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.07), transparent 36%),
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 0 1px, transparent 1.8px),
    linear-gradient(135deg, #050505, #101010 48%, #050505) !important;
  background-size: auto, 34px 34px, auto !important;
}

html[data-theme="dark"] .statement blockquote {
  color: #f4f4f4;
  text-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .section h2,
html[data-theme="dark"] .split-copy h2,
html[data-theme="dark"] .workforce-head h2,
html[data-theme="dark"] .cyber-section h2,
html[data-theme="dark"] .contact h2,
html[data-theme="dark"] .statement blockquote {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

html[data-theme="dark"] .contact {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%),
    #050505 !important;
}

html[data-theme="dark"] .contact h2,
html[data-theme="dark"] .contact-inner > p,
html[data-theme="dark"] .site-footer {
  text-shadow: none !important;
}

html[data-theme="dark"] .button.primary,
html[data-theme="dark"] .contact .button.primary,
html[data-theme="dark"] .menu-cta {
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: #f4f4f4 !important;
  color: #070707 !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .button.primary:hover,
html[data-theme="dark"] .button.primary:focus-visible,
html[data-theme="dark"] .contact .button.primary:hover,
html[data-theme="dark"] .contact .button.primary:focus-visible,
html[data-theme="dark"] .menu-cta:hover,
html[data-theme="dark"] .menu-cta:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

html[data-theme="dark"] .fx-orb {
  display: none !important;
}

@media (max-width: 760px) {
  html[data-theme="dark"] .split-section,
  html[data-theme="dark"] .workforce {
    grid-template-columns: 1fr !important;
  }

  html[data-theme="dark"] .page-link-grid,
  html[data-theme="dark"] .offer-grid,
  html[data-theme="dark"] .service-grid {
    grid-template-columns: 1fr !important;
  }
}

html[data-theme="dark"] .cyber-section h2 {
  max-width: 13.8ch;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* Consulting slider card pass: elongated cards with stable controls. */
.section.intro#beratung .card-slider {
  margin-top: clamp(20px, 3.5vw, 46px) !important;
  padding: clamp(18px, 2.5vw, 30px) 0 clamp(18px, 2.5vw, 30px) !important;
  overflow: hidden !important;
  contain: layout paint;
  perspective: none !important;
}

.section.intro#beratung .card-slider::before,
.section.intro#beratung .card-slider::after {
  content: none !important;
}

.section.intro#beratung .card-slider-stage,
.section.intro#beratung .card-slider.is-enhanced .card-slider-stage {
  height: clamp(250px, 22vw, 310px) !important;
  overflow: visible !important;
}

.section.intro#beratung .slider-card,
.section.intro#beratung .card-slider.is-enhanced .slider-card {
  width: clamp(420px, 38vw, 560px) !important;
  min-height: clamp(218px, 17vw, 250px) !important;
  padding: clamp(24px, 2.8vw, 34px) clamp(28px, 3.2vw, 42px) !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 0.72fr) minmax(210px, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(34px, 4vw, 48px);
  row-gap: 16px;
  align-content: stretch !important;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ink) 8%, transparent), transparent 44%),
    color-mix(in srgb, var(--dark) 86%, transparent) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  opacity: 0.72;
  pointer-events: none;
}

.section.intro#beratung .slider-card::before,
.section.intro#beratung .slider-card::after,
.section.intro#beratung .card-slider.is-enhanced .slider-card.is-active::before,
.section.intro#beratung .card-slider.is-enhanced .slider-card.is-active::after {
  content: none !important;
}

.section.intro#beratung .slider-card > * {
  margin-left: 0 !important;
}

.section.intro#beratung .slider-card span {
  grid-column: 1 / -1;
  align-self: start;
  color: color-mix(in srgb, var(--ink) 52%, transparent) !important;
}

.section.intro#beratung .slider-card h3 {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  max-width: 100%;
  color: color-mix(in srgb, var(--ink) 82%, transparent) !important;
  font-size: clamp(1.36rem, 1.72vw, 1.98rem) !important;
  line-height: 1.02;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  white-space: normal;
}

.section.intro#beratung .slider-card p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  max-width: 28ch;
  color: color-mix(in srgb, var(--ink) 66%, transparent) !important;
  font-size: clamp(0.88rem, 0.94vw, 0.98rem) !important;
  line-height: 1.5;
}

.section.intro#beratung .card-slider.is-enhanced .slider-card.is-active {
  border-color: color-mix(in srgb, var(--ink) 30%, transparent) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--ink) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--dark) 78%, var(--ink) 4%) !important;
  box-shadow: 0 34px 92px rgba(0, 0, 0, 0.32), inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent) !important;
  opacity: 1 !important;
}

.section.intro#beratung .slider-card.is-active span {
  color: color-mix(in srgb, var(--ink) 72%, transparent) !important;
}

.section.intro#beratung .slider-card.is-active h3 {
  color: var(--ink) !important;
  font-size: clamp(1.48rem, 1.9vw, 2.16rem) !important;
}

.section.intro#beratung .slider-card.is-active p {
  color: color-mix(in srgb, var(--ink) 74%, transparent) !important;
}

.section.intro#beratung .card-slider.is-enhanced .slider-card:not(.is-active) {
  grid-template-columns: 1fr !important;
  opacity: 0.52 !important;
}

.section.intro#beratung .card-slider.is-enhanced .slider-card:not(.is-active) h3 {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  max-width: min(18ch, 100%);
  color: color-mix(in srgb, var(--ink) 76%, transparent) !important;
  font-size: clamp(1.15rem, 1.35vw, 1.48rem) !important;
  line-height: 1.05;
  overflow-wrap: normal;
  hyphens: manual;
  text-align: center;
}

.section.intro#beratung .card-slider.is-enhanced .slider-card:not(.is-active) p {
  opacity: 0;
  visibility: hidden;
}

.section.intro#beratung .card-slider-controls,
.section.intro#beratung .card-slider.is-enhanced .card-slider-controls {
  position: relative !important;
  left: 50% !important;
  bottom: auto !important;
  margin-top: clamp(10px, 1.4vw, 18px) !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

.section.intro#beratung .card-slider-controls *,
.section.intro#beratung .card-slider.is-enhanced .card-slider-controls * {
  pointer-events: auto !important;
}

html[data-theme="dark"] .section.intro#beratung .slider-card,
html[data-theme="dark"] .section.intro#beratung .card-slider.is-enhanced .slider-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 44%),
    rgba(12, 12, 12, 0.84) !important;
}

html[data-theme="light"] .section.intro#beratung .slider-card,
html[data-theme="light"] .section.intro#beratung .card-slider.is-enhanced .slider-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.38) 44%),
    rgba(245, 245, 247, 0.72) !important;
  box-shadow: 0 24px 68px rgba(17, 17, 17, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

@media (max-width: 760px) {
  .section.intro#beratung .slider-card,
  .section.intro#beratung .card-slider.is-enhanced .slider-card {
    width: min(86vw, 430px) !important;
    min-height: 250px !important;
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .section.intro#beratung .slider-card h3,
  .section.intro#beratung .slider-card p {
    grid-column: 1;
    grid-row: auto;
  }

  .section.intro#beratung .card-slider-stage,
  .section.intro#beratung .card-slider.is-enhanced .card-slider-stage {
    height: 330px !important;
  }
}

/* Final landing flow tuning: shorter first screen, immediate readable continuation. */
.hero-link-hub {
  min-height: clamp(560px, 72svh, 690px) !important;
}

.hub-shell {
  min-height: clamp(560px, 72svh, 690px) !important;
  padding-top: clamp(86px, 9vh, 112px) !important;
  padding-bottom: clamp(36px, 5.5vh, 58px) !important;
}

.service-overview {
  margin-top: clamp(-56px, -6vh, -34px) !important;
  padding-top: clamp(44px, 5.6vw, 64px) !important;
}

.service-overview.reveal {
  opacity: 1 !important;
  transform: none !important;
}

.service-overview .hub-card::after {
  content: "Weiterlesen";
  position: absolute;
  left: 0;
  bottom: 0;
  color: rgba(246, 246, 243, 0.46);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, color 180ms ease;
}

.service-overview .hub-card:hover::after,
.service-overview .hub-card:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  color: rgba(246, 246, 243, 0.78);
}

html[data-theme="dark"] .service-overview,
html[data-theme="dark"] .section.service-overview {
  background:
    radial-gradient(920px circle at 78% 16%, rgba(255, 255, 255, 0.055), transparent 56%),
    linear-gradient(180deg, #050505 0%, #080808 54%, #050505 100%) !important;
}

html[data-theme="dark"] .service-overview::before,
html[data-theme="dark"] .section.service-overview::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 calc(50% - 50vw) !important;
  z-index: -2 !important;
  height: auto !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.045), transparent 38%),
    linear-gradient(180deg, #050505, #080808 58%, #050505) !important;
}

html[data-theme="dark"] .service-overview::after,
html[data-theme="dark"] .section.service-overview::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(246, 246, 243, 0.42), rgba(246, 246, 243, 0.12) 46%, transparent) !important;
}

.hero-continue {
  margin-top: clamp(24px, 3.2vh, 34px) !important;
}

@media (max-width: 760px) {
  .hero-link-hub,
  .hub-shell {
    min-height: 84svh !important;
  }

  .service-overview {
    margin-top: -28px !important;
    padding-top: 58px !important;
  }
}

/* Correction: WWW-like readable section order - intro first, subpages below. */
.hero-link-hub {
  min-height: clamp(650px, 88svh, 840px) !important;
}

.hub-shell {
  min-height: clamp(650px, 88svh, 840px) !important;
}

.service-overview,
html[data-theme="dark"] .section.service-overview {
  width: min(1060px, calc(100% - clamp(40px, 10vw, 160px))) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(78px, 9vw, 128px) 0 clamp(96px, 11vw, 148px) !important;
  display: block !important;
  color: #f6f6f3;
  background: transparent !important;
}

.service-overview::before,
html[data-theme="dark"] .section.service-overview::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 calc(50% - 50vw) !important;
  z-index: -2 !important;
  height: auto !important;
  pointer-events: none !important;
  background:
    radial-gradient(900px ellipse at 78% 6%, rgba(255, 255, 255, 0.05), transparent 58%),
    linear-gradient(180deg, #050505 0%, #080808 42%, #050505 100%) !important;
}

.service-overview::after,
html[data-theme="dark"] .section.service-overview::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(246, 246, 243, 0.42), rgba(246, 246, 243, 0.14) 48%, transparent) !important;
}

.overview-copy {
  position: static !important;
  max-width: 880px !important;
  display: grid !important;
  gap: clamp(18px, 2vw, 26px) !important;
  margin: 0 0 clamp(44px, 5.2vw, 68px) !important;
}

.overview-copy .section-kicker {
  width: fit-content;
  margin: 0 !important;
}

.overview-copy h2 {
  max-width: 980px !important;
  margin: 0 !important;
  color: #f6f6f3 !important;
  font-size: clamp(3.55rem, 6.2vw, 5.85rem) !important;
  line-height: 1.03 !important;
  font-weight: 930 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
}

.overview-copy p:not(.section-kicker) {
  max-width: 760px !important;
  margin: 0 !important;
  color: rgba(246, 246, 243, 0.68) !important;
  font-size: clamp(1.06rem, 1.45vw, 1.34rem) !important;
  line-height: 1.62 !important;
  font-weight: 600 !important;
}

.overview-link-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  gap: clamp(42px, 5vw, 62px) clamp(54px, 7vw, 96px) !important;
}

.service-overview .hub-card {
  min-height: clamp(210px, 18vw, 250px) !important;
  padding: clamp(24px, 2.8vw, 34px) 0 clamp(34px, 3.4vw, 46px) !important;
  border-top: 1px solid rgba(246, 246, 243, 0.26) !important;
  align-content: start !important;
  gap: clamp(14px, 1.5vw, 20px) !important;
}

.service-overview .hub-card strong {
  max-width: 12ch !important;
  color: #f6f6f3 !important;
  font-size: clamp(2rem, 3.7vw, 4rem) !important;
  line-height: 1.02 !important;
  font-weight: 920 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
}

.service-overview .hub-card small {
  max-width: 34ch !important;
  color: rgba(246, 246, 243, 0.6) !important;
  font-size: clamp(1rem, 1.18vw, 1.12rem) !important;
  line-height: 1.52 !important;
}

@media (max-width: 900px) {
  .service-overview,
  html[data-theme="dark"] .section.service-overview {
    width: min(720px, calc(100% - 36px)) !important;
  }

  .overview-link-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .hero-link-hub,
  .hub-shell {
    min-height: 88svh !important;
  }

  .service-overview,
  html[data-theme="dark"] .section.service-overview {
    padding-top: 66px !important;
  }

  .overview-copy h2 {
    font-size: clamp(3.05rem, 15vw, 5rem) !important;
  }

  .service-overview .hub-card strong {
    font-size: clamp(2.25rem, 12vw, 3.6rem) !important;
  }
}

/* Final service directory polish: wide, open, four links per row. */
.service-overview,
html[data-theme="dark"] .section.service-overview {
  width: min(1320px, calc(100% - clamp(44px, 8vw, 132px))) !important;
  padding-top: clamp(42px, 5vw, 66px) !important;
  padding-bottom: clamp(92px, 10vw, 136px) !important;
}

.service-overview::before,
html[data-theme="dark"] .section.service-overview::before {
  background:
    radial-gradient(880px ellipse at 74% 4%, rgba(255, 255, 255, 0.04), transparent 58%),
    radial-gradient(760px ellipse at 8% 32%, rgba(255, 255, 255, 0.028), transparent 62%),
    linear-gradient(180deg, #050505 0%, #070707 48%, #050505 100%) !important;
}

.overview-copy {
  max-width: 1060px !important;
  margin-bottom: clamp(34px, 4.2vw, 54px) !important;
}

.overview-copy h2 {
  max-width: 1040px !important;
  font-size: clamp(3.35rem, 5.25vw, 5.35rem) !important;
}

.overview-copy p:not(.section-kicker) {
  max-width: 820px !important;
  font-size: clamp(1rem, 1.22vw, 1.18rem) !important;
  line-height: 1.56 !important;
}

.overview-link-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(30px, 3.8vw, 56px) clamp(26px, 3.3vw, 46px) !important;
}

.service-overview .hub-card {
  min-height: 188px !important;
  padding: clamp(18px, 1.8vw, 24px) 0 clamp(26px, 2.5vw, 36px) !important;
  border-top-color: rgba(246, 246, 243, 0.2) !important;
  transition: transform 190ms ease, border-color 190ms ease, background 190ms ease;
}

.service-overview .hub-card::before {
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(246, 246, 243, 0.6), transparent 64%);
  opacity: 0;
  transition: opacity 190ms ease;
}

.service-overview .hub-card:hover,
.service-overview .hub-card:focus-visible {
  transform: translateY(-6px) !important;
  border-top-color: rgba(246, 246, 243, 0.46) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 58%) !important;
}

.service-overview .hub-card:hover::before,
.service-overview .hub-card:focus-visible::before {
  opacity: 1;
}

.service-overview .hub-card span {
  color: rgba(246, 246, 243, 0.48) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
}

.service-overview .hub-card strong {
  max-width: 10ch !important;
  font-size: clamp(1.52rem, 2.05vw, 2.42rem) !important;
  line-height: 1.03 !important;
}

.service-overview .hub-card small {
  max-width: 28ch !important;
  font-size: clamp(0.86rem, 0.9vw, 0.96rem) !important;
  line-height: 1.48 !important;
}

.service-overview .hub-card::after {
  bottom: 2px;
}

@media (max-width: 1180px) {
  .overview-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .service-overview .hub-card strong {
    font-size: clamp(2rem, 4.8vw, 3.55rem) !important;
  }
}

@media (max-width: 680px) {
  .service-overview,
  html[data-theme="dark"] .section.service-overview {
    width: calc(100% - 34px) !important;
  }

  .overview-link-grid {
    grid-template-columns: 1fr !important;
  }

  .service-overview .hub-card {
    min-height: auto !important;
  }
}

/* Full-screen entry with a soft line-to-quiet transition into the service area. */
.hero-link-hub {
  min-height: 100svh !important;
}

.hub-shell {
  min-height: 100svh !important;
}

.hero-link-hub::before,
.hub-background {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.78) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.78) 82%, transparent 100%);
}

.hub-background::after {
  height: clamp(180px, 28svh, 340px) !important;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 5, 5, 0.64) 48%, #050505 88%) !important;
}

.service-overview,
html[data-theme="dark"] .section.service-overview {
  padding-top: clamp(58px, 6.5vw, 92px) !important;
}

.service-overview::before,
html[data-theme="dark"] .section.service-overview::before {
  background:
    linear-gradient(180deg, #050505 0%, rgba(5, 5, 5, 0.96) 16%, rgba(7, 7, 7, 0.98) 46%, #050505 100%),
    radial-gradient(880px ellipse at 74% 4%, rgba(255, 255, 255, 0.035), transparent 58%),
    radial-gradient(760px ellipse at 8% 32%, rgba(255, 255, 255, 0.022), transparent 62%) !important;
}

.service-overview::after,
html[data-theme="dark"] .section.service-overview::after {
  opacity: 0 !important;
}

html[data-theme="light"] .hub-background::after {
  background: linear-gradient(180deg, transparent 0%, rgba(245, 245, 245, 0.68) 48%, #f4f4fb 88%) !important;
}

html[data-theme="light"] .service-overview::before {
  background:
    linear-gradient(180deg, #f4f4fb 0%, rgba(244, 244, 251, 0.96) 18%, rgba(240, 240, 244, 0.98) 48%, #f4f4fb 100%),
    radial-gradient(880px ellipse at 74% 4%, rgba(0, 0, 0, 0.035), transparent 58%),
    radial-gradient(760px ellipse at 8% 32%, rgba(0, 0, 0, 0.022), transparent 62%) !important;
}

@media (max-width: 760px) {
  .hero-link-hub,
  .hub-shell {
    min-height: 100svh !important;
  }

  .hub-background::after {
    height: clamp(150px, 24svh, 240px) !important;
  }
}

/* Keep the service directory as part of the page, not as a centered mega-card. */
.service-overview,
html[data-theme="dark"] .section.service-overview {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: clamp(18px, 4vw, 64px) !important;
  padding-right: clamp(18px, 4vw, 64px) !important;
}

.service-overview::before,
html[data-theme="dark"] .section.service-overview::before {
  inset: 0 !important;
}

@media (max-width: 680px) {
  .service-overview,
  html[data-theme="dark"] .section.service-overview {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Final landing headline correction: keep the claim on one line. */
.hero-link-hub .hub-intro h1 {
  max-width: none !important;
  font-size: clamp(3rem, calc((100vw - clamp(48px, 10vw, 150px)) / 9.6), 9rem) !important;
  line-height: 0.86 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
  white-space: nowrap !important;
}

.hero-link-hub .hub-intro {
  width: 100% !important;
  max-width: none !important;
}

.hero-link-hub .hub-intro h1,
.hero-link-hub .hub-intro p:not(.eyebrow) {
  justify-self: center !important;
  text-align: center !important;
}

.hero-link-hub .hub-intro h1 span {
  display: inline;
  white-space: inherit;
}

.hero-link-hub .hub-rail {
  bottom: clamp(34px, 6.2vh, 64px) !important;
}

@media (max-width: 760px) {
  .hero-link-hub .hub-intro h1 {
    font-size: clamp(2rem, calc((100vw - 36px) / 9.6), 4.8rem) !important;
  }

  .hero-link-hub .hub-intro h1 span {
    white-space: inherit;
  }
}

/* Quiet entry refinements: no top meta links, sticky brand, soft parallax, small loader. */
.hero-link-hub {
  --hero-parallax-x: 0px;
  --hero-parallax-y: 0px;
}

.landing-meta {
  display: none !important;
}

.hero-link-hub .hub-intro > .eyebrow {
  display: none !important;
}

.landing-mark {
  position: fixed !important;
  z-index: 68 !important;
  left: clamp(22px, 6vw, 96px) !important;
  top: clamp(18px, 4.8vh, 42px) !important;
  transform: translate3d(var(--landing-mark-x, 0px), var(--landing-mark-y, 0px), 0) scale(var(--landing-mark-scale, 1));
  transform-origin: left top;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease, color 180ms ease, filter 420ms ease;
  will-change: transform, opacity, filter;
  pointer-events: none;
}

.landing-mark.is-compact {
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
}

.landing-mark.is-scene-hidden {
  opacity: 0 !important;
  filter: blur(8px);
  pointer-events: none;
  transform: translate3d(calc(var(--landing-mark-x, 0px) - 10px), calc(var(--landing-mark-y, 0px) - 22px), 0) scale(var(--landing-mark-scale, 1));
}

.landing-mark.is-scene-returning {
  animation: landingMarkReturn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes landingMarkReturn {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(calc(var(--landing-mark-x, 0px) - 10px), calc(var(--landing-mark-y, 0px) - 22px), 0) scale(var(--landing-mark-scale, 1));
  }
  58% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(calc(var(--landing-mark-x, 0px) + 2px), calc(var(--landing-mark-y, 0px) + 1px), 0) scale(var(--landing-mark-scale, 1));
  }
  100% {
    opacity: 0.9;
    filter: blur(0);
    transform: translate3d(var(--landing-mark-x, 0px), var(--landing-mark-y, 0px), 0) scale(var(--landing-mark-scale, 1));
  }
}

.hero-link-hub::after {
  transform: translate3d(var(--hero-parallax-x), var(--hero-parallax-y), 0) scale(1.025) !important;
  transition: transform 220ms ease-out;
  will-change: transform;
}

.hero-link-hub .hub-background {
  transform: translate3d(var(--hero-parallax-x), var(--hero-parallax-y), 0) scale(1.035);
  transition: transform 220ms ease-out;
  will-change: transform;
}

.hero-link-hub .hub-background::before {
  transform: skewX(-7deg) translate3d(calc(-2vw + var(--hero-parallax-x)), var(--hero-parallax-y), 0) !important;
  transition: transform 220ms ease-out;
}

.intro-loader {
  display: block !important;
  background: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) !important;
  transition: none !important;
  will-change: transform;
}

.intro-loader > *,
.intro-loader::before,
.intro-loader::after {
  display: none !important;
}

.intro-loader.is-playing {
  cursor: default;
}

.intro-loader.is-exiting {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

body.intro-pending {
  background: #000;
}

body.intro-pending .hero-link-hub {
  transform: translate3d(0, 9svh, 0) scale(1.025);
  filter: brightness(0.72);
}

body.intro-pending.intro-revealing .hero-link-hub,
body.intro-revealing .hero-link-hub {
  animation: none !important;
  will-change: transform, filter;
}

body.intro-revealing .landing-mark,
body.intro-revealing .hub-intro,
body.intro-revealing .hub-rail {
  animation: landingContentArrive 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.intro-revealing .hub-intro {
  animation-delay: 110ms;
}

body.intro-revealing .hub-rail {
  animation-delay: 210ms;
}

@keyframes landingContentArrive {
  0% { opacity: 0; transform: translate3d(0, 24px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 760px) {
  .landing-mark {
    left: 22px !important;
    top: 26px !important;
    font-size: clamp(1.45rem, 8.2vw, 2rem) !important;
  }
}

/* Reference-clean service cards: restrained editorial slabs with only line, type and space. */
.service-overview,
html[data-theme="dark"] .section.service-overview {
  padding-top: clamp(92px, 9vw, 138px) !important;
  padding-bottom: clamp(104px, 11vw, 158px) !important;
  background: #050505 !important;
}

.service-overview::before,
html[data-theme="dark"] .section.service-overview::before {
  background:
    radial-gradient(760px ellipse at 82% 10%, rgba(255, 255, 255, 0.035), transparent 60%),
    linear-gradient(180deg, #050505 0%, #070707 48%, #050505 100%) !important;
}

.overview-link-grid {
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  gap: clamp(30px, 4.2vw, 54px) clamp(38px, 6vw, 76px) !important;
}

.service-overview .hub-card {
  min-height: clamp(318px, 27vw, 374px) !important;
  padding: clamp(34px, 3.5vw, 48px) clamp(22px, 2.4vw, 34px) clamp(34px, 3.5vw, 48px) !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr;
  align-content: start !important;
  gap: clamp(22px, 2.3vw, 34px) !important;
  border-top: 1px solid rgba(246, 246, 243, 0.34) !important;
  border-bottom: 1px solid rgba(246, 246, 243, 0.22) !important;
  background: #060606 !important;
  box-shadow: none !important;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 720ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 720ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.service-overview .hub-card::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--card-image);
  background-size: cover;
  background-position: var(--card-position, center);
  opacity: 0.96;
  filter: saturate(1.02) contrast(1.02) brightness(1.08);
  transform: scale(1.025) translate3d(0, 0, 0);
  transform-origin: var(--card-origin, 65% 50%);
  -webkit-mask-image: none;
  mask-image: none;
  transition:
    opacity 820ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 820ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
}

.service-overview .hub-card::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, #060606 0%, #060606 40%, rgba(6, 6, 6, 0.9) 48%, rgba(6, 6, 6, 0.34) 62%, rgba(6, 6, 6, 0) 82%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), transparent 46%, rgba(0, 0, 0, 0.12));
  pointer-events: none;
  transition: opacity 820ms cubic-bezier(0.16, 1, 0.3, 1), background 820ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-overview .hub-card:nth-child(even)::before {
  background-position: 62% center;
}

.service-overview .hub-card:hover,
.service-overview .hub-card:focus-visible {
  transform: translateY(-3px) !important;
  border-top-color: rgba(246, 246, 243, 0.58) !important;
  border-bottom-color: rgba(246, 246, 243, 0.34) !important;
  background: #070707 !important;
}

.service-overview .hub-card:hover::before,
.service-overview .hub-card:focus-visible::before {
  opacity: 1;
  filter: saturate(1.14) contrast(1.03) brightness(1.16);
  transform: scale(1.075) translate3d(8px, 0, 0);
}

.service-overview .hub-card:hover::after,
.service-overview .hub-card:focus-visible::after {
  background:
    linear-gradient(90deg, #060606 0%, #060606 38%, rgba(6, 6, 6, 0.82) 47%, rgba(6, 6, 6, 0.24) 61%, rgba(6, 6, 6, 0) 80%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 44%, rgba(0, 0, 0, 0.08));
}

.service-overview .hub-card > * {
  position: relative;
  z-index: 2;
}

.service-overview .hub-card span {
  color: rgba(246, 246, 243, 0.58) !important;
  font-size: clamp(0.68rem, 0.72vw, 0.76rem) !important;
  letter-spacing: 0.14em !important;
}

.service-overview .hub-card strong {
  max-width: 15ch !important;
  color: #f7f7f4 !important;
  font-size: clamp(1.72rem, 2.7vw, 3rem) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

.service-overview .hub-card small {
  align-self: start;
  max-width: 33ch !important;
  color: rgba(246, 246, 243, 0.58) !important;
  font-size: clamp(1.08rem, 1.5vw, 1.34rem) !important;
  line-height: 1.5 !important;
  font-weight: 720 !important;
}

html[data-theme="light"] .section.service-overview {
  background: #f4f4fb !important;
  color: #111111 !important;
}

html[data-theme="light"] .service-overview::before {
  background:
    radial-gradient(760px ellipse at 82% 10%, rgba(0, 0, 0, 0.035), transparent 60%),
    linear-gradient(180deg, #f4f4fb 0%, #eeeeF4 48%, #f4f4fb 100%) !important;
}

html[data-theme="light"] .service-overview .hub-card {
  border-top-color: rgba(17, 17, 17, 0.28) !important;
  border-bottom-color: rgba(17, 17, 17, 0.16) !important;
  background: #f4f4fb !important;
}

html[data-theme="light"] .service-overview .hub-card::before {
  opacity: 0.7;
  filter: saturate(0.78) contrast(1.02) brightness(1.04);
}

html[data-theme="light"] .service-overview .hub-card::after {
  background:
    linear-gradient(90deg, #f4f4fb 0%, rgba(244, 244, 251, 0.98) 34%, rgba(244, 244, 251, 0.78) 52%, rgba(244, 244, 251, 0.3) 76%, rgba(244, 244, 251, 0.06) 100%),
    linear-gradient(180deg, rgba(244, 244, 251, 0.04), rgba(244, 244, 251, 0.46));
}

html[data-theme="light"] .service-overview .hub-card:hover::before,
html[data-theme="light"] .service-overview .hub-card:focus-visible::before {
  opacity: 0.88;
  filter: saturate(0.98) contrast(1.03) brightness(1.02);
}

html[data-theme="light"] .service-overview .hub-card span,
html[data-theme="light"] .service-overview .hub-card small {
  color: rgba(17, 17, 17, 0.56) !important;
}

html[data-theme="light"] .service-overview .hub-card strong {
  color: #111111 !important;
}

.service-overview .hub-card:nth-child(1) {
  --card-image: url("Bilder/service-business.jpg");
  --card-position: left center;
  --card-origin: 38% 50%;
}

.service-overview .hub-card:nth-child(2) {
  --card-image: url("Bilder/service-software.jpg");
  --card-position: left center;
  --card-origin: 42% 50%;
}

.service-overview .hub-card:nth-child(3) {
  --card-image: url("Bilder/service-solutions.jpg");
  --card-position: center;
  --card-origin: 58% 50%;
}

.service-overview .hub-card:nth-child(4) {
  --card-image: url("Bilder/service-cyber.jpg");
  --card-position: center;
  --card-origin: 62% 50%;
}

.service-overview .hub-card:nth-child(5) {
  --card-image: url("Bilder/service-ai.jpg");
  --card-position: center;
  --card-origin: 60% 50%;
}

.service-overview .hub-card:nth-child(6) {
  --card-image: url("Bilder/service-infrastructure.jpg");
  --card-position: center;
  --card-origin: 60% 50%;
}

.service-overview .hub-card:nth-child(7) {
  --card-image: url("Bilder/service-data.jpg");
  --card-position: left center;
  --card-origin: 42% 50%;
}

.service-overview .hub-card:nth-child(8) {
  --card-image: url("Bilder/service-emergency.jpg");
  --card-position: center;
  --card-origin: 60% 50%;
}

@media (max-width: 1180px) {
  .overview-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .service-overview .hub-card {
    min-height: clamp(304px, 34vw, 360px) !important;
  }
}

@media (max-width: 680px) {
  .overview-link-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .service-overview .hub-card {
    min-height: 318px !important;
    padding-top: 26px !important;
  }

  .service-overview .hub-card::before {
    background-position: center;
    transform-origin: 50% 76%;
  }

  .service-overview .hub-card::after {
    background:
      linear-gradient(180deg, #060606 0%, rgba(6, 6, 6, 0.98) 38%, rgba(6, 6, 6, 0.72) 58%, rgba(6, 6, 6, 0.04) 100%),
      linear-gradient(90deg, rgba(6, 6, 6, 0.18), rgba(6, 6, 6, 0));
  }

  .service-overview .hub-card strong {
    font-size: clamp(1.95rem, 10vw, 3rem) !important;
  }

  .service-overview .hub-card small {
    max-width: 28ch !important;
  }
}

/* Explicit image panels: visible image field with a soft black transition and smoother motion. */
.service-overview .hub-card {
  background: #060606 !important;
  transform: none !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.34), inset 0 -1px 0 rgba(246, 246, 243, 0.22) !important;
}

.service-overview .hub-card:hover,
.service-overview .hub-card:focus-visible {
  transform: none !important;
  background: #060606 !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.58), inset 0 -1px 0 rgba(246, 246, 243, 0.34) !important;
}

.service-overview .hub-card::before,
.service-overview .hub-card::after {
  content: none !important;
}

.service-overview .hub-card-image {
  position: absolute !important;
  inset: 4px -1px 4px 24% !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  contain: paint;
  clip-path: inset(0);
  opacity: 0.92;
  background: transparent !important;
  transform: translate3d(0, 0, 0);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

.service-overview .hub-card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, #060606 0%, #060606 30%, rgba(6, 6, 6, 0.92) 42%, rgba(6, 6, 6, 0.48) 58%, rgba(6, 6, 6, 0.1) 76%, transparent 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent 48%, rgba(0, 0, 0, 0.16));
  pointer-events: none;
}

.service-overview .hub-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--panel-position, center);
  filter: saturate(1.04) contrast(1.03) brightness(1.02);
  transform: scale(1.02);
  transform-origin: var(--card-origin, center);
  backface-visibility: hidden;
  transition: filter 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-overview .hub-card:hover .hub-card-image,
.service-overview .hub-card:focus-visible .hub-card-image {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.service-overview .hub-card:hover .hub-card-image img,
.service-overview .hub-card:focus-visible .hub-card-image img {
  filter: saturate(1.16) contrast(1.04) brightness(1.1);
  transform: scale(1.09);
}

.service-overview .hub-card > span:not(.hub-card-image),
.service-overview .hub-card strong,
.service-overview .hub-card small {
  position: relative;
  z-index: 2;
}

.service-overview .hub-card > span:not(.hub-card-image) {
  max-width: 42%;
}

.service-overview .hub-card strong {
  max-width: min(12ch, 44%) !important;
}

.service-overview .hub-card small {
  max-width: min(27ch, 45%) !important;
}

.service-overview .hub-card:nth-child(1) { --panel-position: 38% center; }
.service-overview .hub-card:nth-child(2) { --panel-position: 30% center; }
.service-overview .hub-card:nth-child(3) { --panel-position: 58% center; }
.service-overview .hub-card:nth-child(4) { --panel-position: 58% center; }
.service-overview .hub-card:nth-child(5) { --panel-position: center; }
.service-overview .hub-card:nth-child(6) { --panel-position: center; }
.service-overview .hub-card:nth-child(7) { --panel-position: 34% center; }
.service-overview .hub-card:nth-child(8) { --panel-position: center; }

@media (max-width: 680px) {
  .service-overview .hub-card {
    min-height: 430px !important;
    padding-bottom: 188px !important;
  }

  .service-overview .hub-card-image {
    inset: auto 0 0 0 !important;
    width: 100% !important;
    height: 42% !important;
  }

  .service-overview .hub-card-image::before {
    background:
      linear-gradient(180deg, #060606 0%, #060606 20%, rgba(6, 6, 6, 0.86) 36%, rgba(6, 6, 6, 0.34) 58%, rgba(6, 6, 6, 0.02) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 54%, rgba(0, 0, 0, 0.12));
  }

  .service-overview .hub-card > span:not(.hub-card-image) {
    max-width: 100%;
  }

  .service-overview .hub-card strong {
    max-width: 12ch !important;
  }

  .service-overview .hub-card small {
    max-width: 28ch !important;
  }
}

/* One-by-one service scroll: each service owns the viewport before the next takes over. */
.overview-link-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(22px, 5vh, 44px) !important;
}

.service-overview .hub-card {
  position: sticky !important;
  top: clamp(78px, 10vh, 112px) !important;
  min-height: calc(100svh - clamp(78px, 10vh, 112px)) !important;
  padding: clamp(32px, 5vw, 64px) clamp(28px, 5.8vw, 76px) !important;
  display: grid !important;
  align-content: center !important;
  gap: clamp(18px, 2.4vw, 28px) !important;
}

.service-overview .hub-card-image {
  inset: 4px -1px 4px 32% !important;
}

.service-overview .hub-card > span:not(.hub-card-image) {
  max-width: 48% !important;
}

.service-overview .hub-card strong {
  max-width: min(11ch, 48%) !important;
  font-size: clamp(2.75rem, 6vw, 5.8rem) !important;
}

.service-overview .hub-card small {
  max-width: min(32ch, 46%) !important;
  font-size: clamp(1rem, 1.4vw, 1.28rem) !important;
}

@media (max-width: 760px) {
  .overview-link-grid {
    gap: 24px !important;
  }

  .service-overview .hub-card {
    top: 78px !important;
    min-height: calc(100svh - 78px) !important;
    padding: 30px 24px 44vh !important;
    align-content: start !important;
  }

  .service-overview .hub-card-image {
    inset: auto 0 0 0 !important;
    width: 100% !important;
    height: 48% !important;
  }

  .service-overview .hub-card > span:not(.hub-card-image),
  .service-overview .hub-card strong,
  .service-overview .hub-card small {
    max-width: 100% !important;
  }

  .service-overview .hub-card strong {
    font-size: clamp(2.35rem, 13vw, 4.25rem) !important;
  }
}

/* Detail subpage hero image pass: image-led first viewport with a soft fade into black. */
body.detail-page {
  --detail-hero-image: url("Bilder/service-business.jpg");
  --detail-hero-position: 68% center;
}

body.page-beratung,
body.page-kontakt {
  --detail-hero-image: url("Bilder/service-business.jpg");
  --detail-hero-position: 66% center;
}

body.page-software,
body.page-websites {
  --detail-hero-image: url("Bilder/service-software.jpg");
  --detail-hero-position: 72% center;
}

body.page-loesungen {
  --detail-hero-image: url("Bilder/service-solutions.jpg");
  --detail-hero-position: 66% center;
}

body.page-ki {
  --detail-hero-image: url("Bilder/service-ai.jpg");
  --detail-hero-position: 64% center;
}

body.page-cyber {
  --detail-hero-image: url("Bilder/service-cyber.jpg");
  --detail-hero-position: 66% center;
}

body.page-emergency {
  --detail-hero-image: url("Bilder/service-emergency.jpg");
  --detail-hero-position: 64% center;
}

body.page-data {
  --detail-hero-image: url("Bilder/service-data.jpg");
  --detail-hero-position: 58% center;
}

body.page-infrastructure {
  --detail-hero-image: url("Bilder/service-infrastructure.jpg");
  --detail-hero-position: 62% center;
}

body.page-blog {
  --detail-hero-image: url("Bilder/blog-meta-ai-training.jpg");
  --detail-hero-position: 58% center;
}

body.detail-page .menu-visual {
  background:
    linear-gradient(90deg, rgba(4, 7, 6, 0.04), rgba(4, 7, 6, 0.78)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)),
    var(--detail-hero-image) var(--detail-hero-position) / cover no-repeat;
  filter: saturate(0.92) contrast(1.06) brightness(0.72);
}

body.detail-page .menu-overlay.is-open .menu-visual {
  filter: saturate(1.02) contrast(1.08) brightness(0.78);
}

body.detail-page .detail-hero {
  min-height: 100svh !important;
  align-items: center !important;
  padding-top: clamp(118px, 13vh, 164px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: clamp(84px, 12vh, 138px) !important;
  background: #050505 !important;
  overflow: hidden !important;
}

body.detail-page .detail-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;
  background-image: var(--detail-hero-image) !important;
  background-size: cover !important;
  background-position: var(--detail-hero-position) !important;
  opacity: 0.78 !important;
  filter: saturate(0.96) contrast(1.05) brightness(0.76) !important;
  transform: scale(1.025);
  -webkit-mask-image: none;
  mask-image: none;
}

body.detail-page .detail-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  background:
    linear-gradient(90deg, #050505 0%, rgba(5, 5, 5, 0.96) 24%, rgba(5, 5, 5, 0.66) 45%, rgba(5, 5, 5, 0.14) 73%, rgba(5, 5, 5, 0.03) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.03) 0%, rgba(5, 5, 5, 0.08) 46%, rgba(5, 5, 5, 0.42) 68%, rgba(5, 5, 5, 0.84) 86%, #050505 100%),
    radial-gradient(ellipse at 22% 52%, rgba(255, 255, 255, 0.09), transparent 34%) !important;
  pointer-events: none !important;
}

body.detail-page .detail-main {
  margin-top: 0 !important;
}

body.detail-page .detail-hero .detail-back {
  position: fixed;
  left: clamp(18px, 4vw, 54px);
  top: clamp(20px, 4vh, 36px);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(246, 246, 243, 0.2);
  border-radius: 999px;
  background: rgba(6, 6, 6, 0.58);
  color: rgba(246, 246, 243, 0.86);
  font-size: 0.82rem;
  font-weight: 900;
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(16px);
  transform: translateX(0) scale(1);
  transition:
    opacity 360ms ease,
    visibility 0s linear 0s,
    border-color 220ms ease,
    background 220ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.detail-page .detail-hero .detail-back.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-18px) scale(0.96);
  transition:
    opacity 280ms ease,
    visibility 0s linear 280ms,
    border-color 220ms ease,
    background 220ms ease,
    transform 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.menu-open.detail-page .detail-hero .detail-back {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.detail-page .detail-hero .detail-back:hover,
body.detail-page .detail-hero .detail-back:focus-visible {
  transform: translateX(-3px);
  border-color: rgba(246, 246, 243, 0.42);
  background: rgba(6, 6, 6, 0.78);
}

body.detail-page .detail-hero-inner {
  z-index: 2 !important;
  width: min(1320px, calc(100vw - clamp(52px, 10vw, 156px))) !important;
  max-width: min(1320px, calc(100vw - clamp(52px, 10vw, 156px))) !important;
  margin: 0 auto !important;
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
  text-shadow: 0 18px 52px rgba(0, 0, 0, 0.62) !important;
}

body.detail-page .detail-hero h1 {
  --detail-title-fit: 13.7;
  max-width: none !important;
  font-size: clamp(2rem, calc((100vw - clamp(52px, 10vw, 156px)) / var(--detail-title-fit)), 8.6rem) !important;
  line-height: 0.86 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  white-space: nowrap !important;
}

body.page-beratung .detail-hero h1,
body.page-kontakt .detail-hero h1,
body.page-emergency .detail-hero h1 {
  --detail-title-fit: 9.8;
}

body.page-software .detail-hero h1 {
  --detail-title-fit: 10.8;
}

body.page-loesungen .detail-hero h1,
body.page-ki .detail-hero h1,
body.page-websites .detail-hero h1,
body.page-data .detail-hero h1 {
  --detail-title-fit: 8.2;
}

body.page-infrastructure .detail-hero h1 {
  --detail-title-fit: 13;
}

body.detail-page .detail-hero .eyebrow {
  color: rgba(246, 246, 243, 0.7) !important;
}

body.detail-page .detail-hero p:not(.eyebrow) {
  max-width: 36ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: rgba(246, 246, 243, 0.68) !important;
}

body.detail-page .detail-main {
  position: relative;
  z-index: 1;
  background: transparent;
  margin-top: 0 !important;
  padding-top: clamp(28px, 4vw, 56px) !important;
}

body.detail-page .detail-section {
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr) !important;
  gap: clamp(30px, 5vw, 72px) !important;
  align-items: start;
}

body.detail-page .detail-section h2 {
  min-width: 0;
  max-width: 11.5ch;
  font-size: clamp(2.45rem, 3.75vw, 4.35rem) !important;
  line-height: 0.98 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  text-wrap: balance;
}

body.detail-page .detail-copy,
body.detail-page .detail-grid {
  min-width: 0;
}

body.detail-page .detail-grid {
  gap: clamp(14px, 2vw, 22px) !important;
}

body.detail-page .detail-card {
  min-width: 0;
  overflow: hidden;
}

body.detail-page .detail-card h3 {
  max-width: 100%;
  font-size: clamp(1.28rem, 1.55vw, 1.78rem) !important;
  line-height: 1.08 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

.cyber-flip-section {
  align-items: center !important;
}

.cyber-flip-carousel {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 20px !important;
  width: min(100%, 780px);
  perspective: 1400px;
}

.cyber-flip-stage {
  position: relative;
  min-height: clamp(360px, 38vw, 430px);
  border: 1px dashed rgba(246, 246, 243, 0.28);
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 58%);
}

.cyber-flip-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(190px, 23vw, 255px);
  min-height: clamp(270px, 31vw, 335px) !important;
  padding: clamp(18px, 2vw, 24px) !important;
  border-color: rgba(246, 246, 243, 0.2) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--flip-accent, #f6f6f3) 18%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015)),
    #090b0a !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
  transform: translate3d(-50%, -50%, 0) rotate(var(--flip-rotate, 0deg));
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.cyber-flip-card::before,
.cyber-flip-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.cyber-flip-card::before {
  inset: 0;
  border: 2px solid var(--flip-accent, rgba(246, 246, 243, 0.7));
  opacity: 0.86;
  mask-image: linear-gradient(90deg, #000 0 42%, transparent 62% 100%);
}

.cyber-flip-card::after {
  inset: -1px;
  background: radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--flip-accent, #f6f6f3) 26%, transparent), transparent 36%);
  opacity: 0.44;
  z-index: -1;
}

.cyber-flip-card:nth-child(1) {
  --flip-accent: #ff7a1a;
  --flip-rotate: -2deg;
  z-index: 4;
  transform: translate3d(calc(-50% - min(26vw, 255px)), -50%, 0) rotate(-2deg);
}

.cyber-flip-card:nth-child(2) {
  --flip-accent: #26c7ef;
  --flip-rotate: 1deg;
  z-index: 5;
  transform: translate3d(-50%, -50%, 38px) scale(1.05) rotate(1deg);
}

.cyber-flip-card:nth-child(3) {
  --flip-accent: #f09cff;
  --flip-rotate: 2deg;
  z-index: 4;
  transform: translate3d(calc(-50% + min(26vw, 255px)), -50%, 0) rotate(2deg);
}

.cyber-flip-card:nth-child(4) {
  --flip-accent: #6d5cff;
  --flip-rotate: 4deg;
  z-index: 2;
  transform: translate3d(calc(-50% + min(41vw, 390px)), -50%, -90px) scale(0.86) rotate(4deg);
  opacity: 0.62;
}

.cyber-flip-card h3 {
  font-size: clamp(1.4rem, 2vw, 2.1rem) !important;
}

.cyber-flip-card p {
  font-size: clamp(0.92rem, 1vw, 1rem);
}

.cyber-flip-card span {
  color: color-mix(in srgb, var(--flip-accent, #f6f6f3) 76%, #fff);
}

.cyber-flip-card:hover,
.cyber-flip-card:focus-visible {
  border-color: color-mix(in srgb, var(--flip-accent, #f6f6f3) 72%, transparent) !important;
}

.cyber-flip-controls {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.cyber-flip-button {
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid rgba(246, 246, 243, 0.42);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.72);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  backdrop-filter: blur(14px);
}

.cyber-flip-button:hover,
.cyber-flip-button:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--dark);
}

html[data-theme="light"] .cyber-flip-stage {
  border-color: rgba(29, 27, 58, 0.22);
  background:
    radial-gradient(circle at 22% 12%, rgba(29, 27, 58, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.4);
}

html[data-theme="light"] .cyber-flip-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--flip-accent, #1d1b3a) 14%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 244, 251, 0.88)),
    #fff !important;
  box-shadow: 0 24px 60px rgba(29, 27, 58, 0.13);
}

html[data-theme="light"] .cyber-flip-button {
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(29, 27, 58, 0.28);
  color: var(--ink);
}

@media (max-width: 980px) {
  body.detail-page .detail-section {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body.detail-page .detail-section h2 {
    max-width: 14ch;
  }
}

@media (max-width: 760px) {
  body.detail-page .detail-hero .detail-back {
    top: 88px;
    left: 18px;
    z-index: 64;
  }

  body.detail-page .detail-hero {
    min-height: 82svh !important;
    align-items: end !important;
    padding: 116px 18px 88px !important;
  }

  body.detail-page .detail-hero::before {
    background-position: center !important;
    opacity: 0.58 !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.62) 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, 0.62) 70%, transparent 100%);
  }

  body.detail-page .detail-hero::after {
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0.28) 0%, rgba(5, 5, 5, 0.54) 50%, #050505 100%),
      linear-gradient(90deg, rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0.5) 58%, rgba(5, 5, 5, 0.18)) !important;
  }

  body.detail-page .detail-hero-inner {
    width: 100% !important;
    max-width: calc(100vw - 36px) !important;
  }

  body.detail-page .detail-hero h1 {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 11vw, 4rem) !important;
    line-height: 0.9 !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  body.detail-page .detail-hero p:not(.eyebrow) {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1rem, 5vw, 1.28rem) !important;
    text-wrap: balance;
  }

  body.detail-page .detail-main {
    margin-top: 0 !important;
    padding-top: 34px !important;
  }

  body.detail-page .detail-section {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  body.detail-page .detail-section h2 {
    max-width: 100%;
    font-size: clamp(2.65rem, 12vw, 4.2rem) !important;
  }

  body.detail-page .detail-card h3 {
    overflow-wrap: normal;
  }

  .cyber-flip-carousel {
    width: 100%;
  }

  .cyber-flip-stage {
    min-height: 0;
    display: grid;
    gap: 14px;
    border: 0;
    overflow: visible;
    background: transparent;
  }

  .cyber-flip-card,
  .cyber-flip-card:nth-child(n) {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 210px !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .cyber-flip-controls {
    display: none;
  }
}

/* Homepage blog carousel at the former consulting-slider position. */
.blog-news-carousel {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: clamp(640px, 86svh, 780px);
  padding: clamp(56px, 6vw, 82px) clamp(18px, 4vw, 64px) clamp(58px, 6vw, 90px);
  overflow: hidden;
  background:
    radial-gradient(780px ellipse at 70% 22%, rgba(255, 255, 255, 0.07), transparent 62%),
    linear-gradient(180deg, #050505 0%, #121212 42%, #050505 100%);
  color: #f6f6f3;
  scroll-margin-top: 96px;
}

.blog-news-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 1px) top / 100% 1px no-repeat;
}

.blog-news-head {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1vw, 12px);
  max-width: 860px;
  margin: 0 auto clamp(18px, 2.2vw, 28px);
  text-align: center;
}

.blog-news-head .section-kicker {
  margin: 0;
}

.blog-news-head h2 {
  max-width: none;
  margin: 0;
  color: #f6f6f3;
  font-size: clamp(2.15rem, 3.8vw, 4.1rem);
  line-height: 1.02;
  font-weight: 920;
  letter-spacing: 0;
  text-wrap: balance;
}

.blog-news-stage {
  position: relative;
  z-index: 1;
  height: clamp(300px, 30vw, 370px);
  perspective: 1400px;
  transform-style: preserve-3d;
}

.blog-news-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(520px, 39vw);
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(246, 246, 243, 0.14);
  border-radius: 8px;
  background: #080808;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 0, -260px) rotateY(0deg) scale(0.74);
  transition:
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 500ms ease,
    filter 760ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 500ms ease;
  filter: saturate(0.72) brightness(0.54);
  will-change: transform, opacity, filter;
}

.blog-news-card.is-active {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 90px) rotateY(0deg) scale(0.96);
  filter: saturate(1.05) brightness(0.96);
  border-color: rgba(246, 246, 243, 0.22);
}

.blog-news-card.is-prev {
  z-index: 2;
  opacity: 0.56;
  pointer-events: auto;
  transform: translate3d(calc(-50% - min(36vw, 520px)), 10px, -120px) rotateY(13deg) scale(0.82);
}

.blog-news-card.is-next {
  z-index: 2;
  opacity: 0.56;
  pointer-events: auto;
  transform: translate3d(calc(-50% + min(36vw, 520px)), 10px, -120px) rotateY(-13deg) scale(0.82);
}

.blog-news-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
  transition: transform 950ms cubic-bezier(0.16, 1, 0.3, 1), filter 760ms ease;
}

.blog-news-card.is-active:hover img,
.blog-news-card.is-active:focus-within img {
  transform: scale(1.085);
}

.blog-news-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.28) 34%, rgba(0, 0, 0, 0.9) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.12) 58%, rgba(0, 0, 0, 0.36));
}

.blog-news-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(24px, 3.3vw, 42px);
  text-align: center;
}

.blog-news-link span {
  color: rgba(246, 246, 243, 0.76);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-news-link h3 {
  max-width: 15ch;
  margin: 0;
  color: #f6f6f3;
  font-size: clamp(1.36rem, 2.28vw, 2.45rem);
  line-height: 1.02;
  font-weight: 920;
  letter-spacing: 0;
  text-wrap: balance;
}

.blog-news-link p {
  max-width: 38ch;
  margin: 0;
  color: rgba(246, 246, 243, 0.74);
  font-size: clamp(0.86rem, 0.94vw, 0.98rem);
  line-height: 1.52;
  font-weight: 620;
}

.blog-news-link em {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 16px 0 18px;
  border-radius: 999px;
  background: #f6f6f3;
  color: #070707;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.blog-news-link em::after {
  content: "→";
  font-size: 1rem;
  line-height: 1;
}

.blog-news-card:not(.is-active) .blog-news-link p,
.blog-news-card:not(.is-active) .blog-news-link em {
  display: none;
}

.blog-news-card:not(.is-active) .blog-news-link h3 {
  font-size: clamp(1.15rem, 1.75vw, 2rem);
}

.blog-news-controls {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(18px, 2.4vw, 30px);
}

.blog-news-nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246, 246, 243, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #f6f6f3;
  font: inherit;
  font-weight: 900;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  transform: translateY(-50%);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.blog-news-nav[data-blog-prev] {
  left: calc(50% - min(330px, 25vw));
}

.blog-news-nav[data-blog-next] {
  right: calc(50% - min(330px, 25vw));
}

.blog-news-nav:hover,
.blog-news-nav:focus-visible {
  background: #f6f6f3;
  border-color: #f6f6f3;
  color: #070707;
  transform: translateY(-50%) scale(1.06);
}

.blog-news-dots {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
}

.blog-news-dot {
  width: 34px;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(246, 246, 243, 0.24);
  color: transparent;
  transition: width 220ms ease, background 220ms ease;
}

.blog-news-dot.is-active {
  width: 54px;
  background: #f6f6f3;
}

.blog-news-all {
  position: relative;
  z-index: 4;
  justify-self: center;
  margin-top: 10px;
  color: rgba(246, 246, 243, 0.68);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[data-theme="light"] .blog-news-carousel {
  background:
    radial-gradient(780px ellipse at 70% 22%, rgba(0, 0, 0, 0.05), transparent 62%),
    linear-gradient(180deg, #f4f4fb 0%, #eeeeF4 42%, #f4f4fb 100%);
  color: #111111;
}

html[data-theme="light"] .blog-news-head h2 {
  color: #111111;
}

html[data-theme="light"] .blog-news-all {
  color: rgba(17, 17, 17, 0.62);
}

@media (max-width: 900px) {
  .blog-news-carousel {
    min-height: auto;
    padding-top: 56px;
  }

  .blog-news-stage {
    height: 390px;
  }

  .blog-news-card {
    width: min(500px, 78vw);
  }

  .blog-news-card.is-prev,
  .blog-news-card.is-next {
    opacity: 0.28;
    transform: translate3d(-50%, 18px, -180px) scale(0.78);
  }

  .blog-news-nav[data-blog-prev] {
    left: clamp(18px, 7vw, 42px);
  }

  .blog-news-nav[data-blog-next] {
    right: clamp(18px, 7vw, 42px);
  }
}

@media (max-width: 640px) {
  .blog-news-carousel {
    padding-left: 16px;
    padding-right: 16px;
  }

  .blog-news-head h2 {
    font-size: clamp(2rem, 9.4vw, 3.2rem);
  }

  .blog-news-stage {
    height: 410px;
  }

  .blog-news-card {
    width: calc(100vw - 32px);
  }

  .blog-news-link {
    padding: 24px;
  }

  .blog-news-link h3 {
    font-size: clamp(1.8rem, 9vw, 2.85rem);
  }

  .blog-news-nav {
    top: auto;
    bottom: 18px;
    width: 44px;
    height: 44px;
    transform: none;
  }

  .blog-news-nav:hover,
  .blog-news-nav:focus-visible {
    transform: scale(1.06);
  }
}

/* Blog and article pages. */
.blog-feature,
.blog-index-section {
  position: relative;
  display: grid;
  gap: clamp(24px, 3vw, 42px);
  padding-top: clamp(54px, 6.5vw, 92px);
  padding-bottom: clamp(76px, 8vw, 122px);
}

.blog-feature {
  scroll-margin-top: 118px;
  background:
    radial-gradient(780px ellipse at 76% 14%, rgba(255, 255, 255, 0.055), transparent 62%),
    linear-gradient(180deg, #050505 0%, #080808 48%, #050505 100%);
}

.blog-feature-head,
.blog-index-copy {
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  max-width: 900px;
}

.blog-feature-head {
  justify-self: center;
  justify-items: center;
  text-align: center;
}

.blog-feature-head h2,
.blog-index-copy h2 {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(2.55rem, 4.4vw, 4.8rem);
  line-height: 0.96;
  font-weight: 920;
  letter-spacing: 0;
  text-wrap: balance;
}

.blog-feature-head h2 {
  max-width: none;
  font-size: clamp(2.05rem, 3.5vw, 3.7rem);
}

.blog-feature-head p:not(.section-kicker) {
  max-width: 46ch;
  margin: 0;
  color: rgba(246, 246, 243, 0.62);
  font-size: clamp(1rem, 1.18vw, 1.16rem);
  line-height: 1.5;
  font-weight: 620;
}

.blog-hero-card {
  position: relative;
  min-height: clamp(360px, 38vw, 510px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  color: #f6f6f3;
  background: #060606;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.22), inset 0 -1px 0 rgba(246, 246, 243, 0.16);
}

.blog-hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.blog-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.24) 42%, rgba(0, 0, 0, 0.86) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, 0.82), rgba(5, 5, 5, 0.28) 48%, rgba(5, 5, 5, 0.42));
  pointer-events: none;
}

.blog-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  filter: saturate(1.02) contrast(1.02) brightness(0.9);
  transform: scale(1.01);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-hero-card:hover .blog-hero-image img,
.blog-hero-card:focus-visible .blog-hero-image img {
  filter: saturate(1.12) contrast(1.04) brightness(0.98);
  transform: scale(1.055);
}

.blog-hero-content {
  position: relative;
  z-index: 1;
  width: min(780px, calc(100% - clamp(34px, 8vw, 104px)));
  display: grid;
  gap: clamp(12px, 1.8vw, 20px);
  padding: clamp(32px, 5vw, 64px);
}

.blog-hero-content small,
.blog-readmore {
  color: rgba(246, 246, 243, 0.68);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-hero-content strong {
  max-width: 14ch;
  font-size: clamp(1.95rem, 4.2vw, 4.75rem);
  line-height: 0.96;
  font-weight: 930;
  letter-spacing: 0;
  text-wrap: balance;
}

.blog-hero-content em {
  max-width: 48ch;
  color: rgba(246, 246, 243, 0.72);
  font-size: clamp(1rem, 1.18vw, 1.18rem);
  font-style: normal;
  line-height: 1.56;
  font-weight: 620;
}

.blog-readmore {
  color: #f6f6f3;
}

.blog-feature-actions {
  display: flex;
  justify-content: flex-end;
}

.blog-main {
  padding-bottom: clamp(60px, 8vw, 110px);
}

.blog-index-section {
  width: min(1180px, calc(100% - clamp(36px, 8vw, 112px)));
  margin: 0 auto;
  padding-top: clamp(54px, 6vw, 88px);
}

.blog-index-grid {
  display: grid;
}

.blog-index-card {
  min-height: clamp(430px, 42vw, 560px);
}

body.page-blog .detail-hero h1,
body.article-page .detail-hero h1 {
  white-space: normal !important;
  max-width: 14ch !important;
  font-size: clamp(2.7rem, 6vw, 6.8rem) !important;
  line-height: 0.96 !important;
  text-wrap: balance;
}

body.article-page .detail-hero h1 {
  max-width: 17ch !important;
  font-size: clamp(2.3rem, 4.7vw, 5.7rem) !important;
}

.blog-article {
  background: #050505;
  padding-bottom: clamp(70px, 9vw, 128px);
}

.article-feature-image {
  width: min(1180px, calc(100% - clamp(32px, 8vw, 112px)));
  margin: 0 auto clamp(44px, 6vw, 84px);
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.34);
}

.article-feature-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

.article-body {
  width: min(820px, calc(100% - clamp(34px, 8vw, 112px)));
  margin: 0 auto;
  color: rgba(246, 246, 243, 0.74);
  font-size: clamp(1.02rem, 1.18vw, 1.18rem);
  line-height: 1.78;
}

.article-body p,
.article-body ul {
  margin: 0 0 1.45em;
}

.article-lead {
  color: #f6f6f3;
  font-size: clamp(1.25rem, 2vw, 1.72rem);
  line-height: 1.48;
  font-weight: 760;
}

.article-body h2 {
  margin: clamp(42px, 5vw, 64px) 0 0.72em;
  color: #f6f6f3;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.article-body ul {
  padding-left: 1.1em;
}

.article-body li + li {
  margin-top: 1em;
}

.article-body a:not(.button) {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(34px, 5vw, 58px);
}

html[data-theme="light"] .blog-feature,
html[data-theme="light"] .blog-article,
html[data-theme="light"] .blog-main {
  background: #f4f4fb !important;
}

html[data-theme="light"] .blog-feature {
  color: #111111;
}

html[data-theme="light"] .blog-hero-card {
  color: #ffffff;
}

html[data-theme="light"] .article-body,
html[data-theme="light"] .article-body h2,
html[data-theme="light"] .article-lead {
  color: #111111;
}

html[data-theme="light"] .article-body a:not(.button) {
  color: #0d5f59;
}

@media (max-width: 760px) {
  .blog-feature,
  .blog-index-section {
    padding-top: 52px;
    padding-bottom: 72px;
  }

  .blog-feature-head h2,
  .blog-index-copy h2 {
    max-width: 11ch;
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .blog-hero-card,
  .blog-index-card {
    min-height: 480px;
  }

  .blog-hero-content {
    width: 100%;
    padding: 26px;
  }

  .blog-hero-content strong {
    max-width: 12ch;
    font-size: clamp(2.1rem, 10vw, 3.6rem);
  }

  .blog-hero-content em {
    max-width: 30ch;
  }

  .blog-feature-actions {
    justify-content: flex-start;
  }

  body.article-page .detail-hero h1 {
    max-width: 13ch !important;
    font-size: clamp(2rem, 10vw, 4rem) !important;
  }

  .article-feature-image img {
    aspect-ratio: 4 / 3;
  }

  .article-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Laptop concept normalization: keep the software screen readable and grid-based. */
.software-laptop-interface {
  gap: clamp(6px, 0.62vw, 10px) !important;
  padding: clamp(12px, 1.55vw, 26px) !important;
}

.software-laptop-interface .software-tabbar {
  width: min(680px, 78%) !important;
}

.software-laptop-interface .software-screen {
  overflow: hidden !important;
}

.software-laptop-interface .software-panel {
  padding: clamp(18px, 2.25vw, 36px) !important;
}

.software-laptop-interface .software-dashboard {
  grid-template-columns: minmax(0, 1.02fr) minmax(230px, 0.78fr) !important;
  gap: clamp(12px, 1.45vw, 22px) !important;
  align-items: stretch;
}

.software-laptop-interface .software-dashboard-main,
.software-laptop-interface .software-dashboard-side {
  gap: clamp(10px, 1vw, 16px) !important;
}

.software-laptop-interface .software-panel-head {
  gap: clamp(7px, 0.72vw, 10px) !important;
}

.software-laptop-interface .software-panel-head small {
  padding: 5px 9px !important;
  font-size: clamp(0.58rem, 0.62vw, 0.68rem) !important;
}

.software-laptop-interface .software-panel h3 {
  max-width: 10.5ch !important;
  font-size: clamp(2rem, 3.25vw, 3.9rem) !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
  overflow-wrap: normal !important;
}

.software-laptop-interface .software-panel p {
  max-width: 42ch !important;
  font-size: clamp(0.78rem, 0.98vw, 1.05rem) !important;
  line-height: 1.45 !important;
}

.software-laptop-interface .software-status-grid,
.software-laptop-interface .software-module-grid,
.software-laptop-interface .software-roadmap {
  gap: clamp(7px, 0.75vw, 10px) !important;
}

.software-laptop-interface .software-status-grid div,
.software-laptop-interface .software-module-grid div,
.software-laptop-interface .software-roadmap div {
  min-height: clamp(62px, 6.2vw, 86px) !important;
  padding: clamp(9px, 1vw, 13px) !important;
}

.software-laptop-interface .software-card {
  min-height: 0 !important;
  padding: clamp(11px, 1.15vw, 16px) !important;
  gap: 9px !important;
}

.software-laptop-interface .software-status-grid span,
.software-laptop-interface .software-module-grid span,
.software-laptop-interface .software-card span,
.software-laptop-interface .software-roadmap span {
  font-size: clamp(0.55rem, 0.58vw, 0.66rem) !important;
}

.software-laptop-interface .software-status-grid strong,
.software-laptop-interface .software-card strong {
  font-size: clamp(1.15rem, 1.85vw, 2.05rem) !important;
  line-height: 1 !important;
}

.software-laptop-interface .software-module-grid strong,
.software-laptop-interface .software-roadmap strong {
  font-size: clamp(0.72rem, 0.82vw, 0.92rem) !important;
}

.software-laptop-interface .software-status-grid em,
.software-laptop-interface .software-card em,
.software-laptop-interface .software-roadmap em,
.software-laptop-interface .software-card ul {
  font-size: clamp(0.62rem, 0.72vw, 0.78rem) !important;
  line-height: 1.28 !important;
}

.software-laptop-interface .software-card ul {
  gap: 7px !important;
}

@media (max-width: 760px) {
  .software-laptop-interface .software-dashboard {
    grid-template-columns: 1fr !important;
  }

  .software-laptop-interface .software-dashboard-side {
    display: none !important;
  }

  .software-laptop-interface .software-panel h3 {
    font-size: clamp(1.72rem, 8vw, 2.8rem) !important;
  }
}

/* Homepage solutions showcase: high-impact product system section. */
.solutions {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(88px, 9vw, 142px) clamp(18px, 4vw, 64px) clamp(104px, 10vw, 164px) !important;
  overflow: hidden;
  background: linear-gradient(180deg, #050505 0%, #070707 34%, #050505 100%);
  color: #f6f6f3;
}

.solutions::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(246, 246, 243, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(246, 246, 243, 0.04) 1px, transparent 1px);
  background-size: clamp(62px, 6vw, 96px) clamp(62px, 6vw, 96px);
  mask-image: radial-gradient(ellipse at 50% 44%, #000 0%, rgba(0, 0, 0, 0.55) 48%, transparent 78%);
  opacity: 0.72;
}

.solutions::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(800px ellipse at 74% 20%, rgba(255, 255, 255, 0.1), transparent 62%),
    radial-gradient(680px ellipse at 18% 76%, rgba(122, 176, 141, 0.12), transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 1px) top / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(255, 255, 255, 0.08), transparent 1px) bottom / 100% 1px no-repeat;
}

.solutions-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.solutions-backdrop span {
  position: absolute;
  border: 1px solid rgba(246, 246, 243, 0.11);
  transform: rotate(45deg);
}

.solutions-backdrop span:nth-child(1) {
  top: clamp(70px, 9vw, 130px);
  right: min(13vw, 180px);
  width: clamp(110px, 16vw, 240px);
  aspect-ratio: 1;
}

.solutions-backdrop span:nth-child(2) {
  left: -72px;
  bottom: 11%;
  width: clamp(160px, 23vw, 330px);
  aspect-ratio: 1;
  opacity: 0.5;
}

.solutions-backdrop span:nth-child(3) {
  right: -58px;
  bottom: clamp(28px, 6vw, 90px);
  width: clamp(120px, 18vw, 260px);
  aspect-ratio: 1;
  opacity: 0.44;
}

.solutions-inner {
  position: relative;
  z-index: 1;
  width: min(1220px, 100%);
  margin: 0 auto;
}

.solutions .section-kicker {
  color: rgba(246, 246, 243, 0.72) !important;
}

.solutions-head {
  align-items: center;
  margin-bottom: clamp(28px, 3.6vw, 50px) !important;
}

.solutions-head h2 {
  max-width: 13.6ch !important;
  color: #f8f8f4;
  text-shadow: 0 24px 74px rgba(0, 0, 0, 0.62);
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.solutions-head p {
  max-width: 42ch;
  color: rgba(246, 246, 243, 0.66) !important;
  font-weight: 560;
}

.solutions-showcase {
  position: relative;
  min-height: clamp(330px, 28vw, 380px);
  display: grid;
  align-items: end;
  isolation: isolate;
}

.solutions-system {
  position: absolute;
  left: 50%;
  top: -2%;
  z-index: 0;
  width: min(470px, 42vw);
  aspect-ratio: 1;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  opacity: 0.66;
  mask-image: linear-gradient(180deg, #000 0%, #000 54%, rgba(0, 0, 0, 0.36) 72%, transparent 100%);
}

.solutions-system-grid {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49.75%, rgba(246, 246, 243, 0.18) 50%, transparent 50.25%),
    linear-gradient(180deg, transparent 49.75%, rgba(246, 246, 243, 0.18) 50%, transparent 50.25%),
    repeating-radial-gradient(circle, rgba(246, 246, 243, 0.14) 0 1px, transparent 1px 34px);
  mask-image: radial-gradient(circle, transparent 0 20%, #000 21% 67%, transparent 68%);
  animation: solutionSpin 28s linear infinite;
}

.solutions-system-ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(246, 246, 243, 0.22);
  box-shadow: inset 0 0 42px rgba(246, 246, 243, 0.035), 0 0 64px rgba(122, 176, 141, 0.08);
}

.solutions-system-ring.ring-two {
  inset: 24%;
  border-style: dashed;
  border-color: rgba(246, 246, 243, 0.18);
  animation: solutionSpin 22s linear infinite reverse;
}

.solutions-system-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(128px, 13vw, 176px);
  aspect-ratio: 1;
  border: 1px solid rgba(246, 246, 243, 0.26);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.22), transparent 42%),
    rgba(10, 10, 10, 0.86);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translate3d(-50%, -50%, 0);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.solutions-system-core span,
.solutions-system-core strong {
  grid-area: 1 / 1;
}

.solutions-system-core span {
  align-self: start;
  margin-top: 34%;
  color: rgba(246, 246, 243, 0.5);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.solutions-system-core strong {
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.9rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0;
}

.solutions-node {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 62px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(246, 246, 243, 0.2);
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.78);
  color: rgba(246, 246, 243, 0.78);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  animation: solutionFloat 6s ease-in-out infinite;
}

.node-one { left: 17%; top: 28%; }
.node-two { right: 12%; top: 38%; animation-delay: -1.4s; }
.node-three { left: 28%; bottom: 13%; animation-delay: -2.8s; }
.node-four { right: 26%; bottom: 20%; animation-delay: -4.2s; }

.solutions-card-grid {
  position: relative;
  z-index: 2;
  transform: translateY(clamp(-44px, -3.2vw, -28px));
  margin-bottom: clamp(-44px, -3.2vw, -28px);
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.8vw, 22px) !important;
  align-items: stretch;
  border: 0 !important;
  background: transparent !important;
  perspective: 1200px;
}

.solutions .solution-card {
  position: relative;
  min-height: clamp(286px, 28vw, 360px) !important;
  padding: clamp(22px, 2.3vw, 30px) !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto;
  align-content: start !important;
  gap: clamp(16px, 1.7vw, 24px) !important;
  overflow: hidden;
  border: 1px solid rgba(246, 246, 243, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035) 46%, rgba(255, 255, 255, 0.055)),
    rgba(9, 9, 9, 0.78) !important;
  color: #f6f6f3 !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  transform-style: preserve-3d;
  transition:
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 420ms ease,
    background 420ms ease,
    box-shadow 620ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.solutions .solution-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  background:
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 18%), rgba(255, 255, 255, 0.24), transparent 44%),
    linear-gradient(135deg, rgba(246, 246, 243, 0.2), transparent 31%, transparent 66%, rgba(246, 246, 243, 0.1));
  opacity: 0;
  transition: opacity 420ms ease;
}

.solutions .solution-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 246, 243, 0.7), transparent);
  opacity: 0.28;
}

.solutions .solution-card:hover,
.solutions .solution-card:focus-visible {
  transform: translate3d(0, -12px, 64px) rotateX(4deg) !important;
  border-color: rgba(246, 246, 243, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045) 48%, rgba(255, 255, 255, 0.08)),
    rgba(13, 13, 13, 0.86) !important;
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.52) !important;
}

.solutions .solution-card:hover::before,
.solutions .solution-card:focus-visible::before {
  opacity: 1;
}

.solutions .solution-card > * {
  position: relative;
  z-index: 1;
}

.solution-card-top {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: none !important;
  color: rgba(246, 246, 243, 0.62) !important;
}

.solution-card-top span,
.solution-card-top em {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: inherit !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.7rem !important;
  font-weight: 900;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.solution-card-top em {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(246, 246, 243, 0.14);
  border-radius: 999px;
  background: rgba(246, 246, 243, 0.055);
  font-style: normal;
  white-space: nowrap;
}

.solutions .solution-card strong {
  max-width: 100% !important;
  color: #ffffff !important;
  font-size: clamp(1.28rem, 1.55vw, 1.86rem) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  text-wrap: balance;
  transition: color 320ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.solutions .solution-card small {
  max-width: 28ch !important;
  color: rgba(246, 246, 243, 0.58) !important;
  font-size: clamp(0.9rem, 1vw, 1.02rem) !important;
  line-height: 1.54 !important;
  font-weight: 630;
  align-self: start;
}

.solutions .solution-card:hover strong,
.solutions .solution-card:focus-visible strong {
  color: #f6f6f3 !important;
  transform: translate3d(0, -3px, 0);
}

.solution-card-line {
  align-self: end;
  display: block !important;
  width: 100%;
  height: 3px;
  max-width: none !important;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(246, 246, 243, 0.12) !important;
}

.solution-card-line::before {
  content: "";
  display: block;
  width: 58%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f6f6f3, rgba(122, 176, 141, 0.92));
  transform: translateX(-102%);
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}

.solutions .solution-card:hover .solution-card-line::before,
.solutions .solution-card:focus-visible .solution-card-line::before {
  transform: translateX(0);
}

html[data-theme="light"] .solutions {
  background: linear-gradient(180deg, #f4f4fb 0%, #ececf3 45%, #f4f4fb 100%);
  color: #111111;
}

html[data-theme="light"] .solutions::before {
  background:
    linear-gradient(90deg, rgba(17, 17, 17, 0.075) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 17, 17, 0.055) 1px, transparent 1px);
}

html[data-theme="light"] .solutions::after {
  background:
    radial-gradient(800px ellipse at 74% 20%, rgba(17, 17, 17, 0.08), transparent 62%),
    radial-gradient(680px ellipse at 18% 76%, rgba(13, 95, 89, 0.12), transparent 66%),
    linear-gradient(180deg, rgba(17, 17, 17, 0.08), transparent 1px) top / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(17, 17, 17, 0.08), transparent 1px) bottom / 100% 1px no-repeat;
}

html[data-theme="light"] .solutions .section-kicker,
html[data-theme="light"] .solutions-head p,
html[data-theme="light"] .solutions .solution-card small,
html[data-theme="light"] .solution-card-top {
  color: rgba(17, 17, 17, 0.62) !important;
}

html[data-theme="light"] .solutions-head h2,
html[data-theme="light"] .solutions .solution-card strong {
  color: #111111 !important;
  text-shadow: none;
}

html[data-theme="light"] .solutions-system-core,
html[data-theme="light"] .solutions-node,
html[data-theme="light"] .solutions .solution-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.48)),
    rgba(244, 244, 251, 0.72) !important;
  border-color: rgba(17, 17, 17, 0.13);
  color: #111111 !important;
  box-shadow: 0 24px 80px rgba(17, 17, 17, 0.11);
}

html[data-theme="light"] .solutions-system-core strong {
  color: #111111;
}

html[data-theme="light"] .solutions-system-core span,
html[data-theme="light"] .solutions-node {
  color: rgba(17, 17, 17, 0.62);
}

html[data-theme="light"] .solutions-system-ring {
  border-color: rgba(17, 17, 17, 0.18);
  box-shadow: inset 0 0 42px rgba(17, 17, 17, 0.035), 0 0 64px rgba(13, 95, 89, 0.08);
}

html[data-theme="light"] .solution-card-top em {
  border-color: rgba(17, 17, 17, 0.11);
  background: rgba(17, 17, 17, 0.045);
}

html[data-theme="light"] .solution-card-line {
  background: rgba(17, 17, 17, 0.12) !important;
}

html[data-theme="light"] .solution-card-line::before {
  background: linear-gradient(90deg, #111111, rgba(13, 95, 89, 0.82));
}

@keyframes solutionSpin {
  to { transform: rotate(360deg); }
}

@keyframes solutionFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

@media (max-width: 1080px) {
  .solutions-showcase {
    min-height: auto;
    padding-top: clamp(240px, 35vw, 360px);
  }

  .solutions-system {
    top: clamp(126px, 22vw, 210px);
    width: min(520px, 78vw);
  }

  .solutions-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .solutions {
    padding-inline: 16px !important;
    padding-top: 82px !important;
  }

  .solutions-head {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 38px !important;
  }

  .solutions-head h2 {
    max-width: 11ch !important;
    font-size: clamp(2.7rem, 13.4vw, 4.4rem) !important;
  }

  .solutions-showcase {
    padding-top: 300px;
  }

  .solutions-system {
    width: min(360px, 94vw);
    top: 150px;
  }

  .solutions-node {
    min-width: 54px;
    min-height: 30px;
    font-size: 0.62rem;
  }

  .node-one { left: 9%; top: 27%; }
  .node-two { right: 5%; top: 38%; }
  .node-three { left: 18%; bottom: 12%; }
  .node-four { right: 18%; bottom: 17%; }

  .solutions-card-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .solutions .solution-card {
    min-height: 250px !important;
  }

  .solutions .solution-card:hover,
  .solutions .solution-card:focus-visible {
    transform: translate3d(0, -6px, 0) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solutions-system-grid,
  .solutions-system-ring,
  .solutions-node {
    animation: none !important;
  }
}

html[data-theme="dark"] .solutions .solution-card {
  min-height: clamp(286px, 28vw, 360px) !important;
  padding: clamp(22px, 2.3vw, 30px) !important;
  border: 1px solid rgba(246, 246, 243, 0.14) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035) 46%, rgba(255, 255, 255, 0.055)),
    rgba(9, 9, 9, 0.78) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  color: #f6f6f3 !important;
}

html[data-theme="dark"] .solutions .solution-card::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  left: -1px !important;
  top: -1px !important;
  width: auto !important;
  height: auto !important;
  z-index: 0 !important;
  background:
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 18%), rgba(255, 255, 255, 0.24), transparent 44%),
    linear-gradient(135deg, rgba(246, 246, 243, 0.2), transparent 31%, transparent 66%, rgba(246, 246, 243, 0.1)) !important;
  opacity: 0 !important;
  transition: opacity 420ms ease !important;
}

html[data-theme="dark"] .solutions .solution-card:hover::before,
html[data-theme="dark"] .solutions .solution-card:focus-visible::before {
  opacity: 1 !important;
}

html[data-theme="dark"] .solutions .solution-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 18px 0 !important;
  width: auto !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(246, 246, 243, 0.7), transparent) !important;
  opacity: 0.28 !important;
}

html[data-theme="dark"] .solutions .solution-card:hover,
html[data-theme="dark"] .solutions .solution-card:focus-visible {
  border-color: rgba(246, 246, 243, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.045) 48%, rgba(255, 255, 255, 0.08)),
    rgba(13, 13, 13, 0.86) !important;
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.52) !important;
}

/* Solutions section refinement: less synthetic dashboard, more concrete product showcase. */
.solutions {
  padding-top: clamp(82px, 8vw, 126px) !important;
  padding-bottom: clamp(92px, 9vw, 142px) !important;
  background:
    radial-gradient(900px ellipse at 72% 24%, rgba(255, 255, 255, 0.075), transparent 66%),
    linear-gradient(180deg, #050505 0%, #0a0a0a 46%, #050505 100%) !important;
}

.solutions::before {
  background:
    linear-gradient(180deg, rgba(246, 246, 243, 0.07), transparent 1px) top / 100% 1px no-repeat,
    linear-gradient(0deg, rgba(246, 246, 243, 0.07), transparent 1px) bottom / 100% 1px no-repeat !important;
  mask-image: none !important;
  opacity: 1 !important;
}

.solutions::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.035)) !important;
}

.solutions-backdrop span {
  border-color: rgba(246, 246, 243, 0.075) !important;
}

.solutions-head {
  position: relative;
  z-index: 3;
  margin-bottom: clamp(30px, 4vw, 58px) !important;
}

.solutions-head h2 {
  max-width: 12.8ch !important;
}

.solutions-head p {
  max-width: 38ch;
  color: rgba(246, 246, 243, 0.7) !important;
  font-weight: 650;
}

.solutions-showcase {
  min-height: 0 !important;
  display: grid !important;
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch !important;
}

.solutions-system {
  display: none !important;
}

.solutions-feature {
  position: relative;
  z-index: 1;
  min-height: clamp(260px, 30vw, 390px);
  height: clamp(260px, 30vw, 390px);
  overflow: hidden;
  border: 1px solid rgba(246, 246, 243, 0.12);
  border-radius: 8px;
  background: #0b0b0b;
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.34);
}

.solutions-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.95) contrast(1.05) brightness(0.68);
  transform: scale(1.03);
  transition: transform 1200ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms ease;
}

.solutions-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.88) 0%, rgba(5, 5, 5, 0.56) 38%, rgba(5, 5, 5, 0.08) 72%, rgba(5, 5, 5, 0.42) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.08) 0%, rgba(5, 5, 5, 0.14) 48%, rgba(5, 5, 5, 0.78) 100%);
}

.solutions-feature::after {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(246, 246, 243, 0.12);
  border-radius: 5px;
}

.solutions-feature:hover img {
  filter: saturate(1.05) contrast(1.06) brightness(0.78);
  transform: scale(1.07);
}

.solutions-feature-copy {
  position: absolute;
  left: clamp(24px, 4vw, 56px);
  bottom: clamp(58px, 6vw, 86px);
  z-index: 3;
  display: grid;
  gap: clamp(10px, 1.2vw, 14px);
  max-width: min(560px, 56vw);
}

.solutions-feature-copy span {
  color: rgba(246, 246, 243, 0.72);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.solutions-feature-copy strong {
  color: #f8f8f4;
  font-size: clamp(2rem, 4.2vw, 5.2rem);
  line-height: 0.94;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 18px 54px rgba(0, 0, 0, 0.66);
}

.solutions-process {
  position: absolute;
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(22px, 2.7vw, 36px);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(246, 246, 243, 0.22);
}

.solutions-process span {
  position: relative;
  padding-top: 14px;
  color: rgba(246, 246, 243, 0.68);
  font-size: clamp(0.72rem, 0.82vw, 0.88rem);
  font-weight: 850;
}

.solutions-process span::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f6f6f3;
  box-shadow: 0 0 0 6px rgba(246, 246, 243, 0.09);
}

.solutions-card-grid {
  transform: none !important;
  margin-bottom: 0 !important;
  gap: clamp(12px, 1.45vw, 18px) !important;
}

.solutions .solution-card,
html[data-theme="dark"] .solutions .solution-card {
  min-height: clamp(250px, 22vw, 310px) !important;
  padding: clamp(22px, 2vw, 28px) !important;
  border: 1px solid rgba(246, 246, 243, 0.14) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 46%, rgba(255, 255, 255, 0.045)),
    #0a0a0a !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

.solutions .solution-card:nth-child(even) {
  margin-top: clamp(18px, 2.2vw, 34px);
}

.solutions .solution-card::before,
html[data-theme="dark"] .solutions .solution-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: 0 !important;
  opacity: 0.9 !important;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(246, 246, 243, 0.12) 42.3% 42.7%, transparent 43% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 44%) !important;
  transition: opacity 420ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.solutions .solution-card::after,
html[data-theme="dark"] .solutions .solution-card::after {
  content: "" !important;
  position: absolute !important;
  left: clamp(22px, 2vw, 28px) !important;
  right: clamp(22px, 2vw, 28px) !important;
  bottom: clamp(22px, 2vw, 28px) !important;
  width: auto !important;
  height: 1px !important;
  background: rgba(246, 246, 243, 0.2) !important;
  opacity: 1 !important;
}

.solutions .solution-card:hover,
.solutions .solution-card:focus-visible,
html[data-theme="dark"] .solutions .solution-card:hover,
html[data-theme="dark"] .solutions .solution-card:focus-visible {
  transform: translate3d(0, -8px, 0) !important;
  border-color: rgba(246, 246, 243, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.025) 48%, rgba(255, 255, 255, 0.06)),
    #101010 !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34) !important;
}

.solutions .solution-card:hover::before,
.solutions .solution-card:focus-visible::before,
html[data-theme="dark"] .solutions .solution-card:hover::before,
html[data-theme="dark"] .solutions .solution-card:focus-visible::before {
  opacity: 1 !important;
  transform: translate3d(10px, 0, 0);
}

.solution-card-top {
  align-items: flex-start;
}

.solution-card-top em {
  background: transparent !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(246, 246, 243, 0.24) !important;
  padding: 0 0 6px !important;
}

.solutions .solution-card strong {
  font-size: clamp(1.55rem, 2vw, 2.38rem) !important;
  line-height: 0.98 !important;
  max-width: 9.5ch !important;
}

.solutions .solution-card small {
  max-width: 25ch !important;
  color: rgba(246, 246, 243, 0.62) !important;
  font-weight: 660;
}

.solution-card-line {
  height: 1px !important;
  background: transparent !important;
}

.solution-card-line::before {
  width: 100%;
  background: #f6f6f3 !important;
  transform: scaleX(0) !important;
  transform-origin: left center;
}

.solutions .solution-card:hover .solution-card-line::before,
.solutions .solution-card:focus-visible .solution-card-line::before {
  transform: scaleX(1) !important;
}

html[data-theme="light"] .solutions {
  background:
    radial-gradient(900px ellipse at 72% 24%, rgba(17, 17, 17, 0.055), transparent 66%),
    linear-gradient(180deg, #f4f4fb 0%, #ededf4 46%, #f4f4fb 100%) !important;
}

html[data-theme="light"] .solutions .solution-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.4)),
    #f7f7fb !important;
}

html[data-theme="light"] .solutions .solution-card:hover,
html[data-theme="light"] .solutions .solution-card:focus-visible {
  background: #ffffff !important;
  box-shadow: 0 28px 70px rgba(17, 17, 17, 0.14) !important;
}

html[data-theme="light"] .solution-card-top em {
  border-bottom-color: rgba(17, 17, 17, 0.2) !important;
}

html[data-theme="light"] .solutions .solution-card::after {
  background: rgba(17, 17, 17, 0.16) !important;
}

@media (max-width: 1080px) {
  .solutions-showcase {
    padding-top: 0 !important;
  }

  .solutions-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .solutions-head h2 {
    max-width: 10.5ch !important;
  }

  .solutions-feature {
    min-height: 520px;
    height: 520px;
  }

  .solutions-feature::after {
    inset: 14px;
  }

  .solutions-feature-copy {
    left: 24px;
    right: 24px;
    bottom: 118px;
    max-width: none;
  }

  .solutions-feature-copy strong {
    font-size: clamp(2.2rem, 11vw, 3.8rem);
  }

  .solutions-process {
    left: 24px;
    right: 24px;
    bottom: 24px;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
    border-top: 0;
  }

  .solutions-process span {
    padding-top: 0;
    padding-left: 16px;
  }

  .solutions-process span::before {
    left: 0;
    top: 0.45em;
    width: 6px;
  }

  .solutions .solution-card:nth-child(even) {
    margin-top: 0;
  }

  .solutions .solution-card strong {
    max-width: 11ch !important;
  }
}

/* Final solutions tone: editorial, concrete, compact. */
.solutions-backdrop {
  display: none !important;
}

.solutions {
  padding-top: clamp(70px, 7vw, 108px) !important;
  padding-bottom: clamp(78px, 8vw, 124px) !important;
}

.solutions-head {
  margin-bottom: clamp(24px, 3vw, 42px) !important;
}

.solutions-head h2 {
  max-width: 12.3ch !important;
  font-size: clamp(2.75rem, 4.15vw, 4.9rem) !important;
}

.solutions-feature {
  height: clamp(230px, 21vw, 292px) !important;
  min-height: clamp(230px, 21vw, 292px) !important;
  border-color: rgba(246, 246, 243, 0.18) !important;
  box-shadow: none !important;
}

.solutions-feature::before {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.72) 36%, rgba(5, 5, 5, 0.2) 70%, rgba(5, 5, 5, 0.34) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.06) 0%, rgba(5, 5, 5, 0.18) 56%, rgba(5, 5, 5, 0.58) 100%) !important;
}

.solutions-feature::after {
  inset: 16px !important;
  border-color: rgba(246, 246, 243, 0.15) !important;
}

.solutions-feature img {
  object-position: 68% center !important;
  filter: saturate(0.9) contrast(1.08) brightness(0.72) !important;
}

.solutions-feature-copy {
  left: clamp(24px, 3.5vw, 46px) !important;
  bottom: clamp(62px, 5.4vw, 78px) !important;
  max-width: min(420px, 46vw) !important;
}

.solutions-feature-copy span {
  font-size: clamp(0.62rem, 0.68vw, 0.72rem) !important;
}

.solutions-feature-copy strong {
  max-width: 10ch;
  font-size: clamp(1.55rem, 2.48vw, 2.9rem) !important;
  line-height: 0.98 !important;
}

.solutions-process {
  left: clamp(24px, 3.5vw, 46px) !important;
  right: clamp(24px, 3.5vw, 46px) !important;
  bottom: clamp(18px, 2vw, 26px) !important;
}

.solutions-card-grid {
  margin-top: clamp(-118px, -8.5vw, -78px) !important;
  z-index: 4 !important;
}

.solutions .solution-card,
html[data-theme="dark"] .solutions .solution-card {
  min-height: clamp(214px, 17vw, 252px) !important;
}

.solutions .solution-card:nth-child(even) {
  margin-top: clamp(10px, 1.3vw, 20px) !important;
}

.solutions .solution-card strong {
  max-width: 10.5ch !important;
  font-size: clamp(1.34rem, 1.62vw, 1.95rem) !important;
}

.solutions .solution-card small {
  max-width: 24ch !important;
  font-size: clamp(0.8rem, 0.84vw, 0.92rem) !important;
}

@media (max-width: 680px) {
  .solutions-head h2 {
    font-size: clamp(2.55rem, 12vw, 4rem) !important;
  }

  .solutions-feature {
    height: 430px !important;
    min-height: 430px !important;
  }

  .solutions-feature-copy {
    bottom: 116px !important;
    max-width: calc(100% - 48px) !important;
  }

  .solutions-feature-copy strong {
    max-width: 10.5ch;
    font-size: clamp(2rem, 9.8vw, 3.2rem) !important;
  }

  .solutions-card-grid {
    margin-top: 0 !important;
  }

  .solutions .solution-card:nth-child(even) {
    margin-top: 0 !important;
  }
}

/* Beratung page polish: denser rhythm, tactile service cards and a clearer process path. */
body.page-beratung main {
  background:
    linear-gradient(180deg, #050505 0%, #080808 32%, #050505 100%),
    #050505;
}

body.page-beratung .detail-main {
  width: min(1320px, calc(100vw - clamp(36px, 7vw, 104px))) !important;
  padding-top: clamp(24px, 4vw, 48px) !important;
  padding-bottom: clamp(30px, 4.8vw, 62px) !important;
}

body.page-beratung .detail-hero h1 {
  font-size: clamp(4.4rem, 8vw, 8.2rem) !important;
  white-space: normal !important;
  text-wrap: balance;
}

body.page-beratung .detail-section {
  position: relative;
  overflow: hidden;
  border-top-color: rgba(246, 246, 243, 0.11) !important;
}

body.page-beratung .detail-section h2,
body.page-beratung .detail-section h3,
body.page-beratung .detail-card h3 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

body.page-beratung .detail-section:first-child {
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr) !important;
  align-items: stretch;
  margin-top: clamp(-22px, -1.4vw, -10px);
  padding: clamp(30px, 4vw, 54px) !important;
  border: 1px solid rgba(246, 246, 243, 0.13) !important;
  border-radius: 8px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 46%, transparent 68%),
    radial-gradient(680px ellipse at 86% 12%, rgba(255, 255, 255, 0.09), transparent 62%),
    #090909;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
}

body.page-beratung .detail-section:first-child::after {
  content: "";
  position: absolute;
  right: clamp(22px, 4vw, 58px);
  bottom: clamp(20px, 3vw, 42px);
  width: min(440px, 38%);
  aspect-ratio: 1.7;
  border: 1px solid rgba(246, 246, 243, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.86), rgba(5, 5, 5, 0.28)),
    var(--detail-hero-image) var(--detail-hero-position) / cover no-repeat;
  filter: saturate(0.82) contrast(1.05) brightness(0.7);
  opacity: 0.62;
  pointer-events: none;
}

body.page-beratung .detail-section:first-child h2,
body.page-beratung .detail-section:first-child .detail-copy {
  position: relative;
  z-index: 1;
}

body.page-beratung .detail-section:first-child h2 {
  max-width: 8.5ch;
  align-self: center;
}

body.page-beratung .detail-section:first-child .detail-copy {
  max-width: 68ch;
  align-content: center;
  padding-right: min(24vw, 300px);
}

body.page-beratung .detail-section:nth-of-type(2) {
  padding-top: clamp(70px, 8vw, 112px) !important;
}

body.page-beratung .detail-grid {
  counter-reset: beratung-card;
  gap: clamp(18px, 2.6vw, 30px) !important;
}

body.page-beratung .detail-card {
  counter-increment: beratung-card;
  position: relative;
  min-height: clamp(220px, 19vw, 280px);
  padding: clamp(24px, 3vw, 38px) !important;
  isolation: isolate;
  border-color: rgba(246, 246, 243, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    #080808;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

body.page-beratung .detail-card::before {
  content: counter(beratung-card, decimal-leading-zero);
  position: absolute;
  right: clamp(18px, 2.4vw, 30px);
  bottom: -0.16em;
  z-index: -1;
  color: rgba(246, 246, 243, 0.045);
  font-size: clamp(5.5rem, 9vw, 10rem);
  font-weight: 950;
  line-height: 0.8;
  letter-spacing: 0;
}

body.page-beratung .detail-card::after {
  content: "";
  position: absolute;
  left: -1px;
  top: clamp(24px, 3vw, 38px);
  width: 1px;
  height: clamp(52px, 7vw, 92px);
  background: linear-gradient(180deg, rgba(246, 246, 243, 0.72), transparent);
}

body.page-beratung .detail-card:hover,
body.page-beratung .detail-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(246, 246, 243, 0.3) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.02)),
    #0c0c0c;
}

body.page-beratung .detail-card h3 {
  max-width: 12ch;
  font-size: clamp(1.55rem, 2vw, 2.32rem) !important;
}

body.page-beratung .detail-card p {
  max-width: 44ch;
  font-size: clamp(0.96rem, 1vw, 1.05rem);
}

body.page-beratung .detail-section:nth-of-type(3) {
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr) !important;
  padding-top: clamp(48px, 6vw, 78px) !important;
  padding-bottom: clamp(40px, 5vw, 68px) !important;
}

body.page-beratung .detail-section:nth-of-type(3) .detail-copy {
  position: relative;
  padding: clamp(22px, 3vw, 36px) 0 clamp(22px, 3vw, 36px) clamp(28px, 4vw, 52px);
}

body.page-beratung .detail-section:nth-of-type(3) .detail-copy::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(246, 246, 243, 0.42) 18%, rgba(246, 246, 243, 0.2) 78%, transparent);
}

body.page-beratung .detail-section:nth-of-type(3) ul {
  gap: clamp(14px, 1.8vw, 22px);
  padding-left: 0;
  list-style: none;
}

body.page-beratung .detail-section:nth-of-type(3) li {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 14px clamp(16px, 2.2vw, 24px);
  border: 1px solid rgba(246, 246, 243, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(246, 246, 243, 0.74);
}

body.page-beratung .detail-section:nth-of-type(3) li::before {
  content: "";
  position: absolute;
  left: calc(clamp(28px, 4vw, 52px) * -1 - 4px);
  top: 50%;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(246, 246, 243, 0.68);
  background: #050505;
  transform: translateY(-50%) rotate(45deg);
}

body.page-beratung .contact {
  position: relative;
  width: min(1280px, calc(100vw - clamp(32px, 7vw, 92px)));
  min-height: clamp(520px, 68svh, 720px) !important;
  margin-top: clamp(18px, 3vw, 38px) !important;
  overflow: hidden;
  border: 1px solid rgba(246, 246, 243, 0.12);
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.95), rgba(5, 5, 5, 0.72) 48%, rgba(5, 5, 5, 0.32)),
    linear-gradient(180deg, rgba(5, 5, 5, 0.06), #050505 94%),
    var(--detail-hero-image) center / cover no-repeat !important;
}

body.page-beratung .contact::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 1px) top / 100% 1px no-repeat,
    radial-gradient(circle at 72% 26%, rgba(255, 255, 255, 0.08), transparent 34%);
}

body.page-beratung .contact-inner,
body.page-beratung .site-footer {
  position: relative;
  z-index: 1;
}

html[data-theme="light"] body.page-beratung main {
  background: linear-gradient(180deg, #f6f6fb 0%, #eeeeF4 42%, #f8f8fb 100%);
}

html[data-theme="light"] body.page-beratung .detail-section:first-child,
html[data-theme="light"] body.page-beratung .detail-card,
html[data-theme="light"] body.page-beratung .detail-section:nth-of-type(3) li {
  border-color: rgba(29, 27, 58, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.4)),
    #f7f7fb;
}

html[data-theme="light"] body.page-beratung .detail-card::before {
  color: rgba(29, 27, 58, 0.06);
}

html[data-theme="light"] body.page-beratung .detail-section:nth-of-type(3) li::before {
  background: #f7f7fb;
  border-color: rgba(29, 27, 58, 0.42);
}

html[data-theme="light"] body.page-beratung .contact {
  background:
    linear-gradient(90deg, rgba(246, 246, 251, 0.96), rgba(246, 246, 251, 0.76) 50%, rgba(246, 246, 251, 0.34)),
    var(--detail-hero-image) center / cover no-repeat !important;
}

@media (max-width: 980px) {
  body.page-beratung .detail-section:first-child,
  body.page-beratung .detail-section:nth-of-type(3) {
    grid-template-columns: 1fr !important;
  }

  body.page-beratung .detail-section:first-child .detail-copy {
    padding-right: 0;
  }

  body.page-beratung .detail-section:first-child::after {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    order: 3;
  }
}

@media (max-width: 760px) {
  body.page-beratung .detail-main {
    width: min(100% - 28px, 1320px) !important;
  }

  body.page-beratung .detail-section:first-child {
    margin-top: 0;
    padding: 24px !important;
  }

  body.page-beratung .detail-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-beratung .detail-card {
    min-height: 190px;
  }

  body.page-beratung .detail-section:nth-of-type(3) .detail-copy {
    padding-left: 28px;
  }

  body.page-beratung .detail-section:nth-of-type(3) li::before {
    left: -24px;
  }

  body.page-beratung .contact {
    width: min(100% - 28px, 1280px);
    min-height: 560px !important;
  }
}

/* Beratung page second pass: turn the rough feature/card areas into finished sections. */
body.page-beratung .detail-section:first-child {
  grid-template-columns: minmax(420px, 0.78fr) minmax(360px, 0.88fr) minmax(300px, 0.66fr) !important;
  gap: clamp(26px, 3.8vw, 56px) !important;
  min-height: clamp(280px, 22vw, 360px);
  align-items: start;
  padding: clamp(30px, 3.4vw, 48px) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    #070707;
}

body.page-beratung .detail-section:first-child h2 {
  grid-column: 1;
  max-width: 12ch;
  align-self: start;
  padding-top: clamp(8px, 1.2vw, 18px);
  font-size: clamp(2.25rem, 3vw, 3.65rem) !important;
  line-height: 1 !important;
  text-wrap: balance;
}

body.page-beratung .detail-section:first-child h2::after {
  content: "";
  display: block;
  width: 76px;
  height: 2px;
  margin-top: clamp(18px, 2vw, 26px);
  background: linear-gradient(90deg, rgba(246, 246, 243, 0.84), transparent);
}

body.page-beratung .detail-section:first-child .detail-copy {
  grid-column: 2;
  max-width: 48ch;
  align-self: start;
  padding-right: 0;
  font-size: clamp(1.02rem, 1.12vw, 1.18rem);
}

body.page-beratung .detail-section:first-child::after {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  right: auto;
  bottom: auto;
  width: 100%;
  min-height: clamp(210px, 18vw, 286px);
  align-self: stretch;
  border-color: rgba(246, 246, 243, 0.16);
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.08), rgba(5, 5, 5, 0.5)),
    var(--detail-hero-image) center / cover no-repeat;
  opacity: 0.8;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.1);
}

body.page-beratung .detail-section:nth-of-type(2) {
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1.58fr) !important;
  gap: clamp(28px, 4vw, 58px) !important;
  padding-top: clamp(44px, 5vw, 68px) !important;
  padding-bottom: clamp(48px, 5vw, 72px) !important;
}

body.page-beratung .detail-section:nth-of-type(2) h2 {
  position: sticky;
  top: 116px;
  max-width: 8ch;
  font-size: clamp(2.7rem, 3.8vw, 4.55rem) !important;
}

body.page-beratung .detail-section:nth-of-type(2) h2::after {
  content: "";
  display: block;
  width: 92px;
  height: 2px;
  margin-top: 22px;
  background: linear-gradient(90deg, rgba(246, 246, 243, 0.76), transparent);
}

body.page-beratung .detail-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: clamp(16px, 1.8vw, 24px) !important;
}

body.page-beratung .detail-card {
  min-height: clamp(196px, 14.5vw, 230px);
  align-content: start;
  gap: clamp(14px, 1.5vw, 20px);
  padding: clamp(24px, 2.6vw, 34px) !important;
  border-color: rgba(246, 246, 243, 0.28) !important;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.075)),
    #111111;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body.page-beratung .detail-card::before {
  content: "";
  inset: 0;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  z-index: -1;
  background:
    radial-gradient(360px circle at 80% 24%, rgba(246, 246, 243, 0.09), transparent 56%),
    linear-gradient(135deg, transparent 0 56%, rgba(246, 246, 243, 0.08) 56.2% 56.5%, transparent 56.7%);
  opacity: 1;
}

body.page-beratung .detail-card::after {
  left: clamp(24px, 2.6vw, 34px);
  right: clamp(24px, 2.6vw, 34px);
  top: auto;
  bottom: clamp(20px, 2.2vw, 28px);
  width: auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(246, 246, 243, 0.46), transparent);
}

body.page-beratung .detail-card span {
  width: max-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(246, 246, 243, 0.14);
  border-radius: 999px;
  background: rgba(246, 246, 243, 0.055);
}

body.page-beratung .detail-card h3 {
  max-width: 100%;
  font-size: clamp(1.55rem, 1.8vw, 2.15rem) !important;
  line-height: 1.04 !important;
  text-wrap: balance;
}

body.page-beratung .detail-card p {
  max-width: 38ch;
  color: rgba(246, 246, 243, 0.66);
}

body.page-beratung .detail-card:hover,
body.page-beratung .detail-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(246, 246, 243, 0.5) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.055) 42%, rgba(255, 255, 255, 0.09)),
    #151515;
}

html[data-theme="light"] body.page-beratung .detail-section:first-child,
html[data-theme="light"] body.page-beratung .detail-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.44)),
    #f7f7fb;
  border-color: rgba(29, 27, 58, 0.14) !important;
  box-shadow: 0 22px 70px rgba(29, 27, 58, 0.08);
}

html[data-theme="light"] body.page-beratung .detail-card p {
  color: rgba(29, 27, 58, 0.64);
}

html[data-theme="light"] body.page-beratung .detail-card span {
  border-color: rgba(29, 27, 58, 0.12);
  background: rgba(29, 27, 58, 0.045);
}

@media (max-width: 1180px) {
  body.page-beratung .detail-section:first-child {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr) !important;
  }

  body.page-beratung .detail-section:first-child::after {
    display: none;
  }
}

@media (max-width: 980px) {
  body.page-beratung .detail-section:first-child,
  body.page-beratung .detail-section:nth-of-type(2) {
    grid-template-columns: 1fr !important;
  }

  body.page-beratung .detail-section:first-child h2,
  body.page-beratung .detail-section:first-child .detail-copy,
  body.page-beratung .detail-section:first-child::after {
    grid-column: auto;
    grid-row: auto;
  }

  body.page-beratung .detail-section:first-child::after {
    display: block;
  }

  body.page-beratung .detail-section:nth-of-type(2) h2 {
    position: static;
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  body.page-beratung .detail-section:first-child {
    min-height: 0;
    padding: 24px !important;
  }

  body.page-beratung .detail-section:first-child h2 {
    font-size: clamp(2.55rem, 11.8vw, 4.1rem) !important;
  }

  body.page-beratung .detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Case-wall pass: make the actual solutions visible immediately. */
.solutions-head {
  margin-bottom: clamp(18px, 2.4vw, 30px) !important;
}

.solutions-head h2 {
  max-width: 11.8ch !important;
  font-size: clamp(2.65rem, 3.8vw, 4.35rem) !important;
}

.solutions-head p {
  max-width: 36ch !important;
  font-size: clamp(0.96rem, 1.05vw, 1.08rem) !important;
}

.solutions-feature {
  height: clamp(200px, 18vw, 248px) !important;
  min-height: clamp(200px, 18vw, 248px) !important;
}

.solutions-feature::before {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.46) 42%, rgba(5, 5, 5, 0.12) 78%, rgba(5, 5, 5, 0.36) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.1) 0%, rgba(5, 5, 5, 0.2) 52%, rgba(5, 5, 5, 0.62) 100%) !important;
}

.solutions-feature-copy {
  top: clamp(24px, 2.8vw, 38px) !important;
  bottom: auto !important;
  max-width: none !important;
}

.solutions-feature-copy strong {
  display: none !important;
}

.solutions-feature-copy span {
  display: inline-flex;
  width: max-content;
  max-width: calc(100vw - 90px);
  padding: 8px 12px;
  border: 1px solid rgba(246, 246, 243, 0.18);
  background: rgba(5, 5, 5, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.solutions-process {
  display: none !important;
}

.solutions-card-grid {
  margin-top: clamp(-148px, -10vw, -108px) !important;
}

.solutions .solution-card,
html[data-theme="dark"] .solutions .solution-card {
  min-height: clamp(188px, 15vw, 226px) !important;
  padding: clamp(18px, 1.7vw, 24px) !important;
  gap: clamp(12px, 1.15vw, 16px) !important;
}

.solutions .solution-card:nth-child(even) {
  margin-top: clamp(8px, 0.9vw, 14px) !important;
}

.solutions .solution-card strong {
  max-width: 10.8ch !important;
  font-size: clamp(1.28rem, 1.42vw, 1.72rem) !important;
  line-height: 1 !important;
}

.solutions .solution-card small {
  max-width: 25ch !important;
  font-size: clamp(0.76rem, 0.78vw, 0.86rem) !important;
  line-height: 1.42 !important;
}

.solution-card-top span,
.solution-card-top em {
  font-size: 0.62rem !important;
}

@media (max-width: 680px) {
  .solutions-feature {
    height: 280px !important;
    min-height: 280px !important;
  }

  .solutions-card-grid {
    margin-top: -72px !important;
  }

  .solutions .solution-card,
  html[data-theme="dark"] .solutions .solution-card {
    min-height: 214px !important;
  }
}

/* Card readability fix: keep the case wall sharp instead of cramped. */
.solutions-card-grid {
  margin-top: clamp(-178px, -12vw, -132px) !important;
  gap: clamp(10px, 1.2vw, 16px) !important;
}

.solutions .solution-card,
html[data-theme="dark"] .solutions .solution-card {
  min-height: clamp(164px, 13vw, 198px) !important;
  padding: clamp(16px, 1.35vw, 20px) !important;
  gap: clamp(8px, 0.85vw, 12px) !important;
}

.solutions .solution-card:nth-child(even) {
  margin-top: clamp(6px, 0.65vw, 10px) !important;
}

.solutions .solution-card strong {
  max-width: 100% !important;
  font-size: clamp(1.02rem, 1.18vw, 1.42rem) !important;
  line-height: 1.02 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.solutions .solution-card small {
  max-width: 100% !important;
  display: -webkit-box;
  line-clamp: 5;
  line-clamp: 4;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(0.7rem, 0.72vw, 0.8rem) !important;
  line-height: 1.36 !important;
}

.solution-card-top {
  gap: 10px !important;
}

.solution-card-top span,
.solution-card-top em {
  font-size: 0.56rem !important;
}

.solution-card-top em {
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .solutions-card-grid {
    margin-top: -88px !important;
  }
}

@media (max-width: 680px) {
  .solutions-card-grid {
    margin-top: -54px !important;
  }

  .solutions .solution-card,
  html[data-theme="dark"] .solutions .solution-card {
    min-height: 190px !important;
  }

  .solutions .solution-card strong {
    font-size: clamp(1.34rem, 6vw, 1.82rem) !important;
  }

  .solutions .solution-card small {
    line-clamp: 4;
    -webkit-line-clamp: 4;
    font-size: 0.82rem !important;
  }
}

/* Visual case tiles: make every solution the hero, not a generic dark card. */
.solutions-feature {
  display: none !important;
}

.solutions-showcase {
  margin-top: clamp(18px, 2.6vw, 34px) !important;
}

.solutions-card-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.7vw, 22px) !important;
  margin-top: 0 !important;
}

.solutions .solution-card,
html[data-theme="dark"] .solutions .solution-card {
  min-height: clamp(255px, 25vw, 340px) !important;
  padding: clamp(22px, 2.4vw, 34px) !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto auto !important;
  align-content: stretch !important;
  overflow: hidden !important;
  border: 1px solid rgba(246, 246, 243, 0.16) !important;
  border-radius: 8px !important;
  background: #080808 !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.26) !important;
  isolation: isolate;
}

.solutions .solution-card:nth-child(1) {
  grid-column: 1 / span 6;
  --solution-image: url("Bilder/service-solutions.jpg");
  --solution-position: 54% center;
}

.solutions .solution-card:nth-child(2) {
  grid-column: 7 / span 6;
  margin-top: clamp(38px, 4vw, 58px) !important;
  --solution-image: url("Bilder/service-business.jpg");
  --solution-position: 48% center;
}

.solutions .solution-card:nth-child(3) {
  grid-column: 1 / span 5;
  margin-top: clamp(-18px, -1.2vw, -10px) !important;
  --solution-image: url("Bilder/service-infrastructure.jpg");
  --solution-position: 48% center;
}

.solutions .solution-card:nth-child(4) {
  grid-column: 6 / span 7;
  margin-top: clamp(20px, 2vw, 34px) !important;
  --solution-image: url("Bilder/service-data.jpg");
  --solution-position: 46% center;
}

.solutions .solution-card::before,
html[data-theme="dark"] .solutions .solution-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  width: auto !important;
  height: auto !important;
  background-image: var(--solution-image) !important;
  background-size: cover !important;
  background-position: var(--solution-position, center) !important;
  opacity: 0.74 !important;
  filter: saturate(0.86) contrast(1.08) brightness(0.74) !important;
  transform: scale(1.03) !important;
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease, opacity 700ms ease !important;
}

.solutions .solution-card::after,
html[data-theme="dark"] .solutions .solution-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  width: auto !important;
  height: auto !important;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.74) 38%, rgba(5, 5, 5, 0.22) 78%, rgba(5, 5, 5, 0.34) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.08), rgba(5, 5, 5, 0.3) 55%, rgba(5, 5, 5, 0.82)) !important;
  opacity: 1 !important;
}

.solutions .solution-card:hover,
.solutions .solution-card:focus-visible,
html[data-theme="dark"] .solutions .solution-card:hover,
html[data-theme="dark"] .solutions .solution-card:focus-visible {
  transform: translate3d(0, -8px, 0) !important;
  border-color: rgba(246, 246, 243, 0.34) !important;
  background: #080808 !important;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.38) !important;
}

.solutions .solution-card:hover::before,
.solutions .solution-card:focus-visible::before,
html[data-theme="dark"] .solutions .solution-card:hover::before,
html[data-theme="dark"] .solutions .solution-card:focus-visible::before {
  opacity: 0.9 !important;
  filter: saturate(1.02) contrast(1.08) brightness(0.82) !important;
  transform: scale(1.08) !important;
}

.solutions .solution-card > * {
  z-index: 1;
}

.solution-card-top {
  align-self: start;
}

.solution-card-top span,
.solution-card-top em {
  color: rgba(246, 246, 243, 0.72) !important;
}

.solution-card-top em {
  border-bottom-color: rgba(246, 246, 243, 0.32) !important;
}

.solutions .solution-card strong {
  align-self: end;
  max-width: 12ch !important;
  color: #ffffff !important;
  font-size: clamp(2rem, 3.4vw, 4.2rem) !important;
  line-height: 0.9 !important;
  text-shadow: 0 18px 44px rgba(0, 0, 0, 0.7);
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.solutions .solution-card small {
  max-width: 34ch !important;
  display: block !important;
  overflow: visible !important;
  color: rgba(246, 246, 243, 0.72) !important;
  font-size: clamp(0.86rem, 0.96vw, 1rem) !important;
  line-height: 1.5 !important;
  font-weight: 680;
}

.solution-card-line {
  display: none !important;
}

html[data-theme="light"] .solutions .solution-card {
  background: #111111 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .solutions .solution-card strong {
  color: #ffffff !important;
}

html[data-theme="light"] .solutions .solution-card small,
html[data-theme="light"] .solution-card-top,
html[data-theme="light"] .solution-card-top span,
html[data-theme="light"] .solution-card-top em {
  color: rgba(255, 255, 255, 0.74) !important;
}

@media (max-width: 1080px) {
  .solutions-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .solutions .solution-card,
  .solutions .solution-card:nth-child(n) {
    grid-column: auto !important;
    margin-top: 0 !important;
  }

  .solutions .solution-card strong {
    font-size: clamp(1.9rem, 5vw, 3.4rem) !important;
  }
}

@media (max-width: 680px) {
  .solutions-card-grid {
    grid-template-columns: 1fr !important;
  }

  .solutions .solution-card,
  html[data-theme="dark"] .solutions .solution-card {
    min-height: 320px !important;
  }

  .solutions .solution-card strong {
    font-size: clamp(2.1rem, 10vw, 3.5rem) !important;
  }

  .solutions .solution-card small {
    font-size: 0.92rem !important;
  }
}

/* Desktop final: one cinematic row so all four solutions land at once. */
@media (min-width: 1081px) {
  .solutions {
    padding-top: clamp(58px, 5.8vw, 88px) !important;
  }

  .solutions-head {
    margin-bottom: clamp(22px, 2.2vw, 32px) !important;
  }

  .solutions-head h2 {
    max-width: 12.8ch !important;
    font-size: clamp(2.55rem, 3.55vw, 4.15rem) !important;
  }

  .solutions-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: clamp(14px, 1.35vw, 20px) !important;
  }

  .solutions .solution-card,
  html[data-theme="dark"] .solutions .solution-card,
  .solutions .solution-card:nth-child(n) {
    grid-column: auto !important;
    margin-top: 0 !important;
    min-height: clamp(270px, 21vw, 318px) !important;
    padding: clamp(20px, 1.8vw, 28px) !important;
  }

  .solutions .solution-card::before,
  html[data-theme="dark"] .solutions .solution-card::before {
    opacity: 0.82 !important;
    filter: saturate(0.98) contrast(1.06) brightness(0.82) !important;
  }

  .solutions .solution-card:nth-child(2)::before,
  .solutions .solution-card:nth-child(4)::before {
    opacity: 0.9 !important;
    filter: saturate(1.02) contrast(1.04) brightness(0.9) !important;
  }

  .solutions .solution-card::after,
  html[data-theme="dark"] .solutions .solution-card::after {
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0.16) 0%, rgba(5, 5, 5, 0.32) 38%, rgba(5, 5, 5, 0.88) 100%),
      linear-gradient(90deg, rgba(5, 5, 5, 0.82) 0%, rgba(5, 5, 5, 0.34) 68%, rgba(5, 5, 5, 0.18) 100%) !important;
  }

  .solutions .solution-card strong {
    max-width: 100% !important;
    font-size: clamp(1.44rem, 1.62vw, 1.94rem) !important;
    line-height: 0.98 !important;
  }

  .solutions .solution-card small {
    display: inline-flex !important;
    align-items: center;
    width: max-content;
    max-width: 100% !important;
    min-height: 32px;
    padding: 0 12px;
    overflow: hidden !important;
    border: 1px solid rgba(246, 246, 243, 0.2);
    border-radius: 999px;
    background: rgba(246, 246, 243, 0.09);
    color: rgba(246, 246, 243, 0.78) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    font-weight: 900;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .solutions .solution-card small::before {
    content: "Ansehen";
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .solutions .solution-card small::after {
    content: "→";
    margin-left: 10px;
    font-size: 0.86rem;
  }
}

/* Prevent long German solution names from spilling over card edges. */
.solutions .solution-card {
  min-width: 0 !important;
}

.solutions .solution-card strong {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

@media (min-width: 1081px) {
  .solutions .solution-card strong {
    font-size: clamp(1.25rem, 1.32vw, 1.58rem) !important;
    line-height: 1.02 !important;
  }
}

/* GSAP-style page panel transition for subpage navigation. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

html.page-arriving {
  background: #050505;
}

html.page-arriving body {
  opacity: 0;
}

body.is-page-transitioning {
  overflow: hidden;
}

.page-transition-prefetch-root {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.page-transition-prefetch-frame {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
}

html.is-transition-preview,
body.is-transition-preview {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  background: #050505;
}

body.is-transition-preview .site-header,
body.is-transition-preview .detail-back,
body.is-transition-preview .menu-overlay,
body.is-transition-preview .scroll-bar {
  display: none !important;
}

body.is-transition-preview .detail-hero {
  min-height: 100svh !important;
}

body.is-transition-preview .reveal,
body.is-transition-preview [data-fx] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  transition: none !important;
}

.page-transition-stage {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  background: #050505;
  color: #f6f6f3;
  opacity: 0;
  visibility: hidden;
}

.page-transition-source {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 50% 16%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.page-transition-source::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 0%, rgba(5, 5, 5, 0.22) 48%, rgba(5, 5, 5, 0.72) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.08), rgba(5, 5, 5, 0.58));
}

.page-transition-source-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-height: 100vh;
  transform-origin: 50% 0;
}

.page-transition-source-layer .site-header,
.page-transition-source-layer main {
  pointer-events: none !important;
}

.page-transition-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(26px, 6vw, 88px);
  background:
    radial-gradient(820px ellipse at 50% 18%, rgba(255, 255, 255, 0.12), transparent 66%),
    linear-gradient(180deg, rgba(18, 18, 18, 0.96) 0%, #050505 72%);
  box-shadow: 0 -34px 110px rgba(0, 0, 0, 0.52);
  text-align: center;
  backface-visibility: hidden;
}

.page-transition-panel.has-frame {
  overflow: hidden;
  padding: 0;
  background: #050505;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -28px 90px rgba(0, 0, 0, 0.46);
  transition: border-radius 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-transition-panel.has-frame.is-expanded {
  border-radius: 0;
  box-shadow: none;
}

.page-transition-track {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.page-transition-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050505;
  pointer-events: none;
  opacity: 0;
}

.page-transition-panel.has-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.16) 0%, transparent 34%, rgba(5, 5, 5, 0.18) 100%),
    radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.14), transparent 52%);
}

.page-transition-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: clamp(18px, 4vh, 42px);
  width: min(112px, 26vw);
  height: 4px;
  border-radius: 999px;
  z-index: 3;
  background: rgba(246, 246, 243, 0.42);
  transform: translateX(-50%);
}

.page-transition-panel.has-frame::before {
  display: none;
}

.page-transition-panel span {
  position: relative;
  z-index: 4;
  color: rgba(246, 246, 243, 0.66);
  font-size: clamp(0.68rem, 1vw, 0.86rem);
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-transition-panel strong {
  position: relative;
  z-index: 4;
  max-width: min(10.5ch, 92vw);
  color: #f6f6f3;
  font-size: clamp(3rem, 9vw, 9.4rem);
  line-height: 0.88;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

.page-transition-panel.has-frame span,
.page-transition-panel.has-frame strong {
  display: none;
}

.page-transition-panel.has-frame strong {
  max-width: min(560px, calc(100vw - 44px));
  font-size: clamp(1.05rem, 2.2vw, 2.1rem);
  line-height: 1;
}

@media (max-width: 760px) {
  .page-transition-panel {
    padding-inline: 22px;
  }

  .page-transition-panel strong {
    max-width: 9.5ch;
    font-size: clamp(2.55rem, 15vw, 5.4rem);
  }

  .page-transition-panel.has-frame strong {
    max-width: calc(100vw - 44px);
    font-size: clamp(0.98rem, 5vw, 1.42rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-stage {
    display: none !important;
  }
}

/* Subpage spatial pass: content sits on the page body, not in a boxed column. */
body.detail-page .detail-main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(42px, 5vw, 78px) clamp(34px, 6vw, 112px) clamp(62px, 7vw, 108px) !important;
  display: grid;
  gap: 0;
}

body.detail-page .detail-section {
  position: relative;
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(min(100%, 380px), 0.46fr) minmax(0, 1.54fr) !important;
  gap: clamp(30px, 5vw, 82px) !important;
  align-items: start;
  justify-items: stretch;
  padding: clamp(28px, 3.6vw, 54px) 0;
  border-top: 0 !important;
  text-align: left;
}

body.detail-page .detail-section:first-child {
  padding-top: 0;
}

body.detail-page .detail-section + .detail-section::before {
  content: none;
}

body.detail-page .detail-section h2 {
  position: sticky;
  top: 112px;
  max-width: 12.5ch;
  margin: 0;
  text-align: left;
  font-size: clamp(2.7rem, 3.75vw, 5.35rem) !important;
  line-height: 0.93 !important;
  letter-spacing: 0;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

body.detail-page .detail-copy {
  width: min(820px, 100%);
  max-width: none;
  margin: 0;
  justify-items: start;
  text-align: left;
  font-size: clamp(1.02rem, 1.08vw, 1.2rem);
}

body.detail-page .detail-copy p,
body.detail-page .detail-copy ul {
  max-width: 72ch;
  margin: 0;
}

body.detail-page .detail-copy ul {
  gap: 14px;
  padding-left: 1.2em !important;
  list-style-position: outside;
}

body.detail-page .detail-actions {
  justify-content: flex-start;
}

body.detail-page .detail-grid {
  width: 100%;
  margin: 0;
  grid-template-columns: repeat(2, minmax(min(100%, 320px), 1fr)) !important;
  gap: clamp(16px, 2vw, 28px) !important;
  justify-content: stretch;
}

body.detail-page .detail-card {
  min-height: clamp(168px, 13vw, 220px);
  justify-items: start;
  text-align: left;
  padding: clamp(18px, 2.4vw, 34px) 0 clamp(22px, 2.8vw, 38px);
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.detail-page .detail-card h3 {
  font-size: clamp(1.45rem, 2vw, 2.35rem) !important;
}

body.detail-page .contact-inner,
body.detail-page .site-footer {
  width: min(1180px, calc(100% - clamp(34px, 6vw, 112px)));
}

body.article-page .blog-article {
  width: 100% !important;
  max-width: none !important;
}

body.article-page .article-body {
  text-align: left;
}

body.article-page .article-actions {
  justify-content: center;
}

@media (max-width: 760px) {
  body.detail-page .detail-main {
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.detail-page .detail-section {
    width: 100%;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: clamp(28px, 8vw, 46px) 0;
  }

  body.detail-page .detail-section h2 {
    position: static;
    max-width: 100%;
    font-size: clamp(2rem, 8.4vw, 3.1rem) !important;
    line-height: 0.94 !important;
  }

  body.detail-page .detail-copy {
    width: 100%;
  }

  body.detail-page .detail-grid {
    grid-template-columns: 1fr !important;
  }
}

body.page-cyber .cyber-flip-section {
  align-items: center !important;
  grid-template-columns: 1fr !important;
  gap: clamp(22px, 3vw, 36px) !important;
}

body.page-cyber .cyber-flip-section h2 {
  position: static !important;
  max-width: 100% !important;
}

body.page-cyber .cyber-flip-carousel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 0 !important;
  justify-self: stretch;
}

body.page-cyber .cyber-flip-stage {
  width: 100% !important;
  min-height: clamp(360px, 38vw, 430px) !important;
  border: 1px dashed rgba(246, 246, 243, 0.28) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 58%) !important;
}

body.page-cyber .cyber-flip-card {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: clamp(190px, 20vw, 255px) !important;
  min-height: clamp(270px, 31vw, 335px) !important;
  padding: clamp(18px, 2vw, 24px) !important;
  border: 1px solid rgba(246, 246, 243, 0.2) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--flip-accent, #f6f6f3) 18%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015)),
    #090b0a !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36) !important;
}

body.page-cyber .cyber-flip-card:nth-child(1),
body.page-cyber .cyber-flip-card:nth-child(2),
body.page-cyber .cyber-flip-card:nth-child(3),
body.page-cyber .cyber-flip-card:nth-child(4) {
  transform: none;
}

body.page-cyber .cyber-flip-controls {
  display: flex !important;
  width: auto !important;
  height: auto !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
}

body.page-cyber .cyber-flip-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 22px !important;
  white-space: nowrap;
}

html[data-theme="light"] body.page-cyber .cyber-flip-stage {
  border-color: rgba(29, 27, 58, 0.22) !important;
  background:
    radial-gradient(circle at 22% 12%, rgba(29, 27, 58, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.4) !important;
}

html[data-theme="light"] body.page-cyber .cyber-flip-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--flip-accent, #1d1b3a) 14%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 244, 251, 0.88)),
    #fff !important;
  box-shadow: 0 24px 60px rgba(29, 27, 58, 0.13) !important;
}

@media (max-width: 760px) {
  body.page-cyber .cyber-flip-stage {
    min-height: 0 !important;
    display: grid !important;
    gap: 14px !important;
    border: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body.page-cyber .cyber-flip-card,
  body.page-cyber .cyber-flip-card:nth-child(n) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-height: 210px !important;
    transform: none !important;
    opacity: 1 !important;
  }

  body.page-cyber .cyber-flip-controls {
    display: none !important;
  }
}

.cyber-section .cyber-flip-carousel.offer-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 18px !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

.cyber-section .cyber-flip-stage {
  position: relative !important;
  width: 100% !important;
  min-height: clamp(390px, 42vw, 500px) !important;
  border: 1px dashed rgba(246, 246, 243, 0.32) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 58%) !important;
}

.cyber-section .cyber-flip-card,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: grid !important;
  align-content: space-between !important;
  gap: 24px !important;
  width: clamp(205px, 21vw, 270px) !important;
  min-height: clamp(285px, 32vw, 365px) !important;
  padding: clamp(18px, 2vw, 26px) !important;
  border: 1px solid rgba(246, 246, 243, 0.2) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--flip-accent, #f6f6f3) 18%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015)),
    #090b0a !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36) !important;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.cyber-section .cyber-flip-card::before,
.cyber-section .cyber-flip-card::after,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card::before,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

.cyber-section .cyber-flip-card::before,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card::before {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 2px solid var(--flip-accent, rgba(246, 246, 243, 0.7)) !important;
  opacity: 0.86 !important;
  background: transparent !important;
  mask-image: linear-gradient(90deg, #000 0 42%, transparent 62% 100%) !important;
  transform: none !important;
  box-shadow: none !important;
}

.cyber-section .cyber-flip-card::after,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card::after {
  inset: -1px !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--flip-accent, #f6f6f3) 26%, transparent), transparent 36%) !important;
  opacity: 0.44 !important;
  z-index: -1;
  transform: none !important;
  box-shadow: none !important;
}

.cyber-section .cyber-flip-card:nth-child(1),
.cyber-section .cyber-flip-card:nth-child(2),
.cyber-section .cyber-flip-card:nth-child(3),
.cyber-section .cyber-flip-card:nth-child(4) {
  transform: none;
  opacity: 1;
}

.cyber-section .cyber-flip-card h3,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card h3 {
  margin: 0 !important;
  color: #f4f4f4 !important;
  font-size: clamp(1.45rem, 2vw, 2.18rem) !important;
  line-height: 1.05 !important;
}

.cyber-section .cyber-flip-card p {
  margin: 0 !important;
  max-width: 24ch;
  color: var(--muted) !important;
  font-size: clamp(0.92rem, 1vw, 1rem);
  line-height: 1.5 !important;
}

.cyber-section .cyber-flip-card span,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card span {
  color: color-mix(in srgb, var(--flip-accent, #f6f6f3) 76%, #fff) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
}

.cyber-section .cyber-flip-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
}

.cyber-section .cyber-flip-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(246, 246, 243, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(5, 5, 5, 0.72) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
}

@media (max-width: 760px) {
  .cyber-section .cyber-flip-stage {
    min-height: 0 !important;
    display: grid !important;
    gap: 14px !important;
    border: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .cyber-section .cyber-flip-card,
  .cyber-section .cyber-flip-card:nth-child(n),
  html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card,
  html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card:nth-child(n) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-height: 210px !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .cyber-section .cyber-flip-controls {
    display: none !important;
  }
}

body.page-cyber .cyber-flip-carousel,
.cyber-section .cyber-flip-carousel.offer-grid {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

body.page-cyber .cyber-flip-stage,
.cyber-section .cyber-flip-stage,
html[data-theme="light"] body.page-cyber .cyber-flip-stage {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 5px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 5px !important;
  border: 2px dashed rgba(246, 246, 243, 0.32) !important;
  border-radius: 10px !important;
  overflow: visible !important;
  background: transparent !important;
}

body.page-cyber .cyber-flip-card,
body.page-cyber .cyber-flip-card:nth-child(n),
.cyber-section .cyber-flip-card,
.cyber-section .cyber-flip-card:nth-child(n),
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card:nth-child(n),
html[data-theme="light"] body.page-cyber .cyber-flip-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: grid !important;
  flex: 0 0 clamp(190px, 20vw, 270px) !important;
  align-content: space-between !important;
  gap: 24px !important;
  width: clamp(190px, 20vw, 270px) !important;
  min-height: clamp(280px, 30vw, 365px) !important;
  padding: clamp(18px, 2vw, 26px) !important;
  border: 1px solid rgba(246, 246, 243, 0.2) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--flip-accent, #f6f6f3) 18%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015)),
    #090b0a !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3) !important;
  opacity: 1;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

body.page-cyber .cyber-flip-controls,
.cyber-section .cyber-flip-controls {
  display: flex !important;
  width: auto !important;
  height: auto !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 20px !important;
}

body.page-cyber .cyber-flip-button,
.cyber-section .cyber-flip-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(246, 246, 243, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(5, 5, 5, 0.72) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
}

@media (max-width: 760px) {
  body.page-cyber .cyber-flip-stage,
  .cyber-section .cyber-flip-stage {
    display: grid !important;
    width: 100% !important;
    gap: 14px !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.page-cyber .cyber-flip-card,
  body.page-cyber .cyber-flip-card:nth-child(n),
  .cyber-section .cyber-flip-card,
  .cyber-section .cyber-flip-card:nth-child(n),
  html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card,
  html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card:nth-child(n) {
    flex-basis: auto !important;
    width: 100% !important;
    min-height: 210px !important;
  }

  body.page-cyber .cyber-flip-controls,
  .cyber-section .cyber-flip-controls {
    display: none !important;
  }
}

/* Final Cyber carousel authority: clean caterpillar layout after older card styles. */
body.detail-page.page-cyber .cyber-flip-section,
.cyber-section {
  --cyber-card-width: clamp(210px, 19.5vw, 260px);
  --cyber-card-height: clamp(300px, 30vw, 360px);
}

body.detail-page.page-cyber .cyber-flip-carousel,
.cyber-section .cyber-flip-carousel.offer-grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  perspective: none !important;
}

body.detail-page.page-cyber .cyber-flip-stage,
.cyber-section .cyber-flip-stage,
html[data-theme="light"] body.detail-page.page-cyber .cyber-flip-stage {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: clamp(6px, 0.7vw, 10px) !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: clamp(6px, 0.7vw, 9px) !important;
  border: 2px dashed rgba(246, 246, 243, 0.34) !important;
  border-radius: 12px !important;
  overflow: visible !important;
  background:
    radial-gradient(680px ellipse at 12% 18%, rgba(255, 255, 255, 0.075), transparent 62%),
    rgba(255, 255, 255, 0.015) !important;
}

body.detail-page.page-cyber .cyber-flip-card,
body.detail-page.page-cyber .cyber-flip-card:nth-child(n),
.cyber-section .cyber-flip-card,
.cyber-section .cyber-flip-card:nth-child(n),
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card:nth-child(n),
html[data-theme="light"] body.detail-page.page-cyber .cyber-flip-card {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  display: grid !important;
  flex: 0 0 var(--cyber-card-width) !important;
  align-content: space-between !important;
  gap: 22px !important;
  width: var(--cyber-card-width) !important;
  min-width: 0 !important;
  min-height: var(--cyber-card-height) !important;
  padding: clamp(20px, 2vw, 28px) !important;
  border: 1px solid color-mix(in srgb, var(--flip-accent, #f6f6f3) 74%, rgba(255, 255, 255, 0.16)) !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  isolation: isolate;
  background: #090b0a !important;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  color: var(--ink) !important;
  opacity: 1;
  transform: none;
  filter: none;
  will-change: transform, opacity;
  transition: border-color 220ms ease, box-shadow 220ms ease, translate 220ms ease;
}

.cyber-section .cyber-flip-card[data-cyber-flip-card],
body.detail-page.page-cyber .cyber-flip-card[data-cyber-flip-card] {
  opacity: 1;
  transform: none;
}

.cyber-section [data-cyber-flip-card][data-fx],
body.detail-page.page-cyber [data-cyber-flip-card][data-fx] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  transition: none !important;
}

body.detail-page.page-cyber .cyber-flip-card-media,
.cyber-section .cyber-flip-card-media,
a.cyber-flip-card .cyber-flip-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

body.detail-page.page-cyber .cyber-flip-card-media img,
.cyber-section .cyber-flip-card-media img,
a.cyber-flip-card .cyber-flip-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 24%;
  opacity: 0.58;
  transform: scale(1.06);
  filter: saturate(1.06) contrast(1.03);
  transition:
    opacity 780ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 780ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

body.detail-page.page-cyber .cyber-flip-card-media::after,
.cyber-section .cyber-flip-card-media::after,
a.cyber-flip-card .cyber-flip-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--flip-accent, #f6f6f3) 38%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, rgba(9, 11, 10, 0.06) 0%, rgba(9, 11, 10, 0.48) 40%, rgba(9, 11, 10, 0.92) 76%, #090b0a 100%);
  transition: background 780ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.detail-page.page-cyber .cyber-flip-card > :not(.cyber-flip-card-media),
.cyber-section .cyber-flip-card > :not(.cyber-flip-card-media),
a.cyber-flip-card > :not(.cyber-flip-card-media) {
  position: relative;
  z-index: 2;
}

body.detail-page.page-cyber .cyber-flip-card:hover .cyber-flip-card-media img,
body.detail-page.page-cyber .cyber-flip-card:focus-visible .cyber-flip-card-media img,
.cyber-section .cyber-flip-card:hover .cyber-flip-card-media img,
.cyber-section .cyber-flip-card:focus-visible .cyber-flip-card-media img,
a.cyber-flip-card:hover .cyber-flip-card-media img,
a.cyber-flip-card:focus-visible .cyber-flip-card-media img {
  opacity: 0.76;
  transform: scale(1.12);
  filter: saturate(1.2) contrast(1.05) brightness(1.05);
}

body.detail-page.page-cyber .cyber-flip-card:hover .cyber-flip-card-media::after,
body.detail-page.page-cyber .cyber-flip-card:focus-visible .cyber-flip-card-media::after,
.cyber-section .cyber-flip-card:hover .cyber-flip-card-media::after,
.cyber-section .cyber-flip-card:focus-visible .cyber-flip-card-media::after,
a.cyber-flip-card:hover .cyber-flip-card-media::after,
a.cyber-flip-card:focus-visible .cyber-flip-card-media::after {
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--flip-accent, #f6f6f3) 48%, transparent) 0%, transparent 46%),
    linear-gradient(180deg, rgba(9, 11, 10, 0.02) 0%, rgba(9, 11, 10, 0.42) 42%, rgba(9, 11, 10, 0.88) 78%, #090b0a 100%);
}

html[data-theme="light"] body.detail-page.page-cyber .cyber-flip-card-media::after,
html[data-theme="light"] .cyber-section .cyber-flip-card-media::after {
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--flip-accent, #1d1b3a) 28%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.72) 44%, rgba(244, 244, 251, 0.96) 78%, #fff 100%);
}

html[data-theme="light"] body.detail-page.page-cyber .cyber-flip-card-media img,
html[data-theme="light"] .cyber-section .cyber-flip-card-media img {
  opacity: 0.5;
  filter: saturate(0.92) contrast(1.02);
}

html[data-theme="light"] body.detail-page.page-cyber .cyber-flip-card:hover .cyber-flip-card-media img,
html[data-theme="light"] body.detail-page.page-cyber .cyber-flip-card:focus-visible .cyber-flip-card-media img,
html[data-theme="light"] .cyber-section .cyber-flip-card:hover .cyber-flip-card-media img,
html[data-theme="light"] .cyber-section .cyber-flip-card:focus-visible .cyber-flip-card-media img {
  opacity: 0.66;
  filter: saturate(1.02) contrast(1.04) brightness(1.03);
}

body.detail-page.page-cyber .cyber-flip-carousel.is-flipping .cyber-flip-card-media img,
.cyber-section .cyber-flip-carousel.is-flipping .cyber-flip-card-media img {
  transition: none;
}

body.detail-page.page-cyber .cyber-flip-card:hover,
body.detail-page.page-cyber .cyber-flip-card:focus-visible,
.cyber-section .cyber-flip-card:hover,
.cyber-section .cyber-flip-card:focus-visible,
a.cyber-flip-card:hover,
a.cyber-flip-card:focus-visible {
  text-decoration: none;
  translate: 0 -6px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.42),
    0 0 0 1px color-mix(in srgb, var(--flip-accent, #f6f6f3) 44%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.detail-page.page-cyber .cyber-flip-card:hover h3,
body.detail-page.page-cyber .cyber-flip-card:focus-visible h3,
body.detail-page.page-cyber .cyber-flip-card:hover p,
body.detail-page.page-cyber .cyber-flip-card:focus-visible p,
.cyber-section .cyber-flip-card:hover h3,
.cyber-section .cyber-flip-card:focus-visible h3,
.cyber-section .cyber-flip-card:hover p,
.cyber-section .cyber-flip-card:focus-visible p,
a.cyber-flip-card:hover h3,
a.cyber-flip-card:focus-visible h3,
a.cyber-flip-card:hover p,
a.cyber-flip-card:focus-visible p {
  text-decoration: none !important;
  background-image: none !important;
  background-color: transparent !important;
}

body.detail-page.page-cyber .cyber-flip-carousel.is-flipping .cyber-flip-card,
.cyber-section .cyber-flip-carousel.is-flipping .cyber-flip-card {
  pointer-events: none;
  transition: none !important;
  translate: none !important;
}

body.detail-page.page-cyber .cyber-flip-carousel.is-flipping .cyber-flip-card:hover,
body.detail-page.page-cyber .cyber-flip-carousel.is-flipping .cyber-flip-card:focus-visible,
.cyber-section .cyber-flip-carousel.is-flipping .cyber-flip-card:hover,
.cyber-section .cyber-flip-carousel.is-flipping .cyber-flip-card:focus-visible {
  translate: none;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

body.detail-page.page-cyber .cyber-flip-card::before,
.cyber-section .cyber-flip-card::before,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border: 2px solid var(--flip-accent, rgba(246, 246, 243, 0.7)) !important;
  border-radius: inherit !important;
  background: transparent !important;
  opacity: 0.78 !important;
  mask-image: linear-gradient(90deg, #000 0 38%, transparent 66% 100%) !important;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

body.detail-page.page-cyber .cyber-flip-card::after,
.cyber-section .cyber-flip-card::after,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 16px 16px 16px !important;
  width: auto !important;
  height: 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--flip-accent, #f6f6f3) 50%, transparent), transparent) !important;
  opacity: 0.8 !important;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body.detail-page.page-cyber .cyber-flip-card h3,
.cyber-section .cyber-flip-card h3,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card h3 {
  margin: 0 !important;
  color: #f4f4f4 !important;
  font-size: clamp(1.35rem, 1.65vw, 1.95rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}

body.detail-page.page-cyber .cyber-flip-card p,
.cyber-section .cyber-flip-card p {
  margin: 0 !important;
  max-width: 25ch !important;
  color: rgba(246, 246, 243, 0.66) !important;
  font-size: clamp(0.9rem, 0.96vw, 1rem) !important;
  line-height: 1.48 !important;
}

body.detail-page.page-cyber .cyber-flip-card span,
.cyber-section .cyber-flip-card span,
html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card span {
  color: color-mix(in srgb, var(--flip-accent, #f6f6f3) 78%, #fff) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

body.detail-page.page-cyber .cyber-flip-controls,
.cyber-section .cyber-flip-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: auto !important;
  height: auto !important;
  margin-top: 22px !important;
}

body.detail-page.page-cyber .cyber-flip-button,
.cyber-section .cyber-flip-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 92px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(246, 246, 243, 0.36) !important;
  border-radius: 999px !important;
  background: rgba(5, 5, 5, 0.68) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: 0.86rem !important;
  font-weight: 850 !important;
  backdrop-filter: blur(16px);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

body.detail-page.page-cyber .cyber-flip-button:hover,
body.detail-page.page-cyber .cyber-flip-button:focus-visible,
.cyber-section .cyber-flip-button:hover,
.cyber-section .cyber-flip-button:focus-visible {
  transform: translateY(-2px);
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: var(--dark) !important;
}

@media (max-width: 1180px) {
  body.detail-page.page-cyber .cyber-flip-section,
  .cyber-section {
    --cyber-card-width: clamp(180px, 21vw, 236px);
  }
}

@media (max-width: 760px) {
  body.detail-page.page-cyber .cyber-flip-stage,
  .cyber-section .cyber-flip-stage {
    display: grid !important;
    width: 100% !important;
    gap: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.detail-page.page-cyber .cyber-flip-card,
  body.detail-page.page-cyber .cyber-flip-card:nth-child(n),
  .cyber-section .cyber-flip-card,
  .cyber-section .cyber-flip-card:nth-child(n),
  html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card,
  html[data-theme="dark"] .cyber-section .offer-grid .cyber-flip-card:nth-child(n) {
    flex: none !important;
    width: 100% !important;
    min-height: 210px !important;
  }

  body.detail-page.page-cyber .cyber-flip-controls,
  .cyber-section .cyber-flip-controls {
    display: none !important;
  }
}

/* Websites homepage section: richer studio-style panel. */
.web-showcase {
  position: relative;
  max-width: none !important;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr) !important;
  gap: clamp(30px, 6vw, 86px) !important;
  align-items: center !important;
  min-height: 100svh;
  scroll-margin-top: 104px;
  padding: clamp(118px, 10vw, 164px) clamp(18px, 5vw, 64px) clamp(92px, 8vw, 132px) !important;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 28%, rgba(255, 255, 255, 0.018)),
    radial-gradient(900px ellipse at 82% 22%, rgba(255, 255, 255, 0.07), transparent 62%),
    #050505 !important;
}

.web-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(246, 246, 243, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(246, 246, 243, 0.038) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.web-showcase::after {
  content: none;
}

.web-loop {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(510px, 68svh, 660px);
  bottom: auto;
  z-index: 0;
  display: flex;
  width: max-content;
  gap: clamp(28px, 4vw, 64px);
  pointer-events: none;
  color: rgba(246, 246, 243, 0.064);
  font-size: clamp(5rem, 12vw, 15.5rem);
  line-height: 0.75;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
  will-change: transform;
  animation: webLoop 30s linear infinite;
}

.web-loop span {
  flex: 0 0 auto;
}

.web-showcase .workforce-head,
.web-showcase .web-tabs {
  position: relative;
  z-index: 2;
}

.web-showcase .workforce-head {
  max-width: min(720px, 100%);
}

.web-showcase .workforce-head h2 {
  max-width: 15ch;
  font-size: clamp(2.75rem, 4.65vw, 5.45rem) !important;
  line-height: 0.93;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

.web-stage {
  position: relative;
  width: min(620px, 100%);
  min-height: clamp(178px, 18vw, 250px);
  margin-top: clamp(16px, 2.2vw, 28px);
  padding: clamp(14px, 1.8vw, 20px);
  border: 1px solid rgba(246, 246, 243, 0.16);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 42%, rgba(255, 255, 255, 0.065)),
    rgba(9, 9, 9, 0.82);
  box-shadow: 0 32px 110px rgba(0, 0, 0, 0.34);
  transform: translateY(-4px);
}

.web-stage::before {
  content: "";
  position: absolute;
  inset: 46px 0 auto;
  height: 1px;
  background: rgba(246, 246, 243, 0.12);
}

.web-stage::after {
  content: "";
  position: absolute;
  inset: auto -16% -42% 34%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 246, 243, 0.14), transparent 62%);
  filter: blur(2px);
}

.web-stage-top {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 7px;
  margin-bottom: 32px;
}

.web-stage-top span {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(246, 246, 243, 0.42);
}

.web-stage-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  grid-template-rows: repeat(3, minmax(42px, 1fr));
  gap: 10px;
}

.web-stage-grid span {
  min-height: 42px;
  border: 1px solid rgba(246, 246, 243, 0.1);
  border-radius: 6px;
  background: rgba(246, 246, 243, 0.06);
}

.web-stage-grid .web-stage-hero {
  grid-row: span 3;
  min-height: clamp(98px, 11vw, 148px);
  background:
    linear-gradient(140deg, rgba(246, 246, 243, 0.24), rgba(246, 246, 243, 0.055) 44%, transparent 45%),
    radial-gradient(circle at 28% 24%, rgba(246, 246, 243, 0.18), transparent 34%),
    rgba(246, 246, 243, 0.075);
}

.web-stage-tags {
  position: absolute;
  left: clamp(16px, 2vw, 22px);
  right: clamp(16px, 2vw, 22px);
  bottom: clamp(12px, 1.5vw, 18px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-stage-tags span,
.web-panel-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(246, 246, 243, 0.16);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.38);
  color: rgba(246, 246, 243, 0.72);
  font-size: 0.7rem;
  font-weight: 850;
}

.web-tabs {
  position: sticky !important;
  top: 98px;
  align-self: start;
  min-height: clamp(390px, 38vw, 520px);
  padding: clamp(12px, 1.3vw, 16px);
  border: 1px solid rgba(246, 246, 243, 0.16) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(7, 7, 7, 0.82) !important;
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

.web-tabs .tab-list {
  position: relative;
  z-index: 1;
  gap: 8px !important;
  padding: 0 !important;
}

.web-tabs .tab {
  min-height: 48px !important;
  border: 1px solid rgba(246, 246, 243, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(246, 246, 243, 0.58) !important;
  transition: transform 220ms ease, background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.web-tabs .tab:hover,
.web-tabs .tab:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(246, 246, 243, 0.34) !important;
  color: rgba(246, 246, 243, 0.92) !important;
}

.web-tabs .tab.is-active {
  background: #f6f6f3 !important;
  border-color: #f6f6f3 !important;
  color: #050505 !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22) !important;
}

.web-tabs .tab-panels {
  position: relative;
  min-height: 300px;
}

.web-tabs .tab-panel {
  min-height: 300px !important;
  padding: clamp(34px, 4vw, 56px) 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.web-tabs .tab-panel h3 {
  max-width: 12ch;
  margin-bottom: clamp(18px, 2.2vw, 30px) !important;
  color: #f8f8f4;
  font-size: clamp(1.85rem, 2.8vw, 3.25rem) !important;
  line-height: 0.98;
  font-weight: 900;
}

.web-tabs .tab-panel p {
  max-width: 38ch;
  color: rgba(246, 246, 243, 0.66) !important;
  font-size: clamp(1rem, 1.1vw, 1.12rem) !important;
  line-height: 1.62 !important;
}

.web-panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(24px, 3vw, 38px);
}

.web-panel-link {
  position: absolute;
  right: clamp(12px, 1.3vw, 16px);
  bottom: clamp(12px, 1.3vw, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding-inline: 18px;
  border: 1px solid rgba(246, 246, 243, 0.2);
  border-radius: 999px;
  color: rgba(246, 246, 243, 0.82);
  font-size: 0.76rem;
  font-weight: 900;
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.web-panel-link:hover,
.web-panel-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(246, 246, 243, 0.46);
  background: rgba(246, 246, 243, 0.08);
}

html[data-theme="light"] .web-showcase {
  background:
    linear-gradient(180deg, rgba(17, 17, 17, 0.035), transparent 28%, rgba(17, 17, 17, 0.025)),
    radial-gradient(900px ellipse at 82% 22%, rgba(13, 95, 89, 0.11), transparent 62%),
    #f4f4fb !important;
}

html[data-theme="light"] .web-showcase::before {
  background:
    linear-gradient(90deg, rgba(17, 17, 17, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 17, 17, 0.038) 1px, transparent 1px);
}

html[data-theme="light"] .web-showcase::after {
  content: none;
}

html[data-theme="light"] .web-loop {
  color: rgba(17, 17, 17, 0.07);
}

html[data-theme="light"] .web-stage,
html[data-theme="light"] .web-tabs {
  border-color: rgba(17, 17, 17, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.42)),
    rgba(244, 244, 251, 0.72) !important;
  box-shadow: 0 34px 110px rgba(17, 17, 17, 0.12) !important;
}

html[data-theme="light"] .web-stage::before,
html[data-theme="light"] .web-stage-grid span {
  border-color: rgba(17, 17, 17, 0.1);
  background-color: rgba(17, 17, 17, 0.045);
}

html[data-theme="light"] .web-stage-tags span,
html[data-theme="light"] .web-panel-meta span,
html[data-theme="light"] .web-panel-link,
html[data-theme="light"] .web-tabs .tab {
  border-color: rgba(17, 17, 17, 0.14) !important;
  background: rgba(255, 255, 255, 0.42) !important;
  color: rgba(17, 17, 17, 0.64) !important;
}

html[data-theme="light"] .web-tabs .tab.is-active {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

html[data-theme="light"] .web-tabs .tab-panel h3 {
  color: #111111;
}

html[data-theme="light"] .web-tabs .tab-panel p {
  color: rgba(17, 17, 17, 0.64) !important;
}

@media (max-width: 980px) {
  .web-showcase {
    grid-template-columns: 1fr !important;
    min-height: auto;
  }

  .web-tabs {
    position: relative !important;
    top: auto;
    min-height: 0;
  }

  .web-stage {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .web-showcase {
    scroll-margin-top: 86px;
    padding: 102px 16px 82px !important;
  }

  .web-loop {
    bottom: auto;
    top: 54px;
    color: rgba(246, 246, 243, 0.046);
    font-size: clamp(3.9rem, 24vw, 6.6rem);
    animation-duration: 24s;
  }

  .web-showcase .workforce-head h2 {
    max-width: 11.8ch;
    font-size: clamp(2.55rem, 11.2vw, 4rem) !important;
  }

  .web-stage {
    min-height: 250px;
  }

  .web-tabs .tab-list {
    grid-template-columns: 1fr !important;
  }

  .web-tabs .tab-panel h3 {
    max-width: 11ch;
    font-size: clamp(1.9rem, 8vw, 3rem) !important;
  }

  .web-panel-link {
    position: static;
    width: 100%;
    margin-top: 18px;
  }
}

@keyframes webLoop {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .web-loop {
    animation: none !important;
  }
}

/* Websites tabs polish: turn the right side into a deliberate interface panel. */
.web-tabs {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: clamp(365px, 34vw, 460px) !important;
  padding: clamp(18px, 2vw, 26px) !important;
  overflow: hidden;
  border-color: rgba(246, 246, 243, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.07)),
    radial-gradient(520px ellipse at 84% 18%, rgba(246, 246, 243, 0.11), transparent 64%),
    rgba(7, 7, 7, 0.9) !important;
}

.web-tabs::before {
  content: "";
  position: absolute;
  inset: 86px clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px);
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(246, 246, 243, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(420px ellipse at 86% 18%, rgba(246, 246, 243, 0.12), transparent 66%),
    linear-gradient(180deg, rgba(246, 246, 243, 0.07), rgba(246, 246, 243, 0.025));
  opacity: 0.9;
}

.web-tabs::after {
  content: "";
  position: absolute;
  left: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  bottom: clamp(18px, 2vw, 26px);
  z-index: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(246, 246, 243, 0.5), rgba(246, 246, 243, 0.08), transparent);
}

.web-tabs .tab-list,
.web-tabs .tab-panels,
.web-tabs .web-panel-link {
  position: relative;
  z-index: 1;
}

.web-tabs .tab-list {
  padding: 6px !important;
  border: 1px solid rgba(246, 246, 243, 0.12);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.web-tabs .tab {
  min-height: 44px !important;
  border-color: transparent !important;
  background: transparent !important;
}

.web-tabs .tab.is-active {
  background: #f6f6f3 !important;
  color: #050505 !important;
}

.web-tabs .tab-panels {
  display: grid;
  align-items: stretch;
  min-height: 0;
}

.web-tabs .tab-panel {
  position: relative;
  min-height: 0 !important;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding: clamp(28px, 3.2vw, 42px) clamp(22px, 2.4vw, 36px) clamp(18px, 2.2vw, 28px) !important;
  border: 1px solid rgba(246, 246, 243, 0.11) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(8, 8, 8, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.web-tabs .tab-panel::before {
  content: none;
}

.web-tabs .tab-panel h3 {
  max-width: 15ch;
  margin-bottom: clamp(14px, 1.6vw, 22px) !important;
  padding-left: 0;
  font-size: clamp(1.78rem, 2.45vw, 3rem) !important;
  line-height: 0.98 !important;
  text-shadow: 0 18px 54px rgba(0, 0, 0, 0.48);
}

.web-tabs .tab-panel p {
  max-width: 35ch;
  padding-left: 0;
}

.web-panel-meta {
  padding-left: 0;
  margin-top: clamp(16px, 1.8vw, 24px) !important;
}

.web-panel-meta span {
  min-height: 34px;
  padding-inline: 12px;
  background: rgba(246, 246, 243, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.web-panel-link {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  justify-self: end;
  width: max-content;
  margin: clamp(10px, 1.2vw, 16px) clamp(4px, 0.8vw, 10px) clamp(4px, 0.8vw, 10px) 0;
  background: rgba(246, 246, 243, 0.1);
}

.web-panel-link::after {
  content: "";
  width: 6px;
  aspect-ratio: 1;
  margin-left: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

html[data-theme="light"] .web-tabs {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.76)),
    radial-gradient(520px ellipse at 84% 18%, rgba(13, 95, 89, 0.1), transparent 64%),
    rgba(244, 244, 251, 0.9) !important;
}

html[data-theme="light"] .web-tabs::before {
  border-color: rgba(17, 17, 17, 0.08);
  background:
    radial-gradient(420px ellipse at 86% 18%, rgba(13, 95, 89, 0.1), transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.34));
}

html[data-theme="light"] .web-tabs::after,
html[data-theme="light"] .web-tabs .tab-panel::before {
  background: linear-gradient(90deg, rgba(17, 17, 17, 0.36), rgba(17, 17, 17, 0.08), transparent);
}

html[data-theme="light"] .web-tabs .tab-list {
  border-color: rgba(17, 17, 17, 0.1);
  background: rgba(255, 255, 255, 0.46) !important;
}

html[data-theme="dark"] .web-tabs .tab-panel,
html[data-theme="light"] .web-tabs .tab-panel {
  min-height: 0 !important;
  margin-top: clamp(16px, 1.8vw, 22px) !important;
  padding: clamp(28px, 3.2vw, 42px) clamp(22px, 2.4vw, 36px) clamp(18px, 2.2vw, 28px) !important;
  border: 1px solid rgba(246, 246, 243, 0.11) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(8, 8, 8, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html[data-theme="light"] .web-tabs .tab-panel {
  border-color: rgba(17, 17, 17, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.36)),
    rgba(244, 244, 251, 0.7) !important;
}

@media (max-width: 680px) {
  .web-tabs {
    min-height: 0 !important;
    padding: 14px !important;
  }

  .web-tabs::before {
    inset: 78px 14px 14px;
  }

  .web-tabs .tab-list {
    border-radius: 22px;
  }

  .web-tabs .tab-panel {
    padding: 28px 0 22px !important;
  }

  .web-tabs .tab-panel h3,
  .web-tabs .tab-panel p,
  .web-panel-meta {
    padding-left: 16px;
  }

  .web-panel-link {
    width: 100%;
    justify-self: stretch;
    margin: 12px 0 0;
  }
}

/* Homepage KI section: make the offer feel tangible instead of text-only. */
.ai-section {
  width: min(1280px, calc(100vw - 40px)) !important;
  min-height: clamp(720px, 92svh, 920px);
  display: grid;
  align-items: center;
  padding: clamp(88px, 9vw, 134px) clamp(18px, 4vw, 48px) !important;
  overflow: hidden;
  isolation: isolate;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 30%, rgba(255, 255, 255, 0.02)),
    radial-gradient(760px ellipse at 78% 22%, rgba(255, 255, 255, 0.115), transparent 64%),
    #050505 !important;
}

.ai-section::before {
  left: 0 !important;
  right: 0 !important;
  background:
    linear-gradient(90deg, transparent, rgba(246, 246, 243, 0.22), transparent) !important;
}

.ai-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(246, 246, 243, 0.052) 1px, transparent 1px),
    linear-gradient(180deg, rgba(246, 246, 243, 0.038) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 72% 44%, #000 0 42%, transparent 72%);
}

.ai-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  gap: clamp(34px, 6vw, 88px);
  align-items: center;
}

.ai-copy {
  max-width: 610px;
}

.ai-copy h2 {
  max-width: 10.6ch !important;
  margin: 0 0 clamp(18px, 2vw, 28px);
  color: #f8f8f4;
  font-size: clamp(3.2rem, 6.1vw, 7.6rem) !important;
  line-height: 0.86 !important;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

.ai-copy p {
  max-width: 47ch;
  margin: 0;
  color: rgba(246, 246, 243, 0.68) !important;
  font-size: clamp(1rem, 1.2vw, 1.17rem);
  line-height: 1.66;
  font-weight: 560;
}

.ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 38px);
}

.ai-lab {
  position: relative;
  min-height: clamp(480px, 46vw, 660px);
  overflow: hidden;
  border: 1px solid rgba(246, 246, 243, 0.16);
  border-radius: 8px;
  background: #090909;
  box-shadow: 0 38px 120px rgba(0, 0, 0, 0.42);
}

.ai-lab img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  opacity: 0.72;
  filter: saturate(0.92) contrast(1.08) brightness(0.68);
  transform: scale(1.04);
}

.ai-lab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(246, 246, 243, 0.16), transparent 26%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.12), rgba(5, 5, 5, 0.28) 48%, rgba(5, 5, 5, 0.88)),
    linear-gradient(90deg, rgba(5, 5, 5, 0.86), rgba(5, 5, 5, 0.12) 58%, rgba(5, 5, 5, 0.62));
}

.ai-lab::after {
  content: "";
  position: absolute;
  inset: clamp(16px, 2vw, 26px);
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(246, 246, 243, 0.14);
  border-radius: 6px;
}

.ai-lab-overlay {
  position: absolute;
  inset: clamp(24px, 3.2vw, 48px);
  z-index: 3;
}

.ai-lab-overlay::before,
.ai-lab-overlay::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, 70%);
  aspect-ratio: 1;
  border: 1px solid rgba(246, 246, 243, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ai-lab-overlay::after {
  width: min(340px, 48%);
  border-style: dashed;
  opacity: 0.8;
  animation: aiSpin 28s linear infinite;
}

.ai-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(132px, 14vw, 190px);
  aspect-ratio: 1;
  border: 1px solid rgba(246, 246, 243, 0.28);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.24), transparent 42%),
    rgba(6, 6, 6, 0.86);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.ai-core span,
.ai-core strong {
  grid-area: 1 / 1;
}

.ai-core span {
  align-self: start;
  margin-top: 30%;
  color: rgba(246, 246, 243, 0.56);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.56rem, 0.65vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ai-core strong {
  color: #ffffff;
  font-size: clamp(3rem, 6vw, 5.7rem);
  line-height: 1;
  font-weight: 950;
}

.ai-node {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 6px;
  width: clamp(150px, 16vw, 210px);
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid rgba(246, 246, 243, 0.18);
  border-radius: 8px;
  background: rgba(8, 8, 8, 0.74);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(15px) saturate(135%);
  -webkit-backdrop-filter: blur(15px) saturate(135%);
  animation: aiFloat 6.5s ease-in-out infinite;
}

.ai-node::before {
  content: "";
  position: absolute;
  left: 16px;
  top: -44px;
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, transparent, rgba(246, 246, 243, 0.3));
}

.ai-node span {
  color: rgba(246, 246, 243, 0.56);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ai-node strong {
  color: rgba(246, 246, 243, 0.9);
  font-size: clamp(0.96rem, 1.1vw, 1.18rem);
  line-height: 1.15;
  font-weight: 850;
}

.node-cloud { right: 2%; top: 8%; }
.node-local { left: 0; top: 26%; animation-delay: -1.4s; }
.node-mcp { right: 8%; bottom: 18%; animation-delay: -2.8s; }
.node-copilot { left: 14%; bottom: 9%; animation-delay: -4.2s; }

html[data-theme="light"] .ai-section {
  background:
    linear-gradient(180deg, rgba(17, 17, 17, 0.035), transparent 30%, rgba(17, 17, 17, 0.02)),
    radial-gradient(760px ellipse at 78% 22%, rgba(13, 95, 89, 0.12), transparent 64%),
    #f4f4fb !important;
}

html[data-theme="light"] .ai-copy h2 {
  color: #111111;
}

html[data-theme="light"] .ai-copy p {
  color: rgba(17, 17, 17, 0.64) !important;
}

html[data-theme="light"] .ai-section::after {
  background:
    linear-gradient(90deg, rgba(17, 17, 17, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 17, 17, 0.038) 1px, transparent 1px);
}

@media (max-width: 980px) {
  .ai-section {
    min-height: auto;
  }

  .ai-shell {
    grid-template-columns: 1fr;
  }

  .ai-copy {
    max-width: 780px;
  }

  .ai-copy h2 {
    max-width: 11ch !important;
  }

  .ai-lab {
    min-height: clamp(460px, 70vw, 620px);
  }
}

@media (max-width: 680px) {
  .ai-section {
    width: min(100% - 28px, 1280px) !important;
    padding: 82px 16px !important;
  }

  .ai-copy h2 {
    font-size: clamp(3rem, 14.5vw, 4.65rem) !important;
  }

  .ai-actions .button {
    width: 100%;
    justify-content: center;
  }

  .ai-lab {
    min-height: 620px;
  }

  .ai-lab-overlay {
    inset: 24px;
  }

  .ai-lab-overlay::before {
    width: 86%;
  }

  .ai-lab-overlay::after {
    width: 62%;
  }

  .ai-core {
    top: 43%;
    width: 142px;
  }

  .ai-node {
    width: min(210px, calc(100% - 24px));
  }

  .node-cloud { right: 0; top: 0; }
  .node-local { left: 0; top: 21%; }
  .node-mcp { right: 0; bottom: 18%; }
  .node-copilot { left: 0; bottom: 5%; }
}

@media (min-width: 981px) and (max-height: 720px) {
  .ai-section {
    min-height: 760px;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .ai-lab {
    min-height: 540px;
  }

  .ai-copy h2 {
    font-size: clamp(3rem, 5.35vw, 6.6rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-lab-overlay::after,
  .ai-node {
    animation: none !important;
  }
}

@keyframes aiSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes aiFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

/* KI section final tone: less synthetic AI, more concrete consulting workflow. */
.ai-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%, rgba(255, 255, 255, 0.018)),
    radial-gradient(760px ellipse at 82% 28%, rgba(255, 255, 255, 0.08), transparent 66%),
    #050505 !important;
}

.ai-copy h2 {
  max-width: 11.4ch !important;
  font-size: clamp(3.05rem, 5.45vw, 6.8rem) !important;
  line-height: 0.9 !important;
}

.ai-lab {
  min-height: clamp(470px, 42vw, 620px);
  background: #080808;
}

.ai-lab img {
  object-position: 50% center;
  opacity: 0.5;
  filter: saturate(0.72) contrast(1.12) brightness(0.54);
}

.ai-lab::before {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.62) 42%, rgba(5, 5, 5, 0.34) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.12), rgba(5, 5, 5, 0.58) 100%) !important;
}

.ai-lab::after {
  inset: 18px;
  border-color: rgba(246, 246, 243, 0.12);
}

.ai-workflow-panel {
  inset: clamp(28px, 4vw, 58px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(18px, 2.4vw, 32px);
}

.ai-workflow-panel::before,
.ai-workflow-panel::after {
  content: none !important;
}

.ai-workflow-head {
  display: grid;
  gap: 12px;
  max-width: min(440px, 100%);
}

.ai-workflow-head span,
.ai-signal-row span,
.ai-workflow span {
  color: rgba(246, 246, 243, 0.56);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ai-workflow-head strong {
  max-width: 12ch;
  color: #f8f8f4;
  font-size: clamp(2.3rem, 4.6vw, 5.1rem);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

.ai-workflow {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(246, 246, 243, 0.15);
  background: rgba(246, 246, 243, 0.15);
}

.ai-workflow div {
  min-height: clamp(112px, 10vw, 142px);
  display: grid;
  align-content: space-between;
  gap: 14px;
  padding: clamp(16px, 1.8vw, 22px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 48%),
    rgba(7, 7, 7, 0.82);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.ai-workflow strong {
  color: rgba(246, 246, 243, 0.94);
  font-size: clamp(1.02rem, 1.25vw, 1.34rem);
  line-height: 1.08;
  font-weight: 900;
}

.ai-workflow em {
  color: rgba(246, 246, 243, 0.58);
  font-size: clamp(0.82rem, 0.9vw, 0.94rem);
  line-height: 1.38;
  font-style: normal;
  font-weight: 620;
}

.ai-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ai-signal-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(246, 246, 243, 0.16);
  border-radius: 999px;
  background: rgba(246, 246, 243, 0.065);
  color: rgba(246, 246, 243, 0.68);
}

html[data-theme="light"] .ai-workflow-head strong {
  color: #ffffff;
}

@media (max-width: 680px) {
  .ai-lab {
    min-height: 680px;
  }

  .ai-workflow-panel {
    inset: 24px;
  }

  .ai-workflow-head strong {
    font-size: clamp(2.15rem, 10vw, 3.45rem);
  }

  .ai-workflow {
    grid-template-columns: 1fr;
  }

  .ai-workflow div {
    min-height: 104px;
  }
}

/* Tighten the KI homepage panel into an editorial process map. */
.ai-workflow-panel {
  gap: clamp(14px, 1.8vw, 22px);
}

.ai-workflow-head {
  max-width: 520px;
}

.ai-workflow-head strong {
  max-width: 14ch;
  font-size: clamp(1.9rem, 3.35vw, 3.95rem);
  line-height: 0.95;
}

.ai-workflow {
  align-self: stretch;
  grid-template-columns: 1fr;
  border-color: rgba(246, 246, 243, 0.14);
}

.ai-workflow div {
  min-height: clamp(66px, 6.2vw, 82px);
  grid-template-columns: 44px minmax(0, 0.82fr) minmax(130px, 1fr);
  align-items: center;
  align-content: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(12px, 1.25vw, 16px) clamp(14px, 1.7vw, 22px);
}

.ai-workflow div span {
  align-self: center;
}

.ai-workflow strong {
  font-size: clamp(0.98rem, 1.1vw, 1.18rem);
}

.ai-workflow em {
  font-size: clamp(0.78rem, 0.84vw, 0.9rem);
}

.ai-signal-row {
  margin-top: -2px;
}

.ai-signal-row span {
  min-height: 30px;
  font-size: 0.62rem;
}

@media (min-width: 981px) and (max-height: 720px) {
  .ai-workflow-head strong {
    font-size: clamp(1.75rem, 3vw, 3.35rem);
  }

  .ai-workflow div {
    min-height: 62px;
  }

  .ai-signal-row {
    display: none;
  }
}

@media (max-width: 680px) {
  .ai-workflow div {
    grid-template-columns: 38px 1fr;
  }

  .ai-workflow em {
    grid-column: 2;
  }
}

/* KI section: Process OS showcase pass. */
.ai-section {
  width: min(1360px, calc(100vw - 32px)) !important;
  min-height: clamp(760px, 96svh, 980px) !important;
  padding: clamp(82px, 8vw, 128px) clamp(18px, 4vw, 58px) !important;
  background:
    radial-gradient(880px ellipse at 76% 24%, rgba(255, 255, 255, 0.12), transparent 64%),
    radial-gradient(680px ellipse at 24% 78%, rgba(255, 255, 255, 0.06), transparent 66%),
    linear-gradient(180deg, #050505 0%, #0b0b0b 48%, #050505 100%) !important;
}

.ai-section::after {
  background:
    linear-gradient(90deg, rgba(246, 246, 243, 0.075) 1px, transparent 1px),
    linear-gradient(180deg, rgba(246, 246, 243, 0.052) 1px, transparent 1px) !important;
  background-size: 92px 92px !important;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent) !important;
  opacity: 0.9;
}

.ai-shell {
  grid-template-columns: minmax(0, 0.78fr) minmax(520px, 1.22fr) !important;
  gap: clamp(38px, 6vw, 96px) !important;
}

.ai-copy h2 {
  max-width: 8.7ch !important;
  font-size: clamp(3.35rem, 6vw, 7.8rem) !important;
  line-height: 0.86 !important;
}

.ai-copy p {
  max-width: 43ch;
}

.ai-lab {
  min-height: clamp(540px, 50vw, 720px) !important;
  overflow: visible;
  border-color: rgba(246, 246, 243, 0.18);
  background: transparent;
  box-shadow: none;
  perspective: 1200px;
}

.ai-lab img {
  inset: 8% -2% auto auto;
  width: 82%;
  height: 58%;
  border: 1px solid rgba(246, 246, 243, 0.12);
  border-radius: 8px;
  opacity: 0.62;
  object-position: center;
  filter: saturate(0.86) contrast(1.12) brightness(0.66);
  transform: rotate(-3deg) skewY(-1.5deg) scale(1.02);
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.5);
}

.ai-lab::before {
  inset: 8% -2% auto auto;
  width: 82%;
  height: 58%;
  z-index: 1;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.72), rgba(5, 5, 5, 0.18) 54%, rgba(5, 5, 5, 0.62)),
    linear-gradient(180deg, rgba(5, 5, 5, 0.05), rgba(5, 5, 5, 0.72)) !important;
  transform: rotate(-3deg) skewY(-1.5deg);
}

.ai-lab::after {
  inset: auto 0 0 8%;
  z-index: 0;
  width: 72%;
  height: 70%;
  border-color: rgba(246, 246, 243, 0.1);
  background:
    linear-gradient(90deg, rgba(246, 246, 243, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(246, 246, 243, 0.035) 1px, transparent 1px);
  background-size: 38px 38px;
  transform: rotate(2.5deg) skewY(1deg);
}

.ai-impact-panel {
  inset: 0 !important;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(22px, 2.8vw, 38px);
  min-height: 100%;
}

.ai-impact-panel::before,
.ai-impact-panel::after {
  content: none !important;
}

.ai-impact-head {
  position: relative;
  z-index: 4;
  width: min(520px, 74%);
  margin: 0 0 0 auto;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid rgba(246, 246, 243, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(7, 7, 7, 0.66);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.ai-impact-head span,
.ai-impact-card span,
.ai-impact-lanes span {
  display: block;
  color: rgba(246, 246, 243, 0.58);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ai-impact-head strong {
  display: block;
  max-width: 12ch;
  margin-top: 12px;
  color: #ffffff;
  font-size: clamp(2rem, 3.9vw, 4.75rem);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

.ai-impact-stage {
  position: relative;
  min-height: clamp(290px, 30vw, 420px);
  transform-style: preserve-3d;
}

.ai-impact-stage::before {
  content: "AUTOMATION";
  position: absolute;
  left: 0;
  top: 42%;
  z-index: 0;
  color: rgba(246, 246, 243, 0.065);
  font-size: clamp(4.2rem, 9vw, 9.4rem);
  line-height: 0.8;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
  transform: translateY(-50%) rotate(-4deg);
}

.ai-impact-card {
  position: absolute;
  z-index: 2;
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-height: 116px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(246, 246, 243, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.026) 54%, rgba(255, 255, 255, 0.08)),
    rgba(8, 8, 8, 0.78);
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), border-color 320ms ease;
}

.ai-impact-card strong {
  color: rgba(246, 246, 243, 0.96);
  font-size: clamp(1.02rem, 1.35vw, 1.55rem);
  line-height: 1.04;
  font-weight: 920;
}

.ai-impact-card em {
  color: rgba(246, 246, 243, 0.62);
  font-size: clamp(0.86rem, 0.95vw, 1rem);
  line-height: 1.45;
  font-style: normal;
  font-weight: 620;
}

.card-main {
  left: 2%;
  top: 10%;
  width: min(360px, 48%);
  min-height: clamp(230px, 22vw, 300px);
  transform: rotate(-4deg) translateZ(74px);
}

.card-main strong {
  max-width: 9ch;
  font-size: clamp(2.1rem, 4vw, 4.5rem);
  line-height: 0.88;
  color: #ffffff;
}

.card-data {
  right: 6%;
  top: 2%;
  width: min(300px, 39%);
  transform: rotate(5deg) translateZ(40px);
}

.card-tools {
  right: 0;
  top: 38%;
  width: min(330px, 44%);
  transform: rotate(-2deg) translateZ(55px);
}

.card-control {
  left: 32%;
  bottom: 0;
  width: min(330px, 44%);
  transform: rotate(3deg) translateZ(28px);
}

.ai-impact-card:hover {
  transform: translateY(-8px) rotate(0deg) translateZ(82px);
  border-color: rgba(246, 246, 243, 0.34);
}

.ai-impact-lanes {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 10px;
  width: min(560px, 86%);
  margin-left: auto;
}

.ai-impact-lanes div {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 14px;
}

.ai-impact-lanes i {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(246, 246, 243, 0.12);
}

.ai-impact-lanes i::before {
  content: "";
  display: block;
  width: var(--lane, 72%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(246, 246, 243, 0.95), rgba(246, 246, 243, 0.34));
  animation: aiLane 2.8s ease-in-out infinite;
}

.ai-impact-lanes div:nth-child(2) i::before { --lane: 82%; animation-delay: -0.7s; }
.ai-impact-lanes div:nth-child(3) i::before { --lane: 64%; animation-delay: -1.3s; }

html[data-theme="light"] .ai-section {
  background:
    radial-gradient(880px ellipse at 76% 24%, rgba(17, 17, 17, 0.1), transparent 64%),
    radial-gradient(680px ellipse at 24% 78%, rgba(13, 95, 89, 0.1), transparent 66%),
    linear-gradient(180deg, #f4f4fb 0%, #ededf4 48%, #f4f4fb 100%) !important;
}

html[data-theme="light"] .ai-impact-head,
html[data-theme="light"] .ai-impact-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.46)),
    rgba(244, 244, 251, 0.78) !important;
  border-color: rgba(17, 17, 17, 0.13);
  box-shadow: 0 28px 84px rgba(17, 17, 17, 0.14);
}

html[data-theme="light"] .ai-impact-head strong,
html[data-theme="light"] .ai-impact-card strong,
html[data-theme="light"] .card-main strong {
  color: #111111;
}

html[data-theme="light"] .ai-impact-head span,
html[data-theme="light"] .ai-impact-card span,
html[data-theme="light"] .ai-impact-lanes span,
html[data-theme="light"] .ai-impact-card em {
  color: rgba(17, 17, 17, 0.62);
}

@media (min-width: 981px) and (max-height: 720px) {
  .ai-section {
    min-height: 720px !important;
    padding-top: 62px !important;
    padding-bottom: 62px !important;
  }

  .ai-lab {
    min-height: 500px !important;
  }

  .ai-impact-panel {
    gap: 14px;
  }

  .ai-impact-head {
    width: min(480px, 72%);
    padding: 20px 22px;
  }

  .ai-impact-head strong {
    font-size: clamp(1.72rem, 2.75vw, 3.15rem);
    line-height: 0.92;
  }

  .ai-impact-stage {
    min-height: 270px;
  }

  .card-main {
    top: 0;
    min-height: 188px;
  }

  .card-main strong {
    font-size: clamp(1.8rem, 3.3vw, 3.35rem);
  }

  .card-data {
    top: 0;
  }

  .card-tools {
    top: 34%;
  }

  .card-control {
    bottom: 4%;
  }

  .ai-impact-lanes {
    display: none;
  }
}

@media (max-width: 980px) {
  .ai-shell {
    grid-template-columns: 1fr !important;
  }

  .ai-lab {
    min-height: 620px !important;
  }
}

@media (max-width: 680px) {
  .ai-section {
    width: min(100% - 24px, 1360px) !important;
    padding: 76px 14px !important;
  }

  .ai-copy h2 {
    font-size: clamp(3rem, 13.5vw, 4.7rem) !important;
  }

  .ai-lab {
    min-height: 780px !important;
    overflow: hidden;
  }

  .ai-lab img,
  .ai-lab::before {
    inset: 0;
    width: 100%;
    height: 46%;
    transform: none;
  }

  .ai-impact-head {
    width: 100%;
    margin: 0;
  }

  .ai-impact-head strong {
    font-size: clamp(2.15rem, 10vw, 3.4rem);
  }

  .ai-impact-stage {
    min-height: 450px;
  }

  .ai-impact-card,
  .card-main,
  .card-data,
  .card-tools,
  .card-control {
    width: min(310px, 82%) !important;
    transform: none !important;
  }

  .card-main { left: 0; top: 0; min-height: 210px; }
  .card-data { right: 0; top: 155px; }
  .card-tools { left: 0; right: auto; top: 270px; }
  .card-control { right: 0; left: auto; bottom: 0; }

  .card-main strong {
    font-size: clamp(2.05rem, 10vw, 3.3rem);
  }

  .ai-impact-lanes {
    width: 100%;
  }

  .ai-impact-lanes div {
    grid-template-columns: 96px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-impact-lanes i::before {
    animation: none !important;
  }
}

@keyframes aiLane {
  0%, 100% { transform: translateX(-12%); opacity: 0.58; }
  50% { transform: translateX(0); opacity: 1; }
}

/* KI polish: keep the showcase inside its frame and add restrained motion. */
.ai-lab {
  overflow: hidden !important;
}

.ai-impact-panel {
  inset: clamp(16px, 2vw, 28px) !important;
  min-height: auto !important;
}

.ai-lab img {
  animation: aiImageDrift 14s ease-in-out infinite;
}

.ai-impact-head {
  animation: aiPanelFloat 8s ease-in-out infinite;
}

.card-main {
  left: 3% !important;
  top: 8% !important;
  width: min(340px, 46%) !important;
  animation: aiCardMainFloat 7.5s ease-in-out infinite;
}

.card-data {
  right: 8% !important;
  top: 2% !important;
  width: min(280px, 38%) !important;
  animation: aiCardDataFloat 8.2s ease-in-out infinite;
}

.card-tools {
  right: 4% !important;
  top: 36% !important;
  width: min(300px, 42%) !important;
  animation: aiCardToolsFloat 7.8s ease-in-out infinite;
}

.card-control {
  left: 31% !important;
  bottom: 4% !important;
  width: min(300px, 42%) !important;
  animation: aiCardControlFloat 8.6s ease-in-out infinite;
}

.ai-impact-card:hover {
  animation-play-state: paused;
}

@media (min-width: 981px) and (max-height: 720px) {
  .ai-impact-panel {
    inset: 22px !important;
  }

  .card-main {
    top: 4% !important;
    min-height: 178px !important;
  }

  .card-data {
    top: 3% !important;
  }

  .card-tools {
    top: 35% !important;
  }

  .card-control {
    bottom: 6% !important;
  }
}

@media (max-width: 680px) {
  .ai-impact-panel {
    inset: 18px !important;
  }

  .ai-impact-card,
  .card-main,
  .card-data,
  .card-tools,
  .card-control {
    animation: aiMobileCardFloat 7s ease-in-out infinite !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-lab img,
  .ai-impact-head,
  .ai-impact-card {
    animation: none !important;
  }
}

@keyframes aiImageDrift {
  0%, 100% { transform: rotate(-3deg) skewY(-1.5deg) scale(1.02); }
  50% { transform: rotate(-2.2deg) skewY(-1.1deg) scale(1.055) translate3d(-6px, -4px, 0); }
}

@keyframes aiPanelFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}

@keyframes aiCardMainFloat {
  0%, 100% { transform: rotate(-4deg) translate3d(0, 0, 74px); }
  50% { transform: rotate(-2.8deg) translate3d(0, -9px, 74px); }
}

@keyframes aiCardDataFloat {
  0%, 100% { transform: rotate(5deg) translate3d(0, 0, 40px); }
  50% { transform: rotate(3.8deg) translate3d(0, -7px, 40px); }
}

@keyframes aiCardToolsFloat {
  0%, 100% { transform: rotate(-2deg) translate3d(0, 0, 55px); }
  50% { transform: rotate(-1deg) translate3d(0, -8px, 55px); }
}

@keyframes aiCardControlFloat {
  0%, 100% { transform: rotate(3deg) translate3d(0, 0, 28px); }
  50% { transform: rotate(2deg) translate3d(0, -7px, 28px); }
}

@keyframes aiMobileCardFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

/* KI visibility fix: turn the right side into a contained bento board. */
.ai-impact-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(12px, 1.45vw, 18px) !important;
}

.ai-impact-head {
  width: min(460px, 100%) !important;
  padding: clamp(16px, 1.55vw, 22px) !important;
}

.ai-impact-head strong {
  max-width: 13ch !important;
  font-size: clamp(1.45rem, 2.3vw, 2.75rem) !important;
  line-height: 0.98 !important;
}

.ai-impact-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.2vw, 14px) !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.ai-impact-stage::before {
  left: -6% !important;
  top: 50% !important;
  font-size: clamp(3.2rem, 6.6vw, 7rem) !important;
  opacity: 0.72;
}

.ai-impact-card,
.card-main,
.card-data,
.card-tools,
.card-control {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-height: 0 !important;
  padding: clamp(14px, 1.55vw, 20px) !important;
}

.card-main {
  grid-column: 1;
  grid-row: 1 / 4;
  transform: rotate(-1.6deg) translateZ(42px) !important;
  animation: aiBentoMainFloat 7.5s ease-in-out infinite !important;
}

.card-data {
  grid-column: 2;
  grid-row: 1;
  transform: rotate(1.2deg) translateZ(24px) !important;
  animation: aiBentoSideFloat 8s ease-in-out infinite !important;
}

.card-tools {
  grid-column: 2;
  grid-row: 2;
  transform: rotate(-0.8deg) translateZ(30px) !important;
  animation: aiBentoSideFloat 8.4s ease-in-out infinite reverse !important;
}

.card-control {
  grid-column: 2;
  grid-row: 3;
  transform: rotate(0.9deg) translateZ(20px) !important;
  animation: aiBentoSideFloat 8.8s ease-in-out infinite !important;
}

.card-main strong {
  max-width: 9.5ch !important;
  font-size: clamp(1.95rem, 3.2vw, 3.65rem) !important;
  line-height: 0.9 !important;
}

.card-main em {
  font-size: clamp(0.78rem, 0.88vw, 0.94rem) !important;
}

.card-data strong,
.card-tools strong,
.card-control strong {
  font-size: clamp(0.82rem, 0.95vw, 1.08rem) !important;
  line-height: 1.08 !important;
}

.ai-impact-lanes {
  width: min(520px, 100%) !important;
  gap: 7px !important;
}

.ai-impact-lanes div {
  grid-template-columns: 96px 1fr !important;
}

@media (min-width: 981px) and (max-height: 720px) {
  .ai-impact-head strong {
    font-size: clamp(1.34rem, 2vw, 2.28rem) !important;
  }

  .card-main strong {
    font-size: clamp(1.72rem, 2.7vw, 3rem) !important;
  }
}

@media (max-width: 680px) {
  .ai-impact-stage {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .card-main,
  .card-data,
  .card-tools,
  .card-control {
    grid-column: 1 !important;
    grid-row: auto !important;
    transform: none !important;
  }
}

@keyframes aiBentoMainFloat {
  0%, 100% { transform: rotate(-1.6deg) translate3d(0, 0, 42px); }
  50% { transform: rotate(-0.8deg) translate3d(0, -5px, 42px); }
}

@keyframes aiBentoSideFloat {
  0%, 100% { transform: translate3d(0, 0, 28px); }
  50% { transform: translate3d(0, -4px, 28px); }
}

/* KI final containment: readable bento stack, no card collisions. */
.ai-impact-stage {
  overflow: hidden;
}

.ai-impact-card {
  overflow: hidden;
}

.card-main {
  left: 0 !important;
  top: 10px !important;
  width: 46% !important;
  min-height: min(230px, calc(100% - 30px)) !important;
  transform: rotate(-2deg) translateZ(52px) !important;
}

.card-data,
.card-tools,
.card-control {
  left: auto !important;
  right: 0 !important;
  width: 45% !important;
  min-height: 72px !important;
  padding: clamp(14px, 1.45vw, 18px) !important;
}

.card-data {
  top: 0 !important;
  transform: rotate(2deg) translateZ(32px) !important;
}

.card-tools {
  top: calc(33.333% + 4px) !important;
  transform: rotate(-1deg) translateZ(38px) !important;
}

.card-control {
  top: calc(66.666% + 8px) !important;
  bottom: auto !important;
  transform: rotate(1.5deg) translateZ(26px) !important;
}

.card-data strong,
.card-tools strong,
.card-control strong {
  font-size: clamp(0.9rem, 1.05vw, 1.16rem) !important;
  line-height: 1.08 !important;
  overflow-wrap: normal;
  word-break: normal;
}

@media (min-width: 981px) and (max-height: 720px) {
  .ai-impact-stage {
    min-height: 250px !important;
  }

  .card-main {
    top: 8px !important;
    width: 45% !important;
    min-height: 204px !important;
  }

  .card-main strong {
    font-size: clamp(1.72rem, 2.85vw, 2.9rem) !important;
  }

  .card-data,
  .card-tools,
  .card-control {
    width: 46% !important;
    min-height: 68px !important;
  }
}

@media (max-width: 680px) {
  .ai-impact-stage {
    overflow: visible;
  }
}

@keyframes aiCardMainFloat {
  0%, 100% { transform: rotate(-2deg) translate3d(0, 0, 52px); }
  50% { transform: rotate(-1deg) translate3d(0, -6px, 52px); }
}

@keyframes aiCardDataFloat {
  0%, 100% { transform: rotate(2deg) translate3d(0, 0, 32px); }
  50% { transform: rotate(1deg) translate3d(0, -5px, 32px); }
}

@keyframes aiCardToolsFloat {
  0%, 100% { transform: rotate(-1deg) translate3d(0, 0, 38px); }
  50% { transform: rotate(-0.4deg) translate3d(0, -5px, 38px); }
}

@keyframes aiCardControlFloat {
  0%, 100% { transform: rotate(1.5deg) translate3d(0, 0, 26px); }
  50% { transform: rotate(0.6deg) translate3d(0, -5px, 26px); }
}

/* KI absolute final: no clipping, no compressed perspective. */
.ai-impact-lanes {
  display: none !important;
}

.ai-impact-stage {
  overflow: visible !important;
  min-height: 0 !important;
}

.card-main,
.card-data,
.card-tools,
.card-control {
  width: auto !important;
  min-height: 0 !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

.card-main {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
  transform: rotate(-1.2deg) !important;
  animation: aiFinalMainFloat 7.5s ease-in-out infinite !important;
}

.card-data {
  grid-column: 2 !important;
  grid-row: 1 !important;
  transform: rotate(0.8deg) !important;
  animation: aiFinalSideFloat 8s ease-in-out infinite !important;
}

.card-tools {
  grid-column: 2 !important;
  grid-row: 2 !important;
  transform: rotate(-0.6deg) !important;
  animation: aiFinalSideFloat 8.4s ease-in-out infinite reverse !important;
}

.card-control {
  grid-column: 2 !important;
  grid-row: 3 !important;
  transform: rotate(0.7deg) !important;
  animation: aiFinalSideFloat 8.8s ease-in-out infinite !important;
}

.card-main strong {
  font-size: clamp(1.65rem, 2.65vw, 3rem) !important;
}

.card-data strong,
.card-tools strong,
.card-control strong {
  font-size: clamp(0.78rem, 0.88vw, 0.98rem) !important;
}

@media (min-width: 981px) and (max-height: 720px) {
  .card-main strong {
    font-size: clamp(1.5rem, 2.35vw, 2.55rem) !important;
  }
}

@keyframes aiFinalMainFloat {
  0%, 100% { transform: rotate(-1.2deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-0.6deg) translate3d(0, -5px, 0); }
}

@keyframes aiFinalSideFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}

/* KI headline readability: avoid ugly hyphenated word breaks. */
.ai-copy h2 {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  white-space: nowrap !important;
  text-wrap: balance;
}

@media (min-width: 981px) {
  .ai-copy h2 {
    width: max-content;
    max-width: none !important;
    font-size: clamp(2.45rem, 3.45vw, 4.35rem) !important;
    line-height: 0.94 !important;
  }
}

@media (max-width: 680px) {
  .ai-copy h2 {
    max-width: none !important;
    font-size: clamp(2rem, 7.15vw, 2.85rem) !important;
    line-height: 0.98 !important;
  }
}

@media (max-width: 390px) {
  .ai-copy h2 {
    font-size: clamp(1.72rem, 7vw, 2.2rem) !important;
  }
}

/* KI responsive safety: never let the headline collide with the visual panel. */
.ai-shell {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
}

.ai-copy,
.ai-lab {
  min-width: 0 !important;
}

.ai-copy h2 {
  width: 100% !important;
  max-width: 8.8ch !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  font-size: clamp(3rem, 5.15vw, 5.8rem) !important;
  line-height: 0.9 !important;
}

@media (max-width: 1180px) {
  .ai-shell {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .ai-copy h2 {
    max-width: 9.5ch !important;
    font-size: clamp(3rem, 9vw, 5.4rem) !important;
  }
}

@media (max-width: 680px) {
  .ai-copy h2 {
    max-width: 9.2ch !important;
    font-size: clamp(2.55rem, 13vw, 4rem) !important;
  }
}

/* KI main card text safety: keep every word visible inside the card. */
.card-main strong {
  max-width: 100% !important;
  font-size: clamp(1.45rem, 2.05vw, 2.35rem) !important;
  line-height: 0.98 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.card-main em {
  max-width: 100% !important;
  font-size: clamp(0.72rem, 0.78vw, 0.84rem) !important;
  line-height: 1.35 !important;
}

@media (max-width: 1180px) {
  .card-main strong {
    font-size: clamp(1.45rem, 5.2vw, 2.8rem) !important;
  }
}

/* Screen-size safety pass: lower the KI showcase and keep the web loop clear. */
.ai-section {
  margin-top: clamp(72px, 10svh, 150px) !important;
  min-height: clamp(840px, 108svh, 1080px) !important;
  padding-top: clamp(220px, 25svh, 300px) !important;
  padding-bottom: clamp(92px, 10svh, 140px) !important;
  align-items: start !important;
}

.web-showcase {
  min-height: max(100svh, 900px) !important;
  padding-top: clamp(132px, 11vw, 176px) !important;
  padding-bottom: clamp(270px, 30svh, 380px) !important;
  align-items: start !important;
}

.web-loop {
  top: auto !important;
  bottom: clamp(12px, 3svh, 38px) !important;
  z-index: 1 !important;
  color: rgba(246, 246, 243, 0.058) !important;
}

.web-showcase .workforce-head,
.web-showcase .web-tabs {
  z-index: 3 !important;
}

@media (min-width: 981px) and (max-height: 760px) {
  .ai-section {
    margin-top: clamp(84px, 12svh, 150px) !important;
    min-height: 900px !important;
    padding-top: 230px !important;
  }

  .web-showcase {
    min-height: 940px !important;
    padding-bottom: 360px !important;
  }

  .web-loop {
    bottom: 24px !important;
  }
}

@media (max-width: 980px) {
  .ai-section {
    margin-top: clamp(56px, 8svh, 104px) !important;
    padding-top: clamp(126px, 15svh, 170px) !important;
  }

  .web-showcase {
    min-height: auto !important;
    padding-bottom: clamp(230px, 27svh, 310px) !important;
  }
}

@media (max-width: 680px) {
  .ai-section {
    margin-top: 56px !important;
    padding-top: 112px !important;
    padding-bottom: 86px !important;
  }

  .web-showcase {
    padding-top: 108px !important;
    padding-bottom: 230px !important;
  }

  .web-loop {
    top: auto !important;
    bottom: 16px !important;
    font-size: clamp(3.4rem, 21vw, 5.8rem) !important;
  }
}

/* Contact section — editorial layout & refined CTA */
.contact {
  position: relative;
  overflow: hidden;
  min-height: 72svh;
  padding: clamp(88px, 12svh, 132px) clamp(28px, 5vw, 72px) clamp(32px, 4vw, 48px);
}

.contact::after {
  content: "";
  position: absolute;
  right: clamp(-40px, 2vw, 80px);
  top: clamp(40px, 8svh, 120px);
  width: min(480px, 52vw);
  height: min(480px, 52vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07), transparent 68%);
  pointer-events: none;
}

.contact-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(40px, 7vw, 112px);
  row-gap: clamp(18px, 2.4vw, 28px);
  max-width: 1040px;
  flex: 1;
  align-content: center;
}

.contact-inner .section-kicker {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 4px;
}

.contact h2 {
  grid-column: 1;
  grid-row: 2;
  max-width: 11.5ch;
  margin: 0;
  font-size: clamp(2.35rem, 4.2vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

.contact-inner > p:not(.section-kicker) {
  grid-column: 1;
  grid-row: 3;
  max-width: 46ch;
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.62;
}

.contact-inner .button {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
  justify-self: start;
  display: inline-flex;
  min-height: 52px;
  padding: 0 clamp(28px, 3vw, 38px);
  white-space: nowrap;
}

.contact-inner .button.primary::after {
  content: "→";
  margin-left: 10px;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 220ms var(--fx-ease, ease);
}

.contact-inner .button.primary:hover::after,
.contact-inner .button.primary:focus-visible::after {
  transform: translateX(5px);
}

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(48px, 8svh, 96px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(244, 244, 244, 0.12);
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #ffffff;
}

.site-footer span {
  color: rgba(244, 244, 244, 0.42);
  font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .contact {
  background:
    radial-gradient(ellipse 80% 60% at 88% 18%, rgba(255, 255, 255, 0.055), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 32%),
    #050505 !important;
}

html[data-theme="dark"] .contact h2 {
  overflow-wrap: normal;
  hyphens: manual;
  text-wrap: balance;
  word-break: normal;
}

@media (max-width: 820px) {
  .contact-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .contact h2,
  .contact-inner > p:not(.section-kicker),
  .contact-inner .button {
    grid-column: 1;
    grid-row: auto;
  }

  .contact h2 {
    max-width: 13ch;
  }

  .contact-inner .button {
    align-self: start;
    margin-top: 8px;
  }

  .contact::after {
    right: -80px;
    top: auto;
    bottom: 80px;
    opacity: 0.6;
  }
}

/* Final image coverage pass: entry heroes and service cards should be image-led edge to edge. */
body.detail-page .detail-hero {
  min-height: 100svh !important;
}

body.detail-page .detail-hero::before {
  inset: 0 !important;
  background-size: cover !important;
  background-position: var(--detail-hero-position) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body.detail-page .detail-hero::after {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.66) 32%, rgba(5, 5, 5, 0.22) 68%, rgba(5, 5, 5, 0.08) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.08) 0%, rgba(5, 5, 5, 0.08) 58%, rgba(5, 5, 5, 0.72) 91%, #050505 100%) !important;
}

.service-overview .hub-card {
  min-height: 100svh !important;
}

.service-overview .hub-card-image {
  inset: 0 !important;
  opacity: 1 !important;
}

.service-overview .hub-card-image::before {
  background:
    linear-gradient(90deg, rgba(6, 6, 6, 0.9) 0%, rgba(6, 6, 6, 0.7) 34%, rgba(6, 6, 6, 0.34) 66%, rgba(6, 6, 6, 0.12) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.1) 46%, rgba(0, 0, 0, 0.48) 100%) !important;
}

.service-overview .hub-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 760px) {
  body.detail-page .detail-hero {
    min-height: 100svh !important;
  }

  body.detail-page .detail-hero::before {
    opacity: 0.72 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .service-overview .hub-card {
    min-height: 100svh !important;
    padding-bottom: clamp(30px, 8vh, 64px) !important;
  }

  .service-overview .hub-card-image {
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
  }
}

/* Software page text safety: keep headlines visible without forced word breaks. */
body.page-software .detail-main {
  padding-top: clamp(38px, 5vw, 76px) !important;
  overflow: visible !important;
}

body.page-software .detail-section {
  grid-template-columns: minmax(300px, 0.44fr) minmax(0, 1.56fr) !important;
  gap: clamp(34px, 5.6vw, 92px) !important;
  overflow: visible !important;
}

body.page-software .detail-section h2,
body.page-software .detail-section h3,
body.page-software .detail-card h3,
body.page-software .detail-hero h1,
body.page-software .contact h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

body.page-software .detail-section h2 {
  position: static !important;
  top: auto !important;
  max-width: 13.5ch !important;
  font-size: clamp(2.45rem, 3.45vw, 4.7rem) !important;
  line-height: 0.96 !important;
  text-wrap: balance;
}

body.page-software .detail-section:first-child {
  grid-template-columns: minmax(320px, 0.62fr) minmax(0, 1.38fr) !important;
  align-items: start;
  padding-top: clamp(18px, 3vw, 38px) !important;
  padding-bottom: clamp(54px, 6vw, 88px) !important;
}

body.page-software .detail-section:first-child h2 {
  max-width: 12.5ch !important;
  font-size: clamp(2.65rem, 3.9vw, 5rem) !important;
}

body.page-software .detail-section:nth-of-type(2) {
  padding-top: clamp(52px, 6vw, 90px) !important;
  padding-bottom: clamp(52px, 6vw, 88px) !important;
}

body.page-software .detail-section:nth-of-type(2) h2 {
  max-width: 9ch !important;
}

body.page-software .detail-grid {
  grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

body.page-software .detail-card {
  min-height: clamp(188px, 14vw, 238px) !important;
  padding: clamp(22px, 2.5vw, 34px) !important;
  overflow: visible !important;
  border: 1px solid rgba(246, 246, 243, 0.16) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026) 46%, rgba(255, 255, 255, 0.045)),
    #090909 !important;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.08) !important;
}

body.page-software .detail-card h3 {
  max-width: 100% !important;
  font-size: clamp(1.42rem, 1.7vw, 2.08rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

body.page-software .detail-card p {
  max-width: 46ch;
}

body.page-software .detail-section:nth-of-type(3) {
  padding-top: clamp(46px, 5.4vw, 78px) !important;
  padding-bottom: clamp(58px, 6.5vw, 96px) !important;
}

body.page-software .detail-section:nth-of-type(3) .detail-copy {
  padding-top: clamp(4px, 0.8vw, 12px);
}

body.page-software .detail-section:nth-of-type(3) li {
  line-height: 1.55;
}

html[data-theme="light"] body.page-software .detail-card {
  border-color: rgba(29, 27, 58, 0.13) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.48)),
    #f7f7fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 1080px) {
  body.page-software .detail-section,
  body.page-software .detail-section:first-child {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 42px) !important;
  }

  body.page-software .detail-section h2,
  body.page-software .detail-section:first-child h2,
  body.page-software .detail-section:nth-of-type(2) h2 {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  body.page-software .detail-main {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 34px !important;
  }

  body.page-software .detail-section {
    padding-top: clamp(30px, 8vw, 48px) !important;
    padding-bottom: clamp(34px, 9vw, 54px) !important;
  }

  body.page-software .detail-section h2,
  body.page-software .detail-section:first-child h2 {
    font-size: clamp(2.08rem, 9.2vw, 3.45rem) !important;
    line-height: 0.98 !important;
  }

  body.page-software .detail-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-software .detail-card {
    min-height: 0 !important;
  }
}

/* Lösungen page text safety: longer product names need room, not hyphenation. */
body.page-loesungen .detail-main {
  padding-top: clamp(38px, 5vw, 76px) !important;
  overflow: visible !important;
}

body.page-loesungen .detail-section {
  grid-template-columns: minmax(340px, 0.5fr) minmax(0, 1.5fr) !important;
  gap: clamp(34px, 5.4vw, 88px) !important;
  overflow: visible !important;
}

body.page-loesungen .detail-hero h1,
body.page-loesungen .detail-section h2,
body.page-loesungen .detail-section h3,
body.page-loesungen .detail-card h3,
body.page-loesungen .contact h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

body.page-loesungen .detail-section h2 {
  position: static !important;
  top: auto !important;
  max-width: 12.8ch !important;
  font-size: clamp(2.25rem, 2.75vw, 3.75rem) !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

body.page-loesungen .detail-section:first-child {
  grid-template-columns: minmax(470px, 0.64fr) minmax(0, 1.36fr) !important;
  padding-top: clamp(18px, 3vw, 38px) !important;
  padding-bottom: clamp(50px, 6vw, 84px) !important;
}

body.page-loesungen .detail-section:first-child h2 {
  max-width: 100% !important;
  font-size: clamp(2.3rem, 2.9vw, 3.9rem) !important;
}

body.page-loesungen .detail-section:nth-of-type(2) {
  padding-top: clamp(52px, 6vw, 90px) !important;
  padding-bottom: clamp(54px, 6.4vw, 92px) !important;
}

body.page-loesungen .detail-section:nth-of-type(2) h2 {
  max-width: 9ch !important;
}

body.page-loesungen .detail-grid {
  grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

body.page-loesungen .detail-card {
  min-height: clamp(210px, 16vw, 270px) !important;
  padding: clamp(22px, 2.5vw, 34px) !important;
  overflow: visible !important;
  border: 1px solid rgba(246, 246, 243, 0.16) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026) 46%, rgba(255, 255, 255, 0.045)),
    #090909 !important;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.08) !important;
}

body.page-loesungen .detail-card h3 {
  max-width: 100% !important;
  font-size: clamp(1.38rem, 1.62vw, 2rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

body.page-loesungen .detail-card p {
  max-width: 48ch;
}

body.page-loesungen .detail-section:nth-of-type(3) {
  padding-top: clamp(48px, 5.5vw, 80px) !important;
  padding-bottom: clamp(58px, 6.5vw, 96px) !important;
}

body.page-loesungen .detail-section:nth-of-type(3) li {
  line-height: 1.55;
}

html[data-theme="light"] body.page-loesungen .detail-card {
  border-color: rgba(29, 27, 58, 0.13) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.48)),
    #f7f7fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 1180px) {
  body.page-loesungen .detail-section,
  body.page-loesungen .detail-section:first-child {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 42px) !important;
  }

  body.page-loesungen .detail-section h2,
  body.page-loesungen .detail-section:first-child h2,
  body.page-loesungen .detail-section:nth-of-type(2) h2 {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  body.page-loesungen .detail-main {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 34px !important;
  }

  body.page-loesungen .detail-section {
    padding-top: clamp(30px, 8vw, 48px) !important;
    padding-bottom: clamp(34px, 9vw, 54px) !important;
  }

  body.page-loesungen .detail-section h2,
  body.page-loesungen .detail-section:first-child h2 {
    font-size: clamp(2.05rem, 8.8vw, 3.35rem) !important;
    line-height: 0.99 !important;
  }

  body.page-loesungen .detail-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-loesungen .detail-card {
    min-height: 0 !important;
  }
}

/* Cyber page text safety: keep security headings readable without forced breaks. */
body.page-cyber .detail-main {
  padding-top: clamp(38px, 5vw, 76px) !important;
  overflow: visible !important;
}

body.page-cyber .detail-section:not(.cyber-flip-section) {
  grid-template-columns: minmax(340px, 0.5fr) minmax(0, 1.5fr) !important;
  gap: clamp(34px, 5.4vw, 88px) !important;
  overflow: visible !important;
}

body.page-cyber .detail-hero h1,
body.page-cyber .detail-section h2,
body.page-cyber .detail-section h3,
body.page-cyber .detail-card h3,
body.page-cyber .cyber-flip-card h3,
body.page-cyber .contact h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

body.page-cyber .detail-section h2 {
  position: static !important;
  top: auto !important;
  max-width: 12.8ch !important;
  font-size: clamp(2.25rem, 2.85vw, 3.9rem) !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

body.page-cyber .detail-section:first-child {
  grid-template-columns: minmax(430px, 0.6fr) minmax(0, 1.4fr) !important;
  padding-top: clamp(18px, 3vw, 38px) !important;
  padding-bottom: clamp(50px, 6vw, 84px) !important;
}

body.page-cyber .detail-section:first-child h2 {
  max-width: 13ch !important;
  font-size: clamp(2.25rem, 2.75vw, 3.65rem) !important;
}

body.page-cyber .cyber-flip-section {
  padding-top: clamp(52px, 6vw, 90px) !important;
  padding-bottom: clamp(54px, 6.4vw, 92px) !important;
}

body.page-cyber .cyber-flip-section h2 {
  max-width: 100% !important;
}

body.page-cyber .cyber-flip-stage {
  min-height: clamp(390px, 42vw, 500px) !important;
  overflow: visible !important;
}

body.page-cyber .cyber-flip-card,
body.page-cyber .cyber-flip-card:nth-child(n) {
  width: clamp(210px, 21vw, 280px) !important;
  min-height: clamp(292px, 32vw, 370px) !important;
  padding: clamp(18px, 2vw, 26px) !important;
}

body.page-cyber .cyber-flip-card h3 {
  max-width: 100% !important;
  font-size: clamp(1.18rem, 1.55vw, 1.78rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

body.page-cyber .cyber-flip-card p {
  max-width: 26ch !important;
  line-height: 1.46 !important;
}

body.page-cyber .detail-section:nth-of-type(3) {
  padding-top: clamp(48px, 5.5vw, 80px) !important;
  padding-bottom: clamp(58px, 6.5vw, 96px) !important;
}

body.page-cyber .detail-section:nth-of-type(3) li {
  line-height: 1.55;
}

@media (max-width: 1180px) {
  body.page-cyber .detail-section:not(.cyber-flip-section),
  body.page-cyber .detail-section:first-child {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 42px) !important;
  }

  body.page-cyber .detail-section h2,
  body.page-cyber .detail-section:first-child h2 {
    max-width: 100% !important;
  }

  body.page-cyber .cyber-flip-card,
  body.page-cyber .cyber-flip-card:nth-child(n) {
    width: clamp(205px, 24vw, 270px) !important;
  }
}

@media (max-width: 760px) {
  body.page-cyber .detail-main {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 34px !important;
  }

  body.page-cyber .detail-section {
    padding-top: clamp(30px, 8vw, 48px) !important;
    padding-bottom: clamp(34px, 9vw, 54px) !important;
  }

  body.page-cyber .detail-section h2,
  body.page-cyber .detail-section:first-child h2 {
    font-size: clamp(2.05rem, 8.8vw, 3.35rem) !important;
    line-height: 0.99 !important;
  }

  body.page-cyber .cyber-flip-stage {
    overflow: visible !important;
  }

  body.page-cyber .cyber-flip-card,
  body.page-cyber .cyber-flip-card:nth-child(n) {
    width: 100% !important;
    min-height: 0 !important;
  }

  body.page-cyber .cyber-flip-card h3 {
    font-size: clamp(1.28rem, 6vw, 1.82rem) !important;
  }
}

/* KI page text safety: keep compact AI labels visible without forced breaks. */
body.page-ki .detail-main {
  padding-top: clamp(38px, 5vw, 76px) !important;
  overflow: visible !important;
}

body.page-ki .detail-section {
  grid-template-columns: minmax(340px, 0.5fr) minmax(0, 1.5fr) !important;
  gap: clamp(34px, 5.4vw, 88px) !important;
  overflow: visible !important;
}

body.page-ki .detail-hero h1,
body.page-ki .detail-section h2,
body.page-ki .detail-section h3,
body.page-ki .detail-card h3,
body.page-ki .contact h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

body.page-ki .detail-section h2 {
  position: static !important;
  top: auto !important;
  max-width: 12.8ch !important;
  font-size: clamp(2.25rem, 2.85vw, 3.9rem) !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

body.page-ki .detail-section:first-child {
  grid-template-columns: minmax(420px, 0.6fr) minmax(0, 1.4fr) !important;
  padding-top: clamp(18px, 3vw, 38px) !important;
  padding-bottom: clamp(50px, 6vw, 84px) !important;
}

body.page-ki .detail-section:first-child h2 {
  max-width: 12.6ch !important;
  font-size: clamp(2.25rem, 2.75vw, 3.65rem) !important;
}

body.page-ki .detail-section:nth-of-type(2) {
  padding-top: clamp(52px, 6vw, 90px) !important;
  padding-bottom: clamp(58px, 6.5vw, 96px) !important;
}

body.page-ki .detail-section:nth-of-type(2) h2 {
  max-width: 9ch !important;
}

body.page-ki .detail-grid {
  grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

body.page-ki .detail-card {
  min-height: clamp(188px, 14vw, 238px) !important;
  padding: clamp(22px, 2.5vw, 34px) !important;
  overflow: visible !important;
  border: 1px solid rgba(246, 246, 243, 0.16) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026) 46%, rgba(255, 255, 255, 0.045)),
    #090909 !important;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.08) !important;
}

body.page-ki .detail-card h3 {
  max-width: 100% !important;
  font-size: clamp(1.38rem, 1.62vw, 2rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

body.page-ki .detail-card p {
  max-width: 46ch;
}

html[data-theme="light"] body.page-ki .detail-card {
  border-color: rgba(29, 27, 58, 0.13) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.48)),
    #f7f7fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 1180px) {
  body.page-ki .detail-section,
  body.page-ki .detail-section:first-child {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 42px) !important;
  }

  body.page-ki .detail-section h2,
  body.page-ki .detail-section:first-child h2,
  body.page-ki .detail-section:nth-of-type(2) h2 {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  body.page-ki .detail-main {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 34px !important;
  }

  body.page-ki .detail-section {
    padding-top: clamp(30px, 8vw, 48px) !important;
    padding-bottom: clamp(34px, 9vw, 54px) !important;
  }

  body.page-ki .detail-section h2,
  body.page-ki .detail-section:first-child h2 {
    font-size: clamp(2.05rem, 8.8vw, 3.35rem) !important;
    line-height: 0.99 !important;
  }

  body.page-ki .detail-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-ki .detail-card {
    min-height: 0 !important;
  }
}

/* Infrastructure page text safety: keep ICT labels visible without forced breaks. */
body.page-infrastructure .detail-main {
  padding-top: clamp(38px, 5vw, 76px) !important;
  overflow: visible !important;
}

body.page-infrastructure .detail-section {
  grid-template-columns: minmax(360px, 0.52fr) minmax(0, 1.48fr) !important;
  gap: clamp(34px, 5.4vw, 88px) !important;
  overflow: visible !important;
}

body.page-infrastructure .detail-hero h1,
body.page-infrastructure .detail-section h2,
body.page-infrastructure .detail-section h3,
body.page-infrastructure .detail-card h3,
body.page-infrastructure .contact h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

body.page-infrastructure .detail-section h2 {
  position: static !important;
  top: auto !important;
  max-width: 12.8ch !important;
  font-size: clamp(2.25rem, 2.8vw, 3.85rem) !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

body.page-infrastructure .detail-section:first-child {
  grid-template-columns: minmax(430px, 0.6fr) minmax(0, 1.4fr) !important;
  padding-top: clamp(18px, 3vw, 38px) !important;
  padding-bottom: clamp(50px, 6vw, 84px) !important;
}

body.page-infrastructure .detail-section:first-child h2 {
  max-width: 12.4ch !important;
  font-size: clamp(2.25rem, 2.75vw, 3.65rem) !important;
}

body.page-infrastructure .detail-section:nth-of-type(2) {
  padding-top: clamp(52px, 6vw, 90px) !important;
  padding-bottom: clamp(54px, 6.4vw, 92px) !important;
}

body.page-infrastructure .detail-section:nth-of-type(2) h2,
body.page-infrastructure .detail-section:nth-of-type(3) h2 {
  max-width: 9ch !important;
}

body.page-infrastructure .detail-grid {
  grid-template-columns: repeat(2, minmax(310px, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

body.page-infrastructure .detail-card {
  min-height: clamp(188px, 14vw, 244px) !important;
  padding: clamp(22px, 2.5vw, 34px) !important;
  overflow: visible !important;
  border: 1px solid rgba(246, 246, 243, 0.16) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026) 46%, rgba(255, 255, 255, 0.045)),
    #090909 !important;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.08) !important;
}

body.page-infrastructure .detail-card h3 {
  max-width: 100% !important;
  font-size: clamp(1.36rem, 1.6vw, 1.96rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

body.page-infrastructure .detail-card p {
  max-width: 46ch;
}

body.page-infrastructure .detail-section:nth-of-type(3) {
  padding-top: clamp(48px, 5.5vw, 80px) !important;
  padding-bottom: clamp(58px, 6.5vw, 96px) !important;
}

html[data-theme="light"] body.page-infrastructure .detail-card {
  border-color: rgba(29, 27, 58, 0.13) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.48)),
    #f7f7fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 1180px) {
  body.page-infrastructure .detail-section,
  body.page-infrastructure .detail-section:first-child {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 42px) !important;
  }

  body.page-infrastructure .detail-section h2,
  body.page-infrastructure .detail-section:first-child h2,
  body.page-infrastructure .detail-section:nth-of-type(2) h2,
  body.page-infrastructure .detail-section:nth-of-type(3) h2 {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  body.page-infrastructure .detail-main {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 34px !important;
  }

  body.page-infrastructure .detail-section {
    padding-top: clamp(30px, 8vw, 48px) !important;
    padding-bottom: clamp(34px, 9vw, 54px) !important;
  }

  body.page-infrastructure .detail-section h2,
  body.page-infrastructure .detail-section:first-child h2 {
    font-size: clamp(2.05rem, 8.8vw, 3.35rem) !important;
    line-height: 0.99 !important;
  }

  body.page-infrastructure .detail-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-infrastructure .detail-card {
    min-height: 0 !important;
  }
}

/* Data Recovery page text safety: long storage terms stay visible without forced breaks. */
body.page-data .detail-main {
  padding-top: clamp(38px, 5vw, 76px) !important;
  overflow: visible !important;
}

body.page-data .detail-section {
  grid-template-columns: minmax(350px, 0.52fr) minmax(0, 1.48fr) !important;
  gap: clamp(34px, 5.4vw, 88px) !important;
  overflow: visible !important;
}

body.page-data .detail-hero h1,
body.page-data .detail-section h2,
body.page-data .detail-section h3,
body.page-data .detail-card h3,
body.page-data .contact h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

body.page-data .detail-section h2 {
  position: static !important;
  top: auto !important;
  max-width: 12.8ch !important;
  font-size: clamp(2.25rem, 2.8vw, 3.85rem) !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

body.page-data .detail-section:first-child {
  grid-template-columns: minmax(430px, 0.6fr) minmax(0, 1.4fr) !important;
  padding-top: clamp(18px, 3vw, 38px) !important;
  padding-bottom: clamp(50px, 6vw, 84px) !important;
}

body.page-data .detail-section:first-child h2 {
  max-width: 12.6ch !important;
  font-size: clamp(2.2rem, 2.65vw, 3.55rem) !important;
}

body.page-data .detail-section:nth-of-type(2) {
  padding-top: clamp(52px, 6vw, 90px) !important;
  padding-bottom: clamp(54px, 6.4vw, 92px) !important;
}

body.page-data .detail-section:nth-of-type(2) h2,
body.page-data .detail-section:nth-of-type(3) h2 {
  max-width: 9ch !important;
}

body.page-data .detail-grid {
  grid-template-columns: repeat(2, minmax(310px, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

body.page-data .detail-card {
  min-height: clamp(190px, 14vw, 246px) !important;
  padding: clamp(22px, 2.5vw, 34px) !important;
  overflow: visible !important;
  border: 1px solid rgba(246, 246, 243, 0.16) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026) 46%, rgba(255, 255, 255, 0.045)),
    #090909 !important;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.08) !important;
}

body.page-data .detail-card h3 {
  max-width: 100% !important;
  font-size: clamp(1.34rem, 1.56vw, 1.92rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

body.page-data .detail-card p {
  max-width: 46ch;
}

body.page-data .detail-section:nth-of-type(3) {
  padding-top: clamp(48px, 5.5vw, 80px) !important;
  padding-bottom: clamp(58px, 6.5vw, 96px) !important;
}

body.page-data .detail-section:nth-of-type(3) li {
  line-height: 1.55;
}

html[data-theme="light"] body.page-data .detail-card {
  border-color: rgba(29, 27, 58, 0.13) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.48)),
    #f7f7fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 1180px) {
  body.page-data .detail-section,
  body.page-data .detail-section:first-child {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 42px) !important;
  }

  body.page-data .detail-section h2,
  body.page-data .detail-section:first-child h2,
  body.page-data .detail-section:nth-of-type(2) h2,
  body.page-data .detail-section:nth-of-type(3) h2 {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  body.page-data .detail-main {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 34px !important;
  }

  body.page-data .detail-section {
    padding-top: clamp(30px, 8vw, 48px) !important;
    padding-bottom: clamp(34px, 9vw, 54px) !important;
  }

  body.page-data .detail-section h2,
  body.page-data .detail-section:first-child h2 {
    font-size: clamp(2.05rem, 8.8vw, 3.35rem) !important;
    line-height: 0.99 !important;
  }

  body.page-data .detail-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-data .detail-card {
    min-height: 0 !important;
  }
}

/* Emergency page text safety: incident-response headings need room, not hyphenation. */
body.page-emergency .detail-main {
  padding-top: clamp(38px, 5vw, 76px) !important;
  overflow: visible !important;
}

body.page-emergency .detail-section {
  grid-template-columns: minmax(360px, 0.52fr) minmax(0, 1.48fr) !important;
  gap: clamp(34px, 5.4vw, 88px) !important;
  overflow: visible !important;
}

body.page-emergency .detail-hero h1,
body.page-emergency .detail-section h2,
body.page-emergency .detail-section h3,
body.page-emergency .detail-card h3,
body.page-emergency .contact h2 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

body.page-emergency .detail-section h2 {
  position: static !important;
  top: auto !important;
  max-width: 12.8ch !important;
  font-size: clamp(2.2rem, 2.65vw, 3.55rem) !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

body.page-emergency .detail-section:first-child {
  grid-template-columns: minmax(430px, 0.6fr) minmax(0, 1.4fr) !important;
  padding-top: clamp(18px, 3vw, 38px) !important;
  padding-bottom: clamp(50px, 6vw, 84px) !important;
}

body.page-emergency .detail-section:first-child h2 {
  max-width: 100% !important;
  font-size: clamp(2rem, 2.25vw, 2.95rem) !important;
}

body.page-emergency .contact h2 {
  max-width: 14.5ch !important;
  font-size: clamp(2.15rem, 3.45vw, 4rem) !important;
}

body.page-emergency .detail-section:nth-of-type(2) {
  padding-top: clamp(52px, 6vw, 90px) !important;
  padding-bottom: clamp(54px, 6.4vw, 92px) !important;
}

body.page-emergency .detail-grid {
  grid-template-columns: repeat(2, minmax(310px, 1fr)) !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

body.page-emergency .detail-card {
  min-height: clamp(190px, 14vw, 250px) !important;
  padding: clamp(22px, 2.5vw, 34px) !important;
  overflow: visible !important;
  border: 1px solid rgba(246, 246, 243, 0.16) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026) 46%, rgba(255, 255, 255, 0.045)),
    #090909 !important;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.08) !important;
}

body.page-emergency .detail-card h3 {
  max-width: 100% !important;
  font-size: clamp(1.28rem, 1.48vw, 1.82rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

body.page-emergency .detail-card p {
  max-width: 46ch;
}

body.page-emergency .detail-section:nth-of-type(3) {
  padding-top: clamp(48px, 5.5vw, 80px) !important;
  padding-bottom: clamp(58px, 6.5vw, 96px) !important;
}

html[data-theme="light"] body.page-emergency .detail-card {
  border-color: rgba(29, 27, 58, 0.13) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.48)),
    #f7f7fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 1180px) {
  body.page-emergency .detail-section,
  body.page-emergency .detail-section:first-child {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 5vw, 42px) !important;
  }

  body.page-emergency .detail-section h2,
  body.page-emergency .detail-section:first-child h2 {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  body.page-emergency .detail-main {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 34px !important;
  }

  body.page-emergency .detail-section {
    padding-top: clamp(30px, 8vw, 48px) !important;
    padding-bottom: clamp(34px, 9vw, 54px) !important;
  }

  body.page-emergency .detail-section h2,
  body.page-emergency .detail-section:first-child h2 {
    font-size: clamp(2.05rem, 8.8vw, 3.35rem) !important;
    line-height: 0.99 !important;
  }

  body.page-emergency .contact h2 {
    max-width: 100% !important;
    font-size: clamp(2rem, 7.8vw, 3rem) !important;
  }

  body.page-emergency .detail-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-emergency .detail-card {
    min-height: 0 !important;
  }
}

/* Final light-mode polish: make the bright theme intentional, readable and consistent. */
html[data-theme="light"] {
  --ink: #121318;
  --muted: rgba(18, 19, 24, 0.66);
  --line: rgba(18, 19, 24, 0.13);
  --dark: #f5f6f8;
  --surface: rgba(255, 255, 255, 0.78);
  --panel: rgba(255, 255, 255, 0.86);
  --accent: #101114;
  --accent-soft: #5b626c;
  --accent-hover: #0d5f59;
  --accent-ink: #ffffff;
  --contact-bg: #f5f6f8;
  --contact-ink: #121318;
  --contact-muted: rgba(18, 19, 24, 0.64);
  --control-bg: rgba(18, 19, 24, 0.86);
  --control-ink: #ffffff;
}

html[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 78% 4%, rgba(13, 95, 89, 0.08), transparent 62%),
    linear-gradient(180deg, #f7f8fa 0%, #eff1f5 48%, #f7f8fa 100%) !important;
  color: var(--ink);
}

html[data-theme="light"] .landing-mark {
  color: rgba(18, 19, 24, 0.88) !important;
  text-shadow: 0 18px 42px rgba(18, 19, 24, 0.16) !important;
}

html[data-theme="light"] .landing-mark.is-compact {
  color: rgba(18, 19, 24, 0.82) !important;
}

html[data-theme="light"] .hero-link-hub,
html[data-theme="light"] .hero-link-hub::before {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(18, 19, 24, 0.08), transparent 58%),
    linear-gradient(180deg, #f7f8fa 0%, #f1f3f6 62%, #f5f6f8 100%) !important;
  color: #121318 !important;
}

html[data-theme="light"] .hero-link-hub::after {
  opacity: 0.42 !important;
  filter: saturate(0) contrast(1.08) brightness(1.02) !important;
  mix-blend-mode: multiply !important;
  background:
    radial-gradient(ellipse at 38% 50%, rgba(18, 19, 24, 0.12), transparent 18%),
    linear-gradient(90deg, rgba(247, 248, 250, 0.88), transparent 26%, transparent 74%, rgba(247, 248, 250, 0.86)),
    repeating-linear-gradient(104deg,
      transparent 0 8.5vw,
      rgba(18, 19, 24, 0.045) 8.8vw 9.1vw,
      rgba(18, 19, 24, 0.16) 9.25vw 9.55vw,
      rgba(18, 19, 24, 0.04) 9.72vw 10.05vw,
      transparent 10.35vw 15.8vw) !important;
}

html[data-theme="light"] .hub-background {
  opacity: 0.48 !important;
  filter: saturate(0.12) contrast(1.02) brightness(1.32) !important;
  mix-blend-mode: multiply;
  background:
    linear-gradient(90deg, rgba(247, 248, 250, 0.9), transparent 31%, transparent 70%, rgba(247, 248, 250, 0.9)),
    linear-gradient(180deg, rgba(247, 248, 250, 0.1), rgba(247, 248, 250, 0.82)),
    var(--map-image) !important;
}

html[data-theme="light"] .hub-background::before {
  opacity: 0.38 !important;
}

html[data-theme="light"] .hub-background::after {
  background: linear-gradient(180deg, transparent 0%, rgba(245, 246, 248, 0.72) 48%, #f5f6f8 88%) !important;
}

html[data-theme="light"] .hero-link-hub .hub-intro {
  text-shadow: none !important;
}

html[data-theme="light"] .hero-link-hub .hub-intro h1,
html[data-theme="light"] .hero-link-hub .hub-intro p:not(.eyebrow) {
  color: #121318 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .hero-link-hub .hub-intro p:not(.eyebrow) {
  color: rgba(18, 19, 24, 0.72) !important;
}

html[data-theme="light"] .hero-link-hub .hub-rail {
  border-color: rgba(18, 19, 24, 0.62) !important;
  box-shadow: 0 14px 34px rgba(18, 19, 24, 0.16) !important;
}

html[data-theme="light"] .hero-link-hub .hub-rail span {
  background: #121318 !important;
}

html[data-theme="light"] .control-bar,
html[data-theme="light"] .menu-toggle {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background: rgba(18, 19, 24, 0.86) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 48px rgba(18, 19, 24, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="light"] .theme-toggle {
  border-color: rgba(255, 255, 255, 0.26) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="light"] .service-overview,
html[data-theme="light"] .section.service-overview,
html[data-theme="light"] .blog-news-carousel,
html[data-theme="light"] .solutions,
html[data-theme="light"] .web-showcase,
html[data-theme="light"] .ai-section {
  background:
    radial-gradient(ellipse at 80% 8%, rgba(13, 95, 89, 0.07), transparent 64%),
    linear-gradient(180deg, #f5f6f8 0%, #eef1f4 48%, #f7f8fa 100%) !important;
  color: #121318 !important;
}

html[data-theme="light"] .service-overview::before,
html[data-theme="light"] .section.service-overview::before {
  background:
    radial-gradient(ellipse at 74% 4%, rgba(13, 95, 89, 0.07), transparent 58%),
    radial-gradient(ellipse at 8% 32%, rgba(18, 19, 24, 0.035), transparent 62%),
    linear-gradient(180deg, #f5f6f8 0%, #eef1f4 48%, #f7f8fa 100%) !important;
}

html[data-theme="light"] .overview-copy h2,
html[data-theme="light"] .blog-news-head h2,
html[data-theme="light"] .solutions-head h2,
html[data-theme="light"] .web-showcase .workforce-head h2,
html[data-theme="light"] .ai-copy h2 {
  color: #121318 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .overview-copy p:not(.section-kicker),
html[data-theme="light"] .solutions-head p,
html[data-theme="light"] .ai-copy p {
  color: rgba(18, 19, 24, 0.66) !important;
}

html[data-theme="light"] .section-kicker,
html[data-theme="light"] .service-overview .hub-card span,
html[data-theme="light"] .detail-card span,
html[data-theme="light"] .emergency-band span {
  color: rgba(18, 19, 24, 0.58) !important;
}

html[data-theme="light"] .service-overview .hub-card {
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(18, 19, 24, 0.16), inset 0 -1px 0 rgba(18, 19, 24, 0.1), 0 28px 80px rgba(18, 19, 24, 0.08) !important;
}

html[data-theme="light"] .service-overview .hub-card:hover,
html[data-theme="light"] .service-overview .hub-card:focus-visible {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(18, 19, 24, 0.28), inset 0 -1px 0 rgba(18, 19, 24, 0.16), 0 34px 90px rgba(18, 19, 24, 0.12) !important;
}

html[data-theme="light"] .service-overview .hub-card-image {
  opacity: 0.76 !important;
}

html[data-theme="light"] .service-overview .hub-card-image::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 28%, rgba(255, 255, 255, 0.72) 48%, rgba(255, 255, 255, 0.26) 76%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 48%, rgba(255, 255, 255, 0.24)) !important;
}

html[data-theme="light"] .service-overview .hub-card-image img {
  filter: saturate(0.9) contrast(1.02) brightness(1.03) !important;
}

html[data-theme="light"] .service-overview .hub-card strong,
html[data-theme="light"] .service-overview .hub-card small {
  color: #121318 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .service-overview .hub-card small {
  color: rgba(18, 19, 24, 0.66) !important;
}

html[data-theme="light"] .blog-news-card,
html[data-theme="light"] .blog-hero-card,
html[data-theme="light"] .solutions .solution-card,
html[data-theme="light"] .ai-lab,
html[data-theme="light"] .web-tabs,
html[data-theme="light"] .web-stage {
  border-color: rgba(18, 19, 24, 0.12) !important;
  box-shadow: 0 30px 90px rgba(18, 19, 24, 0.11) !important;
}

html[data-theme="light"] .blog-news-dot {
  background: rgba(18, 19, 24, 0.18) !important;
}

html[data-theme="light"] .blog-news-dot.is-active {
  background: #121318 !important;
}

html[data-theme="light"] .blog-news-all {
  color: rgba(18, 19, 24, 0.6) !important;
}

html[data-theme="light"] body.detail-page main,
html[data-theme="light"] body.detail-page .detail-main,
html[data-theme="light"] .blog-article,
html[data-theme="light"] .blog-main {
  background: #f5f6f8 !important;
  color: #121318 !important;
}

html[data-theme="light"] body.detail-page .detail-hero {
  background: #f5f6f8 !important;
  color: #121318 !important;
}

html[data-theme="light"] body.detail-page .detail-hero::before {
  opacity: 0.5 !important;
  filter: saturate(0.82) contrast(1.02) brightness(1.12) !important;
}

html[data-theme="light"] body.detail-page .detail-hero::after {
  background:
    linear-gradient(90deg, #f5f6f8 0%, rgba(245, 246, 248, 0.96) 24%, rgba(245, 246, 248, 0.68) 50%, rgba(245, 246, 248, 0.2) 78%, rgba(245, 246, 248, 0.08) 100%),
    linear-gradient(180deg, rgba(245, 246, 248, 0.04) 0%, rgba(245, 246, 248, 0.22) 48%, rgba(245, 246, 248, 0.76) 86%, #f5f6f8 100%) !important;
}

html[data-theme="light"] body.detail-page .detail-hero-inner,
html[data-theme="light"] body.detail-page .detail-hero h1,
html[data-theme="light"] body.detail-page .detail-hero p:not(.eyebrow) {
  color: #121318 !important;
  text-shadow: none !important;
}

html[data-theme="light"] body.detail-page .detail-hero p:not(.eyebrow) {
  color: rgba(18, 19, 24, 0.68) !important;
}

html[data-theme="light"] body.detail-page .detail-section h2,
html[data-theme="light"] body.detail-page .detail-card h3,
html[data-theme="light"] body.detail-page .detail-copy,
html[data-theme="light"] .article-body,
html[data-theme="light"] .article-body h2,
html[data-theme="light"] .article-lead {
  color: #121318 !important;
}

html[data-theme="light"] body.detail-page .detail-card p,
html[data-theme="light"] body.detail-page .detail-copy p,
html[data-theme="light"] body.detail-page .detail-copy li,
html[data-theme="light"] .article-body {
  color: rgba(18, 19, 24, 0.68) !important;
}

html[data-theme="light"] .contact,
html[data-theme="light"] body.page-beratung .contact {
  background:
    radial-gradient(ellipse at 76% 18%, rgba(13, 95, 89, 0.08), transparent 64%),
    linear-gradient(180deg, #f5f6f8 0%, #eceff3 100%) !important;
  color: #121318 !important;
}

html[data-theme="light"] .contact h2,
html[data-theme="light"] .contact-inner > p,
html[data-theme="light"] .site-footer {
  color: #121318 !important;
}

html[data-theme="light"] .contact-inner > p,
html[data-theme="light"] .site-footer {
  color: rgba(18, 19, 24, 0.66) !important;
}

@media (max-width: 760px) {
  html[data-theme="light"] .hero-link-hub .hub-intro h1 {
    color: #121318 !important;
  }

  html[data-theme="light"] .service-overview .hub-card-image::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 34%, rgba(255, 255, 255, 0.34) 72%, transparent 100%) !important;
  }
}

/* Hard stop for legacy dark hero layers in light mode. */
html[data-theme="light"] body .hero-link-hub {
  background-color: #f7f8fa !important;
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(18, 19, 24, 0.08), transparent 58%),
    linear-gradient(180deg, #f7f8fa 0%, #f1f3f6 62%, #f5f6f8 100%) !important;
}

html[data-theme="light"] body .hero-link-hub::before {
  background-color: transparent !important;
  background-image:
    radial-gradient(ellipse at 50% 43%, rgba(18, 19, 24, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(18, 19, 24, 0.035), transparent 34%) !important;
  opacity: 0.72 !important;
}

html[data-theme="light"] body .hero-link-hub::after {
  background-color: transparent !important;
}

html[data-theme="light"] body .hub-background {
  background-color: transparent !important;
}

/* Keep the service directory bright after the hero fade in light mode. */
html[data-theme="light"] body .section.service-overview,
html[data-theme="light"] body .service-overview {
  position: relative !important;
  isolation: isolate !important;
  background: #f5f6f8 !important;
  color: #121318 !important;
}

html[data-theme="light"] body .section.service-overview::before,
html[data-theme="light"] body .service-overview::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(ellipse at 74% 5%, rgba(13, 95, 89, 0.08), transparent 58%),
    linear-gradient(180deg, #f5f6f8 0%, #eef1f4 48%, #f7f8fa 100%) !important;
}

html[data-theme="light"] body .section.service-overview::after,
html[data-theme="light"] body .service-overview::after {
  opacity: 0 !important;
}

html[data-theme="light"] body .overview-copy h2,
html[data-theme="light"] body .overview-copy p:not(.section-kicker) {
  color: #121318 !important;
  text-shadow: none !important;
}

html[data-theme="light"] body .overview-copy p:not(.section-kicker) {
  color: rgba(18, 19, 24, 0.68) !important;
}

/* Natural light-mode images: keep photos photographic, not washed out. */
html[data-theme="light"] .service-overview .hub-card-image {
  opacity: 1 !important;
}

html[data-theme="light"] .service-overview .hub-card-image::before {
  content: none !important;
}

html[data-theme="light"] .service-overview .hub-card-image img {
  filter: none !important;
  opacity: 1 !important;
}

html[data-theme="light"] .service-overview .hub-card:hover .hub-card-image img,
html[data-theme="light"] .service-overview .hub-card:focus-visible .hub-card-image img {
  filter: none !important;
}

html[data-theme="light"] body.detail-page .detail-hero::before {
  opacity: 1 !important;
  filter: none !important;
}

html[data-theme="light"] body.detail-page .detail-hero::after {
  background:
    linear-gradient(90deg, rgba(245, 246, 248, 0.9) 0%, rgba(245, 246, 248, 0.7) 28%, rgba(245, 246, 248, 0.22) 52%, transparent 78%),
    linear-gradient(180deg, transparent 0%, transparent 58%, rgba(245, 246, 248, 0.42) 82%, #f5f6f8 100%) !important;
}

html[data-theme="light"] body.detail-page .detail-hero-inner {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

@media (max-width: 760px) {
  html[data-theme="light"] .service-overview .hub-card-image::before {
    content: none !important;
  }

  html[data-theme="light"] body.detail-page .detail-hero::after {
    background:
      linear-gradient(180deg, rgba(245, 246, 248, 0.18) 0%, rgba(245, 246, 248, 0.42) 52%, #f5f6f8 100%),
      linear-gradient(90deg, rgba(245, 246, 248, 0.88), rgba(245, 246, 248, 0.34) 58%, transparent) !important;
  }
}

/* Detail hero light mode: normal photos with a dark readability mask, no white wash. */
html[data-theme="light"] body.detail-page .detail-hero {
  background: #050505 !important;
  color: #f6f6f3 !important;
}

html[data-theme="light"] body.detail-page .detail-hero::before {
  opacity: 1 !important;
  filter: none !important;
}

html[data-theme="light"] body.detail-page .detail-hero::after {
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.64) 0%, rgba(5, 5, 5, 0.28) 36%, rgba(5, 5, 5, 0.08) 68%, rgba(5, 5, 5, 0.22) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.08) 0%, rgba(5, 5, 5, 0.18) 54%, rgba(5, 5, 5, 0.62) 100%) !important;
}

html[data-theme="light"] body.detail-page .detail-hero-inner,
html[data-theme="light"] body.detail-page .detail-hero h1,
html[data-theme="light"] body.detail-page .detail-hero p:not(.eyebrow) {
  color: #f6f6f3 !important;
  text-shadow: 0 18px 52px rgba(0, 0, 0, 0.58) !important;
}

html[data-theme="light"] body.detail-page .detail-hero p:not(.eyebrow),
html[data-theme="light"] body.detail-page .detail-hero .eyebrow {
  color: rgba(246, 246, 243, 0.76) !important;
}

@media (max-width: 760px) {
  html[data-theme="light"] body.detail-page .detail-hero::after {
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0.18) 0%, rgba(5, 5, 5, 0.5) 58%, #050505 100%),
      linear-gradient(90deg, rgba(5, 5, 5, 0.72), rgba(5, 5, 5, 0.22) 62%, transparent) !important;
  }
}

/* Final correction: light-mode detail photos stay natural, without white or dark wash. */
html[data-theme="light"] body.detail-page .detail-hero {
  background: #f5f6f8 !important;
  color: #121318 !important;
}

html[data-theme="light"] body.detail-page .detail-hero::before {
  opacity: 1 !important;
  filter: none !important;
}

html[data-theme="light"] body.detail-page .detail-hero::after {
  background:
    linear-gradient(180deg, transparent 0%, transparent 68%, rgba(245, 246, 248, 0.4) 84%, #f5f6f8 100%) !important;
}

html[data-theme="light"] body.detail-page .detail-hero-inner,
html[data-theme="light"] body.detail-page .detail-hero h1,
html[data-theme="light"] body.detail-page .detail-hero p:not(.eyebrow) {
  color: #121318 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 16px 42px rgba(255, 255, 255, 0.44) !important;
}

html[data-theme="light"] body.detail-page .detail-hero p:not(.eyebrow) {
  color: rgba(18, 19, 24, 0.76) !important;
}

html[data-theme="light"] body.detail-page .detail-hero .eyebrow {
  color: rgba(18, 19, 24, 0.58) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

@media (max-width: 760px) {
  html[data-theme="light"] body.detail-page .detail-hero::after {
    background: linear-gradient(180deg, transparent 0%, rgba(245, 246, 248, 0.18) 66%, #f5f6f8 100%) !important;
  }
}

/* Theme parity: light mode keeps the same visual language as dark mode. */
html[data-theme="light"] {
  --ink: #f6f6f3;
  --muted: rgba(241, 255, 244, 0.68);
  --faint: rgba(255, 255, 255, 0.08);
  --dark: #050505;
  --panel: rgba(7, 12, 8, 0.76);
  --line: rgba(128, 255, 159, 0.14);
  --surface: rgba(9, 13, 9, 0.82);
  --control-bg: rgba(3, 5, 3, 0.82);
  --control-ink: #f6f6f3;
  --control-panel: rgba(255, 255, 255, 0.08);
  --header-mark: rgba(241, 255, 244, 0.88);
  --contact-bg: #050505;
  --contact-ink: #f6f6f3;
  --contact-muted: rgba(241, 255, 244, 0.66);
  --accent: #f4f4f4;
  --accent-soft: #a8a8a8;
  --accent-hover: #ffffff;
  --accent-ink: #050505;
  --accent-ink-muted: rgba(5, 5, 5, 0.72);
  --map-image: var(--map-image-dark);
  --map-filter: saturate(1.02) contrast(1.05) brightness(0.9);
  --waves-bg: #050505;
  --waves-stroke: #5f7863;
  --hero-ink: #f7fffc;
  --hero-shadow: 0 3px 30px rgba(0, 0, 0, 0.68);
  color-scheme: dark;
}

html[data-theme="light"] body,
html[data-theme="light"] body.detail-page main,
html[data-theme="light"] body.detail-page .detail-main,
html[data-theme="light"] .blog-article,
html[data-theme="light"] .blog-main {
  background:
    linear-gradient(180deg, #050505 0%, #080808 42%, #050505 100%) !important;
  color: #f6f6f3 !important;
}

html[data-theme="light"] .landing-mark,
html[data-theme="light"] .landing-mark.is-compact {
  color: rgba(255, 255, 255, 0.94) !important;
  text-shadow: 0 10px 32px rgba(0, 0, 0, 0.74) !important;
}

html[data-theme="light"] .control-bar,
html[data-theme="light"] .menu-toggle,
html[data-theme="light"] .theme-toggle {
  border-color: rgba(128, 255, 159, 0.17) !important;
  background: color-mix(in srgb, rgba(3, 5, 3, 0.82) 82%, transparent) !important;
  color: #f6f6f3 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="light"] .hero-link-hub,
html[data-theme="light"] body .hero-link-hub,
html[data-theme="light"] .hero-link-hub::before,
html[data-theme="light"] body .hero-link-hub::before {
  background: #000 !important;
  color: #fff !important;
}

html[data-theme="light"] .hero-link-hub::after,
html[data-theme="light"] body .hero-link-hub::after {
  opacity: 0.78 !important;
  filter: blur(0.2px) contrast(1.18) !important;
  mix-blend-mode: screen !important;
  background:
    radial-gradient(ellipse at 38% 50%, rgba(255, 255, 255, 0.18), transparent 18%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.9), transparent 26%, transparent 74%, rgba(0, 0, 0, 0.86)),
    repeating-linear-gradient(104deg,
      transparent 0 8.5vw,
      rgba(255, 255, 255, 0.06) 8.8vw 9.1vw,
      rgba(255, 255, 255, 0.22) 9.25vw 9.55vw,
      rgba(255, 255, 255, 0.05) 9.72vw 10.05vw,
      transparent 10.35vw 15.8vw) !important;
}

html[data-theme="light"] .hub-background,
html[data-theme="light"] body .hub-background {
  opacity: 1 !important;
  filter: saturate(0) contrast(1.18) brightness(0.7) !important;
  mix-blend-mode: normal !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.78), transparent 31%, transparent 70%, rgba(0, 0, 0, 0.82)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.72)),
    var(--map-image) !important;
}

html[data-theme="light"] .hub-background::before {
  opacity: 0.72 !important;
}

html[data-theme="light"] .hub-background::after {
  background: linear-gradient(180deg, transparent, #000 82%) !important;
}

html[data-theme="light"] .hero-link-hub .hub-intro,
html[data-theme="light"] .hero-link-hub .hub-intro h1,
html[data-theme="light"] .hero-link-hub .hub-intro p:not(.eyebrow) {
  color: #fff !important;
  text-shadow: 0 7px 34px rgba(0, 0, 0, 0.92) !important;
}

html[data-theme="light"] .hero-link-hub .hub-intro p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76) !important;
}

html[data-theme="light"] .hero-link-hub .hub-rail {
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="light"] .hero-link-hub .hub-rail span {
  background: #fff !important;
}

html[data-theme="light"] .service-overview,
html[data-theme="light"] .section.service-overview,
html[data-theme="light"] .blog-news-carousel,
html[data-theme="light"] .solutions,
html[data-theme="light"] .web-showcase,
html[data-theme="light"] .ai-section,
html[data-theme="light"] .contact {
  background:
    radial-gradient(900px ellipse at 78% 16%, rgba(255, 255, 255, 0.055), transparent 56%),
    linear-gradient(180deg, #050505 0%, #080808 54%, #050505 100%) !important;
  color: #f6f6f3 !important;
}

html[data-theme="light"] .service-overview::before,
html[data-theme="light"] .section.service-overview::before {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.045), transparent 38%),
    linear-gradient(180deg, #050505, #080808 58%, #050505) !important;
}

html[data-theme="light"] .overview-copy h2,
html[data-theme="light"] .blog-news-head h2,
html[data-theme="light"] .solutions-head h2,
html[data-theme="light"] .web-showcase .workforce-head h2,
html[data-theme="light"] .ai-copy h2,
html[data-theme="light"] .contact h2,
html[data-theme="light"] .contact-inner > p,
html[data-theme="light"] .site-footer {
  color: #f6f6f3 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .overview-copy p:not(.section-kicker),
html[data-theme="light"] .solutions-head p,
html[data-theme="light"] .ai-copy p,
html[data-theme="light"] .contact-inner > p,
html[data-theme="light"] .site-footer {
  color: rgba(246, 246, 243, 0.66) !important;
}

html[data-theme="light"] .section-kicker,
html[data-theme="light"] .service-overview .hub-card span,
html[data-theme="light"] .detail-card span,
html[data-theme="light"] .emergency-band span {
  color: rgba(246, 246, 243, 0.62) !important;
}

html[data-theme="light"] .service-overview .hub-card {
  background: #060606 !important;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.34), inset 0 -1px 0 rgba(246, 246, 243, 0.22) !important;
}

html[data-theme="light"] .service-overview .hub-card:hover,
html[data-theme="light"] .service-overview .hub-card:focus-visible {
  background: #060606 !important;
  box-shadow: inset 0 1px 0 rgba(246, 246, 243, 0.58), inset 0 -1px 0 rgba(246, 246, 243, 0.34) !important;
}

html[data-theme="light"] .service-overview .hub-card-image {
  opacity: 0.92 !important;
}

html[data-theme="light"] .service-overview .hub-card-image::before {
  content: "" !important;
  background:
    linear-gradient(90deg, #060606 0%, #060606 30%, rgba(6, 6, 6, 0.92) 42%, rgba(6, 6, 6, 0.48) 58%, rgba(6, 6, 6, 0.1) 76%, transparent 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent 48%, rgba(0, 0, 0, 0.16)) !important;
}

html[data-theme="light"] .service-overview .hub-card-image img {
  filter: saturate(1.04) contrast(1.03) brightness(1.02) !important;
  opacity: 1 !important;
}

html[data-theme="light"] .service-overview .hub-card strong,
html[data-theme="light"] .service-overview .hub-card small {
  color: #f6f6f3 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .service-overview .hub-card small {
  color: rgba(246, 246, 243, 0.6) !important;
}

html[data-theme="light"] body.detail-page .detail-hero {
  background: #050505 !important;
  color: #f6f6f3 !important;
}

html[data-theme="light"] body.detail-page .detail-hero::before {
  opacity: 0.78 !important;
  filter: saturate(0.96) contrast(1.05) brightness(0.76) !important;
}

html[data-theme="light"] body.detail-page .detail-hero::after {
  background:
    linear-gradient(90deg, #050505 0%, rgba(5, 5, 5, 0.96) 24%, rgba(5, 5, 5, 0.66) 45%, rgba(5, 5, 5, 0.14) 73%, rgba(5, 5, 5, 0.03) 100%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.03) 0%, rgba(5, 5, 5, 0.08) 46%, rgba(5, 5, 5, 0.42) 68%, rgba(5, 5, 5, 0.84) 86%, #050505 100%),
    radial-gradient(ellipse at 22% 52%, rgba(255, 255, 255, 0.09), transparent 34%) !important;
}

html[data-theme="light"] body.detail-page .detail-hero-inner,
html[data-theme="light"] body.detail-page .detail-hero h1,
html[data-theme="light"] body.detail-page .detail-hero p:not(.eyebrow) {
  color: #f6f6f3 !important;
  text-shadow: 0 18px 52px rgba(0, 0, 0, 0.62) !important;
}

html[data-theme="light"] body.detail-page .detail-hero p:not(.eyebrow),
html[data-theme="light"] body.detail-page .detail-hero .eyebrow {
  color: rgba(246, 246, 243, 0.7) !important;
}

html[data-theme="light"] body.detail-page .detail-section h2,
html[data-theme="light"] body.detail-page .detail-card h3,
html[data-theme="light"] body.detail-page .detail-copy,
html[data-theme="light"] .article-body,
html[data-theme="light"] .article-body h2,
html[data-theme="light"] .article-lead {
  color: #f6f6f3 !important;
}

html[data-theme="light"] body.detail-page .detail-card p,
html[data-theme="light"] body.detail-page .detail-copy p,
html[data-theme="light"] body.detail-page .detail-copy li,
html[data-theme="light"] .article-body {
  color: rgba(246, 246, 243, 0.68) !important;
}

@media (max-width: 760px) {
  html[data-theme="light"] body.detail-page .detail-hero::after {
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0.28) 0%, rgba(5, 5, 5, 0.54) 50%, #050505 100%),
      linear-gradient(90deg, rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0.5) 58%, rgba(5, 5, 5, 0.18)) !important;
  }
}

/* Last word for light-mode parity on homepage sections. */
html[data-theme="light"] body .section.service-overview,
html[data-theme="light"] body .service-overview,
html[data-theme="light"] body .blog-news-carousel,
html[data-theme="light"] body .solutions,
html[data-theme="light"] body .web-showcase,
html[data-theme="light"] body .ai-section,
html[data-theme="light"] body .software-solo-section {
  background:
    radial-gradient(ellipse at 78% 16%, rgba(255, 255, 255, 0.055), transparent 56%),
    linear-gradient(180deg, #050505 0%, #080808 54%, #050505 100%) !important;
  color: #f6f6f3 !important;
}

html[data-theme="light"] body .section.service-overview::before,
html[data-theme="light"] body .service-overview::before {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255, 255, 255, 0.045), transparent 38%),
    linear-gradient(180deg, #050505, #080808 58%, #050505) !important;
}

/* Detail subpages: keep cards and contact block dark like dark mode. */
html[data-theme="light"] body.detail-page .detail-card,
html[data-theme="light"] body.page-software .detail-card,
html[data-theme="light"] body.page-beratung .detail-card,
html[data-theme="light"] body.page-loesungen .detail-card,
html[data-theme="light"] body.page-ki .detail-card,
html[data-theme="light"] body.page-infrastructure .detail-card,
html[data-theme="light"] body.page-data .detail-card,
html[data-theme="light"] body.page-emergency .detail-card {
  border-color: rgba(128, 255, 159, 0.14) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    #070b08 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="light"] body.detail-page .detail-card h3 {
  color: #f6f6f3 !important;
}

html[data-theme="light"] body.detail-page .detail-card p {
  color: rgba(246, 246, 243, 0.68) !important;
}

html[data-theme="light"] body.detail-page .detail-card span {
  color: rgba(246, 246, 243, 0.58) !important;
}

html[data-theme="light"] body.detail-page .contact,
html[data-theme="light"] body.page-software .contact,
html[data-theme="light"] body.page-loesungen .contact,
html[data-theme="light"] body.page-ki .contact,
html[data-theme="light"] body.page-infrastructure .contact,
html[data-theme="light"] body.page-data .contact,
html[data-theme="light"] body.page-emergency .contact {
  background:
    radial-gradient(ellipse at 78% 16%, rgba(255, 255, 255, 0.055), transparent 56%),
    linear-gradient(180deg, #050505 0%, #080808 54%, #050505 100%) !important;
  color: #f6f6f3 !important;
}

html[data-theme="light"] body.detail-page .contact h2,
html[data-theme="light"] body.detail-page .contact .section-kicker,
html[data-theme="light"] body.detail-page .contact-inner > p,
html[data-theme="light"] body.detail-page .site-footer,
html[data-theme="light"] body.detail-page .site-footer a {
  color: #f6f6f3 !important;
}

html[data-theme="light"] body.detail-page .contact-inner > p,
html[data-theme="light"] body.detail-page .site-footer {
  color: rgba(246, 246, 243, 0.66) !important;
}

/* Theme toggle removed: dark mode only. */
.theme-toggle {
  display: none !important;
}

/* Header controls: refined dynamic island, without a bulky card wrapper. */
.site-header {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.control-bar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 40px 0fr;
  align-items: center;
  align-content: center;
  min-height: 52px;
  padding: 6px 8px;
  column-gap: 8px;
  row-gap: 0;
  border-color: rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28px 16px, rgba(255, 255, 255, 0.18), transparent 28px),
    linear-gradient(180deg, rgba(21, 21, 21, 0.88), rgba(4, 4, 4, 0.74)) !important;
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -12px 24px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(26px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(175%) !important;
  transition:
    grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1),
    min-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 320ms ease,
    padding 320ms ease,
    box-shadow 320ms ease,
    transform 320ms ease;
}

.control-bar::before {
  content: "";
  position: absolute;
  inset: 1px 12px auto;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  pointer-events: none;
}

.control-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  opacity: 0;
  transform: translateX(-36%);
  transition: opacity 220ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.control-bar:hover::after,
.control-bar:focus-within::after,
.control-bar.is-notifying::after {
  opacity: 1;
  transform: translateX(36%);
}

.control-bar.is-notifying {
  grid-template-rows: 40px 1fr;
  min-height: 82px;
  padding-bottom: 11px;
  row-gap: 6px;
  border-radius: 27px;
  transform: translateY(1px);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -12px 24px rgba(0, 0, 0, 0.22) !important;
}

.language-control,
.scroll-percent {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.language-control {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: auto;
  height: 40px;
  padding: 0;
}

.language-control select {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.language-options {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 40px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.language-options::before {
  content: "";
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 38px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.11));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 18px rgba(0, 0, 0, 0.2);
  transform: translateX(calc(var(--language-index, 0) * 41px));
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), width 220ms ease;
  pointer-events: none;
}

.language-options button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(248, 246, 241, 0.56);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.language-options button.is-active {
  color: #ffffff;
}

.language-options button:hover,
.language-options button:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: 0;
}

.scroll-percent {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 40px;
  padding-inline: 11px 9px;
  border-radius: 999px;
  line-height: 1;
  background:
    linear-gradient(#080808, #080808) padding-box,
    conic-gradient(from -90deg, rgba(255, 255, 255, 0.78) var(--progress-angle, 0deg), rgba(255, 255, 255, 0.13) 0) border-box !important;
  border: 1px solid transparent !important;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.scroll-percent::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.island-message {
  max-width: none;
  padding-inline: 16px;
  border-radius: 999px;
  background: transparent;
  color: rgba(248, 246, 241, 0.88);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.menu-toggle {
  min-height: 40px;
  padding-inline: 12px 0;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  color: var(--accent);
}

@media (max-width: 660px) {
  .site-header {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: stretch;
    justify-items: stretch;
    align-items: start;
    gap: 8px;
    width: 100%;
    padding: 18px 14px 0;
  }

  .control-bar {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr auto;
    grid-template-rows: 40px 0fr;
    align-items: center;
    min-height: 52px;
    padding: 6px 8px;
    column-gap: 6px;
    row-gap: 0;
  }

  .control-bar.is-notifying {
    grid-template-rows: 40px 1fr;
    min-height: 82px;
    row-gap: 4px;
  }

  .language-control {
    justify-self: start;
    height: 40px;
  }

  .language-options {
    min-height: 40px;
  }

  .language-options button {
    min-width: 36px;
    height: 34px;
    padding-inline: 9px;
    font-size: 0.74rem;
  }

  .language-options::before {
    width: 36px;
    transform: translateX(calc(var(--language-index, 0) * 39px));
  }

  .scroll-percent {
    justify-self: end;
    min-width: 50px;
    height: 38px;
    padding-inline: 9px;
    font-size: 0.74rem;
  }

  .scroll-percent::before {
    left: -7px;
  }

  .island-message {
    grid-column: 1 / -1;
    padding-inline: 12px;
    font-size: 0.72rem;
    white-space: normal;
  }

  .menu-toggle {
    position: static !important;
    align-self: start;
    justify-self: end;
    flex: 0 0 auto;
    display: inline-grid !important;
    place-items: center;
    width: 52px;
    min-height: 52px;
    height: 52px;
    margin: 0;
    padding: 0 !important;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background:
      radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.18), transparent 28px),
      linear-gradient(180deg, rgba(21, 21, 21, 0.88), rgba(4, 4, 4, 0.74)) !important;
    box-shadow:
      0 18px 52px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(26px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(175%) !important;
  }

  .menu-toggle .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .menu-toggle .menu-icon {
    margin: 0;
  }
}

@media (max-width: 380px) {
  .site-header {
    padding: 14px 10px 0;
    gap: 6px;
  }

  .control-bar {
    column-gap: 4px;
    padding: 5px 6px;
  }

  .language-options button {
    min-width: 32px;
    padding-inline: 7px;
    font-size: 0.7rem;
  }

  .language-options::before {
    width: 32px;
    transform: translateX(calc(var(--language-index, 0) * 35px));
  }

  .scroll-percent {
    min-width: 46px;
    padding-inline: 7px;
    font-size: 0.7rem;
  }

  .menu-toggle {
    width: 48px;
    min-height: 48px;
    height: 48px;
  }
}

/* Home: blurred live page on the left, menu column on the right. */
body.home-page .menu-overlay {
  grid-template-columns: 1fr 1fr;
  background: transparent !important;
}

body.home-page .menu-overlay:not(.is-open) {
  transition: opacity 320ms ease, visibility 320ms ease;
}

body.home-page .menu-overlay.is-open {
  transition: opacity 0ms linear, visibility 0ms linear;
}

body.home-page .menu-visual {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-right: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.home-page .menu-overlay.is-open .menu-visual {
  transform: none !important;
}

body.home-page .menu-visual::before,
body.home-page .menu-visual::after {
  content: none !important;
  display: none !important;
}

body.home-page main {
  filter: blur(0) saturate(100%) brightness(1);
  transition: filter 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.home-page.menu-open main {
  filter: blur(18px) saturate(112%) brightness(0.88);
}

body.home-page .menu-content {
  width: 100%;
  margin-left: 0;
  padding-left: clamp(54px, 9vw, 140px);
  background: #050505;
  transform: translate3d(36px, 0, 0);
  opacity: 0;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease;
}

body.home-page .menu-overlay.is-open .menu-content {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

body.home-page .menu-overlay.is-open .menu-main a {
  animation-duration: 560ms;
  animation-delay: calc(var(--i, 0) * 58ms + 90ms);
}

body.home-page .menu-overlay.is-open .menu-cta {
  animation: menuItemIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 480ms;
}

/* Subpages: split column with hero image left, solid menu panel right. */
body.detail-page .menu-overlay {
  grid-template-columns: 1fr 1fr;
  background: transparent !important;
}

body.detail-page .menu-overlay:not(.is-open) {
  transition: opacity 320ms ease, visibility 320ms ease;
}

body.detail-page .menu-overlay.is-open {
  transition: opacity 0ms linear, visibility 0ms linear;
}

body.detail-page .menu-visual::before {
  content: none !important;
  display: none !important;
}

body.detail-page .menu-visual {
  border-right: none !important;
  opacity: 0.88;
  transform: scale(1.035);
  transition:
    opacity 460ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 460ms ease;
}

body.detail-page .menu-overlay.is-open .menu-visual {
  opacity: 1;
  transform: scale(1);
}

body.detail-page .menu-content {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-left: 0;
  padding-left: clamp(54px, 9vw, 140px);
  background: #050505;
  transform: translate3d(36px, 0, 0);
  opacity: 0;
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms ease;
}

body.detail-page .menu-overlay.is-open .menu-content {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

body.detail-page .menu-overlay.is-open .menu-main a {
  animation-duration: 560ms;
  animation-delay: calc(var(--i, 0) * 58ms + 90ms);
}

@media (prefers-reduced-motion: reduce) {
  body.home-page main,
  body.home-page .menu-content,
  body.detail-page .menu-visual,
  body.detail-page .menu-content {
    transition: none !important;
  }

  body.home-page .menu-overlay.is-open .menu-main a,
  body.home-page .menu-overlay.is-open .menu-cta,
  body.detail-page .menu-overlay.is-open .menu-main a {
    animation: none !important;
  }
}

@media (max-width: 980px) {
  body.home-page .menu-overlay,
  body.detail-page .menu-overlay {
    grid-template-columns: 1fr;
    background: #050505 !important;
  }

  body.home-page .menu-visual {
    display: none;
  }

  body.home-page.menu-open main {
    filter: none;
  }

  body.home-page .menu-content,
  body.detail-page .menu-content {
    width: min(78vw, 540px);
    margin-left: clamp(24px, 11vw, 96px);
    padding-left: 0;
    background: transparent;
    transform: translate3d(0, 14px, 0);
  }

  body.home-page .menu-overlay.is-open .menu-content,
  body.detail-page .menu-overlay.is-open .menu-content {
    transform: translate3d(0, 0, 0);
  }
}

/* === Mobile fixes: detail back, blog swipe hint, software laptop hide, solution cards === */
@media (max-width: 660px) {
  /* Zurück-Button: unter die Dynamic Island schieben, damit er nicht verdeckt wird */
  body.detail-page .detail-hero .detail-back {
    position: fixed !important;
    left: 14px !important;
    top: 84px !important;
    z-index: 95 !important;
    min-height: 38px;
    padding: 0 14px 0 12px;
    font-size: 0.78rem;
    background: rgba(6, 6, 6, 0.72) !important;
    border-color: rgba(246, 246, 243, 0.24) !important;
  }

  /* Standardsoftware-Laptop / Terminal-Card auf Mobile entfernen */
  .software-solo-section,
  .software-laptop,
  .software-laptop-solo,
  .software-laptop-frame,
  .software-laptop-interface,
  .software-screen {
    display: none !important;
  }

  /* Solution-Cards: Titel/Text vollständig lesbar */
  .solutions .solution-card {
    min-height: auto !important;
    padding: 22px 20px !important;
    overflow: visible !important;
  }

  .solutions .solution-card strong {
    font-size: clamp(1.55rem, 7.2vw, 2.2rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    text-wrap: balance;
  }

  .solutions .solution-card small {
    max-width: 100% !important;
    font-size: 0.92rem !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }

  .solution-card-top {
    flex-wrap: wrap;
  }

  /* Blog/News: Hinweis auf Wischen + Touch sauber zulassen */
  .blog-news-stage {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  .blog-news-stage.is-swiping {
    cursor: grabbing;
  }

  .blog-news-stage::after {
    content: "← wischen →";
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(246, 246, 243, 0.42);
    pointer-events: none;
  }

  /* Detail-Page H2: sticky abschalten, sonst überlappt sie den Text beim Scrollen */
  body.detail-page .detail-section h2 {
    position: static !important;
    top: auto !important;
    max-width: 100% !important;
    margin-bottom: 4px !important;
    font-size: clamp(2.1rem, 9vw, 3rem) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }

  body.detail-page .detail-section {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 16px !important;
  }

  /* Beratung-spezifische Overrides für Mobile aufheben */
  body.page-beratung .detail-section,
  body.page-beratung .detail-section:first-child,
  body.page-beratung .detail-section:nth-of-type(2),
  body.page-beratung .detail-section:nth-of-type(3) {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 22px 16px !important;
    margin-top: 0 !important;
    min-height: 0 !important;
  }

  body.page-beratung .detail-section:first-child .detail-copy,
  body.page-beratung .detail-section:nth-of-type(3) .detail-copy {
    padding-right: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
  }

  body.page-beratung .detail-section:first-child::after {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    margin-top: 12px;
  }

  body.detail-page .detail-copy {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.detail-page .detail-copy p,
  body.detail-page .detail-copy ul,
  body.detail-page .detail-copy li {
    max-width: 100% !important;
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Generischer Wort-Umbruch für lange deutsche/französische Texte */
  body.detail-page h1,
  body.detail-page h2,
  body.detail-page h3,
  body.detail-page p,
  body.detail-page li,
  body.detail-page small,
  body.detail-page a {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Section-Padding auf Mobile reduzieren — sonst Überläufe rechts */
  body.detail-page .detail-main {
    padding-inline: 16px !important;
  }

  /* Globaler Schutz gegen seitliches Scrollen */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Bilder & Videos auf Mobile nie breiter als Container */
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }

  /* Web-Cinema Slider auf Mobile: kompaktere Karte, mehr Bild, weniger Riesenschrift */
  .web-showcase.web-cinema {
    width: min(100%, calc(100vw - 32px)) !important;
    margin-top: 56px !important;
    margin-bottom: 56px !important;
  }

  .web-cinema-track {
    height: min(560px, 78svh) !important;
    min-height: 460px !important;
    border-radius: 22px;
  }

  .web-cinema-card {
    border-radius: 22px;
  }

  .web-cinema-nav {
    top: 18px !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 8;
  }

  .web-cinema-prev {
    right: auto !important;
    left: 12px !important;
    margin-right: 0 !important;
  }

  .web-cinema-next {
    left: auto !important;
    right: 12px !important;
    margin-left: 0 !important;
  }

  /* Inhalt kompakter, lesbarer */
  .web-cinema-content {
    inset: auto 16px 18px !important;
    max-width: calc(100% - 32px) !important;
  }

  .web-cinema-number {
    margin-bottom: 8px !important;
    font-size: 2.4rem !important;
    line-height: 0.9 !important;
    color: rgba(246, 246, 243, 0.42) !important;
  }

  .web-cinema-tags {
    margin-bottom: 10px !important;
  }

  .web-cinema-tags span,
  .web-cinema .web-panel-meta span {
    min-height: 26px;
    padding: 0 9px;
    font-size: 0.66rem;
  }

  .web-cinema-card h3 {
    max-width: 100% !important;
    margin: 0 0 8px !important;
    font-size: 1.7rem !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  .web-cinema-card p {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }

  .web-cinema .web-panel-meta {
    margin-top: 12px !important;
  }

  .web-cinema .web-panel-link {
    margin-top: 14px !important;
    width: 100% !important;
  }

  /* Plus/Minus-Toggle auf Mobile ausblenden — pro Karte ohnehin nur eine sichtbar */
  .web-cinema-toggle {
    display: none !important;
  }

  /* Bildoverlay leicht verstärken, damit Text gut lesbar bleibt */
  .web-cinema-card::before {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.92) 100%) !important;
    opacity: 1 !important;
  }

  /* Grosse Section-Headlines (Cyber, Contact, Intro, AI, Solutions) auf Mobile bändigen */
  .cyber-section h2,
  .contact h2,
  .intro h2,
  .ai-section h2,
  .solutions h2,
  .workforce h2,
  body.detail-page .contact h2 {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    line-height: 1.05 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    word-break: normal;
  }

  /* Hero-Hub Hintergrund nicht über Viewport hinaus */
  .hero-link-hub {
    overflow: hidden;
  }

  .hub-background {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cyber/Contact-Sections: Padding auf Mobile zähmen */
  .cyber-section,
  .ai-section,
  .contact {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .contact {
    width: min(100% - 24px, 1280px) !important;
  }
}