@font-face {
  font-family: "Outfit";
  src: url("./assets/fonts/outfit-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #171719;
  --muted: #6b6b72;
  --paper: #f7f7f8;
  --white: #fff;
  --line: #e4e4e7;
  --radius: 28px;
  --shell: 1140px;

  --surface-soft: #ececee;
  --surface-feature: #141416;
  --surface-dark: #212124;
  --text-on-dark: #ffffff;
  --muted-on-dark: #b8b8c0;
  --title-muted: #89898e;
  --input-surface: #f9f9fa;
  --input-line: #dcdce2;
  --radius-nav: 22px;
  --radius-button: 13px;
  --radius-input: 11px;
  --font-brand: "Outfit", sans-serif;
  --motion-fast: 200ms;
  --motion-product: 600ms;
  --motion-reveal: 700ms;
  --ease-product: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-brand);
  font-size: 16px;
  line-height: 1.55;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
img { display: block; max-width: 100%; height: auto; }

.shell {
  width: min(var(--shell), calc(100% - 64px));
  margin-inline: auto;
}

.brand-title {
  margin: 0;
  font-size: clamp(3rem, 6.5vw, 5rem);
  font-weight: 550;
  line-height: 1.1;
  letter-spacing: -.055em;
}

.brand-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.brand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}

.brand-button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.brand-button:disabled { opacity: .65; cursor: default; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .brand-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px #00000013;
  }
}

@media (max-width: 1020px) {
  .shell { width: calc(100% - 48px); }
}

@media (max-width: 760px) {
  .shell { width: calc(100% - 36px); }
  .brand-title { font-size: clamp(2.8rem, 10vw, 4.5rem); }
  .brand-card { padding: 24px; }
}

@media (max-width: 390px) {
  .shell { width: calc(100% - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-button { transition: none; }
}