@import url(‘https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700&display=swap’);

.mbg-lp,
.mbg-lp *,
.mbg-lp *::before,
.mbg-lp *::after { box-sizing: border-box; }
.mbg-lp { all: initial; display: block; }
.mbg-lp * { margin: 0; padding: 0; font-family: inherit; }

.mbg-lp {
–magenta: #a607cf;
–magenta-deep: #5a0470;
–navy: #001242;
–cream: #e2e1b9;
–ink: #0a0a14;
–ink-soft: #4a4a5e;
–line: #ececf2;
–bg: #ffffff;
–bg-soft: #faf9f6;
–pill-bg: #f6e4fb;
–display: ‘Bricolage Grotesque’, system-ui, sans-serif;
–body: ‘Manrope’, system-ui, sans-serif;
–max: 1200px;
–pad: clamp(20px, 5vw, 80px);
–radius: 18px;
font-family: var(–body);
color: var(–ink);
background: var(–bg);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 16px;
}

.mbg-lp img { max-width: 100%; display: block; height: auto; border: 0; }
.mbg-lp a { color: inherit; text-decoration: none; }
.mbg-lp button { font-family: inherit; cursor: pointer; border: 0; background: none; }
.mbg-lp h1, .mbg-lp h2, .mbg-lp h3, .mbg-lp h4 { font-weight: 700; }
.mbg-lp p { margin: 0; }

.mbg-lp .wrap { max-width: var(–max); margin: 0 auto; padding: 0 var(–pad); }

.mbg-lp .lp-nav {
position: sticky; top: 0; z-index: 50;
background: rgba(255,255,255,.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(–line);
}
.mbg-lp .lp-nav-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 14px var(–pad); max-width: var(–max); margin: 0 auto;
}
.mbg-lp .lp-nav-logo { height: 36px; width: auto; }
.mbg-lp .lp-nav-cta {
display: inline-flex; align-items: center; gap: 8px;
background: var(–magenta); color: #fff;
padding: 12px 22px; border-radius: 999px;
font-weight: 600; font-size: 14px; letter-spacing: -.01em;
transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
box-shadow: 0 6px 18px -8px rgba(166,7,207,.55);
}
.mbg-lp .lp-nav-cta:hover { background: var(–magenta-deep); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(166,7,207,.6); }
.mbg-lp .lp-nav-cta .arrow { transition: transform .2s ease; }
.mbg-lp .lp-nav-cta:hover .arrow { transform: translateX(3px); }

.mbg-lp .hero {
padding: clamp(60px,8vw,110px) 0 clamp(50px,7vw,90px);
position: relative; overflow: hidden;
}
.mbg-lp .hero::before {
content: “”; position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 0% 0%, rgba(166,7,207,.06), transparent 70%),
radial-gradient(40% 50% at 100% 100%, rgba(0,18,66,.04), transparent 70%);
pointer-events: none;
}
.mbg-lp .hero-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(40px,6vw,80px);
align-items: center;
position: relative;
}
@media (max-width: 900px) {
.mbg-lp .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}
.mbg-lp .hero-text { text-align: left; }
.mbg-lp .pill {
display: inline-flex; align-items: center; gap: 8px;
background: var(–pill-bg); color: var(–magenta-deep);
padding: 8px 18px; border-radius: 999px;
font-weight: 600; font-size: 14px; letter-spacing: -.005em;
margin-bottom: 24px;
}
.mbg-lp .pill-dot {
width: 8px; height: 8px; border-radius: 50%; background: var(–magenta);
animation: mbgPulse 2s ease-in-out infinite;
}
@keyframes mbgPulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(1.3); }
}
.mbg-lp .hero h1 {
font-family: var(–display);
font-weight: 700;
font-size: clamp(36px,5.4vw,68px);
line-height: 1.04;
letter-spacing: -.035em;
color: var(–ink);
}
.mbg-lp .hero h1 .accent { color: var(–magenta); }
.mbg-lp .hero h1 .accent-deep { color: var(–magenta-deep); }
.mbg-lp .hero p.lede {
margin-top: 24px; max-width: 520px;
font-size: clamp(16px,1.4vw,18px); color: var(–ink-soft);
line-height: 1.6;
}
.mbg-lp .hero-cta {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 36px;
background: var(–magenta); color: #fff;
padding: 18px 32px; border-radius: 999px;
font-weight: 700; font-size: 17px; letter-spacing: -.01em;
box-shadow: 0 14px 30px -10px rgba(166,7,207,.55);
transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.mbg-lp .hero-cta:hover { background: var(–magenta-deep); transform: translateY(-2px); box-shadow: 0 20px 40px -10px rgba(166,7,207,.6); }
.mbg-lp .hero-cta .arrow { transition: transform .2s ease; }
.mbg-lp .hero-cta:hover .arrow { transform: translateX(4px); }
.mbg-lp .hero-meta {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
margin-top: 22px; font-size: 14px; color: var(–ink-soft);
}
.mbg-lp .hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(–ink-soft); opacity: .4; }
.mbg-lp .hero-image {
position: relative;
border-radius: var(–radius);
overflow: hidden;
box-shadow: 0 40px 80px -30px rgba(0,18,66,.4), 0 16px 32px -16px rgba(0,18,66,.2);
}
.mbg-lp .hero-image img {
width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
}
.mbg-lp .hero-badge {
position: absolute; left: 20px; bottom: 20px;
background: #fff; border-radius: 14px;
padding: 12px 16px;
display: flex; align-items: center; gap: 12px;
box-shadow: 0 14px 28px -10px rgba(0,18,66,.3);
max-width: calc(100% – 40px);
}
.mbg-lp .hero-badge-icon {
width: 38px; height: 38px; border-radius: 10px;
background: var(–pill-bg); color: var(–magenta-deep);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mbg-lp .hero-badge-text { line-height: 1.25; }
.mbg-lp .hero-badge-text strong {
display: block;
font-family: var(–display); font-weight: 700; font-size: 15px;
color: var(–ink); letter-spacing: -.01em;
}
.mbg-lp .hero-badge-text span {
font-size: 12px; color: var(–ink-soft);
}

.mbg-lp .lp-section { padding: clamp(60px,8vw,110px) 0; position: relative; }
.mbg-lp .section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px,5vw,64px); }
.mbg-lp .eyebrow {
display: inline-block;
font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(–magenta); margin-bottom: 14px;
}
.mbg-lp h2 {
font-family: var(–display);
font-weight: 700;
font-size: clamp(32px,4.5vw,56px);
line-height: 1.05; letter-spacing: -.03em;
color: var(–ink);
}
.mbg-lp h2 .accent { color: var(–magenta); }
.mbg-lp .section-sub {
margin-top: 18px; font-size: clamp(16px,1.4vw,18px);
color: var(–ink-soft); line-height: 1.55; max-width: 580px; margin-left: auto; margin-right: auto;
}

.mbg-lp .what { background: var(–bg-soft); }
.mbg-lp .what-grid {
display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px,5vw,72px); align-items: center;
}
@media (max-width: 860px) { .mbg-lp .what-grid { grid-template-columns: 1fr; } }
.mbg-lp .what-image {
position: relative;
border-radius: var(–radius); overflow: hidden;
background: linear-gradient(140deg, #f6e4fb 0%, #ffffff 100%);
padding: clamp(40px,6vw,80px);
box-shadow: 0 30px 60px -25px rgba(0,18,66,.18), 0 12px 24px -12px rgba(0,18,66,.12);
display: flex; align-items: center; justify-content: center;
aspect-ratio: 5/4;
}
.mbg-lp .what-image img { width: 100%; max-width: 320px; height: auto; display: block; }
.mbg-lp .what-image-tag {
position: absolute; top: 18px; left: 18px;
background: #fff; color: var(–ink);
padding: 8px 14px; border-radius: 999px;
font-size: 12px; font-weight: 600; letter-spacing: -.01em;
box-shadow: 0 6px 16px -6px rgba(0,18,66,.2);
}
.mbg-lp .what-text h2 { margin-bottom: 20px; }
.mbg-lp .what-text p { font-size: 18px; color: var(–ink-soft); line-height: 1.6; }
.mbg-lp .what-text p strong { color: var(–ink); font-weight: 700; }
.mbg-lp .what-stats { display: flex; gap: 32px; margin-top: 32px; flex-wrap: wrap; }
.mbg-lp .stat { padding-right: 24px; border-right: 1px solid var(–line); }
.mbg-lp .stat:last-child { border-right: 0; }
.mbg-lp .stat-num {
font-family: var(–display); font-weight: 700; font-size: 36px;
color: var(–magenta); line-height: 1; letter-spacing: -.03em;
}
.mbg-lp .stat-lbl { font-size: 13px; color: var(–ink-soft); margin-top: 6px; }

.mbg-lp .steps-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
margin-bottom: 36px;
}
@media (max-width: 860px) { .mbg-lp .steps-grid { grid-template-columns: 1fr; } }
.mbg-lp .step {
background: #fff; border: 1px solid var(–line); border-radius: var(–radius);
padding: 36px 28px; position: relative;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mbg-lp .step:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -20px rgba(0,18,66,.18);
border-color: transparent;
}
.mbg-lp .step-num {
font-family: var(–display); font-weight: 700; font-size: 14px;
color: var(–magenta);
display: inline-flex; align-items: center; gap: 10px;
margin-bottom: 20px; letter-spacing: .08em; text-transform: uppercase;
}
.mbg-lp .step-num::before { content: “”; display: inline-block; width: 28px; height: 1px; background: var(–magenta); }
.mbg-lp .step-icon {
width: 54px; height: 54px; border-radius: 14px;
background: var(–pill-bg); color: var(–magenta-deep);
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.mbg-lp .step h3 {
font-family: var(–display); font-weight: 700; font-size: 24px;
letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px; color: var(–ink);
}
.mbg-lp .step p { color: var(–ink-soft); font-size: 15px; line-height: 1.55; }
.mbg-lp .steps-note {
text-align: center; font-size: 18px; color: var(–ink);
font-weight: 600; letter-spacing: -.01em;
}
.mbg-lp .steps-note span { color: var(–magenta); }

.mbg-lp .objection { background: var(–navy); color: #fff; border-radius: var(–radius); padding: clamp(40px,6vw,72px); }
.mbg-lp .objection-wrap { max-width: var(–max); margin: 0 auto; padding: 0 var(–pad); }
.mbg-lp .objection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .mbg-lp .objection-grid { grid-template-columns: 1fr; gap: 32px; } }
.mbg-lp .objection .question {
font-family: var(–display); font-weight: 700;
font-size: clamp(28px,3.5vw,42px); line-height: 1.15; letter-spacing: -.02em;
color: #fff; margin-bottom: 20px;
}
.mbg-lp .objection .question .quote { color: var(–magenta); font-size: 1.4em; line-height: 0; vertical-align: -.15em; margin-right: 6px; }
.mbg-lp .objection .answer { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); }
.mbg-lp .objection .answer strong { color: #fff; }
.mbg-lp .compare-card {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(–radius); padding: 28px;
}
.mbg-lp .compare-row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.mbg-lp .compare-row:last-child { border-bottom: 0; }
.mbg-lp .compare-label { color: rgba(255,255,255,.7); font-size: 14px; }
.mbg-lp .compare-price { font-family: var(–display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: #fff; }
.mbg-lp .compare-price.big { font-size: 32px; color: var(–magenta); font-weight: 700; }

.mbg-lp .summary-bg { background: var(–cream); border-radius: var(–radius); padding: clamp(60px,8vw,100px) 0; }
.mbg-lp .summary-card {
background: #fff; border-radius: var(–radius);
padding: clamp(32px,5vw,56px);
box-shadow: 0 30px 60px -30px rgba(0,18,66,.18);
max-width: 780px; margin: 0 auto;
}
.mbg-lp .summary-row {
display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
padding: 22px 0; border-bottom: 1px solid var(–line);
}
.mbg-lp .summary-row:last-child { border-bottom: 0; padding-bottom: 0; }
.mbg-lp .summary-row:first-child { padding-top: 0; }
.mbg-lp .summary-label { font-size: 15px; color: var(–ink-soft); font-weight: 500; }
.mbg-lp .summary-value {
font-family: var(–display); font-weight: 700; font-size: 20px;
letter-spacing: -.02em; color: var(–ink); text-align: right;
}
.mbg-lp .summary-value.price { color: var(–magenta); font-size: 28px; }
.mbg-lp .summary-value.tag {
background: var(–pill-bg); color: var(–magenta-deep);
font-family: var(–body); font-weight: 600; font-size: 14px;
padding: 6px 14px; border-radius: 999px; letter-spacing: -.005em;
}

.mbg-lp .contact-block {
text-align: center;
background: linear-gradient(160deg, #1a0729 0%, var(–navy) 100%);
color: #fff; border-radius: var(–radius);
padding: clamp(60px,8vw,100px) clamp(24px,5vw,60px);
position: relative; overflow: hidden;
}
.mbg-lp .contact-block::before {
content: “”; position: absolute; inset: 0;
background:
radial-gradient(40% 50% at 20% 100%, rgba(166,7,207,.25), transparent 60%),
radial-gradient(40% 50% at 80% 0%, rgba(166,7,207,.18), transparent 60%);
pointer-events: none;
}
.mbg-lp .contact-inner { position: relative; max-width: 760px; margin: 0 auto; }
.mbg-lp .contact-block .pill { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.15); }
.mbg-lp .contact-block .pill-dot { background: var(–magenta); }
.mbg-lp .contact-block h2 { color: #fff; margin-bottom: 16px; }
.mbg-lp .contact-block h2 .accent { color: var(–magenta); }
.mbg-lp .contact-block .lead {
color: rgba(255,255,255,.75); font-size: 18px; line-height: 1.6;
max-width: 520px; margin: 0 auto 44px;
}
.mbg-lp .contact-options {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
max-width: 640px; margin: 0 auto;
}
@media (max-width: 640px) { .mbg-lp .contact-options { grid-template-columns: 1fr; } }
.mbg-lp .contact-item {
display: flex; align-items: center; gap: 16px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
border-radius: var(–radius);
padding: 22px 24px;
text-align: left;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.mbg-lp .contact-item:hover {
background: rgba(166,7,207,.12);
border-color: rgba(166,7,207,.4);
transform: translateY(-2px);
}
.mbg-lp .contact-icon {
width: 48px; height: 48px; border-radius: 12px;
background: var(–magenta); color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mbg-lp .contact-label {
font-size: 12px; color: rgba(255,255,255,.6);
text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
margin-bottom: 4px;
}
.mbg-lp .contact-value {
font-family: var(–display); font-weight: 700; font-size: 18px;
color: #fff; letter-spacing: -.01em; word-break: break-word;
}

.mbg-lp .faq-list {
display: flex; flex-direction: column; gap: 14px;
max-width: 820px; margin: 0 auto;
}
.mbg-lp .faq-item {
background: #fff;
border: 1px solid var(–line);
border-radius: var(–radius);
overflow: hidden;
transition: border-color .2s ease, box-shadow .2s ease;
}
.mbg-lp .faq-item[open] {
border-color: rgba(166,7,207,.35);
box-shadow: 0 14px 36px -18px rgba(0,18,66,.18);
}
.mbg-lp .faq-item summary {
padding: 22px 28px;
cursor: pointer;
font-family: var(–display); font-weight: 600; font-size: 18px;
letter-spacing: -.01em; color: var(–ink);
display: flex; justify-content: space-between; align-items: center;
gap: 16px; list-style: none;
transition: color .2s ease;
}
.mbg-lp .faq-item summary:hover { color: var(–magenta-deep); }
.mbg-lp .faq-item summary::-webkit-details-marker { display: none; }
.mbg-lp .faq-item summary::after {
content: “+”;
font-family: var(–display); font-weight: 500; font-size: 28px;
color: var(–magenta); flex-shrink: 0;
width: 28px; text-align: center; line-height: .8;
transition: transform .25s ease;
}
.mbg-lp .faq-item[open] summary::after { transform: rotate(45deg); }
.mbg-lp .faq-answer {
padding: 0 28px 26px;
color: var(–ink-soft); font-size: 16px; line-height: 1.65;
}

.mbg-lp .lp-footer { padding: 48px var(–pad) 64px; text-align: center; border-top: 1px solid var(–line); margin-top: 60px; }
.mbg-lp .footer-logo { height: 32px; margin: 0 auto 18px; opacity: .85; }
.mbg-lp .footer-text { color: var(–ink-soft); font-size: 13px; }

.mbg-lp .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.mbg-lp .reveal.in { opacity: 1; transform: translateY(0); }

html { scroll-behavior: smooth; }

(function(){
var els = document.querySelectorAll(‘.mbg-lp .lp-section .wrap > *, .mbg-lp .lp-section .objection-wrap’);
els.forEach(function(el){ el.classList.add(‘reveal’); });
if (‘IntersectionObserver’ in window) {
var io = new IntersectionObserver(function(entries){
entries.forEach(function(e){
if (e.isIntersecting) { e.target.classList.add(‘in’); io.unobserve(e.target); }
});
}, { threshold: 0.12, rootMargin: ‘0px 0px -40px 0px’ });
els.forEach(function(el){ io.observe(el); });
} else {
els.forEach(function(el){ el.classList.add(‘in’); });
}
})();