.hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  min-height: calc(100svh - 5.5rem);
  display: flex;
  align-items: center;
  padding-block: 6rem;
  overflow: hidden;
  background: #12130e;
  color: oklch(0.976 0.007 97.351);
}

.hero-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

/* soft dark scrim keeps the text readable wherever the light blobs drift */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(10 12 8 / 0.6), rgb(10 12 8 / 0.05) 60%, rgb(10 12 8 / 0.15));
}

.hero-inner {
  position: relative;
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(2.2rem, 5.6vw, 4.5rem);
  line-height: 1.08;
  color: inherit;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.35);
}

/* headline: "VDK Business Services" first; then "VDK Business" moves up to
   its own line while "Services" slides left, a colon appears and the service
   names rotate below. Default (no JS / reduced motion) is the final state. */
.hero-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.hero-brand-pre {
  position: relative;
  flex-basis: 100%;
  margin-bottom: 0.04em;
}
.hero-brand-text { display: inline-block; }
/* without the flying logo the header bar carries the brand */
html:not(.fly-logo) .hero-brand-pre,
html:not(.fly-logo) .hero-brand-mid { display: none; }
.fly-logo .hero { min-height: 100svh; }
.hero-brand-mid {
  flex-basis: 100%;
  margin-bottom: 0.04em;
}
.hero-brand-main { white-space: nowrap; }
.hero-colon { margin-right: 0.2em; transition: opacity 500ms ease 350ms; }

.hero-title--intro .hero-brand-mid {
  flex-basis: auto;
  margin-bottom: 0;
  padding-right: 0.28em;
}
.hero-title--intro .hero-brand-pre {
  flex-basis: auto;
  margin-bottom: 0;
  padding-right: 0.28em;
}
.hero-title--intro .hero-colon { opacity: 0; transition: none; }

/* rotating service names: words stacked in one grid cell (box as wide as the
   longest), the active one springs in from below, clipped by the box */
.hero-rotator {
  display: grid;
  overflow: hidden;
  padding-bottom: 0.14em;
  padding-right: 0.1em;
  max-width: 100%;
  filter: drop-shadow(0 2px 14px rgb(0 0 0 / 0.4));
}
.hero-rotator em {
  grid-area: 1 / 1;
  font-style: italic;
  /* the words drift through light greens, slowly, like the colours behind
     them — never darker than a light sage, so they always stay readable */
  color: oklch(0.88 0.05 128);
  background: linear-gradient(100deg, oklch(0.82 0.07 128), oklch(0.93 0.04 118), oklch(0.85 0.07 135), oklch(0.82 0.07 128));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: hero-words-drift 9s ease-in-out infinite;
  opacity: 0;
  transform: translateY(110%);
  transition: transform 1100ms cubic-bezier(0.34, 1.32, 0.5, 1),
              opacity 700ms ease;
  will-change: transform, opacity;
}
@keyframes hero-words-drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero-rotator em.is-active { opacity: 1; transform: translateY(0); }
.hero-rotator em.is-past { transform: translateY(-110%); }
.hero-rotator em:first-child:only-child { opacity: 1; transform: none; }
.hero-title--intro .hero-rotator em { opacity: 0; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}
.hero .btn-primary {
  background: oklch(0.93 0.02 95);
  color: oklch(0.22 0.02 110);
}
.hero .btn-primary:hover {
  background: oklch(0.98 0.01 95);
}
.hero .btn-outline {
  background: transparent;
  color: oklch(0.976 0.007 97.351);
  border-color: rgb(255 255 255 / 0.4);
}
.hero .btn-outline:hover {
  background: rgb(255 255 255 / 0.1);
  transform: none;
  box-shadow: none;
}

/* during the intro the (still empty) word slot must not take up a line,
   otherwise the headline jumps down when it becomes visible */
.hero-title--intro .hero-rotator {
  position: absolute;
  visibility: hidden;
}

/* both hero buttons are pills. "Contact" rests filled with the same drifting
   light greens as the rotating words (65% see-through, a light rim and
   highlight, the hero softened behind it); on hover the fill closes up
   towards the middle, leaving it transparent with the same outline as
   "Services", and the label turns from dark to light */
.hero .btn-hover,
.hero .btn-outline {
  border-radius: 999px;
}
.hero .btn-hover {
  background: transparent;
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / 0.3);
  color: oklch(0.22 0.02 110);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28);
  transition: color 600ms cubic-bezier(0.4, 0, 0.2, 1), border-color 600ms cubic-bezier(0.4, 0, 0.2, 1), background-color 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero .btn-hover::before { display: none; }
.hero .btn-hover:hover,
.hero .btn-hover:focus-visible {
  transition-duration: 400ms;
  transform: none;
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.4);
  box-shadow: none;
  color: oklch(0.976 0.007 97.351);
}
.btn-hover-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, oklch(0.82 0.07 128 / 0.65), oklch(0.93 0.04 118 / 0.65), oklch(0.85 0.07 135 / 0.65), oklch(0.82 0.07 128 / 0.65));
  background-size: 300% 100%;
  animation: hero-words-drift 9s ease-in-out infinite; /* in step with the rotating words */
  clip-path: circle(75% at 50% 50%);
  transition: clip-path 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-hover-label { position: relative; }
.hero .btn-hover:hover .btn-hover-fill,
.hero .btn-hover:focus-visible .btn-hover-fill { clip-path: circle(0% at 50% 50%); transition-duration: 400ms; }
@media (prefers-reduced-motion: reduce) {
  .hero .btn-hover, .btn-hover-fill { transition: none; }
  .hero-rotator em, .btn-hover-fill { animation: none; }
}