/* Kopf zentrieren */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero h1{ margin:0 0 8px; }
.hero .sub{ margin:0; }

/*Hintergrund */

:root{
  --glass: rgba(17,18,20,.60);   /* halbtransparent dunkel */
  --line:  rgba(255,255,255,.08);/* feine Linie */
}

/* auf beide Karten anwenden */
.card{
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);    /* leichter Glas-Effekt */
}

/*ganze Seite */

body{
  background-color:#0b0b0c;
  background-image:url('future.png'); /* dein Musterbild */
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;  /* dezenter Parallax-Touch */
}

.hero { text-align: center; }
.hero h1 { margin-bottom: 6px; }
.hero .sub {
  display: block;
  margin: 0 auto 8px;
  max-width: 720px;
  opacity: .9;
}

.card {
  background: rgba(12,12,13,.65);
  backdrop-filter: saturate(120%) blur(2px);
  border: 1px solid rgba(255,255,255,.06);
}