/* ==========================================================
   RIS Popup V4
   Part 1 of 4
   Foundation
========================================================== */

/* ==========================================================
   CSS Variables
========================================================== */

:root{

    --ris-bg:#0b0b0d;
    --ris-bg-card:#151518;
    --ris-bg-hover:#1d1d22;

    --ris-gold:#d4af37;
    --ris-gold-dark:#b88d1c;
    --ris-gold-light:#f4df8b;

    --ris-white:#ffffff;
    --ris-text:#d6d6d8;
    --ris-muted:#9f9fa5;

    --ris-border:rgba(212,175,55,.18);

    --ris-shadow:
        0 30px 80px rgba(0,0,0,.45);

    --ris-radius-xl:24px;
    --ris-radius-lg:18px;
    --ris-radius-md:12px;

    --ris-transition:.30s ease;

    --ris-popup-width:760px;

    --ris-font:
        "Inter",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

}

/* ==========================================================
   Reset
========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

button{

    font:inherit;
    border:none;
    background:none;
    cursor:pointer;

}

svg{

    display:block;

}

img{

    display:block;
    max-width:100%;

}

/* ==========================================================
   Popup Overlay
========================================================== */

.ris-popup{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    padding:24px;

    visibility:hidden;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    font-family:var(--ris-font);

}

/* Popup Active */

.ris-popup.is-active{

    visibility:visible;

    opacity:1;

    pointer-events:auto;

}

/* ==========================================================
   Background
========================================================== */

.ris-popup__backdrop{

    position:absolute;

    inset:0;

    background:

        rgba(0,0,0,.78);

    backdrop-filter:

        blur(8px);

}

/* ==========================================================
   Popup Card
========================================================== */

.ris-popup__card{

    position:relative;

    width:100%;
    max-width:var(--ris-popup-width);

    max-height:90vh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #1b1b20 0%,
            #111114 100%
        );

    border:1px solid var(--ris-border);

    border-radius:var(--ris-radius-xl);

    box-shadow:var(--ris-shadow);

    z-index:2;

    animation:risPopupScale .35s ease;

}

/* ==========================================================
   Body
========================================================== */

.ris-popup__body{

    flex:1;

    overflow-y:auto;

    padding:
        42px
        42px
        34px;

}

/* ==========================================================
   Close Button
========================================================== */

.ris-popup__close{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    color:

        var(--ris-muted);

    transition:

        var(--ris-transition);

}

.ris-popup__close:hover{

    color:

        var(--ris-gold);

    background:

        rgba(255,255,255,.05);

}

.ris-popup__close svg{

    width:20px;

    height:20px;

}

/* ==========================================================
   Opening Animation
========================================================== */

@keyframes risPopupScale{

    from{

        opacity:0;

        transform:
            scale(.92)
            translateY(20px);

    }

    to{

        opacity:1;

        transform:
            scale(1)
            translateY(0);

    }

}

/* ==========================================================
   RIS Popup V4
   Part 2 of 4
   Hero + Benefits
========================================================== */

/* ==========================================================
   Hero Section
========================================================== */

.ris-popup__hero{

    text-align:center;

    margin-bottom:28px;

}

.ris-popup__title{

    color:var(--ris-white);

    font-size:2rem;

    font-weight:700;

    line-height:1.2;

    letter-spacing:-0.02em;

    margin-bottom:16px;

}

.ris-popup__title span{

    display:block;

    margin-top:6px;

    color:var(--ris-gold);

}

.ris-popup__description{

    max-width:560px;

    margin:0 auto;

    color:var(--ris-text);

    font-size:1rem;

    line-height:1.75;

    font-weight:400;

}

.ris-popup__description strong{

    color:var(--ris-gold-light);

    font-weight:600;

}

/* ==========================================================
   Benefits Section
========================================================== */

.ris-popup__benefits{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    padding:18px 24px;

    margin-bottom:34px;

    border:1px solid var(--ris-border);

    border-radius:var(--ris-radius-lg);

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

}

.ris-benefit{

    display:flex;

    align-items:center;

    gap:10px;

}

.ris-benefit__icon{

    width:36px;

    height:36px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(212,175,55,.10);

    color:var(--ris-gold);

    flex-shrink:0;

}

.ris-benefit__icon svg{

    width:18px;

    height:18px;

}

.ris-benefit__text{

    color:var(--ris-text);

    font-size:.95rem;

    line-height:1.35;

    white-space:nowrap;

}

.ris-benefit__text strong{

    color:var(--ris-white);

    font-weight:600;

}

.ris-benefit__divider{

    color:rgba(212,175,55,.40);

    font-size:1.1rem;

    font-weight:300;

    user-select:none;

}

/* ==========================================================
   Hero Animation
========================================================== */

.ris-popup__hero{

    animation:risFadeUp .45s ease;

}

.ris-popup__benefits{

    animation:risFadeUp .60s ease;

}

@keyframes risFadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   RIS Popup V4
   Part 3 of 4
   Feature Grid + CTA
========================================================== */


/* ==========================================================
   Feature Grid
========================================================== */

.ris-popup__features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:34px;

}


/* ==========================================================
   Feature Card
========================================================== */

.ris-feature-card{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:22px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.015)
        );

    border:1px solid var(--ris-border);

    border-radius:var(--ris-radius-lg);

    transition:all .30s ease;

    min-height:128px;

}

.ris-feature-card:hover{

    transform:translateY(-5px);

    border-color:rgba(212,175,55,.45);

    background:

        linear-gradient(
            180deg,
            rgba(212,175,55,.08),
            rgba(255,255,255,.03)
        );

    box-shadow:

        0 18px 35px rgba(0,0,0,.28);

}


/* ==========================================================
   Feature Icon
========================================================== */

.ris-feature-card__icon{

    width:54px;

    height:54px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:

        rgba(212,175,55,.10);

    color:var(--ris-gold);

}

.ris-feature-card__icon svg{

    width:24px;

    height:24px;

}


/* ==========================================================
   Feature Content
========================================================== */

.ris-feature-card__content{

    flex:1;

}

.ris-feature-card__content h3{

    color:var(--ris-white);

    font-size:1.05rem;

    font-weight:600;

    margin-bottom:8px;

}

.ris-feature-card__content p{

    color:var(--ris-text);

    font-size:.92rem;

    line-height:1.65;

}


/* ==========================================================
   CTA Section
========================================================== */

.ris-popup__cta{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

}


/* ==========================================================
   Shared Button
========================================================== */

.ris-btn{

    font-family:var(--ris-font);

    transition:all .30s ease;

}


/* ==========================================================
   Primary Button
========================================================== */

.ris-btn--primary{

    width:100%;

    min-height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    border-radius:16px;

    background:

        linear-gradient(
            135deg,
            #d4af37,
            #f0cf63
        );

    color:#111;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.3px;

    box-shadow:

        0 15px 35px rgba(212,175,55,.22);

}

.ris-btn--primary:hover{

    transform:translateY(-3px);

    box-shadow:

        0 20px 45px rgba(212,175,55,.34);

}

.ris-btn--primary svg{

    width:18px;

    height:18px;

}

.ris-btn__label{
    display:flex;
    align-items:center;
}

.ris-btn__arrow{
    display:flex;
    align-items:center;
    justify-content:center;
}


/* ==========================================================
   Secondary Button
========================================================== */

.ris-btn--ghost{

    color:var(--ris-muted);

    font-size:.96rem;

    font-weight:500;

    padding:8px 18px;

    border-radius:999px;

}

.ris-btn--ghost:hover{

    color:var(--ris-gold);

    background:

        rgba(255,255,255,.04);

}


/* ==========================================================
   Feature Animation
========================================================== */

.ris-popup__features{

    animation:risFadeUp .75s ease;

}

.ris-popup__cta{

    animation:risFadeUp .90s ease;

}

/* ==========================================================
   RIS Popup V4
   Part 4 of 4
   Universal Responsive
========================================================== */

/* ==========================================================
   Large Desktop
========================================================== */

@media (min-width:1600px){

    :root{

        --ris-popup-width:820px;

    }

}

/* ==========================================================
   Laptop
   1366px - 1599px
========================================================== */

@media (max-width:1599px){

    :root{

        --ris-popup-width:740px;

    }

    .ris-popup__body{

        padding:36px;

    }

    .ris-popup__title{

        font-size:1.85rem;

    }

}

/* ==========================================================
   Tablet
========================================================== */

@media (max-width:991px){

    .ris-popup{

        padding:20px;

    }

    .ris-popup__body{

        padding:30px;

    }

    .ris-popup__features{

        grid-template-columns:1fr;

        gap:16px;

    }

    .ris-feature-card{

        min-height:auto;

    }

    .ris-popup__benefits{

        gap:12px;

        padding:16px;

    }

    .ris-benefit__divider{

        display:none;

    }

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:767px){

    .ris-popup{

        padding:14px;

        align-items:flex-start;

        overflow-y:auto;

    }

        .ris-popup__card{
        
            width:100%;
        
            margin:20px 0;
        
            border-radius:20px;
        
            max-height:calc(100vh - 40px);
        
        }

    .ris-popup__body{

        padding:26px 20px;

    }

    .ris-popup__title{

        font-size:1.55rem;

    }

    .ris-popup__description{

        font-size:.95rem;

        line-height:1.6;

    }

    .ris-popup__benefits{

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

    }

    .ris-benefit{

        width:100%;

    }

    .ris-benefit__divider{

        display:none;

    }

    .ris-feature-card{

        padding:18px;

        gap:14px;

    }

    .ris-feature-card__icon{

        width:46px;

        height:46px;

    }

    .ris-feature-card__icon svg{

        width:20px;

        height:20px;

    }

    .ris-feature-card__content h3{

        font-size:1rem;

    }

    .ris-feature-card__content p{

        font-size:.88rem;

        line-height:1.55;

    }

    .ris-btn--primary{

        min-height:54px;

        font-size:.96rem;

    }

    .ris-btn--ghost{

        font-size:.92rem;

    }

}

/* ==========================================================
   Small Mobile
========================================================== */

@media (max-width:420px){

    .ris-popup__body{

        padding:22px 16px;

    }

    .ris-popup__title{

        font-size:1.35rem;

    }

    .ris-popup__description{

        font-size:.90rem;

    }

    .ris-benefit__text{

        font-size:.88rem;

        white-space:normal;

    }

}

/* ==========================================================
   Accessibility
========================================================== */

.ris-btn:focus-visible,
.ris-popup__close:focus-visible{

    outline:2px solid var(--ris-gold);

    outline-offset:3px;

}

/* ==========================================================
   Reduced Motion
========================================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto;

    }

}