@font-face {
  font-family: Barlow;
  src: url('/fonts/barlow-900.woff2') format('woff2');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
:root { color-scheme: light; background: #f3f1eb; color: #111; }
* { box-sizing: border-box; }
body { margin: 0; }
main {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 115%, #078da712, transparent 55%);
}
.symbol { display: block; width: clamp(60px, 9vw, 88px); height: auto; margin-bottom: 38px; }
h1 {
  margin: 0;
  font-family: Barlow, 'Arial Black', sans-serif;
  font-size: clamp(64px, 12vw, 148px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .88;
}
h1 span { display: block; color: #078da7; }
.accent { display: flex; gap: 7px; margin-top: 42px; height: 3px; }
.accent span:first-child { width: 38px; background: #078da7; }
.accent span:last-child { width: 17px; background: #ff7008; }
@media (max-height: 500px) {
  main { padding: 32px 24px; }
  .symbol { width: 48px; margin-bottom: 24px; }
  h1 { font-size: 64px; }
  .accent { margin-top: 24px; }
}