.hero {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-9) var(--space-5) var(--space-10);
}

/* ── Static Cadastral Map Background ───────────────────────────────────
   Single image, cover-fit, anchored bottom-centre so the violet plots
   sit in the lower third (matching the reference). No animation.
   ──────────────────────────────────────────────────────────────────── */
.hero-cadastral-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #0a0b0d;
  background-image: url("../img/cadastral-bg.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Vignette so the headline stays legible over the map */
.map-fade-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Top fade to black */
    linear-gradient(to bottom, #0a0b0d 0%, rgba(10,11,13,0) 30%, rgba(10,11,13,0) 70%, rgba(10,11,13,0.9) 100%),
    /* Centre dim so headline reads */
    radial-gradient(ellipse 75% 50% at 50% 38%, rgba(10,11,13,0.78) 0%, rgba(10,11,13,0.32) 45%, transparent 75%);
  pointer-events: none;
}

.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Center content */
.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: var(--content-max);
  margin-top: -50px;
}

@keyframes fadeUp {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}

.hero-badge { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
.hero-headline { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.hero-subtitle { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.cta-waitlist { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.cta-waitlist-note { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }

/* Badge — status dot + label */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid var(--hairline);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-7);
  max-width: 100%;
  transition: all 0.2s ease;
}

.hero-badge:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--violet-border);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--violet);
  box-shadow: 0 0 8px var(--violet);
  animation: pulseDot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 12px var(--violet); }
}

.hero-badge-text {
  white-space: nowrap;
}

/* Headline */
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--text-on-dark);
  margin-bottom: var(--space-5);
  max-width: 920px;
  text-wrap: balance;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
}

/* Subtitle */
.hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-on-dark-muted);
  margin-bottom: var(--space-7);
  max-width: 640px;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* ── BOTTOM BAND ── */
.bottom-band {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 2rem;
  pointer-events: none;
}
.bottom-band > * { pointer-events: auto; }

.socials-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.95);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.social-icon:hover {
  border-color: var(--violet-border);
  color: rgba(255,255,255,0.95);
  background: var(--violet-soft);
}

/* ── RESPONSIVE ── */

/* Tablet */
@media (max-width: 900px) {
  .hero-content { margin-top: -20px; }
  .hero-headline { font-size: clamp(2.4rem, 7.5vw, 4rem); }
}

/* Mobile — bottom band moves into flow so it stops overlapping the hero content */
@media (max-width: 640px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 96px 20px 32px;
    justify-content: flex-start;
  }
  .hero-content {
    margin-top: 0;
    flex: 1;
    justify-content: center;
    padding-bottom: var(--space-7);
  }
  .hero-headline {
    font-size: clamp(2.2rem, 10vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
  }
  .hero-subtitle {
    font-size: 15px;
    line-height: 1.5;
  }
  .hero-badge {
    font-size: 12px;
    margin-bottom: var(--space-6);
  }

  .bottom-band {
    position: relative;
    padding-bottom: 0;
    padding-top: var(--space-6);
    gap: 1rem;
  }
  .social-icon { width: 38px; height: 38px; }
}

/* Small mobile */
@media (max-width: 380px) {
  .hero { padding: 88px 16px 24px; }
  .hero-headline { font-size: clamp(2rem, 11vw, 2.8rem); }
  .hero-badge { font-size: 11px; }
}

/* Short landscape phones — let everything scroll instead of cramming */
@media (max-height: 640px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    height: auto;
    padding: 80px 24px 40px;
  }
  .hero-content { margin-top: 0; }
  .bottom-band {
    position: relative;
    padding-top: var(--space-6);
    padding-bottom: 0;
  }
}