:root {
  --ink: #07111f;
  --deep: #020915;
  --deep2: #061527;
  --paper: #f6f9ff;
  --white: #fff;
  --muted: #6b7890;
  --muted2: #9aadca;
  --line: rgba(25, 63, 110, .16);
  --lineDark: rgba(35, 114, 204, 0.22);
  --blue: #0d50af;
  --cyan: #001e5f;
  --navy: #0b1b31;
  --shadow: 0 28px 90px rgba(8, 25, 55, .18);
  --shadowBlue: 0 30px 110px rgba(22, 119, 255, .26);
  --radius: 28px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  background: var(--deep);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden
}

body.locked {
  overflow: hidden
}

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

button,
input,
textarea,
select {
  font: inherit
}

button {
  cursor: pointer;
  border: 0
}

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

.noise {
  position: fixed;
  inset: 0;
  z-index: 2;
  opacity: .025;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
}

.glow-follow {
  position: fixed;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 151, 255, .11), transparent 62%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0
}

.brand-rail {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 850;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px
}

.rail-logo {
  width: 54px;
  height: 54px;
  border: 1px solid var(--lineDark);
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(6, 17, 33, .72);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25)
}

.rail-logo img {
  width: 38px
}

.brand-rail span {
  writing-mode: vertical-rl;
  letter-spacing: .22em;
  font: 700 10px var(--mono);
  color: rgba(204, 228, 255, .62)
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 18px 30px;
  transition: .35s var(--ease)
}

.topbar.hidden {
  transform: translateY(-110%)
}

.nav-shell {
  height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 0 20px 0 24px;
  border-bottom: 1px solid rgba(132, 184, 255, .18);
  background: linear-gradient(90deg, rgba(4, 11, 23, .75), rgba(7, 18, 35, .58));
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 55px rgba(0, 0, 0, .22)
}

.nav-mark {
  font-weight: 900;
  letter-spacing: .18em;
  color: #000000;
  font-size: 14px
}

.nav-links {
  justify-self: center;
  display: flex;
  gap: 30px
}

.nav-links a {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9db0cc;
  position: relative
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transition: .25s
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1)
}

.nav-action {
  justify-self: end;
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #fff, var(--cyan) 12%, var(--blue));
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(22, 119, 255, .25)
}

.menu-btn {
  display: none;
  background: transparent;
  width: 44px;
  height: 44px;
  flex-direction: column;
  gap: 5px;
  justify-content: center
}

.menu-btn span {
  height: 2px;
  width: 24px;
  background: #ffffff;
  border-radius: 999px
}

.mobile-panel {
  display: none
}

.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 72% 28%, rgba(20, 128, 255, .34), transparent 30rem), radial-gradient(circle at 25% 78%, rgba(40, 217, 255, .16), transparent 30rem), linear-gradient(135deg, #061120 0%, #020711 52%, #07192e 100%);
  color: #fff;
  padding: 120px 7vw 80px
}

.grid-bg {
  position: absolute;
  inset: 0;
  opacity: .42;
  background-image: linear-gradient(rgba(142, 190, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(142, 190, 255, .09) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(circle at 62% 36%, black, transparent 78%)
}

.hero-aura {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px)
}

.hero-aura.one {
  width: 420px;
  height: 420px;
  background: rgba(22, 119, 255, .28);
  right: 8%;
  top: 14%
}

.hero-aura.two {
  width: 360px;
  height: 360px;
  background: rgba(40, 217, 255, .14);
  left: 9%;
  bottom: 8%
}

.hero-wrap {
  position: relative;
  z-index: 4;
  max-width: 1500px;
  margin: auto;
  min-height: calc(100vh - 200px);
  display: grid;
  grid-template-columns: minmax(420px, .86fr) minmax(520px, 1fr);
  gap: 60px;
  align-items: center
}

.hero h1 {
  margin-top: 28px;
  font-size: clamp(52px, 6.5vw, 112px);
  line-height: .91;
  letter-spacing: -.08em
}

.hero h1 span,
.gradient {
  background: linear-gradient(90deg, #fff 0%, #dbeeff 35%, var(--cyan) 72%, var(--blue) 100%);
  -webkit-background-clip: text;
  color: transparent
}

.hero p {
  margin-top: 28px;
  max-width: 710px;
  color: #b8c9e3;
  font-size: clamp(17px, 1.4vw, 21px)
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 14px;
  font-weight: 900;
  transition: .24s var(--ease)
}

.header-cta {
    padding: 13px 18px;
    border-radius: 999px;
    background: rgba(22, 119, 255, .24);
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 14px 36px rgba(1, 35, 83, 0.24)
}

.btn.primary {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  background: #001e5f;
}

.btn.ghost {
  border: 1px solid var(--lineDark);
  color: #dbeaff;
  background: rgba(255, 255, 255, .035)
}

.btn:hover {
  transform: translateY(-3px)
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 560px;
  margin-top: 48px
}

.hero-metrics div {
  padding: 20px;
  border: 1px solid var(--lineDark);
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(14px)
}

.hero-metrics strong {
  font-size: 30px
}

.hero-metrics small {
  display: block;
  margin-top: 4px;
  color: #9db0cc;
  font: 800 11px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase
}

.hero-visual {
  min-height: 620px
}

.slash-card {
  height: 620px;
  position: relative;
  border: 1px solid var(--lineDark);
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035));
  box-shadow: var(--shadowBlue);
  overflow: hidden;
  isolation: isolate
}

.slash-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .42
}

.slash-card::after {
  content: "";
  position: absolute;
  inset: auto -20% 32% -20%;
  height: 78px;
  transform: rotate(-8deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), rgba(40, 217, 255, .22), transparent);
  filter: blur(10px);
  z-index: 5
}

.slash-layer {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(22, 119, 255, .35));
  border: 1px solid rgba(65, 174, 255, .24);
  transform: skewY(-18deg);
  filter: drop-shadow(0 25px 60px rgba(0, 83, 255, .22))
}

.s1 {
  width: 46%;
  height: 72%;
  left: 20%;
  top: 10%
}

.s2 {
  width: 36%;
  height: 55%;
  right: 10%;
  bottom: 6%;
  background: linear-gradient(135deg, rgba(40, 217, 255, .16), rgba(22, 119, 255, .45))
}

.s3 {
  width: 28%;
  height: 36%;
  left: 8%;
  bottom: 12%;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(40, 217, 255, .18))
}

.hero-logo-big {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: min(420px, 60%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 55px rgba(22, 119, 255, .35))
}

.node {
  position: absolute;
  z-index: 7;
  width: 170px;
  padding: 20px;
  border: 1px solid rgba(40, 217, 255, .55);
  background: rgba(4, 17, 33, .75);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .18)
}

.node span {
  display: block;
  font: 900 12px var(--mono);
  letter-spacing: .22em;
  color: var(--cyan);
  margin-bottom: 10px
}

.node b {
  font-size: 18px
}

.n1 {
  left: 7%;
  top: 8%
}

.n2 {
  left: 8%;
  bottom: 9%
}

.n3 {
  right: 7%;
  top: 12%
}

.n4 {
  right: 8%;
  bottom: 11%
}

.connectors {
  position: absolute;
  inset: 0;
  z-index: 3
}

.connectors path {
  fill: none;
  stroke: rgba(40, 217, 255, .34);
  stroke-width: 1.5;
  stroke-dasharray: 8 10;
  animation: dash 12s linear infinite
}

.scroll-hint {
  position: absolute;
  z-index: 5;
  right: 36px;
  bottom: 28px;
  color: #8fa6c8;
  font: 800 11px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  writing-mode: vertical-rl
}

.marquee {
  overflow: hidden;
  border-block: 1px solid rgba(96, 166, 255, .18);
  background: #061426;
  color: #cfe4ff
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 30px;
  padding: 18px 0;
  animation: marquee 28s linear infinite
}

.marquee span {
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase
}

.marquee b {
  color: var(--cyan)
}

.section {
  position: relative;
  padding: 120px 7vw
}

.light-section {
  background: var(--paper);
  color: var(--ink)
}

.split-head {
  max-width: 1380px;
  margin: 0 auto 54px;
  display: grid;
  grid-template-columns: .85fr .45fr;
  gap: 60px;
  align-items: end
}

.split-head h2,
.center-head h2,
.why-title h2,
.system-copy h2,
.startup-card h2,
.contact-copy h2 {
  font-size: clamp(36px, 5vw, 74px);
  line-height: .96;
  letter-spacing: -.06em
}

.split-head p,
.why-title p,
.system-copy p,
.startup-card p,
.contact-copy p {
  font-size: 18px;
  color: var(--muted);
  max-width: 660px
}

.kicker.dark {
  color: var(--blue)
}

.service-switch {
  max-width: 760px;
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 8px;
  background: #e9f0fb;
  border: 1px solid var(--line)
}

.service-filter {
  padding: 18px;
  border-radius: 0;
  background: transparent;
  font-weight: 900;
  color: #64728a
}

.service-filter.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 18px 45px rgba(8, 25, 55, .1)
}

.service-stage {
  max-width: 1380px;
  margin: auto;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.service-stage.active {
  display: grid
}

.service-tile {
  min-height: 330px;
  padding: 34px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 55px rgba(8, 25, 55, .06);
  transition: .3s var(--ease)
}

.service-tile.highlight {
  background: linear-gradient(145deg, #071428, #102f55);
  color: #fff;
  border-color: rgba(40, 217, 255, .32)
}

.service-tile span,
.price-card span {
  font: 900 13px var(--mono);
  letter-spacing: .2em;
  color: var(--blue)
}

.service-tile h3 {
  margin-top: 46px;
  font-size: 30px;
  letter-spacing: -.04em
}

.service-tile p {
  margin-top: 16px;
  color: #68758b;
  font-size: 17px
}

.service-tile.highlight p {
  color: #b8c9e3
}

.service-tile ul,
.price-card ul {
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 28px
}

.service-tile li,
.price-card li {
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px
}

.dark-system {
  background: radial-gradient(circle at 15% 30%, rgba(22, 119, 255, .20), transparent 28rem), linear-gradient(135deg, #020814, #07182b);
  color: #fff
}

.system-grid {
  max-width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: .8fr 1fr;
  gap: 70px;
  align-items: center
}

.system-copy p {
  color: #b8c9e3;
  margin-top: 22px
}

.vision-tabs {
  display: flex;
  gap: 10px;
  margin-top: 34px;
  flex-wrap: wrap
}

.vision-tab {
  padding: 13px 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--lineDark);
  color: #b8c9e3;
  font-weight: 900
}

.vision-tab.active {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff
}

.vision-panel {
  display: none;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid var(--lineDark);
  background: rgba(255, 255, 255, .06)
}

.vision-panel.active {
  display: grid;
  gap: 8px
}

.vision-panel span {
  color: #b8c9e3
}

.system-board {
  border: 1px solid var(--lineDark);
  background: rgba(255, 255, 255, .055);
  box-shadow: var(--shadowBlue);
  overflow: hidden
}

.board-top {
  height: 54px;
  border-bottom: 1px solid var(--lineDark);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  color: #94a8c3;
  font: 700 12px var(--mono)
}

.board-top i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57
}

.board-top i:nth-child(2) {
  background: #febc2e
}

.board-top i:nth-child(3) {
  background: #28c840
}

.board-flow {
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 70px 1fr 70px 1fr;
  align-items: center;
  gap: 10px
}

.flow-card {
  padding: 22px;
  border: 1px solid var(--lineDark);
  background: rgba(2, 10, 20, .5);
  font-weight: 900;
  text-align: center
}

.flow-card.wide {
  grid-column: 1/6;
  margin-top: 22px
}

.flow-card.accent {
  grid-column: 2/5;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  margin-top: 8px
}

.flow-line {
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan))
}

.white-section {
  background: #fff;
  color: var(--ink)
}

.why-layout {
  max-width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: .75fr 1fr;
  gap: 70px
}

.why-cards {
  display: grid;
  gap: 16px
}

.why-card {
  padding: 30px;
  background: #f5f8fc;
  border: 1px solid var(--line)
}

.why-card b {
  color: var(--blue);
  font: 900 13px var(--mono)
}

.why-card h3 {
  font-size: 28px;
  margin-top: 18px
}

.why-card p {
  color: var(--muted);
  margin-top: 10px
}

.startup-section {
  background: linear-gradient(135deg, #eef4ff, #fff)
}

.startup-card {
  max-width: 1380px;
  margin: auto;
  padding: 56px;
  background: #071428;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 50px;
  box-shadow: var(--shadow)
}

.startup-card p {
  color: #b8c9e3
}

.process-section {
  background: #f6f9ff
}

.center-head {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 56px
}

.timeline-pro {
  max-width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.step-pro {
  padding: 30px;
  background: #fff;
  border: 1px solid var(--line);
  min-height: 260px
}

.step-pro span {
  font: 900 13px var(--mono);
  color: var(--blue)
}

.step-pro h3 {
  font-size: 26px;
  margin-top: 40px
}

.step-pro p {
  margin-top: 10px;
  color: var(--muted)
}

.packages {
  background: #061426;
  color: #fff
}

.pricing-grid {
  max-width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.price-card {
  padding: 34px;
  border: 1px solid var(--lineDark);
  background: rgba(255, 255, 255, .055);
  min-height: 340px
}

.price-card.featured {
  background: linear-gradient(145deg, rgba(22, 119, 255, .28), rgba(40, 217, 255, .12));
  box-shadow: var(--shadowBlue)
}

.price-card h3 {
  margin-top: 36px;
  font-size: 31px
}

.price-card p {
  margin-top: 14px;
  color: #b8c9e3
}

.contact-section {
  background: #fff
}

.contact-grid {
  max-width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: .75fr 1fr;
  gap: 70px;
  padding: 56px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #f6f9ff, #fff);
  box-shadow: var(--shadow)
}

.contact-links {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  color: var(--blue);
  font-weight: 800
}

.form {
  display: grid;
  gap: 14px
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

label {
  display: grid;
  gap: 8px;
  color: #63718a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase
}

input,
textarea,
select {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  outline: 0
}

textarea {
  min-height: 150px;
  resize: vertical
}

.form-status {
  font-weight: 800;
  color: var(--blue)
}

.footer {
  background: #020814;
  color: #dbeaff;
  padding: 70px 7vw 28px
}

.footer-main {
  max-width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--lineDark)
}

.footer-brand img {
  width: 72px
}

.footer h3 {
  font-size: 28px;
  margin-top: 12px
}

.footer p,
.footer a,
.footer button {
  color: #9db0cc
}

.footer h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #fff;
  margin-bottom: 16px
}

.footer a,
.footer button {
  display: block;
  margin: 10px 0;
  background: transparent
}

.footer-bottom {
  max-width: 1380px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px
}

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

.cookie-gate {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1, 5, 12, .78);
  backdrop-filter: blur(20px)
}

.cookie-gate.hide {
  display: none
}

.cookie-card {
  max-width: 720px;
  background: #071428;
  color: #fff;
  border: 1px solid var(--lineDark);
  padding: 34px;
  box-shadow: var(--shadowBlue)
}

.cookie-badge {
  font: 900 12px var(--mono);
  letter-spacing: .18em;
  color: var(--cyan)
}

.cookie-card h2 {
  font-size: 42px;
  line-height: 1;
  margin-top: 16px
}

.cookie-card p {
  color: #b8c9e3;
  margin-top: 12px
}

.cookie-links,
.cookie-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px
}

.cookie-card button,
.modal button {
  padding: 10px 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--lineDark);
  color: #fff
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--lineDark);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px
}

.check-row input {
  width: 20px;
  height: 20px
}

.cookie-accept {
  background: linear-gradient(135deg, var(--blue), var(--cyan)) !important
}

.cookie-accept.disabled {
  opacity: .45
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(14px)
}

.modal.open {
  display: grid
}

.modal-box {
  max-width: 860px;
  max-height: 86vh;
  overflow: auto;
  background: #071428;
  color: #fff;
  border: 1px solid var(--lineDark);
  padding: 30px;
  position: relative
}

.modal-close {
  position: absolute;
  right: 18px;
  top: 18px
}

.modal-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  padding-right: 52px
}

.legal-tab.active {
  background: linear-gradient(135deg, var(--blue), var(--cyan))
}

.legal-content {
  display: none
}

.legal-content.active {
  display: block
}

.legal-content h2 {
  font-size: 36px
}

.legal-content p {
  color: #b8c9e3;
  margin-top: 12px
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: .8s var(--ease)
}

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

.delay-1 {
  transition-delay: .1s
}

.delay-2 {
  transition-delay: .2s
}

.delay-3 {
  transition-delay: .3s
}

@keyframes marquee {
  to {
    transform: translateX(-50%)
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: -220
  }
}

@media(max-width:1180px) {
  .brand-rail {
    display: none
  }

  .hero-wrap,
  .system-grid,
  .why-layout,
  .startup-card,
  .contact-grid,
  .split-head {
    grid-template-columns: 1fr
  }

  .service-stage,
  .pricing-grid {
    grid-template-columns: 1fr 1fr
  }

  .timeline-pro {
    grid-template-columns: 1fr 1fr
  }

  .nav-links,
  .nav-action {
    display: none
  }

  .menu-btn {
    display: flex;
    justify-self: end
  }

  .nav-shell {
    grid-template-columns: auto 1fr auto
  }

  .mobile-panel.open {
    display: grid;
    gap: 12px;
    padding: 18px;
    background: #071428;
    border-top: 1px solid var(--lineDark)
  }

  .mobile-panel a {
    color: #dbeaff;
    font-weight: 800;
    padding: 8px 0
  }
}

@media(max-width:720px) {
  .topbar {
    padding: 12px
  }

  .hero {
    padding: 110px 22px 70px
  }

  .hero-wrap {
    gap: 30px
  }

  .hero h1 {
    font-size: 48px
  }

  .hero-metrics,
  .service-stage,
  .pricing-grid,
  .timeline-pro,
  .footer-main,
  .form-row {
    grid-template-columns: 1fr
  }

  .hero-visual,
  .slash-card {
    height: 540px;
    min-height: 0
  }

  .node {
    width: 140px;
    padding: 16px
  }

  .section {
    padding: 82px 22px
  }

  .footer-bottom {
    flex-direction: column
  }

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

/* === JAHJAH DevWorks Premium Redesign Patch ===
   Ziel: seriöser, dunkler Logo-Blau/Türkis-Ton, bessere Lesbarkeit,
   modernere Flächen in weißen Bereichen, ohne die bestehende Reihenfolge
   oder Seitenstruktur zu verändern. */
:root {
  --ink: #06101f;
  --deep: #010713;
  --deep2: #04152a;
  --paper: #f3f7fc;
  --muted: #5f6f86;
  --muted2: #8aa0bd;
  --line: rgba(8, 42, 82, .14);
  --lineDark: rgba(91, 156, 220, .22);
  --blue: #075bca;
  --cyan: #1097d8;
  --aqua: #0a7fb8;
  --navy: #07172d;
  --shadow: 0 30px 85px rgba(4, 19, 43, .14);
  --shadowBlue: 0 28px 100px rgba(7, 91, 202, .24);
  --radius: 26px;
}

body {
  background: var(--deep);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased
}

.topbar {
  padding-top: 14px
}

.nav-shell {
  border: 1px solid rgba(91, 156, 220, .16);
  border-radius: 0 0 22px 22px;
  background: linear-gradient(90deg, rgba(2, 9, 20, .88), rgba(5, 19, 38, .76));
  box-shadow: 0 20px 70px rgba(0, 0, 0, .26)
}

.nav-action,
.btn.primary,
.vision-tab.active,
.flow-card.accent,
.legal-tab.active,
.cookie-accept {
  background: linear-gradient(135deg, #064ead, #0b77cf 55%, #1097d8) !important
}

.nav-action,
.btn.primary {
  box-shadow: 0 18px 55px rgba(7, 91, 202, .28)
}

.nav-action:hover,
.btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.08)
}

.btn {
  border-radius: 16px
}

.btn.ghost:hover {
  border-color: rgba(16, 151, 216, .52);
  background: rgba(16, 151, 216, .08)
}

.hero {
  background: radial-gradient(circle at 70% 30%, rgba(7, 91, 202, .30),
      transparent 31rem), radial-gradient(circle at 22% 76%, rgba(16, 151, 216, .15), transparent 28rem), linear-gradient(135deg, #06111f 0%, #010611 52%, #06182d 100%)
}

.hero-wrap {
  grid-template-columns: minmax(420px, .9fr) minmax(520px, .95fr);
  gap: 78px
}

.eyebrow {
  border-color: rgba(98, 160, 222, .22);
  background: rgba(255, 255, 255, .045)
}

.hero h1 {
  line-height: 1.02;
  letter-spacing: -.055em;
  max-width: 860px
}

.hero p {
  line-height: 1.78;
  color: #bfd0e7
}

.hero-metrics div,
.slash-card,
.node,
.vision-panel,
.system-board,
.price-card,
.cookie-card,
.modal-box {
  border-radius: var(--radius)
}

.hero-metrics div {
  background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  border-color: rgba(91, 156, 220, .20)
}

.hero-visual {
  min-height: 600px
}

.slash-card {
  height: 600px;
  background: linear-gradient(145deg, rgba(8, 23, 43, .95), rgba(3, 11, 24, .82));
  box-shadow: 0 36px 110px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .035) inset
}

.slash-card::before {
  background-image: linear-gradient(rgba(126, 178, 235, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(126, 178, 235, .075) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .36
}

.slash-card::after {
  height: 120px;
  inset: auto -25% 23% -25%;
  transform: rotate(-12deg);
  background: linear-gradient(90deg, transparent, rgba(7, 91, 202, .38), rgba(16, 151, 216, .26), transparent);
  filter: blur(24px)
}

.slash-layer {
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(7, 91, 202, .18));
  border-color: rgba(98, 160, 222, .20);
  opacity: .72
}

.s1 {
  width: 40%;
  height: 62%;
  left: 27%;
  top: 13%
}

.s2 {
  width: 31%;
  height: 45%;
  right: 12%;
  bottom: 9%
}

.s3 {
  width: 25%;
  height: 30%;
  left: 11%;
  bottom: 13%
}

.hero-logo-big {
  display: block;
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(300px, 48%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 26px 55px rgba(0, 0, 0, .34)) drop-shadow(0 0 42px rgba(16, 151, 216, .20));
  opacity: .96
}

.node {
  width: 158px;
  padding: 18px;
  background: rgba(3, 12, 26, .78);
  border-color: rgba(16, 151, 216, .35)
}

.node span {
  color: #57c7ff
}

.n1 {
  left: 8%;
  top: 9%
}

.n2 {
  left: 8%;
  bottom: 9%
}

.n3 {
  right: 8%;
  top: 10%
}

.n4 {
  right: 8%;
  bottom: 10%
}

.connectors path {
  stroke: rgba(16, 151, 216, .24)
}

.split-head h2,
.center-head h2,
.why-title h2,
.system-copy h2,
.startup-card h2,
.contact-copy h2 {
  line-height: 1.07;
  letter-spacing: -.045em;
  text-wrap: balance
}

.split-head p,
.why-title p,
.system-copy p,
.startup-card p,
.contact-copy p {
  line-height: 1.78
}

.light-section,
.process-section {
  background: linear-gradient(180deg, #f7faff 0%, #eef4fb 100%)
}

.white-section {
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fe 100%)
}

.white-section::before,
.light-section::before {
  content: "";
  position: absolute;
  inset: 58px 7vw auto auto;
  width: min(510px, 30vw);
  height: 250px;
  border: 1px solid rgba(7, 91, 202, .10);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(7, 91, 202, .08), rgba(16, 151, 216, .035));
  transform: rotate(-8deg);
  pointer-events: none
}

.white-section::after {
  content: "";
  position: absolute;
  left: 7vw;
  bottom: 54px;
  width: 170px;
  height: 170px;
  border-radius: 32px;
  border: 1px solid rgba(16, 151, 216, .16);
  background: linear-gradient(145deg, rgba(16, 151, 216, .08), rgba(255, 255, 255, .55));
  transform: rotate(12deg);
  pointer-events: none
}

.why-layout,
.split-head,
.service-switch,
.service-stage {
  position: relative;
  z-index: 2
}

.service-switch {
  border-radius: 22px;
  background: #e8f0fa
}

.service-filter {
  border-radius: 16px
}

.service-tile,
.why-card,
.step-pro,
.price-card,
.startup-card,
.contact-grid {
  border-radius: var(--radius)
}

.service-tile,
.why-card,
.step-pro {
  box-shadow: 0 18px 55px rgba(8, 25, 55, .055)
}

.service-tile:hover,
.why-card:hover,
.step-pro:hover,
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(8, 25, 55, .11)
}

.service-tile,
.why-card,
.step-pro,
.price-card {
  transition: .28s var(--ease)
}

.service-tile h3,
.why-card h3,
.step-pro h3,
.price-card h3 {
  letter-spacing: -.035em
}

.service-tile.highlight {
  background: linear-gradient(145deg, #061225, #0a2444);
  border-color: rgba(16, 151, 216, .24)
}

.startup-card {
  background: linear-gradient(135deg, #061225, #0a2444);
  position: relative;
  overflow: hidden
}

.startup-card::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -120px;
  width: 300px;
  height: 300px;
  border-radius: 56px;
  background: linear-gradient(135deg, rgba(16, 151, 216, .18), rgba(7, 91, 202, .10));
  transform: rotate(18deg)
}

input,
textarea,
select {
  border-radius: 16px;
  transition: .22s var(--ease)
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(7, 91, 202, .48);
  box-shadow: 0 0 0 4px rgba(7, 91, 202, .08)
}

.contact-grid {
  background: linear-gradient(135deg, #f6f9ff, #fff);
  position: relative;
  overflow: hidden
}

.contact-grid::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -100px;
  width: 280px;
  height: 280px;
  border-radius: 44px;
  background: linear-gradient(135deg, rgba(7, 91, 202, .08), rgba(16, 151, 216, .05));
  transform: rotate(16deg)
}

.contact-grid>* {
  position: relative;
  z-index: 1
}

@media(max-width:1180px) {
  .hero-wrap {
    grid-template-columns: 1fr;
    gap: 42px
  }

  .hero-visual {
    min-height: 520px
  }

  .slash-card {
    height: 520px
  }

  .split-head h2,
  .center-head h2,
  .why-title h2,
  .system-copy h2,
  .startup-card h2,
  .contact-copy h2 {
    line-height: 1.12
  }
}

@media(max-width:720px) {
  .hero h1 {
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -.04em
  }

  .hero p {
    font-size: 16px;
    line-height: 1.7
  }

  .hero-visual,
  .slash-card {
    height: 450px
  }

  .hero-logo-big {
    width: min(230px, 56%)
  }

  .node {
    width: 124px;
    padding: 13px
  }

  .node b {
    font-size: 14px
  }

  .node span {
    font-size: 10px
  }

  .split-head h2,
  .center-head h2,
  .why-title h2,
  .system-copy h2,
  .startup-card h2,
  .contact-copy h2 {
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -.035em
  }

  .white-section::before,
  .light-section::before,
  .white-section::after {
    display: none
  }
}

/* === Requested Screenshot Components - coded, not images === */
.brand-rail {
  display: none
}

.topbar {
  top: 34px;
  left: 0;
  right: 0;
  padding: 0 5vw;
  display: flex;
  justify-content: center;
  pointer-events: none
}

.nav-shell {
  pointer-events: auto;
  width: min(1600px, 100%);
  height: 96px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
  padding: 0 22px 0 28px;
  border: 1px solid rgba(126, 160, 200, .22);
  border-radius: 30px;
  background: linear-gradient(90deg, rgba(9, 18, 31, .96), rgba(30, 39, 52, .94));
  box-shadow: 0 30px 90px rgba(13, 28, 47, .28);
  backdrop-filter: blur(18px)
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-weight: 950;
  letter-spacing: .055em;
  line-height: .88;
  font-size: 14px;
  text-transform: uppercase;
  min-width: 190px
}

.nav-brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .22))
}

.nav-links {
  gap: 32px
}

.nav-links a {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .075em;
  color: #99abc4
}

.nav-links a::after {
  bottom: -14px;
  height: 2px;
  background: #36c6f4
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff
}

.nav-action {
  height: 64px;
  padding: 0 28px;
  border-radius: 18px;
  background: #fff !important;
  color: #08111f !important;
  box-shadow: none;
  font-size: 16px;
  letter-spacing: -.02em
}

.nav-action:hover {
  background: #eef6ff !important;
  filter: none
}

.topbar.hidden {
  transform: none
}

.hero {
  padding-top: 150px
}

.services-head {
  grid-template-columns: minmax(0, 1fr) minmax(390px, .62fr);
  align-items: center
}

.services-copy-block h2 {
  max-width: 820px
}

.code-window {
  border-radius: 18px;
  background: #0d1322;
  color: #eaf4ff;
  border: 1px solid rgba(43, 67, 104, .32);
  box-shadow: 0 28px 70px rgba(4, 17, 36, .18);
  overflow: hidden
}

.code-top {
  height: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(113, 142, 183, .18);
  color: #5f6a7d;
  font: 700 12px var(--mono);
  letter-spacing: .04em
}

.code-top i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57
}

.code-top i:nth-child(2) {
  background: #febc2e
}

.code-top i:nth-child(3) {
  background: #28c840
}

.code-top span {
  margin-left: 6px
}

.code-window pre {
  margin: 0;
  padding: 26px 28px 30px;
  overflow: auto;
  font: 500 14px/1.8 var(--mono);
  white-space: pre-wrap
}

.service-code-card {
  transform: rotate(-.4deg)
}

.c-purple {
  color: #d879ff
}

.c-green {
  color: #c7ff62
}

.c-yellow {
  color: #ffe45c
}

.c-red {
  color: #ff6b6b
}

.c-blue {
  color: #68a7ff
}

.c-muted {
  color: #6d7483;
  font-style: italic
}

.vision-clean {
  overflow: hidden;
  background: linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%);
  color: var(--ink);
  padding-top: 145px;
  padding-bottom: 150px
}

.vision-clean::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(20, 65, 112, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 65, 112, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent)
}

.vision-clean::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 92px;
  width: min(1040px, 75vw);
  height: 112px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(16, 30, 45, .18), rgba(7, 15, 28, .55), rgba(16, 30, 45, .18));
  filter: blur(28px);
  border-radius: 999px
}

.vision-clean-grid {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.05fr .85fr;
  gap: 86px;
  align-items: center
}

.vision-clean-copy h2 {
  font-size: clamp(58px, 7.2vw, 116px);
  line-height: .93;
  letter-spacing: -.075em;
  max-width: 720px
}

.vision-clean-copy h2 span {
  display: block;
  background: linear-gradient(180deg, #eaffff 0%, #75e9ff 45%, #1085f2 100%);
  -webkit-background-clip: text;
  color: transparent
}

.vision-clean-copy p {
  margin-top: 28px;
  color: #203d66;
  font-size: 23px;
  line-height: 1.55;
  max-width: 620px
}

.vision-clean-card {
  border-radius: 0 0 34px 34px;
  background: rgba(255, 255, 255, .86);
  padding: 64px 58px 74px;
  box-shadow: 0 24px 70px rgba(18, 48, 88, .10);
  border: 1px solid rgba(12, 51, 94, .06)
}

.vision-clean-card h3 {
  font-size: clamp(44px, 5vw, 70px);
  line-height: 1.02;
  letter-spacing: -.065em;
  color: #07111f
}

.vision-clean-card p {
  margin-top: 24px;
  color: #2d4c7a;
  font-size: 22px;
  line-height: 1.55
}

.vision-clean-card .kicker {
  margin-bottom: 26px
}

.system-section {
  overflow: hidden;
  background: radial-gradient(circle at 28% 72%, rgba(10, 127, 184, .23), transparent 30rem), radial-gradient(circle at 75% 28%, rgba(7, 91, 202, .15), transparent 26rem), linear-gradient(135deg, #06111f 0%, #020812 100%);
  color: #fff;
  padding-top: 135px;
  padding-bottom: 135px
}

.system-section::before {
  content: "";
  position: absolute;
  left: 8vw;
  top: 105px;
  width: 760px;
  height: 360px;
  border: 1px solid rgba(84, 151, 220, .20);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(13, 31, 54, .70), rgba(5, 16, 30, .25));
  box-shadow: 0 36px 120px rgba(0, 0, 0, .25)
}

.system-showcase {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: .95fr 1fr;
  gap: 70px;
  align-items: center
}

.system-dashboard {
  min-height: 520px;
  border: 1px solid rgba(91, 156, 220, .24);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(15, 36, 60, .78), rgba(4, 14, 27, .58));
  box-shadow: 0 35px 100px rgba(0, 0, 0, .30);
  overflow: hidden;
  align-self: stretch
}

.system-dashboard .code-top {
  height: 70px;
  background: rgba(12, 28, 48, .70)
}

.dashboard-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 180px 30px 30px
}

.dashboard-cards article {
  min-height: 190px;
  padding: 28px 24px;
  border-radius: 24px;
  border: 1px solid rgba(120, 172, 226, .22);
  background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025))
}

.dashboard-cards b {
  display: block;
  font-size: 28px;
  letter-spacing: -.04em;
  line-height: 1.25
}

.dashboard-cards span {
  display: block;
  margin-top: 16px;
  color: #b9d8ff;
  font-size: 18px;
  line-height: 1.5
}

.system-showcase-copy .kicker {
  margin-bottom: 30px
}

.system-showcase-copy h2 {
  font-size: clamp(54px, 6.2vw, 92px);
  line-height: .98;
  letter-spacing: -.07em;
  max-width: 720px
}

.system-showcase-copy p {
  margin-top: 30px;
  color: #b9d8ff;
  font-size: 23px;
  line-height: 1.6;
  max-width: 780px
}

.packages {
  background: radial-gradient(circle at 42% 20%, rgba(7, 91, 202, .16), transparent 32rem), linear-gradient(180deg, #06111f 0%, #020812 100%);
  padding-top: 115px
}

.packages .center-head {
  margin-bottom: 56px
}

.pricing-grid {
  gap: 28px;
  max-width: 1500px
}

.price-card {
  min-height: 410px;
  padding: 52px 44px;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035));
  border: 1px solid rgba(111, 156, 207, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04)
}

.price-card.featured {
  background: radial-gradient(circle at 50% 0%, rgba(10, 127, 184, .28), transparent 60%), linear-gradient(145deg, rgba(7, 91, 202, .18), rgba(255, 255, 255, .04));
  border-color: rgba(46, 190, 245, .55);
  box-shadow: 0 0 0 1px rgba(46, 190, 245, .18), 0 34px 90px rgba(7, 91, 202, .18)
}

.price-card span {
  color: #28d9ff;
  font-size: 17px;
  letter-spacing: .34em
}

.price-card h3 {
  margin-top: 56px;
  font-size: clamp(31px, 2.6vw, 42px);
  line-height: 1.08;
  letter-spacing: -.06em
}

.price-card p {
  margin-top: 28px;
  color: #c0d7ff;
  font-size: 22px;
  line-height: 1.58;
  max-width: 420px
}

.price-card ul {
  margin-top: 36px;
  gap: 12px
}

.price-card li {
  border-color: rgba(154, 190, 229, .24);
  background: rgba(255, 255, 255, .045);
  color: #fff;
  padding: 10px 14px;
  font-size: 14px
}

@media(max-width:1180px) {
  .topbar {
    top: 14px;
    padding: 0 18px
  }

  .nav-shell {
    height: 78px;
    border-radius: 24px
  }

  .nav-brand {
    min-width: 0
  }

  .nav-links,
  .nav-action {
    display: none
  }

  .services-head,
  .vision-clean-grid,
  .system-showcase {
    grid-template-columns: 1fr
  }

  .service-code-card {
    max-width: 650px
  }

  .vision-clean-card {
    border-radius: 34px
  }

  .dashboard-cards {
    padding-top: 80px
  }

  .system-section::before {
    display: none
  }
}

@media(max-width:720px) {
  .topbar {
    top: 10px
  }

  .nav-shell {
    height: 70px;
    padding: 0 16px;
    border-radius: 20px
  }

  .nav-brand span {
    font-size: 12px
  }

  .nav-brand img {
    width: 38px;
    height: 38px
  }

  .hero {
    padding-top: 120px
  }

  .code-window pre {
    font-size: 12px;
    padding: 20px
  }

  .vision-clean {
    padding-top: 95px;
    padding-bottom: 95px
  }

  .vision-clean-grid {
    gap: 38px
  }

  .vision-clean-copy h2 {
    font-size: 56px
  }

  .vision-clean-copy p,
  .vision-clean-card p,
  .system-showcase-copy p,
  .price-card p {
    font-size: 18px
  }

  .vision-clean-card {
    padding: 34px 26px
  }

  .vision-clean-card h3 {
    font-size: 38px
  }

  .system-dashboard {
    min-height: auto
  }

  .dashboard-cards {
    grid-template-columns: 1fr;
    padding: 28px
  }

  .system-showcase-copy h2 {
    font-size: 48px
  }

  .pricing-grid {
    grid-template-columns: 1fr
  }

  .price-card {
    min-height: auto;
    padding: 38px 28px
  }
}

/* === Final requested patch: Vision switch + clean fixed navigation only === */
@media (min-width:1181px) {
  .topbar {
    top: 0;
    padding: 20px 7vw 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(247, 250, 255, .92), rgba(247, 250, 255, .58) 68%, rgba(247, 250, 255, 0));
  }

  .topbar.hidden {
    transform: none;
  }

  .nav-shell {
    pointer-events: auto;
    width: 100%;
    height: 42px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 34px;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .nav-brand {
    display: none !important;
  }

  .nav-links {
    justify-self: auto;
    display: flex;
    align-items: center;
    gap: 36px;
  }

  .nav-links a {
    color: #07111f;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 13px 0;
  }

  .nav-links a::after {
    bottom: 4px;
    height: 2px;
    background: linear-gradient(90deg, #075bca, #1097d8);
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: #07111f;
  }

  .nav-action {
    height: 40px;
    min-height: 40px;
    padding: 0 20px;
    border-radius: 5px !important;
    background: #080d1d !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .nav-action::after {
    content: '↗';
    font-size: 18px;
    margin-left: 9px;
    line-height: 1;
  }
}

.vision-clean-grid {
  grid-template-columns: minmax(0, 1fr) 280px minmax(0, 1.1fr);
  align-items: start;
  gap: 30px;
}

.vision-clean-copy h2 {
  max-width: 760px;
}

.vision-clean-tabs {
  display: grid;
  gap: 16px;
  align-self: start;
}

.vision-clean .vision-tab {
  width: 100%;
  min-height: 78px;
  padding: 0 24px;
  border: 1px solid rgba(9, 48, 92, .12);
  border-radius: 20px;
  background: #fff !important;
  color: #49617f;
  font-size: 20px;
  font-weight: 900;
  text-align: left;
  box-shadow: 0 18px 55px rgba(7, 24, 52, .06);
  transition: .25s var(--ease);
}

.vision-clean .vision-tab:hover {
  transform: translateY(-2px);
  border-color: rgba(7, 91, 202, .30);
}

.vision-clean .vision-tab.active {
  background: #061225 !important;
  color: #fff;
  border-color: rgba(16, 151, 216, .40);
  box-shadow: 0 22px 60px rgba(6, 18, 37, .16);
}

.vision-clean .vision-clean-card {
  min-height: 420px;
  display: grid;
  align-items: start;
}

.vision-clean .vision-panel {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.vision-clean .vision-panel.active {
  display: block;
}

.vision-clean .vision-panel h3 {
  margin-top: 28px;
  font-size: clamp(44px, 4.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -.055em;
  color: #07111f;
}

.vision-clean .vision-panel p {
  margin-top: 26px;
  color: #405674;
  font-size: 22px;
  line-height: 1.65;
}

@media(max-width:1180px) {
  .vision-clean-grid {
    grid-template-columns: 1fr;
  }

  .vision-clean-tabs {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .vision-clean .vision-tab {
    min-height: 58px;
    text-align: center;
    font-size: 16px;
    padding: 0 12px;
  }
}

@media(max-width:720px) {
  .vision-clean-tabs {
    grid-template-columns: 1fr;
  }

  .vision-clean .vision-panel h3 {
    font-size: 38px;
  }

  .vision-clean .vision-panel p {
    font-size: 18px;
  }
}

/* === Final fine-tune: logo links, farblich angepasste Clean-Navigation + harmonischer Vision-Switch === */
@media (min-width:1181px) {
  .topbar {
    top: 0;
    padding: 22px 7vw 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(246, 249, 255, .96), rgba(246, 249, 255, .68) 62%, rgba(246, 249, 255, 0));
  }

  .nav-shell {
    pointer-events: auto;
    width: 100%;
    height: 52px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 34px;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .nav-brand {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-width: 190px;
    color: #07111f;
    font-size: 12px;
    font-weight: 950;
    line-height: .88;
    letter-spacing: .045em;
    text-transform: uppercase;
  }

  .nav-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(7, 17, 31, .12));
  }

  .nav-links {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 34px;
  }

  .nav-links a {
    color: #31425c;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 13px 0;
  }

  .nav-links a::after {
    bottom: 3px;
    height: 2px;
    background: linear-gradient(90deg, #075bca, #1097d8);
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: #07111f;
  }

  .nav-action {
    height: 42px;
    min-height: 42px;
    padding: 0 20px;
    border-radius: 5px !important;
    background: #07111f !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(7, 17, 31, .10) !important;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
}

.vision-clean-grid {
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  grid-template-areas:
    "copy tabs"
    "copy card";
  align-items: start;
  gap: 18px 56px;
}

.vision-clean-copy {
  grid-area: copy;
}

.vision-clean-tabs {
  grid-area: tabs;
  display: flex;
  gap: 10px;
  align-self: end;
  padding: 8px;
  border: 1px solid rgba(9, 48, 92, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 45px rgba(7, 24, 52, .055);
  backdrop-filter: blur(14px);
}

.vision-clean .vision-tab {
  width: auto;
  flex: 1;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent !important;
  color: #49617f;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  box-shadow: none;
  transition: .25s var(--ease);
}

.vision-clean .vision-tab:hover {
  transform: none;
  color: #07111f;
  background: rgba(7, 91, 202, .07) !important;
}

.vision-clean .vision-tab.active {
  background: #07111f !important;
  color: #fff;
  border: 0;
  box-shadow: 0 12px 28px rgba(7, 17, 31, .16);
}

.vision-clean .vision-clean-card {
  grid-area: card;
  min-height: 340px;
  padding: 46px 54px;
  border-radius: 34px;
}

.vision-clean-copy h2 {
  max-width: 680px;
  font-size: clamp(50px, 5.3vw, 86px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.vision-clean-copy p {
  max-width: 560px;
  font-size: 20px;
  line-height: 1.65;
}

.vision-clean .vision-panel h3 {
  margin-top: 22px;
  font-size: clamp(38px, 3.25vw, 58px);
  line-height: 1.06;
  letter-spacing: -.045em;
}

.vision-clean .vision-panel p {
  margin-top: 22px;
  font-size: 20px;
  line-height: 1.6;
}

@media(max-width:1180px) {
  .vision-clean-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "tabs" "card";
  }

  .vision-clean-tabs {
    display: flex;
    gap: 8px;
  }

  .vision-clean .vision-tab {
    min-height: 46px;
    font-size: 14px;
    padding: 0 12px;
  }
}

@media(max-width:720px) {
  .vision-clean-tabs {
    border-radius: 22px;
    flex-direction: column;
  }

  .vision-clean .vision-clean-card {
    padding: 34px 26px;
  }

  .vision-clean-copy h2 {
    font-size: 46px;
  }
}
/* === Omar final: nur Navigation, Vision-Feinschliff, Button-Farben und Wer-wir-sind-Ergänzung === */
:root{
  --brand-dark:#07111f;
  --brand-mid:#0a2548;
  --brand-blue:#075bca;
  --brand-cyan:#1097d8;
  --brand-soft:#edf5ff;
}

@media (min-width:1181px){
  .topbar{
    top:0 !important;
    left:0 !important;
    right:0 !important;
    padding:24px 6.5vw 0 !important;
    background:transparent !important;
    pointer-events:none !important;
  }
  .topbar.hidden{transform:none !important;}
  .nav-shell{
    pointer-events:auto !important;
    width:100% !important;
    height:58px !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:32px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }
  .nav-brand{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-width:188px !important;
    color:var(--brand-dark) !important;
    font-size:12px !important;
    font-weight:950 !important;
    line-height:.88 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
  }
  .nav-brand img{
    width:42px !important;
    height:42px !important;
    object-fit:contain !important;
    filter:drop-shadow(0 7px 14px rgba(7,17,31,.10)) !important;
  }
  .nav-links{
    justify-self:center !important;
    display:flex !important;
    align-items:center !important;
    gap:34px !important;
  }
  .nav-links a{
    position:relative !important;
    padding:14px 0 !important;
    color:#1b2d46 !important;
    font-size:13px !important;
    font-weight:850 !important;
    letter-spacing:.072em !important;
    text-transform:uppercase !important;
    text-shadow:0 1px 18px rgba(255,255,255,.42) !important;
  }
  .nav-links a::after{
    bottom:4px !important;
    height:2px !important;
    border-radius:99px !important;
    background:linear-gradient(90deg,var(--brand-blue),var(--brand-cyan)) !important;
  }
  .nav-links a:hover,
  .nav-links a.active{
    color:var(--brand-dark) !important;
  }
  .nav-action{
    height:44px !important;
    min-height:44px !important;
    padding:0 21px !important;
    border-radius:9px !important;
    background:linear-gradient(135deg,#07111f 0%,#0a2548 55%,#075bca 100%) !important;
    color:#fff !important;
    box-shadow:0 12px 28px rgba(7,17,31,.16) !important;
    font-size:13px !important;
    font-weight:900 !important;
    letter-spacing:.035em !important;
    text-transform:uppercase !important;
    transition:transform .24s var(--ease), box-shadow .24s var(--ease), filter .24s var(--ease) !important;
  }
  .nav-action:hover{
    transform:translateY(-2px) !important;
    filter:saturate(1.08) !important;
    box-shadow:0 17px 36px rgba(7,91,202,.22) !important;
  }
}

/* Vision: Schatten/Blur entfernen und Farbe seriöser machen */
.vision-clean::after{display:none !important;}
.vision-clean-card,
.vision-clean .vision-clean-card{
  box-shadow:none !important;
  border:1px solid rgba(7,39,78,.08) !important;
}
.vision-clean-tabs{
  box-shadow:none !important;
}
.vision-clean-copy h2 span{
  background:linear-gradient(180deg,#0b1d34 0%,#0a315f 55%,#075bca 100%) !important;
  -webkit-background-clip:text !important;
  color:transparent !important;
}
.vision-clean .vision-tab.active,
.service-filter.active{
  background:linear-gradient(135deg,#07111f 0%,#0a2548 58%,#075bca 100%) !important;
  color:#fff !important;
}
.vision-clean .vision-tab:hover,
.service-filter:hover{
  color:#07111f !important;
  background:rgba(7,91,202,.07) !important;
}
.btn.primary,
.flow-card.accent,
.cookie-accept,
.legal-tab.active{
  background:linear-gradient(135deg,#07111f 0%,#0a2548 52%,#075bca 100%) !important;
  box-shadow:0 18px 45px rgba(7,91,202,.18) !important;
}
.btn.primary:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 22px 52px rgba(7,91,202,.24) !important;
}
.kicker,
.price-card span,
.service-tile span,
.step-pro span,
.why-card b{
  color:#075bca !important;
}
.packages .kicker,
.system-section .kicker,
.price-card span{
  color:#28d9ff !important;
}

/* Wer-wir-sind Seite, passend zur Website, ohne Screenshots/Bilder */
.about-premium-section{
  overflow:hidden;
  background:linear-gradient(180deg,#f7fbff 0%,#eef6ff 100%);
  padding-top:110px;
  padding-bottom:125px;
}
.about-premium-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(20,65,112,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(20,65,112,.045) 1px,transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
}
.about-premium-card{
  position:relative;
  z-index:1;
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:70px;
  align-items:start;
  padding:58px 62px 64px;
  border-radius:32px;
  color:#fff;
  background:radial-gradient(circle at 86% 18%,rgba(7,91,202,.22),transparent 34rem),linear-gradient(135deg,#061225 0%,#08264b 100%);
  overflow:hidden;
}
.about-premium-card::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-165px;
  width:540px;
  height:360px;
  background:linear-gradient(135deg,rgba(16,151,216,.14),rgba(7,91,202,.05));
  transform:rotate(18deg);
  pointer-events:none;
}
.about-premium-card>*{position:relative;z-index:1;}
.about-premium-title h2{
  margin-top:18px;
  max-width:780px;
  font-size:clamp(44px,5.2vw,78px);
  line-height:1.05;
  letter-spacing:-.055em;
}
.about-premium-copy p{
  max-width:500px;
  color:#c3d9f7;
  font-size:22px;
  line-height:1.58;
}
.about-premium-copy strong{
  color:#fff;
  background:linear-gradient(90deg,#fff,#cfe9ff 50%,#6fdcff);
  -webkit-background-clip:text;
  color:transparent;
}

@media(max-width:1180px){
  .about-premium-card{grid-template-columns:1fr;gap:28px;padding:42px 34px;}
  .about-premium-copy p{font-size:19px;}
}
@media(max-width:720px){
  .about-premium-section{padding:82px 22px;}
  .about-premium-card{padding:34px 26px;border-radius:26px;}
  .about-premium-title h2{font-size:40px;}
  .about-premium-copy p{font-size:18px;}
}

/* === Seriöse Navigations- und Button-Überarbeitung === */
:root{
  --professional-black:#0b0f14;
  --professional-text:#111827;
  --professional-border:#e5e7eb;
  --professional-soft:#f8fafc;
}

.topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:900 !important;
  padding:0 !important;
  background:#fff !important;
  border-bottom:1px solid var(--professional-border) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.06) !important;
  pointer-events:auto !important;
  transition:transform .32s var(--ease) !important;
}
.topbar.hidden{transform:translateY(-110%) !important;}
.nav-shell{
  width:min(1440px,100%) !important;
  height:76px !important;
  margin:0 auto !important;
  padding:0 32px !important;
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:26px !important;
  background:#fff !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.nav-brand{color:var(--professional-black) !important;}
.nav-brand img{filter:none !important;}
.nav-links{display:flex !important;align-items:center !important;justify-content:center !important;gap:24px !important;}
.nav-links a,
.mobile-panel a{
  color:var(--professional-text) !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.045em !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
}
.nav-links a::after{display:none !important;}
.nav-links a:hover,
.nav-links a.active,
.mobile-panel a:hover{color:var(--professional-text) !important;background:transparent !important;}
.nav-action,
.btn.primary,
.btn.ghost,
.vision-clean .vision-tab,
.vision-clean .vision-tab.active,
.service-filter,
.service-filter.active,
.cookie-accept,
.legal-tab.active{
  background:#111827 !important;
  color:#fff !important;
  border:1px solid #111827 !important;
  box-shadow:none !important;
  filter:none !important;
}
.btn.ghost{background:#fff !important;color:#111827 !important;border-color:#d1d5db !important;}
.nav-action{
  height:44px !important;
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:6px !important;
  font-size:12px !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
}
.btn,.vision-clean .vision-tab,.service-filter{border-radius:6px !important;}
.nav-action:hover,
.btn:hover,
.vision-clean .vision-tab:hover,
.service-filter:hover,
.service-tile:hover,
.why-card:hover,
.step-pro:hover,
.price-card:hover{
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}
.menu-btn span{background:#111827 !important;}
.mobile-panel{background:#fff !important;border-top:1px solid var(--professional-border) !important;box-shadow:0 18px 40px rgba(15,23,42,.08) !important;}

.hero{padding-top:136px !important;}

/* Leistungen ohne verspielten Umschalter: sechs Boxen sauber untereinander */
.service-switch{display:none !important;}
.service-stage,
.service-stage.active{
  max-width:980px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
  margin:0 auto !important;
}
.service-stage + .service-stage{margin-top:16px !important;}
.service-tile,
.service-tile.highlight{
  min-height:auto !important;
  padding:30px 34px !important;
  display:grid !important;
  grid-template-columns:84px 1fr !important;
  column-gap:24px !important;
  align-items:start !important;
  background:#fff !important;
  color:var(--ink) !important;
  border:1px solid var(--professional-border) !important;
  box-shadow:none !important;
}
.service-tile span{grid-row:1 / span 3;color:#6b7280 !important;}
.service-tile h3{margin-top:0 !important;font-size:26px !important;}
.service-tile p,.service-tile.highlight p{color:#5f6f86 !important;}
.service-tile ul{margin-top:18px !important;}
.service-tile li{border-color:#e5e7eb !important;background:#f9fafb !important;color:#374151 !important;border-radius:6px !important;}

@media(max-width:1180px){
  .nav-links,.nav-action{display:none !important;}
  .menu-btn{display:flex !important;justify-self:end !important;}
  .nav-shell{height:70px !important;padding:0 20px !important;}
  .mobile-panel.open{display:grid !important;gap:0 !important;padding:12px 24px 18px !important;}
  .mobile-panel a{padding:13px 0 !important;border-bottom:1px solid #f1f5f9 !important;}
}
@media(max-width:720px){
  .hero{padding-top:118px !important;}
  .service-tile,.service-tile.highlight{grid-template-columns:1fr !important;gap:10px !important;padding:26px 24px !important;}
  .service-tile h3{font-size:24px !important;}
}


/* === Feinschliff: seriöse IT-Schrift, Service-Karten + Nav-Unterstrich === */
:root{
  --font:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
}
body,
button,
input,
textarea,
select{
  font-family:var(--font) !important;
}
h1,h2,h3,.nav-brand,.nav-links a,.nav-action,.btn,.service-tile h3,.price-card h3{
  font-family:var(--font) !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
}
.nav-links a,
.nav-action{
  letter-spacing:.02em !important;
  font-weight:600 !important;
}
.service-tile p,
.why-card p,.step-pro p,.price-card p,.hero p{
  font-weight:400 !important;
}

/* Unterstrich für Hover und aktive Sektion, sonst keine Hover-Spielerei */
.nav-links a{
  position:relative !important;
  padding:28px 0 !important;
}
.nav-links a::after{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:18px !important;
  height:2px !important;
  transform:scaleX(0) !important;
  transform-origin:left !important;
  background:#111827 !important;
  transition:transform .22s ease !important;
}
.nav-links a:hover::after,
.nav-links a.active::after{
  transform:scaleX(1) !important;
}

/* Service: Entwicklung und Service wieder als professionelle Karten mit Umschalter */
.service-switch{
  display:grid !important;
  max-width:560px !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin:0 auto 34px !important;
  padding:6px !important;
  border-radius:10px !important;
  background:#f3f4f6 !important;
  border:1px solid #e5e7eb !important;
  box-shadow:none !important;
}
.service-filter{
  background:transparent !important;
  color:#374151 !important;
  border:1px solid transparent !important;
  border-radius:8px !important;
  padding:13px 16px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}
.service-filter.active{
  background:#fff !important;
  color:#111827 !important;
  border-color:#d1d5db !important;
  box-shadow:0 8px 20px rgba(15,23,42,.06) !important;
}
.service-stage{
  max-width:1380px !important;
  margin:auto !important;
  display:none !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:18px !important;
}
.service-stage.active{
  display:grid !important;
}
.service-stage + .service-stage{margin-top:0 !important;}
.service-tile,
.service-tile.highlight{
  min-height:330px !important;
  padding:34px !important;
  display:block !important;
  background:#fff !important;
  color:#06101f !important;
  border:1px solid #d9e1ec !important;
  border-radius:22px !important;
  box-shadow:0 18px 55px rgba(8,25,55,.06) !important;
}
.service-tile.highlight{
  background:#071b33 !important;
  color:#fff !important;
  border-color:#17395f !important;
}
.service-tile span{
  display:block !important;
  color:#075bca !important;
  grid-row:auto !important;
  font-weight:700 !important;
}
.service-tile.highlight span{color:#6bb8ff !important;}
.service-tile h3{
  margin-top:46px !important;
  font-size:30px !important;
  line-height:1.15 !important;
}
.service-tile p{
  margin-top:16px !important;
  color:#5f6f86 !important;
  font-size:17px !important;
}
.service-tile.highlight p{color:#c7d7eb !important;}
.service-tile ul{
  margin-top:28px !important;
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
.service-tile li{
  border-color:#dbe3ee !important;
  background:#fff !important;
  color:#111827 !important;
  border-radius:999px !important;
  font-weight:600 !important;
}
.service-tile.highlight li{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.16) !important;
}

@media(max-width:1180px){
  .service-stage,.service-stage.active{grid-template-columns:1fr 1fr !important;}
}
@media(max-width:720px){
  .service-switch{grid-template-columns:1fr !important;max-width:100% !important;}
  .service-stage,.service-stage.active{grid-template-columns:1fr !important;}
  .service-tile,.service-tile.highlight{padding:28px 24px !important;min-height:auto !important;}
  .service-tile h3{margin-top:30px !important;font-size:25px !important;}
}

/* === V3: moderne IT-Schrift, ruhige Buttons, alle 6 Service-Boxen sichtbar === */
:root{
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  --btn-dark:#07111f;
  --btn-border:#d8e1ec;
}
body,button,input,textarea,select{font-family:var(--font) !important;}
h1,h2,h3,.nav-brand,.nav-links a,.nav-action,.btn,.service-filter,.vision-tab,.service-tile h3,.price-card h3{
  font-family:var(--font) !important;
}
h1,h2,h3{font-weight:800 !important;letter-spacing:-.045em !important;}
p{font-weight:400 !important;}
.nav-links a,.nav-action,.btn,.service-filter,.vision-tab{letter-spacing:0 !important;font-weight:700 !important;}

/* Buttons seriös, einheitlich, nicht verspielt */
.nav-action,
.btn.primary,
.cookie-accept,
.legal-tab.active{
  background:var(--btn-dark) !important;
  color:#fff !important;
  border:1px solid var(--btn-dark) !important;
  border-radius:10px !important;
  box-shadow:none !important;
  filter:none !important;
}
.btn.ghost,
.vision-clean .vision-tab,
.vision-clean .vision-tab.active,
.service-filter,
.service-filter.active{
  background:#fff !important;
  color:#07111f !important;
  border:1px solid var(--btn-border) !important;
  border-radius:10px !important;
  box-shadow:none !important;
  filter:none !important;
}
.nav-action:hover,
.btn:hover,
.vision-clean .vision-tab:hover,
.service-filter:hover{
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}
.nav-action{height:44px !important;min-height:44px !important;padding:0 18px !important;font-size:13px !important;text-transform:none !important;}
.btn{min-height:50px !important;padding:0 20px !important;border-radius:10px !important;}

/* Nav-Unterstrich bleibt aktiv bei Hover und aktueller Sektion */
.nav-links a{position:relative !important;padding:28px 0 !important;color:#111827 !important;}
.nav-links a::after{
  display:block !important;content:"" !important;position:absolute !important;left:0 !important;right:0 !important;bottom:18px !important;height:2px !important;
  background:#07111f !important;transform:scaleX(0) !important;transform-origin:left !important;transition:transform .2s ease !important;
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1) !important;}

/* Service: keine Umschalt-Buttons, alle sechs Karten im gleichen Karten-Design */
.service-switch{display:none !important;}
.service-stage,
.service-stage.active{
  max-width:1380px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:18px !important;
}
.service-stage + .service-stage{margin-top:18px !important;}
.service-tile,
.service-tile.highlight{
  min-height:330px !important;
  padding:34px !important;
  display:block !important;
  background:#fff !important;
  color:#06101f !important;
  border:1px solid #d9e1ec !important;
  border-radius:22px !important;
  box-shadow:0 18px 55px rgba(8,25,55,.06) !important;
  transition:none !important;
}
.service-tile.highlight{
  background:#071b33 !important;
  color:#fff !important;
  border-color:#17395f !important;
}
.service-tile span{display:block !important;color:#075bca !important;font:800 13px var(--mono) !important;letter-spacing:.18em !important;}
.service-tile.highlight span{color:#6bb8ff !important;}
.service-tile h3{margin-top:46px !important;font-size:30px !important;line-height:1.15 !important;font-weight:800 !important;}
.service-tile p{margin-top:16px !important;color:#5f6f86 !important;font-size:17px !important;line-height:1.6 !important;}
.service-tile.highlight p{color:#c7d7eb !important;}
.service-tile ul{margin-top:28px !important;display:flex !important;gap:8px !important;flex-wrap:wrap !important;}
.service-tile li{border:1px solid #dbe3ee !important;background:#fff !important;color:#111827 !important;border-radius:999px !important;font-size:12px !important;font-weight:700 !important;padding:8px 10px !important;}
.service-tile.highlight li{background:rgba(255,255,255,.08) !important;color:#fff !important;border-color:rgba(255,255,255,.16) !important;}
.service-tile:hover,.service-tile.highlight:hover{transform:none !important;box-shadow:0 18px 55px rgba(8,25,55,.06) !important;}

@media(max-width:1180px){.service-stage,.service-stage.active{grid-template-columns:1fr 1fr !important;}}
@media(max-width:720px){.service-stage,.service-stage.active{grid-template-columns:1fr !important;}.service-stage + .service-stage{margin-top:18px !important;}.service-tile,.service-tile.highlight{padding:28px 24px !important;min-height:auto !important;}.service-tile h3{margin-top:30px !important;font-size:25px !important;}}


/* === V4: Vision-Bereich ohne verspielte Auswahlbuttons === */
.vision-clean-tabs,
.vision-clean .vision-tab{
  display:none !important;
}
.vision-clean-controls{
  align-self:end;
  justify-self:end;
  width:min(520px,100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 14px 14px 22px;
  border:1px solid rgba(8,42,82,.14);
  background:rgba(255,255,255,.72);
  box-shadow:0 20px 55px rgba(8,25,55,.07);
  backdrop-filter:blur(16px);
  border-radius:18px;
}
.vision-step{
  display:grid;
  gap:2px;
}
.vision-step span{
  font-size:12px;
  font-weight:700;
  color:#075bca;
  letter-spacing:.06em;
}
.vision-step strong{
  font-size:16px;
  font-weight:800;
  color:#06101f;
}
.vision-arrows{
  display:flex;
  gap:8px;
}
.vision-arrow{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(8,42,82,.16);
  border-radius:999px;
  background:#06101f;
  color:#fff;
  font-size:30px;
  line-height:1;
  font-weight:400;
  transition:none !important;
}
.vision-arrow:focus-visible{
  outline:3px solid rgba(7,91,202,.22);
  outline-offset:3px;
}
.vision-clean-card{
  position:relative;
}
.vision-clean-card::after{
  content:"";
  position:absolute;
  right:34px;
  top:34px;
  width:34px;
  height:34px;
  border-top:2px solid rgba(7,91,202,.45);
  border-right:2px solid rgba(7,91,202,.45);
  transform:rotate(45deg);
  pointer-events:none;
}
@media(max-width:1180px){
  .vision-clean-controls{
    justify-self:start;
    margin-top:8px;
  }
}
@media(max-width:720px){
  .vision-clean-controls{
    width:100%;
    padding:12px 12px 12px 16px;
    border-radius:14px;
  }
  .vision-arrow{
    width:44px;
    height:44px;
    font-size:28px;
  }
  .vision-clean-card::after{
    display:none;
  }
}


/* === Über uns Section: dark premium agency block === */
.about-dark{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(16,151,216,.15), transparent 34rem),
    radial-gradient(circle at 12% 80%, rgba(7,91,202,.18), transparent 32rem),
    linear-gradient(135deg,#020713 0%,#071426 54%,#020915 100%);
  padding:140px 7vw;
}

.about-dark::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.32;
  background-image:
    linear-gradient(rgba(126,178,235,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,178,235,.07) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 58% 42%, black, transparent 78%);
}

.about-dark-orb{
  position:absolute;
  border-radius:999px;
  filter:blur(70px);
  pointer-events:none;
}

.about-dark-orb.orb-one{
  width:360px;
  height:360px;
  right:10%;
  top:12%;
  background:rgba(16,151,216,.14);
}

.about-dark-orb.orb-two{
  width:280px;
  height:280px;
  left:9%;
  bottom:12%;
  background:rgba(7,91,202,.16);
}

.about-dark-grid{
  position:relative;
  z-index:1;
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:1.05fr .9fr;
  gap:78px;
  align-items:center;
}

.about-kicker{
  display:inline-flex;
  color:#57c7ff;
  font:900 12px var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
}

.about-dark-copy h2{
  margin-top:18px;
  font-size:clamp(42px,5.4vw,82px);
  line-height:1.02;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.about-dark-copy p{
  margin-top:24px;
  max-width:760px;
  color:#bdd0e8;
  font-size:18px;
  line-height:1.82;
}

.about-dark-cards{
  display:grid;
  gap:18px;
}

.about-dark-cards article{
  position:relative;
  overflow:hidden;
  padding:30px;
  min-height:170px;
  border-radius:26px;
  border:1px solid rgba(91,156,220,.22);
  background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  backdrop-filter:blur(14px);
  box-shadow:0 22px 70px rgba(0,0,0,.18);
  transition:.28s var(--ease);
}

.about-dark-cards article::after{
  content:"";
  position:absolute;
  right:-44px;
  top:-48px;
  width:130px;
  height:130px;
  border-radius:32px;
  background:linear-gradient(135deg, rgba(16,151,216,.16), rgba(7,91,202,.06));
  transform:rotate(18deg);
}

.about-dark-cards article:hover{
  transform:translateY(-4px);
  border-color:rgba(16,151,216,.38);
  background:linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
}

.about-dark-cards span{
  position:relative;
  z-index:1;
  color:#57c7ff;
  font:900 12px var(--mono);
  letter-spacing:.18em;
}

.about-dark-cards h3{
  position:relative;
  z-index:1;
  margin-top:20px;
  font-size:30px;
  letter-spacing:-.04em;
}

.about-dark-cards p{
  position:relative;
  z-index:1;
  margin-top:10px;
  color:#9fb2cc;
  line-height:1.7;
}

.about-statement{
  position:relative;
  z-index:1;
  max-width:1400px;
  margin:92px auto 0;
  padding-top:42px;
  border-top:1px solid rgba(255,255,255,.10);
}

.about-statement p{
  max-width:980px;
  color:#dbeaff;
  font-size:clamp(24px,2.6vw,38px);
  line-height:1.35;
  letter-spacing:-.035em;
}

@media(max-width:1180px){
  .about-dark-grid{grid-template-columns:1fr;gap:46px;}
}

@media(max-width:720px){
  .about-dark{padding:92px 22px;}
  .about-dark-copy h2{font-size:36px;line-height:1.12;}
  .about-dark-copy p{font-size:16px;}
  .about-dark-cards article{padding:24px;min-height:auto;}
  .about-statement{margin-top:58px;}
}

.about-owner-bg {
  position: absolute;
  inset: 0;
  opacity: .38;
  background-image:
    linear-gradient(rgba(126, 178, 235, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 178, 235, .075) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(circle at 58% 45%, black, transparent 78%);
}

.about-owner-grid {
  position: relative;
  z-index: 1;
  max-width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: .78fr 1fr;
  gap: 76px;
  align-items: center;
}

.about-owner-media {
  position: relative;
}

.owner-frame {
  position: relative;
  min-height: 620px;
  border: 1px solid rgba(91, 156, 220, .26);
  border-radius: 34px;
  padding: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
  box-shadow: 0 38px 120px rgba(0,0,0,.38), 0 0 80px rgba(7,91,202,.16);
  overflow: hidden;
}

.owner-frame::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(160deg, rgba(7,91,202,.22), rgba(2,7,19,.25));
}

.owner-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 576px;
  object-fit: cover;
  border-radius: 26px;
  filter: saturate(.95) contrast(1.04);
}

.owner-badge {
  position: absolute;
  z-index: 2;
  left: 44px;
  bottom: 44px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(16,151,216,.38);
  background: rgba(2, 9, 20, .78);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.owner-badge span {
  display: block;
  color: #7fdcff;
  font: 900 11px var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.owner-badge strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  letter-spacing: .08em;
}

.about-owner-copy h2 {
  margin-top: 16px;
  font-size: clamp(40px, 5.2vw, 78px);
  line-height: 1.02;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.about-owner-copy p {
  margin-top: 22px;
  max-width: 790px;
  color: #bdd0e8;
  font-size: 18px;
  line-height: 1.82;
}

.about-owner-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 34px;
}

.about-owner-points article {
  min-height: 132px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(91, 156, 220, .22);
  background: rgba(255,255,255,.055);
}

.about-owner-points b {
  color: #57c7ff;
  font: 900 12px var(--mono);
  letter-spacing: .16em;
}

.about-owner-points span {
  display: block;
  margin-top: 18px;
  color: #e8f4ff;
  font-weight: 850;
  line-height: 1.35;
}

.signature-wrap {
  margin-top: 38px;
  display: inline-grid;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid rgba(91, 156, 220, .24);
}

.signature-img {
  width: 245px;
  max-width: 72vw;
  opacity: .96;
  filter: drop-shadow(0 0 20px rgba(16,151,216,.18));
}

.signature-wrap small {
  color: #8fa6c8;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media(max-width:1180px) {
  .about-owner-grid { grid-template-columns: 1fr; gap: 46px; }
  .owner-frame { min-height: 520px; }
  .owner-photo { min-height: 476px; }
}

@media(max-width:720px) {
  .about-owner-points { grid-template-columns: 1fr; }
  .owner-frame { min-height: 420px; padding: 14px; border-radius: 26px; }
  .owner-frame::before { inset: 14px; }
  .owner-photo { min-height: 392px; border-radius: 20px; }
  .owner-badge { left: 28px; bottom: 28px; }
  .about-owner-copy h2 { font-size: 36px; line-height: 1.12; }
  .about-owner-copy p { font-size: 16px; }
}


/* === About Us Redesign === */
.about-dark{
  position: relative;
  overflow: hidden;
  background:
  radial-gradient(circle at 20% 20%, rgba(16,151,216,.18), transparent 30rem),
  linear-gradient(135deg,#040b16,#071829);
  padding: 140px 7vw;
  color: white;
}

.about-bg-glow{
  position:absolute;
  right:-200px;
  top:-100px;
  width:500px;
  height:500px;
  border-radius:50%;
  background:rgba(16,151,216,.12);
  filter:blur(120px);
}

.about-modern-grid{
  position:relative;
  z-index:2;
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns: 1fr .9fr;
  gap:70px;
  align-items:center;
}

.about-kicker{
  color:#36c6f4;
  font-size:12px;
  letter-spacing:.22em;
  font-weight:800;
}

.about-modern-copy h2{
  margin-top:14px;
  font-size: clamp(42px,5vw,78px);
  line-height:1;
  letter-spacing:-.05em;
}

.about-modern-copy h2 span{
  color:#36c6f4;
}

.about-modern-copy p{
  margin-top:26px;
  max-width:650px;
  color:#aebfd7;
  font-size:18px;
  line-height:1.8;
}

.about-feature-list{
  margin-top:40px;
  display:grid;
  gap:18px;
}

.about-feature{
  padding:24px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  border-radius:22px;
}

.about-feature strong{
  display:block;
  font-size:18px;
  margin-bottom:8px;
}

.about-feature span{
  color:#9fb2cb;
}

.about-modern-card{
  padding:40px;
  border-radius:30px;
  background:
  linear-gradient(145deg,
  rgba(255,255,255,.08),
  rgba(255,255,255,.03));
  border:1px solid rgba(100,170,255,.18);
  backdrop-filter: blur(18px);
  box-shadow:
  0 30px 90px rgba(0,0,0,.28);
}

.about-card-top span{
  font-size:12px;
  letter-spacing:.2em;
  color:#36c6f4;
  font-weight:800;
}

.about-modern-card h3{
  margin-top:24px;
  font-size:38px;
  line-height:1.1;
  letter-spacing:-.04em;
}

.about-modern-card p{
  margin-top:18px;
  color:#b4c5db;
  line-height:1.8;
}

.about-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:40px;
}

.about-stats div{
  padding:20px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}

.about-stats strong{
  display:block;
  font-size:22px;
}

.about-stats span{
  color:#8ea5c3;
  font-size:14px;
}

@media(max-width:900px){

  .about-modern-grid{
    grid-template-columns:1fr;
  }

  .about-modern-card h3{
    font-size:30px;
  }

  .about-stats{
    grid-template-columns:1fr;
  }

}

/* === JAHJAH requested additions: top info bar, bigger logo, trust section, legal modal redesign === */
.pre-nav {
  pointer-events: auto;
  width: min(1600px, 100%);
  margin: 0 auto 12px;
  color: #dce9f8;
}

.pre-nav-inner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
  border: 1px solid rgba(126, 160, 200, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  color: #07111f;
  box-shadow: 0 18px 48px rgba(7, 17, 31, .12);
}

.pre-nav-left,
.pre-nav-right {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -.01em;
}

.pre-nav-left span,
.pre-nav-left a,
.pre-nav-right a {
  color: #07111f;
  opacity: .88;
}

.pre-nav-right a {
  padding-left: 18px;
  border-left: 1px solid rgba(8, 42, 82, .15);
}

.topbar {
  flex-direction: column;
  align-items: center;
}

.nav-brand {
  min-width: 270px;
}

.nav-brand img {
  width: 78px;
  height: 78px;
}

.nav-shell {
  height: 108px;
}

.hero {
  padding-top: 230px;
}

.trust-section {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 100%);
  color: var(--ink);
  padding-top: 95px;
  padding-bottom: 95px;
}

.trust-wrap {
  max-width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: .72fr 1fr;
  gap: 54px;
  align-items: stretch;
  padding: 34px;
  border: 1px solid rgba(8, 42, 82, .12);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(8, 25, 55, .08);
}

.trust-copy {
  padding: 14px 10px;
}

.trust-copy h2 {
  margin-top: 14px;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.trust-copy p {
  margin-top: 20px;
  max-width: 580px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
}

.trust-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.trust-points article {
  padding: 28px;
  border: 1px solid rgba(8, 42, 82, .12);
  border-radius: 24px;
  background: linear-gradient(180deg, #f9fbff, #eef5fc);
}

.trust-points strong {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #071428;
  color: #fff;
  font: 900 13px var(--mono);
}

.trust-points h3 {
  margin-top: 38px;
  font-size: 24px;
  letter-spacing: -.035em;
}

.trust-points p {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.65;
}

.footer button[data-modal] {
  width: 100%;
  max-width: 210px;
  margin: 8px 0;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(157, 176, 204, .18);
  background: rgba(255, 255, 255, .055);
  color: #eaf4ff;
  text-align: left;
  font-weight: 850;
  transition: .22s var(--ease);
}

.footer button[data-modal]:hover {
  background: rgba(255, 255, 255, .095);
  border-color: rgba(16, 151, 216, .32);
}

.modal {
  background: rgba(3, 8, 18, .58);
  backdrop-filter: blur(10px);
}

.modal-box {
  width: min(900px, 94vw);
  background: #fff !important;
  color: #07111f !important;
  border: 1px solid rgba(8, 42, 82, .14);
  border-radius: 26px;
  padding: 34px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .24);
}

.modal-close {
  width: 38px;
  height: 38px;
  right: 20px;
  top: 20px;
  padding: 0 !important;
  border-radius: 50%;
  background: #ff5f57 !important;
  border: 1px solid #e14841 !important;
  color: #fff !important;
  font-size: 26px;
  line-height: 36px;
  font-weight: 700;
}

.modal-tabs {
  gap: 12px;
  padding-right: 58px;
  border-bottom: 1px solid rgba(8, 42, 82, .12);
  padding-bottom: 16px;
}

.modal-tabs button,
.legal-tab {
  background: #f3f6fb !important;
  color: #06101f !important;
  border: 1px solid rgba(8, 42, 82, .12) !important;
  border-radius: 14px;
  padding: 14px 18px !important;
  font-weight: 900;
}

.legal-tab.active {
  background: #071428 !important;
  color: #fff !important;
  border-color: #071428 !important;
}

.legal-content h2 {
  color: #07111f;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.035em;
  margin-top: 12px;
}

.legal-content p {
  color: #4f5f75 !important;
  font-size: 17px;
  line-height: 1.75;
  margin-top: 16px;
}

.legal-content strong {
  color: #07111f;
}

@media(max-width:1180px) {
  .pre-nav-inner {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 18px;
  }

  .pre-nav-right a:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .nav-brand {
    min-width: auto;
  }

  .nav-brand img {
    width: 64px;
    height: 64px;
  }

  .nav-shell {
    height: 96px;
  }

  .hero {
    padding-top: 250px;
  }

  .trust-wrap {
    grid-template-columns: 1fr;
  }
}

@media(max-width:720px) {
  .topbar {
    top: 12px;
    padding: 0 12px;
  }

  .pre-nav {
    margin-bottom: 8px;
  }

  .pre-nav-left,
  .pre-nav-right {
    gap: 10px 14px;
    font-size: 12px;
  }

  .pre-nav-right a {
    padding-left: 0;
    border-left: 0;
  }

  .nav-shell {
    height: 84px;
    padding-left: 18px;
  }

  .nav-brand img {
    width: 54px;
    height: 54px;
  }

  .hero {
    padding-top: 250px;
  }

  .trust-section {
    padding: 70px 22px;
  }

  .trust-wrap {
    padding: 20px;
  }

  .trust-points {
    grid-template-columns: 1fr;
  }

  .modal-box {
    padding: 26px 20px;
  }

  .modal-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* === JAHJAH precision update: full-width rectangular nav + simple legal footer/modal === */
.topbar {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  display: block !important;
  pointer-events: auto !important;
}

.pre-nav,
.pre-nav-inner,
.nav-shell {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.pre-nav-inner {
  min-height: 42px !important;
  padding: 0 7vw !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(126, 160, 200, .15) !important;
  background: linear-gradient(90deg, rgba(4, 11, 23, .96), rgba(8, 20, 38, .94)) !important;
  color: #dbeaff !important;
  box-shadow: none !important;
}

.pre-nav-left span,
.pre-nav-left a,
.pre-nav-right a {
  color: #dbeaff !important;
  opacity: .92 !important;
}

.pre-nav-right a {
  border-left: 1px solid rgba(219, 234, 255, .18) !important;
}

.nav-shell {
  height: 112px !important;
  padding: 0 7vw !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(126, 160, 200, .18) !important;
  background: linear-gradient(90deg, rgba(7, 15, 28, .98), rgba(25, 35, 50, .97)) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .28) !important;
}

.nav-brand {
  min-width: 330px !important;
}

.nav-brand img {
  width: 88px !important;
  height: 88px !important;
}

.hero {
  padding-top: 235px !important;
}

.footer-legal a,
.footer a[data-modal] {
  display: block !important;
  margin: 10px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #9db0cc !important;
  font-weight: 400 !important;
  text-align: left !important;
  box-shadow: none !important;
  transition: color .18s ease !important;
}

.footer-legal a:hover,
.footer a[data-modal]:hover {
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
}

.modal {
  background: rgba(0, 0, 0, .54) !important;
  backdrop-filter: none !important;
}

.modal-box {
  width: min(840px, 94vw) !important;
  max-height: 84vh !important;
  overflow: auto !important;
  background: #ffffff !important;
  color: #07111f !important;
  border: 1px solid rgba(8, 42, 82, .12) !important;
  border-radius: 0 !important;
  padding: 34px 36px 38px !important;
  box-shadow: 0 18px 70px rgba(0, 0, 0, .22) !important;
}

.modal-close {
  width: 34px !important;
  height: 34px !important;
  right: 22px !important;
  top: 20px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(8, 42, 82, .14) !important;
  color: #e53935 !important;
  font-size: 25px !important;
  line-height: 30px !important;
  font-weight: 700 !important;
}

.modal-tabs {
  display: flex !important;
  gap: 0 !important;
  padding: 0 52px 0 0 !important;
  margin: 0 0 28px !important;
  border-bottom: 1px solid rgba(8, 42, 82, .14) !important;
}

.modal-tabs button,
.legal-tab {
  background: transparent !important;
  color: #59687c !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 24px 16px 0 !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

.legal-tab.active {
  background: transparent !important;
  color: #06101f !important;
  border: 0 !important;
  box-shadow: inset 0 -2px 0 #06101f !important;
}

.legal-content h2 {
  margin: 0 0 18px !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
  color: #07111f !important;
}

.legal-content p {
  color: #4f5f75 !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  margin-top: 14px !important;
}

@media(max-width:1180px) {
  .pre-nav-inner {
    padding: 12px 24px !important;
  }

  .nav-shell {
    height: 96px !important;
    padding: 0 24px !important;
  }

  .nav-brand img {
    width: 66px !important;
    height: 66px !important;
  }

  .nav-brand {
    min-width: auto !important;
  }

  .hero {
    padding-top: 250px !important;
  }
}

@media(max-width:720px) {
  .pre-nav-inner {
    padding: 10px 18px !important;
  }

  .nav-shell {
    height: 82px !important;
    padding: 0 18px !important;
  }

  .nav-brand img {
    width: 52px !important;
    height: 52px !important;
  }

  .hero {
    padding-top: 245px !important;
  }

  .modal-box {
    padding: 28px 20px 32px !important;
  }

  .modal-tabs {
    display: flex !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
}

/* === FINAL OVERRIDE: white navigation bars, black text === */
.topbar {
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: none !important;
}

.pre-nav,
.pre-nav-inner,
.nav-shell {
  background: #ffffff !important;
  color: #111111 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.pre-nav-inner {
  border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}

.nav-shell {
  border-bottom: 1px solid rgba(0, 0, 0, .10) !important;
}

.pre-nav-left span,
.pre-nav-left a,
.pre-nav-right a,
.nav-links a,
.nav-brand,
.mobile-panel a {
  color: #111111 !important;
  opacity: 1 !important;
}

.nav-links a:hover,
.nav-links a.active,
.pre-nav-left a:hover,
.pre-nav-right a:hover {
  color: #000000 !important;
}

.nav-links a::after {
  background: #111111 !important;
}

.pre-nav-right a {
  border-left: 1px solid rgba(0, 0, 0, .12) !important;
}

.header-cta {
  background: #111111 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.header-cta:hover {
  background: #000000 !important;
  color: #ffffff !important;
}

.menu-btn span {
  background: #111111 !important;
}

.mobile-panel,
.mobile-panel.open {
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, .08) !important;
}


/* === Social Media Icons im oberen Pre-Nav === */
.pre-nav-right.social-top {
  gap: 14px;
  flex-wrap: nowrap;
}

.pre-nav-right.social-top a {
  width: 28px;
  height: 28px;
  padding-left: 0;
  border-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #07111f;
  opacity: .82;
  font-size: 14px;
  transition: .25s ease;
}

.pre-nav-right.social-top a:hover {
  color: #0b77cf;
  opacity: 1;
  background: rgba(7, 91, 202, .08);
  transform: translateY(-2px);
}

@media(max-width:1180px) {
  .pre-nav-right.social-top {
    flex-direction: row;
    align-items: center;
  }
}


/* === Eigene Unterseiten: Impressum / Datenschutz / Cookies === */
.legal-page-main{
  min-height:100vh;
  padding:180px 7vw 90px;
  color:#fff;
  background: radial-gradient(circle at 72% 18%, rgba(7,91,202,.25), transparent 28rem), linear-gradient(135deg,#06111f 0%,#010611 55%,#06182d 100%);
}
.legal-page-wrap{max-width:1180px;margin:auto;position:relative;z-index:3;}
.legal-page-kicker{font:900 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#57c7ff;}
.legal-page-title{font-size:clamp(44px,6vw,82px);line-height:1.02;letter-spacing:-.055em;margin:16px 0 22px;}
.legal-page-lead{max-width:760px;color:#bfd0e7;font-size:18px;line-height:1.75;}
.legal-page-card{margin-top:38px;padding:42px;border:1px solid rgba(91,156,220,.22);border-radius:var(--radius);background:rgba(7,20,40,.78);backdrop-filter:blur(18px);box-shadow:var(--shadowBlue);}
.legal-page-card h2{font-size:28px;margin:28px 0 12px;color:#fff;letter-spacing:-.03em;}
.legal-page-card h2:first-child{margin-top:0;}
.legal-page-card p,.legal-page-card li{color:#c3d2e8;line-height:1.8;margin-top:10px;}
.legal-page-card ul{padding-left:20px;margin-top:10px;}
.legal-page-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
.legal-page-actions .btn{min-height:48px;}
.nav-links a.current{color:#fff;}
.nav-links a.current::after{transform:scaleX(1);}
@media(max-width:720px){.legal-page-main{padding:145px 22px 70px}.legal-page-card{padding:26px}.legal-page-title{font-size:42px}}

/* === Finaler Kundenwunsch: eckige Elemente + seriöse Rechtseiten + ruhiger Über-uns-Bereich ===
   Inhalt, Navigation und Footer bleiben unverändert. */

/* Abgerundete Boxen und Buttons eckig machen */
.btn,
.header-cta,
.nav-action,
button,
input,
textarea,
select,
.service-tile,
.service-tile li,
.price-card,
.price-card li,
.why-card,
.step-pro,
.contact-grid,
.form,
.cookie-card,
.cookie-card button,
.check-row,
.modal-box,
.modal button,
.vision-tab,
.vision-panel,
.vision-clean-card,
.vision-clean-tabs,
.service-filter,
.service-switch,
.hero-metrics div,
.node,
.slash-card,
.slash-layer,
.system-board,
.flow-card,
.startup-card,
.code-window,
.board-top,
.owner-frame,
.owner-photo,
.owner-badge,
.about-owner-points article,
.about-premium-card,
.about-dark-cards article,
.about-dark-cards article::after,
.legal-page-card,
.rail-logo,
.mobile-panel,
.nav-shell {
  border-radius: 0 !important;
}

/* Pill-Elemente in Boxen ebenfalls eckig */
.service-tile li,
.price-card li,
.cookie-badge,
.kicker,
.eyebrow {
  border-radius: 0 !important;
}

/* Rechtliche Unterseiten: seriös, hell, sachlich */
body:has(.legal-page-main) {
  background: #ffffff !important;
  color: #111827 !important;
}

body:has(.legal-page-main) .noise,
body:has(.legal-page-main) .glow-follow,
.legal-page-main .grid-bg {
  display: none !important;
}

.legal-page-main {
  min-height: 100vh !important;
  padding: 170px 7vw 90px !important;
  background: #ffffff !important;
  color: #111827 !important;
}

.legal-page-wrap {
  max-width: 1040px !important;
  margin: 0 auto !important;
}

.legal-page-kicker {
  color: #374151 !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
}

.legal-page-title {
  color: #111827 !important;
  font-size: clamp(38px, 5vw, 64px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
  margin: 14px 0 16px !important;
}

.legal-page-lead {
  max-width: 780px !important;
  color: #4b5563 !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}

.legal-page-card {
  margin-top: 36px !important;
  padding: 44px !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .06) !important;
  backdrop-filter: none !important;
}

.legal-page-card h2 {
  color: #111827 !important;
  font-size: 24px !important;
  line-height: 1.28 !important;
  margin: 34px 0 12px !important;
  letter-spacing: -.02em !important;
}

.legal-page-card h2:first-child {
  margin-top: 0 !important;
}

.legal-page-card p,
.legal-page-card li {
  color: #374151 !important;
  line-height: 1.8 !important;
  font-size: 16px !important;
}

.legal-page-card a {
  color: #0f3f7a !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.legal-page-actions .btn {
  background: #111827 !important;
  color: #ffffff !important;
  border: 1px solid #111827 !important;
  box-shadow: none !important;
}

body:has(.legal-page-main) .nav-links a.current {
  color: #111827 !important;
}

body:has(.legal-page-main) .nav-links a.current::after {
  display: none !important;
}

/* Über-uns-Bereich: professioneller, ruhiger, ohne verspielte Effekte */
#about-us.white-section {
  background: #ffffff !important;
  color: #111827 !important;
  overflow: hidden !important;
}

#about-us.white-section::before,
#about-us.white-section::after {
  display: none !important;
}

#about-us .about-premium-card {
  max-width: 1380px !important;
  display: grid !important;
  grid-template-columns: .95fr 1.05fr !important;
  gap: 58px !important;
  align-items: start !important;
  padding: 56px !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .06) !important;
  overflow: visible !important;
}

#about-us .about-premium-card::after {
  display: none !important;
}

#about-us .about-premium-title h2 {
  color: #111827 !important;
  font-size: clamp(36px, 4.7vw, 66px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.045em !important;
  margin: 0 !important;
}

#about-us .about-premium-title h2 span {
  color: #111827 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
}

#about-us .about-premium-copy p {
  max-width: 720px !important;
  color: #374151 !important;
  font-size: 18px !important;
  line-height: 1.82 !important;
}

#about-us .hero-metrics {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  max-width: 520px !important;
  margin-top: 34px !important;
}

#about-us .hero-metrics div {
  padding: 20px 22px !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#about-us .hero-metrics strong {
  display: block !important;
  color: #111827 !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
}

#about-us .hero-metrics small {
  margin-top: 5px !important;
  color: #6b7280 !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
}

@media(max-width:1180px) {
  #about-us .about-premium-card {
    grid-template-columns: 1fr !important;
    padding: 42px 34px !important;
  }
}

@media(max-width:720px) {
  .legal-page-main {
    padding: 135px 22px 70px !important;
  }
  .legal-page-card,
  #about-us .about-premium-card {
    padding: 28px 22px !important;
  }
  #about-us .about-premium-title h2 {
    font-size: 36px !important;
  }
}

/* === Finaler Wunsch-Patch: Service-Piktogramme, runder Code-Tab, seriöse eckige Buttons ohne Effekte === */
.service-icon{
  width:58px !important;
  height:58px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 0 24px 0 !important;
  border:1px solid rgba(7,91,202,.22) !important;
  border-radius:14px !important;
  background:linear-gradient(135deg, rgba(7,91,202,.10), rgba(16,151,216,.08)) !important;
  color:#075bca !important;
  font-size:25px !important;
  box-shadow:none !important;
}
.service-tile.highlight .service-icon{
  color:#6bb8ff !important;
  border-color:rgba(107,184,255,.28) !important;
  background:rgba(255,255,255,.055) !important;
}
.service-tile h3{margin-top:0 !important;}

.code-window,
.service-code-card{
  border-radius:24px !important;
  overflow:hidden !important;
}
.code-window .code-top,
.service-code-card .code-top{
  border-radius:24px 24px 0 0 !important;
}

.btn,
.header-cta,
.nav-action,
.cookie-card button,
.modal button,
.legal-tab,
.service-filter,
.vision-arrow,
.vision-clean .vision-tab,
.legal-page-actions .btn,
.cookie-actions button{
  border-radius:0 !important;
  box-shadow:none !important;
  transition:none !important;
  transform:none !important;
  filter:none !important;
}
.btn:hover,
.header-cta:hover,
.nav-action:hover,
.cookie-card button:hover,
.modal button:hover,
.legal-tab:hover,
.service-filter:hover,
.vision-arrow:hover,
.vision-clean .vision-tab:hover,
.legal-page-actions .btn:hover,
.cookie-actions button:hover{
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}
.btn.primary,
.header-cta,
.nav-action,
.cookie-accept,
.legal-tab.active,
.legal-page-actions .btn.primary{
  background:#07111f !important;
  color:#fff !important;
  border:1px solid #07111f !important;
}
.btn.ghost,
.legal-page-actions .btn.ghost{
  background:#fff !important;
  color:#07111f !important;
  border:1px solid #d8e1ec !important;
}
.legal-page-actions{
  gap:12px !important;
}


/* === Exakter Service-Symbol- und Kontaktbutton-Patch === */
.service-icon{
  width:70px !important;
  height:92px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  position:relative !important;
  margin:0 0 14px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#075bca !important;
  font-size:56px !important;
  line-height:1 !important;
  box-shadow:none !important;
}
.service-icon::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  bottom:8px !important;
  width:68px !important;
  height:4px !important;
  background:#075bca !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.service-icon i{display:block !important;line-height:1 !important;filter:none !important;text-shadow:none !important;}
.service-tile.highlight .service-icon{color:#075bca !important;background:transparent !important;border:0 !important;}
.service-tile.highlight .service-icon::after{background:#075bca !important;}

#contactForm .contact-submit,
#contactForm .contact-submit:hover,
#contactForm .contact-submit:focus,
#contactForm .contact-submit:active{
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
  background:#07111f !important;
  border:1px solid #07111f !important;
  color:#ffffff !important;
}

/* === FINAL FIX: Alle Anfrage-/Kontakt-/Rechtseiten-Buttons komplett eckig und ohne Effekte === */
a.btn,
.btn,
.btn.primary,
.btn.ghost,
.header-cta,
.nav-action,
#contactForm .contact-submit,
.contact-submit,
.startup-card .btn,
.startup-section .btn,
.hero-actions .btn,
.legal-page-actions .btn,
.cookie-actions button,
.cookie-card button,
.modal button,
.legal-tab,
.service-filter,
.vision-tab,
.vision-arrow,
button[type="submit"]{
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  transition:none !important;
  filter:none !important;
  text-shadow:none !important;
}

a.btn:hover,
.btn:hover,
.btn.primary:hover,
.btn.ghost:hover,
.header-cta:hover,
.nav-action:hover,
#contactForm .contact-submit:hover,
.contact-submit:hover,
.startup-card .btn:hover,
.startup-section .btn:hover,
.hero-actions .btn:hover,
.legal-page-actions .btn:hover,
.cookie-actions button:hover,
.cookie-card button:hover,
.modal button:hover,
.legal-tab:hover,
.service-filter:hover,
.vision-tab:hover,
.vision-arrow:hover,
button[type="submit"]:hover{
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  transition:none !important;
  filter:none !important;
  text-shadow:none !important;
}

.btn.primary,
#contactForm .contact-submit,
.contact-submit,
.startup-card .btn.primary,
.startup-section .btn.primary{
  background:#07111f !important;
  color:#fff !important;
  border:1px solid #07111f !important;
}

/* Service-Symbole exakt passend in Blau */
.service-tile .service-icon{
  color:#075bca !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:none !important;
  text-shadow:none !important;
}
.service-tile .service-icon i.fa-laptop-code,
.service-tile .service-icon i.fa-headset,
.service-tile .service-icon i.fa-bullhorn{
  color:#075bca !important;
}
.service-tile .service-icon::after{
  background:#075bca !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* === MOBILE NAV FIX: kompakt, übersichtlich, Desktop unverändert === */
.mobile-social-links {
  display: none;
}

@media(max-width:720px) {
  .topbar {
    top: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  /* Mobile: obere Infoleiste entfernen, Inhalte liegen im Hamburger-Menü */
  .pre-nav {
    display: none !important;
  }

  .nav-shell {
    width: 100% !important;
    height: 68px !important;
    min-height: 68px !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 12px !important;
    padding: 0 14px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
  }

  .nav-brand {
    min-width: 0 !important;
    max-width: 190px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .nav-brand img {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
  }

  .header-cta,
  .nav-links,
  .nav-action {
    display: none !important;
  }

  .menu-btn {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    justify-self: end !important;
    align-items: center !important;
    padding: 0 !important;
    flex: 0 0 42px !important;
  }

  .menu-btn span {
    width: 22px !important;
  }

  .mobile-panel.open {
    display: grid !important;
    gap: 0 !important;
    padding: 8px 18px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 18px 34px rgba(15,23,42,.10) !important;
  }

  .mobile-panel > a {
    padding: 11px 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
  }

  .mobile-panel > a:last-of-type {
    margin-top: 10px !important;
    padding: 13px 14px !important;
    background: #07111f !important;
    color: #ffffff !important;
    text-align: center !important;
    border: 1px solid #07111f !important;
  }

  .mobile-social-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }

  .mobile-social-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border: 1px solid #e5eaf0 !important;
    background: #f8fafc !important;
    color: #07111f !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .hero {
    padding-top: 105px !important;
  }

  .legal-page-main {
    padding-top: 95px !important;
  }
}