:root {
  color-scheme: dark;
  --ink: #f8f5ef;
  --muted: rgba(248, 245, 239, 0.78);
  --accent: #ffcf67;
  --shadow: rgba(0, 0, 0, 0.58);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: #101214;
  color: var(--ink);
  overflow: hidden;
  max-width: 100vw;
}

.hero {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}

.hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 9, 10, 0.88), rgba(8, 9, 10, 0.5) 54%, rgba(8, 9, 10, 0.22)),
    linear-gradient(0deg, rgba(8, 9, 10, 0.42), rgba(8, 9, 10, 0.08) 48%, rgba(8, 9, 10, 0.28));
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(1040px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(28px, 6vh, 64px) 0;
  text-shadow: 0 18px 56px var(--shadow);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: clamp(0.86rem, 1.4vw, 1rem);
  font-weight: 760;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0;
}

h1 {
  margin: 0;
  max-width: min(10ch, 100%);
  font-size: clamp(3.6rem, 10vw, 8.2rem);
  font-weight: 860;
  line-height: 0.92;
  letter-spacing: 0;
}

.tagline {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(1.12rem, 2.6vw, 1.85rem);
  font-weight: 560;
  line-height: 1.18;
  text-wrap: balance;
}

@media (max-width: 700px) {
  .hero__shade {
    background:
      linear-gradient(0deg, rgba(8, 9, 10, 0.62), rgba(8, 9, 10, 0.24) 60%, rgba(8, 9, 10, 0.34)),
      linear-gradient(90deg, rgba(8, 9, 10, 0.8), rgba(8, 9, 10, 0.32));
  }

  .hero__content {
    width: min(100% - 28px, 560px);
    min-width: 0;
  }

  h1 {
    font-size: clamp(2.65rem, 12vw, 3.2rem);
  }

  .tagline {
    max-width: 22rem;
    font-size: clamp(1rem, 4.2vw, 1.18rem);
  }
}