@font-face {
  font-family: "Montserrat";
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/montserrat-700.woff2") format("woff2");
}

:root {
  --orange: #FF7A01;
  --ink: #222;
  --ink-soft: #333;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
}

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(0.6rem, 1.6vh, 1.1rem);
  padding: clamp(1.5rem, 5vw, 3rem);
  background: #f3f3f3 url("/assets/bg.webp") center / cover no-repeat;
}

.logo {
  width: clamp(280px, 40vw, 540px);
  height: auto;
}

.address,
.coming-soon {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(1rem, 2.2vw, 1.45rem);
  color: var(--ink);
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 1.6em;
  max-width: 60rem;
  margin-top: clamp(0.4rem, 1.2vh, 0.9rem);
}

.tags li {
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  color: var(--ink-soft);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .tags { gap: 0.4em 1.1em; }
}