:root {
  color-scheme: dark;
  --sw-bg: #140c08;
  --sw-ink: #fff4e1;
  --sw-ink-soft: #ddc9b0;
  --sw-accent: #f04a16;
  --sw-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --sw-font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #140c08;
}

.sw-root {
  --sw-bg: #140c08;
  --sw-ink: #fff4e1;
  --sw-ink-soft: #ddc9b0;
  --sw-accent: #f04a16;
}

.sw-sky {
  background: #140c08;
}

.sw-topbar {
  padding-inline: clamp(18px, 4vw, 64px);
  background: linear-gradient(180deg, rgba(20, 12, 8, 0.92), rgba(20, 12, 8, 0));
}

.sw-brand {
  gap: 12px;
}

.sw-brand__mark {
  width: 42px;
  height: 30px;
  border-radius: 0;
  background: url("assets/logo.svg") center / contain no-repeat;
  box-shadow: none;
}

.sw-brand__name {
  font-weight: 800;
  letter-spacing: -0.04em;
}

.sw-nav {
  background: rgba(20, 12, 8, 0.7);
  border: 1px solid rgba(255, 244, 225, 0.13);
  box-shadow: 0 12px 32px rgba(20, 12, 8, 0.2);
}

.sw-nav__item {
  color: #ddc9b0;
}

.sw-nav__item.is-active {
  background: #f04a16;
  color: #fff8ec;
}

.sw-topcta,
.sw-btn--primary {
  background: #f04a16;
  color: #fff8ec;
}

.sw-copylayer::before {
  width: min(67vw, 920px);
  background: linear-gradient(
    90deg,
    rgba(20, 12, 8, 0.96) 0%,
    rgba(20, 12, 8, 0.84) 42%,
    rgba(20, 12, 8, 0.28) 74%,
    transparent 100%
  );
}

.sw-copy {
  max-width: 650px;
}

.sw-copy__num,
.sw-copy__eyebrow {
  color: #ff784d;
}

.sw-copy__title {
  max-width: 13ch;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.sw-copy__body {
  max-width: 52ch;
  color: #ead9c3;
}

.sw-copy__tags li {
  color: #fff1dd;
  background: rgba(240, 74, 22, 0.14);
  border-color: rgba(255, 120, 77, 0.32);
}

.sw-route__dot i,
.sw-scrollbar span {
  background: #f04a16;
}

.sw-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 12, 8, 0.18), transparent 22%, transparent 78%, rgba(20, 12, 8, 0.2)),
    radial-gradient(ellipse at center, transparent 48%, rgba(20, 12, 8, 0.26) 100%);
}

@media (max-width: 860px) {
  .sw-topbar {
    padding-inline: 16px;
  }

  .sw-brand__name {
    font-size: 1rem;
  }

  .sw-copylayer::before {
    width: 100%;
    height: 68%;
    background: linear-gradient(0deg, rgba(20, 12, 8, 0.98), rgba(20, 12, 8, 0.78) 55%, transparent 100%);
  }

  .sw-copy__title {
    max-width: 16ch;
  }
}

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