:root{--pmbo-ink:#0f172a;--pmbo-ink-2:#334155;--pmbo-muted:#64748b;--pmbo-line:#e2e8f0;--pmbo-bg:#ffffff;--pmbo-bg-soft:#f8fafc;--pmbo-brand:#111827;--pmbo-brand-2:#6366f1;--pmbo-accent:#f59e0b;--pmbo-accent-2:#ec4899;--pmbo-shadow:0 10px 30px rgba(15,23,42,.08);--pmbo-radius:14px} /* Full-bleed: make the homepage escape the theme's content column so section backgrounds (hero gradient, dark stat bar, soft features bg, final CTA) span the full viewport width. Inner .pmbo-wrap keeps content at 1160px. The companion `html { overflow-x: hidden }` clip is printed inline by PMBO_Shortcodes::render_home() in . CSS-only viewport propagation from body to is unreliable across theme stacks. */ body.pmbo-has-home{overflow-x:hidden} body.pmbo-has-home .entry-title, body.pmbo-has-home .ast-archive-description, body.pmbo-has-home .ast-container > .ast-breadcrumbs-wrapper{display:none} body.pmbo-has-home .site-content .ast-container, body.pmbo-has-home .site-content #primary, body.pmbo-has-home .site-content .entry-content, body.pmbo-has-home .site-content article.post, body.pmbo-has-home .site-content article.page{max-width:none!important;width:100%!important;padding-left:0!important;padding-right:0!important;margin-left:0!important;margin-right:0!important} /* Kill the white gap between the site header and our full-bleed hero. Astra (and most themes) apply top padding/margin to several wrappers above the page article - zero them all out on the homepage. */ body.pmbo-has-home #content, body.pmbo-has-home .site-content, body.pmbo-has-home .site-content > .ast-container, body.pmbo-has-home .site-content #primary, body.pmbo-has-home .site-content .entry-content, body.pmbo-has-home .site-content article.post, body.pmbo-has-home .site-content article.page, body.pmbo-has-home .site-content article.page > .entry-header, body.pmbo-has-home .ast-single-post-order{padding-top:0!important;margin-top:0!important} body.pmbo-has-home .site-content article.page > .entry-header{display:none!important} body.pmbo-has-home .entry-content > *:not(.pmbo-home){max-width:1160px;margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem} .pmbo-home{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--pmbo-ink);line-height:1.55} .pmbo-home *{box-sizing:border-box} .pmbo-home a{color:inherit} .pmbo-wrap{max-width:1160px;margin:0 auto;padding:0 1.25rem} /* ---------- HERO ---------- */ .pmbo-hero{position:relative;overflow:hidden;padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);background:radial-gradient(1200px 500px at 85% -10%,rgba(99,102,241,.18),transparent 60%),radial-gradient(900px 400px at -5% 110%,rgba(236,72,153,.14),transparent 60%),linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)} .pmbo-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center} @media(max-width:900px){.pmbo-hero-grid{grid-template-columns:1fr}} .pmbo-eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border-radius:999px;background:rgba(99,102,241,.12);color:#4f46e5;font-weight:600;font-size:.8rem;letter-spacing:.02em;margin-bottom:1.1rem} .pmbo-eyebrow::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.18)} .pmbo-hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.08;margin:0 0 1rem;font-weight:800;letter-spacing:-.02em} .pmbo-hero h1 em{font-style:normal;background:linear-gradient(90deg,#6366f1,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent} .pmbo-hero p.lead{font-size:clamp(1rem,1.4vw,1.2rem);color:var(--pmbo-ink-2);margin:0 0 1.75rem;max-width:36rem} .pmbo-hero-ctas{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem} .pmbo-home .pmbo-btn{appearance:none;border:1px solid var(--pmbo-line);background:#fff;color:var(--pmbo-ink);padding:.8rem 1.25rem;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none !important;display:inline-flex;align-items:center;gap:.5rem;transition:transform .15s,box-shadow .15s} .pmbo-home .pmbo-btn:hover, .pmbo-home .pmbo-btn:focus, .pmbo-home .pmbo-btn:active, .pmbo-home .pmbo-btn:visited{ text-decoration:none !important; } .pmbo-home .pmbo-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(15,23,42,.08)} .pmbo-home .pmbo-btn-primary{background:linear-gradient(135deg,#111827 0%,#4338ca 100%);border:0;color:#fff} .pmbo-home .pmbo-btn-primary:hover{filter:brightness(1.08)} .pmbo-home .pmbo-btn-large{padding:1rem 1.6rem;font-size:1.05rem} .pmbo-trust{display:flex;gap:1.5rem;align-items:center;color:var(--pmbo-muted);font-size:.85rem;flex-wrap:wrap} .pmbo-trust span{display:inline-flex;align-items:center;gap:.4rem} .pmbo-trust svg{width:18px;height:18px;flex-shrink:0} /* Hero mock browser */ /* Hero mock - floating shop preview (no dark frame, airy + glowy) */ .pmbo-hero-mock{position:relative;padding:1.5rem 1rem 2rem;animation:pmboFloat 8s ease-in-out infinite;will-change:transform} .pmbo-hero-mock::before{content:"";position:absolute;inset:10% -5% 10% -5%;background:radial-gradient(closest-side,color-mix(in srgb,var(--mock-glow,#6366f1) 55%,transparent),transparent 70%),radial-gradient(closest-side at 70% 80%,color-mix(in srgb,var(--mock-glow-2,#ec4899) 45%,transparent),transparent 70%);z-index:0;filter:blur(50px);opacity:.75;transition:background .6s} .pmbo-hero-mock::after{content:"";position:absolute;left:8%;right:8%;bottom:-.5rem;height:28px;background:radial-gradient(closest-side,rgba(15,23,42,.22),transparent 75%);filter:blur(10px);z-index:0} .pmbo-hero-mock > *{position:relative;z-index:1} @keyframes pmboFloat{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-10px) rotate(.3deg)}} @media(prefers-reduced-motion:reduce){.pmbo-hero-mock{animation:none}} /* Decorative floating chips around the card */ .pmbo-hero-mock .pmbo-float-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;background:#fff;border:1px solid var(--pmbo-line);border-radius:999px;box-shadow:0 10px 20px rgba(15,23,42,.1);font-size:.78rem;font-weight:600;color:var(--pmbo-ink);white-space:nowrap;animation:pmboFloat 6s ease-in-out infinite} .pmbo-hero-mock .pmbo-float-chip b{background:linear-gradient(90deg,#6366f1,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800} .pmbo-hero-mock .pmbo-float-chip svg{width:14px;height:14px} .pmbo-hero-mock .pmbo-float-chip--order{top:6%;left:-2%;animation-delay:-2s} .pmbo-hero-mock .pmbo-float-chip--rating{bottom:12%;right:-3%;animation-delay:-4s} .pmbo-hero-mock .pmbo-float-chip--live{top:-1.2rem;right:8%;background:#0f172a;color:#fff;border-color:#0f172a;animation-delay:-1s} .pmbo-hero-mock .pmbo-float-chip--live .pmbo-pulse{width:.5rem;height:.5rem;background:#10b981} @media(max-width:900px){.pmbo-hero-mock .pmbo-float-chip--order,.pmbo-hero-mock .pmbo-float-chip--rating{display:none}} /* Sparkle dots */ .pmbo-hero-mock .pmbo-sparkle{position:absolute;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6;animation:pmboSparkle 3.5s ease-in-out infinite} .pmbo-hero-mock .pmbo-sparkle:nth-child(1){top:18%;left:-10px;color:#6366f1;animation-delay:0s} .pmbo-hero-mock .pmbo-sparkle:nth-child(2){top:60%;left:-20px;color:#ec4899;width:8px;height:8px;animation-delay:-1s} .pmbo-hero-mock .pmbo-sparkle:nth-child(3){top:8%;right:12%;color:#f59e0b;animation-delay:-2s} .pmbo-hero-mock .pmbo-sparkle:nth-child(4){bottom:6%;left:14%;color:#10b981;animation-delay:-.5s} .pmbo-hero-mock .pmbo-sparkle:nth-child(5){top:32%;right:-8px;color:#8b5cf6;width:5px;height:5px;animation-delay:-1.5s} @keyframes pmboSparkle{0%,100%{transform:scale(.6);opacity:.25}50%{transform:scale(1.4);opacity:.85}} /* The shop card itself carries the drop shadow now */ .pmbo-shop-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(15,23,42,.35),0 10px 30px -10px rgba(67,56,202,.25);border:1px solid rgba(15,23,42,.06)} .pmbo-browser{position:relative;z-index:1;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.25)} .pmbo-browser-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;background:#f1f5f9;border-bottom:1px solid var(--pmbo-line)} .pmbo-browser-bar i{width:.65rem;height:.65rem;border-radius:50%;background:#cbd5e1;display:inline-block} .pmbo-browser-bar i:nth-child(1){background:#f87171}.pmbo-browser-bar i:nth-child(2){background:#fbbf24}.pmbo-browser-bar i:nth-child(3){background:#34d399} .pmbo-browser-url{margin-left:.6rem;background:#fff;border-radius:6px;padding:.2rem .6rem;font-size:.78rem;color:#475569;flex:1;border:1px solid var(--pmbo-line);font-family:ui-monospace,Consolas,monospace} .pmbo-browser-body{padding:1rem 1.1rem 1.2rem} .pmbo-mock-head{display:flex;align-items:center;gap:.6rem;padding-bottom:.7rem;border-bottom:1px solid var(--pmbo-line);margin-bottom:.75rem} .pmbo-mock-logo{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#6B3A1F,#D4A373);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem} .pmbo-mock-head h5{margin:0;font-size:.95rem;color:#0f172a} .pmbo-mock-head small{color:var(--pmbo-muted);font-size:.72rem} .pmbo-mock-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem} .pmbo-mock-prod{border:1px solid var(--pmbo-line);border-radius:10px;padding:.55rem;background:#fff} .pmbo-mock-thumb{height:54px;border-radius:7px;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);margin-bottom:.4rem;position:relative;overflow:hidden} .pmbo-mock-thumb::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(148,163,184,.15) 6px 7px)} .pmbo-mock-prod h6{margin:0;font-size:.72rem;line-height:1.25;color:#0f172a;font-weight:600} .pmbo-mock-prod p{margin:.15rem 0 0;font-size:.7rem;color:#6B3A1F;font-weight:700} /* ---------- STAT BAR ---------- */ .pmbo-stats{background:#0f172a;color:#fff;padding:1.5rem 0} .pmbo-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center} @media(max-width:700px){.pmbo-stats-grid{grid-template-columns:repeat(2,1fr)}} .pmbo-stats b{display:block;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800;background:linear-gradient(135deg,#a5b4fc,#f472b6);-webkit-background-clip:text;background-clip:text;color:transparent} .pmbo-stats span{font-size:.82rem;color:#cbd5e1} /* ---------- SECTION ---------- */ .pmbo-section{padding:clamp(3rem,6vw,5rem) 0} .pmbo-section-head{text-align:center;max-width:44rem;margin:0 auto 2.5rem} .pmbo-section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 .6rem;font-weight:800;letter-spacing:-.01em;line-height:1.15} .pmbo-section-head p{font-size:1.05rem;color:var(--pmbo-ink-2);margin:0} .pmbo-kicker{display:inline-block;color:#4f46e5;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem} /* ---------- FEATURES ---------- Animated GIF icons per card. GIFs loop on their own; no JS needed for icon animation. Mobile entrance reveal via IntersectionObserver adds .is-in class for a fade-up + icon-pop. */ .pmbo-features{background:var(--pmbo-bg-soft)} .pmbo-features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} @media(max-width:1100px){.pmbo-features-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:900px){.pmbo-features-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.pmbo-features-grid{grid-template-columns:1fr;gap:.85rem}} .pmbo-feature{position:relative;background:#fff;border:1px solid var(--pmbo-line);border-radius:var(--pmbo-radius);padding:1.4rem 1.25rem;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;--pmbo-feat-glow:rgba(99,102,241,.18)} .pmbo-feature::after{content:"";position:absolute;right:-30%;bottom:-50%;width:120%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--pmbo-feat-glow),transparent 70%);opacity:0;transition:opacity .35s ease;pointer-events:none} .pmbo-feature:hover{transform:translateY(-4px);box-shadow:var(--pmbo-shadow);border-color:transparent} .pmbo-feature:hover::after{opacity:1} .pmbo-feature h3{margin:0 0 .4rem;font-size:1rem;font-weight:700;letter-spacing:-.005em;line-height:1.25;position:relative;z-index:1} .pmbo-feature p{margin:0;color:var(--pmbo-muted);font-size:.9rem;line-height:1.55;position:relative;z-index:1} .pmbo-feature-icon{position:relative;width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:.95rem;z-index:1;overflow:hidden} .pmbo-fi-gif{width:100%;height:100%;object-fit:contain;display:block} /* Per-card corner glow colour */ .pmbo-feature--bag{--pmbo-feat-glow:rgba(99,102,241,.22)} .pmbo-feature--bolt{--pmbo-feat-glow:rgba(245,158,11,.24)} .pmbo-feature--brand{--pmbo-feat-glow:rgba(236,72,153,.22)} .pmbo-feature--photo{--pmbo-feat-glow:rgba(139,92,246,.20)} .pmbo-feature--phone{--pmbo-feat-glow:rgba(16,185,129,.20)} .pmbo-feature--mobile{--pmbo-feat-glow:rgba(14,165,233,.20)} .pmbo-feature--plug{--pmbo-feat-glow:rgba(249,115,22,.20)} .pmbo-feature--shield{--pmbo-feat-glow:rgba(59,130,246,.20)} /* ---------- MOBILE: card entrance reveal on scroll ---------- */ @media(max-width:700px){ .pmbo-feature[data-pmbo-anim]{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .55s ease,transform .55s ease;transition-delay:var(--pmbo-fdelay,0ms)} .pmbo-feature[data-pmbo-anim].is-in{opacity:1;transform:none} .pmbo-feature[data-pmbo-anim] .pmbo-feature-icon{transform:scale(.6) rotate(-8deg);transition:transform .55s cubic-bezier(.34,1.56,.64,1) .15s} .pmbo-feature[data-pmbo-anim].is-in .pmbo-feature-icon{transform:none} } @media(prefers-reduced-motion:reduce){ .pmbo-feature{transition:none!important} .pmbo-feature[data-pmbo-anim]{opacity:1!important;transform:none!important;transition:none!important} .pmbo-feature[data-pmbo-anim] .pmbo-feature-icon{transform:none!important;transition:none!important} } /* ---------- INTEGRATIONS RIBBON ---------- Pill-row of category names beneath the cards. Acts as visual proof for the "Plug in the tools you already use" card. Categories not brand names so we don't promise specific partners we may not yet have signed. Each pill has a coloured dot for at-a-glance scannability. */ .pmbo-feat-strip{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1rem;padding:1.1rem 1.25rem;background:#fff;border:1px solid var(--pmbo-line);border-radius:999px;box-shadow:0 6px 20px rgba(15,23,42,.05)} @media(max-width:700px){.pmbo-feat-strip{border-radius:18px;justify-content:center;padding:1rem .85rem;flex-direction:column;align-items:center;gap:.7rem}} .pmbo-feat-strip__lead{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pmbo-muted);white-space:nowrap} @media(max-width:700px){.pmbo-feat-strip__lead{text-align:center}} .pmbo-feat-strip__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem .55rem} @media(max-width:700px){ .pmbo-feat-strip__list{justify-content:center;gap:.4rem .4rem;width:100%} } .pmbo-feat-strip__list li{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .8rem;background:var(--pmbo-bg-soft);border:1px solid var(--pmbo-line);border-radius:999px;font-size:.83rem;font-weight:600;color:var(--pmbo-ink-2);white-space:nowrap;transition:transform .15s,background .15s} @media(max-width:700px){.pmbo-feat-strip__list li{padding:.38rem .7rem;font-size:.78rem;gap:.4rem}} .pmbo-feat-strip__list li:hover{transform:translateY(-1px);background:#fff} .pmbo-feat-strip__dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--pmbo-dot,#6366f1) 18%,transparent)} .pmbo-feat-strip__dot--pay{--pmbo-dot:#10b981;background:#10b981} .pmbo-feat-strip__dot--ship{--pmbo-dot:#f59e0b;background:#f59e0b} .pmbo-feat-strip__dot--wa{--pmbo-dot:#16a34a;background:#16a34a} .pmbo-feat-strip__dot--mail{--pmbo-dot:#6366f1;background:#6366f1} .pmbo-feat-strip__dot--ad{--pmbo-dot:#ec4899;background:#ec4899} .pmbo-feat-strip__dot--cpn{--pmbo-dot:#8b5cf6;background:#8b5cf6} .pmbo-feat-strip__dot--gst{--pmbo-dot:#0ea5e9;background:#0ea5e9} /* ---------- HOW IT WORKS ---------- */ .pmbo-steps-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;position:relative} @media(max-width:800px){.pmbo-steps-wrap{grid-template-columns:1fr}} .pmbo-step-card{background:#fff;border:1px solid var(--pmbo-line);border-radius:var(--pmbo-radius);padding:1.5rem;position:relative} .pmbo-step-num{position:absolute;top:-.9rem;left:1.25rem;background:#111827;color:#fff;width:2rem;height:2rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;box-shadow:0 4px 10px rgba(17,24,39,.25)} .pmbo-step-card h3{margin:.4rem 0 .4rem;font-size:1.05rem;font-weight:700} .pmbo-step-card p{margin:0;color:var(--pmbo-muted);font-size:.92rem} /* ---------- WHO IT'S FOR ---------- */ .pmbo-who{background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%)} .pmbo-who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem} @media(max-width:800px){.pmbo-who-grid{grid-template-columns:repeat(2,1fr)}} .pmbo-who-card{background:#fff;border:1px solid var(--pmbo-line);border-radius:12px;padding:1rem;text-align:center;font-size:.92rem;color:var(--pmbo-ink-2);font-weight:500} .pmbo-who-card .emoji{font-size:1.6rem;display:block;margin-bottom:.35rem} /* ---------- TESTIMONIALS ---------- */ .pmbo-quotes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} @media(max-width:900px){.pmbo-quotes-grid{grid-template-columns:1fr}} .pmbo-quote{background:#fff;border:1px solid var(--pmbo-line);border-radius:var(--pmbo-radius);padding:1.5rem;display:flex;flex-direction:column;gap:.8rem} .pmbo-quote .stars{color:#f59e0b;font-size:1rem;letter-spacing:.1em} .pmbo-quote blockquote{margin:0;font-size:.98rem;color:var(--pmbo-ink-2);line-height:1.55} .pmbo-quote .who{display:flex;align-items:center;gap:.6rem;margin-top:auto} .pmbo-quote .avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem} .pmbo-quote strong{display:block;font-size:.85rem} .pmbo-quote small{display:block;color:var(--pmbo-muted);font-size:.78rem} /* ---------- FAQ ---------- */ .pmbo-faq{background:var(--pmbo-bg-soft)} .pmbo-faq-list{max-width:780px;margin:0 auto} .pmbo-faq details{background:#fff;border:1px solid var(--pmbo-line);border-radius:10px;padding:0;margin-bottom:.6rem;overflow:hidden;transition:box-shadow .15s} .pmbo-faq details[open]{box-shadow:var(--pmbo-shadow)} .pmbo-faq summary{padding:1rem 1.25rem;cursor:pointer;font-weight:600;font-size:1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center} .pmbo-faq summary::-webkit-details-marker{display:none} .pmbo-faq summary::after{content:"+";font-size:1.2rem;color:var(--pmbo-muted);transition:transform .2s} .pmbo-faq details[open] summary::after{content:"−"} .pmbo-faq details div{padding:0 1.25rem 1rem;color:var(--pmbo-ink-2);font-size:.94rem;line-height:1.6} /* ---------- FINAL CTA ---------- */ .pmbo-final{position:relative;overflow:hidden;color:#fff;background:radial-gradient(900px 400px at 20% 120%,rgba(236,72,153,.3),transparent 60%),radial-gradient(900px 400px at 80% -20%,rgba(99,102,241,.35),transparent 60%),linear-gradient(135deg,#0f172a,#1e1b4b);padding:clamp(3rem,6vw,5rem) 0;text-align:center} .pmbo-final h2{font-size:clamp(1.8rem,3vw,2.6rem);margin:0 0 .75rem;font-weight:800;letter-spacing:-.01em} .pmbo-final p{font-size:1.05rem;color:#cbd5e1;max-width:40rem;margin:0 auto 1.75rem} .pmbo-final .pmbo-btn-primary{background:#fff;color:#111827;border:0} .pmbo-final .pmbo-btn-primary:hover{background:#f1f5f9} .pmbo-final-note{margin-top:1rem;font-size:.85rem;color:#94a3b8} .pmbo-faq details > div{padding:0 1.25rem 1.1rem;color:var(--pmbo-ink-2);font-size:.95rem;line-height:1.6} /* ===================================================== HERO � decorative background blobs (all variants) ===================================================== */ .pmbo-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0} .pmbo-hero > .pmbo-wrap{position:relative;z-index:1} .pmbo-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;mix-blend-mode:multiply;will-change:transform} .pmbo-blob-1{width:520px;height:520px;top:-140px;right:-120px;background:radial-gradient(circle,#a5b4fc 0%,transparent 70%);animation:pmboBlobA 22s ease-in-out infinite} .pmbo-blob-2{width:460px;height:460px;bottom:-160px;left:-120px;background:radial-gradient(circle,#f9a8d4 0%,transparent 70%);animation:pmboBlobB 26s ease-in-out infinite} .pmbo-blob-3{width:380px;height:380px;top:40%;left:45%;background:radial-gradient(circle,#fde68a 0%,transparent 70%);animation:pmboBlobC 30s ease-in-out infinite;opacity:.35} @keyframes pmboBlobA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.08)}} @keyframes pmboBlobB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-40px) scale(1.12)}} @keyframes pmboBlobC{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-40%,-60%) scale(1.15)}} @media(prefers-reduced-motion:reduce){.pmbo-blob{animation:none}} /* ===================================================== SHARED SHOP CARD (used by carousel + stack) ===================================================== */ .pmbo-shop-card .pmbo-mock-logo{background:linear-gradient(135deg,var(--c1,#6B3A1F),var(--c2,#D4A373))} .pmbo-shop-card .pmbo-mock-prod p{color:var(--c1,#6B3A1F)} .pmbo-shop-card .pmbo-mock-thumb{background:linear-gradient(135deg,color-mix(in srgb,var(--c2,#D4A373) 25%,#fff),color-mix(in srgb,var(--c1,#6B3A1F) 15%,#fff));display:flex;align-items:center;justify-content:center} .pmbo-shop-card .pmbo-mock-thumb::after{display:none} .pmbo-mock-emoji{font-size:1.35rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.08))} /* ===================================================== HERO � CAROUSEL VARIANT one shop visible at a time, fades/slides between 6 ===================================================== */ .pmbo-hero-mock--carousel{position:relative;min-height:360px;perspective:1200px} .pmbo-carousel-stage{position:relative;min-height:330px} .pmbo-carousel-slot{position:absolute;inset:0;opacity:0;transform:translateY(18px) scale(.96);animation:pmboCycle calc(var(--count,6) * 4s) cubic-bezier(.5,.1,.3,1) infinite;animation-delay:calc(var(--i) * 4s);will-change:transform,opacity} .pmbo-carousel-slot .pmbo-shop-card{transform:rotate(-.4deg)} @keyframes pmboCycle{ 0% {opacity:0;transform:translateY(24px) scale(.94) rotateY(8deg)} 4% {opacity:1;transform:translateY(0) scale(1) rotateY(0)} 16.6%{opacity:1;transform:translateY(0) scale(1) rotateY(0)} 20% {opacity:0;transform:translateY(-22px) scale(.96) rotateY(-8deg)} 100% {opacity:0;transform:translateY(-22px) scale(.96) rotateY(-8deg)} } .pmbo-carousel-dots{display:flex;gap:.4rem;justify-content:center;margin-top:1rem} .pmbo-carousel-dot{width:7px;height:7px;border-radius:999px;background:rgba(15,23,42,.15);animation:pmboDot calc(var(--count,6) * 4s) linear infinite;animation-delay:calc(var(--i) * 4s)} @keyframes pmboDot{0%,4%{background:rgba(15,23,42,.15);transform:scale(1)}5%,16%{background:#4338ca;transform:scale(1.5)}17%,100%{background:rgba(15,23,42,.15);transform:scale(1)}} @media(prefers-reduced-motion:reduce){ .pmbo-carousel-slot{animation:none;opacity:1} .pmbo-carousel-slot:not(:first-child){display:none} .pmbo-carousel-dot{animation:none} } /* ===================================================== HERO � STACK VARIANT shops stack 3-deep, front one slides out, next comes forward ===================================================== */ .pmbo-hero-mock--stack{position:relative;min-height:400px} .pmbo-stack-stage{position:relative;min-height:340px} .pmbo-stack-slot{position:absolute;inset:0;opacity:0;transform-origin:center bottom;animation:pmboStack calc(var(--count,6) * 4s) cubic-bezier(.5,.05,.2,1) infinite;animation-delay:calc(var(--i) * 4s);will-change:transform,opacity} @keyframes pmboStack{ 0% {opacity:0;transform:translateY(40px) scale(.9) rotate(4deg)} 3% {opacity:.6;transform:translateY(20px) scale(.95) rotate(2deg)} 6% {opacity:1;transform:translateY(0) scale(1) rotate(-.5deg)} 15% {opacity:1;transform:translateY(0) scale(1) rotate(-.5deg)} 18% {opacity:0;transform:translateY(-60px) scale(.95) rotate(-6deg)} 100%{opacity:0;transform:translateY(-60px) scale(.95) rotate(-6deg)} } @media(prefers-reduced-motion:reduce){ .pmbo-stack-slot{animation:none;opacity:1;transform:none} .pmbo-stack-slot:not(:first-child){display:none} } /* ===================================================== HERO � TILES VARIANT all 6 shops visible as a floating grid, each bobs gently ===================================================== */ .pmbo-hero-mock--tiles{position:relative} .pmbo-tiles-stage{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem} .pmbo-tile{display:flex;align-items:center;gap:.7rem;padding:.85rem .9rem;background:#fff;border:1px solid var(--pmbo-line);border-radius:14px;box-shadow:0 8px 18px rgba(15,23,42,.06);position:relative;overflow:hidden;opacity:0;transform:translateY(14px);animation:pmboTileIn .6s cubic-bezier(.2,.8,.2,1) forwards,pmboTileBob 5s ease-in-out infinite;animation-delay:calc(var(--i) * .12s),calc(var(--i) * .35s + 1s)} .pmbo-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 14%,transparent),transparent 70%);pointer-events:none} .pmbo-tile-logo{position:relative;width:38px;height:38px;border-radius:10px;color:#fff;font-weight:800;font-size:.88rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 6px 14px color-mix(in srgb,var(--c1) 40%,transparent)} .pmbo-tile-body{position:relative;min-width:0;flex:1} .pmbo-tile-body h6{margin:0;font-size:.88rem;font-weight:700;color:var(--pmbo-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pmbo-tile-body small{color:var(--pmbo-muted);font-size:.72rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pmbo-tile-emoji{position:relative;font-size:1.35rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.08))} @keyframes pmboTileIn{to{opacity:1;transform:translateY(0)}} @keyframes pmboTileBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @media(prefers-reduced-motion:reduce){.pmbo-tile{animation:none;opacity:1;transform:none}} @media(max-width:640px){.pmbo-tiles-stage{grid-template-columns:1fr}} /* ===================================================== JUST-LAUNCHED TICKER ===================================================== */ .pmbo-ticker{display:flex;align-items:center;gap:1rem;background:#fff;border-top:1px solid var(--pmbo-line);border-bottom:1px solid var(--pmbo-line);padding:.7rem 0;overflow:hidden;position:relative} .pmbo-ticker-label{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem .35rem 1.25rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#111827;flex-shrink:0;border-right:1px solid var(--pmbo-line);position:relative;z-index:2;background:#fff} .pmbo-pulse{width:.55rem;height:.55rem;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:pmboPulse 1.6s ease-out infinite} @keyframes pmboPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 12px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}} .pmbo-ticker-track{display:flex;align-items:center;gap:2rem;white-space:nowrap;animation:pmboTicker 40s linear infinite;will-change:transform} .pmbo-ticker:hover .pmbo-ticker-track{animation-play-state:paused} @keyframes pmboTicker{to{transform:translateX(-50%)}} .pmbo-ticker-item{display:inline-flex;align-items:center;gap:.6rem;padding:.2rem .6rem;border-radius:999px} .pmbo-ticker-logo{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-size:.72rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-style:normal} .pmbo-ticker-item strong{font-size:.9rem;color:var(--pmbo-ink);font-weight:700} .pmbo-ticker-item small{font-size:.82rem;color:var(--pmbo-muted)} @media(prefers-reduced-motion:reduce){.pmbo-ticker-track{animation:none}}