/* eComBaba interaction layer: leaves the supplied layout, copy, palette and sizes intact. */
:root { --fx-ink:#1F1B0F; --fx-magenta:#B60056; --fx-cream:#FFF8F0; }
#desktop-site header, #mobile-site header { transition: box-shadow .28s ease, background-color .28s ease, backdrop-filter .28s ease; }
#desktop-site header.is-scrolled, #mobile-site header.is-scrolled {
  box-shadow:0 4px 18px rgba(31,27,15,.085);
  background-color:rgba(255,248,240,.975);
}
/* Default visuals remain identical; animation only runs on entry with JS enabled. */
.motion-ready .fx-reveal:not(.fx-visible) { opacity:0; translate:0 17px; }
.fx-reveal { transition: opacity .57s cubic-bezier(.2,.7,.2,1), translate .57s cubic-bezier(.2,.7,.2,1); transition-delay:var(--fx-delay,0ms); }
.fx-reveal.fx-visible { opacity:1; translate:0 0; }
.fx-press { position:relative; isolation:isolate; -webkit-tap-highlight-color:transparent; }
.fx-press .fx-ripple {position:absolute; z-index:0; width:15px; height:15px; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.35); transform:translate(-50%,-50%) scale(0); animation:fx-ripple .58s ease-out forwards;}
.fx-press > :not(.fx-ripple) {position:relative;z-index:1}
@keyframes fx-ripple {to{transform:translate(-50%,-50%) scale(var(--fx-scale,24)); opacity:0}}
/* Buttons and text links feel responsive without changing their resting appearance. */
#desktop-site a[href^="#"] .material-symbols-outlined:last-child,
#mobile-site a[href^="#"] .material-symbols-outlined:last-child,
#desktop-site #whatsapp-cta-link .material-symbols-outlined,
#mobile-site #whatsappCtaBtn .material-symbols-outlined {
 transition:translate .24s cubic-bezier(.2,.8,.2,1), rotate .24s ease;
}
#desktop-site a[href^="#"]:hover .material-symbols-outlined:last-child,
#desktop-site #whatsapp-cta-link:hover .material-symbols-outlined,
#mobile-site a[href^="#"]:active .material-symbols-outlined:last-child,
#mobile-site #whatsappCtaBtn:active .material-symbols-outlined {translate:4px 0}
#desktop-site section .grid > div,
#mobile-site section .flex.flex-col > .hard-shadow-sm,
#desktop-site #business-tabs button,
#mobile-site .tab-pill { transition: box-shadow .26s ease, border-color .26s ease, background-color .26s ease, translate .3s cubic-bezier(.2,.8,.2,1), scale .27s ease; }
@media (hover:hover) and (pointer:fine){
  #desktop-site section .grid > div:is(.rounded-2xl,.rounded-xl):hover {translate:0 -3px}
  #desktop-site section .grid > div:is(.rounded-2xl,.rounded-xl):hover > div .material-symbols-outlined:first-child {rotate:-6deg}
  #desktop-site #business-tabs button:hover{translate:4px 0}
  #desktop-site section .material-symbols-outlined {transition:rotate .25s ease, scale .25s ease, color .25s ease}
  #desktop-site section .rounded-2xl:hover .material-symbols-outlined:first-child{scale:1.045}
}
#mobile-site button:active, #mobile-site .tab-pill:active {scale:.985}
/* Animated emphasis: underline only, no font or copy changes. */
#desktop-site h1 .decoration-wavy {text-underline-offset:7px;}
#mobile-site h1 svg {transform-origin:left center;animation:fx-draw-accent 1s .37s both cubic-bezier(.2,.7,.2,1)}
@keyframes fx-draw-accent {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* Tactile barcode accents use existing Stitch stripes. */
#desktop-site header a.group:hover span[class*="bg-"],
#mobile-site header a.group:hover .barcode-lines-light {filter:brightness(1.28);}
#desktop-site section:first-of-type .relative.z-10.bg-\[\#1F1B0F\] span[class*="bg-"] {
  transform-origin:center bottom;animation:fx-bar-rise .55s cubic-bezier(.2,.9,.2,1) both;
}
#desktop-site section:first-of-type .relative.z-10.bg-\[\#1F1B0F\] span[class*="bg-"]:nth-child(2n) {animation-delay:.09s}
@keyframes fx-bar-rise {from{scale:1 .45;opacity:.55}to{scale:1 1;opacity:1}}
/* Hero card: tiny pointer-led tilt, rests at 0 and never clips content. */
#desktop-site .fx-hero-art { transform:perspective(1400px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .32s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d; }
#desktop-site .fx-hero-art .material-symbols-outlined {transition:transform .3s ease}
#desktop-site .fx-hero-art:hover .material-symbols-outlined {transform:scale(1.06)}
#mobile-site .barcode-lines, #mobile-site .barcode-lines-light {transition:background-position .6s ease, filter .25s ease}
#mobile-site .hard-shadow-sm:active .barcode-lines {filter:contrast(1.2)}
/* A lively but restrained connected-engine moment. */
#desktop-site #how-it-works svg path.fx-wire {stroke-dasharray:var(--wire-length);stroke-dashoffset:var(--wire-length);transition:stroke-dashoffset 1.2s cubic-bezier(.3,.7,.2,1) var(--wire-delay,0ms)}
#desktop-site #how-it-works.fx-wired svg path.fx-wire {stroke-dashoffset:0}
#mobile-site #m-diagram .bg-on-surface > span {animation:fx-soft-node 3s ease-in-out infinite}
@keyframes fx-soft-node {50%{scale:1.25;opacity:.8}}
/* Switching business tabs: preserve Stitch's original panel shape and layout. */
.fx-panel-enter {animation:fx-panel-in .36s cubic-bezier(.2,.8,.2,1) both}
@keyframes fx-panel-in {from{opacity:.5;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
#desktop-site #business-tabs [aria-pressed="true"] {transition:box-shadow .28s ease,translate .28s ease}
#mobile-site .tab-pill[aria-pressed="true"] {transition:box-shadow .25s ease,translate .25s ease}
#mobile-site .tab-pill[aria-pressed="true"]:not(:active) { translate:0 -1px }
/* FAQ content height is animated via the Web Animations API for both opening and closing. */
#desktop-site #faq button .material-symbols-outlined,
#mobile-site .accordion-btn .material-symbols-outlined {transition:rotate .24s ease,color .24s ease}
#desktop-site #faq button[aria-expanded="true"] .material-symbols-outlined,
#mobile-site .accordion-btn[aria-expanded="true"] .material-symbols-outlined {color:#B60056;rotate:-90deg}
#desktop-site #faq button:hover, #mobile-site .accordion-btn:active {background:rgba(182,0,86,.025)}
/* Contact topic controls announce choice clearly, but do not rearrange content. */
#desktop-site .topic-btn, #mobile-site .topic-label {transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease,background-color .22s ease}
#desktop-site .topic-btn:active, #mobile-site .topic-label:active {transform:scale(.98)}
#mobile-site .topic-label[aria-pressed="true"] {border-color:#B60056}
/* Mobile drawer: backdrop fade, side-panel slide, stable keyboard focus. */
#mobile-site #m-mobileDrawer {opacity:0;transition:opacity .26s ease}
#mobile-site #m-mobileDrawer.drawer-open {opacity:1}
#mobile-site #m-mobileDrawer > div {transform:translateX(105%);transition:transform .3s cubic-bezier(.18,.8,.24,1)}
#mobile-site #m-mobileDrawer.drawer-open > div {transform:translateX(0)}
#mobile-site .mobile-screen-shell {overflow-x:clip !important;overflow-y:visible !important;}
#mobile-site #m-mobileDrawer a:hover .material-symbols-outlined {translate:3px 0;transition:translate .2s ease}
/* Reading bar changes smoothly but does not interfere with taps or focus. */
#desktop-site #progress-bar {pointer-events:none;will-change:width}
#mobile-site header > div.absolute.bottom-0 {transform-origin:left;transform:scaleX(var(--reading-progress,0));transition:transform .12s linear;pointer-events:none}
/* Active navigational focus follows the section in view. */
#desktop-site header nav a.fx-nav-active {color:#8a0040;border-bottom:2px solid #8a0040;font-weight:700}
#desktop-site header nav.fx-nav-tracking a:not(.fx-nav-active) {border-bottom-color:transparent;color:#645e4e;font-weight:500}
/* Provide touch interactions and keyboard feedback, not hover-only interactions. */
#mobile-site .topic-label, #mobile-site .accordion-btn {cursor:pointer;text-align:left;width:100%}
#mobile-site .tab-pill {touch-action:pan-x}
#desktop-site #business-tabs button:focus-visible, #mobile-site .tab-pill:focus-visible {outline:3px solid #B60056;outline-offset:4px}
/* Prevent focus flash on normal pointer interactions but never hide keyboard focus. */
#desktop-site :where(a,button):focus:not(:focus-visible), #mobile-site :where(a,button):focus:not(:focus-visible) {outline:none}
/* Decorative motion should not continue indefinitely for motion-sensitive visitors. */
@media (prefers-reduced-motion: reduce){
 html {scroll-behavior:auto !important}
 *,*::before,*::after {scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0ms !important}
 .motion-ready .fx-reveal {opacity:1!important;translate:none!important}
 #desktop-site #how-it-works svg path.fx-wire {stroke-dashoffset:0!important}
 #desktop-site .fx-hero-art {transform:none!important}
 #mobile-site #m-mobileDrawer > div{transform:none}
}

/* Small entrance choreography for exact Stitch hero elements, no permanent design change. */
.motion-ready .fx-hero-intro {animation:fx-hero-appear .68s cubic-bezier(.16,.85,.26,1) var(--hero-delay,0ms) both}
@keyframes fx-hero-appear {from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}