:root{
  --red:#b41d1d;
  --orange:#f07b25;
  --amber:#e9901d;
  --yellow:#ffcc2b;
  --blue:#0b76b8;
  --maroon:#7b1d1d;
  --shadow: 0 10px 20px rgba(0,0,0,.18);
}

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

/* TOP STRIP */
.qs-topstrip-row{ min-height:432px; }
.qs-tile{ position:relative; overflow:hidden; }
.qs-red{background:#b81e1e;}
.qs-orange{background:#ee7426;}
.qs-amber{background:#e8941f;}
.qs-yellow{background:#ffd42e;}
.qs-blue{background:#1379b7;}

.qs-center{ display:grid; place-items:center; }

.qs-mini-pack img{
 width: 180px;
  height: 241px;

  /* position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%); */
  display:flex; 
  align-items:center; 
  justify-content:center;

}
.qs-mini-pack span{
  
 
}
.qs-pack-green{background:#96b52d;}
.qs-pack-maroon{background:#8f2b2b;}
.qs-pack-orange{background:#de6a1e;}
.qs-pack-yellow{background:#f3c132;}

.qs-logo-cloud{
  font-family: Fredoka, system-ui;
  font-weight:800;
  font-size:44px;
  color:#3a1e1b;
  background:#fff;
  padding:10px 22px;
  border-radius:999px;
  position:absolute;
  top:22px;
  box-shadow: 0 8px 0 rgba(0,0,0,.12);
}
.qs-duck-badge{
  width:76px; height:76px;
  border-radius:16px;
  background:
    radial-gradient(circle at 35% 35%, #fff 0 18px, transparent 19px),
    radial-gradient(circle at 65% 35%, #fff 0 18px, transparent 19px),
    radial-gradient(circle at 50% 70%, #fff 0 26px, transparent 27px),
    linear-gradient(#fff,#fff);
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.18));
  position:absolute;
  top:82px;
}

/* HERO */
.qs-hero{
  background:#c0131f;
  padding:34px 0;
  border-top:10px solid #fff;
  border-bottom:10px solid #fff;
  overflow:hidden;
}
.qs-hero::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(12px 8px at 15% 30%, #ffb400 60%, transparent 62%),
    radial-gradient(14px 9px at 28% 15%, #ffb400 60%, transparent 62%),
    radial-gradient(14px 9px at 60% 22%, #ffb400 60%, transparent 62%),
    radial-gradient(12px 8px at 75% 35%, #ffb400 60%, transparent 62%),
    radial-gradient(12px 8px at 85% 65%, #ffb400 60%, transparent 62%),
    radial-gradient(14px 9px at 35% 70%, #ffb400 60%, transparent 62%);
  opacity:.85;
}

.qs-hero-left{
  position:relative;
  width: min(520px, 100%);
  min-height:320px;
  display:flex;
  align-items:center;
}

.qs-packs{
  position:relative;
  width:360px;
  height:260px;
}
.qs-pack{
  position:absolute;
  width:170px; height:240px;
  border-radius:10px;
  box-shadow: var(--shadow);
  border:4px solid rgba(255,255,255,.25);
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(0,0,0,.12));
}
.qs-pack.p1{left:0; top:16px; background-color:#ffcc2b;}
.qs-pack.p2{left:36px; top:8px; background-color:#b7d93b;}
.qs-pack.p3{left:72px; top:0; background-color:#ff6b22;}
.qs-pack.p4{left:118px; top:-6px; width:195px; height:265px; background-color:#e21d2a;}

.qs-play{
  position:absolute;
  left:320px;
  top:50%;
  transform:translateY(-50%);
  width:92px; height:92px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  border:0;
}
.qs-tri{
  display:block;
  width:0; height:0;
  margin-left: 6px;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  border-left:24px solid #fff;
}

.qs-burst{
  width:340px;
  aspect-ratio:1/1;
  background:#ffd42e;
  border:6px solid #3a1e1b;
  box-shadow: var(--shadow);
  clip-path: polygon(
    50% 2%,62% 12%,76% 6%,82% 18%,98% 25%,86% 38%,96% 52%,82% 62%,
    90% 80%,70% 74%,60% 98%,50% 84%,40% 98%,30% 74%,10% 80%,18% 62%,
    4% 52%,14% 38%,2% 25%,18% 18%,24% 6%,38% 12%
  );
  display:grid;
  place-items:center;
}
.qs-burst-inner{
  text-align:center;
  font-family: Fredoka, system-ui;
  line-height:.95;
}
.qs-burst-top{
  font-size:34px;
  letter-spacing:1px;
  color:#7b1d1d;
  text-shadow: 0 4px 0 rgba(0,0,0,.15);
}
.qs-burst-bottom{
  font-size:56px;
  color:#fff;
  text-shadow:
    0 6px 0 rgba(0,0,0,.25),
    -3px 0 #3a1e1b, 3px 0 #3a1e1b, 0 -3px #3a1e1b, 0 3px #3a1e1b;
}

/* EXPLORE */
.qs-explore{ padding:38px 0 46px; }
.qs-title{
  font-family: Fredoka, system-ui;
  font-size: clamp(34px, 5vw, 54px);
  letter-spacing:1px;
  color:#c02a2a;
  text-shadow: 0 6px 0 rgba(0,0,0,.08);
}
.qs-sub{ font-weight:800; letter-spacing:.4px; font-size:14px; }

.qs-card{ background:#fff; }
.qs-card-art{
  height:170px;
  border-radius:6px;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.qs-art-orange{ background:#f07b25; }
.qs-art-maroon{ background:#8f1f23; }

.qs-bag{
  width:120px; height:150px;
  border-radius:10px;
  box-shadow: 0 16px 26px rgba(0,0,0,.25);
  transform: rotate(-14deg);
  position:absolute;
  left: 34%;
  top: 18%;
}
.qs-bag.small{
  width:90px; height:112px;
  transform: rotate(12deg);
  left: 56%;
  top: 24%;
  opacity:.95;
}
.bag-yellow{ background:#ffb400; }
.bag-red{ background:#c0131f; }
.bag-green{ background:#9acd32; }

.qs-h3{
  font-family: Fredoka, system-ui;
  font-size:22px;
  letter-spacing:.5px;
}

.qs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#e1141c;
  color:#fff;
  text-decoration:none;
  font-family: Fredoka, system-ui;
  font-weight:700;
  padding:10px 16px;
  border-radius:4px;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
}
.qs-btn:active{ transform: translateY(1px); box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.qs-arrow{ font-size:12px; }

/* CTA */
.qs-cta{
  background:#ffd42e;
  border-top:10px solid #fff;
  border-bottom:10px solid #fff;
  padding:34px 0;
  position:relative;
  overflow:hidden;
}
.qs-cta::before{
  content:"";
  position:absolute;
  inset:-70px;
  background:
    radial-gradient(12px 8px at 10% 40%, #ffb400 60%, transparent 62%),
    radial-gradient(12px 8px at 20% 70%, #ffb400 60%, transparent 62%),
    radial-gradient(14px 9px at 85% 35%, #ffb400 60%, transparent 62%),
    radial-gradient(14px 9px at 75% 70%, #ffb400 60%, transparent 62%);
  opacity:.7;
}
.qs-cta-title{
  font-family: Fredoka, system-ui;
  color:#e25700;
  font-size: clamp(34px, 5vw, 64px);
  line-height:.92;
  letter-spacing:1px;
  text-shadow: 0 8px 0 rgba(0,0,0,.12);
  margin-bottom: 16px;
}
.qs-btn-solid{ background:#e1141c; }
.qs-cta-duck{
  width:260px; height:220px;
  border-radius:18px;
  background:
    radial-gradient(circle at 35% 40%, #fff 0 58px, transparent 59px),
    radial-gradient(circle at 55% 45%, #fff 0 48px, transparent 49px),
    radial-gradient(circle at 78% 58%, #fff 0 24px, transparent 25px),
    linear-gradient(135deg, rgba(255,255,255,.65), rgba(0,0,0,.08));
  box-shadow: var(--shadow);
}

/* FOOTER */
.qs-footer{
  background:#5b2326;
  padding:34px 0 40px;
}
.qs-footer-title{
  font-family: Fredoka, system-ui;
  color:#fff;
  font-size:34px;
  letter-spacing:1px;
}
.qs-ico{
  width:40px; height:40px;
  border-radius:8px;
  background:#fff;
  color:#111;
  display:grid;
  place-items:center;
  text-decoration:none;
  font-weight:800;
}

/* Responsive tweaks */
@media (max-width: 991.98px){
  .qs-topstrip-row{ min-height:unset; }
  .qs-tile{ height:120px; }
  .qs-center{ height:150px; }
  .qs-play{
    left:50%;
    transform: translate(-50%, -50%);
  }
  .qs-hero-left{ justify-content:center; }
}