*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Exo", system-ui, sans-serif;
  color: #fff;
  background: #000;
  -webkit-font-smoothing: antialiased;
}

.page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  overflow: hidden;
}

/* Fundo: artboard 1440×900 do Figma, escalada para cobrir o viewport */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #000;
}

.bg__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1440px;
  height: 900px;
  transform: translate(-50%, -50%)
    scale(max(calc(100vw / 1440), calc(100vh / 900)));
  transform-origin: center center;
}

.bg__layer {
  position: absolute;
  pointer-events: none;
}

.bg__layer img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Coordenadas do Figma (Frame 1) */
.bg__layer--1 {
  left: 283px;
  top: 311px;
  width: 1972px;
  height: 1972px;
  z-index: 1;
}

.bg__layer--2 {
  left: -486px;
  top: -1426px;
  width: 2412px;
  height: 2412px;
  z-index: 2;
}

.bg__layer--3 {
  left: -1218px;
  top: -109px;
  width: 2490px;
  height: 2490px;
  z-index: 3;
}

.bg__layer--4 {
  left: -1029px;
  top: -876px;
  width: 1972px;
  height: 1972px;
  z-index: 4;
}

.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 100%;
  transform: translateY(
    calc(-1 * clamp(4.5rem, 11vh, 9rem) - 70px)
  );
}

.logo {
  display: block;
  /* Desktop: até 468px; mobile: nunca ultrapassa ~76% do ecrã (evita 88vw×1.2 ≈ largura total) */
  width: min(468px, 76vw);
  height: auto;
  margin-bottom: calc(clamp(3.25rem, 8vw, 5.5rem) + 40px);
}

.tagline {
  margin: 0 0 40px;
  font-family: "Exo", sans-serif;
  font-weight: 300;
  font-size: clamp(1.25rem, 4.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.countdown {
  margin: 0;
  font-family: "Fjalla One", sans-serif;
  font-size: clamp(2rem, 9vw, 3.875rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
}