:root{
  --bg0:#050203;
  --bg1:#0b0205;
  --ink:#f3e9ea;
  --blood:#7a0015;
  --blood2:#b1002c;
  --stroke:rgba(255,90,120,.18);
  --shadow:0 24px 80px rgba(0,0,0,.7);
}

/* RESET */
*{box-sizing:border-box}
html,body{height:100%}

/* BODY = ZENTRIERUNG */
body{
  margin:0;
  display:flex;
  align-items:center;      /* vertikal */
  justify-content:center;  /* horizontal */
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 20% 15%, rgba(255,0,76,.14), transparent 60%),
    radial-gradient(900px 650px at 80% 85%, rgba(122,0,21,.25), transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  overflow:hidden;
}

/* BACKGROUND FX */
.bg-noise{
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity:.14;
  pointer-events:none;
}

.bg-grid{
  position:fixed; inset:-30%;
  background:
    linear-gradient(to right, rgba(255,42,90,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,42,90,.05) 1px, transparent 1px);
  background-size:80px 80px;
  transform:rotate(-12deg);
  pointer-events:none;
}

.glow{
  position:fixed;
  width:520px;height:520px;
  left:-140px;top:60px;
  background:radial-gradient(circle, rgba(255,0,76,.4), transparent 60%);
  filter:blur(30px);
  pointer-events:none;
}

/* LAYOUT */
.wrap{
  width:100%;
  display:flex;
  justify-content:center;
}

.hero{
  text-align:center;
  padding:48px 36px;
  border-radius:22px;
  background:rgba(16,4,8,.75);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}

/* TITLE */
.title{
  margin:0 100px 32px;
}

.title__bold{
  font-size:clamp(2.6rem,5vw,4rem);
  font-weight:900;
  letter-spacing:.02em;
  text-shadow:
    0 0 14px rgba(255,0,76,.2),
    0 20px 50px rgba(0,0,0,.9);
}

/* BUTTON */
.actions{
  display:flex;
  justify-content:center;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.02em;
  color:#ffecef;
  background:linear-gradient(135deg,var(--blood2),var(--blood));
  border:1px solid rgba(255,90,120,.3);
  box-shadow:0 18px 50px rgba(177,0,44,.4);
  transition:.15s ease;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 18px rgba(255,0,76,.35),
    0 28px 70px rgba(0,0,0,.95);
}

/* MOBILE */
@media(max-width:600px){
  .hero{padding:36px 22px}
}
.btn--icon{
  width:64px;
  height:64px;
  padding:0;
}

.btn--icon svg{
  width:30px;
  height:30px;
  fill:#ffecef;
}