/* Seamless partner-logo loop and low-key pointer-responsive gradients. */
.carousel-wrapper {
  justify-content: flex-start !important;
}

.seamless-logo-track {
  width: max-content;
  gap: 0 !important;
  animation: seamless-logo-marquee 34s linear infinite !important;
  will-change: transform;
}

.seamless-logo-track .logos-container {
  width: max-content;
  gap: var(--40);
  padding-right: var(--40);
}

.cosmo-trusted-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: #7a828b;
  font-family: var(--font-family, Inter, sans-serif);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  opacity: 0.5;
  white-space: nowrap;
}

.cosmo-trusted-logo img {
  width: 24px;
  height: 24px;
  filter: grayscale(1);
}

.carousel-wrapper:hover .seamless-logo-track,
.carousel-wrapper:focus-within .seamless-logo-track {
  animation-play-state: paused !important;
}

@keyframes seamless-logo-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

/* The hero glow gently follows a visitor's pointer while they explore it. */
.hero-section:not(._404) {
  --hero-gradient-x: 50%;
  --hero-gradient-y: 52%;
  background-image:
    radial-gradient(circle at var(--hero-gradient-x) var(--hero-gradient-y), rgba(116, 201, 252, 0.26), rgba(125, 115, 255, 0.19) 31%, rgba(125, 115, 255, 0) 64%),
    radial-gradient(circle at calc(var(--hero-gradient-x) + 12%) calc(var(--hero-gradient-y) + 9%), rgba(186, 198, 255, 0.14), rgba(186, 198, 255, 0) 42%),
    radial-gradient(rgba(5, 5, 5, 0.05) 1px, transparent 1px) !important;
  background-size: auto, auto, 32px 32px !important;
  transition: background-image 0s;
}

@media (hover: hover) and (pointer: fine) {
  .hero-section:not(._404).is-gradient-tracking {
    background-image:
      radial-gradient(circle at var(--hero-gradient-x) var(--hero-gradient-y), rgba(116, 201, 252, 0.32), rgba(125, 115, 255, 0.23) 33%, rgba(125, 115, 255, 0) 66%),
      radial-gradient(circle at calc(var(--hero-gradient-x) + 12%) calc(var(--hero-gradient-y) + 9%), rgba(196, 205, 255, 0.17), rgba(196, 205, 255, 0) 44%),
      radial-gradient(rgba(5, 5, 5, 0.05) 1px, transparent 1px) !important;
  }
}

#portfolio .results-proof-card {
  --gradient-x: 12%;
  --gradient-y: 0%;
  transition: border-color 260ms ease, box-shadow 360ms ease;
}

#portfolio .results-proof-card:nth-child(2) {
  --gradient-x: 90%;
  --gradient-y: 0%;
}

#portfolio .results-proof-card:nth-child(3) {
  --gradient-x: 88%;
  --gradient-y: 4%;
}

#portfolio .results-proof-card:nth-child(1) {
  background:
    radial-gradient(circle at var(--gradient-x) var(--gradient-y), rgba(138, 154, 255, 0.2), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.88)) !important;
}

#portfolio .results-proof-card:nth-child(2) {
  background:
    radial-gradient(circle at var(--gradient-x) var(--gradient-y), rgba(126, 213, 238, 0.22), transparent 37%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 255, 0.9)) !important;
}

#portfolio .results-proof-card:nth-child(3) {
  background:
    radial-gradient(circle at var(--gradient-x) var(--gradient-y), rgba(245, 175, 218, 0.22), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(254, 246, 253, 0.9)) !important;
}

#services .engagement-card {
  --gradient-x: 86%;
  --gradient-y: 10%;
  transition: border-color 260ms ease, box-shadow 360ms ease;
}

#services .engagement-card::before {
  top: calc(var(--gradient-y) - 90px);
  right: auto;
  left: calc(var(--gradient-x) - 90px);
  transition: top 180ms ease-out, left 180ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  #portfolio .results-proof-card.is-gradient-tracking,
  #services .engagement-card.is-gradient-tracking {
    border-color: rgba(94, 112, 201, 0.23) !important;
    box-shadow: 0 24px 52px -34px rgba(40, 60, 122, 0.5) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seamless-logo-track {
    animation: none !important;
  }

  #services .engagement-card::before {
    transition: none;
  }
}

/* Cosmic CTA: a restrained starfield that activates when the section arrives. */
.dark-accent-div {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
}

.dark-accent-div > :not(.cosmic-starfield) {
  position: relative;
  z-index: 1;
}

.cosmic-starfield {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cosmic-star {
  position: absolute;
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, #fff 0%, #b7ccff 48%, #fff 100%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(157, 186, 255, 0.8));
  transform: scale(0.45) rotate(18deg);
}

.cosmic-star--one { top: 13%; left: 10%; width: 16px; height: 16px; }
.cosmic-star--two { top: 24%; right: 12%; width: 10px; height: 10px; }
.cosmic-star--three { right: 19%; bottom: 10%; width: 26px; height: 26px; }
.cosmic-star--four { bottom: 15%; left: 13%; width: 18px; height: 18px; }
.cosmic-star--five { bottom: 7%; left: 32%; width: 12px; height: 12px; }

.dark-accent-div.is-cosmic-visible .cosmic-star {
  animation: cosmic-twinkle 3.8s ease-in-out infinite both;
}

.dark-accent-div.is-cosmic-visible .cosmic-star--two { animation-delay: 0.55s; }
.dark-accent-div.is-cosmic-visible .cosmic-star--three { animation-delay: 1.2s; }
.dark-accent-div.is-cosmic-visible .cosmic-star--four { animation-delay: 1.8s; }
.dark-accent-div.is-cosmic-visible .cosmic-star--five { animation-delay: 2.4s; }

.cosmic-shooting-star {
  position: absolute;
  top: auto;
  right: 20%;
  bottom: 5%;
  left: auto;
  width: min(240px, 30vw);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(142, 178, 255, 0.05) 34%, rgba(181, 206, 255, 0.3) 76%, #fff 96%);
  box-shadow: 0 0 10px rgba(169, 195, 255, 0.7), 0 0 20px rgba(117, 153, 255, 0.16);
  opacity: 0;
  transform: rotate(-64deg);
  transform-origin: right center;
}

.dark-accent-div.is-cosmic-visible .cosmic-shooting-star {
  animation: cosmic-shoot 4.2s cubic-bezier(.16, .76, .28, 1) 0.7s both;
}

@keyframes cosmic-twinkle {
  0%, 100% { opacity: 0.22; transform: scale(0.62) rotate(18deg); }
  46% { opacity: 0.9; transform: scale(1.08) rotate(18deg); }
  58% { opacity: 0.55; transform: scale(0.84) rotate(18deg); }
}

@keyframes cosmic-shoot {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-64deg) scaleX(0.18); }
  14% { opacity: 0.96; }
  70% { opacity: 0.82; }
  86% { opacity: 0.42; }
  100% { opacity: 0; transform: translate3d(16vw, -68vh, 0) rotate(-64deg) scaleX(1); }
}

/* Footer links keep the original white social marks readable. */
.footer .social-box {
  background: linear-gradient(135deg, #131827, #29385e) !important;
  border-color: #131827 !important;
}

.footer .social-box:hover,
.footer .social-box:focus-visible {
  background: var(--text-secondary, #4a4a4a) !important;
  border-color: var(--text-secondary, #4a4a4a) !important;
  box-shadow: none !important;
}

.footer .social-box:focus-visible {
  outline: 3px solid #87d6f0;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dark-accent-div.is-cosmic-visible .cosmic-star {
    animation: none;
    opacity: 0.72;
    transform: scale(0.8) rotate(18deg);
  }

  .dark-accent-div.is-cosmic-visible .cosmic-shooting-star {
    animation: none;
  }
}