:root{
  --base: #D13D40;

  --c1: #D13D40; /* base */
  --c2: #A72E33; /* darker */
  --c3: #2A0D10; /* deep background */

  --title: rgba(255,255,255,.68);
  --text: rgba(255,255,255,.54);

  --btn-border: rgba(255,255,255,.16);
  --btn-bg: rgba(255,255,255,.05);
  --btn-bg-hover: rgba(255,255,255,.08);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html, body { height: 100%; }

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow: hidden;

  background:
    radial-gradient(900px 650px at 50% 30%, rgba(209, 61, 64, .22), transparent 60%),
    linear-gradient(160deg, var(--c1), var(--c2) 52%, var(--c3));
}

.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(700px 520px at 20% 25%, rgba(255, 255, 255, .08), transparent 65%),
    radial-gradient(900px 640px at 80% 55%, rgba(209, 61, 64, .22), transparent 62%),
    radial-gradient(800px 560px at 45% 85%, rgba(255, 255, 255, .05), transparent 66%);

  background-size: 160% 160%;
  animation: drift 14s ease-in-out infinite;

  opacity: .85;
  mix-blend-mode: screen;
}

@keyframes drift{
  0%   { background-position: 0% 10%, 100% 0%, 40% 100%; }
  50%  { background-position: 100% 40%, 0% 100%, 70% 20%; }
  100% { background-position: 0% 10%, 100% 0%, 40% 100%; }
}

.center{
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 28px;
  gap: 14px;
}

.logo{
  width: min(300px, 72vw);
  height: auto;
  margin: 0 auto 6px;

  /* same vibe as title text */
  filter:
    brightness(0) invert(1)
    drop-shadow(0 10px 28px rgba(0,0,0,.45));
  opacity: .62;
}

h1{
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--title);
}

.lead{
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.4;
  color: var(--title);
  margin-top: 4px;
}

.meta{
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  opacity: 0.9;

  white-space: nowrap;
}

@media (max-width: 520px){
  .meta{
    white-space: normal;
  }
}

.btn{
  width: fit-content;
  margin: 18px auto 0;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255,255,255,.62);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover{
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}

.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(209, 61, 64, .25); /* uses base */
}

/* mobile spacing */
@media (max-width: 480px){
  .btn{ margin-top: 14px; }
}