@import url('animations.css');

html, body {
  height: 100%;
  overflow: hidden;
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  background:#05060d;
  color:#fff;
}

/* ================= HERO ================= */

.hero{
  height:100vh;
  width:100vw;
  background:url('https://moffel.fit/hero.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Single Glass Card */
.hero-card{
  width:320px;
  height:320px;
  border-radius:28px; /* vierkant maar subtiel afgerond */

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(50px) saturate(180%);
  -webkit-backdrop-filter:blur(50px) saturate(180%);
  border:1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 40px 120px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.2);

  position:relative;
}

.hero-logo{
  width:100px;
  height:auto;
  object-fit:contain;
  margin-bottom:30px;
}

/* Start Button */
.hero-start{
  padding:14px 38px;
  border-radius:999px;
  border:none;
  background:white;
  color:black;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  transition:all .25s ease;
}

.hero-start:active{
  transform:scale(.96);
}