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

html,
body{
  width:100%;
  height:100%;
  background:#000;
  font-family:Arial,sans-serif;
}

body{
  min-height:100dvh;
}

.hero{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:#000;
}

.hero-picture{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
}

.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.08);
  z-index:2;
  pointer-events:none;
}

.hero-deer-wrap{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.hero-deer{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:clamp(220px,24vw,430px);
  height:auto;
  object-fit:contain;
  display:block;
}

.hero-content{
  position:absolute;
  top:3rem;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  width:100%;
  display:flex;
  justify-content:center;
  padding:0 1rem;
  text-align:center;
  color:white;
}

.hero-text{
  width:min(520px,calc(100% - 2rem));
  background:rgba(0,0,0,0.28);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  padding:1rem 1.4rem;
  border-radius:16px;
  text-shadow:0 2px 10px rgba(0,0,0,0.7);
}

.hero-text h1{
  font-size:clamp(2rem,5vw,4.5rem);
  letter-spacing:.04em;
  line-height:1.05;
  margin-bottom:.4rem;
}

.hero-text p{
  font-size:clamp(1rem,1.8vw,1.2rem);
  line-height:1.4;
}

@media(max-width:900px){
  .hero-deer{
    width:clamp(180px,34vw,320px);
  }

  .hero-content{
    top:2.4rem;
  }

  .hero-text{
    width:min(460px,calc(100% - 1.5rem));
  }
}

@media(max-width:600px){
  .hero{
    height:100svh;
    height:100dvh;
  }

  .hero-deer{
    width:clamp(170px,48vw,260px);
  }

  .hero-content{
    top:1.6rem;
    padding:0 .8rem;
  }

  .hero-text{
    width:calc(100% - 1rem);
    max-width:360px;
    padding:.9rem 1rem;
    border-radius:14px;
  }

  .hero-text h1{
    font-size:clamp(1.6rem,7vw,2.2rem);
    margin-bottom:.3rem;
  }

  .hero-text p{
    font-size:.95rem;
    line-height:1.35;
  }
}

@media(max-width:380px){
  .hero-deer{
    width:clamp(150px,46vw,220px);
  }

  .hero-content{
    top:1.2rem;
  }

  .hero-text{
    max-width:320px;
    padding:.75rem .9rem;
  }

  .hero-text h1{
    font-size:1.45rem;
  }

  .hero-text p{
    font-size:.9rem;
  }
}