:root {
  --bg: #f5f5f7;
  --bg-strong: #ececf0;
  --surface: #ffffff;
  --surface-soft: #fbfbfd;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --accent: #0071e3;
  --accent-strong: #005bb5;
  --accent-soft: #e8f3ff;
  --success: #16784b;
  --warning: #8b4c10;
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 38px;
  --shadow-xs: 0 8px 22px rgba(17, 17, 26, 0.06);
  --shadow-sm: 0 18px 42px rgba(17, 17, 26, 0.09);
  --shadow-md: 0 28px 62px rgba(17, 17, 26, 0.12);
  --shadow-lg: 0 42px 92px rgba(17, 17, 26, 0.14);
  --container: 1240px;
  --header-height: 84px;
  --transition: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", "SF Pro Text", "Segoe UI", sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 650px at 12% -10%, #ffffff 5%, transparent 52%),
    radial-gradient(1000px 600px at 115% 20%, rgba(0, 113, 227, 0.1) 8%, transparent 58%), var(--bg);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transition: opacity 420ms ease;
}

body.is-ready {
  opacity: 1;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(62px);
  animation: float-orb 18s ease-in-out infinite alternate;
}

body::before {
  top: -140px;
  left: -120px;
  width: min(42vw, 520px);
  height: min(42vw, 520px);
  background: rgba(0, 113, 227, 0.16);
}

body::after {
  right: -160px;
  top: 22%;
  width: min(34vw, 430px);
  height: min(34vw, 430px);
  background: rgba(88, 86, 214, 0.12);
  animation-delay: 1.6s;
}

@keyframes float-orb {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(0, 18px, 0) scale(1.08);
  }
}

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

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

.skip-link {
  position: absolute;
  left: -999px;
  top: -999px;
  z-index: 9999;
  background: #0f1114;
  color: #fff;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.container {
  width: min(var(--container), calc(100% - 3rem));
  margin: 0 auto;
}

.section {
  padding: clamp(4rem, 8vw, 7.2rem) 0;
  transform: translateY(var(--section-shift, 0px)) scale(var(--section-scale, 1));
  transition: transform 200ms linear;
  transform-origin: center top;
}

.section-tight {
  padding: clamp(2.4rem, 5vw, 4.2rem) 0;
  transform: translateY(var(--section-shift, 0px)) scale(var(--section-scale, 1));
  transition: transform 200ms linear;
  transform-origin: center top;
}

main > .section:not(.hero) > .container,
main > .section-tight > .container {
  position: relative;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86));
  border: 1px solid rgba(29, 29, 31, 0.1);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.3rem, 2.4vw, 2.4rem);
}

main > .section:nth-of-type(4n):not(.hero) > .container {
  background: linear-gradient(145deg, #0f1114 0%, #1a1f28 55%, #1f2937 100%);
  color: #f5f7ff;
  border-color: rgba(255, 255, 255, 0.14);
}

main > .section:nth-of-type(4n):not(.hero) .section-subtitle,
main > .section:nth-of-type(4n):not(.hero) .card p,
main > .section:nth-of-type(4n):not(.hero) .muted,
main > .section:nth-of-type(4n):not(.hero) .step p,
main > .section:nth-of-type(4n):not(.hero) .project-card p {
  color: rgba(245, 247, 255, 0.78);
}

main > .section:nth-of-type(4n):not(.hero) .card,
main > .section:nth-of-type(4n):not(.hero) .surface-card,
main > .section:nth-of-type(4n):not(.hero) .step,
main > .section:nth-of-type(4n):not(.hero) .project-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 255, 255, 0.15);
  color: #f5f7ff;
}

main > .section:nth-of-type(4n):not(.hero) .kicker {
  background: rgba(255, 255, 255, 0.08);
  color: #92c7ff;
  border-color: rgba(146, 199, 255, 0.36);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 113, 227, 0.1);
  color: var(--accent);
  border: 1px solid rgba(0, 113, 227, 0.2);
  border-radius: 999px;
  padding: 0.34rem 0.88rem;
  font-size: 0.75rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
}

.kicker::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 999px;
  background: currentColor;
}

.section-title {
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.section-subtitle {
  margin: 1rem 0 0;
  color: var(--muted);
  max-width: 70ch;
  font-size: clamp(1rem, 0.98rem + 0.32vw, 1.12rem);
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  transition: background var(--transition), backdrop-filter var(--transition), border-color var(--transition),
    box-shadow var(--transition);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(29, 29, 31, 0.08);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 34px rgba(17, 17, 26, 0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 700;
}

.brand-mark {
  display: none;
}

.brand-subline {
  display: block;
  margin-top: 0.03rem;
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3rem;
  padding: 0.48rem 0.86rem;
  border-radius: 999px;
  color: #3e3e43;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color var(--transition), background var(--transition), transform var(--transition);
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active {
  color: #0f1114;
  background: rgba(0, 113, 227, 0.13);
}

.nav-lang-slot {
  margin-left: 0.65rem;
  display: inline-flex;
  align-items: center;
}

.header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
}

.lang-switcher {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: transparent;
  gap: 0.08rem;
}

.lang-btn {
  border: 0;
  background: transparent;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  font-size: 0.94rem;
  cursor: pointer;
  opacity: 0.58;
  transition: opacity var(--transition), transform var(--transition);
}

.lang-btn.active {
  opacity: 1;
}

.lang-btn:hover,
.lang-btn:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.tool-btn {
  border: 0;
  background: transparent;
  color: #1d1d1f;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border-radius: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  opacity: 0.86;
}

.tool-btn:hover,
.tool-btn:focus-visible {
  transform: translateY(-1px);
  opacity: 1;
}

.tool-icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-toggle {
  display: none;
  width: 1.7rem;
  height: 1.5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
}

.nav-toggle span {
  display: block;
  width: 1.24rem;
  height: 2px;
  margin: 2.5px 0;
  border-radius: 999px;
  background: #1d1d1f;
  transition: transform 260ms cubic-bezier(0.32, 0.9, 0.25, 1), opacity 260ms ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(4.6px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-4.6px) rotate(-45deg);
}

body.menu-open,
body.modal-open {
  overflow: hidden;
}

main {
  padding-top: calc(var(--header-height) + 1.15rem);
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  right: -150px;
  top: -120px;
  width: min(44vw, 620px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(0, 113, 227, 0.2), transparent 62%);
  filter: blur(4px);
  z-index: -1;
  animation: hero-glow 13s ease-in-out infinite alternate;
}

@keyframes hero-glow {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(8px, 24px, 0) scale(1.08);
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.4vw, 2rem);
  align-items: start;
}

.hero-grid > * {
  max-width: 980px;
  width: 100%;
  margin-inline: auto;
}

.hero-grid > div:first-child {
  text-align: center;
}

.hero-grid > div:first-child p {
  margin-inline: auto;
}

.hero-grid > div:first-child .hero-actions {
  justify-content: center;
}

.hero-grid > div:first-child .hero-note {
  text-align: center;
}

.hero h1 {
  margin: 1rem 0 1.15rem;
  font-size: clamp(2.4rem, 2.1rem + 2.8vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.hero p {
  margin: 0;
  color: var(--muted);
  max-width: 64ch;
  font-size: clamp(1rem, 0.96rem + 0.4vw, 1.18rem);
}

.hero-actions {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.btn {
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  min-height: 2.85rem;
  padding: 0.76rem 1.25rem;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transform: translateY(0);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition),
    color var(--transition), border-color var(--transition);
}

.btn-primary {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #0071e3, #0093ff);
  box-shadow: 0 14px 34px rgba(0, 113, 227, 0.28);
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.28) 52%, transparent 82%);
  transform: translateX(-120%);
  transition: transform 520ms ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(0, 113, 227, 0.34);
}

.btn-primary:hover::after,
.btn-primary:focus-visible::after {
  transform: translateX(120%);
}

.btn-secondary {
  color: #1d1d1f;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(29, 29, 31, 0.16);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 113, 227, 0.28);
}

.hero-note {
  margin-top: 1.2rem;
  color: #134f96;
  font-weight: 600;
}

.surface-card,
.card,
.price-card,
.project-card,
.step {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9));
  border: 1px solid rgba(29, 29, 31, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--tz, 0px));
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  transform-style: preserve-3d;
  will-change: transform;
}

.surface-card {
  padding: 1.42rem;
}

.card {
  padding: 1.3rem 1.25rem 1.45rem;
}

.card:hover,
.surface-card:hover,
.price-card:hover,
.project-card:hover,
.step:hover {
  --tz: -4px;
  box-shadow: var(--shadow-sm);
  border-color: rgba(0, 113, 227, 0.24);
}

.metric-list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.78rem;
}

.metric-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  border-bottom: 1px solid rgba(29, 29, 31, 0.1);
  padding-bottom: 0.72rem;
}

.metric-list strong {
  font-size: 1.3rem;
  font-weight: 700;
}

.metric-list span {
  color: var(--muted);
  font-size: 0.9rem;
  text-align: right;
}

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

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}

.card h3 {
  margin: 0 0 0.54rem;
  font-size: 1.18rem;
  line-height: 1.2;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.icon-chip {
  width: 2.4rem;
  aspect-ratio: 1 / 1;
  border-radius: 0.84rem;
  display: inline-grid;
  place-items: center;
  margin-bottom: 0.85rem;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border-radius: 999px;
  padding: 0.38rem 0.74rem;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(29, 29, 31, 0.15);
  font-size: 0.83rem;
  font-weight: 600;
}

.pill::before {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  background: var(--accent);
}

.list-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.62rem;
}

.list-check li {
  position: relative;
  padding-left: 1.45rem;
  color: var(--muted);
}

.list-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.01rem;
  color: var(--success);
  font-size: 0.83rem;
  font-weight: 700;
}

.band {
  border-radius: var(--radius-xl);
  padding: clamp(1.35rem, 2.6vw, 2rem);
  background: linear-gradient(140deg, #0f1114 0%, #1f2937 52%, #0071e3 100%);
  color: #f8fafc;
  box-shadow: var(--shadow-md);
}

.band h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.45rem, 1.1rem + 1vw, 2.2rem);
  line-height: 1.15;
}

.band p {
  margin: 0;
  color: rgba(248, 250, 252, 0.9);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.step {
  padding: 1.18rem;
}

.step::before {
  content: attr(data-step);
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  background: linear-gradient(145deg, #0f1114, #0071e3);
}

.step:nth-child(1)::before {
  content: "01";
}
.step:nth-child(2)::before {
  content: "02";
}
.step:nth-child(3)::before {
  content: "03";
}
.step:nth-child(4)::before {
  content: "04";
}
.step:nth-child(5)::before {
  content: "05";
}
.step:nth-child(6)::before {
  content: "06";
}

.step h4 {
  margin: 0 0 0.35rem;
  font-size: 1.06rem;
}

.step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.price-card {
  padding: 1.45rem;
}

.price-card.featured {
  background: linear-gradient(180deg, #ffffff 0%, #f3f9ff 100%);
  border-color: rgba(0, 113, 227, 0.28);
}

.price-label {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
  background: rgba(0, 113, 227, 0.1);
  border: 1px solid rgba(0, 113, 227, 0.2);
  color: var(--accent);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

.price-value {
  margin: 0.82rem 0 0.24rem;
  font-size: clamp(2rem, 1.7rem + 1.2vw, 2.9rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.price-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.price-footer {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.project-card {
  padding: 0.92rem;
  display: grid;
  gap: 0.88rem;
}

.project-preview {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  border-radius: 14px;
  background: linear-gradient(145deg, #0f1114 0%, #1f2937 52%, #0071e3 100%);
}

.project-preview::before,
.project-preview::after {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.project-preview::before {
  width: 6rem;
  aspect-ratio: 1 / 1;
  top: -1rem;
  right: -0.9rem;
  background: rgba(255, 255, 255, 0.22);
}

.project-preview::after {
  width: 8.3rem;
  aspect-ratio: 1 / 1;
  left: -2rem;
  bottom: -2rem;
  background: rgba(0, 113, 227, 0.43);
}

.project-tag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  border-radius: 999px;
  padding: 0.25rem 0.58rem;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(15, 17, 20, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.project-domain {
  position: absolute;
  bottom: 0.7rem;
  left: 0.7rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 600;
}

.project-card h3 {
  margin: 0;
  font-size: 1.1rem;
}

.project-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.project-link {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
}

.project-link:hover {
  text-decoration: underline;
}

.timeline {
  border-left: 2px solid rgba(0, 113, 227, 0.26);
  padding-left: 1.1rem;
  display: grid;
  gap: 1.1rem;
}

.timeline-item h4 {
  margin: 0;
  font-size: 1.02rem;
}

.timeline-item p {
  margin: 0.28rem 0 0;
  color: var(--muted);
}

.faq-list {
  display: grid;
  gap: 0.88rem;
}

.faq-item {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(29, 29, 31, 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.faq-question {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  padding: 1rem 1.05rem;
}

.faq-question::after {
  content: "+";
  color: var(--accent);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform var(--transition);
}

.faq-item.open .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms ease;
}

.faq-answer p {
  margin: 0;
  color: var(--muted);
  padding: 0 1.05rem 1rem;
}

.contact-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.contact-form {
  display: grid;
  gap: 0.76rem;
}

.field {
  display: grid;
  gap: 0.32rem;
}

.field label {
  font-size: 0.88rem;
  font-weight: 600;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid rgba(29, 29, 31, 0.18);
  border-radius: 12px;
  padding: 0.74rem 0.8rem;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-color: rgba(0, 113, 227, 0.58);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.14);
  background: #fff;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.legal-note {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(139, 76, 16, 0.3);
  background: rgba(139, 76, 16, 0.1);
  color: #6f3f12;
  font-size: 0.9rem;
}

.cta-panel {
  background: linear-gradient(138deg, #0f1114 0%, #1f2937 52%, #0071e3 100%);
  color: #f8fafc;
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-lg);
}

.cta-panel h2 {
  margin: 0;
  font-size: clamp(1.8rem, 1.35rem + 1.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.cta-panel p {
  margin: 0.92rem 0 0;
  color: rgba(248, 250, 252, 0.9);
}

.cta-panel .btn-secondary {
  background: rgba(255, 255, 255, 0.9);
}

.site-footer {
  margin-top: 4.2rem;
  background: #0f1114;
  color: #d8d8df;
  padding: 2.9rem 0 1.8rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 1.5rem;
}

.footer-title {
  margin: 0 0 0.42rem;
  color: #fff;
  font-size: 1.05rem;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.44rem;
}

.footer-list a {
  color: #d8d8df;
}

.footer-list a:hover {
  color: #fff;
}

.footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.72rem;
  color: rgba(216, 216, 223, 0.86);
  font-size: 0.86rem;
}

.muted {
  color: var(--muted);
}

.align-start {
  align-items: start;
}

.highlight {
  color: var(--accent);
}

.center {
  text-align: center;
}

.max-70 {
  max-width: 70ch;
}

.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity 620ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

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

.add-to-cart {
  margin-top: 1rem;
}

.site-search {
  position: fixed;
  inset: 0;
  z-index: 130;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.site-search.open {
  opacity: 1;
  pointer-events: auto;
}

.search-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
}

.search-panel {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.985);
  display: grid;
  grid-template-rows: auto 1fr;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.23, 0.86, 0.22, 1), opacity 320ms ease;
}

.site-search.open .search-panel {
  transform: translateY(0);
  opacity: 1;
}

.search-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  padding: calc(var(--header-height) + 0.6rem) clamp(1rem, 4vw, 2.4rem) 1rem;
  border-bottom: 1px solid rgba(29, 29, 31, 0.12);
}

.search-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(29, 29, 31, 0.18);
  border-radius: 0;
  padding: 0.85rem 0.1rem;
  font: inherit;
  font-size: clamp(1.06rem, 0.95rem + 0.65vw, 1.34rem);
  background: transparent;
}

.search-input:focus {
  outline: 0;
  border-color: rgba(0, 113, 227, 0.76);
}

.search-close {
  border: 0;
  background: transparent;
  color: #1d1d1f;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.2rem;
  cursor: pointer;
  opacity: 0.82;
  transition: opacity var(--transition), transform var(--transition);
}

.search-close:hover,
.search-close:focus-visible {
  opacity: 1;
  transform: scale(1.04);
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 1rem clamp(1rem, 4vw, 2.4rem) 1.6rem;
  display: grid;
  align-content: start;
  gap: 0.42rem;
  overflow: auto;
}

.search-results a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-radius: 14px;
  padding: 0.76rem 0.86rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(29, 29, 31, 0.12);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.search-results a:hover {
  border-color: rgba(0, 113, 227, 0.35);
  background: rgba(0, 113, 227, 0.09);
  transform: translateY(-1px);
}

.search-results span {
  color: var(--muted);
  font-size: 0.85rem;
}

.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 128;
  background: rgba(4, 4, 6, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 129;
  width: min(420px, 100vw);
  height: 100dvh;
  background: #ffffff;
  border-left: 1px solid rgba(29, 29, 31, 0.12);
  box-shadow: -22px 0 54px rgba(0, 0, 0, 0.16);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.2, 0.85, 0.2, 1);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.cart-drawer.open {
  transform: translateX(0);
}

.cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(29, 29, 31, 0.12);
}

.cart-head h3 {
  margin: 0;
  font-size: 1.08rem;
}

.cart-close {
  border: 0;
  background: transparent;
  color: #1d1d1f;
  font-size: 1.45rem;
  line-height: 1;
  padding: 0.2rem;
  cursor: pointer;
  opacity: 0.85;
}

.cart-close:hover,
.cart-close:focus-visible {
  opacity: 1;
}

.cart-items {
  list-style: none;
  margin: 0;
  padding: 1rem;
  display: grid;
  gap: 0.62rem;
  align-content: start;
  overflow: auto;
}

.cart-items li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  border: 1px solid rgba(29, 29, 31, 0.1);
  border-radius: 12px;
  padding: 0.62rem 0.7rem;
  background: #fff;
}

.cart-foot {
  border-top: 1px solid rgba(29, 29, 31, 0.12);
  padding: 1rem;
  display: grid;
  gap: 0.9rem;
}

.cart-total {
  margin: 0;
  font-weight: 700;
}

.cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.footer-lang {
  margin-left: auto;
}

.form-success {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(22, 120, 75, 0.3);
  background: rgba(22, 120, 75, 0.11);
  color: #0f5f3a;
  font-weight: 600;
}

body.cursor-enabled,
body.cursor-enabled * {
  cursor: none !important;
}

.cursor-core {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 2000;
  transform: translate(-100px, -100px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.4px solid rgba(0, 113, 227, 0.58);
  background: rgba(0, 113, 227, 0.1);
  transition: width 180ms ease, height 180ms ease, background 180ms ease, border-color 180ms ease,
    transform 60ms linear;
}

.cursor-core.is-active {
  width: 52px;
  height: 52px;
  background: rgba(0, 113, 227, 0.16);
  border-color: rgba(0, 113, 227, 0.88);
}

main > .section:nth-of-type(even):not(.hero) {
  position: relative;
}

main > .section:nth-of-type(even):not(.hero)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.18));
  pointer-events: none;
  z-index: -1;
}

/* Keep Botpress widget above sticky layout layers. */
[id*="bp-web-widget"],
[class*="bp-widget"],
iframe[src*="botpress.cloud"] {
  z-index: 2147483000 !important;
}

@media (max-width: 1100px) {
  :root {
    --header-height: 78px;
  }

  .hero-grid,
  .grid-3,
  .project-grid,
  .footer-grid,
  .steps,
  .contact-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .container {
    width: min(var(--container), calc(100% - 2rem));
  }

  .nav-toggle {
    display: grid;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    padding-top: 5.1rem;
    transform: translateY(-18px);
    opacity: 0;
    pointer-events: none;
    transition: transform 320ms cubic-bezier(0.25, 0.85, 0.25, 1), opacity 320ms ease;
    background: rgba(255, 255, 255, 0.985);
    backdrop-filter: blur(14px);
  }

  .site-nav.is-open {
    transform: translateY(0px);
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: 0.2rem 1rem 1.2rem;
    gap: 0.2rem;
  }

  .site-nav a {
    width: 100%;
    justify-content: flex-start;
    border-radius: 10px;
    min-height: 2.85rem;
    color: #111114;
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 300ms ease, transform 300ms ease, background var(--transition), color var(--transition);
    transition-delay: calc(var(--item-index, 0) * 45ms);
  }

  .site-nav.is-open a {
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a.active {
    color: #111114;
    background: rgba(0, 113, 227, 0.1);
  }

  .nav-lang-slot {
    margin-left: 0;
    padding-top: 0.55rem;
  }

  .header-actions {
    gap: 0.62rem;
    margin-left: auto;
  }

  .tool-btn {
    width: 1.58rem;
    height: 1.58rem;
  }

  .tool-icon {
    width: 1.28rem;
    height: 1.28rem;
  }

  .brand-subline {
    display: none;
  }

  .search-top {
    padding-top: 1rem;
  }

  body.menu-open .site-header {
    background: transparent;
    backdrop-filter: none;
    border-color: transparent;
    box-shadow: none;
  }

  body.menu-open .site-header .brand,
  body.menu-open .site-header .header-actions .tool-search,
  body.menu-open .site-header .header-actions .tool-cart {
    opacity: 0;
    pointer-events: none;
  }

  body.menu-open .site-header .nav-toggle {
    position: fixed;
    top: 1.1rem;
    right: 1rem;
    z-index: 140;
  }

  .cart-actions {
    grid-template-columns: 1fr;
  }

  .hero-grid,
  .grid-2,
  .grid-3,
  .project-grid,
  .pricing-grid,
  .steps,
  .contact-wrap,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 2.04rem + 3.6vw, 3.2rem);
  }

  main {
    padding-top: calc(var(--header-height) + 1rem);
  }
}

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

  body {
    opacity: 1;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .section,
  .section-tight {
    transform: none;
  }
}
/* --- 2026-04 interaction and navigation overrides --- */
.site-nav a {
  border-radius: 0;
  background: transparent;
  color: #111114;
  font-size: 0.94rem;
  font-weight: 500;
  padding: 0.45rem 0.45rem;
  min-height: 2.2rem;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active {
  background: transparent !important;
  color: #111114 !important;
  opacity: 0.62;
}

.header-actions {
  gap: 0.72rem;
}

.tool-btn,
.nav-toggle {
  width: 1.95rem;
  height: 1.95rem;
  min-width: 1.95rem;
  min-height: 1.95rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111114;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.96;
  transition: opacity var(--transition), transform var(--transition);
}

.tool-btn:hover,
.tool-btn:focus-visible,
.nav-toggle:hover,
.nav-toggle:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.tool-icon {
  width: 1.12rem;
  height: 1.12rem;
  stroke-width: 1.9;
}

.nav-toggle {
  position: relative;
}

.nav-toggle span {
  position: absolute;
  width: 1.08rem;
  height: 1.8px;
  border-radius: 999px;
  background: #111114;
  transform-origin: center;
  transition: transform 320ms cubic-bezier(0.22, 0.9, 0.2, 1), opacity 220ms ease;
}

.nav-toggle span:nth-child(1) {
  transform: translateY(-3.8px);
}

.nav-toggle span:nth-child(2) {
  transform: translateY(3.8px);
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  transform: translateY(0) rotate(-45deg);
}

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.lang-btn {
  border: 0;
  background: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
  padding: 0;
  color: #111114;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  opacity: 0.46;
  transition: opacity var(--transition), transform var(--transition);
}

.lang-btn.active,
.lang-btn:hover,
.lang-btn:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.ui-veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}

body.overlay-open .ui-veil {
  opacity: 1;
  pointer-events: auto;
}

.overlay-panel {
  position: fixed;
  inset: 0;
  z-index: 125;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.overlay-panel.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.overlay-shell {
  height: 100dvh;
  padding-top: calc(var(--header-height) + 0.5rem);
  display: flex;
  flex-direction: column;
  transform: translateY(-22px);
  opacity: 0;
  transition: transform 420ms cubic-bezier(0.22, 0.85, 0.2, 1), opacity 320ms ease;
}

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

.overlay-top {
  display: flex;
  justify-content: flex-end;
  padding: 0 1rem 0.6rem;
}

.overlay-content {
  width: min(1080px, calc(100% - 2rem));
  margin: 0 auto;
  flex: 1;
  overflow: auto;
  padding-bottom: 1.4rem;
}

.line-close {
  position: relative;
  width: 1.95rem;
  height: 1.95rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111114;
  cursor: pointer;
  opacity: 0.95;
  transition: opacity var(--transition), transform var(--transition);
}

.line-close:hover,
.line-close:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.line-close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.08rem;
  height: 1.8px;
  border-radius: 999px;
  background: #111114;
  transform-origin: center;
}

.line-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.line-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.search-form {
  width: min(920px, 100%);
  margin: 0 auto;
  padding-top: clamp(1rem, 4vw, 2rem);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(17, 17, 20, 0.2);
  padding: 0.74rem 0;
}

.search-field-icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: #111114;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-input {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: clamp(1.02rem, 0.95rem + 0.55vw, 1.28rem);
  color: #111114;
  padding: 0;
}

.search-input:focus {
  outline: none;
}

.search-note {
  margin: 0.78rem 0 0;
  color: #5a5a60;
  font-size: 0.9rem;
}

.cart-wrap {
  width: min(920px, 100%);
  margin: 0 auto;
  height: calc(100dvh - var(--header-height) - 1.7rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-top: 1px solid rgba(17, 17, 20, 0.14);
}

.cart-head {
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(17, 17, 20, 0.12);
}

.cart-head h3 {
  margin: 0;
  font-size: 1.02rem;
}

.cart-items {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  overflow: auto;
}

.cart-items li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid rgba(17, 17, 20, 0.12);
  padding: 0.55rem 0;
}

.cart-foot {
  padding: 0.92rem 0;
  border-top: 1px solid rgba(17, 17, 20, 0.12);
  display: grid;
  gap: 0.75rem;
}

.cart-total {
  margin: 0;
  font-weight: 700;
}

.cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.site-header {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(17, 17, 20, 0.08);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.site-header > * {
  position: relative;
  z-index: 1;
}

body.panel-menu-opening .site-header::after,
body.panel-menu-open .site-header::after {
  opacity: 1;
}

body.panel-menu-opening .site-header .brand,
body.panel-menu-open .site-header .brand,
body.panel-menu-opening .site-header .tool-search,
body.panel-menu-open .site-header .tool-search,
body.panel-menu-opening .site-header .tool-cart,
body.panel-menu-open .site-header .tool-cart {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 860px) {
  .site-header {
    min-height: var(--header-height);
  }

  .header-inner {
    min-height: var(--header-height);
  }

  .brand {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .brand-subline {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    padding-top: calc(var(--header-height) + 0.9rem);
    transition: opacity 280ms ease;
  }

  .site-nav.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav ul {
    min-height: calc(100dvh - var(--header-height) - 1.6rem);
    width: min(760px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    transform: translateY(-24px);
    opacity: 0;
    transition: transform 420ms cubic-bezier(0.22, 0.88, 0.24, 1), opacity 320ms ease;
  }

  .site-nav.is-open ul {
    transform: translateY(0);
    opacity: 1;
  }

  .site-nav a {
    width: 100%;
    display: block;
    color: #111114;
    font-size: 1.34rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.48rem 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 280ms ease, transform 320ms cubic-bezier(0.22, 0.88, 0.24, 1);
    transition-delay: calc(var(--item-index, 0) * 36ms);
  }

  .site-nav.is-open a {
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a.active {
    opacity: 1;
    background: transparent !important;
    color: #111114 !important;
  }

  .nav-lang-slot {
    margin-top: auto;
    padding-top: 1.7rem;
    display: flex;
    justify-content: center;
  }

  .nav-lang-slot .lang-switcher {
    gap: 1.4rem;
  }

  .nav-lang-slot .lang-btn {
    font-size: 0.88rem;
  }

  .footer-lang {
    margin-left: 0;
  }

  .header-actions {
    margin-left: auto;
    gap: 0.72rem;
  }

  .overlay-shell {
    padding-top: calc(var(--header-height) + 0.45rem);
  }

  .overlay-content {
    width: calc(100% - 2rem);
  }

  .cart-wrap {
    height: calc(100dvh - var(--header-height) - 1.4rem);
  }

  .cart-actions {
    grid-template-columns: 1fr;
  }
}
/* --- 2026-04-02 refinement overrides --- */
a,
button,
input,
textarea,
select,
.card,
.surface-card,
.price-card,
.project-card,
.step,
.site-nav a,
.footer-list a,
.tool-btn,
.nav-toggle {
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 240ms ease,
    opacity 220ms ease,
    transform 240ms cubic-bezier(0.22, 0.85, 0.2, 1);
}

.site-header {
  z-index: 130;
}

.site-header::after {
  display: none !important;
}

.site-header .brand,
.site-header .tool-search,
.site-header .tool-cart {
  transition: opacity 180ms ease, transform 180ms ease;
}

.site-header .nav-toggle {
  position: relative;
  z-index: 6;
}

.ui-veil {
  z-index: 92;
  pointer-events: none;
}

body.overlay-open .ui-veil {
  pointer-events: auto;
}

body.panel-menu-opening .ui-veil,
body.panel-menu-open .ui-veil,
body.panel-menu-closing .ui-veil {
  opacity: 0.985;
}

body.panel-menu-opening .site-header .brand,
body.panel-menu-open .site-header .brand,
body.panel-menu-opening .site-header .tool-search,
body.panel-menu-open .site-header .tool-search,
body.panel-menu-opening .site-header .tool-cart,
body.panel-menu-open .site-header .tool-cart {
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
}

body.panel-menu-opening .site-header .nav-toggle,
body.panel-menu-open .site-header .nav-toggle,
body.panel-menu-closing .site-header .nav-toggle {
  opacity: 1 !important;
  pointer-events: auto;
}

body.panel-search-open .site-header,
body.panel-search-opening .site-header,
body.panel-cart-open .site-header,
body.panel-cart-opening .site-header {
  opacity: 0;
  pointer-events: none;
}

.overlay-panel {
  z-index: 122;
}

.overlay-shell {
  transform: translateY(-16px);
  transition: transform 360ms cubic-bezier(0.22, 0.88, 0.24, 1), opacity 280ms ease;
}

.cursor-core {
  width: 13px !important;
  height: 13px !important;
  border: 1.2px solid rgba(17, 17, 20, 0.74) !important;
  background: rgba(17, 17, 20, 0.03) !important;
  transition: width 170ms ease, height 170ms ease, background 170ms ease, border-color 170ms ease, opacity 170ms ease !important;
  will-change: transform;
}

.cursor-core.is-active {
  width: 20px !important;
  height: 20px !important;
  border-color: rgba(17, 17, 20, 0.95) !important;
  background: rgba(17, 17, 20, 0.08) !important;
}

#botpress-anfrage-prep {
  display: grid;
  gap: 0.95rem;
}

#botpress-anfrage-prep .prep-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

#botpress-anfrage-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

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

  .header-actions {
    display: none !important;
  }

  .header-inner {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .site-nav {
    z-index: 121;
  }

  .site-nav ul {
    transition: transform 360ms cubic-bezier(0.22, 0.88, 0.24, 1), opacity 280ms ease;
  }

  .site-nav a {
    transition-delay: calc(var(--item-index, 0) * 26ms);
  }
}
/* --- 2026-04-02 final polish --- */
.brand-subline {
  display: none !important;
}

.cursor-core {
  width: 12px !important;
  height: 12px !important;
  border: 1.25px solid rgba(17, 17, 20, 0.78) !important;
  background: rgba(17, 17, 20, 0.04) !important;
}

.cursor-core.is-active {
  width: 28px !important;
  height: 28px !important;
  border-color: rgba(17, 17, 20, 0.96) !important;
  background: rgba(17, 17, 20, 0.1) !important;
}

.cursor-core.is-light {
  border-color: rgba(255, 255, 255, 0.94) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 0 0 1px rgba(17, 17, 20, 0.08);
}

.cursor-core.is-active.is-light {
  background: rgba(255, 255, 255, 0.24) !important;
}

@media (min-width: 861px) {
  .site-nav {
    display: block !important;
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding-top: 0 !important;
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  .site-nav ul {
    min-height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.2rem !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .site-nav a {
    display: inline-flex !important;
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0ms !important;
    font-size: 0.94rem !important;
    font-weight: 500 !important;
  }

  .header-actions {
    display: inline-flex !important;
  }

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

@media (max-width: 860px) {
  body.panel-menu-opening .site-header .nav-toggle,
  body.panel-menu-open .site-header .nav-toggle,
  body.panel-menu-closing .site-header .nav-toggle {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 0.88rem);
    right: 1rem;
    z-index: 180;
  }

  .site-nav {
    z-index: 150;
  }

  .site-nav ul,
  .site-nav a {
    position: relative;
    z-index: 155;
  }

}
/* --- 2026-04-03 Liquid Intro Hero --- */
body[data-page="start"] {
  background: #050a14;
}

body[data-page="start"]::before,
body[data-page="start"]::after {
  opacity: 0;
  animation: none;
}

body[data-page="start"] main {
  padding-top: 0;
  background: linear-gradient(180deg, #050a14 0%, #071129 42%, #f5f5f7 90%);
}

.hero-intro {
  position: relative;
  --intro-progress: 0;
  min-height: 260vh;
  height: 260vh;
  margin: 0;
  z-index: 2;
}

.hero-intro-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: #050a14;
}

.hero-spline-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #050a14;
}

.hero-intro-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(5, 10, 20, calc(0.08 + (var(--intro-progress, 0) * 0.26))) 0%,
    rgba(5, 10, 20, 0.05) 35%,
    rgba(5, 10, 20, calc(0.26 + (var(--intro-progress, 0) * 0.2))) 100%
  );
}

.hero-spline {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(calc(1.03 + (var(--intro-progress, 0) * 0.06)));
  transition: transform 420ms cubic-bezier(0.24, 0.84, 0.24, 1);
}

.hero-spline::part(logo) {
  display: none !important;
}

.hero-spline-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(237, 246, 255, 0.82);
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.45rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 2;
  background:
    radial-gradient(circle at 18% 16%, rgba(132, 198, 255, 0.18), transparent 40%),
    radial-gradient(circle at 82% 14%, rgba(126, 116, 255, 0.22), transparent 34%),
    radial-gradient(circle at 48% 84%, rgba(87, 149, 255, 0.16), transparent 48%),
    linear-gradient(180deg, #081325 0%, #050a14 100%);
}

.hero-spline-wrap.is-loaded .hero-spline-fallback {
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.hero-intro-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(
      calc(-50% + (var(--intro-progress, 0) * 14px)),
      calc(-50% + (var(--intro-progress, 0) * -42px)),
      0
    )
    scale(calc(1 - (var(--intro-progress, 0) * 0.07)));
  opacity: calc(1 - (var(--intro-progress, 0) * 0.36));
  z-index: 5;
  width: min(var(--container), calc(100% - 3rem));
  max-width: 1040px;
  border-radius: 34px;
  padding: clamp(1.2rem, 2.5vw, 2.15rem);
  background: linear-gradient(138deg, rgba(236, 247, 255, 0.34), rgba(195, 222, 255, 0.11));
  border: 1px solid rgba(228, 243, 255, 0.56);
  box-shadow:
    0 44px 110px rgba(1, 11, 38, 0.52),
    0 14px 32px rgba(2, 16, 56, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  transition: transform 460ms cubic-bezier(0.21, 0.88, 0.27, 1), opacity 460ms ease;
}

.hero-intro-overlay::before {
  content: "";
  position: absolute;
  inset: 1px 1px 2px;
  border-radius: 32px;
  pointer-events: none;
  background: linear-gradient(
    126deg,
    rgba(255, 255, 255, 0.34),
    rgba(255, 255, 255, 0.07) 42%,
    rgba(178, 224, 255, 0.24) 64%,
    rgba(255, 255, 255, 0.15)
  );
  opacity: 0.92;
}

.hero-intro-overlay > * {
  position: relative;
  z-index: 1;
}

.hero-intro-overlay .kicker {
  background: rgba(239, 249, 255, 0.42);
  border-color: rgba(236, 247, 255, 0.66);
  color: #124f9f;
}

.hero-intro-overlay h1 {
  margin: 0.95rem 0 1rem;
  font-size: clamp(2.55rem, 2rem + 3.1vw, 5.7rem);
  line-height: 0.94;
  letter-spacing: -0.048em;
  color: #f7fbff;
  text-shadow:
    0 18px 46px rgba(0, 18, 76, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.24);
}

.hero-intro-overlay p {
  margin: 0;
  max-width: 68ch;
  color: rgba(242, 248, 255, 0.95);
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem);
  text-wrap: balance;
}

.hero-intro-overlay .hero-actions {
  margin-top: 1.52rem;
}

.hero-intro-overlay .btn-primary {
  background: linear-gradient(145deg, #207bff, #58bfff);
  box-shadow:
    0 18px 40px rgba(17, 118, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.hero-intro-overlay .btn-secondary {
  border-color: rgba(236, 247, 255, 0.56);
  color: #f7fbff;
  background: rgba(230, 245, 255, 0.12);
}

.hero-intro-overlay .btn-secondary:hover,
.hero-intro-overlay .btn-secondary:focus-visible {
  background: rgba(231, 245, 255, 0.25);
}

.hero-intro-overlay .hero-note {
  margin-top: 1rem;
  color: rgba(216, 236, 255, 0.98);
  font-weight: 600;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .hero-intro-overlay {
    background: linear-gradient(140deg, rgba(28, 72, 145, 0.62), rgba(18, 42, 96, 0.45));
    border-color: rgba(214, 238, 255, 0.35);
  }
}

@media (max-width: 1100px) {
  .hero-intro {
    min-height: 236vh;
    height: 236vh;
  }
}

@media (max-width: 860px) {
  .hero-intro {
    min-height: 212vh;
    height: 212vh;
  }

  .hero-intro-overlay {
    width: calc(100% - 1.4rem);
    border-radius: 24px;
    padding: 1.06rem;
    top: 52%;
  }

  .hero-intro-overlay::before {
    border-radius: 22px;
  }

  .hero-intro-overlay h1 {
    font-size: clamp(2.08rem, 1.92rem + 3vw, 3.28rem);
  }

  .hero-intro-overlay p {
    font-size: 1rem;
  }
}

/* --- 2026-04-03 usability hotfixes --- */
.site-header .nav-lang-slot {
  display: none !important;
}

@media (min-width: 861px) {
  .site-header .header-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    column-gap: 1rem !important;
  }

  .site-header .brand {
    justify-self: start;
  }

  .site-header .site-nav {
    justify-self: center !important;
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    padding-top: 0 !important;
    transform: none !important;
  }

  .site-header .site-nav ul {
    justify-content: center !important;
    margin: 0 !important;
  }

  .site-header .header-actions {
    justify-self: end !important;
    margin-left: 0 !important;
    display: inline-flex !important;
  }

  .site-header .nav-toggle {
    display: none !important;
  }
}

.hero-intro-overlay {
  width: min(960px, calc(100% - 4rem)) !important;
  max-width: 960px !important;
  margin: 0 !important;
}

.hero-intro-overlay h1,
.hero-intro-overlay p {
  max-width: 100%;
}

@media (max-width: 860px) {
  .hero-intro-overlay {
    width: calc(100% - 1.6rem) !important;
    max-width: none !important;
  }
}

@media (max-width: 860px) {
  body.panel-menu-opening,
  body.panel-menu-open,
  body.panel-menu-closing {
    overflow: hidden !important;
    touch-action: none !important;
  }

  .ui-veil {
    z-index: 860 !important;
    background: #fff !important;
  }

  body.panel-menu-opening .ui-veil,
  body.panel-menu-open .ui-veil,
  body.panel-menu-closing .ui-veil {
    opacity: 1 !important;
  }

  .site-header {
    z-index: 420 !important;
    background: #fff !important;
    border-color: rgba(17, 17, 20, 0.1) !important;
    box-shadow: none !important;
  }

  .site-header .header-actions {
    margin-left: auto !important;
    gap: 0.72rem !important;
    padding-right: 2.4rem !important;
  }

  .site-header .brand,
  .site-header .tool-search,
  .site-header .tool-cart {
    transition: opacity 180ms ease !important;
  }

  body.panel-menu-opening .site-header .brand,
  body.panel-menu-open .site-header .brand,
  body.panel-menu-closing .site-header .brand,
  body.panel-menu-opening .site-header .tool-search,
  body.panel-menu-open .site-header .tool-search,
  body.panel-menu-closing .site-header .tool-search,
  body.panel-menu-opening .site-header .tool-cart,
  body.panel-menu-open .site-header .tool-cart,
  body.panel-menu-closing .site-header .tool-cart {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .site-header .nav-toggle {
    display: inline-flex !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 0.88rem) !important;
    right: 1rem !important;
    z-index: 999 !important;
    transform: none !important;
  }

  .site-header .nav-toggle:hover,
  .site-header .nav-toggle:focus-visible {
    transform: none !important;
  }

  .site-header .nav-toggle span {
    opacity: 1 !important;
    width: 1.08rem !important;
    height: 1.8px !important;
    background: #111114 !important;
  }

  .site-header .nav-toggle span:nth-child(1) {
    transform: translateY(-3.8px) !important;
  }

  .site-header .nav-toggle span:nth-child(2) {
    transform: translateY(3.8px) !important;
  }

  .site-header .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(0) rotate(45deg) !important;
  }

  .site-header .nav-toggle.is-open span:nth-child(2) {
    transform: translateY(0) rotate(-45deg) !important;
    opacity: 1 !important;
  }

  .site-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 880 !important;
    width: 100% !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding-top: 0 !important;
    background: #fff !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .site-nav.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .overlay-panel {
    z-index: 900 !important;
  }

  .site-nav ul {
    width: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 5.3rem) 1.45rem 2.1rem !important;
    transform: translateY(-22px) !important;
    opacity: 0 !important;
  }

  .site-nav.is-open ul {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  .site-nav a {
    width: 100% !important;
    display: block !important;
    color: #111114 !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    padding: 0.56rem 0 !important;
    opacity: 0 !important;
    transform: translateY(12px) !important;
    background: transparent !important;
  }

  .site-nav.is-open a {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

#botpress-anfrage-prep {
  display: block !important;
}

.botpress-strip-section {
  margin: 0;
  padding: 0;
}

.botpress-strip-inner {
  width: 100%;
  padding: clamp(1.5rem, 3.4vw, 2.3rem) clamp(1.2rem, 5vw, 4rem);
  background: linear-gradient(110deg, #0f1728 0%, #1b3f78 45%, #2a7fd2 100%);
  color: #f6f9ff;
  display: grid;
  gap: 0.8rem;
}

.botpress-strip-kicker {
  margin: 0;
  color: rgba(214, 236, 255, 0.95);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.botpress-strip-inner h2 {
  margin: 0;
  font-size: clamp(1.32rem, 1.15rem + 1vw, 2rem);
  line-height: 1.15;
}

.botpress-strip-inner > p {
  margin: 0;
  color: rgba(236, 245, 255, 0.92);
  max-width: 78ch;
}

.botpress-strip-actions {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.72rem;
}

.botpress-strip-actions .btn {
  box-shadow: none;
}

.botpress-strip-actions #botpress-anfrage-status {
  margin: 0;
  color: rgba(223, 239, 255, 0.92);
  font-size: 0.9rem;
}

/* --- 2026-04-03 final reset + mobile menu hard-fix --- */
body[data-page="start"] {
  background: radial-gradient(1200px 650px at 12% -10%, #ffffff 5%, transparent 52%),
    radial-gradient(1000px 600px at 115% 20%, rgba(0, 113, 227, 0.1) 8%, transparent 58%), var(--bg) !important;
}

body[data-page="start"]::before,
body[data-page="start"]::after {
  opacity: 1 !important;
  animation: float-orb 18s ease-in-out infinite alternate !important;
}

body[data-page="start"] main {
  padding-top: calc(var(--header-height) + 1.15rem) !important;
  background: transparent !important;
}

.hero-intro,
.hero-intro-sticky,
.hero-spline-wrap,
.hero-spline,
.hero-intro-overlay {
  display: none !important;
}

.social-strip {
  display: grid;
  gap: 0.9rem;
}

.social-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
  margin-top: 0.2rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  padding: 0.66rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(29, 29, 31, 0.16);
  background: #fff;
  color: #111114;
  font-weight: 600;
  font-size: 0.92rem;
}

.social-link svg {
  width: 1.08rem;
  height: 1.08rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(0, 113, 227, 0.34);
  background: rgba(0, 113, 227, 0.05);
}

@media (max-width: 860px) {
  .social-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 861px) {
  .site-header .header-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    column-gap: 1rem !important;
  }

  .site-header .brand {
    justify-self: start !important;
  }

  .site-header .site-nav {
    justify-self: center !important;
  }

  .site-header .header-actions {
    justify-self: end !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 860px) {
  body.panel-menu-opening,
  body.panel-menu-open,
  body.panel-menu-closing {
    overflow: hidden !important;
    height: 100dvh !important;
    touch-action: none !important;
  }

  .site-header {
    z-index: 700 !important;
    background: #fff !important;
  }

  .site-header .header-inner {
    min-height: var(--header-height) !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }

  .site-header .header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.72rem !important;
    margin-left: auto !important;
    height: var(--header-height) !important;
    padding-right: 0 !important;
  }

  .site-header .tool-btn,
  .site-header .nav-toggle {
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
  }

  .site-header .tool-icon {
    width: 1.12rem !important;
    height: 1.12rem !important;
  }

  .site-header .nav-toggle:hover,
  .site-header .nav-toggle:focus-visible,
  .site-header .tool-btn:hover,
  .site-header .tool-btn:focus-visible {
    transform: none !important;
  }

  .site-header .nav-toggle span {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 1.08rem !important;
    height: 1.8px !important;
    margin: 0 !important;
    background: #111114 !important;
    transform-origin: center !important;
  }

  .site-header .nav-toggle span:nth-child(1) {
    transform: translate(-50%, -50%) translateY(-3.8px) !important;
  }

  .site-header .nav-toggle span:nth-child(2) {
    transform: translate(-50%, -50%) translateY(3.8px) !important;
  }

  .site-header .nav-toggle.is-open span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .site-header .nav-toggle.is-open span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
    opacity: 1 !important;
  }

  body.panel-menu-opening .site-header .brand,
  body.panel-menu-open .site-header .brand,
  body.panel-menu-closing .site-header .brand,
  body.panel-menu-opening .site-header .tool-search,
  body.panel-menu-open .site-header .tool-search,
  body.panel-menu-closing .site-header .tool-search,
  body.panel-menu-opening .site-header .tool-cart,
  body.panel-menu-open .site-header .tool-cart,
  body.panel-menu-closing .site-header .tool-cart {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.panel-menu-opening .site-header .nav-toggle,
  body.panel-menu-open .site-header .nav-toggle,
  body.panel-menu-closing .site-header .nav-toggle {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 0.88rem) !important;
    right: 1rem !important;
    z-index: 1300 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .ui-veil {
    z-index: 900 !important;
    background: #fff !important;
  }

  body.overlay-open .ui-veil {
    opacity: 1 !important;
  }

  .site-nav {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding-top: 0 !important;
    background: #fff !important;
    z-index: 1150 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .site-nav.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .site-nav ul {
    width: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 5.45rem) 1.45rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.08rem !important;
    transform: translateY(-16px) !important;
    opacity: 0 !important;
  }

  .site-nav.is-open ul {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  .site-nav a {
    width: 100% !important;
    display: block !important;
    color: #111114 !important;
    background: transparent !important;
    font-size: 1.38rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    padding: 0.56rem 0 !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
  }

  .site-nav.is-open a {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a.active {
    color: #111114 !important;
    background: transparent !important;
    opacity: 1 !important;
  }
}

/* --- 2026-04-03 mobile navigation rebuild --- */
html.menu-lock,
body.menu-lock {
  overflow: hidden !important;
  height: 100dvh !important;
}

.site-header .tool-btn .tool-icon {
  width: 1.16rem !important;
  height: 1.16rem !important;
  stroke-width: 1.9 !important;
}

.site-header .tool-search .tool-icon {
  transform: translateY(0) scale(0.97) !important;
}

.site-header .tool-cart .tool-icon {
  transform: translateY(0) scale(1) !important;
  stroke-width: 1.84 !important;
}

@media (max-width: 860px) {
  :root {
    --mobile-icon-hit: 2.12rem;
    --mobile-icon-gap: 0.68rem;
    --mobile-icon-size: 1.12rem;
  }

  .site-header {
    z-index: 1300 !important;
    background: #fff !important;
  }

  .site-header .header-inner {
    display: flex !important;
    align-items: center !important;
    min-height: var(--header-height) !important;
  }

  .site-header .header-actions {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--mobile-icon-hit) !important;
    align-items: center !important;
    justify-content: end !important;
    column-gap: var(--mobile-icon-gap) !important;
    margin-left: auto !important;
    height: var(--header-height) !important;
    flex: 0 0 auto !important;
  }

  .site-header .tool-btn,
  .site-header .nav-toggle {
    width: var(--mobile-icon-hit) !important;
    height: var(--mobile-icon-hit) !important;
    min-width: var(--mobile-icon-hit) !important;
    min-height: var(--mobile-icon-hit) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
    position: relative !important;
    flex: 0 0 var(--mobile-icon-hit) !important;
  }

  .site-header .tool-btn .tool-icon {
    width: var(--mobile-icon-size) !important;
    height: var(--mobile-icon-size) !important;
    transform-origin: center !important;
  }

  .site-header .tool-search .tool-icon {
    transform: translateY(0) scale(1) !important;
  }

  .site-header .tool-cart .tool-icon {
    transform: translateY(0) scale(1) !important;
  }

  .site-header .nav-toggle {
    align-self: center !important;
  }

  .site-header .nav-toggle span {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 1.16rem !important;
    height: 1.8px !important;
    margin: 0 !important;
    background: #111114 !important;
    transform-origin: center !important;
  }

  .site-header .nav-toggle span:nth-child(1) {
    transform: translate(-50%, -50%) translateY(-4.4px) !important;
  }

  .site-header .nav-toggle span:nth-child(2) {
    transform: translate(-50%, -50%) translateY(4.4px) !important;
  }

  .site-header .nav-toggle.is-open span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .site-header .nav-toggle.is-open span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
    opacity: 1 !important;
  }

  body.panel-menu-opening .ui-veil,
  body.panel-menu-open .ui-veil,
  body.panel-menu-closing .ui-veil {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.panel-menu-opening .site-header .brand,
  body.panel-menu-open .site-header .brand,
  body.panel-menu-opening .site-header .tool-search,
  body.panel-menu-open .site-header .tool-search,
  body.panel-menu-opening .site-header .tool-cart,
  body.panel-menu-open .site-header .tool-cart {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.panel-menu-opening .site-header .nav-toggle,
  body.panel-menu-open .site-header .nav-toggle {
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
  }

  .site-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding-top: 0 !important;
    background: #fff !important;
    transform: translateY(-101%) !important;
    visibility: hidden !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition:
      transform 420ms cubic-bezier(0.22, 0.88, 0.24, 1),
      visibility 0s linear 420ms !important;
  }

  .site-nav.is-visible {
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
      transform 420ms cubic-bezier(0.22, 0.88, 0.24, 1),
      visibility 0s linear 0s !important;
  }

  .site-nav.is-open {
    transform: translateY(0) !important;
  }

  .site-nav ul {
    width: 100% !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 5.4rem) 1.45rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.12rem !important;
  }

  .site-nav a {
    width: 100% !important;
    display: block !important;
    color: #111114 !important;
    background: transparent !important;
    font-size: 1.38rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    padding: 0.56rem 0 !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition:
      opacity 240ms ease,
      transform 300ms cubic-bezier(0.22, 0.88, 0.24, 1) !important;
    transition-delay: calc(var(--item-index, 0) * 36ms + 90ms) !important;
  }

  .site-nav.is-open a {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .site-nav .nav-lang-slot {
    margin-top: auto !important;
    display: flex !important;
    justify-content: center !important;
    padding-top: 1.45rem !important;
  }

  .site-nav .nav-lang-slot .lang-switcher {
    gap: 1.3rem !important;
  }

  .site-nav .nav-lang-slot .lang-btn {
    color: #111114 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.12em !important;
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition:
      opacity 240ms ease,
      transform 280ms cubic-bezier(0.22, 0.88, 0.24, 1) !important;
    transition-delay: 290ms !important;
  }

  .site-nav.is-open .nav-lang-slot .lang-btn {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* Closing state: header immediately and smoothly returns */
  body.panel-menu-closing .site-header .brand,
  body.panel-menu-closing .site-header .tool-search,
  body.panel-menu-closing .site-header .tool-cart {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 220ms ease, transform 220ms ease !important;
  }

  body.panel-menu-closing .site-header .nav-toggle {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* --- 2026-04-04 mobile icon alignment + dark-surface cursor --- */
@media (max-width: 860px) {
  :root {
    --mobile-icon-hit: 2.12rem;
    --mobile-icon-gap: 0.72rem;
    --mobile-icon-size: 1.12rem;
    --mobile-menu-line-offset: 4.15px;
  }

  .site-header .header-actions {
    display: flex !important;
    grid-auto-flow: unset !important;
    grid-auto-columns: unset !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--mobile-icon-gap) !important;
    height: var(--header-height) !important;
    margin-left: auto !important;
    padding-right: 0 !important;
  }

  .site-header .header-actions > .tool-search {
    order: 1 !important;
  }

  .site-header .header-actions > .tool-cart {
    order: 2 !important;
  }

  .site-header .header-actions > .nav-toggle {
    order: 3 !important;
  }

  .site-header .header-actions > .tool-btn,
  .site-header .header-actions > .nav-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: var(--mobile-icon-hit) !important;
    height: var(--mobile-icon-hit) !important;
    min-width: var(--mobile-icon-hit) !important;
    min-height: var(--mobile-icon-hit) !important;
    flex: 0 0 var(--mobile-icon-hit) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1 !important;
    font-size: 0 !important;
    vertical-align: middle !important;
    position: relative !important;
    inset: auto !important;
    transform: translateY(0) !important;
  }

  .site-header .header-actions > .tool-btn .tool-icon {
    width: var(--mobile-icon-size) !important;
    height: var(--mobile-icon-size) !important;
    stroke-width: 1.86 !important;
    transform: translateY(0) !important;
    transform-origin: center !important;
  }

  .site-header .header-actions > .nav-toggle span {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 1.14rem !important;
    height: 1.85px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #111114 !important;
    transform-origin: 50% 50% !important;
    transition:
      transform 260ms cubic-bezier(0.32, 0.9, 0.25, 1),
      opacity 220ms ease,
      background-color 220ms ease !important;
  }

  .site-header .header-actions > .nav-toggle span:nth-child(1) {
    transform: translate(-50%, -50%) translateY(calc(var(--mobile-menu-line-offset) * -1)) !important;
  }

  .site-header .header-actions > .nav-toggle span:nth-child(2) {
    transform: translate(-50%, -50%) translateY(var(--mobile-menu-line-offset)) !important;
  }

  .site-header .header-actions > .nav-toggle.is-open span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .site-header .header-actions > .nav-toggle.is-open span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
    opacity: 1 !important;
  }

  body.panel-menu-opening .site-header .header-actions > .nav-toggle,
  body.panel-menu-open .site-header .header-actions > .nav-toggle,
  body.panel-menu-closing .site-header .header-actions > .nav-toggle {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    transform: translateY(0) !important;
  }
}

.cursor-core.is-light {
  border-color: rgba(255, 255, 255, 0.99) !important;
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(10, 10, 12, 0.24),
    0 0 18px rgba(255, 255, 255, 0.34) !important;
}

.cursor-core.is-active.is-light {
  border-color: rgba(255, 255, 255, 1) !important;
  background: rgba(255, 255, 255, 0.4) !important;
  box-shadow:
    0 0 0 1px rgba(10, 10, 12, 0.28),
    0 0 22px rgba(255, 255, 255, 0.45) !important;
}

/* --- 2026-04-04 menu visibility + language state + panel consistency --- */
@media (max-width: 860px) {
  .site-header {
    z-index: 2300 !important;
    isolation: isolate !important;
  }

  .site-nav {
    z-index: 2000 !important;
  }

  .site-header .header-actions > .nav-toggle,
  body.panel-menu-opening .site-header .header-actions > .nav-toggle,
  body.panel-menu-open .site-header .header-actions > .nav-toggle,
  body.panel-menu-closing .site-header .header-actions > .nav-toggle {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2400 !important;
    mix-blend-mode: normal !important;
    color: #111114 !important;
  }

  .site-header .header-actions > .nav-toggle span,
  body.panel-menu-opening .site-header .header-actions > .nav-toggle span,
  body.panel-menu-open .site-header .header-actions > .nav-toggle span,
  body.panel-menu-closing .site-header .header-actions > .nav-toggle span {
    background: #111114 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .site-nav .nav-lang-slot .lang-btn {
    position: relative !important;
    text-decoration: none !important;
    opacity: 0.6 !important;
    transform: none !important;
  }

  .site-nav .nav-lang-slot .lang-btn:hover,
  .site-nav .nav-lang-slot .lang-btn:focus-visible {
    opacity: 0.8 !important;
    transform: none !important;
  }

  .site-nav .nav-lang-slot .lang-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.18rem;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 50% 50%;
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease;
  }

  .site-nav .nav-lang-slot .lang-btn.active {
    opacity: 1 !important;
  }

  .site-nav .nav-lang-slot .lang-btn.active::after {
    transform: scaleX(1);
    opacity: 1;
  }
}

.overlay-search,
.overlay-cart {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2600 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: #fff !important;
  transform: translateY(-101%) !important;
  visibility: hidden !important;
  opacity: 1 !important;
  pointer-events: none !important;
  will-change: transform !important;
  transition:
    transform 420ms cubic-bezier(0.22, 0.88, 0.24, 1),
    visibility 0s linear 420ms !important;
}

.overlay-search.is-visible,
.overlay-cart.is-visible {
  visibility: visible !important;
  pointer-events: auto !important;
  transition:
    transform 420ms cubic-bezier(0.22, 0.88, 0.24, 1),
    visibility 0s linear 0s !important;
}

.overlay-search.is-open,
.overlay-cart.is-open {
  transform: translateY(0) !important;
}

.overlay-search .overlay-shell,
.overlay-cart .overlay-shell {
  height: 100dvh !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 1rem) !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

.overlay-search .overlay-top,
.overlay-cart .overlay-top {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.22, 0.88, 0.24, 1) !important;
}

.overlay-search .overlay-content,
.overlay-cart .overlay-content {
  opacity: 0 !important;
  transform: translateY(14px) !important;
  transition:
    opacity 240ms ease,
    transform 300ms cubic-bezier(0.22, 0.88, 0.24, 1) !important;
  transition-delay: 90ms !important;
}

.overlay-search.is-open .overlay-top,
.overlay-cart.is-open .overlay-top,
.overlay-search.is-open .overlay-content,
.overlay-cart.is-open .overlay-content {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.overlay-search .line-close,
.overlay-cart .line-close {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.panel-search-opening .site-header,
body.panel-search-open .site-header,
body.panel-search-closing .site-header,
body.panel-cart-opening .site-header,
body.panel-cart-open .site-header,
body.panel-cart-closing .site-header {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.panel-search-opening,
body.panel-search-open,
body.panel-search-closing,
body.panel-cart-opening,
body.panel-cart-open,
body.panel-cart-closing {
  overflow: hidden !important;
  height: 100dvh !important;
  touch-action: none !important;
}

.footer-lang .lang-switcher {
  gap: 0.95rem;
}

.footer-lang .lang-btn {
  position: relative;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  opacity: 0.62;
  color: rgba(238, 243, 252, 0.9) !important;
  transform: none !important;
}

.footer-lang .lang-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2rem;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.footer-lang .lang-btn.active {
  opacity: 1;
  color: #ffffff !important;
}

.footer-lang .lang-btn.active::after {
  transform: scaleX(1);
  opacity: 1;
}

.reference-slider {
  --ref-gap: 1rem;
  --ref-per-view: 3;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.reference-track {
  display: flex;
  align-items: stretch;
  gap: var(--ref-gap);
  transition: transform 420ms cubic-bezier(0.22, 0.88, 0.24, 1);
  will-change: transform;
  touch-action: pan-y;
}

.reference-slide {
  flex: 0 0 calc((100% - (var(--ref-gap) * (var(--ref-per-view) - 1))) / var(--ref-per-view));
  min-width: 0;
  height: 100%;
}

.reference-slide.project-card {
  height: 100%;
}

.reference-controls {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.reference-arrow {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(17, 17, 20, 0.2);
  border-radius: 999px;
  background: #fff;
  color: #111114;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.24rem;
  line-height: 1;
  transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease, opacity 220ms ease;
}

.reference-arrow:hover,
.reference-arrow:focus-visible {
  border-color: rgba(0, 113, 227, 0.36);
  background: rgba(0, 113, 227, 0.08);
  transform: translateY(-1px);
}

.reference-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.reference-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
}

.reference-dot {
  width: 0.44rem;
  height: 0.44rem;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 17, 20, 0.28);
  padding: 0;
  cursor: pointer;
  transition: transform 220ms ease, background-color 220ms ease;
}

.reference-dot.is-active {
  background: #111114;
  transform: scale(1.2);
}

@media (max-width: 1139px) {
  .reference-slider {
    --ref-per-view: 2;
  }
}

@media (max-width: 760px) {
  .reference-slider {
    --ref-per-view: 1;
  }

  .reference-controls {
    justify-content: space-between;
    gap: 0.65rem;
  }

  .reference-dots {
    flex: 1;
  }
}

/* --- 2026-04-05 pricing page overhaul --- */
body[data-page="preise"] #pakete-vergleich {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

body[data-page="preise"] .pricing-v2-hero {
  position: relative;
  overflow: hidden;
}

body[data-page="preise"] .pricing-v2-hero::before {
  content: "";
  position: absolute;
  width: min(48vw, 620px);
  aspect-ratio: 1 / 1;
  right: -140px;
  top: -190px;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(0, 113, 227, 0.2), rgba(0, 113, 227, 0));
  pointer-events: none;
  filter: blur(1px);
  animation: hero-glow 14s ease-in-out infinite alternate;
}

body[data-page="preise"] .pricing-v2-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 1.1rem;
  align-items: stretch;
}

body[data-page="preise"] .pricing-v2-hero-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="preise"] .pricing-v2-hero-panel {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(0, 113, 227, 0.2);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.96)),
    radial-gradient(640px 260px at -14% -20%, rgba(0, 113, 227, 0.11), rgba(0, 113, 227, 0));
  box-shadow: 0 16px 42px rgba(15, 26, 43, 0.11);
  padding: clamp(1.2rem, 2.2vw, 1.65rem);
}

body[data-page="preise"] .pricing-v2-hero-panel h3 {
  margin: 0 0 0.62rem;
  font-size: 1.08rem;
}

body[data-page="preise"] .pricing-v2-hero-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.52rem;
}

body[data-page="preise"] .pricing-v2-hero-panel li {
  position: relative;
  padding-left: 1.02rem;
  color: #2f3642;
}

body[data-page="preise"] .pricing-v2-hero-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(0, 113, 227, 0.7);
}

body[data-page="preise"] .pricing-v2-hero-panel p {
  margin: 0.9rem 0 0;
  color: #4d5563;
  font-size: 0.92rem;
}

body[data-page="preise"] .pricing-v2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

body[data-page="preise"] .pricing-v2-card {
  position: relative;
  padding: 1.28rem;
  border-radius: 20px;
  border: 1px solid rgba(17, 17, 20, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 252, 253, 0.96)),
    radial-gradient(320px 180px at -30% -50%, rgba(0, 113, 227, 0.09), rgba(0, 113, 227, 0));
  box-shadow: 0 10px 30px rgba(15, 22, 37, 0.08);
  transition:
    transform 300ms cubic-bezier(0.22, 0.88, 0.24, 1),
    border-color 260ms ease,
    box-shadow 300ms ease;
}

body[data-page="preise"] .pricing-v2-card:hover,
body[data-page="preise"] .pricing-v2-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(0, 113, 227, 0.28);
  box-shadow: 0 22px 44px rgba(15, 22, 37, 0.12);
}

body[data-page="preise"] .pricing-v2-card.is-recommended {
  border-color: rgba(0, 113, 227, 0.34);
  box-shadow:
    0 24px 52px rgba(15, 32, 58, 0.16),
    0 0 0 1px rgba(0, 113, 227, 0.11);
}

body[data-page="preise"] .pricing-v2-card.is-premium {
  background:
    linear-gradient(180deg, rgba(252, 255, 255, 0.98), rgba(244, 250, 255, 0.95)),
    radial-gradient(330px 200px at 120% -40%, rgba(0, 113, 227, 0.18), rgba(0, 113, 227, 0));
  border-color: rgba(0, 113, 227, 0.24);
}

body[data-page="preise"] .pricing-v2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: 0.2rem 0.58rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 113, 227, 0.23);
  background: rgba(0, 113, 227, 0.09);
  color: #005ab8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body[data-page="preise"] .pricing-v2-card h3 {
  margin: 0.86rem 0 0.28rem;
  font-size: clamp(1.36rem, 1.2rem + 0.62vw, 1.72rem);
}

body[data-page="preise"] .pricing-v2-price {
  margin: 0;
  display: grid;
  gap: 0.08rem;
}

body[data-page="preise"] .pricing-v2-price strong {
  font-size: clamp(2.2rem, 1.9rem + 1vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

body[data-page="preise"] .pricing-v2-price span {
  color: #5e6471;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
}

body[data-page="preise"] .pricing-v2-desc {
  margin: 0.8rem 0 0;
  color: #343b47;
}

body[data-page="preise"] .pricing-v2-features {
  margin: 0.92rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.52rem;
}

body[data-page="preise"] .pricing-v2-features li {
  position: relative;
  padding-left: 1.26rem;
  color: #434b59;
  font-size: 0.94rem;
}

body[data-page="preise"] .pricing-v2-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52rem;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 999px;
  background: #117b5b;
}

body[data-page="preise"] .pricing-v2-fit {
  margin: 0.9rem 0 1rem;
  color: #4d5563;
  font-size: 0.89rem;
}

body[data-page="preise"] .pricing-v2-card .btn {
  width: 100%;
}

body[data-page="preise"] .pricing-v2-onepage {
  margin-top: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(17, 17, 20, 0.12);
  background: rgba(255, 255, 255, 0.86);
  padding: 0.92rem 1rem;
}

body[data-page="preise"] .pricing-v2-onepage-title {
  margin: 0;
  font-weight: 700;
  color: #202733;
}

body[data-page="preise"] .pricing-v2-onepage-price {
  margin: 0.25rem 0 0;
  color: #005ab8;
  font-weight: 700;
}

body[data-page="preise"] .pricing-v2-onepage p:last-child {
  margin: 0.32rem 0 0;
  color: #515967;
}

body[data-page="preise"] .pricing-v2-table-wrap {
  margin-top: 1rem;
  border: 1px solid rgba(17, 17, 20, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  overflow: auto;
  box-shadow: 0 14px 36px rgba(12, 23, 39, 0.09);
}

body[data-page="preise"] .pricing-v2-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

body[data-page="preise"] .pricing-v2-table thead th {
  position: sticky;
  top: 0;
  background: rgba(248, 252, 255, 0.98);
  backdrop-filter: blur(8px);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3e4552;
  padding: 0.82rem 0.9rem;
  border-bottom: 1px solid rgba(17, 17, 20, 0.12);
}

body[data-page="preise"] .pricing-v2-table th,
body[data-page="preise"] .pricing-v2-table td {
  padding: 0.78rem 0.9rem;
  border-bottom: 1px solid rgba(17, 17, 20, 0.08);
  text-align: left;
  font-size: 0.92rem;
}

body[data-page="preise"] .pricing-v2-table tbody tr {
  transition: background-color 220ms ease;
}

body[data-page="preise"] .pricing-v2-table tbody tr:hover {
  background: rgba(0, 113, 227, 0.045);
}

body[data-page="preise"] .pricing-v2-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-height: 1.48rem;
  padding: 0.16rem 0.58rem;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid transparent;
}

body[data-page="preise"] .pricing-v2-chip.yes {
  background: rgba(17, 123, 91, 0.12);
  border-color: rgba(17, 123, 91, 0.3);
  color: #13674e;
}

body[data-page="preise"] .pricing-v2-chip.no {
  background: rgba(119, 128, 144, 0.14);
  border-color: rgba(119, 128, 144, 0.24);
  color: #556071;
}

body[data-page="preise"] .pricing-v2-chip.limited {
  background: rgba(0, 113, 227, 0.11);
  border-color: rgba(0, 113, 227, 0.24);
  color: #0058af;
}

body[data-page="preise"] .pricing-v2-legal-note {
  margin-top: 0.9rem;
}

body[data-page="preise"] .pricing-v2-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

body[data-page="preise"] .pricing-v2-trust-grid .card {
  border-radius: 16px;
  border-color: rgba(17, 17, 20, 0.11);
}

body[data-page="preise"] .pricing-v2-trust-grid h3 {
  margin: 0 0 0.36rem;
  font-size: 1rem;
}

body[data-page="preise"] .pricing-v2-trust-grid p {
  margin: 0;
}

body[data-page="preise"] .pricing-v2-cta {
  background:
    linear-gradient(145deg, #0f1218 0%, #1d2535 56%, #0a61be 120%),
    radial-gradient(420px 140px at 18% -20%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
}

body[data-page="preise"] .pricing-v2-cta h2,
body[data-page="preise"] .pricing-v2-cta p {
  color: #f3f7ff;
}

body[data-page="preise"] .pricing-v2-cta .btn-secondary {
  border-color: rgba(238, 246, 255, 0.45);
  color: #f3f7ff;
  background: rgba(238, 246, 255, 0.12);
}

body[data-page="preise"] .pricing-v2-cta .btn-secondary:hover,
body[data-page="preise"] .pricing-v2-cta .btn-secondary:focus-visible {
  background: rgba(238, 246, 255, 0.22);
}

@media (max-width: 1140px) {
  body[data-page="preise"] .pricing-v2-hero-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="preise"] .pricing-v2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="preise"] .pricing-v2-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  body[data-page="preise"] .pricing-v2-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="preise"] .pricing-v2-card {
    padding: 1.1rem;
  }

  body[data-page="preise"] .pricing-v2-trust-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="preise"] .pricing-v2-table th,
  body[data-page="preise"] .pricing-v2-table td {
    padding: 0.7rem 0.72rem;
    font-size: 0.88rem;
  }
}

/* Keep custom cursor always visible above overlays */
body.cursor-enabled .cursor-core {
  z-index: 99999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
}

body.overlay-open .cursor-core,
body.overlay-open .cursor-core.is-light,
body.overlay-open .cursor-core.is-active,
body.overlay-open .cursor-core.is-active.is-light {
  border-color: rgba(17, 17, 20, 0.92) !important;
  background: rgba(17, 17, 20, 0.1) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}