:root{
  --ink-violet: #5a2ca0;
  --ink-black: #191919;
  --ink-red: #c81d25;
  --ink-gold: #d4a017;
  --tape-yellow: #ffd400;
  --tape-black: #131313;
  --paper: #f3e7d9;
  --bg: #f7f2ea;
  --text: #231942;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

.wrap{
  min-height: calc(100vh - 90px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(16px, 2.5vw, 32px);
  position:relative;
}

/* tape as repeating background layers */
.tape{
  position:absolute;
  left:-10vw; right:-10vw;
  height:36px;
  background:
    repeating-linear-gradient(-25deg,
      var(--tape-yellow) 0 28px,
      var(--tape-black) 28px 52px);
  transform: rotate(-2deg);
  opacity:.9;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.15));
  border-top: 3px solid rgba(0,0,0,.15);
  border-bottom: 3px solid rgba(0,0,0,.15);
}
.tape-top{ top:6vh; }
.tape-mid{ top:38vh; transform: rotate(3deg); }
.tape-bottom{ bottom:12vh; transform: rotate(-5deg); }

.brand{
  display:grid;
  place-items:center;
  margin-bottom:clamp(16px, 2vw, 24px);
}

.logo{
  width:min(540px, 80vw);
  height:auto;
  user-select:none;
}

.hero{
  display:grid;
  place-items:center;
  position:relative;
}

.banner{
  width:min(960px, 92vw);
  height:auto;
  border-radius:12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

/* ink blots */
.decoration .blot{
  position:absolute;
  border-radius:50%;
  filter: blur(1px) drop-shadow(0 12px 18px rgba(0,0,0,.2));
  mix-blend-mode: multiply;
  opacity:.9;
}
.blot-violet{ width:220px; height:170px; background:radial-gradient(circle at 30% 35%, #6f3bd9 0 40%, var(--ink-violet) 55% 100%); bottom:8vh; left:6vw; transform:rotate(-8deg); }
.blot-black{ width:160px; height:140px; background:radial-gradient(circle at 60% 40%, #333 0 40%, var(--ink-black) 55% 100%); bottom:16vh; right:8vw; transform:rotate(7deg); }
.blot-red{ width:120px; height:110px; background:radial-gradient(circle at 40% 40%, #ff3641 0 40%, var(--ink-red) 55% 100%); top:14vh; right:18vw; transform:rotate(-14deg); }
.blot-gold{ width:140px; height:120px; background:radial-gradient(circle at 40% 40%, #ffd95e 0 40%, var(--ink-gold) 55% 100%); top:10vh; left:16vw; transform:rotate(9deg); }

/* footer */
.footer{
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    repeating-linear-gradient(25deg,
      var(--tape-yellow) 0 28px,
      var(--tape-black) 28px 52px);
  color:#fff;
  padding: 16px;
}
.footer a{
  color:#fff;
  font-weight:700;
  text-decoration-thickness: .12em;
  text-underline-offset: .18em;
}
.footer p{
  margin:0;
  padding:.4rem .8rem;
  background:rgba(0,0,0,.45);
  border-radius:10px;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .blot{ animation: float 9s ease-in-out infinite alternate; }
  .blot-red{ animation-duration: 7s; }
  .blot-black{ animation-duration: 11s; }
}
@keyframes float { 
  from { transform: translateY(0) rotate(0.5deg); } 
  to   { transform: translateY(-10px) rotate(-1.5deg); } 
}