:root {
  --honey: #F5A623;
  --honey-dark: #d8860b;
  --ink: #1a1713;
  --page-bg: #fdf8ef;          /* warm cream page base (was stark white) */
  --cream: #faf3e6;            /* slightly deeper cream for alternating bands */
  --beige: #f3e9d6;
  --forest: #3f5e44;
  --muted: #6b6258;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(26, 23, 19, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--page-bg);
  line-height: 1.65;
  overflow-x: hidden;            /* guard against any decorative overflow */
}
h1, h2, h3, .navbar-brand .brand-text, .footer-brand {
  font-family: 'Playfair Display', Georgia, serif;
}

.skip-link {
  position: absolute; top: .5rem; left: .5rem; z-index: 1080;
  background: var(--ink); color: #fff; padding: .5rem .9rem; border-radius: 8px;
}

/* ---------- Hexagon / honeycomb pattern (pure CSS, no images) ---------- */
.hexagon-bg {
  background-color: var(--honey);
  /* first layer = soft cream->orange top fade so the warm header blends in
     (matches the homepage hero); other layers are the honeycomb texture */
  background-image:
    linear-gradient(to bottom, var(--page-bg) 0, rgba(253,248,239,0) 90px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0 2px, transparent 2px),
    repeating-conic-gradient(from 30deg, rgba(0,0,0,.05) 0deg 60deg, rgba(255,255,255,.04) 60deg 120deg);
  background-size: 100% 100%, 22px 22px, 60px 104px;
  background-repeat: no-repeat, repeat, repeat;
  position: relative;
}
.hexagon-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(60deg, transparent 0 calc(50% - .6px), rgba(26,23,19,.07) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)),
    linear-gradient(-60deg, transparent 0 calc(50% - .6px), rgba(26,23,19,.07) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)),
    linear-gradient(0deg, transparent 0 calc(50% - .6px), rgba(26,23,19,.07) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px));
  background-size: 40px 70px;
  opacity: .5; pointer-events: none;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(253,248,239,.9); backdrop-filter: blur(8px);  /* warm, not stark white */
  border-bottom: 1px solid rgba(26,23,19,.06);
}
.navbar { padding-top: .6rem; padding-bottom: .6rem; }
.navbar-brand .brand-text { font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.nav-link { color: var(--ink); font-weight: 500; }
.nav-link:hover, .nav-link:focus { color: var(--honey-dark); }
.lang-toggle { display: flex; align-items: center; gap: .25rem; font-weight: 600; }
.lang-link { color: var(--muted); text-decoration: none; padding: .15rem .35rem; border-radius: 6px; }
.lang-link.active { color: var(--ink); background: var(--beige); }
.lang-sep { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn-order {
  background: #25D366; color: #fff; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: none; border-radius: 10px; padding: .6rem 1.1rem;
}
.btn-order:hover, .btn-order:focus { background: #1da851; color: #fff; }
.btn-hero {
  background: var(--ink); color: #fff; font-weight: 600;
  border-radius: 999px; padding: .8rem 2rem; border: 2px solid var(--ink);
}
.btn-hero:hover, .btn-hero:focus { background: transparent; color: var(--ink); }

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 8vw, 6rem) 0; color: var(--ink); }
.hero-inner { position: relative; z-index: 1; max-width: 720px; }
.hero-logo {
  background: #fff; border-radius: 50%; padding: 8px; box-shadow: var(--shadow); margin-bottom: 1.2rem;
}
.hero-title { font-size: clamp(2rem, 5vw, 3.3rem); font-weight: 800; margin-bottom: .6rem; }
.hero-sub { font-size: 1.15rem; max-width: 540px; margin: 0 auto 1.6rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 7vw, 5rem) 0; }
.section-cream { background: var(--cream); }
.section-dark {
  /* start from the cream page and ease into ink so there's no hard edge; extra
     top padding keeps the white text on the fully dark part */
  background: linear-gradient(to bottom, var(--page-bg) 0, var(--ink) 120px);
  padding-top: 140px;
}
.section-head { max-width: 640px; margin: 0 auto 2.5rem; }
.section-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; }
.section-sub { color: var(--muted); }
.section-dark .section-sub { color: rgba(255,255,255,.7); }
.about-text { font-size: 1.05rem; color: #38322b; }
.about-photo { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }

/* ---------- "Where are our bees" — a bee that flies a banner across (R→L) ---------- */
.bee-fly { position: relative; z-index: 3; overflow: hidden; height: 46px; }
.bee-fly-track {
  position: absolute; top: 50%; left: 0; display: inline-flex; align-items: center;
  gap: .5rem; white-space: nowrap; animation: flyAcross 18s linear infinite;
}
@keyframes flyAcross {
  from { transform: translate(100vw, -50%); }
  to   { transform: translate(-100%, -50%); }
}
.bee-carry-bee { font-size: 1.5rem; line-height: 1; animation: beeBuzz .45s ease-in-out infinite alternate; }
.bee-carry-banner {
  position: relative; background: #fff; color: var(--ink);
  font-weight: 600; font-size: .88rem; line-height: 1.2; white-space: nowrap;
  border: 1.5px solid var(--honey); border-radius: 12px; padding: .35rem .8rem;
  box-shadow: 0 6px 16px rgba(26,23,19,.14);
}
.bee-carry-banner::before {   /* little string the bee carries it by */
  content: ""; position: absolute; left: -9px; top: 50%; width: 9px; height: 2px;
  background: var(--honey); transform: translateY(-50%);
}
.bee-carry-meta { color: var(--honey-dark); font-weight: 600; }
@keyframes beeBuzz { 0% { transform: translateY(0) rotate(-7deg); } 100% { transform: translateY(-2px) rotate(7deg); } }
.hero-modern { padding-top: .3rem; }
.hero-modern > .container { padding-top: clamp(1.2rem, 4vw, 2.6rem); }
@media (max-width: 575.98px) {
  .bee-fly { height: 40px; }
  .bee-carry-bee { font-size: 1.3rem; }
  .bee-carry-banner { font-size: .8rem; padding: .3rem .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bee-fly { height: auto; display: flex; justify-content: center; padding: .5rem 1rem; overflow: visible; }
  .bee-fly-track { position: static; transform: none; animation: none; white-space: normal; max-width: 92vw; }
  .bee-carry-banner { white-space: normal; }
  .bee-carry-bee { animation: none; }
}

/* ---------- Page heads ---------- */
.page-head { padding: clamp(2.5rem, 6vw, 4rem) 0; color: var(--ink); }
.page-title { position: relative; z-index: 1; font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; }
.page-sub { position: relative; z-index: 1; color: #4a4138; }

/* ---------- Product cards ---------- */
.product-card {
  background: #fff; border: 1px solid var(--beige); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-thumb { position: relative; aspect-ratio: 1/1; background: var(--cream); overflow: hidden; }
/* contain (not cover) so any uploaded photo — portrait, landscape or square —
   shows in full, centred, never zoomed or cropped. Works for every future upload. */
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.product-thumb-placeholder { width:100%; height:100%; display:grid; place-items:center; background: var(--beige); opacity:.6; }
.badge-cat {
  position: absolute; top: .6rem; left: .6rem;
  background: rgba(26,23,19,.82); color: #fff; font-size: .72rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 999px; text-transform: capitalize;
}
.product-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.product-name { font-size: 1.2rem; font-weight: 700; margin: 0; }
.product-desc { color: var(--muted); font-size: .92rem; margin: 0; flex: 1; }
.product-meta { display: flex; align-items: baseline; gap: .35rem; }
.product-price { font-size: 1.35rem; font-weight: 800; color: var(--honey-dark); }
.product-unit { color: var(--muted); font-size: .9rem; }

/* ---------- Category filter ---------- */
.category-filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.filter-pill {
  border: 1.5px solid var(--beige); color: var(--ink); text-decoration: none;
  padding: .4rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
}
.filter-pill:hover { border-color: var(--honey); }
.filter-pill.active { background: var(--honey); border-color: var(--honey); color: var(--ink); }

/* ---------- Trust ---------- */
.trust-card { padding: 1.5rem; }
.trust-icon { font-size: 2.4rem; }
.trust-name { font-size: 1.25rem; font-weight: 700; margin: .5rem 0 .35rem; }
.trust-txt { color: var(--muted); }

/* ---------- Contact ---------- */
.contact-card { background:#fff; border:1px solid var(--beige); border-radius: var(--radius); padding: 2rem 1.5rem; height: 100%; }
.contact-icon {
  width: 66px; height: 66px; margin: 0 auto 1rem;
  display: grid; place-items: center; border-radius: 50%;
}
.contact-icon svg { width: 30px; height: 30px; }
.contact-icon--wa  { background: rgba(37,211,102,.14);  color: #1da851; }
.contact-icon--fb  { background: rgba(24,119,242,.12);  color: #1877F2; }
.contact-icon--loc { background: rgba(245,166,35,.18);  color: var(--honey-dark); }
.contact-h { font-size: 1.3rem; font-weight: 700; margin: .5rem 0; }
.contact-mail { color: var(--honey-dark); }

/* ---------- Prose (legal/about) ---------- */
.prose h2 { font-size: 1.3rem; margin: 1.6rem 0 .6rem; }
.prose p, .prose li { color: #38322b; }
.prose ul { padding-left: 1.2rem; }

/* About gallery — masonry of the brand's post graphics */
.gallery { columns: 3 270px; column-gap: 1.1rem; }
.gallery-item { break-inside: avoid; margin: 0 0 1.1rem; }
.gallery-item img { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow); display: block; }
@media (max-width: 575.98px) { .gallery { columns: 1; } }

/* ---------- Web shop ---------- */
.btn-cart {
  background: var(--honey); color: var(--ink); font-weight: 600; border: none; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .6rem 1.1rem;
}
.btn-cart:hover, .btn-cart:focus { background: var(--honey-dark); color: #fff; }
.btn-cart.is-added { background: #2e8b4f; color: #fff; }

.nav-cart { position: relative; display: inline-flex; align-items: center; }
.cart-badge {
  position: absolute; top: -4px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--ink); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}

.checkout-card { background: #fff; border: 1px solid var(--beige); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.cart-table-wrap { background: #fff; border: 1px solid var(--beige); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cart-table { margin: 0; }
.cart-table th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.cart-table td, .cart-table th { padding: .8rem 1rem; vertical-align: middle; }
.cart-qty { width: 76px; }
.btn-cart-remove { background: none; border: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.btn-cart-remove:hover { color: #c0392b; }
.cart-grand { font-size: 1.15rem; color: var(--honey-dark); }
.order-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-top: 1px solid var(--beige); padding-top: 1rem; font-weight: 600; }
.order-total strong { font-size: 1.35rem; color: var(--honey-dark); }

.order-code { font-weight: 700; color: var(--honey-dark); }
.pay-barcode { max-width: 320px; width: 100%; height: auto; }
.pay-details dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-top: .7rem; }
.pay-details dd { margin: .1rem 0 0; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; word-break: break-all; }

.pay-options { display: grid; gap: .6rem; }
.pay-option {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  border: 1.5px solid var(--beige); border-radius: 12px; padding: .8rem 1rem; margin: 0;
  transition: border-color .15s ease, background .15s ease;
}
.pay-option:hover { border-color: var(--honey); }
.pay-option:has(input:checked) { border-color: var(--honey); background: rgba(245,166,35,.07); }
.pay-option.is-disabled { opacity: .45; cursor: not-allowed; }
.pay-option.is-disabled input { pointer-events: none; }
.pay-option input { margin-top: .25rem; }
.pay-option-body { display: flex; flex-direction: column; }
.pay-option-body small { color: var(--muted); }

.cod-badge { font-size: 2.6rem; }
.pay-amount-big { font-size: 1.8rem; font-weight: 800; color: var(--honey-dark); margin: .4rem 0 0; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--ink); color: rgba(255,255,255,.8); padding: 2.2rem 0 1.3rem; }
/* Soft lead-in into the dark footer on every page. transparent->ink (not
   cream->ink) so it blends over a cream section (subpages) AND over the dark
   contact section (home) without introducing a stray band. */
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px;
  transform: translateY(-100%);
  background: linear-gradient(to bottom, rgba(26,23,19,0), var(--ink));
  pointer-events: none;
}
.footer-brand { color: #fff; font-size: 1.1rem; }
.footer-tagline { color: rgba(255,255,255,.6); max-width: 320px; }
.footer-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--honey); margin-bottom: .8rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.footer-links a { color: rgba(255,255,255,.8); text-decoration: none; }
.footer-links a:hover { color: var(--honey); }
.footer-hr { border-color: rgba(255,255,255,.12); margin: 1.5rem 0 1rem; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .4rem 1.4rem; font-size: .85rem; color: rgba(255,255,255,.6);
}
.footer-bottom a { color: rgba(255,255,255,.8); }
.made-by {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  color: rgba(255,255,255,.5); opacity: .85; transition: opacity .15s ease;
}
.made-by:hover { opacity: 1; }
.made-by img { height: 26px; width: auto; display: block; }

/* Mobile centring tweaks */
@media (max-width: 991.98px) {
  .section-cream .section-title { text-align: center; }   /* "O nama" heading */
}
@media (max-width: 767.98px) {
  .site-footer .col-md-5 { text-align: center; }           /* footer brand block */
  .site-footer .col-md-5 > .d-flex { justify-content: center; }
  .footer-tagline { margin-inline: auto; }
  .footer-bottom { justify-content: center; text-align: center; }  /* copyright + legal + "Izradio" */
}

@media (max-width: 575.98px) {
  .navbar-nav { gap: .25rem; padding-top: .5rem; }
  .lang-toggle { padding-top: .5rem; }
}

/* =========================================================================
   Modern hero: animated honey gradient + drifting honeycomb + glow blobs
   ========================================================================= */
.hero-modern {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  perspective: 900px;                 /* gives the 3D logo real depth */
  /* Static gradient (no animated background-position -> no per-frame repaint).
     A top cream->transparent layer blends the warm header into the orange. */
  background:
    linear-gradient(to bottom, var(--page-bg) 0, rgba(253,248,239,0) 88px),
    linear-gradient(135deg, #f9c349 0%, var(--honey) 45%, #e8930c 100%);
}
/* Soft fade where orange areas meet the cream page below — no hard edge. */
.hero-modern::after,
.page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 130px;
  background: linear-gradient(to bottom, rgba(253,248,239,0) 0%, var(--page-bg) 100%);
  z-index: 0; pointer-events: none;
}
.page-head { position: relative; overflow: hidden; }
/* Drifting honeycomb. Oversized and moved via TRANSFORM (composited, no repaint);
   translate equals 3 pattern tiles so the loop is seamless. */
.hero-modern::before {
  content: ""; position: absolute; inset: -55%; z-index: -2;
  background-image:
    linear-gradient(60deg, transparent 0 calc(50% - .7px), rgba(26,23,19,.10) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)),
    linear-gradient(-60deg, transparent 0 calc(50% - .7px), rgba(26,23,19,.10) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)),
    linear-gradient(0deg, transparent 0 calc(50% - .7px), rgba(26,23,19,.10) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px));
  background-size: 46px 80px;
  opacity: .5; will-change: transform;
  animation: hexDrift 55s linear infinite;
}
@keyframes hexDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(138px,240px,0); } }

/* Soft glow blobs. Softness comes from a radial-gradient fill (NOT filter:blur,
   which re-rasterizes while moving) and there's no mix-blend-mode (re-blends the
   backdrop each frame). Only transform animates -> fully composited. */
.hero-blob {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  will-change: transform;
}
.hero-blob-1 { width: 380px; height: 380px; top: -100px; left: -70px; background: radial-gradient(circle, rgba(255,245,214,.8) 0%, rgba(255,245,214,0) 70%); animation: blobFloat 14s ease-in-out infinite; }
.hero-blob-2 { width: 320px; height: 320px; bottom: -120px; right: -50px; background: radial-gradient(circle, rgba(255,211,107,.7) 0%, rgba(255,211,107,0) 70%); animation: blobFloat 18s ease-in-out infinite reverse; }
.hero-blob-3 { width: 240px; height: 240px; top: 28%; right: 20%; background: radial-gradient(circle, rgba(255,250,240,.7) 0%, rgba(255,250,240,0) 70%); animation: blobFloat 22s ease-in-out infinite; }
@keyframes blobFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(30px, -24px, 0) scale(1.08); }
  66%      { transform: translate3d(-22px, 18px, 0) scale(.94); }
}

/* two-column hero layout */
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  max-width: 1100px; margin-inline: auto; position: relative; z-index: 1;
}
.hero-copy { text-align: left; min-width: 0; }   /* allow grid item to shrink */
.hero-art { min-width: 0; }
.hero-eyebrow {
  display: inline-block; background: rgba(26,23,19,.07); color: #3a3228;
  border: 1px solid rgba(26,23,19,.16); padding: .38rem .95rem; border-radius: 999px;
  font-weight: 600; font-size: .85rem; margin-bottom: 1rem;
}
.hero-copy .hero-title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-bottom: .7rem; }
.hero-copy .hero-sub { margin: 0 0 1.6rem; max-width: 520px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 1.1rem 1.4rem; padding: 0; margin: 0; }
.hero-trust li { display: flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .92rem; color: #3a3228; }
.hero-trust-ico { font-size: 1.15rem; }

.hero-art { position: relative; display: grid; place-items: center; min-height: 340px; }
.hero-art-glow {
  position: absolute; inset: 0; margin: auto; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,235,.9) 0%, rgba(255,250,235,0) 70%);
}
/* jar + seal share one grid cell so the seal anchors to the jar (no % offsets) */
.hero-jar {
  grid-area: 1 / 1; z-index: 1; max-width: 380px; width: 100%; height: auto;
  display: block; justify-self: center;
  filter: drop-shadow(0 20px 26px rgba(26,23,19,.22));
}
.logo-3d--seal {
  grid-area: 1 / 1; align-self: start; justify-self: end;
  width: 92px; height: 92px; margin: 0; z-index: 2; transform: translate(10%, -6%);
}
.logo-3d--seal .logo-face { box-shadow: 0 8px 18px rgba(26,23,19,.3); }

@media (max-width: 991.98px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-copy { text-align: center; }
  .hero-copy .hero-sub { margin-inline: auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .hero-art { min-height: 280px; }
  .hero-jar { max-width: 280px; }
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-trust { gap: .6rem 1.1rem; }
  .hero-copy .hero-title { font-size: 1.95rem; }
  .hero-copy .hero-sub { font-size: 1.02rem; }
  /* keep decorative blobs from bleeding past the viewport edge */
  .hero-blob-1 { left: -90px; } .hero-blob-2 { right: -90px; }
}

/* Compact the hero on phones so the whole thing (incl. the jar photo) fits
   above the fold without scrolling. */
@media (max-width: 575.98px) {
  .hero { padding-bottom: 1rem; }
  /* fill the screen (minus the sticky header) so the next section stays below
     the fold; content is centred so the bigger jar photo is fully visible */
  .hero-modern { min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); display: flex; flex-direction: column; }
  .hero-modern > .container { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding-top: .6rem; }
  .hero-grid { gap: .9rem; }
  .hero-eyebrow { margin-bottom: .5rem; padding: .28rem .75rem; font-size: .76rem; }
  .hero-copy .hero-title { font-size: 1.7rem; margin-bottom: .35rem; }
  .hero-copy .hero-sub { font-size: .92rem; margin-bottom: .9rem; }
  .hero-actions { gap: .45rem; margin-bottom: .8rem; }
  .hero-actions .btn { padding: .55rem 1rem; }
  .hero-trust { font-size: .82rem; }
  .hero-art { min-height: auto; }
  .hero-jar { max-width: 250px; }
  .logo-3d--seal { width: 66px; height: 66px; }
}

/* =========================================================================
   3D rotating logo (coin spin)
   ========================================================================= */
.logo-3d {
  width: 140px; height: 140px; margin: 0 auto 1.4rem;
  position: relative; transform-style: preserve-3d;
}
.logo-3d-inner {
  width: 100%; height: 100%;
  position: relative; transform-style: preserve-3d;
  animation: logoSpin 7s linear infinite;
}
@keyframes logoSpin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.logo-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; background: #fff; padding: 8px;
  backface-visibility: hidden;
  box-shadow: 0 14px 30px rgba(26,23,19,.28);
}
.logo-back { transform: rotateY(180deg); }
.logo-3d-shadow {
  position: absolute; left: 50%; bottom: -22px; width: 110px; height: 18px;
  transform: translateX(-50%); border-radius: 50%;
  background: rgba(26,23,19,.25); filter: blur(7px);
  animation: shadowPulse 7s ease-in-out infinite;
}
@keyframes shadowPulse { 0%,100% { transform: translateX(-50%) scaleX(1); opacity:.28; } 50% { transform: translateX(-50%) scaleX(.6); opacity:.16; } }

/* =========================================================================
   Flying bees (spawned by bees.js, fixed over the whole page)
   ========================================================================= */
.bee-layer { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.bee {
  position: absolute; top: 0; left: 0; width: 44px; height: auto;
  will-change: transform; backface-visibility: hidden; transform: translateZ(0);
  /* each bee is its own compositor layer; loop only changes its transform */
}
/* The sprite flips L/R to face travel direction; promoted + transition so the
   flip is composited (no repaint) and eased. */
.bee-sprite { display: block; transform-origin: center; will-change: transform; transition: transform .28s ease; }
/* Wings are STATIC and soft (a motion-blur look). Chrome won't reliably
   composite SVG-internal transforms, so an animated flap repaints the bee every
   beat. Static wings mean each bee rasterizes once and is then only moved. */
.bee-wing { transform-box: view-box; transform-origin: 28px 22px; }

/* Respect users who prefer less motion: freeze everything decorative. */
@media (prefers-reduced-motion: reduce) {
  .hero-modern, .hero-modern::before, .hero-blob,
  .logo-3d-inner, .logo-3d-shadow, .bee, .bee-wing { animation: none !important; }
  .bee-layer { display: none; }
  .logo-back { display: none; }
}