@layer reset, tokens, base, components, pages, utilities;

@import url("tokens.298c86aa8f6d.css") layer(tokens);

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    hanging-punctuation: first last;
  }

  body {
    min-height: 100dvh;
    line-height: 1.6;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

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

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

  ul,
  ol {
    list-style: none;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
    line-height: 1.2;
  }

  p {
    text-wrap: pretty;
  }
}

@layer base {
  html {
    font-size: 100%;
    scroll-padding-top: 5rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  body {
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    color: var(--clr-text);
    background-color: var(--clr-bg);
    -webkit-tap-highlight-color: transparent;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  ::selection {
    background-color: var(--clr-accent);
    color: var(--clr-accent-contrast);
  }

  :focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  .container {
    width: 100%;
    max-width: 75rem;
    margin-inline: auto;
    padding-inline: var(--sp-md);
  }

  @media (min-width: 48em) {
    .container {
      padding-inline: var(--sp-xl);
    }
  }

  .section {
    padding-block: var(--sp-section);
    position: relative;
  }

  .service-hero + .section::before,
  .section--with-bg + .section::before {
    display: none;
  }

  .section + .section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: min(80%, 40rem);
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(59, 92, 198, 0.3),
      rgba(107, 140, 255, 0.15),
      transparent
    );
  }

  .section__title {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    margin-bottom: var(--sp-xl);
    letter-spacing: -0.01em;
  }

  .section__subtitle {
    font-size: var(--fs-md);
    color: var(--clr-text-muted);
    max-width: 40ch;
    margin-inline: auto;
    margin-bottom: var(--sp-2xl);
  }
}