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

.logo-pill {
  display: inline-flex; width: 2.4rem; height: 1.2rem; border-radius: 999px; overflow: hidden;
  transform: rotate(-30deg); box-shadow: 0 2px 6px rgba(18,48,107,.25);
}
.logo-pill span { flex: 1; }
.logo-pill span:first-child { background: #1f4fa8; }
.logo-pill span:last-child { background: #b5e05a; }

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

.hero-bg {
  background:
    radial-gradient(50rem 28rem at 90% 0%, rgba(181,224,90,.18), transparent 60%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(77,130,230,.35), transparent 60%),
    linear-gradient(135deg, #0b1d44 0%, #12306b 60%, #1f4fa8 100%);
}

.dots {
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 22px 22px;
}

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

.product-card { transition: transform .3s ease, box-shadow .3s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -28px rgba(18,48,107,.45); }

.mobile-buy { box-shadow: 0 -8px 24px -12px rgba(18,48,107,.25); }

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

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