:root{
  --text:#ffffff;
  --muted:#e2e6ea;
  --ring: rgba(226,232,240,.7);
  --shadow: 0 40px 100px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
}

main.hero{
  position:relative;
  min-height:100dvh;
  display:grid;
  place-items:center;
  background: url('./assets/moikka-background.webp') center/cover no-repeat fixed;
}

.content{
  z-index:1;
  width:min(100% - 2rem, 1100px);
  text-align:center;
  //text-shadow:0 2px 6px rgba(0,0,0,.40);
}

.logo{
  width:min(100%, 600px);
  margin-inline:auto;
  display:block;
}

.lead{
  width:min(100%, 900px);
  margin:4rem auto 0;
  font-size: clamp(1rem, 1.1vw + .6rem, 1.25rem);
  line-height: 1.9rem;
  color: #252930;
}

.icons{
  margin-top: clamp(1.5rem, 4vw, 3rem);
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

.icon{
  width:50px;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background: rgba(255,255,255,.15);
  transition: transform .18s ease, filter .18s ease, background .18s ease;
  overflow:hidden;
}
.icon:hover{
  transform: translateY(-2px) scale(1.04);
  background: rgba(255,255,255,.30);
  filter: brightness(1.15);
}
.icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

footer{
  position:absolute;
  inset-inline:0;
  bottom:1rem;
  text-align:center;
  z-index:1;
  color:#e2e6ea;
  font-size:.95rem;
}
@media (max-width:520px){
  .icon{ width:50px }
  .lead{ line-height: 1.5rem; margin:2rem auto 0;}
  .logo{ margin-top: 100px;}
}