html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

.logo-mark {
  display: inline-grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: .7rem;
  background: linear-gradient(135deg, #3fc1b0, #f26b54);
  font-family: 'Unbounded', sans-serif; font-weight: 700; color: #fff;
}

.mobile-menu { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mobile-menu.open { max-height: 32rem; }

.hero-bg {
  background:
    radial-gradient(60rem 30rem at 85% 10%, rgba(63,193,176,.25), transparent 60%),
    radial-gradient(40rem 25rem at 0% 100%, rgba(242,107,84,.18), transparent 60%),
    linear-gradient(160deg, #06201f 0%, #0f3f3c 100%);
}

.grid-lines {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

.pack-card { transition: transform .3s ease, box-shadow .3s ease; }
.pack-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(6,32,31,.35); }

.pack-img { aspect-ratio: 4 / 3; object-fit: contain; max-width: 100%; height: auto; }

.target-chip {
  display: inline-flex; align-items: center; padding: .4rem .85rem;
  border-radius: 999px; font-size: .85rem; font-weight: 500;
  background: rgba(63,193,176,.12); color: #0f3f3c; border: 1px solid rgba(63,193,176,.35);
}

details.faq summary { list-style: none; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .plus { transition: transform .25s ease; }
details.faq[open] summary .plus { transform: rotate(45deg); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }