/* ── Hero v18.1 ─────────────────────────────────────────── */

/* ── Hero shell ─────────────────────────────────────────── */
.v181-hero {
  position: relative; min-height: 100vh; background: #060206;
  overflow: hidden; display: flex; flex-direction: column;
  justify-content: center;
}

/* ── Mesh gradient ──────────────────────────────────────── */
.v181-mesh { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.v181-blob {
  position: absolute; border-radius: 50%; filter: blur(90px);
  will-change: transform; animation-fill-mode: both;
}
.v181-blob-1 {
  width: 70%; height: 110%;
  background: radial-gradient(circle, rgba(220,80,15,0.85) 0%, transparent 60%);
  top: -30%; left: -20%;
  animation: v181drift1 8s ease-in-out infinite alternate; animation-delay: -2s;
}
.v181-blob-2 {
  width: 65%; height: 95%;
  background: radial-gradient(circle, rgba(225,30,40,0.82) 0%, transparent 60%);
  top: 5%; left: 5%;
  animation: v181drift2 10s ease-in-out infinite alternate; animation-delay: -4s;
}
.v181-blob-3 {
  width: 70%; height: 100%;
  background: radial-gradient(circle, rgba(215,18,100,0.82) 0%, transparent 60%);
  top: 0%; left: 20%;
  animation: v181drift3 9s ease-in-out infinite alternate; animation-delay: -1s;
}
.v181-blob-4 {
  width: 65%; height: 95%;
  background: radial-gradient(circle, rgba(160,12,195,0.80) 0%, transparent 60%);
  top: -5%; left: 40%;
  animation: v181drift4 12s ease-in-out infinite alternate; animation-delay: -5s;
}
.v181-blob-5 {
  width: 55%; height: 85%;
  background: radial-gradient(circle, rgba(75,10,160,0.77) 0%, transparent 60%);
  top: 8%; left: 58%;
  animation: v181drift5 14s ease-in-out infinite alternate; animation-delay: -3s;
}

/* ── Performance-optimized animations with 3D transforms ── */
@keyframes v181drift1 {
  0%   { transform: translate3d(0,    0,    0) scale(1);    }
  50%  { transform: translate3d(20%,  25%,  0) scale(1.15); }
  100% { transform: translate3d(-15%, 30%,  0) scale(0.85); }
}
@keyframes v181drift2 {
  0%   { transform: translate3d(0,    0,    0) scale(1);    }
  40%  { transform: translate3d(25%, -20%,  0) scale(1.12); }
  100% { transform: translate3d(-18%, 28%,  0) scale(1.20); }
}
@keyframes v181drift3 {
  0%   { transform: translate3d(0,    0,    0) scale(1);    }
  50%  { transform: translate3d(-18%, 25%,  0) scale(1.15); }
  100% { transform: translate3d(22%,  -18%, 0) scale(0.88); }
}
@keyframes v181drift4 {
  0%   { transform: translate3d(0,    0,    0) scale(1);    }
  35%  { transform: translate3d(-25%, 20%,  0) scale(1.18); }
  100% { transform: translate3d(18%,  28%,  0) scale(0.82); }
}
@keyframes v181drift5 {
  0%   { transform: translate3d(0,    0,    0) scale(1);    }
  60%  { transform: translate3d(-20%,-25%,  0) scale(1.20); }
  100% { transform: translate3d(16%,  18%,  0) scale(0.85); }
}

/* ── Reduced motion support ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v181-blob { animation: none; }
  .v181-cursor { animation: none; opacity: 1; }
  .v181-cta { transition: none; }
}

/* ── Content ────────────────────────────────────────────── */
.v181-content { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 80px; }
.v181-headline { margin: 0 0 15px; line-height: 1; }
.v181-hl-label {
  display: block; font-family: var(--v181-label-font); font-size: 0.82rem;
  font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 10px;
}
.v181-reel {
  font-family: var(--v181-reel-font); font-size: clamp(2.2rem, 6.5vw, 6rem);
  font-weight: var(--v181-reel-weight); display: block; line-height: 1.1; color: #fff;
  min-height: 1.21em; font-display: swap;
}
.v181-text { display: inline; }

/* ── Cursor ─────────────────────────────────────────────── */
.v181-cursor {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  background: #fff;
  vertical-align: -0.02em;
  margin-left: 0.06em;
  border-radius: 1px;
  animation: v181blink 1s ease-in-out infinite;
}
@keyframes v181blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Body / CTA / Logos ─────────────────────────────────── */
.v181-body { font-size: 1.315rem; line-height: 1.8; color: rgba(255,255,255,0.65); max-width: 510px; margin: 0 0 36px; }
.v181-body strong { color: rgba(255,255,255,0.95); font-weight: 600; }
.v181-cta {
  display: inline-block; font-family: 'Adieu', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.875rem; font-weight: 300; letter-spacing: 0.7px; text-transform: uppercase;
  color: #000; background: #fff; padding: 0.9rem 2rem;
  text-decoration: none; border-radius: 0; border: none;
  transition: transform 0.2s ease;
}
.v181-cta:hover { transform: scale(1.05); }
.v181-logos { position: absolute; bottom: 10px; left: 0; right: 0; z-index: 3; padding-bottom: 32px; }

/* ── Performance: Contain paint and layout ─────────────── */
.v181-mesh { contain: layout paint; }
.v181-blob { contain: layout paint style; }

/* ── Mobile logo consistency ────────────────────────────── */
/* Scoped to .v181-logos — to roll back, delete this block. */
@media (max-width: 767px) {
  .v181-hero {
    justify-content: flex-start;
    padding-top: 100px;
  }
  .v181-logos {
    position: relative;
    bottom: auto;
    padding-bottom: 40px;
  }
  .v181-logos .logo-cont {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0;
  }
  .v181-logos .logo-cont-inner {
    width: 160px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 0;
  }
  .v181-logos .client-logo-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}