:root {
  --coral: #e86752;
  --yellow: #eae463;
  --teal: #00353d;
  --cream: #fdfbdf;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--coral); }
body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: var(--coral);
  color: var(--cream);
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  text-align: center;
}
.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Mobile / tablet (up to 1080px): scales with the screen width, never below 0.56px per design unit */
body { --u: max(calc(100vw / 1080), 0.56px); }
main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(92 * var(--u)) calc(60 * var(--u)) calc(154 * var(--u));
}
.logo { display: block; width: calc(528 * var(--u)); max-width: 100%; height: auto; }
nav { width: 100%; }
.intro { margin-top: calc(47 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1.2; }
.intro strong { font-weight: 700; }
.regions {
  list-style: none;
  margin: calc(73 * var(--u)) auto 0;
  width: calc(482 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(38 * var(--u));
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(77 * var(--u));
  border-radius: 999px;
  background: var(--teal);
  color: var(--cream);
  font-weight: 700;
  font-size: calc(24 * var(--u));
  text-decoration: none;
  transition: background-color .2s, color .2s, transform .2s;
}
.btn:hover, .btn:focus-visible { background: var(--cream); color: var(--teal); transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* Desktop: scaled from the 1920 x 1080 artboard */
@media (min-width: 1081px) {
  body { --u: calc(100vw / 1920); min-height: calc(1080 * var(--u)); }
  main { padding: calc(80 * var(--u)) calc(60 * var(--u)) calc(120 * var(--u)); }
  nav { width: auto; }
  .logo { width: calc(480 * var(--u)); }
  .intro { margin-top: calc(68 * var(--u)); font-size: calc(45 * var(--u)); line-height: 1.2; }
  .intro br.m { display: none; }
  .regions {
    margin: calc(61 * var(--u)) 0 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(29 * var(--u)) calc(36 * var(--u));
    width: calc(1422 * var(--u));
    max-width: 100%;
  }
  .btn { width: calc(438 * var(--u)); height: calc(70.5 * var(--u)); font-size: calc(28 * var(--u)); }
}