.ocw-xmail-glass,
.ocw-xmail-glass *{
    box-sizing:border-box;
    cursor:default;
}

.ocw-xmail-glass{
    --xg-dark:#181830;
    --xg-navy:#224;
    --xg-blue:#447;
    --xg-white:#fff;

    position:relative;
    overflow:hidden;
    padding:50px 0;
    background-color:#29294f;
    background-image:
        linear-gradient(
            115deg,
            rgba(34,34,68,.42),
            rgba(68,68,119,.20)
        ),
        url("https://www.orioncomputerworld.nl/images/xmail-hosting.jpg");
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
    isolation:isolate;
}

.ocw-xmail-glass::before{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 12% 15%,rgba(255,255,255,.08),transparent 26%),
        radial-gradient(circle at 86% 80%,rgba(117,117,190,.20),transparent 30%);
    content:"";
    pointer-events:none;
}

.ocw-xmail-glass::after{
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:40px 40px;
    content:"";
    opacity:.55;
    pointer-events:none;
}

.ocw-xmail-glass__overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(20,20,42,.35),
            rgba(20,20,42,.08) 50%,
            rgba(20,20,42,.30)
        );
    pointer-events:none;
}

.ocw-xmail-glass__container{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 38px));
    margin-inline:auto;
    display:grid;
    grid-template-columns:1.02fr .98fr;
    align-items:center;
    gap:64px;
}

.ocw-xmail-glass a{
    color:inherit;
    text-decoration:none;
}

.ocw-xmail-glass svg{
    width:1em;
    height:1em;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.ocw-xmail-glass__badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    padding:12px 13px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:#d7d7ff;
    font-size:16px;
    font-weight:500;
    letter-spacing:1.3px;
    text-transform:uppercase;
}

.ocw-xmail-glass__badge span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#63d28c;
    box-shadow:0 0 0 7px rgba(99,210,140,.13);
    animation:ocwXmailGlassPulse 2s ease-in-out infinite;
}

.ocw-xmail-glass__content h2{
    max-width:650px;
    margin:0;
    font-size:clamp(40px,5.6vw,68px);
    line-height:1.02;
    letter-spacing:-3px;
}

.ocw-xmail-glass__content h2 strong{
    display:block;
    color:#c9c9ff;
    font-weight:800;
}

.ocw-xmail-glass__content>p{
    max-width:620px;
    margin:24px 0 0;
    color:rgba(255,255,255,.73);
    font-size:18px;
    line-height:1.75;
}

.ocw-xmail-glass__actions{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:31px;
}

.ocw-xmail-glass__btn{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 24px;
    border:1px solid transparent;
    border-radius:999px;
    font-size:14px;
    font-weight:900;
    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.ocw-xmail-glass__btn:hover{
    transform:translateY(-3px);
}

.ocw-xmail-glass__btn--primary{
    background:#fff;
    box-shadow:0 16px 35px rgba(0,0,0,.18);
    color:var(--xg-navy)!important;
}

.ocw-xmail-glass__btn--secondary{
    border-color:rgba(255,255,255,.17);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:#fff!important;
}

.ocw-xmail-glass__btn svg{
    width:17px;
    height:17px;
    transition:transform .25s ease;
}

.ocw-xmail-glass__btn:hover svg{
    transform:translateX(4px);
}

.ocw-xmail-glass__trust{
    display:flex;
    flex-wrap:wrap;
    gap:18px 25px;
    margin-top:35px;
}

.ocw-xmail-glass__trust span{
    display:flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.75);
    font-size:13px;
    font-weight:800;
}

.ocw-xmail-glass__trust svg{
    width:19px;
    height:19px;
    color:#c9c9ff;
}

/* Glass panel */
.ocw-xmail-glass__panel{
    position:relative;
    overflow:hidden;
    padding:28px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:28px;
    background:rgba(255,255,255,.10);
    box-shadow:
        0 30px 80px rgba(0,0,0,.26),
        inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter:blur(24px) saturate(125%);
    -webkit-backdrop-filter:blur(24px) saturate(125%);
}

.ocw-xmail-glass__panel::before{
    position:absolute;
    top:-120px;
    right:-100px;
    width:260px;
    height:260px;
    border:42px solid rgba(255,255,255,.045);
    border-radius:50%;
    content:"";
}

.ocw-xmail-glass__panel-top{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:22px;
}

.ocw-xmail-glass__panel-label{
    display:block;
    margin-bottom:7px;
    color:#d2d2ff;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.3px;
    text-transform:uppercase;
}

.ocw-xmail-glass__panel h3{
    margin:0;
    font-size:28px;
    letter-spacing:-1px;
}

.ocw-xmail-glass__status{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 11px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.78);
    font-size:11px;
    font-weight:900;
}

.ocw-xmail-glass__status i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#63d28c;
    box-shadow:0 0 0 6px rgba(99,210,140,.11);
}

.ocw-xmail-glass__cards{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
}

.ocw-xmail-glass__cards article{
    display:flex;
    align-items:flex-start;
    gap:13px;
    min-height:128px;
    padding:18px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    background:rgba(255,255,255,.08);
    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.ocw-xmail-glass__cards article:hover{
    transform:translateY(-5px);
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.13);
}

.ocw-xmail-glass__icon{
    width:43px;
    height:43px;
    display:grid;
    flex:0 0 auto;
    place-items:center;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    background:rgba(255,255,255,.10);
    color:#d3d3ff;
}

.ocw-xmail-glass__icon svg{
    width:22px;
    height:22px;
}

.ocw-xmail-glass__cards span,
.ocw-xmail-glass__cards strong,
.ocw-xmail-glass__cards small{
    display:block;
}

.ocw-xmail-glass__cards span{
    margin-bottom:5px;
    color:#c9c9ff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.ocw-xmail-glass__cards strong{
    font-size:15px;
    line-height:1.25;
}

.ocw-xmail-glass__cards small{
    margin-top:6px;
    color:rgba(255,255,255,.58);
    font-size:11px;
    line-height:1.45;
}

.ocw-xmail-glass__tech{
    position:relative;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.ocw-xmail-glass__tech span{
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.72);
    font-size:10px;
    font-weight:800;
}

/* Altijd zichtbaar; animatie alleen als JS de class toevoegt */
.ocw-xmail-glass__reveal{
    opacity:1;
    transform:none;
}

.ocw-xmail-glass.js-enabled .ocw-xmail-glass__reveal{
    opacity:0;
    transform:translateY(34px);
    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2,.8,.2,1);
}

.ocw-xmail-glass.js-enabled .ocw-xmail-glass__reveal.is-visible{
    opacity:1;
    transform:none;
}

.ocw-xmail-glass__delay{
    transition-delay:.12s!important;
}

@keyframes ocwXmailGlassPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(99,210,140,.20)}
    50%{box-shadow:0 0 0 9px rgba(99,210,140,0)}
}

@media(max-width:980px){
    .ocw-xmail-glass__container{
        grid-template-columns:1fr;
        gap:42px;
    }

    .ocw-xmail-glass__content{

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.12),
                rgba(255,255,255,.05)
            );
    
        border:1px solid rgba(255,255,255,.20);
    
        backdrop-filter:blur(22px) saturate(180%);
        -webkit-backdrop-filter:blur(22px) saturate(180%);
    }

    .ocw-xmail-glass__content h2,
    .ocw-xmail-glass__content p{
        text-shadow:0 2px 8px rgba(0,0,0,.35);
    }

    .ocw-xmail-glass__content h2,
    .ocw-xmail-glass__content>p{
        margin-inline:auto;
    }

    .ocw-xmail-glass__actions,
    .ocw-xmail-glass__trust{
        justify-content:center;
    }
}

@media(max-width:640px){
    .ocw-xmail-glass{
        padding:72px 0;
        background-position:center;
    }

    .ocw-xmail-glass__container{
        width:min(100% - 28px,1180px);
    }

    .ocw-xmail-glass__content h2{
        letter-spacing:-2px;
    }

    .ocw-xmail-glass__panel{
        padding:21px;
        border-radius:23px;
    }

    .ocw-xmail-glass__panel-top{
        align-items:flex-start;
        flex-direction:column;
    }

    .ocw-xmail-glass__cards{
        grid-template-columns:1fr;
    }

    .ocw-xmail-glass__cards article{
        min-height:auto;
    }
}

@media(prefers-reduced-motion:reduce){
    .ocw-xmail-glass *,
    .ocw-xmail-glass *::before,
    .ocw-xmail-glass *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }

    .ocw-xmail-glass__reveal{
        opacity:1!important;
        transform:none!important;
    }
}