@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;700&display=swap");

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  line-height: normal;
  font-family: "Urbanist"; 
}

:root {
  /* fonts */
  --body-normal: Urbanist; 
  font-family: "Urbanist";
  --background: #ffffff;
  --foreground: #171717;

  
 
  /* font sizes */
  --font-size-sm: 0.875rem;
  --body-normal-size: 1rem;
  --body-big-size: 1.125rem;

  /* Colors */
  --beige-1: #fffdfc;
  --color-gray-100: rgba(124, 124, 124, 0.7);
  --color-thistle-100: #d8d4ff;
  --color-midnightblue: #0c0055;
  --color-whitesmoke: #eee;
  --color-darkslategray-100: #434343;
  --color-darkslategray-200: rgba(67, 67, 67, 0.8);
  --color-gainsboro: #e6e3e3;
  --color-darkslateblue: #403387;
  --text-light: #b6b6b6;

  /* Gaps */
  --gap-mini-2: 0.937rem;
  --gap-11xl-2: 1.875rem;
  --gap-8xl-2: 1.687rem;
  --gap-xl-2: 1.25rem;
  --gap-9xl-2: 1.75rem;
  --gap-3xs-2: 0.625rem;

  /* Paddings */
  --padding-12xl-2: 1.937rem;
  --padding-11xl-2: 1.875rem;
  --padding-xl-2: 1.25rem;
  --padding-smi-2: 0.812rem;
  --padding-lgi-2: 1.187rem;
  --padding-10xs-2: 0.187rem;
  --padding-3xs-2: 0.625rem;
  --padding-4xl-2: 1.437rem;
  --padding-9xs-2: 0.25rem;
  --padding-2xs-2: 0.687rem;
  --padding-6xl-2: 1.562rem;

  /* Border radiuses */
  --br-6xl-2: 25px;
  --br-481xl-2: 500px;
  --br-11xl-2: 30px;
  --br-21xl: 40px;
  --br-xl-2: 20px;
  --br-81xl-2: 100px;
}


@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Urbanist", sans-serif;
}

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

.trusted-marquee-track {
  animation: trusted-marquee 40s linear infinite;
  will-change: transform;
}

/* Duplicated row (A + A). −50% → 0 moves the track to the right, so cards drift
   left → right across the viewport. Start/end frames match; loop has no visible jump. */
@keyframes hero-marquee-scroll {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.hero-marquee-track {
  direction: ltr;
  animation: hero-marquee-scroll 200s linear infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .trusted-marquee-track {
    animation: none;
  }

  .hero-marquee-track {
    animation: none;
  }

  .trusted-by-viewport {
    overflow-x: auto;
  }

  .pathways-secondary-pulse {
    animation: none;
    box-shadow: 0 3px 12px -2px rgba(12, 0, 85, 0.22),
      0 1px 3px rgba(12, 0, 85, 0.08);
  }

  .hero-build-pathways-shimmer-text {
    animation: none !important;
    background-position: -12em 50% !important;
  }
}

@keyframes pathways-secondary-pulse {
  0%,
  100% {
    box-shadow: 0 3px 12px -2px rgba(12, 0, 85, 0.22),
      0 1px 3px rgba(12, 0, 85, 0.08);
  }
  50% {
    box-shadow: 0 6px 26px -4px rgba(12, 0, 85, 0.26),
      0 2px 10px rgba(12, 0, 85, 0.12);
  }
}

.pathways-secondary-pulse {
  animation: pathways-secondary-pulse 2.75s ease-in-out infinite;
}

/* Hero “Build Pathways”: seamless loop FF8A00→FFD3A8→D8D4FF→0C0055→D8D4FF→FFD3A8→FF8A00, drifts L→R */
.hero-build-pathways-shimmer-text {
  background-image: repeating-linear-gradient(
    90deg,
    #ff8a00 0em,
    #ff9428 0.85em,
    #ffaa58 1.65em,
    #ffbe88 2.45em,
    #ffccb0 3.2em,
    #ffd3a8 4em,
    #f0cce0 4.85em,
    #e8d0f0 5.65em,
    #e0d4fa 6.45em,
    #dad4ff 7.25em,
    #d8d4ff 8em,
    #c4b8ef 8.95em,
    #9c88d8 9.75em,
    #7058b0 10.45em,
    #402878 11.1em,
    #201058 11.55em,
    #0c0055 12em,
    #201058 12.45em,
    #402878 13.1em,
    #7058b0 13.75em,
    #9c88d8 14.45em,
    #c4b8ef 15.25em,
    #d8d4ff 16em,
    #dad4ff 16.75em,
    #e8d0f0 17.55em,
    #f0cce0 18.35em,
    #ffd3a8 19.2em,
    #ffccb0 20em,
    #ffbe88 20.8em,
    #ffaa58 21.55em,
    #ff9428 22.35em,
    #ff8c08 23.2em,
    #ff8a00 24em
  );
  background-size: 24em 100%;
  background-repeat: repeat;
  background-position: 0 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hero-build-pathways-shimmer-shift 9s linear infinite;
  will-change: background-position;
}

@keyframes hero-build-pathways-shimmer-shift {
  from {
    background-position: 0 50%;
  }
  to {
    background-position: 24em 50%;
  }
}