/* ============================================================
   CYBILAS SELL UP — Brand layer v1
   Mascot-driven identity: deep space + purple + yellow + cream.
   Loaded AFTER styles.css and the page's inline styles.
   Artwork: /assets/brand/mascots.jpg  (html.no-art = graceful fallback)
   ============================================================ */

:root {
  --color-primary: #1A1C2E;
  --color-accent:  #8B5CF6;
  --color-bg:      #0F1115;
  --color-surface: #24263C;
  --color-text:    #FFF9E0;
  --color-muted:   #C9C4E4;
  --color-border:  rgba(139, 92, 246, .25);

  --b-bg:      #0F1115;
  --b-bg2:     #24263C;
  --b-purple:  #6D28D9;
  --b-purple2: #8B5CF6;
  --b-yellow:  #FFCA52;
  --b-yellow2: #FFDC3C;
  --b-cream:   #FFF9E0;
  --b-blue:    #7EE4FF;
  --brand-art: url('/assets/brand/mascots.jpg');
}

/* ---------- Base ------------------------------------------------ */
html { scrollbar-color: #4C3D82 #16182A; }
body {
  background-color: var(--b-bg) !important;
  background-image:
    radial-gradient(700px 420px at 12% 6%,  rgba(109, 40, 217, .16), transparent 60%),
    radial-gradient(620px 400px at 88% 28%, rgba(126, 228, 255, .06), transparent 60%),
    radial-gradient(760px 520px at 45% 100%, rgba(139, 92, 246, .10), transparent 60%);
  background-attachment: fixed;
  color: var(--b-cream);
}
::selection { background: rgba(139, 92, 246, .55); color: #FFF9E0; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #16182A; }
::-webkit-scrollbar-thumb { background: #4C3D82; border-radius: 8px; border: 3px solid #16182A; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--b-blue); outline-offset: 2px; border-radius: 4px;
}

/* ---------- Utility re-map (compiled Tailwind tokens) ----------- */
.bg-primary   { background-color: #0F1115 !important; }
.bg-surface   { background-color: #24263C !important; }
.bg-bgsoft    { background-color: #1A1C2E !important; }
.bg-white     { background-color: #24263C !important; }
.bg-white\/10 { background-color: rgba(139, 92, 246, .14) !important; }
.bg-accent\/10 { background-color: rgba(139, 92, 246, .16) !important; }

.text-white    { color: #FFF9E0 !important; }
.text-textmain { color: #FFF9E0 !important; }
.text-muted    { color: #C9C4E4 !important; }
.text-slate-200, .text-slate-300 { color: #D9D4EE !important; }
.text-slate-400, .text-slate-500 { color: #9A94BD !important; }
.text-accent   { color: #FFCA52 !important; }
.text-primary  { color: #E4E0FA !important; }

.border-line   { border-color: rgba(139, 92, 246, .22) !important; }
.border-accent { border-color: #8B5CF6 !important; }
.border-white,
.border-white\/60 { border-color: rgba(255, 249, 224, .42) !important; }

.hover\:text-accent:hover  { color: #FFDC3C !important; }
.hover\:bg-white:hover     { background-color: rgba(139, 92, 246, .18) !important; }
.hover\:bg-white\/10:hover { background-color: rgba(126, 228, 255, .10) !important; }
.hover\:border-white:hover { border-color: #7EE4FF !important; }
.shadow-accent\/25 { box-shadow: 0 14px 34px -10px rgba(109, 40, 217, .55) !important; }

/* Purple = primary interaction (all accent-buttons site-wide) */
.bg-accent,
.hover\:bg-accent:hover {
  background: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%) !important;
  color: #FFF9E0 !important;
  border: 0;
  box-shadow: 0 10px 26px -10px rgba(109, 40, 217, .65);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.bg-accent:hover, .hover\:bg-accent-dark:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -10px rgba(139, 92, 246, .7);
}

/* ---------- Navigation ------------------------------------------ */
#site-nav {
  background: rgba(15, 17, 21, .86) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(139, 92, 246, .35);
  box-shadow: 0 8px 30px -18px rgba(109, 40, 217, .8);
}
#site-nav a { transition: color .2s ease, transform .2s ease; }
#site-nav a:hover { transform: translateY(-1px); }
.nav-cur {
  background: rgba(139, 92, 246, .16) !important;
  border-color: rgba(139, 92, 246, .5) !important;
  color: #FFF9E0 !important;
}

/* ---------- HERO: the mascot wall ------------------------------- */
#hero { background: #0F1115 !important; position: relative; }
#hero > svg { display: none; }               /* old teal decoration */
#hero::before {                               /* the artwork itself  */
  content: ""; position: absolute; left: 0; right: 0;
  top: -70px; bottom: -70px; z-index: 0;
  background: var(--brand-art) no-repeat 50% 28% / cover;
  transform: translateY(var(--b-par, 0px));
  will-change: transform;
}
#hero::after {                                /* readability scrim — no blur, no desat */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(15, 17, 21, .88) 0%, rgba(15, 17, 21, .62) 44%, rgba(15, 17, 21, .18) 78%, rgba(15, 17, 21, .30) 100%),
    linear-gradient(180deg, rgba(15, 17, 21, .55) 0%, rgba(15, 17, 21, .05) 35%, rgba(15, 17, 21, .72) 100%);
}
#hero > div { position: relative; z-index: 2; }
#hero h1 {
  color: #FFF9E0 !important;
  text-shadow: 0 3px 24px rgba(15, 17, 21, .9), 0 1px 3px rgba(15, 17, 21, .8);
}
#hero p { text-shadow: 0 2px 12px rgba(15, 17, 21, .95); }
#hero div[style*="0,168,150"] {               /* hero badge pill */
  border-color: rgba(255, 220, 60, .65) !important;
  color: #FFDC3C !important;
  background: rgba(15, 17, 21, .72) !important;
  backdrop-filter: blur(6px);
}
/* Yellow = the single most important CTA */
#hero a.bg-accent {
  background: linear-gradient(135deg, #FFCA52 0%, #FFDC3C 100%) !important;
  color: #241A03 !important;
  box-shadow: 0 14px 36px -10px rgba(255, 202, 82, .55) !important;
}
#hero a.bg-accent:hover { filter: brightness(1.06); transform: translateY(-2px) scale(1.02); }
#hero a.border-2 {
  background: rgba(15, 17, 21, .55);
  backdrop-filter: blur(6px);
}

/* ---------- Services banner ------------------------------------- */
#services-cta {
  background: linear-gradient(135deg, #2A1D5E 0%, #6D28D9 55%, #8B5CF6 100%) !important;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(139, 92, 246, .4);
  border-bottom: 1px solid rgba(139, 92, 246, .4);
}
#services-cta span[style*="00A896"] { color: #FFDC3C !important; }
#services-cta p { color: #E9E4FF !important; }
#svc-cta-btn {
  background: linear-gradient(135deg, #FFCA52, #FFDC3C) !important;
  color: #241A03 !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
#svc-cta-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 38px -10px rgba(0, 0, 0, .55) !important; }

/* ---------- Category chips → mascot cards ------------------------ */
.chips { gap: .8rem !important; }
.chip {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem 1.2rem .45rem .5rem !important;
  background: linear-gradient(150deg, #2A2C49 0%, #1E2036 100%) !important;
  border: 1px solid rgba(139, 92, 246, .3) !important;
  color: #E4E0FA !important;
  border-radius: 9999px !important;
  box-shadow: 0 5px 16px -8px rgba(0, 0, 0, .6);
  transition: transform .25s cubic-bezier(.22, .9, .35, 1.4), box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.chip i { display: none !important; }        /* FA icon → mascot */
.chip::before {
  content: ""; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background-color: #3A2E63;
  background-image: var(--brand-art);
  background-repeat: no-repeat;
  background-size: 1150% auto;
  border: 2px solid rgba(139, 92, 246, .5);
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .6);
}
.chip:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: #8B5CF6 !important; color: #FFF9E0 !important;
  box-shadow: 0 12px 28px -8px rgba(109, 40, 217, .6);
}
.chip:hover::before { animation: b-wiggle .5s ease; }
.chip.active {
  background: linear-gradient(135deg, #6D28D9, #8B5CF6) !important;
  border-color: #FFDC3C !important; color: #FFF9E0 !important;
  box-shadow: 0 12px 30px -8px rgba(139, 92, 246, .65);
}
.chip.active::before { border-color: #FFDC3C; }
/* who lives where on the mascot wall */
.chip[data-cat="all"]::before         { background-position: 62% 28%; }  /* winged cat   */
.chip[data-cat="ebooks"]::before      { background-position: 89% 46%; }  /* reading brain*/
.chip[data-cat="ai_prompts"]::before  { background-position: 31% 6%;  }  /* glow robot   */
.chip[data-cat="ai_tools"]::before    { background-position: 76% 66%; }  /* grin robot   */
.chip[data-cat="courses"]::before     { background-position: 13% 7%;  }  /* lightbulb    */
.chip[data-cat="templates"]::before   { background-position: 11% 24%; }  /* clipboard    */
.chip[data-cat="design"]::before      { background-position: 25% 36%; }  /* palette      */
.chip[data-cat="software"]::before    { background-position: 92% 66%; }  /* code laptop  */
.chip[data-cat="research"]::before    { background-position: 21% 7%;  }  /* smart cloud  */
.chip[data-cat="audio_video"]::before { background-position: 21% 22%; }  /* camera       */
.chip[data-cat="colouring"]::before   { background-position: 36% 25%; }  /* paintbrush   */
.chip[data-cat="services"]::before    { background-position: 12% 55%; }  /* gear buddy   */
.chip[data-cat="other"]::before       { background-position: 93% 86%; }  /* happy blob   */

/* ---------- Search / toolbar / facets ---------------------------- */
.searchbar input {
  background: #1A1C2E !important; color: #FFF9E0 !important;
  border-color: rgba(139, 92, 246, .35) !important;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.searchbar input:focus { border-color: #8B5CF6 !important; box-shadow: 0 0 0 4px rgba(139, 92, 246, .22); }
.searchbar input::placeholder { color: #8B86AC; }
.searchbar i { color: #8B5CF6 !important; }
.facet > summary {
  background: linear-gradient(150deg, #2A2C49, #1E2036) !important;
  border-color: rgba(139, 92, 246, .3) !important;
  color: #E4E0FA !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.facet > summary:hover { transform: translateY(-2px); border-color: #8B5CF6 !important; box-shadow: 0 8px 20px -8px rgba(109, 40, 217, .55); }
.facet[open] > summary { border-color: #FFDC3C !important; color: #FFDC3C !important; }
.facet-pop {
  background: #24263C !important;
  border-color: rgba(139, 92, 246, .4) !important;
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .75) !important;
}
.facet-pop label:hover { background: rgba(139, 92, 246, .14); border-radius: .5rem; }
.facet .badge { background: #FFCA52 !important; color: #241A03 !important; }
.sortlbl select, .clearbtn {
  background: #1A1C2E !important; color: #E4E0FA !important;
  border-color: rgba(139, 92, 246, .35) !important;
}
.clearbtn:hover { border-color: #FFDC3C !important; color: #FFDC3C !important; }

/* ---------- Cards ------------------------------------------------ */
.product-card {
  background: linear-gradient(160deg, #282A4A 0%, #1C1E33 100%) !important;
  border: 1px solid rgba(139, 92, 246, .26) !important;
  border-radius: 1.15rem !important;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(139, 92, 246, .7) !important;
  box-shadow: 0 22px 44px -14px rgba(109, 40, 217, .5);
}
.product-cover { overflow: hidden; }
.product-cover img { transition: transform .45s ease; }
.product-card:hover .product-cover img { transform: scale(1.05); }
.skeleton {
  background: linear-gradient(90deg, #23253E 25%, #2E3052 50%, #23253E 75%) !important;
  background-size: 200% 100% !important;
  animation: b-shimmer 1.4s infinite;
}
#how .bg-bgsoft, #faq details, .ranklist > *, .creators-strip > * {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-radius: 1rem;
}
#how .bg-bgsoft:hover, #faq details:hover, .ranklist > *:hover, .creators-strip > *:hover {
  transform: translateY(-4px);
  border-color: rgba(139, 92, 246, .55) !important;
  box-shadow: 0 16px 36px -14px rgba(109, 40, 217, .45);
}

/* ---------- Footer: the mascot crowd ------------------------------ */
footer {
  position: relative;
  border-top: 1px solid rgba(139, 92, 246, .35);
  background:
    radial-gradient(600px 300px at 80% 0%, rgba(109, 40, 217, .18), transparent 60%),
    #0F1115 !important;
}
footer::before {                              /* crowd peeking in from the top */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 110px;
  background: var(--brand-art) repeat-x 50% 6% / auto 560px;
  opacity: .28; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}
footer .bg-white, footer .bg-white\/10 {
  background: #24263C !important; color: #C9C4E4 !important;
  border: 1px solid rgba(139, 92, 246, .3);
}

/* ---------- Reveal + sparkles + motion ---------------------------- */
.brand-reveal { opacity: 0; transform: translateY(16px); }
.brand-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .9, .3, 1.25);
}
.bspark {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle, var(--spark-c, #FFF9E0) 0%, transparent 70%);
  animation: b-twinkle var(--spark-d, 3.4s) ease-in-out infinite;
  animation-delay: var(--spark-w, 0s);
}
@keyframes b-twinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: .85; transform: scale(1.15); } }
@keyframes b-wiggle  { 0% { transform: rotate(0); } 30% { transform: rotate(-8deg); } 65% { transform: rotate(7deg); } 100% { transform: rotate(0); } }
@keyframes b-float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes b-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .bspark, .skeleton { animation: none !important; }
  .brand-reveal { opacity: 1; transform: none; }
  #hero::before { transform: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ---------- Portal pages (login / customer / seller / legal) ------ */
.card {
  background: #24263C !important;
  border-color: rgba(139, 92, 246, .3) !important;
  color: #EDE9FE !important;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .65) !important;
}
.card h1, .card h2, .card h3, .card label { color: #FFF9E0; }
input, select, textarea {
  background-color: #1A1C2E !important;
  color: #FFF9E0 !important;
  border-color: rgba(139, 92, 246, .35) !important;
}
input::placeholder, textarea::placeholder { color: #8B86AC !important; }
.btn {
  background: linear-gradient(135deg, #6D28D9, #8B5CF6) !important;
  color: #FFF9E0 !important; border: 0 !important;
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(139, 92, 246, .45) !important;
  color: #C9C4E4 !important;
}
.tabs a { background: #1A1C2E !important; color: #C9C4E4 !important; }
.tabs a.active { background: linear-gradient(135deg, #6D28D9, #8B5CF6) !important; color: #FFF9E0 !important; }
th { color: #C9C4E4 !important; }
td { border-color: rgba(139, 92, 246, .15) !important; }

/* ---------- Fallback while artwork is absent ----------------------- */
html.no-art #hero::before { display: none; }
html.no-art #hero > svg { display: block; filter: hue-rotate(95deg) saturate(1.6) brightness(1.1); }
html.no-art .chip::before {
  background-image: linear-gradient(135deg, #6D28D9, #8B5CF6);
  background-size: cover;
}
html.no-art footer::before { display: none; }

/* ---------- Post-launch polish (cart + price + toggles) ----------- */
.price-tag { color: #FFDC3C !important; }
.sucart-add {
  background: #1A1C2E !important; color: #E4E0FA !important;
  border: 1px solid rgba(139, 92, 246, .45) !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.sucart-add:hover {
  background: linear-gradient(135deg, #6D28D9, #8B5CF6) !important;
  color: #FFF9E0 !important; border-color: transparent !important; transform: translateY(-1px);
}
.sucart-fab {
  background: linear-gradient(135deg, #6D28D9, #8B5CF6) !important; color: #FFF9E0 !important;
  box-shadow: 0 12px 30px -8px rgba(109, 40, 217, .7) !important;
}
.sucart-badge { background: #FFDC3C !important; color: #241A03 !important; }
.sucart-panel { background: #24263C !important; color: #EDE9FE !important; border-left: 1px solid rgba(139, 92, 246, .35); }
.sucart-hd, .sucart-ft { background: #1A1C2E !important; border-color: rgba(139, 92, 246, .25) !important; color: #FFF9E0 !important; }
.sucart-body { background: #24263C !important; color: #EDE9FE !important; }
.sucart-body * { border-color: rgba(139, 92, 246, .2); }
.sucart-x { color: #C9C4E4 !important; }
.sucart-toast { background: linear-gradient(135deg, #6D28D9, #8B5CF6) !important; color: #FFF9E0 !important; }
.fmt-toggle { background: #1A1C2E; border-color: rgba(139, 92, 246, .35) !important; }
.fmt-toggle button { color: #C9C4E4; }
.fmt-toggle button.on { background: #8B5CF6 !important; color: #FFF9E0 !important; }

/* ---------- Portal dark variables + waiver ------------------------- */
:root { --bg: #16182A; --sf: #24263C; --tx: #FFF9E0; --mu: #C9C4E4; --ln: rgba(139, 92, 246, .28); }
a[href*="logout"] { background: #24263C !important; color: #FCA5A5 !important; border-color: rgba(139, 92, 246, .3) !important; }
.sucart-wv { display: flex; gap: .55rem; align-items: flex-start; margin: .6rem 0 .75rem; font-size: .78rem; line-height: 1.45; color: #C9C4E4; cursor: pointer; }
.sucart-wv input { width: 1rem; height: 1rem; margin-top: .15rem; accent-color: #8B5CF6; flex: none; }
.sucart-wv-err { color: #FCA5A5 !important; }
.sucart-wv-err span { text-decoration: underline; }

/* ================= v2: crafted avatars + animated background ================= */
/* crafted SVG avatars replace the artwork crops on category chips */
html.has-av .chip::before { display: none !important; }
.b-av {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 32%, #3A2E63, #201A3C);
  border: 2px solid rgba(139, 92, 246, .5);
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, .6);
  overflow: hidden; animation: b-bob 3.4s ease-in-out infinite;
}
.b-av svg { width: 40px; height: 40px; display: block; }
.chip:hover .b-av { animation: b-wiggle .5s ease; }
.chip.active .b-av { border-color: #FFDC3C; background: radial-gradient(circle at 50% 32%, #6D28D9, #4C1D95); }

.b-eye  { animation: b-blink 5s infinite; transform-box: fill-box; transform-origin: center; }
.b-glow { animation: b-twinkle 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.b-flame{ animation: b-flame .3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center bottom; }
.b-rays { animation: b-spin 9s linear infinite; transform-box: fill-box; transform-origin: center; }
.b-wing { animation: b-flap 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes b-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes b-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes b-flame { from { transform: scaleY(.82); } to { transform: scaleY(1.15); } }
@keyframes b-spin  { to { transform: rotate(360deg); } }
@keyframes b-flap  { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }

/* page-specific guide character (portals only; storefront has the wall) */
.b-guide {
  position: fixed; right: 2.2vw; bottom: 3vh; width: 130px; height: 130px;
  z-index: 0; opacity: .3; pointer-events: none;
  animation: b-float 5.5s ease-in-out infinite;
  filter: drop-shadow(0 10px 22px rgba(109, 40, 217, .45));
}
.b-guide svg { width: 100%; height: 100%; }
@media (max-width: 900px) { .b-guide { display: none; } }

/* slow drifting glow blobs — the "living" background */
.b-blob { position: fixed; border-radius: 50%; filter: blur(72px); z-index: -1; pointer-events: none; }
.b-blob1 { width: 400px; height: 400px; top: -90px; left: -70px;
  background: radial-gradient(circle, rgba(109, 40, 217, .55), transparent 70%);
  animation: b-drift1 28s ease-in-out infinite; }
.b-blob2 { width: 360px; height: 360px; bottom: -90px; right: -50px;
  background: radial-gradient(circle, rgba(126, 228, 255, .22), transparent 70%);
  animation: b-drift2 34s ease-in-out infinite; }
@keyframes b-drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 46px) scale(1.12); } }
@keyframes b-drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-55px, -34px) scale(1.1); } }

/* FX toggle (bottom-left) + auto-reduce note */
.b-fx {
  position: fixed; left: 14px; bottom: 14px; z-index: 60;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, .5); background: rgba(36, 38, 60, .92);
  color: #FFDC3C; font-size: 1.15rem; cursor: pointer; line-height: 1;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .7);
  backdrop-filter: blur(6px); transition: transform .2s ease;
}
.b-fx:hover { transform: scale(1.12) rotate(8deg); }
.b-fx-note {
  position: fixed; left: 14px; bottom: 66px; z-index: 60; max-width: 17rem;
  background: #24263C; color: #EDE9FE; border: 1px solid rgba(139, 92, 246, .4);
  border-radius: .7rem; padding: .7rem .9rem; font-size: .78rem; line-height: 1.4;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7); transition: opacity .5s ease;
}
.b-fx-note.gone { opacity: 0; }

/* no-fx kill switch (manual toggle or lag auto-detect) */
html.no-fx .bspark, html.no-fx .b-blob, html.no-fx .b-guide, html.no-fx .b-av,
html.no-fx .b-eye, html.no-fx .b-glow, html.no-fx .b-flame, html.no-fx .b-rays,
html.no-fx .b-wing, html.no-fx .skeleton { animation: none !important; }
html.no-fx #hero::before { transform: none !important; animation: none !important; }
/* Hero mascot wall — gentle cinematic drift (Ken Burns); keeps --b-par parallax */
@keyframes heroKen {
  0%   { transform: translate3d(0, var(--b-par, 0px), 0) scale(1.06); }
  25%  { transform: translate3d(-2.5%, var(--b-par, 0px), 0) scale(1.13); }
  50%  { transform: translate3d(-1%, var(--b-par, 0px), 0) scale(1.17); }
  75%  { transform: translate3d(2%, var(--b-par, 0px), 0) scale(1.13); }
  100% { transform: translate3d(0, var(--b-par, 0px), 0) scale(1.06); }
}
/* Hero wall = calm, dimmed static backdrop so the floating characters pop */
#hero::before { animation: none; filter: brightness(.55) saturate(.9); }
/* ---- Responsive nav: login + selects stay in the bar; only the text links fold into a compact, content-width dropdown ---- */
#site-nav .hidden.lg\:flex { display: flex !important; margin-left: auto; }
#site-nav #hamburger { margin-left: .4rem; }
@media (max-width: 1279px) {
  #site-nav .hidden.lg\:flex > a:not(.bg-accent) { display: none !important; }
  #site-nav #hamburger { display: inline-flex !important; }
}
@media (max-width: 639px) {
  #site-nav .hidden.lg\:flex > select { display: none !important; }
}
#site-nav #mobile-menu {
  position: absolute; top: 4.75rem; right: 1rem;
  width: max-content; max-width: calc(100vw - 2rem);
  display: block !important;
  border: 1px solid rgba(139, 92, 246, .35);
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .6);
}
#site-nav #mobile-menu > div { min-width: 11rem; }
#site-nav #mobile-menu.open { max-height: 40rem !important; }
#site-nav #mobile-menu a.bg-accent { display: none; }
/* ---- Floating mascot characters (separate animated figures that cycle on screen) ---- */
.b-mascots-hero { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
#hero > .b-mascots-hero { position: absolute !important; inset: 0 !important; z-index: 1 !important; }
.b-m-live { opacity: 0; transition: opacity 1.3s ease; }
.b-mascots-hero .b-m-live.in { opacity: .92; }
.b-mascots:not(.b-mascots-hero) .b-m-live.in { opacity: .3; }
.b-m-live.out { opacity: 0 !important; }
@keyframes b-m-bob { 0%, 100% { transform: translateY(0) rotate(var(--spin, 0deg)); } 50% { transform: translateY(-20px) rotate(calc(var(--spin, 0deg) * -1)); } }
@keyframes b-m-orbit { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(var(--mx, 40px), -16px) rotate(7deg); } 50% { transform: translate(0, -30px) rotate(0); } 75% { transform: translate(calc(var(--mx, 40px) * -1), -16px) rotate(-7deg); } 100% { transform: translate(0, 0) rotate(0); } }
@media (prefers-reduced-motion: reduce) { #hero::before { animation: none !important; } }
html.no-fx .brand-reveal { opacity: 1 !important; transform: none !important; }
html.no-fx .b-blob1, html.no-fx .b-blob2 { opacity: .25; }

/* ---------- Legal pages: readable on dark ---------------------------- */
main.legal, .legal { color: #D9D4EE; }
.legal p, .legal li, .legal td { color: #D9D4EE !important; }
.legal h1, .legal h2, .legal h3 { color: #FFF9E0 !important; }
.legal h2 { border-bottom: 1px solid rgba(139, 92, 246, .22); padding-bottom: .35rem; }
.legal a { color: #FFDC3C !important; }
.legal b, .legal strong { color: #FFF9E0; }
.legal .note {
  background: rgba(139, 92, 246, .12) !important;
  border: 1px solid rgba(139, 92, 246, .4) !important;
  color: #E9E4FF !important;
}
/* success + generic content text safety net on dark */
.card p, .card li, .card td, .muted { color: #C9C4E4; }

/* ---------- Auto-discovered mascot background "story" --------------- */
.b-mascots { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.b-m {
  position: absolute; opacity: .15; pointer-events: none;
  filter: drop-shadow(0 8px 20px rgba(109, 40, 217, .35));
  animation-duration: var(--md, 22s); animation-delay: var(--mdl, 0s);
  animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes b-m-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--mx, 40px), -24px); } }
@keyframes b-m-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-22px) rotate(2deg); } }
@keyframes b-m-sway  { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(var(--mx, 30px)) rotate(3deg); } }
html.no-fx .b-mascots { display: none; }

/* ---------- Referral-link button on product tiles ------------------ */
.sucart-ref {
  background: #1A1C2E !important; color: #C4B5FD !important;
  border: 1px solid rgba(139, 92, 246, .5) !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.sucart-ref:hover {
  background: linear-gradient(135deg, #6D28D9, #8B5CF6) !important;
  color: #FFF9E0 !important; border-color: transparent !important; transform: translateY(-1px);
}
/* GDPR cookie consent banner */
.b-consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;max-width:56rem;margin:0 auto;background:linear-gradient(160deg,#282A4A,#1C1E33);border:1px solid rgba(139,92,246,.5);border-radius:1rem;box-shadow:0 24px 48px -16px rgba(0,0,0,.7);padding:1rem 1.2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;transition:opacity .5s ease,transform .5s ease}
.b-consent.gone{opacity:0;transform:translateY(20px);pointer-events:none}
.b-consent p{margin:0;color:#D9D4EE;font-size:.9rem;line-height:1.55;flex:1 1 20rem}
.b-consent a{color:#FFDC3C;text-decoration:underline}
.b-consent-btns{display:flex;gap:.6rem;flex:0 0 auto}
.b-consent button{cursor:pointer;font-weight:700;font-size:.9rem;padding:.6rem 1.1rem;border-radius:.7rem;border:0}
.b-consent .b-c-ess{background:rgba(255,249,224,.1);color:#FFF9E0;border:1px solid rgba(139,92,246,.5)}
.b-consent .b-c-all{background:linear-gradient(135deg,#FFCA52,#FFDC3C);color:#241A03}
.b-consent .b-c-all:hover{filter:brightness(1.05)}
@media(max-width:560px){.b-consent{left:.5rem;right:.5rem;bottom:.5rem}.b-consent-btns{width:100%}.b-consent button{flex:1}}

/* Walking winged cats */
.b-cats{position:absolute;left:0;right:0;bottom:0;height:140px;z-index:3;overflow:hidden;pointer-events:none}
.b-cat{position:absolute;left:-200px;bottom:var(--y,0);width:calc(150px * var(--s,1));animation:b-walk var(--dur,20s) linear infinite var(--delay,0s)}
.b-cat svg,.b-cat img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 10px rgba(0,0,0,.35))}
.b-cat-rev{animation-name:b-walk-rev}
.b-cat-rev svg{transform:scaleX(-1)}
@keyframes b-walk{from{left:-200px}to{left:calc(100% + 200px)}}
@keyframes b-walk-rev{from{left:calc(100% + 200px)}to{left:-200px}}
.w-leg{transform-box:fill-box;transform-origin:center top}
.w-legA{animation:w-step .5s ease-in-out infinite}
.w-legB{animation:w-step .5s ease-in-out infinite;animation-delay:-.25s}
@keyframes w-step{0%,100%{transform:rotate(19deg)}50%{transform:rotate(-17deg)}}
.w-bob{transform-box:fill-box;animation:w-bob .25s ease-in-out infinite}
@keyframes w-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.w-tail{transform-box:fill-box;transform-origin:right bottom;animation:w-sway 1s ease-in-out infinite}
@keyframes w-sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
.w-wing{transform-box:fill-box;transform-origin:right bottom;animation:w-flap .38s ease-in-out infinite}
@keyframes w-flap{0%,100%{transform:rotate(-5deg) scaleY(1)}50%{transform:rotate(7deg) scaleY(.88)}}
html.no-fx .b-cats,html.no-fx .b-cat,html.no-fx .w-leg,html.no-fx .w-bob,html.no-fx .w-tail,html.no-fx .w-wing{animation:none !important;display:none}
@media(prefers-reduced-motion:reduce){.b-cat,.w-leg,.w-bob,.w-tail,.w-wing{animation:none !important}}
.b-cat img{animation:b-cat-bob .55s ease-in-out infinite}
@keyframes b-cat-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
html.no-fx .b-cat img{animation:none !important}


/* Localized file-input button overlay */
.b-file { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; max-width: 100%; }
.b-file-input { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.b-file-btn { background: rgba(139,92,246,.18); color: inherit; border: 1px solid rgba(139,92,246,.45); border-radius: .45rem; padding: .4rem .8rem; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.b-file:hover .b-file-btn { background: rgba(139,92,246,.3); }
.b-file-name { color: inherit; opacity: .75; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }