/* ============================================
   RLA Solutions — Style System
   Aesthetic: Bright Editorial Premium
   Fonts: Bricolage Grotesque + Plus Jakarta Sans (self-hosted)
   ============================================ */

/* --- Self-hosted fonts ---
   Both families are loaded from /assets/fonts/ to keep all visitor IPs off
   Google's CDN — required for DSGVO compliance in Germany (the
   Google-Fonts-via-CDN ruling, LG München 3 O 17493/20).
   These are variable fonts: one woff2 file per family covers weight 200-800.
   Bricolage italic is intentionally omitted — the rotating word style uses
   browser-synthesized italic, which matches the look the site shipped with. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Reset & Variables --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Palette */
  --white: #FEFDFB;
  --cream: #F8F6F1;
  --sand: #EDEBE5;
  --charcoal: #1B1B1E;
  --graphite: #2D2D32;
  --muted: #6B6B76;
  --primary: #DC2626;
  --primary-light: #EF4444;
  --primary-glow: rgba(220, 38, 38, 0.12);
  --primary-border-soft: rgba(220, 38, 38, 0.28);
  --accent: #0055FF;
  --accent-light: #3377FF;
  --success: #10B981;
  --surface: #FFFFFF;

  /* Typography */
  --font-display: 'Bricolage Grotesque', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Spacing */
  --section-padding: clamp(60px, 7vw, 100px);
  --container-width: 1280px;
  --container-padding: clamp(20px, 4vw, 48px);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Rotating-word animation — shared source of truth for CSS keyframes and the
     JS TextRotator (which reads these via getComputedStyle to schedule layer
     removal). Keep values here; never duplicate them in JS. */
  --rotator-enter-duration: 0.65s;
  --rotator-exit-duration: 0.4s;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--white);
  overflow-x: hidden;
}

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

/* Keyboard focus — only show a ring when navigating by keyboard, not on mouse
   click. Scoped to interactive elements only. */
:is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 2px;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Cursor Glow --- */
.cursor-glow {
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

body:hover .cursor-glow {
  opacity: 1;
}

/* --- Floating WhatsApp Button ---
   Fixed bottom-left, always visible while scrolling.
   Official WhatsApp green + subtle shadow + gentle hover pop.
   Uses wa.me deep link with prefilled text. */
.wa-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35),
              0 2px 6px rgba(0, 0, 0, 0.12);
  z-index: 9000;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
  text-decoration: none;
}

.wa-fab:hover,
.wa-fab:focus-visible {
  transform: translateY(-2px) scale(1.05);
  background: #1FB855;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45),
              0 3px 8px rgba(0, 0, 0, 0.14);
  outline: none;
}

.wa-fab:focus-visible {
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--primary),
              0 12px 28px rgba(37, 211, 102, 0.45);
}

.wa-fab svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

/* Gentle attention pulse — subtle, no loop fatigue */
@keyframes wa-fab-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35),
                          0 2px 6px rgba(0, 0, 0, 0.12),
                          0 0 0 0 rgba(37, 211, 102, 0.5); }
  50%      { box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35),
                          0 2px 6px rgba(0, 0, 0, 0.12),
                          0 0 0 14px rgba(37, 211, 102, 0); }
}

.wa-fab {
  animation: wa-fab-pulse 2.6s ease-out 1.5s 2 both;
}

@media (max-width: 720px) {
  .wa-fab {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
  }
  .wa-fab svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab { animation: none; transition: none; }
  .wa-fab:hover { transform: none; }
}

/* --- Back-to-top button ---
   Fixed to the bottom-left so it mirrors (but doesn't compete with) the
   bottom-right WhatsApp fab. Quieter charcoal-on-cream treatment so the primary
   conversion CTAs stay dominant. Hidden by default; revealed via the `.visible`
   class once the user has scrolled past the hero (JS toggles it on scroll). */
.back-to-top {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--charcoal);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18),
              0 2px 4px rgba(0, 0, 0, 0.10);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.22s ease;
  z-index: 9000;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary);
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--primary),
              0 6px 18px rgba(0, 0, 0, 0.18);
}

.back-to-top svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 720px) {
  .back-to-top {
    left: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
  .back-to-top svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.2s ease; transform: none; }
  .back-to-top.visible { transform: none; }
  .back-to-top:hover { transform: none; }
}

/* --- Section Shared --- */
.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 16px;
  position: relative;
  padding-left: 20px;
}

.section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

.section-title em {
  font-style: italic;
  color: var(--primary);
}

.section-desc {
  font-size: 18px;
  color: var(--muted);
  max-width: 560px;
  margin-top: 16px;
  line-height: 1.7;
}

.section-header {
  margin-bottom: clamp(48px, 6vw, 80px);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 16px 32px;
  border-radius: var(--radius-md);
  transition: all 0.35s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.25);
}

.btn--primary:hover {
  background: var(--primary-light);
  box-shadow: 0 6px 30px rgba(220, 38, 38, 0.35);
  transform: translateY(-2px);
}

.btn--primary svg {
  transition: transform 0.3s var(--ease-spring);
}

.btn--primary:hover svg {
  transform: translate(3px, -3px);
}

.btn--ghost {
  color: var(--charcoal);
  padding: 16px 0;
  border-radius: 0;
  border-bottom: 2px solid var(--charcoal);
}

.btn--ghost:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.btn--outline {
  border: 2px solid var(--sand);
  color: var(--charcoal);
  background: transparent;
}

.btn--outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-glow);
}

.btn--full {
  width: 100%;
  justify-content: center;
}

/* --- Reveal Animation --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

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

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: all 0.4s var(--ease-out);
}

.nav.scrolled {
  background: rgba(254, 253, 251, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding: 10px 0;
}

.nav__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  z-index: 1001;
}

.nav__logo-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.03em;
  color: var(--primary);
}

.nav__logo-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  color: var(--charcoal);
}

.nav__links {
  display: flex;
  gap: 36px;
}

.nav__link {
  font-weight: 500;
  font-size: 15px;
  color: var(--graphite);
  transition: color 0.25s ease;
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s var(--ease-out);
}

.nav__link:hover {
  color: var(--primary);
}

.nav__link:hover::after {
  width: 100%;
}

.nav__lang {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.nav__lang a {
  padding: 4px 8px;
  border-radius: var(--radius-xs, 6px);
  color: var(--muted);
  transition: all 0.2s ease;
}

.nav__lang a:hover {
  color: var(--charcoal);
}

.nav__lang a.active {
  color: var(--primary);
}

.nav__lang-sep {
  color: var(--sand);
  user-select: none;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 24px;
  background: var(--charcoal);
  color: white;
  border-radius: var(--radius-sm);
  transition: all 0.3s var(--ease-out);
}

.nav__cta:hover {
  background: var(--primary);
  transform: translateY(-1px);
}

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  z-index: 1001;
}

.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: all 0.3s var(--ease-out);
}

.nav__burger.active span:first-child {
  transform: rotate(45deg) translate(3px, 3px);
}

.nav__burger.active span:last-child {
  transform: rotate(-45deg) translate(3px, -3px);
}

/* The open/closed state is controlled via `display` (toggled by the .open
   class inside the mobile media query below). We used to fade via opacity +
   pointer-events, but in some browsers the CSS opacity transition got latched
   as a running Web Animation that never completed, leaving the menu stuck at
   opacity 0 even after .open was added. Display-toggle snaps cleanly every
   time and avoids that edge case. */
.nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 100px 20px 40px;
  overflow-y: auto;
}

.nav__mobile-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--charcoal);
  transition: color 0.25s ease;
}

.nav__mobile-link:hover {
  color: var(--primary);
}

.nav__mobile-cta {
  margin-top: 16px;
  font-size: 20px;
  color: var(--primary) !important;
}

.nav__mobile-lang {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.nav__mobile-lang a {
  padding: 6px 10px;
  color: var(--muted);
  border-radius: var(--radius-xs, 6px);
  transition: color 0.2s ease;
}

.nav__mobile-lang a.active {
  color: var(--primary);
}

.nav__mobile-lang a:hover {
  color: var(--charcoal);
}

.nav__mobile-lang-sep {
  color: var(--sand);
  user-select: none;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 140px var(--container-padding) 60px;
  overflow: hidden;
}

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

.hero__gradient {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
}

.hero__gradient--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(220, 38, 38, 0.15), transparent);
  top: -10%;
  right: -5%;
  animation: floatBlob1 20s ease-in-out infinite;
}

.hero__gradient--2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 85, 255, 0.08), transparent);
  bottom: 10%;
  left: -5%;
  animation: floatBlob2 25s ease-in-out infinite;
}

.hero__gradient--3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(220, 38, 38, 0.08), transparent);
  top: 40%;
  left: 30%;
  animation: floatBlob3 18s ease-in-out infinite;
}

.hero__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.6;
}

@keyframes floatBlob1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, 30px) scale(1.05); }
  66% { transform: translate(20px, -20px) scale(0.95); }
}

@keyframes floatBlob2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
}

@keyframes floatBlob3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 40px) scale(1.15); }
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  padding: 8px 20px;
  background: var(--surface);
  border: 1px solid var(--sand);
  border-radius: 100px;
  margin-bottom: 32px;
}

.hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  margin-bottom: 28px;
}

.hero__title-line {
  display: block;
}

.hero__title-accent {
  font-style: italic;
  color: var(--primary);
  position: relative;
}

.hero__title-accent::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: -4px;
  right: -4px;
  height: 12px;
  background: var(--primary-glow);
  border-radius: 4px;
  z-index: -1;
}

/* Rotating headline word */
.rotating-word {
  display: inline-block;
  position: relative;
  color: var(--primary);
  font-style: italic;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: baseline;
  /* Italic Bricolage Grotesque glyphs overhang the inline-block box on every
     side — ascenders and rounded tops (b, k, l, e) peak above it, the slant
     pushes the top-right of the final letter past it, and descenders lean
     left below the baseline. `overflow: hidden` (required for the slide
     animation) would clip that overhang, so we grow the clipping region with
     padding and cancel the layout impact with matching negative margins.
     Values tuned specifically to Bricolage Grotesque 700 italic — re-measure
     if the display typeface changes, or glyphs may clip again. */
  padding: 0.25em 0.2em 0.1em 0.08em;
  margin: -0.25em -0.2em -0.1em -0.08em;
}

.rotating-word::after {
  content: '';
  position: absolute;
  /* The rotator has padding-bottom: 0.1em to keep italic descenders from being
     clipped by `overflow: hidden`. The ::after is positioned relative to the
     padding box, so we offset by the same 0.1em to keep the highlight anchored
     to the text baseline (its original visual position before the padding). */
  bottom: calc(4px + 0.1em);
  left: -4px;
  right: -4px;
  height: 12px;
  background: var(--primary-glow);
  border-radius: 4px;
  z-index: -1;
  transition: inherit;
}

/* Layer wraps a single word's chars. Two layers coexist during transitions
   (old layer marked is-leaving, pinned absolutely; new layer in normal flow). */
.rotating-word__layer {
  display: inline-block;
  white-space: nowrap;
}

.rotating-word__layer.is-leaving {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* No `will-change` on the static char: keeping each letter on its own GPU
   compositing layer causes italic glyph overhang (ascender peaks, right-side
   slant) to be clipped at the element's raster box. We re-enable it only while
   the slide animation is active (is-enter / is-exit classes) for a smoother
   GPU-accelerated transition, then strip `.is-enter` in JS on animationend so
   the steady-state letters render without a compositing layer. */
.rotating-word__char {
  display: inline-block;
}

.rotating-word__char.is-enter {
  animation: rotateCharIn var(--rotator-enter-duration) cubic-bezier(0.34, 1.56, 0.64, 1) both;
  will-change: transform, opacity;
}

.rotating-word__char.is-exit {
  animation: rotateCharOut var(--rotator-exit-duration) cubic-bezier(0.55, 0, 0.78, 0) both;
  will-change: transform, opacity;
}

@keyframes rotateCharIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes rotateCharOut {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-110%); opacity: 0; }
}

.hero__subtitle {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}

.hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.hero__stat {
  text-align: center;
}

.hero__stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.03em;
  color: var(--charcoal);
  display: inline;
}

.hero__stat-suffix {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--primary);
}

.hero__stat-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 4px;
}

.hero__stat-divider {
  width: 1px;
  height: 48px;
  background: var(--sand);
}

/* ============================================
   MARQUEE
   ============================================ */
.marquee {
  padding: 28px 0;
  background: var(--charcoal);
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}

.marquee__content {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
}

.marquee__item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--white);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.marquee__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================
   SERVICES
   ============================================ */
.services {
  padding: var(--section-padding) 0;
}

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

.service-card {
  background: var(--surface);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 44px);
  transition: all 0.4s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.service-card:hover {
  border-color: rgba(220, 38, 38, 0.2);
  box-shadow: 0 12px 48px rgba(0,0,0,0.06);
  transform: translateY(-4px);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card__number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  color: var(--primary);
  letter-spacing: -0.04em;
  line-height: 1;
  flex-shrink: 0;
}

.service-card__header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.service-card__header .service-card__title {
  margin-bottom: 0;
}

.service-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 28px);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.service-card__desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ============================================
   WORK / PORTFOLIO
   ============================================ */
/* =============================================================
   WORK / PROJEKTE — Native horizontal carousel
   Cards scroll via drag / swipe / trackpad / arrow buttons.
   No scroll-hijack — vertical page scroll passes through normally.
   ============================================================= */
.work {
  background: var(--cream);
  padding: var(--section-padding) 0;
  position: relative;
}

/* Carousel viewport — contains track, arrows, and edge fades.
   Extends full-bleed so cards can scroll past the container edges. */
.work__carousel {
  position: relative;
  margin-top: 48px;
}

/* Scrollable track — native horizontal scroll with snap.
   No horizontal padding here; the wrapping .container handles alignment. */
.work__track {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 8px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar — visual progress is the orange bar below */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.work__track::-webkit-scrollbar {
  display: none;
}

/* Soft cream gradient fades so cards feel like they emerge from
   / vanish into the viewport edges. Hidden at the scroll boundaries
   so the first/last card is never covered by a fade. */
.work__edge-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8vw;
  max-width: 120px;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
  transition: opacity 240ms ease;
}

.work__edge-fade--left {
  left: 0;
  background: linear-gradient(90deg, var(--cream) 30%, transparent);
}

.work__edge-fade--right {
  right: 0;
  background: linear-gradient(270deg, var(--cream) 30%, transparent);
}

.work__carousel[data-at-start] .work__edge-fade--left,
.work__carousel[data-at-end] .work__edge-fade--right {
  opacity: 0;
}

/* Circular arrow buttons — vermillion, on either edge, vertically centered
   on the card area (NOT the whole carousel which includes padding). */
.work__nav {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transform: translateY(-50%);
  box-shadow: 0 4px 18px rgba(220, 38, 38, 0.32);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), background 0.3s var(--ease-out);
}

.work__nav:hover {
  transform: translateY(-50%) scale(1.08);
  background: #C83C0C;
}

.work__nav:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.work__nav[disabled] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.9);
}

.work__nav--prev {
  left: -20px;
}

.work__nav--next {
  right: -20px;
}

.work__nav svg {
  width: 20px;
  height: 20px;
}

/* Thin vermillion progress bar — sits below the carousel track,
   tied to the track's native scrollLeft. */
.work__progress {
  position: relative;
  max-width: var(--container-width);
  margin: 32px auto 0;
  width: calc(100% - 2 * var(--container-padding));
  height: 3px;
  background: var(--sand);
  border-radius: 999px;
  overflow: hidden;
}

/* Scrollbar-thumb metaphor: the fill's width represents the visible portion
   of the track relative to the total scrollable width (so at the start the
   thumb is already ~1/3 long, signalling "there's more"). Its `left` position
   tracks the scroll progress. JS sets both inline. */
.work__progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: left 0.1s linear;
  will-change: left;
}

.work-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  display: block;
  /* Smaller, lighter cards: 24vw on desktop, with min/max guardrails */
  flex: 0 0 24vw;
  min-width: 300px;
  max-width: 420px;
  scroll-snap-align: start;
  box-shadow: 0 6px 24px rgba(27, 27, 30, 0.06);
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.09);
}

.work-card__image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.work-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--ease-out);
}

.work-card:hover .work-card__image img {
  transform: scale(1.05);
}

.work-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  transition: transform 0.6s var(--ease-out);
}

.work-card:hover .work-card__placeholder {
  transform: scale(1.05);
}

.work-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 27, 30, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.work-card:hover .work-card__overlay {
  opacity: 1;
}

.work-card__view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: white;
  padding: 14px 28px;
  border: 2px solid white;
  border-radius: var(--radius-sm);
  transform: translateY(10px);
  transition: transform 0.35s var(--ease-out);
}

.work-card:hover .work-card__view {
  transform: translateY(0);
}

.work-card__info {
  padding: 24px;
}

.work-card__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 8px;
  display: block;
}

/* Template tag — distinct pill style so visitors know it's a sample, not a client project */
.work-card__tag--template {
  display: inline-block;
  padding: 4px 10px;
  background: var(--charcoal);
  color: var(--cream);
  border-radius: 100px;
  letter-spacing: 0.14em;
}

.work-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.work-card__desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.work__cta {
  text-align: center;
  margin-top: 48px;
}

/* ============================================
   TRUST STRIP
   ============================================ */
.trust-strip {
  padding: 20px 0;
  background: var(--cream);
  border-top: 1px solid var(--sand);
  border-bottom: 1px solid var(--sand);
  overflow: hidden;
}

.trust-strip__inner {
  overflow: hidden;
}

.trust-strip__track {
  display: flex;
  align-items: center;
  gap: 24px;
  animation: marqueeScroll 40s linear infinite;
  width: max-content;
}

.trust-strip__item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.trust-strip__sep {
  color: var(--sand);
  font-weight: 300;
}

/* ============================================
   PROCESS
   ============================================ */
.process {
  padding: var(--section-padding) 0;
}

.process__timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.process__step {
  position: relative;
  padding: 0 24px;
}

.process__step-marker {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
  position: relative;
}

/* Same editorial numeral treatment as .service-card__number — big orange
   display numeral instead of the old circle/badge, so services and process
   read as one consistent system. */
.process__step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  color: var(--primary);
  letter-spacing: -0.04em;
  line-height: 1;
  flex-shrink: 0;
}

.process__step-line {
  flex: 1;
  height: 2px;
  background: var(--sand);
  margin-left: 12px;
}

.process__step:last-child .process__step-line {
  display: none;
}

.process__step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.process__step p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
  padding: var(--section-padding) 0;
  background: var(--cream);
}

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
  transition: all 0.4s var(--ease-out);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}

.testimonial-card__stars {
  display: flex;
  gap: 2px;
  color: #F59E0B;
  margin-bottom: 20px;
}

.testimonial-card__quote {
  font-size: 16px;
  line-height: 1.7;
  color: var(--graphite);
  margin-bottom: 28px;
  font-style: italic;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.testimonial-card__name {
  font-weight: 700;
  font-size: 15px;
}

.testimonial-card__role {
  font-size: 13px;
  color: var(--muted);
}

/* ============================================
   PRICING
   ============================================ */
.pricing {
  padding: var(--section-padding) 0;
}

/* Pricing uses the same left-aligned section-header as every other section —
   no overrides needed. The base `.section-header` / `.section-label` /
   `.section-desc` styles already do the right thing. */

.pricing__toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 56px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 4px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.pricing__toggle-btn {
  font-weight: 600;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 6px;
  color: var(--muted);
  transition: all 0.3s var(--ease-out);
}

.pricing__toggle-btn.active {
  background: var(--surface);
  color: var(--charcoal);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--primary-border-soft);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
  transition: all 0.4s var(--ease-out);
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.06);
}

.pricing-card--featured {
  border: 2px solid var(--primary);
  box-shadow: 0 8px 40px rgba(220, 38, 38, 0.1);
}

.pricing-card--featured:hover {
  box-shadow: 0 16px 60px rgba(220, 38, 38, 0.15);
}

.pricing-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 6px 20px;
  border-radius: 100px;
  white-space: nowrap;
}

.pricing-card__header {
  margin-bottom: 24px;
}

.pricing-card__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 8px;
}

.pricing-card__desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.pricing-card__price {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--sand);
}

.pricing-card__price-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pricing-card__price-monthly {
  margin-top: 10px;
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.pricing-card__currency {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--muted);
}

.pricing-card__amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 48px);
  letter-spacing: -0.03em;
  color: var(--charcoal);
  line-height: 1;
}

.pricing-card__period {
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}

.pricing-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.pricing-card__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--graphite);
}

.pricing-card__features svg {
  color: var(--success);
  flex-shrink: 0;
}

/* ============================================
   FAQ
   ============================================ */
.faq {
  padding: var(--section-padding) 0;
  background: var(--cream);
}

.faq__layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.faq__header {
  position: sticky;
  top: 120px;
}

.faq__note {
  font-size: 15px;
  color: var(--muted);
  margin-top: 24px;
  line-height: 1.7;
}

.faq__note a {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 1px solid var(--primary);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--sand);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.faq-item.open {
  border-color: rgba(220, 38, 38, 0.2);
}

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  font-weight: 600;
  font-size: 16px;
  text-align: left;
  color: var(--charcoal);
  transition: color 0.25s ease;
}

.faq-item.open .faq-item__trigger {
  color: var(--primary);
}

.faq-item__icon {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
}

.faq-item__icon span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: all 0.3s var(--ease-out);
}

.faq-item__icon span:first-child {
  transform: translate(-50%, -50%);
}

.faq-item__icon span:last-child {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item.open .faq-item__icon span:first-child {
  background: var(--primary);
}

.faq-item.open .faq-item__icon span:last-child {
  transform: translate(-50%, -50%) rotate(0deg);
  background: var(--primary);
}

.faq-item__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}

.faq-item__content p {
  padding: 0 28px 22px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}

/* ============================================
   CONTACT
   ============================================ */
.contact {
  padding: var(--section-padding) 0;
}

.contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

.contact__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.contact__title em {
  font-style: italic;
  color: var(--primary);
}

.contact__desc {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 36px;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact__detail {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--graphite);
}

.contact__detail svg {
  color: var(--primary);
  flex-shrink: 0;
}

.contact__detail a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

.contact__detail a:hover {
  color: var(--primary);
}

.contact__form {
  background: var(--surface);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
}

.form-group {
  margin-bottom: 20px;
}

/* Honeypot field — visually hidden from humans, still in the DOM for bots to
   blindly fill. Off-screen positioning (rather than display: none) keeps it
   focusable to crude form-fillers but invisible to real users. */
.form-group--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--charcoal);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--sand);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--charcoal);
  transition: all 0.25s ease;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #b0b0b8;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B6B76' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.contact__form .btn {
  margin-top: 8px;
}

.contact__form-note {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 16px;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 64px 0 32px;
  background: var(--charcoal);
  color: rgba(255,255,255,0.7);
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 48px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer__logo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
}

.footer__logo-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--primary);
}

.footer__logo-text {
  font-weight: 500;
  font-size: 16px;
  color: rgba(255,255,255,0.5);
}

.footer__tagline {
  font-size: 15px;
  line-height: 1.6;
  max-width: 260px;
}

.footer__links {
  display: flex;
  gap: clamp(32px, 5vw, 80px);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: white;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.footer__col a {
  font-size: 14px;
  transition: color 0.25s ease;
}

.footer__col a:hover {
  color: var(--primary);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__legal {
  display: flex;
  gap: 24px;
}

.footer__legal a {
  transition: color 0.25s ease;
}

.footer__legal a:hover {
  color: var(--primary);
}

/* ============================================
   LEGAL PAGES (Impressum / Datenschutz)
   ============================================ */
.legal-hero {
  background: var(--cream);
  padding: 160px 0 64px;
  position: relative;
}

.legal-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.25s ease;
}

.legal-hero__back:hover {
  color: var(--primary);
}

.legal-hero__back svg {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.legal-hero__back:hover svg {
  transform: translateX(-3px);
}

.legal-hero__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 16px;
}

.legal-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  color: var(--charcoal);
  margin-bottom: 12px;
}

.legal-hero__updated {
  font-size: 14px;
  color: var(--muted);
}

.legal-content {
  padding: var(--section-padding) 0;
}

.legal-content .container {
  max-width: 860px;
}

.legal-toc {
  background: var(--cream);
  padding: 28px 32px;
  border-radius: var(--radius-md);
  margin-bottom: 48px;
}

.legal-toc__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--charcoal);
  margin-bottom: 12px;
}

.legal-toc ol {
  padding-left: 20px;
  margin: 0;
}

.legal-toc li {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.6;
}

.legal-toc a {
  color: var(--charcoal);
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-toc a:hover {
  color: var(--primary);
}

.legal-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--charcoal);
  margin-top: 56px;
  margin-bottom: 16px;
  padding-left: 20px;
  border-left: 3px solid var(--primary);
}

.legal-content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2.5vw, 20px);
  color: var(--charcoal);
  margin-top: 32px;
  margin-bottom: 12px;
}

.legal-content p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 16px;
}

.legal-content ul,
.legal-content ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.legal-content li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 6px;
}

.legal-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.legal-content a:hover {
  color: var(--primary-light);
}

.legal-content strong {
  color: var(--charcoal);
  font-weight: 600;
}

.legal-info-box {
  background: var(--cream);
  border-left: 3px solid var(--primary);
  padding: 24px 28px;
  border-radius: var(--radius-sm);
  margin: 24px 0;
}

.legal-info-box p {
  margin-bottom: 4px;
}

.legal-info-box p:last-child {
  margin-bottom: 0;
}

.todo-marker {
  background: rgba(220, 38, 38, 0.06);
  border: 1px dashed var(--primary);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-style: italic;
  color: var(--primary);
  font-size: 14px;
  margin: 16px 0;
}

/* ============================================
   ABOUT PAGE
   ============================================ */
/* Editorial founder hero */
.about-hero {
  background: var(--cream);
  padding: 160px 0 40px;
  position: relative;
  overflow: hidden;
}

.about-hero__side-label {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  opacity: 0.7;
  display: none;
}

@media (min-width: 1280px) {
  .about-hero__side-label { display: block; }
}

.about-hero .container {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 72px;
  align-items: center;
}

.about-hero__content {
  max-width: 640px;
}

.about-hero__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
  margin-bottom: 36px;
}

.about-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 8.5vw, 124px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--charcoal);
  margin-bottom: 36px;
}

.about-hero__subtitle {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--primary);
  margin-bottom: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--sand);
}

.about-hero__intro {
  font-size: 18px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 540px;
  margin-bottom: 40px;
}

.about-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--charcoal);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--charcoal);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), gap 0.3s var(--ease-out);
}

.about-hero__cta:hover {
  color: var(--primary);
  border-color: var(--primary);
  gap: 16px;
}

.about-hero__cta svg {
  width: 14px;
  height: 14px;
}

.about-hero__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-glow), var(--sand));
}

.about-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 24px;
}

/* Stats strip (horizontal, below hero) */
.about-stats-strip {
  background: var(--cream);
  padding: 40px 0 96px;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.about-stat {
  padding: 24px 0 0;
  border-top: 2px solid var(--charcoal);
}

.about-stat__number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 52px);
  color: var(--charcoal);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.about-stat__suffix {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--primary);
  letter-spacing: -0.02em;
}

.about-stat__label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.about-story {
  padding: var(--section-padding) 0;
}

.about-story .container {
  max-width: 860px;
}

.about-story__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 16px;
}

.about-story__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  color: var(--charcoal);
  margin-bottom: 32px;
}

.about-story p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 20px;
}

.about-story strong {
  color: var(--charcoal);
  font-weight: 600;
}

.about-skills {
  padding: 80px 0;
  background: var(--cream);
}

.about-skills__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--charcoal);
  margin-bottom: 40px;
}

.about-skills__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.about-skill {
  padding: 28px;
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--sand);
  transition: border-color 0.3s ease;
}

.about-skill:hover {
  border-color: var(--primary);
}

.about-skill__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--charcoal);
  margin-bottom: 8px;
}

.about-skill__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.about-cta {
  padding: var(--section-padding) 0;
  text-align: center;
}

.about-cta__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--charcoal);
  margin-bottom: 16px;
}

.about-cta__text {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 32px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .services__grid {
    grid-template-columns: 1fr;
  }

  /* Tablet carousel: cards wider for smaller screens */
  .work-card {
    flex: 0 0 42vw;
  }

  .work__nav {
    width: 44px;
    height: 44px;
  }

  .process__timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .process__step-line {
    display: none;
  }

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

  .testimonials__grid .testimonial-card:last-child {
    grid-column: span 2;
  }

  .pricing__grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

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

  .faq__header {
    position: static;
  }

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

@media (max-width: 768px) {
  .nav__links {
    display: none;
  }

  /* Compact CTA visible on mobile — primary conversion action stays reachable */
  .nav__cta {
    font-size: 12px;
    padding: 8px 14px;
    letter-spacing: 0;
  }

  .nav__actions {
    gap: 10px;
  }

  .nav__burger {
    display: flex;
  }

  .nav__mobile.open {
    display: flex;
  }

  .hero__title {
    font-size: clamp(28px, 8.5vw, 56px);
  }

  /* Mobile section-title size is driven by the LONGEST rotating word in use.
     Today that's "im Gedächtnis bleiben" (21 chars, portfolio). If that phrase
     is shortened or removed, the 22px floor can be raised for a less drastic
     mobile shrink. Kept unified across sections for simplicity even though
     some rotators (e.g. Services) have shorter longest words. */
  .section-title {
    font-size: clamp(22px, 6.5vw, 38px);
  }

  .contact__title {
    font-size: clamp(24px, 7vw, 40px);
  }

  .hero__stats {
    gap: 24px;
  }

  .hero__stat-divider {
    display: none;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* Buttons stretch full-width on mobile — center their label + icon so the
     text sits in the middle of the bar rather than clustering on the left. */
  .hero__actions .btn {
    justify-content: center;
  }

  .hero__actions .btn--ghost {
    text-align: center;
    border-bottom: none;
    border: 2px solid var(--sand);
    border-radius: var(--radius-md);
    padding: 16px 32px;
  }

  /* Mobile: arrows hidden (touch is the natural interaction),
     edge fades hidden too (cards go edge-to-edge). */
  .work__nav {
    display: none;
  }

  .work__edge-fade {
    display: none;
  }

  .work-card {
    flex: 0 0 78vw;
  }

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

  /* Side-by-side layout: number circle left, heading + text right — avoids the
     stacked-number-on-top arrangement that ate vertical space on mobile. */
  .process__step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
  }

  .process__step-marker {
    margin-bottom: 0;
    flex-shrink: 0;
  }

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

  .testimonials__grid .testimonial-card:last-child {
    grid-column: span 1;
  }

  .footer__top {
    flex-direction: column;
  }

  .footer__links {
    flex-wrap: wrap;
    gap: 32px;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .cursor-glow {
    display: none;
  }

  .legal-hero {
    padding: 120px 0 40px;
  }

  .legal-toc {
    padding: 20px 24px;
  }

  .legal-content h2 {
    margin-top: 40px;
  }

  .about-hero {
    padding: 120px 0 32px;
  }

  .about-hero .container {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-hero__image {
    max-width: 420px;
    margin: 0 auto;
  }

  .about-hero__title {
    font-size: clamp(48px, 10vw, 80px);
  }

  .about-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .about-stats-strip {
    padding: 24px 0 64px;
  }

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

@media (max-width: 480px) {
  .hero {
    padding-top: 100px;
    min-height: auto;
    padding-bottom: 60px;
  }

  /* Hide language toggle on very small screens to give CTA breathing room.
     Users can still switch language via the mobile menu. */
  .nav__lang {
    display: none;
  }

  .nav__cta {
    font-size: 11px;
    padding: 7px 12px;
  }
}

@media (max-width: 380px) {
  /* On very narrow screens (iPhone SE 1st gen etc.), hide the "Solutions"
     suffix — the bold RLA mark stays as recognizable wordmark. */
  .nav__logo-text {
    display: none;
  }

  /* Shrink mobile menu items so everything fits in ≤ 568px viewport height */
  .nav__mobile {
    gap: 18px;
  }

  .nav__mobile-link {
    font-size: 26px;
  }

  .nav__mobile-cta {
    font-size: 18px;
    margin-top: 8px;
  }

  .nav__mobile-lang {
    margin-top: 20px;
  }
}