@keyframes float {
  50% { transform: translate3d(-3vw, 4vh, 0) rotate(20deg) scale(1.06); }
}
@keyframes wobble {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg)); }
  50% { transform: translate3d(16px, -18px, 0) rotate(calc(var(--tilt, 0deg) + 4deg)); }
}
@keyframes cover { to { transform: scaleY(1); } }
@keyframes reveal { to { transform: scaleY(0); } }
@keyframes word { to { opacity: 1; transform: none; } }
@keyframes configOut {
  to { opacity: 0; filter: blur(12px); transform: translateY(-26px) scale(.98); }
}

.reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }

.hero h1 .split-word {
  opacity: 0;
  transform: translateY(110%);
  animation: word .9s var(--ease) forwards;
}
.hero h1 .split-word:nth-child(2) { animation-delay: .08s; }
.hero h1 .split-word:nth-child(3) { animation-delay: .16s; }

.config-card.is-picked {
  z-index: 3;
  transform: scale(1.1);
  background: var(--lime);
  color: #09090c;
  border-color: var(--lime);
  box-shadow: 0 0 90px #c9ff6380;
}
.config-card.is-picked i,
.config-card.is-picked em { color: #101010; }
.config-card.is-picked span { color: #222; }
.config-grid.is-picking .config-card:not(.is-picked) {
  opacity: 0;
  transform: scale(.82);
  filter: blur(10px);
}
.config-screen.is-exiting {
  display: block;
  pointer-events: none;
  animation: configOut .3s var(--ease) both;
}

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

.brand--logo img,
.brand img {
  display: block;
  width: 138px;
  height: auto;
}
.final-icon {
  width: clamp(48px, 7vw, 92px);
  height: auto;
  margin: 3vh 0 1vh;
}
.final-wordmark {
  display: block;
  width: min(260px, 55vw);
  height: auto;
  margin: 3vh 0 1vh;
}

.recommendations {
  margin: 32px 0 24px;
  padding: 22px;
  border: 1px solid #c9ff6360;
  border-radius: 18px;
  background: linear-gradient(120deg, #c9ff6318, #ffffff08 60%);
}
.recommendation-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.recommendation-heading .eyebrow { color: var(--lime); white-space: nowrap; }
.recommendation-heading p { max-width: 380px; margin: 0; font-size: .7rem; line-height: 1.5; color: #c7c7ce; }
.recommendation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 22px; }
.recommend-card { padding: 16px; border: 1px solid #ffffff21; border-radius: 12px; background: #0c0c16b8; transition: transform .35s var(--ease), border-color .35s, background .35s; }
.recommend-card:hover { transform: translateY(-3px); border-color: #c9ff6388; }
.recommend-card.is-selected { background: #c9ff63; color: #0a0a0e; border-color: var(--lime); }
.match-score { display: inline-block; font: .58rem 'DM Mono'; letter-spacing: .07em; text-transform: uppercase; color: var(--lime); }
.recommend-card.is-selected .match-score { color: #2b4510; }
.recommend-card h3 { font-size: 1.05rem; letter-spacing: -.05em; line-height: 1; margin: 8px 0; }
.recommend-card p { min-height: 32px; margin: 0; font-size: .64rem; line-height: 1.45; color: #c5c5cd; }
.recommend-card.is-selected p { color: #283314; }
.recommend-card footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.recommend-card em { font: .58rem 'DM Mono'; font-style: normal; color: #b6b6c0; white-space: nowrap; }
.recommend-card.is-selected em { color: #283314; }
.recommend-card button { border: 0; border-radius: 99px; padding: 8px 11px; background: var(--lime); color: #0a0a0e; cursor: pointer; font: 700 .57rem Manrope; letter-spacing: .06em; text-transform: uppercase; }
.recommend-card.is-selected button { background: #12130e; color: var(--lime); }
.recommend-card button b { margin-left: 5px; font-size: .9rem; }
.all-services-label { margin: 21px 0 0; font: .58rem 'DM Mono'; color: #aaaab3; text-transform: uppercase; letter-spacing: .07em; }

@media (max-width: 700px) {
  .recommendations { padding: 15px; margin: 24px 0 18px; }
  .recommendation-heading { display: block; }
  .recommendation-heading p { margin-top: 10px; }
  .recommendation-grid { grid-template-columns: 1fr; }
}

@keyframes teaserOrbit {
  to { transform: rotate(360deg); }
}
@keyframes showcaseFloat {
  50% { transform: translateY(16px) rotate(8deg); }
}
@keyframes showcaseSpin {
  to { transform: rotate(360deg); }
}
@keyframes showcaseMarquee {
  to { transform: translateX(-50%); }
}
@keyframes showcaseMorph {
  0%, 100% { border-radius: 33% 67% 58% 42%; transform: rotate(0deg); }
  50% { border-radius: 64% 36% 42% 58%; transform: rotate(22deg); }
}