@font-face {
  font-family: 'Electrolize';
  font-style: normal;
  font-weight: 400;
  src: local('Electrolize'), local('Electrolize-Regular'), url(/fonts/electrolize_v2.woff) format('woff');
}

body {
	/* background: #310404 url(http://web-sonick.zz.mu/images/sl/red_texture.jpg) repeat top left; */
	background: lightgrey;
	font-family: 'Electrolize';
}

:root{
      --bg-1:#0f172a;
      --bg-2:#1e293b;
      --accent:#fbbf24;
      --accent-2:#f59e0b;
      --text:#e5e7eb;
      --muted:#94a3b8;
      --good:#22c55e;
    }

    html,body{height:100%;margin:0}
    body{
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(160deg,var(--bg-1),var(--bg-2));
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:var(--text);
    }

    .wrap{
      width:min(900px,90vw);
      text-align:center;
      position:relative;
    }

    .step{
      position:absolute;
      top:0;left:0;right:0;
      opacity:0;
      transform:translateY(20px);
    }

    .step:nth-child(1){animation: fadeInOut 6s ease forwards;animation-delay:0s}
    .step:nth-child(2){animation: fadeInOut 6s ease forwards;animation-delay:6s}
    .step:nth-child(3){animation: fadeInOut 6s ease forwards;animation-delay:12s}
    .step:nth-child(4){animation: fadeInOut 6s ease forwards;animation-delay:18s}
    .step:nth-child(5){animation: fadeInOut 6s ease forwards;animation-delay:24s}
    .step:nth-child(6){animation: fadeInStay 6s ease forwards;animation-delay:30s}

    @keyframes fadeInOut{
      0%{opacity:0;transform:translateY(20px)}
      10%,40%{opacity:1;transform:translateY(0)}
      60%,100%{opacity:0;transform:translateY(-20px)}
    }

    @keyframes fadeInStay{
      0%{opacity:0;transform:translateY(20px)}
      20%,100%{opacity:1;transform:translateY(0)}
    }


    h1{font-size:clamp(2rem,5vw,3rem);margin:0}
    .question{font-size:1.5rem;margin-top:1rem}
    .answer{font-size:clamp(3rem,8vw,6rem);font-weight:900;margin:1.5rem 0;background:linear-gradient(180deg,#fff,#cbd5e1);-webkit-background-clip:text;color:transparent;text-shadow:0 6px 30px rgba(0,0,0,.35)}
    .badge{margin-top:1rem;font-size:1rem}
    .cta{display:inline-block;margin-top:1.5rem;padding:.8rem 1.2rem;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#0b0b0b;text-decoration:none;border-radius:12px;font-weight:700}
    .legal{font-size:.9rem;color:var(--muted);margin-top:2rem}

    .superh1{font-size:5rem}