:root {
  --color-ink: #100e19;
  --color-text: #ddd;
  --color-muted: #a48ebf;
  --color-violet: #815eff;
  --color-violet-deep: #552ce9;
  --color-magenta: #d852f3;
  --gradient-title: linear-gradient(97deg, #bdabff 0%, #6346ce 50%, #d852f3 100%);
  --gradient-button: linear-gradient(108deg, #552ce9 0%, #9d51fa 100%);
  --gradient-button-light: linear-gradient(108deg, #fefeff 0%, #e3d8f1 100%);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-body: "Lato", Arial, sans-serif;
  /* 1920px design: 180px gutters and a 1560px content area. */
  --design-unit: calc(100vw / 1920);
  --content-width: 81.25%;
}

/* Reveal once the saved language and final font weights are ready. */
html[data-page-pending] body {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

html[data-page-pending] body * {
  animation-play-state: paused;
}

html.font-fallback {
  --font-body: Arial, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(100 * var(--design-unit));
}

body {
  width: 100%;
  max-width: 100%;
  min-width: 320px;
  color: var(--color-ink);
  background: #fff;
  font-family: var(--font-body);
  font-size: calc(16 * var(--design-unit));
  font-weight: 400;
  line-height: 1.6;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

ul, li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea, select {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.container {
  position: relative;
  width: var(--content-width);
  max-width: 100%;
  margin-inline: auto;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(42 * var(--design-unit));
  padding: calc(12 * var(--design-unit)) calc(26 * var(--design-unit));
  /* Browsers include tracking after the final letter; Figma excludes it. */
  padding-right: calc(26 * var(--design-unit) - 0.26em);
  border: 1px solid;
  border-radius: calc(999 * var(--design-unit));
  font-size: calc(16 * var(--design-unit));
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
}

.section-tag--dark {
  border-color: #5d34ef;
  color: #333;
}

.section-tag--light {
  border-color: #301e7f;
  color: #b8b8b8;
}

.section-title {
  color: transparent;
  background: var(--gradient-title);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: calc(100 * var(--design-unit));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.section-copy {
  color: var(--color-text);
  font-size: calc(17 * var(--design-unit));
  line-height: 1.8;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(59 * var(--design-unit));
  padding: calc(20 * var(--design-unit)) calc(40 * var(--design-unit));
  border-radius: calc(12 * var(--design-unit));
  font-size: calc(16 * var(--design-unit));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease, transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}

.button:hover,
.button:focus-visible {
  color: #fff;
  background: var(--gradient-button);
  box-shadow: 0 calc(14 * var(--design-unit)) calc(36 * var(--design-unit)) rgba(99, 70, 206, 0.28);
  transform: translateY(calc(-2 * var(--design-unit)));
}

.button--dark {
  color: #fff;
  background: linear-gradient(108deg, #100d19 0%, #161223 100%);
}

.button--light {
  color: var(--color-ink);
  background: var(--gradient-button-light);
}

.button--ghost {
  color: var(--color-ink);
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html.has-js :is(
    .interior-intro,
    .interior-section-title,
    .services-accordion,
    .careers-accordion,
    .contact-methods__card,
    .privacy-section,
    .about-intro__heading,
    .about-values__title,
    .about-values__card,
    .home-profile__content,
    .home-process__heading,
    .process-card,
    .home-capability__heading,
    .home-capability__tabs,
    .home-capability__detail,
    .home-use-cases__intro,
    .use-case-card,
    .home-contact__content,
    .footer__inner
  ):not(.is-inview) {
    opacity: 0;
    translate: 0 calc(40 * var(--design-unit));
  }

  html.has-js :is(
    .services-layers__visual,
    .careers-gallery__image,
    .about-intro__image,
    .home-profile__visual,
    .home-capability__visual,
    .home-contact__image
  ):not(.is-inview) {
    opacity: 0;
    translate: 0 calc(36 * var(--design-unit));
  }

  html.has-js .home-profile__visual:not(.is-inview) .home-profile__image,
  html.has-js .home-capability__visual:not(.is-inview) img,
  html.has-js .home-contact__image:not(.is-inview) {
    scale: 1.06;
  }

  :is(
    .interior-intro,
    .interior-section-title,
    .services-accordion,
    .careers-accordion,
    .contact-methods__card,
    .privacy-section,
    .about-intro__heading,
    .about-values__title,
    .about-values__card,
    .home-profile__content,
    .home-process__heading,
    .process-card,
    .home-capability__heading,
    .home-capability__tabs,
    .home-capability__detail,
    .home-use-cases__intro,
    .use-case-card,
    .home-contact__content,
    .footer__inner,
    .services-layers__visual,
    .careers-gallery__image,
    .about-intro__image,
    .home-profile__visual,
    .home-capability__visual,
    .home-contact__image
  ) {
    transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .services-layers__image,
  .careers-gallery__image img,
  .home-profile__image,
  .home-capability__visual img,
  .home-contact__image {
    transition: filter 0.45s ease, scale 0.9s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
}

@media (max-width: 768px) {
  :root {
    --design-unit: 1px;
  }

  html {
    font-size: calc(100vw / 3.9);
    scroll-padding-top: 0.84rem;
  }

  body {
    font-size: 0.16rem;
  }

  .container {
    width: calc(100% - 0.4rem);
  }

  .section-tag {
    min-height: 0.36rem;
    padding: 0.1rem 0.18rem 0.09rem;
    font-size: 0.11rem;
    letter-spacing: 0.2em;
  }

  .section-title {
    font-size: 0.48rem;
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  .section-copy {
    font-size: 0.15rem;
    line-height: 1.75;
  }

  .button {
    min-height: 0.48rem;
    padding: 0.15rem 0.24rem;
    border-radius: 0.1rem;
    font-size: 0.12rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    html.has-js :is(
      .interior-intro,
    .interior-section-title,
    .services-accordion,
    .careers-accordion,
    .contact-methods__card,
    .privacy-section,
    .about-intro__heading,
    .about-values__title,
    .about-values__card,
    .home-profile__content,
      .home-process__heading,
      .process-card,
      .home-capability__heading,
      .home-capability__tabs,
      .home-capability__detail,
      .home-use-cases__intro,
      .use-case-card,
      .home-contact__content,
      .footer__inner
    ):not(.is-inview) {
      translate: 0 0.28rem;
    }

    html.has-js :is(
      .services-layers__visual,
    .careers-gallery__image,
    .about-intro__image,
    .home-profile__visual,
      .home-capability__visual,
      .home-contact__image
    ):not(.is-inview) {
      translate: 0 0.24rem;
    }

    html.has-js .home-profile__visual:not(.is-inview) .home-profile__image,
    html.has-js .home-capability__visual:not(.is-inview) img,
    html.has-js .home-contact__image:not(.is-inview) {
      scale: 1.04;
    }
  }
}

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

@media (prefers-reduced-motion: no-preference) {
  .interior-banner img { animation: interior-banner-in 1.1s var(--ease-out) both; }
  @keyframes interior-banner-in { from { opacity: 0; } to { opacity: 1; } }
  html.has-js .services-layers__visual:not(.is-inview) img,
  html.has-js .careers-gallery__image:not(.is-inview) img { scale: 1.06; }
}