/* ==========================================================================
   Juveo — Startseite (Redesign Phase 1)
   Dark design system, scoped to the homepage only (this file is only
   linked from index.php). Uses the existing Corbel font and the existing
   brand color variables defined in styles.css (--primary, --secondary,
   --h2-color, --light-color). No external fonts, icons or images.
   ========================================================================== */

:root {
  --ink-950: #05070c;
  --ink-900: #0a0e18;
  --ink-800: #111729;
  --ink-700: #182038;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text-hi: #f4f6fb;
  --text-mid: #b7bdd1;
  --text-dim: #7b8299;
  --tech-blue: var(--h2-color);
  --tech-blue-soft: var(--light-color);
  --accent: var(--secondary);
  --grad-brand: linear-gradient(120deg, var(--tech-blue) 0%, var(--accent) 100%);
}

/* Reset the generic "main section" top-margin from styles.css for the
   homepage sections — the new layout controls its own rhythm. */
#main.home-main section {
  margin-top: 0;
}

#main.home-main {
  background: var(--ink-900);
  overflow: clip;
}

.home-main section {
  padding: clamp(44px, 6vw, 88px) 0;
  position: relative;
}

.home-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}

.home-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex: none;
}

.home-heading {
  font-family: 'Corbel', sans-serif;
  font-weight: 700;
  color: var(--text-hi);
  line-height: 1.15;
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
}

.home-lede {
  color: var(--text-mid);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 640px;
}

/* Dense, single-line capability list (project detail pages): stacked
   terms separated by · instead of another row of tag pills — more
   specific and punchier without adding yet another card-shaped block. */
.project-capabilities {
  margin: 18px 0 0;
  color: var(--text-dim);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Project detail pages: a run of adjacent "boxed" sections (same ink-950
   fill, no seam needed between them since the color doesn't change) —
   only the first one in the run gets the top border, marking the actual
   transition away from the page's base ink-900. */
.project-section {
  background: var(--ink-950);
}

.project-section--top {
  background:
    linear-gradient(to right, var(--tech-blue), transparent 55%) top / 100% 1px no-repeat,
    var(--ink-950);
}

.home-section-head {
  max-width: 760px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.home-section-head.is-center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.home-gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */

.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: 'Corbel', sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.home-btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.home-btn--primary {
  background: #0d1220;
  color: var(--text-hi);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 26px rgba(0, 77, 255, 0.28), 0 0 50px rgba(239, 120, 26, 0.12);
}

.home-btn--primary i {
  color: var(--accent);
}

.home-btn--primary:hover {
  color: var(--text-hi);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 34px rgba(0, 77, 255, 0.42), 0 0 68px rgba(239, 120, 26, 0.22);
}

.home-btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-hi);
  border-color: var(--line-strong);
}

.home-btn--ghost:hover {
  color: var(--text-hi);
  border-color: var(--tech-blue-soft);
  background: rgba(0, 153, 255, 0.08);
}

.home-btn i {
  font-size: 1.1em;
  line-height: 0;
}

/* ---------- Hero ---------- */

/* #hero.home-hero (not just .home-hero): styles.css still ships legacy
   #hero{...} / #hero h1/p/... ID-selector rules for services/index.php's
   own (unrelated) hero. ID selectors beat class selectors regardless of
   source order, so this section's overrides are pinned to the id+class
   combo to win only here, without touching the shared legacy rules. */
#hero.home-hero {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 190px;
  padding-bottom: 80px;
  background: var(--ink-950);
  position: relative;
  isolation: isolate;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  opacity: 0.6;
  z-index: -2;
}

.home-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(560px 420px at 18% 15%, rgba(0, 77, 255, 0.30), transparent 65%),
    radial-gradient(620px 460px at 85% 75%, rgba(239, 120, 26, 0.22), transparent 65%);
}

.home-hero__mark {
  position: absolute;
  top: 22%;
  left: 50%;
  width: clamp(220px, 38vw, 430px);
  transform: translate(-50%, -50%);
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
}

/* Tablets (iPad portrait/landscape): the 38vw scaling still lands close to
   its 430px cap here, crowding the heading right below it on the shorter
   viewport height these devices have in landscape. Scale it down a step. */
@media (min-width: 700px) and (max-width: 1400px) {
  .home-hero__mark {
    width: clamp(190px, 26vw, 300px);
    top: 20%;
  }
}

.home-hero__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* #hero-prefixed (see #hero.home-hero above): beats the legacy
   #hero h1 / #hero p ID-selector rules from styles.css. */
#hero .home-hero__title {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--text-hi);
  font-size: clamp(2.4rem, 6.4vw, 5rem);
  letter-spacing: -0.01em;
}

#hero .home-hero__stack {
  margin: clamp(22px, 3.4vw, 30px) 0 0;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-hi);
}

.home-hero__slash {
  display: inline-block;
  padding: 0 0.15em;
  font-weight: 700;
}

.home-hero__slash--blue {
  color: var(--tech-blue);
  text-shadow: 0 0 14px color-mix(in srgb, var(--tech-blue) 70%, transparent);
}

.home-hero__slash--orange {
  color: var(--accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
}

#hero .home-hero__text {
  color: var(--text-mid);
  font-size: 1.05rem;
  margin: 20px auto 0;
  max-width: 620px;
}

.home-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(32px, 5vw, 44px);
}

.home-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.home-scrollcue::before {
  content: "";
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--tech-blue-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .home-scrollcue::before {
    animation: home-scroll-drop 1.8s ease-in-out infinite;
  }
}

@keyframes home-scroll-drop {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  80% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 0; transform: translateY(10px); }
}

@media (max-width: 768px) {
  .home-hero {
    padding-top: 120px;
  }
  .home-scrollcue {
    display: none;
  }
}

/* ---------- Positioning (BUILD / BRAND / MAKE) ---------- */

.home-positioning {
  background:
    linear-gradient(to right, var(--tech-blue), transparent 55%) top / 100% 1px no-repeat,
    linear-gradient(to left, var(--accent), transparent 55%) bottom / 100% 1px no-repeat,
    var(--ink-950);
}

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

.home-pillar {
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 36px);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.home-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 20px 20px 0 0;
  background: var(--primary);
  opacity: 0.8;
}

.home-pillar:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
}

.home-pillar__icon {
  position: absolute;
  z-index: 1;
  top: clamp(28px, 3vw, 36px);
  right: clamp(28px, 3vw, 36px);
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
  overflow: hidden;
}

/* Blurred glow sitting behind the icon box, clipped to the icon's own
   bounds so it never bleeds past its border. */
.home-pillar__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(6px);
  z-index: -1;
}

.home-pillar h3 {
  color: var(--text-hi);
  font-size: 1.4rem;
  margin: 0 0 6px;
}

.home-pillar__tagline {
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}

.home-pillar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-pillar__list li {
  color: var(--text-mid);
  font-size: 0.94rem;
  padding-left: 18px;
  position: relative;
}

.home-pillar__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
}

@media (max-width: 992px) {
  .home-pillars {
    grid-template-columns: 1fr;
  }
}

/* ---------- Selected Work ---------- */

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

.home-work-card {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

a.home-work-card--link {
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

a.home-work-card--link:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  text-decoration: none;
}

.home-work-card__media {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.home-work-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
}

.home-work-card__media--build {
  background:
    radial-gradient(120% 140% at 15% 15%, rgba(0, 77, 255, 0.35), transparent 60%),
    var(--ink-800);
}

.home-work-card__media--brand {
  background:
    radial-gradient(120% 140% at 85% 85%, rgba(239, 120, 26, 0.32), transparent 60%),
    var(--ink-800);
}

/* Klariso's own brand colors (from their K mark: green + indigo), used
   instead of Juveo's generic build/brand tints so this card reads as its
   own product rather than a generic case study. */
.home-work-card__media--klariso {
  background:
    radial-gradient(120% 140% at 15% 15%, rgba(52, 211, 80, 0.28), transparent 60%),
    radial-gradient(120% 140% at 85% 85%, rgba(46, 30, 179, 0.35), transparent 60%),
    var(--ink-800);
}

/* Verevo's own brand colors (mint + blue), same idea as Klariso above. */
.home-work-card__media--verevo {
  background:
    radial-gradient(120% 140% at 15% 15%, rgba(109, 220, 207, 0.38), transparent 60%),
    radial-gradient(120% 140% at 85% 85%, rgba(16, 89, 192, 0.4), transparent 60%),
    var(--ink-800);
}

/* M+P Bauelemente's own brand red (#ec1d25, confirmed from their live
   site CSS), same idea as Klariso/Verevo above. */
.home-work-card__media--mp {
  background:
    radial-gradient(120% 140% at 50% 50%, rgba(236, 29, 37, 0.3), transparent 60%),
    var(--ink-800);
}

.home-work-card__verevo-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 60%;
  max-width: 220px;
  height: auto;
}


.home-work-card__klariso-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 1;
}

.home-work-card__klariso-mark img {
  width: 160px;
  height: 160px;
}

.home-work-card__klariso-mark span {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-hi);
  letter-spacing: 0.01em;
}

.home-work-card__klariso-mark sup {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-mid);
  margin-left: 2px;
}

.home-work-card__media i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  color: var(--text-hi);
  z-index: 1;
}

.home-work-card__mp-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 78%;
  max-width: 280px;
  height: auto;
}

.home-work-card__body {
  padding: 24px;
  position: relative;
}

/* Same corner-badge treatment as the Positionierung pillar icons. */
.home-work-card__category-icon {
  position: absolute;
  z-index: 1;
  top: 24px;
  right: 24px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.home-work-card__category-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(6px);
  z-index: -1;
}

.home-work-card__tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tech-blue-soft);
}

.home-work-card h3 {
  color: var(--text-hi);
  font-size: 1.3rem;
  margin: 8px 0 6px;
}

/* Category tag reusing the same icon+color used for the Build pillar in
   the Positionierung section, so a card visibly ties back to that pillar
   instead of just a plain text label. */
.home-work-card__category {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}

.home-work-card p {
  color: var(--text-mid);
  font-size: 0.92rem;
  margin: 0;
}

@media (max-width: 768px) {
  .home-work-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Software & Automation ---------- */

.home-software {
  background:
    linear-gradient(to right, var(--tech-blue), transparent 55%) top / 100% 1px no-repeat,
    linear-gradient(to left, var(--accent), transparent 55%) bottom / 100% 1px no-repeat,
    var(--ink-950);
}

.home-software__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}

.home-software__tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.home-software__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-mid);
  font-size: 0.88rem;
  font-weight: 700;
}

.home-software__tag i {
  color: var(--tech-blue-soft);
  font-size: 1.05rem;
}

/* A small code-editor mockup instead of another card layout: the "Warum
   Juveo" section further down already uses a stacked, connector-linked
   flow diagram, so this reads as an actual graphic instead of the same
   card idiom repeated a third time on one page. */
.home-code-mock {
  background: var(--ink-950);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.home-code-mock__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
}

.home-code-mock__dots {
  display: flex;
  gap: 6px;
}

.home-code-mock__dots i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.home-code-mock__dots i:nth-child(1) { background: #ff5f56; }
.home-code-mock__dots i:nth-child(2) { background: #ffbd2e; }
.home-code-mock__dots i:nth-child(3) { background: #27c93f; }

.home-code-mock__title {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.home-code-mock__body {
  padding: 22px 24px;
  font-size: 0.85rem;
  line-height: 1.9;
}

.home-code-mock__body p {
  margin: 0;
  color: var(--text-mid);
  white-space: nowrap;
}

/* The clip animates on this inner span, not the <p> itself, and the
   cursor sits outside it as a plain sibling. That way the cursor always
   ends up right at the edge of however much text is currently revealed,
   at every single step, instead of sitting fixed after the full text
   (which only ever became visible once the line was almost fully typed). */
.home-code-mock__typed {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  width: 0;
}

/* Looping type -> hold -> delete cycle once the mockup scrolls into view
   (AOS adds .aos-animate to the element carrying data-aos). Every line
   needs its own keyframes because each has its own moment in the cycle:
   line 1 types first and is deleted last, line 7 types last and is the
   first to be deleted (backspacing runs in reverse order of typing). */
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(1) .home-code-mock__typed { animation: juveo-code-line1 18s steps(var(--ch), end) infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(2) .home-code-mock__typed { animation: juveo-code-line2 18s steps(var(--ch), end) infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(3) .home-code-mock__typed { animation: juveo-code-line3 18s steps(var(--ch), end) infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(4) .home-code-mock__typed { animation: juveo-code-line4 18s steps(var(--ch), end) infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(5) .home-code-mock__typed { animation: juveo-code-line5 18s steps(var(--ch), end) infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(6) .home-code-mock__typed { animation: juveo-code-line6 18s steps(var(--ch), end) infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(7) .home-code-mock__typed { animation: juveo-code-line7 18s steps(var(--ch), end) infinite; }

@keyframes juveo-code-line1 { 0%, 2% { width: 0; } 6% { width: calc(var(--ch) * 1ch); } 90% { width: calc(var(--ch) * 1ch); } 94%, 100% { width: 0; } }
@keyframes juveo-code-line2 { 0%, 7% { width: 0; } 11% { width: calc(var(--ch) * 1ch); } 85% { width: calc(var(--ch) * 1ch); } 89%, 100% { width: 0; } }
@keyframes juveo-code-line3 { 0%, 12% { width: 0; } 16% { width: calc(var(--ch) * 1ch); } 80% { width: calc(var(--ch) * 1ch); } 84%, 100% { width: 0; } }
@keyframes juveo-code-line4 { 0%, 17% { width: 0; } 21% { width: calc(var(--ch) * 1ch); } 75% { width: calc(var(--ch) * 1ch); } 79%, 100% { width: 0; } }
@keyframes juveo-code-line5 { 0%, 22% { width: 0; } 26% { width: calc(var(--ch) * 1ch); } 70% { width: calc(var(--ch) * 1ch); } 74%, 100% { width: 0; } }
@keyframes juveo-code-line6 { 0%, 27% { width: 0; } 31% { width: calc(var(--ch) * 1ch); } 65% { width: calc(var(--ch) * 1ch); } 69%, 100% { width: 0; } }
@keyframes juveo-code-line7 { 0%, 32% { width: 0; } 36% { width: calc(var(--ch) * 1ch); } 60% { width: calc(var(--ch) * 1ch); } 64%, 100% { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .home-code-mock__typed {
    width: calc(var(--ch, 10) * 1ch);
    animation: none;
  }
}

/* One cursor per line, but only one is ever visible: whichever line is
   currently being typed or deleted (or, for line 7, sitting idle at the
   end during the hold between typing and deleting). The gate animation
   toggles visibility on/off at the same percentages as the width
   keyframes above; the blink animation just runs underneath constantly. */
.home-code-mock__cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  background: var(--accent);
  vertical-align: -0.15em;
  visibility: hidden;
}

.home-code-mock.aos-animate .home-code-mock__body p:nth-child(1) .home-code-mock__cursor { animation: juveo-code-blink 0.9s steps(1, end) infinite, juveo-cursor-gate-1 18s linear infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(2) .home-code-mock__cursor { animation: juveo-code-blink 0.9s steps(1, end) infinite, juveo-cursor-gate-2 18s linear infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(3) .home-code-mock__cursor { animation: juveo-code-blink 0.9s steps(1, end) infinite, juveo-cursor-gate-3 18s linear infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(4) .home-code-mock__cursor { animation: juveo-code-blink 0.9s steps(1, end) infinite, juveo-cursor-gate-4 18s linear infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(5) .home-code-mock__cursor { animation: juveo-code-blink 0.9s steps(1, end) infinite, juveo-cursor-gate-5 18s linear infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(6) .home-code-mock__cursor { animation: juveo-code-blink 0.9s steps(1, end) infinite, juveo-cursor-gate-6 18s linear infinite; }
.home-code-mock.aos-animate .home-code-mock__body p:nth-child(7) .home-code-mock__cursor { animation: juveo-code-blink 0.9s steps(1, end) infinite, juveo-cursor-gate-7 18s linear infinite; }

@keyframes juveo-code-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Visibility windows below mirror the width keyframes: a line's cursor is
   on for as long as it's the "active" line, i.e. while it is itself
   typing/deleting, or idling as the most-recently-changed line waiting
   for the next one to start. Line 1 wraps across the loop boundary
   (idle at the start, and again right after it finishes deleting last). */
@keyframes juveo-cursor-gate-1 { 0%, 6.9% { visibility: visible; } 7%, 88.9% { visibility: hidden; } 89%, 100% { visibility: visible; } }
@keyframes juveo-cursor-gate-2 { 0%, 6.9% { visibility: hidden; } 7%, 11.9% { visibility: visible; } 12%, 83.9% { visibility: hidden; } 84%, 88.9% { visibility: visible; } 89%, 100% { visibility: hidden; } }
@keyframes juveo-cursor-gate-3 { 0%, 11.9% { visibility: hidden; } 12%, 16.9% { visibility: visible; } 17%, 78.9% { visibility: hidden; } 79%, 83.9% { visibility: visible; } 84%, 100% { visibility: hidden; } }
@keyframes juveo-cursor-gate-4 { 0%, 16.9% { visibility: hidden; } 17%, 21.9% { visibility: visible; } 22%, 73.9% { visibility: hidden; } 74%, 78.9% { visibility: visible; } 79%, 100% { visibility: hidden; } }
@keyframes juveo-cursor-gate-5 { 0%, 21.9% { visibility: hidden; } 22%, 26.9% { visibility: visible; } 27%, 68.9% { visibility: hidden; } 69%, 73.9% { visibility: visible; } 74%, 100% { visibility: hidden; } }
@keyframes juveo-cursor-gate-6 { 0%, 26.9% { visibility: hidden; } 27%, 31.9% { visibility: visible; } 32%, 63.9% { visibility: hidden; } 64%, 68.9% { visibility: visible; } 69%, 100% { visibility: hidden; } }
@keyframes juveo-cursor-gate-7 { 0%, 31.9% { visibility: hidden; } 32%, 63.9% { visibility: visible; } 64%, 100% { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .home-code-mock__cursor {
    animation: none !important;
    visibility: visible;
  }
}

.home-code-mock__indent {
  padding-left: 20px;
}

.home-code-mock__key {
  color: var(--tech-blue-soft);
}

.home-code-mock__str {
  color: var(--accent);
}

.home-code-mock__bool {
  color: #34d399;
}

@media (max-width: 992px) {
  .home-software__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Own Products ---------- */

.home-products {
  background: var(--ink-900);
}

.home-featured-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
}

.home-featured-product__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.home-featured-product__category {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tech-blue-soft);
  margin: 0;
}

.home-featured-product__desc {
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.home-featured-product__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 20% 15%, rgba(109, 220, 207, 0.16), transparent 60%),
    var(--ink-950);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-featured-product__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
}

/* Verevo's own homepage shows its product with a real app screenshot
   instead of the logo, gently floating within the same glow card used
   for other featured-product visuals. */
.home-featured-product__phone-mockup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 14%;
  box-sizing: border-box;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
  animation: verevo-phone-float 5s ease-in-out infinite;
}

@keyframes verevo-phone-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-featured-product__phone-mockup {
    animation: none;
  }
}

/* Brand board (Verevo project detail page): logo + color swatches on a
   tinted glow background, the same "show the actual craft" idea as the
   device frames above, just for the identity/design side. */
.verevo-brandboard {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px;
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 20% 15%, rgba(109, 220, 207, 0.22), transparent 60%),
    radial-gradient(120% 140% at 85% 85%, rgba(16, 89, 192, 0.28), transparent 60%),
    var(--ink-950);
}

.verevo-brandboard::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
}

.verevo-brandboard__logo-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
}

.verevo-brandboard__logo-wrap img {
  width: 220px;
  max-width: 70%;
  height: auto;
}

.verevo-brandboard__swatches {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
}

.verevo-brandboard__swatches span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}

/* Screens strip (Verevo project detail page): a few extra app screens
   in a row for visual weight — placeholders, same TODO pattern as the
   device frames above. */
.verevo-screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 520px;
  margin: 40px auto 0;
}

.verevo-screens__item {
  aspect-ratio: 9 / 19;
  border-radius: 16px;
  border: 5px solid #1a1d2a;
  background: var(--ink-900);
  overflow: hidden;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.4);
}

.verevo-screens__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 560px) {
  .verevo-screens {
    max-width: 340px;
    gap: 10px;
  }
}

@media (max-width: 900px) {
  .home-featured-product {
    grid-template-columns: 1fr;
  }
}

.home-product-card__logo-wrap {
  position: relative;
  display: inline-flex;
}

.home-product-card__logo {
  height: 34px;
  width: auto;
  max-width: 220px;
}

.home-product-card__reg {
  position: absolute;
  top: -4px;
  right: -10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-mid);
}

.home-product-card p {
  color: var(--text-dim);
  font-size: 0.92rem;
  margin: 0;
  line-height: 1.6;
}

.home-product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tech-blue-soft);
}

/* Standalone product card box model (used outside .home-featured-product,
   e.g. on the Inside page) — kept separate from --verevo so the glow
   modifier doesn't fight .home-featured-product's own grid box model. */
.home-product-card--standalone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  text-decoration: none;
  color: var(--text-mid);
}

a.home-product-card--standalone:hover {
  color: var(--text-mid);
  text-decoration: none;
  border-color: var(--line-strong);
}

.home-product-card--standalone p {
  color: var(--text-mid);
}

.home-product-card--standalone .home-product-card__link {
  color: var(--tech-blue-soft);
}

/* Verevo card: echoes the glow treatment from verevo.app's own hero */
.home-product-card--verevo {
  position: relative;
  overflow: hidden;
}

.home-product-card--verevo > * {
  position: relative;
  z-index: 1;
}

.home-product-card--verevo::before,
.home-product-card--verevo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.home-product-card--verevo::before {
  top: -35%;
  left: -12%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(109, 220, 207, 0.26) 0%, transparent 70%);
}

.home-product-card--verevo::after {
  bottom: -40%;
  right: -10%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(16, 89, 192, 0.3) 0%, transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .home-product-card--verevo::before {
    animation: home-glow-pulse 6s ease-in-out infinite;
  }

  .home-product-card--verevo::after {
    animation: home-glow-pulse 8s ease-in-out infinite 1s;
  }
}

@keyframes home-glow-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.7; }
}

/* ---------- Why Juveo ---------- */

.home-why {
  background:
    linear-gradient(to right, var(--tech-blue), transparent 55%) top / 100% 1px no-repeat,
    linear-gradient(to left, var(--accent), transparent 55%) bottom / 100% 1px no-repeat,
    var(--ink-950);
}

/* Verevo project page only: the section before this one already ends in
   a left-side border, so this one's top border needs to sit on the
   right instead — a one-off flip, not a change to .home-why itself
   (that class is shared site-wide). */
.home-why.home-why--flip-top {
  background:
    linear-gradient(to left, var(--tech-blue), transparent 55%) top / 100% 1px no-repeat,
    linear-gradient(to left, var(--accent), transparent 55%) bottom / 100% 1px no-repeat,
    var(--ink-950);
}

.home-why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}

/* A radial diagram — 4 nodes around a glowing core, connected by lines —
   instead of a card stack or list. Reads as an actual graphic instead of
   another card-shaped component like everything else on the page. */
.home-radial {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.home-radial__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-radial__line {
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
  opacity: 0.85;
  animation: juveo-radial-flow 2.2s linear infinite;
}

@keyframes juveo-radial-flow {
  to { stroke-dashoffset: -30; }
}

@media (prefers-reduced-motion: reduce) {
  .home-radial__line {
    animation: none;
  }
}

.home-radial__line--1 { stroke: var(--tech-blue); }
.home-radial__line--2 { stroke: color-mix(in srgb, var(--tech-blue) 60%, var(--accent)); }
.home-radial__line--3 { stroke: color-mix(in srgb, var(--tech-blue) 30%, var(--accent)); }
.home-radial__line--4 { stroke: var(--accent); }

.home-radial__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0 55px rgba(0, 77, 255, 0.55), 0 0 85px rgba(239, 120, 26, 0.4);
  animation: juveo-radial-pulse 1.6s ease-in-out infinite;
  z-index: 2;
}

/* Soft blurred backdrop behind the key so the (sharp) icon still reads
   clearly against the flow lines passing right behind it. */
.home-radial__core::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: rgba(5, 7, 12, 0.88);
  filter: blur(10px);
  z-index: -1;
}

.home-radial__core img {
  position: relative;
  width: 68%;
  height: 68%;
  object-fit: contain;
}

@keyframes juveo-radial-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.18); }
}

.home-radial__node {
  position: absolute;
  transform: translate(-50%, -19px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 128px;
  text-align: center;
  opacity: 0;
}

.home-why .home-radial.aos-animate .home-radial__node {
  animation: juveo-radial-in 0.5s ease both;
}

.home-why .home-radial.aos-animate .home-radial__node--top { animation-delay: 0.1s; }
.home-why .home-radial.aos-animate .home-radial__node--right { animation-delay: 0.25s; }
.home-why .home-radial.aos-animate .home-radial__node--bottom { animation-delay: 0.4s; }
.home-why .home-radial.aos-animate .home-radial__node--left { animation-delay: 0.55s; }

@keyframes juveo-radial-in {
  from { opacity: 0; transform: translate(-50%, -19px) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, -19px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .home-radial__core {
    animation: none;
  }

  .home-radial__node {
    opacity: 1;
    animation: none;
  }
}

.home-radial__node--top { top: 13%; left: 50%; }
.home-radial__node--right { top: 50%; left: 87%; }
.home-radial__node--bottom { top: 87%; left: 50%; }
.home-radial__node--left { top: 50%; left: 13%; }

/* Square badges (same radius as the Positionierung pillar icons above),
   colored from each node's own --tint, with a pulsing glow that echoes
   the flow animation on the connecting lines. */
/* Same plain badge treatment as the Positionierung pillar icons above:
   no border color, no animation — just the glyph itself tinted. */
.home-radial__icon {
  position: relative !important;
  z-index: 1 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: var(--tint) !important;
  font-size: 1.1rem !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

.home-radial__icon i,
.home-radial__icon .juv {
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.home-radial__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(6px);
  z-index: -1;
}

.home-radial__node strong {
  color: var(--text-hi);
  font-size: 0.88rem;
}

.home-radial__node span {
  display: block;
  color: var(--text-dim);
  font-size: 0.72rem;
  line-height: 1.3;
  min-height: 1.9rem;
}

@media (max-width: 560px) {
  .home-radial__node {
    width: 92px;
  }

  .home-radial__node span {
    display: none;
  }
}

/* services/brand/index.php's "Approach" steps: a connected process
   rail instead of plain rows — a flowing animated line threads through
   three glowing icon nodes, staggered in on scroll. */
.brand-path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.brand-path::before,
.brand-path::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 27px;
  width: 2px;
}

.brand-path::before {
  background: var(--line-strong);
}

.brand-path::after {
  background: repeating-linear-gradient(to bottom, var(--tech-blue) 0 6px, transparent 6px 18px);
  background-size: 100% 18px;
  opacity: 0.9;
  animation: brand-path-flow 1.4s linear infinite;
}

@keyframes brand-path-flow {
  to { background-position: 0 18px; }
}

.brand-path__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  opacity: 0;
  transform: translateX(16px);
}

.brand-path.aos-animate .brand-path__step {
  animation: brand-path-step-in 0.6s ease forwards;
}

.brand-path.aos-animate .brand-path__step:nth-child(1) { animation-delay: 0.1s; }
.brand-path.aos-animate .brand-path__step:nth-child(2) { animation-delay: 0.3s; }
.brand-path.aos-animate .brand-path__step:nth-child(3) { animation-delay: 0.5s; }

@keyframes brand-path-step-in {
  to { opacity: 1; transform: translateX(0); }
}

.brand-path__icon {
  position: relative;
  z-index: 1;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--line);
  font-size: 1.3rem;
  color: var(--tech-blue);
  overflow: hidden;
}

.brand-path__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: rgba(0, 77, 255, 0.38);
  filter: blur(6px);
}

.brand-path__body {
  padding-top: 6px;
}

.brand-path__index {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0 0 2px;
}

.brand-path__body strong {
  display: block;
  color: var(--text-hi);
  font-size: 1.05rem;
  margin-bottom: 2px;
}

.brand-path__body span {
  color: var(--text-dim);
  font-size: 0.88rem;
}

@media (prefers-reduced-motion: reduce) {
  .brand-path::after {
    animation: none;
    opacity: 0.6;
  }

  .brand-path__step {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 992px) {
  .home-why__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Process ---------- */

.home-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.home-step {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 22px;
  background: var(--ink-800);
  position: relative;
}

.home-step__num {
  font-family: 'Corbel', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--secondary);
  line-height: 1;
}

.home-step h3 {
  color: var(--text-hi);
  font-size: 1.1rem;
  margin: 14px 0 6px;
}

.home-step p {
  color: var(--text-dim);
  font-size: 0.88rem;
  margin: 0;
}

@media (max-width: 992px) {
  .home-process {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .home-process {
    grid-template-columns: 1fr;
  }
}

/* ---------- Team teaser ---------- */

.home-team {
  background:
    linear-gradient(to right, var(--tech-blue), transparent 55%) top / 100% 1px no-repeat,
    linear-gradient(to left, var(--accent), transparent 55%) bottom / 100% 1px no-repeat,
    var(--ink-950);
}

.home-team__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}

.home-team__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.home-team__card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 3 / 4;
}

.home-team__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-team__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(5, 7, 12, 0.94) 78%);
}

.home-team__caption strong {
  display: block;
  color: var(--text-hi);
  font-size: 0.98rem;
}

.home-team__caption span {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.home-team__story {
  color: var(--text-mid);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 20px;
}

.home-team__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-team__list li {
  color: var(--text-mid);
  font-size: 0.94rem;
  padding-left: 20px;
  position: relative;
}

.home-team__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary);
}

/* team/index.php's "Wie wir arbeiten" — icon-led principle cards
   instead of a plain bullet list. */
.team-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

/* Wide variant (Verevo case study, Build section): 4 items, full width. */
.team-principles--wide {
  grid-template-columns: repeat(4, 1fr);
  max-width: none;
}

@media (max-width: 900px) {
  .team-principles--wide {
    grid-template-columns: repeat(2, 1fr);
  }
}

.team-principles__item {
  text-align: center;
  padding: 8px;
}

/* Row variant: icon to the left of the text instead of stacked above
   it (M+P Bauelemente's Build section). */
.team-principles__item--row {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}

.team-principles__item--row .team-principles__icon {
  flex: none;
  align-self: center;
  margin: 0;
}

.team-principles__item--row p {
  min-height: 0;
}

.team-principles__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--line);
  font-size: 1.3rem;
  margin-bottom: 16px;
  overflow: hidden;
}

.team-principles__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  filter: blur(6px);
}

.team-principles__item h3 {
  color: var(--text-hi);
  font-size: 1.05rem;
  margin: 0 0 6px;
}

.team-principles__item p {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
  min-height: calc(1.55em * 2);
}

@media (max-width: 700px) {
  .team-principles {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 992px) {
  .home-team__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .home-team__photos {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Testimonials (continuous marquee) ---------- */

.home-testimonials__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.home-testimonials__track {
  display: flex;
  width: max-content;
}

.home-testimonials__group {
  flex: none;
  display: flex;
  gap: 28px;
  padding-right: 28px;
}

@media (prefers-reduced-motion: no-preference) {
  .home-testimonials__track {
    animation: home-marquee 60s linear infinite;
  }

  .home-testimonials__track:hover,
  .home-testimonials__track:focus-within,
  .home-testimonials__track.is-paused {
    animation-play-state: paused;
  }
}

@keyframes home-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.home-testimonial {
  flex: none;
  width: min(340px, 82vw);
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

/* Round avatars (56px) get 4px extra above/below so they occupy the
   same 64px as a logo — keeps every quote starting at the same height. */
.home-testimonial__avatar:not(.home-testimonial__avatar--logo) {
  margin-block: 4px;
}

/* Fixed-height quote area (5 clamped lines + the "Weiterlesen" row), so
   every card is the same size and name/role always sit in the same spot. */
.home-testimonial__body {
  height: calc(5 * 1.7 * 0.96rem + 1.19rem + 4px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
}

.home-testimonial__more {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--tech-blue-soft);
  cursor: pointer;
  flex: none;
  border-radius: 4px;
}

.home-testimonial__more[hidden] {
  display: none;
}

.home-testimonial__more:hover {
  color: var(--text-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home-testimonial__more:focus-visible {
  outline: 2px solid var(--tech-blue-soft);
  outline-offset: 3px;
}

.home-testimonial__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: var(--tech-blue-soft);
  font-size: 1.3rem;
  overflow: hidden;
  flex: none;
}

.home-testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logo instead of a photo (e.g. a client's own logo instead of a
   headshot): contain + padding instead of cropping to fill the circle. */
.home-testimonial__avatar--logo {
  width: auto;
  height: 64px;
  border: none;
  background: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}

.home-testimonial__avatar--logo img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

.home-testimonial__quote {
  color: var(--text-mid);
  font-size: 0.96rem;
  line-height: 1.7;
  margin: 0;
}

.home-testimonial__quote:not(.home-testimonial__quote--placeholder) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  max-height: calc(5 * 1.7em);
  flex: none;
}

/* Quote still pending — a quiet skeleton instead of empty space or
   invented filler text. */
.home-testimonial__quote--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 100%;
}

.home-testimonial__quote--placeholder span {
  display: block;
  height: 10px;
  width: 100%;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}

.home-testimonial__quote--placeholder span:nth-child(2) {
  width: 88%;
}

.home-testimonial__quote--placeholder span:nth-child(3) {
  width: 62%;
}

.home-testimonial__name {
  color: var(--text-hi);
  font-size: 0.95rem;
}

.home-testimonial__role {
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1.45;
  /* Reserve two lines (some roles use <br>) so names line up across cards. */
  min-height: calc(2 * 1.45em);
}

/* ---------- Testimonial full-quote dialog ---------- */

.home-testimonial-dialog {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  margin: auto;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  color: var(--text-mid);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: auto;
}

.home-testimonial-dialog::backdrop {
  background: rgba(5, 7, 12, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.home-testimonial-dialog__inner {
  position: relative;
  padding: 44px 32px 32px;
}

.home-testimonial-dialog__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.home-testimonial-dialog__quote {
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 4px;
}

.home-testimonial-dialog__content .home-testimonial__role {
  min-height: 0;
}

.home-testimonial-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-hi);
  cursor: pointer;
}

.home-testimonial-dialog__close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.home-testimonial-dialog__close:focus-visible {
  outline: 2px solid var(--tech-blue-soft);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .home-testimonial-dialog__inner {
    padding: 48px 20px 24px;
  }
}

/* ---------- Final CTA ---------- */

.home-final {
  background: var(--ink-950);
  text-align: center;
  position: relative;
  isolation: isolate;
}

/* Only the homepage needs a seam here: .home-testimonials has no
   background/border of its own, so it's the one case where .home-final
   switching to ink-950 isn't already marked by a preceding section's
   own bottom border. Subpages (Build/Brand/Make) go straight from a
   section that already draws its own bottom border into .home-final,
   so adding one here too would double it up. */
.home-testimonials + .home-final {
  background:
    linear-gradient(to right, var(--tech-blue), transparent 55%) top / 100% 1px no-repeat,
    var(--ink-950);
}

.home-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(680px 380px at 50% 0%, rgba(0, 77, 255, 0.22), transparent 70%);
}

.home-final__inner {
  position: relative;
  z-index: 1;
}

.home-final__inner {
  max-width: 720px;
  margin: 0 auto;
}

.home-final h2 {
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.home-final .home-lede {
  margin: 18px auto 0;
  max-width: 520px;
}

.home-final .home-btn {
  margin-top: 32px;
}

/* ---------- Inner pages (Build / Brand / Make / Projekte / Inside / Kontakt) ---------- */

.home-main .page-hero {
  padding-top: 150px;
  padding-bottom: 76px;
  text-align: center;
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(to left, var(--accent), transparent 55%) bottom / 100% 1px no-repeat,
    var(--ink-950);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  opacity: 0.5;
  z-index: -2;
}

.page-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(560px 360px at 50% 0%, var(--page-glow, rgba(0, 77, 255, 0.24)), transparent 70%);
}

.page-hero__label {
  display: inline-block;
  font-family: 'Corbel', sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 18px;
}

.page-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
}

.page-hero .home-lede {
  margin: 20px auto 0;
  max-width: 620px;
}

.page-intro {
  max-width: 760px;
}

/* ---------- Make page: a hang-tag rack — six product tags dangling
   from a rail and swaying gently, like real merch tags, instead of a
   flat card grid. Entrance (opacity) and the continuous sway
   (transform: rotate) are two separate animations on separate
   properties so they don't fight each other. */
.make-rack {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px 22px;
  padding-top: 50px;
}

.make-rack__bar {
  position: absolute;
  top: 0;
  left: 4%;
  right: 4%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--tech-blue), var(--accent));
  opacity: 0.55;
}

.make-rack__tag {
  position: relative;
  width: 150px;
  padding: 22px 14px 18px;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
  transform-origin: top center;
  opacity: 0;
  box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.6);
}

.make-rack__tag::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 50%;
  width: 1px;
  height: 34px;
  background: var(--line-strong);
}

.make-rack__tag::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--ink-950);
}

.make-rack__tag i {
  display: block;
  font-size: 1.6rem;
  margin-top: 6px;
}

.make-rack__tag h3 {
  color: var(--text-hi);
  font-size: 0.95rem;
  margin: 12px 0 4px;
  hyphens: auto;
  overflow-wrap: break-word;
}

.make-rack__tag p {
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}

.make-rack.aos-animate .make-rack__tag {
  animation: make-rack-fade-in 0.5s ease forwards, make-rack-sway 4.6s ease-in-out infinite;
  animation-delay: var(--d, 0s), var(--d, 0s);
}

@keyframes make-rack-fade-in {
  to { opacity: 1; }
}

@keyframes make-rack-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .make-rack__tag {
    animation: make-rack-fade-in 0.01s linear forwards !important;
  }
}

/* ---------- Tech mesh (Build page): a real network — 6 icons at
   staggered positions, each connected to several others (not just one
   neighbor), with flowing animated connections. Same glow-behind-icon
   treatment as the pillar/radial icons elsewhere. ---------- */
.tech-mesh {
  position: relative;
  width: 100%;
  height: 280px;
  margin-top: 20px;
}

.tech-mesh__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tech-mesh__line {
  stroke: var(--tech-blue);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 3 7;
  opacity: 0.5;
  animation: tech-mesh-flow 1.4s linear infinite;
}

@keyframes tech-mesh-flow {
  to { stroke-dashoffset: -20; }
}

@media (prefers-reduced-motion: reduce) {
  .tech-mesh__line {
    animation: none;
  }
}

.tech-mesh__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 130px;
  text-align: center;
  opacity: 0;
}

.tech-mesh.aos-animate .tech-mesh__node {
  animation: tech-mesh-in 0.5s ease both;
}

.tech-mesh.aos-animate .tech-mesh__node:nth-child(2) { animation-delay: 0.05s; }
.tech-mesh.aos-animate .tech-mesh__node:nth-child(3) { animation-delay: 0.1s; }
.tech-mesh.aos-animate .tech-mesh__node:nth-child(4) { animation-delay: 0.15s; }
.tech-mesh.aos-animate .tech-mesh__node:nth-child(5) { animation-delay: 0.2s; }
.tech-mesh.aos-animate .tech-mesh__node:nth-child(6) { animation-delay: 0.25s; }
.tech-mesh.aos-animate .tech-mesh__node:nth-child(7) { animation-delay: 0.3s; }

@keyframes tech-mesh-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tech-mesh__node {
    opacity: 1;
    animation: none;
  }
}

.tech-mesh__icon {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--tech-blue-soft);
  font-size: 1.3rem;
  overflow: hidden;
}

.tech-mesh__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  filter: blur(6px);
  z-index: -1;
}

.tech-mesh__icon .juv {
  width: 22px;
  height: 22px;
}

.tech-mesh__label {
  color: var(--text-mid);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 860px) {
  .tech-mesh {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .tech-mesh__svg {
    display: none;
  }

  .tech-mesh__node {
    position: static;
    transform: none;
    top: auto !important;
    left: auto !important;
    flex-direction: row;
    width: auto;
    text-align: left;
  }

  .tech-mesh.aos-animate .tech-mesh__node {
    animation: none;
    opacity: 1;
  }

  .tech-mesh__label {
    flex: 1;
  }
}


/* ---------- Brand board (Brand page): a design-tool style mockup —
   type + color swatches on a grid canvas, with the 6 discipline names as
   floating, gently bobbing tags — instead of another card grid or the
   Build page's network. ---------- */
.brand-board {
  background: var(--ink-950);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.brand-board__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
}

.brand-board__dots {
  display: flex;
  gap: 6px;
}

.brand-board__dots i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.brand-board__dots i:nth-child(1) { background: #ff5f56; }
.brand-board__dots i:nth-child(2) { background: #ffbd2e; }
.brand-board__dots i:nth-child(3) { background: #27c93f; }

.brand-board__title {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
}

.brand-board__canvas {
  position: relative;
  height: 340px;
  padding: 28px;
  overflow: hidden;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
}

.brand-board__canvas::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 20%, rgba(0, 77, 255, 0.3), transparent 55%),
    radial-gradient(circle at 78% 75%, rgba(239, 120, 26, 0.26), transparent 55%);
  filter: blur(40px);
  pointer-events: none;
}

.brand-board__type {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: 'Corbel', sans-serif;
  font-weight: 700;
  font-size: 3.6rem;
  line-height: 1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-board__underline {
  position: absolute;
  left: 2px;
  bottom: -10px;
  width: 90px;
  height: 10px;
}

.brand-board__swatches {
  position: absolute;
  z-index: 1;
  top: 28px;
  right: 28px;
  display: flex;
}

.brand-board__swatch {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--ink-950);
  margin-left: -10px;
  transition: transform 0.25s ease;
}

.brand-board__swatch:first-child {
  margin-left: 0;
}

.brand-board__swatch:nth-child(1) { transform: translateY(2px) rotate(-4deg); }
.brand-board__swatch:nth-child(2) { transform: translateY(-5px) rotate(3deg); }
.brand-board__swatch:nth-child(3) { transform: translateY(4px) rotate(-3deg); }
.brand-board__swatch:nth-child(4) { transform: translateY(-3px) rotate(5deg); }

.brand-board__swatches:hover .brand-board__swatch {
  transform: translateY(0) rotate(0deg);
}

.brand-board__tag {
  position: absolute;
  z-index: 1;
  top: var(--y);
  left: var(--x);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--text-hi);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
  animation: brand-board-float 3.2s ease-in-out infinite;
  animation-delay: var(--d);
}

@keyframes brand-board-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-8px) rotate(var(--r, 0deg)); }
}

/* The Ve mark, drawn live in one continuous story on a 14s loop:
   ML (blue) walks over and clicks the "Grafikdesign" tag, then hands
   off to a brush that traces the "V" stroke exactly on the path; JW
   (orange) picks up and brushes the "E". The brush markers are plain
   SVG <circle>s living inside the SAME <svg> as the strokes, with
   offset-path set to the exact same "d" string (copy-pasted, not
   rescaled) — since both live in the same SVG user-coordinate space,
   the tip is exactly on the line by construction, not approximated.
   Once drawn, V stays visible while E is drawn (they fade out together
   at the very end of the cycle) instead of V vanishing mid-story. */
.brand-board__logo {
  position: absolute;
  top: 26%;
  left: 50%;
  width: 92px;
  height: 92px;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

.brand-board__logo-v {
  fill: none;
  stroke: var(--tech-blue);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: brand-board-draw-v 14s linear infinite;
}

.brand-board__logo-e {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: brand-board-draw-e 14s linear infinite;
}

@keyframes brand-board-draw-v {
  0%, 39% { stroke-dashoffset: 100; opacity: 0; }
  40%     { stroke-dashoffset: 100; opacity: 1; }
  68%     { stroke-dashoffset: 0; opacity: 1; }
  97%     { stroke-dashoffset: 0; opacity: 1; }
  99%     { stroke-dashoffset: 0; opacity: 0; }
  100%    { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes brand-board-draw-e {
  0%, 75% { stroke-dashoffset: 100; opacity: 0; }
  76%     { stroke-dashoffset: 100; opacity: 1; }
  95%     { stroke-dashoffset: 0; opacity: 1; }
  97%     { stroke-dashoffset: 0; opacity: 1; }
  99%     { stroke-dashoffset: 0; opacity: 0; }
  100%    { stroke-dashoffset: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-board__logo-v,
  .brand-board__logo-e {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.9;
  }
}

/* Pill cursors: a plain mouse pointer for the "walk over and click the
   tag" phase, always opaque while moving or holding. After the click it
   travels on, STILL fully visible, all the way to where the brush takes
   over (the V path's own start point, expressed as a fixed pixel offset
   from the logo's own 50%/26% anchor via calc() — exact regardless of
   the canvas's fluid width) and only fades out once it has arrived
   there. The brush fades in at that exact same spot at the same time,
   so the handoff is a same-place crossfade, not a jump-then-vanish. */
.brand-board__cursor {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-board__cursor svg {
  flex: none;
  fill: currentColor;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.brand-board__cursor span {
  padding: 3px 8px;
  border-radius: 7px;
  color: #05070c;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Click ring: fires once, right as the ML cursor arrives on the tag. */
.brand-board__cursor--ml::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: brand-board-click-ring 14s ease infinite;
}

@keyframes brand-board-click-ring {
  0%, 19% { transform: scale(0.4); opacity: 0; }
  21%     { transform: scale(0.55); opacity: 0.9; }
  26%     { transform: scale(1.8); opacity: 0; }
  100%    { transform: scale(0.4); opacity: 0; }
}

.brand-board__cursor--ml {
  color: var(--tech-blue);
  animation: brand-board-cursor-ml 14s ease-in-out infinite;
}

.brand-board__cursor--ml span {
  background: var(--tech-blue);
}

@keyframes brand-board-cursor-ml {
  0%, 3%  { top: 74%; left: 8%; opacity: 0; }
  7%      { top: 74%; left: 8%; opacity: 1; }
  20%     { top: 58%; left: 68%; opacity: 1; }
  27%     { top: 58%; left: 68%; opacity: 1; }
  34%     { top: calc(26% + 15px); left: calc(50% - 6px); opacity: 1; }
  37%     { top: calc(26% + 15px); left: calc(50% - 6px); opacity: 1; }
  40%     { top: calc(26% + 15px); left: calc(50% - 6px); opacity: 0; }
  100%    { top: 74%; left: 8%; opacity: 0; }
}

.brand-board__cursor--jw {
  color: var(--accent);
  animation: brand-board-cursor-jw 14s linear infinite;
}

.brand-board__cursor--jw span {
  background: var(--accent);
}

@keyframes brand-board-cursor-jw {
  0%, 100% { top: 70%; left: 92%; opacity: 0; }
}

/* Tag highlight while ML "clicks" it, same window as the ML cursor
   arriving and holding above (20%-27%). */
.brand-board__tag--target {
  animation: brand-board-float 3.2s ease-in-out infinite, brand-board-tag-click 14s ease infinite;
}

@keyframes brand-board-tag-click {
  0%, 19%   { box-shadow: 0 0 18px rgba(255, 255, 255, 0.12); border-color: var(--line); }
  21%       { box-shadow: 0 0 0 3px var(--tech-blue), 0 0 24px rgba(0, 77, 255, 0.5); border-color: var(--tech-blue); }
  27%       { box-shadow: 0 0 0 3px var(--tech-blue), 0 0 24px rgba(0, 77, 255, 0.5); border-color: var(--tech-blue); }
  30%, 100% { box-shadow: 0 0 18px rgba(255, 255, 255, 0.12); border-color: var(--line); }
}

/* Brush markers: plain SVG circles living inside .brand-board__logo
   itself (see markup), with offset-path set to the exact same "d" as
   the stroke they follow — same coordinate space, so offset-distance
   0%-100% tracks the visible line exactly. Each fades in stationary at
   its own path's start, exactly as the handing-off cursor/brush fades
   out stationary at its own spot — overlapping windows, no gap. */
.brand-board__brush {
  offset-distance: 0%;
  offset-rotate: auto;
  opacity: 0;
}

.brand-board__brush--ml {
  fill: var(--tech-blue);
  filter: drop-shadow(0 0 5px var(--tech-blue)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
  animation: brand-board-brush-ml 14s linear infinite;
}

@keyframes brand-board-brush-ml {
  0%, 37% { offset-distance: 0%; opacity: 0; }
  40%     { offset-distance: 0%; opacity: 1; }
  68%     { offset-distance: 100%; opacity: 1; }
  71%     { offset-distance: 100%; opacity: 1; }
  74%     { offset-distance: 100%; opacity: 0; }
  100%    { offset-distance: 0%; opacity: 0; }
}

.brand-board__brush--jw {
  fill: var(--accent);
  filter: drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
  animation: brand-board-brush-jw 14s linear infinite;
}

@keyframes brand-board-brush-jw {
  0%, 71% { offset-distance: 0%; opacity: 0; }
  74%     { offset-distance: 0%; opacity: 1; }
  76%     { offset-distance: 0%; opacity: 1; }
  95%     { offset-distance: 100%; opacity: 1; }
  97%     { offset-distance: 100%; opacity: 1; }
  99%     { offset-distance: 100%; opacity: 0; }
  100%    { offset-distance: 0%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-board__tag--target,
  .brand-board__cursor--ml,
  .brand-board__cursor--jw,
  .brand-board__brush--ml,
  .brand-board__brush--jw {
    animation: none;
  }

  .brand-board__cursor--ml,
  .brand-board__cursor--jw,
  .brand-board__brush--ml,
  .brand-board__brush--jw {
    opacity: 0;
  }
}

@media (max-width: 700px) {
  .brand-board__canvas {
    height: auto;
    min-height: 200px;
    padding-bottom: 24px;
  }

  .brand-board__tag {
    position: static;
    display: inline-flex;
    margin: 8px 8px 0 0;
    animation: none;
  }

  .brand-board__cursor {
    display: none;
  }

  .brand-board__brush {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 420px) {
  .make-rack__tag {
    width: 132px;
  }
}

.approach-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

@media (max-width: 900px) {
  .approach-block {
    grid-template-columns: 1fr;
  }
}

.projects-filter {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
  padding: 0;
}

.projects-filter li {
  padding: 9px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  color: var(--text-hi);
  font-family: 'Corbel', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.projects-filter li:hover {
  border-color: var(--tech-blue-soft);
  background: rgba(0, 153, 255, 0.08);
  transform: translateY(-2px);
}

.projects-filter li.is-active {
  background: linear-gradient(180deg, #161c31, #0a0e18);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-hi);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 0 22px rgba(0, 77, 255, 0.24), 0 0 42px rgba(239, 120, 26, 0.1);
}

/* ---------- Contact form ---------- */

.contact-form .form-control {
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--text-hi);
  border-radius: 10px;
  padding: 12px 16px;
}

.contact-form .form-control::placeholder {
  color: var(--text-dim);
}

.contact-form .form-control:focus {
  background: var(--ink-800);
  border-color: var(--tech-blue-soft);
  color: var(--text-hi);
  box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.15);
}

.contact-form label {
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
  color: var(--text-mid);
  font-size: 0.88rem;
}

.contact-form h4 {
  margin-top: 20px;
  color: var(--text-hi);
  font-size: 1.1rem;
}

.contact-form__privacy {
  color: #ffffff;
  font-size: 0.78rem;
  line-height: 1.6;
}

.contact-info-link {
  color: var(--text-mid);
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-hi);
  margin-right: 8px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.social-links a:hover {
  border-color: var(--line-strong);
  color: var(--accent);
}

/* ---------- Legal pages (Impressum / Datenschutz / AGB) ---------- */

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  align-items: start;
  padding-bottom: 40px;
}

.legal-toc {
  position: sticky;
  top: 110px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ink-800);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.legal-toc p {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.legal-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-toc li > ul {
  margin: 8px 0 0 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  gap: 6px;
}

.legal-toc a {
  color: var(--text-mid);
  font-size: 0.88rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-toc li > ul a {
  color: var(--text-dim);
  font-size: 0.82rem;
}

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

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
    max-height: none;
  }
}

.legal-content {
  max-width: 760px;
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.8;
}

.legal-content h1 {
  color: var(--text-hi);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: 28px;
  font-family: 'Corbel', sans-serif;
  font-weight: 700;
}

.legal-content h2 {
  color: var(--text-hi);
  font-size: 1.4rem;
  margin: 40px 0 14px;
  font-family: 'Corbel', sans-serif;
  font-weight: 700;
}

.legal-content h3 {
  color: var(--text-hi);
  font-size: 1.1rem;
  margin: 28px 0 10px;
  font-family: 'Corbel', sans-serif;
  font-weight: 700;
}

.legal-content h4 {
  color: var(--text-mid);
  font-size: 1rem;
  margin: 20px 0 8px;
  font-family: 'Corbel', sans-serif;
  font-weight: 700;
}

.legal-content p {
  margin: 0 0 16px;
}

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

.legal-content a {
  color: var(--tech-blue-soft);
  text-decoration: underline;
}

.legal-content strong {
  color: var(--text-hi);
}

/* ==========================================================================
   Verevo case study (projekte/verevo) — real brand tokens confirmed from
   the actual Verevo/eazyclub codebase (assets/functions/... this file is
   the Juveo site, the tokens below just mirror the real, live values):
   mint #6DDCCF, blue #1059C0, violet #A259FF, nacht #13111A.
   ========================================================================== */

.home-main .verevo-hero {
  position: relative;
  padding: clamp(140px, 14vw, 190px) 0 clamp(48px, 6vw, 72px);
  overflow: clip;
  isolation: isolate;
  background: var(--ink-950);
}

.verevo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
  opacity: 0.6;
}

.verevo-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(560px 420px at 12% 20%, rgba(0, 77, 255, 0.28), transparent 65%),
    radial-gradient(620px 460px at 88% 70%, rgba(239, 120, 26, 0.22), transparent 65%);
}

/* Verevo's own brand glow (teal + blue) — only on the Verevo case study,
   the base .verevo-hero glow above is Juveo's neutral blue/orange so
   this reusable "big project hero" component doesn't carry Verevo's
   brand colors onto other project pages that reuse it (e.g. M+P). */
.verevo-hero--brand-verevo::after {
  background:
    radial-gradient(560px 420px at 12% 20%, rgba(109, 220, 207, 0.22), transparent 65%),
    radial-gradient(620px 460px at 88% 70%, rgba(16, 89, 192, 0.26), transparent 65%);
}

.verevo-hero--brand-verevo .verevo-hero__label {
  --hero-label-border: rgba(109, 220, 207, 0.3);
  --hero-label-bg: rgba(109, 220, 207, 0.08);
  --hero-label-color: #6ddccf;
}

/* M+P Bauelemente's own brand red (#ec1d25, confirmed from their live
   site CSS), same idea as Verevo's modifier above. */
.verevo-hero--brand-mp::after {
  background:
    radial-gradient(560px 420px at 12% 20%, rgba(236, 29, 37, 0.22), transparent 65%),
    radial-gradient(620px 460px at 88% 70%, rgba(236, 29, 37, 0.14), transparent 65%);
}

.verevo-hero--brand-mp .verevo-hero__label {
  --hero-label-border: rgba(236, 29, 37, 0.3);
  --hero-label-bg: rgba(236, 29, 37, 0.08);
  --hero-label-color: #ec1d25;
}

.verevo-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}

.verevo-hero__label {
  --hero-label-border: rgba(0, 77, 255, 0.3);
  --hero-label-bg: rgba(0, 77, 255, 0.08);
  --hero-label-color: var(--tech-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--hero-label-border);
  background: var(--hero-label-bg);
  color: var(--hero-label-color);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.verevo-hero__sub {
  color: var(--text-hi);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  margin: 10px 0 16px;
}

.verevo-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.verevo-hero__visual {
  position: relative;
}

.verevo-hero__visual img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.55));
}

/* Hero device composite: real website (laptop) + real app (phone),
   phone tucked in front of the laptop's bottom-right corner. */
.verevo-hero__devices {
  position: relative;
}

.verevo-hero__devices-laptop {
  width: 100%;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}

.verevo-hero__devices-phone {
  position: absolute;
  width: 25%;
  right: -2%;
  bottom: -8%;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

/* Real device mockups (laptop + phone), pre-rendered with their own
   shadow — no CSS device frame needed. Shared across case studies. */
.device-mockup img {
  width: 100%;
  height: auto;
  display: block;
}

.device-mockup--phone {
  max-width: 320px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .verevo-hero__grid {
    grid-template-columns: 1fr;
  }
  .verevo-hero__visual {
    order: -1;
    max-width: 460px;
    margin: 0 auto;
  }
  .verevo-hero__devices {
    order: -1;
    max-width: 420px;
    margin: 0 auto 30px;
  }
}

/* Project info card: label/value rows, used alongside the overview copy. */
.project-info-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 26px;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-info-card__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.project-info-card__row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.project-info-card__label {
  color: var(--text-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.project-info-card__value {
  color: var(--text-hi);
  font-size: 0.92rem;
  font-weight: 700;
  text-align: right;
}

.project-info-card__value a {
  color: inherit;
  text-decoration: none;
}

.project-info-card__value a:hover {
  color: #6ddccf;
}

/* Visual break: near-viewport-filling moment, real Verevo signet only,
   deliberately sparse. */
.visual-break {
  position: relative;
  min-height: clamp(360px, 60vh, 640px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.visual-break::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 78%);
  opacity: 0.55;
}

.visual-break::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(560px 420px at 50% 45%, rgba(109, 220, 207, 0.24), transparent 68%);
}

.visual-break__mark {
  width: clamp(220px, 30vw, 380px);
  height: auto;
  margin-bottom: clamp(20px, 4vw, 36px);
  filter: drop-shadow(0 20px 50px rgba(109, 220, 207, 0.25));
}

.visual-break__text {
  font-family: 'Corbel', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.1;
  color: var(--text-hi);
  margin: 0;
}

/* Technical pipeline: horizontal steps with a connecting line — same
   idea as .brand-path (services/brand) just laid out sideways. */
.tech-pipeline {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px 12px;
  margin-top: clamp(32px, 5vw, 56px);
}

.tech-pipeline::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 4%;
  right: 4%;
  height: 2px;
  background: var(--line-strong);
  z-index: 0;
}

.tech-pipeline__step {
  position: relative;
  z-index: 1;
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.tech-pipeline__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--line-strong);
  color: #6ddccf;
  font-size: 1.05rem;
}

.tech-pipeline__step span {
  color: var(--text-mid);
  font-size: 0.82rem;
  font-weight: 600;
  max-width: 110px;
}

@media (max-width: 700px) {
  .tech-pipeline {
    flex-direction: column;
    align-items: flex-start;
  }
  .tech-pipeline::before {
    top: 4%;
    bottom: 4%;
    left: 19px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .tech-pipeline__step {
    flex-direction: row;
    text-align: left;
  }
}

/* MAKE bento: an asymmetric collage grid instead of another uniform
   card row — some tiles are explicitly labelled "Mockup" where the
   physical piece isn't a claim of something actually produced. */
.make-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 140px;
  gap: 16px;
  margin-top: clamp(32px, 5vw, 56px);
}

.make-bento__item {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
}

.make-bento__item--wide {
  grid-column: span 2;
}

.make-bento__item--tall {
  grid-row: span 2;
}

.make-bento__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.9;
}

.make-bento__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(0deg, rgba(5, 7, 12, 0.9) 0%, rgba(5, 7, 12, 0.15) 65%, transparent 100%);
}

.make-bento__item__label {
  position: relative;
  z-index: 1;
  color: var(--text-hi);
  font-weight: 700;
  font-size: 0.88rem;
}

.make-bento__item__tag {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(5, 7, 12, 0.6);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: fit-content;
}

@media (max-width: 900px) {
  .make-bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .make-bento__item--wide {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  .make-bento {
    grid-template-columns: 1fr;
  }
  .make-bento__item--wide,
  .make-bento__item--tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* Details showcase: deliberately looser layout, scattered small crops
   at slightly different sizes/offsets instead of a tidy grid. */
.details-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 520px;
  margin: clamp(32px, 5vw, 56px) auto 0;
}

.details-showcase__item {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

.details-showcase__item i {
  font-size: 1.6rem;
  color: #6ddccf;
}

.details-showcase__item img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

@media (max-width: 700px) {
  .details-showcase {
    grid-template-columns: repeat(2, 1fr);
    max-width: 280px;
  }
}

/* Outro status chips — factual, not invented metrics. */
.outro-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 32px 0;
}

.outro-stats__chip {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(109, 220, 207, 0.06);
  color: var(--text-hi);
  font-weight: 700;
  font-size: 0.9rem;
}

/* Real photo frame (M+P Bauelemente case study): a plain framed photo,
   same border/radius language as the device mockups, for the one
   section backed by an actual photograph instead of a mockup. */
.mp-photo {
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
}

.mp-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Next project nav */
.next-project {
  display: block;
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--line);
  overflow: hidden;
  text-decoration: none;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 28px;
}

.next-project::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 140% at 85% 15%, rgba(239, 120, 26, 0.2), transparent 60%),
    var(--ink-800);
}

.next-project::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.5;
}

.next-project__inner {
  position: relative;
  z-index: 1;
}

.next-project__label {
  display: block;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.next-project__title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-hi);
  font-family: 'Corbel', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-decoration: none;
}

.next-project:hover .next-project__title {
  color: var(--text-hi);
}

.next-project__title i {
  transition: transform 0.2s ease;
}

.next-project:hover .next-project__title i {
  transform: translateX(4px);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .home-main [data-aos] {
    transition-duration: 0.01ms !important;
    animation: none !important;
    transform: none !important;
  }
  .home-pillar:hover,
  .home-btn:hover {
    transform: none;
  }
}