:root {
  --purple: #7738d4;
  --sky: #24b7eb;
  --orange: #ff8a2a;
}

body {
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 212, 71, .22) 0 7%, transparent 7.5%),
    radial-gradient(circle at 94% 34%, rgba(36, 183, 235, .13) 0 8%, transparent 8.5%),
    radial-gradient(circle at 10% 76%, rgba(241, 73, 104, .12) 0 7%, transparent 7.5%),
    #fffaf0;
}

.announcement {
  background: linear-gradient(90deg, #12354a, #7738d4, #f14968, #12354a);
  background-size: 250% 100%;
  animation: color-flow 9s linear infinite;
}

.hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 9% 12%, rgba(255,212,71,.58), transparent 25%),
    radial-gradient(circle at 92% 10%, rgba(241,73,104,.18), transparent 22%),
    radial-gradient(circle at 85% 88%, rgba(36,183,235,.2), transparent 25%),
    linear-gradient(145deg,#fffaf0,#f2fffb);
}

.hero:before,
.hero:after {
  content: "✦  ●  ◆  ✦  ●";
  position: absolute;
  z-index: -1;
  color: #f14968;
  letter-spacing: 1rem;
  opacity: .35;
  transform: rotate(-15deg);
}
.hero:before { top: 24px; right: 5%; }
.hero:after { bottom: 28px; left: 4%; color: #24b7eb; transform: rotate(12deg); }

.hero-pricing {
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg,#f14968,#ffd447,#12c999,#24b7eb,#7738d4) border-box;
  border: 5px solid transparent;
  box-shadow: 14px 16px 0 #7738d4;
}

.tap-instruction {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 2px 0 11px;
  padding: 9px 12px;
  border: 2px dashed #f14968;
  border-radius: 14px;
  background: #fff3bd;
  color: #9b2742;
  font-size: .88rem;
  font-weight: 900;
  text-align: center;
}
.tap-instruction span { font-size: 1.35rem; animation: point-down .85s ease-in-out infinite alternate; }
.tap-instruction span:last-child { animation-delay: .22s; }

.quick-tab { border-width: 3px; position: relative; box-shadow: 0 4px 0 rgba(18,53,74,.18); }
.quick-tab:nth-child(1) { background: #fff0f3; border-color: #f14968; }
.quick-tab:nth-child(2) { background: #e8f8ff; border-color: #24b7eb; }
.quick-tab:nth-child(3) { background: #fff7d2; border-color: #ffb51b; }
.quick-tab:nth-child(4) { background: #f1eaff; border-color: #7738d4; }
.quick-tab.active {
  background: linear-gradient(135deg,#12354a,#7738d4);
  border-color: #ffd447;
  box-shadow: 0 6px 0 #ffd447, 0 10px 20px rgba(18,53,74,.2);
}
.quick-tab:not(.active) { animation: invite-click 2.2s ease-in-out infinite; }
.quick-tab:nth-child(2) { animation-delay: .25s; }
.quick-tab:nth-child(3) { animation-delay: .5s; }
.quick-tab:nth-child(4) { animation-delay: .75s; }

.quick-detail {
  background: linear-gradient(135deg,#effcf8,#ecf9ff);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.8);
}
.complete-detail { background: linear-gradient(135deg,#fff3bd,#ffe8ef); }

.catalog-button {
  min-height: 46px;
  background: linear-gradient(90deg,#ffd447,#ffb52e);
  border-width: 3px;
  box-shadow: 0 5px 0 #c77b00;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.blink-arrow { display: inline-block; margin-right: 5px; font-size: 1.2rem; animation: point-down .7s ease-in-out infinite alternate; }

.quick-detail > a,
.price-card a,
.modal-wa {
  background: linear-gradient(90deg,#12c999,#22e0ad);
  box-shadow: 0 5px 0 #088868;
}
.complete-detail > a,
.featured-price a { background: linear-gradient(90deg,#f14968,#ff6b55); box-shadow: 0 5px 0 #b62e49; }

.pricing-section {
  background:
    linear-gradient(135deg,rgba(255,212,71,.18),transparent 30%),
    linear-gradient(315deg,rgba(36,183,235,.12),transparent 35%);
}
.price-card:nth-child(1) { background: #fff0f3; box-shadow: 7px 8px 0 #f14968; }
.price-card:nth-child(2) { background: #e8f8ff; box-shadow: 7px 8px 0 #24b7eb; }
.price-card:nth-child(3) { background: #fff7d2; box-shadow: 7px 8px 0 #ffb51b; }
.price-card:nth-child(4) { background: #f1eaff; box-shadow: 7px 8px 0 #7738d4; }

.brand-card { position: relative; overflow: hidden; }
.brand-card:after {
  content: "✦";
  position: absolute;
  right: 18px;
  bottom: 10px;
  color: rgba(119,56,212,.18);
  font-size: 6rem;
  transform: rotate(14deg);
}

@keyframes point-down { from { transform: translateY(-3px); opacity: .55; } to { transform: translateY(4px); opacity: 1; } }
@keyframes invite-click { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes color-flow { to { background-position: 250% 0; } }

@media (max-width: 600px) {
  .hero-pricing { border-width: 4px; box-shadow: 8px 9px 0 #7738d4; }
  .tap-instruction { font-size: .78rem; padding: 7px 5px; }
  .tap-instruction span { font-size: 1.1rem; }
  .quick-tab { min-height: 78px; }
  .catalog-button { font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .announcement,.tap-instruction span,.quick-tab:not(.active),.blink-arrow { animation: none; }
}