.marketing-popup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
}

.marketing-popup.is-visible {
    display: block;
}

.marketing-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(6px);
}

.marketing-popup-box {
    position: relative;
    z-index: 2;
    width: min(720px, calc(100% - 32px));
    margin: 8vh auto 0;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 32px 90px rgba(0,0,0,.35);
    animation: popupZoom .28s ease;
}

.marketing-popup-close {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #0f172a;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.marketing-popup-image img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.marketing-popup-content {
    padding: 34px;
    text-align: center;
}

.marketing-popup-content h2 {
    margin: 0 0 14px;
    font-size: clamp(28px, 4vw, 42px);
    color: var(--roof-dark, #0f172a);
}

.marketing-popup-content p {
    color: var(--roof-gray, #475569);
    font-size: 17px;
    line-height: 1.7;
}

.marketing-popup-btn {
    display: inline-block;
    margin-top: 22px;
    padding: 14px 28px;
    border-radius: 999px;
    background: var(--roof-primary, #2563eb);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
}

.marketing-popup-btn:hover {
    background: var(--roof-primary-dark, #1d4ed8);
    color: #fff;
}

@keyframes popupZoom {
    from {
        transform: scale(.92);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


.marketing-popup-layout-2,
.marketing-popup-layout-3 {
    display: grid;
    grid-template-columns: 42% 58%;
    max-width: 920px;
}

.marketing-popup-layout-3 {
    grid-template-columns: 58% 42%;
}

.marketing-popup-side-image {
    min-height: 100%;
    background: #0f172a;
}

.marketing-popup-side-image img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    display: block;
}

.marketing-popup-layout-2 .marketing-popup-content,
.marketing-popup-layout-3 .marketing-popup-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.marketing-popup-layout-4 {
    max-width: 860px;
    min-height: 520px;
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
    position: relative;
}

.marketing-popup-layout-4::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.62);
}

.marketing-popup-overlay-content {
    position: relative;
    z-index: 2;
    padding: 54px;
    text-align: center;
    color: #fff;
}

.marketing-popup-overlay-content h2 {
    color: #fff;
    font-size: clamp(34px, 5vw, 58px);
    margin-bottom: 16px;
}

.marketing-popup-overlay-content p {
    color: rgba(255,255,255,.88);
    font-size: 18px;
    line-height: 1.7;
}

@media (max-width: 760px) {
    .marketing-popup-layout-2,
    .marketing-popup-layout-3 {
        grid-template-columns: 1fr;
    }

    .marketing-popup-side-image img {
        min-height: 220px;
    }

    .marketing-popup-layout-3 .marketing-popup-side-image {
        order: -1;
    }
}

.marketing-popup-layout-5{

    max-width:900px;
    overflow:hidden;
    position:relative;

}

.glass-bg{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:blur(6px);

    transform:scale(1.15);

}

.glass-content{

    position:relative;

    margin:50px;

    padding:40px;

    background:rgba(255,255,255,.28);

    backdrop-filter:blur(18px);

    border-radius:30px;

}

.marketing-popup-layout-6{

    max-width:650px;

}

.marketing-popup-layout-6 .marketing-popup-content{

    padding:70px;

    text-align:center;

}


.marketing-popup-layout-7{

    width:100vw;

    height:100vh;

    margin:0;

    border-radius:0;

}

.marketing-popup-layout-8{

    position:fixed;

    right:30px;

    bottom:30px;

    width:420px;

    margin:0;

    animation:popupSlide .4s;

}

@keyframes popupSlide{

from{

transform:translateX(120%);

}

to{

transform:none;

}

}


/* Layout 5 - Glass */

.marketing-popup-layout-5 {
    max-width: 860px;
    min-height: 520px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a, #334155);
}

.marketing-popup-glass-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
    transform: scale(1.12);
    opacity: .72;
}

.marketing-popup-glass-content {
    position: relative;
    z-index: 2;
    margin: 56px;
    padding: 46px;
    border-radius: 30px;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(18px);
    text-align: center;
    color: #fff;
}

.marketing-popup-glass-content h2 {
    color: #fff;
    font-size: clamp(34px, 5vw, 56px);
}

.marketing-popup-glass-content p {
    color: rgba(255,255,255,.9);
    font-size: 18px;
    line-height: 1.7;
}

/* Layout 6 - Minimal */

.marketing-popup-layout-6 {
    max-width: 620px;
}

.marketing-popup-layout-6 .marketing-popup-content {
    padding: 70px 48px;
}

.marketing-popup-label {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(37,99,235,.1);
    color: var(--roof-primary, #2563eb);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
}

/* Layout 7 - Fullscreen */

.marketing-popup-layout-7 {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    max-width: none;
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
    position: relative;
}

.marketing-popup-layout-7::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(20,184,166,.28), transparent 32%),
        rgba(15,23,42,.78);
}

.marketing-popup-fullscreen-content {
    position: relative;
    z-index: 2;
    width: min(850px, calc(100% - 40px));
    text-align: center;
    color: #fff;
}

.marketing-popup-fullscreen-content h2 {
    color: #fff;
    font-size: clamp(44px, 7vw, 86px);
    margin-bottom: 20px;
}

.marketing-popup-fullscreen-content p {
    color: rgba(255,255,255,.9);
    font-size: 21px;
    line-height: 1.7;
}

/* Layout 8 - Slide in */

.marketing-popup-slide-wrapper {
    pointer-events: none;
    background: transparent;
}

.marketing-popup-slide-wrapper.is-visible {
    display: block;
}

.marketing-popup-layout-8 {
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: min(430px, calc(100% - 32px));
    margin: 0;
    border-radius: 24px;
    pointer-events: auto;
    animation: popupSlideIn .38s ease;
}

.marketing-popup-layout-8 .marketing-popup-image img {
    height: 180px;
}

.marketing-popup-layout-8 .marketing-popup-content {
    padding: 24px;
    text-align: left;
}

.marketing-popup-layout-8 .marketing-popup-content h2 {
    font-size: 26px;
}

.marketing-popup-layout-8 .marketing-popup-content p {
    font-size: 15px;
}

@keyframes popupSlideIn {
    from {
        transform: translateX(130%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 760px) {
    .marketing-popup-glass-content {
        margin: 28px;
        padding: 30px;
    }

    .marketing-popup-layout-7 {
        padding: 24px;
    }

    .marketing-popup-layout-8 {
        right: 16px;
        bottom: 16px;
    }
}