:root{
  --bg-img:url('/images/hero-follaje.jpg');
  --accent:#b6a16a;
  --accent-weak:#b6a16a1a;
  --text:#2a2a2a;
  --maxw: 48rem;
}
.hero{
  min-height:100svh;
  display:grid; place-items:center;
  text-align:center; color:var(--text);
  padding:clamp(24px, 3vw, 48px);
  background:
    linear-gradient(180deg, #fffdf9cc 0%, #fffdf980 30%, #fffdf9cc 100%),
    var(--bg-img) center/cover no-repeat;
}
.hero__content{ 
  max-width:var(--maxw);
  display:grid; gap:clamp(10px,1.6vw,18px);
}
.eyebrow{
  font: 500 clamp(12px, 1.2vw, 14px) "Inter", system-ui;
  letter-spacing:.22em; text-transform:uppercase; opacity:.8;
}
.names{
  font-family:"Cormorant Garamond", serif;
  font-weight:700;
  font-size:clamp(38px, 7vw, 86px);
  line-height:1.05; margin:0;
}
.names .amp{
  display:inline-grid; place-items:center;
  width:1.25em; aspect-ratio:1; border-radius:50%;
  background:var(--accent-weak);
  font-family:"Great Vibes", cursive;
  font-size:.8em; color:var(--text);
  margin-inline:.15em;
}
.meta{
  font: 500 clamp(14px, 1.5vw, 18px) "Inter", system-ui;
  opacity:.9;
}
.meta .dot{ margin:0 .5em; opacity:.5 }
.scroll{
  position:absolute; bottom:18px; left:50%; translate:-50% 0;
  border:0; background:#ffffffc8; width:40px; height:40px;
  border-radius:999px; font-size:22px; line-height:40px; cursor:pointer;
  animation:float 2.2s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(6px)} }
@media (min-width:900px){
  .hero{ padding-block:64px }
}