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

:root {
  --bg: #0D1B2A;
  --gold: #C9A87C;
  --gold-light: #E6C07B;
  --cream: #F2EDE4;
  --muted: #8A9BB0;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--cream);
  font-family: 'Manrope', sans-serif;
  overflow: hidden;
}

/* ── Stars background ── */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: twinkle var(--dur) ease-in-out infinite var(--delay);
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50%       { opacity: var(--op); transform: scale(1); }
}

/* ── Layout ── */
.hero {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  text-align: center;
}

/* ── Flag strip ── */
.flag-strip {
  display: flex;
  gap: 0.75rem;
  font-size: 1.6rem;
  opacity: 0;
  transform: translateY(-16px);
  animation: fadeDown 0.8s ease forwards 0.3s;
}

/* ── Content ── */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  animation: fadeUp 0.7s ease forwards 0.6s;
}

.headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
}

.hello {
  font-size: clamp(3rem, 10vw, 7rem);
  color: var(--cream);
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.8s;
}

.europe {
  font-size: clamp(4.5rem, 16vw, 11rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, #B87333 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: fadeUp 0.9s ease forwards 1s;
}

.tagline {
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-weight: 300;
  color: var(--muted);
  max-width: 38ch;
  line-height: 1.7;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 1.3s;
}

/* ── Decorative line ── */
.deco-line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: expandLine 1.2s ease forwards 1.6s;
}

@keyframes expandLine {
  to { width: min(320px, 80vw); }
}

/* ── Shared fade animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .flag-strip { font-size: 1.2rem; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
}