.mf-wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(18px,3.4vw,40px)}
/* buttons */
.mf-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.mf-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:13px 22px;border-radius:12px;font-family:var(--f);font-size:1rem;font-weight:700;line-height:1.2;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s}
.mf-btn svg{width:18px;height:18px;flex:none}
.mf-btn--primary{background:linear-gradient(115deg,var(--btn-a),var(--btn-b));color:#fff;border-color:var(--btn-edge,#B678FF);box-shadow:0 10px 25px rgba(var(--rgb2,100,25,191),.35)}
.mf-btn--primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(100,25,191,.4)}
.mf-btn--secondary{background:#fff;color:var(--ink);border-color:var(--line-2)}
.mf-btn--secondary:hover{border-color:var(--purple);transform:translateY(-1px)}
.mf-btn--text{min-height:44px;padding:10px 6px;color:var(--purple);background:none}
.mf-btn--text:hover{text-decoration:underline;text-underline-offset:4px}
.mf-btn--sm{min-height:44px;padding:10px 16px;font-size:.94rem;border-radius:10px}
.mf-btn--glass{background:rgba(23,12,39,.82);color:#fff;border-color:rgba(201,152,255,.55)}
.mf-btn--glass:hover{background:rgba(112,42,187,.55);border-color:#D2A2FF}
@media(max-width:560px){.mf-actions .mf-btn{flex:1 1 100%}}

/* dark hero: the header is in normal flow (not floating), so the hero starts 24 to 34px under it; never add header-height padding here */
.mf-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--d-bg);color:var(--d-ink);padding:34px 0 clamp(48px,5vw,76px)}
.mf-starsbg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--d-bg)}
.mf-starsbg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 78% 40%,rgba(130,60,220,.28),transparent 70%),linear-gradient(180deg,rgba(9,6,19,.78),rgba(9,6,19,.5) 40%,rgba(9,6,19,.9))}
.mf-vid.mf-stars{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.55}
.mf-hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.mf-hero h1{font-size:clamp(44px,5vw,72px);line-height:1.06;color:#fff;text-shadow:0 4px 25px rgba(0,0,0,.4)}
.mf-hero .mf-accent{color:var(--acc)}
.mf-hero .mf-lead{color:var(--d-ink);margin-top:22px;max-width:600px}
.mf-hero .mf-btn--secondary{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5)}
.mf-hero .mf-btn--secondary:hover{background:rgba(255,255,255,.2);border-color:#fff}
.mf-hero .mf-btn--text{color:#E9D5FF}
.mf-hero__logo{height:clamp(40px,4.2vw,56px);width:auto;margin:0 0 26px;filter:drop-shadow(0 2px 14px rgba(0,0,0,.4))}
@media(max-width:980px){.mf-hero__grid{grid-template-columns:minmax(0,1fr)}.mf-hero{padding-top:24px}.mf-hero h1{font-size:clamp(38px,9.4vw,54px)}}

.mf-mosaic{position:relative;width:100%;max-width:660px;margin:0 auto;aspect-ratio:100/60;contain:layout}
.mf-tile{position:absolute;left:0;top:0;width:28%;aspect-ratio:2.3/1;display:block;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;text-decoration:none;
  transform:translate3d(calc(var(--x,0) * 1%),calc(var(--y,0) * 1%),0);will-change:transform;z-index:1}
.mf-tile:hover,.mf-tile:focus-visible{z-index:6}
.mf-tile:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:12px}
.mf-tile__in{position:absolute;inset:0;padding:0 4%;display:grid;place-items:center;animation:mf-float var(--dur,8s) ease-in-out var(--del,0s) infinite;will-change:transform;
  translate:calc(var(--px,0) * var(--k,1) * 1px) calc(var(--py,0) * var(--k,1) * 1px);transition:scale .35s cubic-bezier(.3,.7,.2,1)}
.mf-tile__glow{position:absolute;left:-12%;top:-30%;width:124%;height:160%;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--rgb),.22),rgba(var(--rgb),.06) 55%,transparent 75%);opacity:.5;transition:opacity .35s}
.mf-tile__logo{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(var(--rgb),.3))}
.mf-tile:hover .mf-tile__in,.mf-tile:focus-visible .mf-tile__in{scale:1.1}
.mf-tile:hover .mf-tile__glow,.mf-tile:focus-visible .mf-tile__glow{opacity:.7}
@keyframes mf-float{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}33%{transform:translate3d(calc(var(--fx,6px) * .6 * var(--amp,1)),calc(var(--fy,-8px) * var(--amp,1)),0) rotate(.6deg)}66%{transform:translate3d(calc(var(--fx,6px) * -.5 * var(--amp,1)),calc(var(--fy,-8px) * .35 * var(--amp,1)),0) rotate(-.6deg)}}
.mf-mosaic.is-paused .mf-tile__in{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mf-tile__in{animation:none}}   /* decoration only: no video is touched here */
@media(max-width:560px){.mf-mosaic{aspect-ratio:100/66;max-width:none}.mf-tile{width:29%}}
@media(min-width:981px){.mf-hero--main .mf-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.mf-hero--main .mf-mosaic{max-width:700px}}
@media(max-width:560px){.mf-mosaic{--amp:.5}}
.mf-hero--main h1{font-size:clamp(38px,4.2vw,60px)}


body.xp-cleanup-hub .ex-hero{--d-bg:#090613;--d-ink:#F6F0FF;--acc:#D9A7FF;--f:'Lato',sans-serif;--fh:'Oswald',sans-serif;--btn-a:#9340EE;--btn-b:#6419BF;--ink:#0E1A2E;--line-2:#D3CAEA;--purple:#5B1FB3;padding-top:140px;min-height:690px;box-sizing:border-box} .ex-hero *{box-sizing:border-box}.ex-hero h1{margin:0;font-family:var(--fh);font-weight:600;letter-spacing:-.01em;text-wrap:balance}.ex-hero .mf-lead{font-size:clamp(18px,1.45vw,20.5px);line-height:1.6}.ex-hero .mf-btn--text{margin-top:12px}.ex-hero .mf-tile__logo{max-width:100%;display:block}.ex-hero .mf-hero__media{min-width:0}@media(max-width:980px){body.xp-cleanup-hub .ex-hero{padding-top:130px;min-height:0}.ex-hero .mf-hero__media{width:100%;max-width:620px;margin:auto}}