:root.mo-no-scroll,
html.mo-no-scroll,
body.mo-no-scroll { overflow:hidden !important; }

.mo-overlay {
    position:fixed;
    inset:0;
    z-index:999999;
    display:grid;
    place-items:center;
    padding:8px;
    visibility:hidden;
    opacity:0;
    transition:opacity .28s ease,visibility .28s ease;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
}

.mo-overlay.is-open { visibility:visible; opacity:1; }

.mo-backdrop {
    position:absolute;
    inset:0;
    background:rgba(4,12,18,.82);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

/* Near full-screen: only a small 8px viewport margin and 1px border. */
.mo-modal {
    position:relative;
    z-index:1;
    width:calc(100vw - 16px);
    height:calc(100vh - 16px);
    max-width:none;
    max-height:none;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid rgba(255,255,255,.28);
    border-radius:10px;
    background:var(--mo-bg);
    color:var(--mo-text);
    box-shadow:0 18px 70px rgba(0,0,0,.45);
    transform:translateY(14px) scale(.99);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.mo-overlay.is-open .mo-modal { transform:translateY(0) scale(1); }

.mo-close {
    position:absolute;
    top:12px;
    right:12px;
    z-index:20;
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    background:rgba(0,0,0,.35);
    color:#fff;
    font-size:26px;
    line-height:1;
    cursor:pointer;
    backdrop-filter:blur(8px);
}

.mo-media {
    position:relative;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    background:#050505;
}

.mo-media-slide {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    opacity:0;
    transform:scale(1.015);
    transition:opacity .38s ease,transform .55s ease;
    pointer-events:none;
}

.mo-media-slide.is-active { opacity:1; transform:scale(1); pointer-events:auto; }

.mo-media-slide img,
.mo-media-slide video {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#050505;
}

.mo-media-slide video { outline:none; }

.mo-placeholder {
    width:28%;
    max-width:280px;
    aspect-ratio:1;
    border-radius:28%;
    background:radial-gradient(circle at 35% 30%,#ff9c5b,#f02c20 45%,#6b0906 100%);
    box-shadow:0 35px 70px rgba(255,55,20,.25);
}

.mo-content {
    flex:0 0 auto;
    padding:20px 34px 24px;
    background:var(--mo-bg);
    border-top:1px solid rgba(255,255,255,.08);
}

.mo-copy {
    min-height:84px;
    display:grid;
    align-items:center;
}

.mo-copy-slide {
    grid-area:1 / 1;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .25s ease,transform .3s ease;
    pointer-events:none;
}

.mo-copy-slide.is-active { opacity:1; transform:translateY(0); pointer-events:auto; }

.mo-copy h2 {
    margin:0 0 8px;
    font-size:clamp(28px,3vw,40px);
    line-height:1.08;
    letter-spacing:-.035em;
    font-weight:700;
    color:var(--mo-text);
}

.mo-copy p {
    margin:0;
    font-size:16px;
    line-height:1.45;
    color:color-mix(in srgb,var(--mo-text) 72%,transparent);
}

.mo-dots {
    display:flex;
    gap:8px;
    justify-content:center;
    align-items:center;
    margin:10px 0 15px;
}

.mo-dot {
    width:25px;
    height:4px;
    padding:0;
    border:0;
    border-radius:99px;
    background:rgba(255,255,255,.30);
    cursor:pointer;
    transition:width .25s ease,background .25s ease;
}

.mo-dot.is-active { width:48px; background:var(--mo-accent); }

.mo-actions { position:relative; }

.mo-next {
    width:100%;
    min-height:52px;
    border:0;
    border-radius:999px;
    background:var(--mo-accent);
    color:#111;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}

.mo-step-link { display:none; }
.mo-step-link.is-active { display:none; }

@media (max-width:700px) {
    .mo-overlay { padding:4px; }
    .mo-modal {
        width:calc(100vw - 8px);
        height:calc(100vh - 8px);
        border-radius:8px;
    }
    .mo-media { min-height:0; }
    .mo-content { padding:16px 18px max(18px,env(safe-area-inset-bottom)); }
    .mo-copy { min-height:90px; }
    .mo-copy h2 { font-size:29px; }
    .mo-copy p { font-size:15px; }
    .mo-close { top:9px; right:9px; }
}

@media (prefers-reduced-motion:reduce) {
    .mo-overlay,.mo-modal,.mo-media-slide,.mo-copy-slide,.mo-dot { transition:none !important; }
}