:root{
    --orion-dark:#224;
    --orion-blue:#447;
    --orion-white:#fff;
    --orion-light:#f4f6fb;
    --orion-text:#202033;
    --orion-muted:#68687c;
    --orion-radius:22px;
    --orion-shadow:0 18px 50px rgba(34,34,68,.14);

    --hero-image:url('/images/orion-hero.jpg');
    --repair-image:url('/images/technician.png');
    --business-image:url('/images/officeview.jpg');
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:#fff;
    color:var(--orion-text);
    font-family:Arial,Helvetica,sans-serif;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.orion-placeholder{
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px dashed #447;
    background:#f4f6fb;
    color:#447;
    font-size:18px;
    font-weight:800;
}
.orion-placeholder.footer{min-height:180px}

.orion-home{overflow:hidden}
.orion-container{
    width:min(1180px,calc(100% - 36px));
    margin-inline:auto;
}
.orion-section{padding:88px 0}

.orion-original-top{
    padding:32px 0 18px;
    background:#fff;
}
.orion-original-grid{
    display:grid;
    grid-template-columns:minmax(0,2.1fr) minmax(260px,.9fr);
    gap:22px;
    align-items:stretch;
}

/* slideshow */
.orion-product-slider{
    position:relative;
    height:790px;
    min-height:790px;
    overflow:hidden;
    border:1px solid rgba(34,34,68,.08);
    border-radius:26px;
    background:#fff;
    box-shadow:0 16px 45px rgba(34,34,68,.10);
}
.orion-product-track{
    position:relative;
    height:100%;
    min-height:0;
}
.orion-product-slide{
    position:absolute;
    background:#fff;
    inset:0;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:25px;
    padding:38px 68px 42px 52px;
    opacity:0;
    visibility:hidden;
    transform:translateX(35px);
    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.2,.8,.2,1),
        visibility .65s;
}
.orion-product-slide.is-active{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
}
.orion-product-copy{
    position:relative;
    z-index:2;
}
.orion-product-label{
    display:inline-flex;
    margin-bottom:14px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(68,68,119,.1);
    color:var(--orion-blue);
    font-size:12px;
    font-weight:900;
    letter-spacing:1.1px;
    text-transform:uppercase;
}
.orion-product-slide h2{
    margin:0;
    color:var(--orion-dark);
    font-size:clamp(28px,4vw,47px);
    line-height:1.04;
    letter-spacing:-1.8px;
}
.orion-product-slide p{
    max-width:470px;
    margin:17px 0 24px;
    color:var(--orion-muted);
    font-size:16px;
    line-height:1.65;
}
.orion-product-image{
    height:285px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.orion-product-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 22px 22px rgba(34,34,68,.14));
    transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.orion-product-slide.is-active .orion-product-image img{
    animation:orionProductIn .8s both;
}
.orion-slider-arrow{
    position:absolute;
    z-index:5;
    top:50%;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:rgba(34,34,68,.92);
    box-shadow:0 10px 25px rgba(34,34,68,.2);
    color:#fff;
    cursor:pointer;
    transform:translateY(-50%);
    transition:transform .2s ease,background .2s ease;
}
.orion-slider-arrow:hover{
    background:var(--orion-blue);
    transform:translateY(-50%) scale(1.08);
}
.orion-slider-prev{left:5px}
.orion-slider-next{right:5px}
.orion-slider-dots{
    position:absolute;
    z-index:6;
    right:0;
    bottom:17px;
    left:0;
    display:flex;
    justify-content:center;
    gap:8px;
}
.orion-slider-dot{
    width:9px;
    height:9px;
    padding:0;
    border:0;
    border-radius:99px;
    background:rgba(34,34,68,.22);
    cursor:pointer;
    transition:width .25s ease,background .25s ease;
}
.orion-slider-dot.is-active{
    width:28px;
    background:var(--orion-blue);
}

/* pasfoto */
.orion-passport-card{
    position:relative;
    height:390px;
    min-height:390px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:26px;
    background:linear-gradient(145deg,var(--orion-blue),var(--orion-dark));
    box-shadow:var(--orion-shadow);
    color:#fff;
    isolation:isolate;
}
.orion-passport-card::before{
    position:absolute;
    z-index:-1;
    top:-90px;
    right:-70px;
    width:230px;
    height:230px;
    border:35px solid rgba(255,255,255,.09);
    border-radius:50%;
    content:"";
}
.orion-passport-image{
    height:185px;
    margin:22px 22px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
}
.orion-passport-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.orion-passport-content{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:21px 24px 24px;
}
.orion-passport-content h3{
    margin:0;
    font-size:25px;
    line-height:1.15;
}
.orion-passport-content p{
    margin:10px 0 18px;
    color:rgba(255,255,255,.76);
    font-size:14px;
    line-height:1.55;
}
.orion-passport-features{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:18px;
}
.orion-passport-features span{
    padding:6px 9px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    font-size:11px;
    font-weight:800;
}
.orion-passport-link{
    margin-top:auto;
    display:flex;
    min-height:44px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#fff;
    color:var(--orion-dark);
    font-size:14px;
    font-weight:900;
    transition:transform .25s ease,box-shadow .25s ease;
}
.orion-passport-link:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,.18);
}

/* algemene knoppen en titels */
.orion-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:15px;
    color:var(--orion-blue);
    font-size:13px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
}
.orion-eyebrow::before{
    width:28px;
    height:3px;
    border-radius:99px;
    background:var(--orion-blue);
    content:"";
}
.orion-title{
    max-width:760px;
    margin:0;
    color:var(--orion-dark);
    font-size:clamp(34px,5vw,62px);
    line-height:1.02;
    letter-spacing:-2.5px;
}
.orion-subtitle{
    max-width:690px;
    margin:22px 0 0;
    color:var(--orion-muted);
    font-size:clamp(17px,2vw,20px);
    line-height:1.7;
}
.orion-btn{
    position:relative;
    min-height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    overflow:hidden;
    padding:0 24px;
    border:2px solid transparent;
    border-radius:999px;
    font-size:15px;
    font-weight:800;
    transition:transform .25s ease,box-shadow .25s ease;
}
.orion-btn:hover{transform:translateY(-3px)}
.orion-btn-primary{
    background:var(--orion-dark);
    box-shadow:0 14px 30px rgba(34,34,68,.24);
    color:#fff;
}
.orion-btn-light{
    border-color:rgba(34,34,68,.15);
    background:rgba(255,255,255,.92);
    color:var(--orion-dark);
}

/* hero */
.orion-hero{
    position:relative;
    min-height:610px;
    display:flex;
    align-items:center;
    isolation:isolate;
    background:
        linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 42%,rgba(255,255,255,.18) 76%),
        var(--hero-image) center right/cover no-repeat;
}
.orion-hero::before{
    position:absolute;
    z-index:-1;
    inset:0;
    background:
        radial-gradient(circle at 10% 20%,rgba(68,68,119,.13),transparent 28%),
        linear-gradient(135deg,transparent 55%,rgba(34,34,68,.08));
    content:"";
}
.orion-hero-content{
    max-width:710px;
    padding:90px 0;
}
.orion-hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:26px;
    padding:9px 15px;
    border:1px solid rgba(68,68,119,.18);
    border-radius:999px;
    background:rgba(255,255,255,.8);
    color:var(--orion-blue);
    font-size:13px;
    font-weight:800;
}
.orion-status-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#35a95b;
    animation:orionPulse 2s infinite;
}
.orion-hero h1{
    margin:0;
    color:var(--orion-dark);
    font-size:clamp(44px,7vw,78px);
    line-height:.98;
    letter-spacing:-4px;
}
.orion-hero h1 span{color:var(--orion-blue)}
.orion-hero p{
    max-width:650px;
    margin:25px 0 0;
    color:#505067;
    font-size:clamp(17px,2vw,21px);
    line-height:1.7;
}
.orion-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:34px;
}
.orion-trust-row{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    margin-top:40px;
    color:var(--orion-dark);
    font-size:14px;
    font-weight:700;
}
.orion-trust-row span{display:flex;align-items:center;gap:8px}
.orion-check{
    width:24px;
    height:24px;
    display:inline-grid;
    place-items:center;
    border-radius:50%;
    background:var(--orion-light);
    color:var(--orion-blue);
}

/* usp */
.orion-usp-bar{
    position:relative;
    z-index:5;
    margin-top:-35px;
}
.orion-usp-grid{
    display:grid;
    overflow:hidden;
    grid-template-columns:repeat(3,1fr);
    border:1px solid rgba(34,34,68,.08);
    border-radius:var(--orion-radius);
    background:#fff;
    box-shadow:var(--orion-shadow);
}
.orion-usp{
    display:flex;
    align-items:center;
    gap:17px;
    padding:27px;
}
.orion-usp+.orion-usp{border-left:1px solid rgba(34,34,68,.08)}
.orion-icon{
    width:52px;
    height:52px;
    display:grid;
    flex:0 0 auto;
    place-items:center;
    border-radius:17px;
    background:linear-gradient(145deg,var(--orion-dark),var(--orion-blue));
    color:#fff;
    font-size:24px;
}
.orion-usp strong{display:block;margin-bottom:4px;color:var(--orion-dark)}
.orion-usp small{color:var(--orion-muted);line-height:1.5}

/* categorieën */
.orion-heading-row{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:38px;
}
.orion-heading-row .orion-title{font-size:clamp(34px,5vw,53px)}
.orion-text-link{
    flex:0 0 auto;
    color:var(--orion-blue);
    font-weight:800;
}
.orion-category-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}
.orion-category{
    position:relative;
    min-height:285px;
    overflow:hidden;
    padding:28px;
    border:1px solid rgba(34,34,68,.09);
    border-radius:var(--orion-radius);
    background:linear-gradient(145deg,#fff,#f3f4fa);
    transition:transform .35s ease,box-shadow .35s ease;
}
.orion-category:hover{
    transform:translateY(-9px);
    box-shadow:0 24px 50px rgba(34,34,68,.15);
}
.orion-category-icon{
    width:65px;
    height:65px;
    display:grid;
    place-items:center;
    margin-bottom:52px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 12px 30px rgba(34,34,68,.12);
    color:var(--orion-dark);
    font-size:31px;
}
.orion-category h3{margin:0 0 11px;color:var(--orion-dark);font-size:22px}
.orion-category p{margin:0;color:var(--orion-muted);font-size:14px;line-height:1.65}
.orion-arrow{
    position:absolute;
    right:15px;
    bottom:13px;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--orion-dark);
    color:#fff;
}

/* services */
.orion-services{
    position:relative;
    background:var(--orion-dark);
    color:#fff;
}
.orion-services-inner{
    display:grid;
    align-items:center;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
}
.orion-services .orion-title{color:#fff;font-size:clamp(35px,5vw,56px)}
.orion-services .orion-subtitle{color:rgba(255,255,255,.7)}
.orion-service-list{
    display:grid;
    gap:14px;
    margin-top:32px;
}
.orion-service-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:15px 17px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
    background:rgba(255,255,255,.045);
}
.orion-service-item span{color:#bfc3ff}
.orion-service-visual{
    position:relative;
    min-height:510px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    background-image:
        linear-gradient(180deg,rgba(34,34,68,.10),rgba(34,34,68,.82)),
        var(--repair-image);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    box-shadow:0 30px 70px rgba(0,0,0,.3);
}
.orion-floating-card{
    position:absolute;
    right:22px;
    bottom:22px;
    left:22px;
    padding:25px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:22px;
    background:rgba(255,255,255,.13);
    backdrop-filter:blur(18px);
}
.orion-floating-card strong{display:block;margin-bottom:6px;font-size:21px}
.orion-floating-card p{margin:0;color:rgba(255,255,255,.73);line-height:1.6}

/* zakelijk */
.orion-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
}
.orion-split-image{
    min-height:500px;
    border-radius:30px;
    background:
        linear-gradient(
            135deg,
            rgba(34,34,68,.22),
            rgba(34,34,68,.58)
        ),
        url("images/officeview.jpg") center center / cover no-repeat;

    box-shadow:var(--orion-shadow);
}
.orion-split-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(35px,6vw,70px);
    border-radius:30px;
    background:var(--orion-light);
}
.orion-split-content .orion-title{font-size:clamp(34px,5vw,52px)}
.orion-points{display:grid;gap:13px;margin:27px 0 33px}
.orion-point{display:flex;gap:12px;line-height:1.55}
.orion-point i{
    width:24px;
    height:24px;
    display:grid;
    flex:0 0 auto;
    place-items:center;
    border-radius:50%;
    background:var(--orion-blue);
    color:#fff;
    font-style:normal;
}

/* cta */
.orion-cta{padding:0 0 88px}
.orion-cta-box{
    padding:clamp(42px,7vw,78px);
    border-radius:34px;
    background:linear-gradient(135deg,var(--orion-blue),var(--orion-dark));
    box-shadow:0 28px 70px rgba(34,34,68,.25);
    color:#fff;
}
.orion-cta-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}
.orion-cta h2{
    max-width:720px;
    margin:0;
    font-size:clamp(33px,5vw,56px);
    line-height:1.08;
}
.orion-cta p{
    max-width:650px;
    margin:17px 0 0;
    color:rgba(255,255,255,.73);
    font-size:17px;
    line-height:1.65;
}

/* reveal */
.orion-reveal{
    opacity:0;
    transform:translateY(42px);
    transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1);
}
.orion-reveal.orion-visible{opacity:1;transform:none}
.orion-delay-1{transition-delay:.08s}
.orion-delay-2{transition-delay:.16s}
.orion-delay-3{transition-delay:.24s}
.orion-delay-4{transition-delay:.32s}

@keyframes orionPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(53,169,91,.28)}
    50%{box-shadow:0 0 0 9px rgba(53,169,91,0)}
}
@keyframes orionProductIn{
    from{opacity:0;transform:translateX(20px) scale(.92)}
    to{opacity:1;transform:none}
}

@media(max-width:980px){
    .orion-original-grid{grid-template-columns:1fr}
    .orion-passport-card{
        min-height:auto;
        display:grid;
        grid-template-columns:260px 1fr;
    }
    .orion-passport-image{height:auto;min-height:240px;margin:20px}
    .orion-category-grid{grid-template-columns:repeat(2,1fr)}
    .orion-services-inner,.orion-split{grid-template-columns:1fr}
}
@media(max-width:720px){
    .orion-section{padding:65px 0}
    .orion-product-slider{
        height:560px;
        min-height:560px;
    }
    .orion-product-track{
        height:100%;
        min-height:0;
    }
    .orion-product-slide{
        min-height:0;
        grid-template-columns:1fr;
        gap:12px;
        padding:38px 42px 58px;
        text-align:center;
    }
    .orion-product-image{
        height:225px;
        order:-1;
    }
    .orion-product-slide p{margin-inline:auto}
    .orion-passport-card{display:flex}
    .orion-passport-image{height:190px;min-height:0}
    .orion-usp-grid{grid-template-columns:1fr}
    .orion-usp+.orion-usp{border-top:1px solid rgba(34,34,68,.08);border-left:0}
    .orion-heading-row,.orion-cta-content{align-items:flex-start;flex-direction:column}
    .orion-category-grid{grid-template-columns:1fr}
    .orion-trust-row{flex-direction:column;gap:13px}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
    .orion-reveal{opacity:1;transform:none}
}

.orion-placeholder { min-height: 120px; display: flex; align-items: center; justify-content: center; border: 2px dashed rgb(68, 68, 119); background: rgb(244, 246, 251); color: rgb(68, 68, 119); font-size: 18px; font-weight: 800; }

.orion-placeholder.footer { min-height: 180px; }

.orion-home { overflow: hidden; }

.orion-container { width: min(1180px, 100% - 36px); margin-inline: auto; }

.orion-section { padding: 88px 0px; }

.orion-original-top { padding: 32px 0px 18px; background: rgb(255, 255, 255); }

.orion-original-grid { display: grid; grid-template-columns: minmax(0px, 2.1fr) minmax(260px, 0.9fr); gap: 22px; align-items: stretch; }

.orion-product-slider { position: relative; height: 390px; min-height: 390px; overflow: hidden; border: 1px solid rgba(34, 34, 68, 0.08); border-radius: 26px; background: rgb(255, 255, 255); box-shadow: rgba(34, 34, 68, 0.1) 0px 16px 45px; }

.orion-product-track { position: relative; height: 100%; min-height: 0px; }

.orion-product-slide { position: absolute; background: rgb(255, 255, 255); inset: 0px; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 25px; padding: 38px 68px 42px 52px; opacity: 0; visibility: hidden; transform: translateX(35px); transition: opacity 0.65s, transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.65s; }

.orion-product-slide.is-active { opacity: 1; visibility: visible; transform: translateX(0px); }

.orion-product-copy { position: relative; z-index: 2; }

.orion-product-label { display: inline-flex; margin-bottom: 14px; padding: 8px 12px; border-radius: 999px; background: rgba(68, 68, 119, 0.1); color: var(--orion-blue); font-size: 12px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; }

.orion-product-slide h2 { margin: 0px; color: var(--orion-dark); font-size: clamp(28px, 4vw, 47px); line-height: 1.04; letter-spacing: -1.8px; }

.orion-product-slide p { max-width: 470px; margin: 17px 0px 24px; color: var(--orion-muted); font-size: 16px; line-height: 1.65; }

.orion-product-image { height: 285px; display: flex; align-items: center; justify-content: center; }

.orion-product-image img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(rgba(34, 34, 68, 0.14) 0px 22px 22px); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }

.orion-product-slide.is-active .orion-product-image img { animation: 0.8s ease 0s 1 normal both running orionProductIn; }

.orion-slider-arrow { position: absolute; z-index: 5; top: 50%; width: 42px; height: 42px; display: grid; place-items: center; border: 0px; border-radius: 50%; background: rgba(34, 34, 68, 0.92); box-shadow: rgba(34, 34, 68, 0.2) 0px 10px 25px; color: rgb(255, 255, 255); cursor: pointer; transform: translateY(-50%); transition: transform 0.2s, background 0.2s; }

.orion-slider-arrow:hover { background: var(--orion-blue); transform: translateY(-50%) scale(1.08); }

.orion-slider-prev { left: 5px; }

.orion-slider-next { right: 5px; }

.orion-slider-dots { position: absolute; z-index: 6; right: 0px; bottom: 17px; left: 0px; display: flex; justify-content: center; gap: 8px; }

.orion-slider-dot { width: 9px; height: 9px; padding: 0px; border: 0px; border-radius: 99px; background: rgba(34, 34, 68, 0.22); cursor: pointer; transition: width 0.25s, background 0.25s; }

.orion-slider-dot.is-active { width: 28px; background: var(--orion-blue); }

.orion-passport-card { position: relative; height: 390px; min-height: 390px; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: linear-gradient(145deg,var(--orion-blue),var(--orion-dark)); box-shadow: var(--orion-shadow); color: rgb(255, 255, 255); isolation: isolate; }

.orion-passport-card::before { position: absolute; z-index: -1; top: -90px; right: -70px; width: 230px; height: 230px; border: 35px solid rgba(255, 255, 255, 0.09); border-radius: 50%; content: ""; }

.orion-passport-image { height: 185px; margin: 22px 22px 0px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 18px; background: rgb(255, 255, 255); }

.orion-passport-image img { width: 100%; height: 100%; object-fit: contain; }

.orion-passport-content { flex: 1 1 0%; display: flex; flex-direction: column; padding: 21px 24px 24px; }

.orion-passport-content h3 { margin: 0px; font-size: 25px; line-height: 1.15; }

.orion-passport-content p { margin: 10px 0px 18px; color: rgba(255, 255, 255, 0.76); font-size: 14px; line-height: 1.55; }

.orion-passport-features { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }

.orion-passport-features span { padding: 6px 9px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 11px; font-weight: 800; }

.orion-passport-link { margin-top: auto; display: flex; min-height: 44px; align-items: center; justify-content: center; border-radius: 999px; background: rgb(255, 255, 255); color: var(--orion-dark); font-size: 14px; font-weight: 900; transition: transform 0.25s, box-shadow 0.25s; }

.orion-passport-link:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.18) 0px 12px 24px; }

.orion-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 15px; color: var(--orion-blue); font-size: 13px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }

.orion-eyebrow::before { width: 28px; height: 3px; border-radius: 99px; background: var(--orion-blue); content: ""; }

.orion-title { max-width: 760px; margin: 0px; color: var(--orion-dark); font-size: clamp(34px, 5vw, 62px); line-height: 1.02; letter-spacing: -2.5px; }

.orion-subtitle { max-width: 690px; margin: 22px 0px 0px; color: var(--orion-muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.7; }

.orion-btn { position: relative; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; padding: 0px 24px; border: 2px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 800; transition: transform 0.25s, box-shadow 0.25s; }

.orion-btn:hover { transform: translateY(-3px); }

.orion-btn-primary { background: var(--orion-dark); box-shadow: rgba(34, 34, 68, 0.24) 0px 14px 30px; color: rgb(255, 255, 255); }

.orion-btn-light { border-color: rgba(34, 34, 68, 0.15); background: rgba(255, 255, 255, 0.92); color: var(--orion-dark); }

.orion-hero { position: relative; min-height: 610px; display: flex; align-items: center; isolation: isolate; background: linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 42%,rgba(255,255,255,.18) 76%),
        var(--hero-image) center right/cover no-repeat; }

.orion-hero::before { position: absolute; z-index: -1; inset: 0px; background: radial-gradient(circle at 10% 20%, rgba(68, 68, 119, 0.13), transparent 28%), linear-gradient(135deg, transparent 55%, rgba(34, 34, 68, 0.08)); content: ""; }

.orion-hero-content { max-width: 710px; padding: 90px 0px; }

.orion-hero-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; padding: 9px 15px; border: 1px solid rgba(68, 68, 119, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.8); color: var(--orion-blue); font-size: 13px; font-weight: 800; }

.orion-status-dot { width: 9px; height: 9px; border-radius: 50%; background: rgb(53, 169, 91); animation: 2s ease 0s infinite normal none running orionPulse; }

.orion-hero h1 { margin: 0px; color: var(--orion-dark); font-size: clamp(44px, 7vw, 78px); line-height: 0.98; letter-spacing: -4px; }

.orion-hero h1 span { color: var(--orion-blue); }

.orion-hero p { max-width: 650px; margin: 25px 0px 0px; color: rgb(80, 80, 103); font-size: clamp(17px, 2vw, 21px); line-height: 1.7; }

.orion-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.orion-trust-row { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; color: var(--orion-dark); font-size: 14px; font-weight: 700; }

.orion-trust-row span { display: flex; align-items: center; gap: 8px; }

.orion-check { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--orion-light); color: var(--orion-blue); }

.orion-usp-bar { position: relative; z-index: 5; margin-top: -35px; }

.orion-usp-grid { display: grid; overflow: hidden; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(34, 34, 68, 0.08); border-radius: var(--orion-radius); background: rgb(255, 255, 255); box-shadow: var(--orion-shadow); }

.orion-usp { display: flex; align-items: center; gap: 17px; padding: 27px; }

.orion-usp + .orion-usp { border-left: 1px solid rgba(34, 34, 68, 0.08); }

.orion-icon { width: 52px; height: 52px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 17px; background: linear-gradient(145deg,var(--orion-dark),var(--orion-blue)); color: rgb(255, 255, 255); font-size: 24px; }

.orion-usp strong { display: block; margin-bottom: 4px; color: var(--orion-dark); }

.orion-usp small { color: var(--orion-muted); line-height: 1.5; }

.orion-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }

.orion-heading-row .orion-title { font-size: clamp(34px, 5vw, 53px); }

.orion-text-link { flex: 0 0 auto; color: var(--orion-blue); font-weight: 800; }

.orion-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.orion-category { position: relative; min-height: 285px; overflow: hidden; padding: 28px; border: 1px solid rgba(34, 34, 68, 0.09); border-radius: var(--orion-radius); background: linear-gradient(145deg, rgb(255, 255, 255), rgb(243, 244, 250)); transition: transform 0.35s, box-shadow 0.35s; }

.orion-category:hover { transform: translateY(-9px); box-shadow: rgba(34, 34, 68, 0.15) 0px 24px 50px; }

.orion-category-icon { width: 65px; height: 65px; display: grid; place-items: center; margin-bottom: 52px; border-radius: 20px; background: rgb(255, 255, 255); box-shadow: rgba(34, 34, 68, 0.12) 0px 12px 30px; color: var(--orion-dark); font-size: 31px; }

.orion-category h3 { margin: 0px 0px 11px; color: var(--orion-dark); font-size: 22px; }

.orion-category p { margin: 0px; color: var(--orion-muted); font-size: 14px; line-height: 1.65; }

.orion-arrow { position: absolute; right: 15px; bottom: 13px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--orion-dark); color: rgb(255, 255, 255); }

.orion-services { position: relative; background: var(--orion-dark); color: rgb(255, 255, 255); }

.orion-services-inner { display: grid; align-items: center; grid-template-columns: 1.05fr 0.95fr; gap: 70px; }

.orion-services .orion-title { color: rgb(255, 255, 255); font-size: clamp(35px, 5vw, 56px); }

.orion-services .orion-subtitle { color: rgba(255, 255, 255, 0.7); }

.orion-service-list { display: grid; gap: 14px; margin-top: 32px; }

.orion-service-item { display: flex; align-items: center; gap: 14px; padding: 15px 17px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 15px; background: rgba(255, 255, 255, 0.043); }

.orion-service-item span { color: rgb(191, 195, 255); }

.orion-service-visual { position: relative; min-height: 510px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 30px; background-image: linear-gradient(180deg,rgba(34,34,68,.10),rgba(34,34,68,.82)),
        var(--repair-image); background-position: center center; background-size: cover; background-repeat: no-repeat; box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 70px; }

.orion-floating-card { position: absolute; right: 22px; bottom: 22px; left: 22px; padding: 25px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 22px; background: rgba(255, 255, 255, 0.13); backdrop-filter: blur(18px); }

.orion-floating-card strong { display: block; margin-bottom: 6px; font-size: 21px; }

.orion-floating-card p { margin: 0px; color: rgba(255, 255, 255, 0.73); line-height: 1.6; }

.orion-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.orion-split-image { min-height: 500px; border-radius: 30px; background: linear-gradient(135deg, rgba(34, 34, 68, 0.22), rgba(34, 34, 68, 0.58)), url("images/officeview.jpg") center center / cover no-repeat; box-shadow: var(--orion-shadow); }

.orion-split-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(35px, 6vw, 70px); border-radius: 30px; background: var(--orion-light); }

.orion-split-content .orion-title { font-size: clamp(34px, 5vw, 52px); }

.orion-points { display: grid; gap: 13px; margin: 27px 0px 33px; }

.orion-point { display: flex; gap: 12px; line-height: 1.55; }

.orion-point i { width: 24px; height: 24px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--orion-blue); color: rgb(255, 255, 255); font-style: normal; }

.orion-cta { padding: 0px 0px 88px; }

.orion-cta-box { padding: clamp(42px, 7vw, 78px); border-radius: 34px; background: linear-gradient(135deg,var(--orion-blue),var(--orion-dark)); box-shadow: rgba(34, 34, 68, 0.25) 0px 28px 70px; color: rgb(255, 255, 255); }

.orion-cta-content { display: flex; align-items: center; justify-content: space-between; gap: 35px; }

.orion-cta h2 { max-width: 720px; margin: 0px; font-size: clamp(33px, 5vw, 56px); line-height: 1.08; }

.orion-cta p { max-width: 650px; margin: 17px 0px 0px; color: rgba(255, 255, 255, 0.73); font-size: 17px; line-height: 1.65; }

.orion-reveal { opacity: 0; transform: translateY(42px); transition: opacity 0.8s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }

.orion-reveal.orion-visible { opacity: 1; transform: none; }

.orion-delay-1 { transition-delay: 0.08s; }

.orion-delay-2 { transition-delay: 0.16s; }

.orion-delay-3 { transition-delay: 0.24s; }

.orion-delay-4 { transition-delay: 0.32s; }

@media (max-width: 980px) {
  .orion-original-grid { grid-template-columns: 1fr; }
  .orion-passport-card { min-height: auto; display: grid; grid-template-columns: 260px 1fr; }
  .orion-passport-image { height: auto; min-height: 240px; margin: 20px; }
  .orion-category-grid { grid-template-columns: repeat(2, 1fr); }
  .orion-services-inner, .orion-split { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .orion-section { padding: 52px 0px; }
  .orion-original-top { padding-bottom: 8px; }
  .orion-product-slider { height: 620px; min-height: 620px; }
  .orion-product-track { height: 100%; min-height: 0px; }
  .orion-product-slide { min-height: 0px; grid-template-columns: 1fr; gap: 12px; padding: 38px 42px 58px; text-align: center; }
  .orion-product-image { height: 225px; order: -1; }
  .orion-product-slide p { margin-inline: auto; }
  .orion-passport-card { display: flex; }
  .orion-passport-image { height: 190px; min-height: 0px; }
  .orion-services-inner { gap: 30px; }
  .orion-service-visual { min-height: 300px; }
  .orion-floating-card { right: 16px; bottom: 16px; left: 16px; padding: 20px; }
  .orion-split-image { display: none; }
  .orion-split { gap: 0px; }
  .orion-usp-grid { grid-template-columns: 1fr; }
  .orion-usp + .orion-usp { border-top: 1px solid rgba(34, 34, 68, 0.08); border-left: 0px; }
  .orion-heading-row, .orion-cta-content { align-items: flex-start; flex-direction: column; }
  .orion-category-grid { grid-template-columns: 1fr; }
  .orion-trust-row { flex-direction: column; gap: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .orion-reveal { opacity: 1; transform: none; }
}

.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 0px; background-color: rgb(41, 41, 79); background-image: linear-gradient(115deg, rgba(34, 34, 68, 0.42), rgba(68, 68, 119, 0.2)), url("https://www.orioncomputerworld.nl/images/xmail-hosting.jpg"); color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; isolation: isolate; }

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

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

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

.ocw-xmail-glass__container { position: relative; z-index: 2; width: min(1180px, 100% - 38px); margin-inline: auto; display: grid; grid-template-columns: 1.02fr 0.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, 0.15); border-radius: 999px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); color: rgb(215, 215, 255); 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: rgb(99, 210, 140); box-shadow: rgba(99, 210, 140, 0.13) 0px 0px 0px 7px; animation: 2s ease-in-out 0s infinite normal none running ocwXmailGlassPulse; }

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

.ocw-xmail-glass__content h2 strong { display: block; color: rgb(201, 201, 255); font-weight: 800; }

.ocw-xmail-glass__content > p { max-width: 620px; margin: 24px 0px 0px; color: rgba(255, 255, 255, 0.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: 0px 24px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 900; transition: transform 0.25s, background 0.25s, box-shadow 0.25s; }

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

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

.ocw-xmail-glass__btn--secondary { border-color: rgba(255, 255, 255, 0.17); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); color: rgb(255, 255, 255) !important; }

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

.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, 0.75); font-size: 13px; font-weight: 800; }

.ocw-xmail-glass__trust svg { width: 19px; height: 19px; color: rgb(201, 201, 255); }

.ocw-xmail-glass__panel { position: relative; overflow: hidden; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 28px; background: rgba(255, 255, 255, 0.1); box-shadow: rgba(0, 0, 0, 0.26) 0px 30px 80px, rgba(255, 255, 255, 0.16) 0px 1px 0px inset; 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, 0.043); 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: rgb(210, 210, 255); font-size: 11px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; }

.ocw-xmail-glass__panel h3 { margin: 0px; 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, 0.13); border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.78); font-size: 11px; font-weight: 900; }

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

.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, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.08); transition: transform 0.3s, background 0.3s, border-color 0.3s; }

.ocw-xmail-glass__cards article:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.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, 0.14); border-radius: 14px; background: rgba(255, 255, 255, 0.1); color: rgb(211, 211, 255); }

.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: rgb(201, 201, 255); font-size: 10px; font-weight: 900; letter-spacing: 0.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, 0.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, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.72); font-size: 10px; font-weight: 800; }

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

.ocw-xmail-glass.js-enabled .ocw-xmail-glass__reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.75s, transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1); }

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

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

@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, 0.12), rgba(255, 255, 255, 0.05)); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(22px) saturate(180%); }
  .ocw-xmail-glass__content h2, .ocw-xmail-glass__content p { text-shadow: rgba(0, 0, 0, 0.35) 0px 2px 8px; }
  .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 0px; background-position: center 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: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ocw-xmail-glass__reveal { opacity: 1 !important; transform: none !important; }
}
.orion-reveal {
    opacity: 0;
    transform: translateY(70px) scale(0.97);
    transition:
      opacity 1.1s ease,
      transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
  }
  
  .orion-reveal.orion-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  /* Liggende telefoonstand */
@media (min-width: 721px) and (max-width: 1099px) and (max-height: 600px) {
    #ocwXmailGlass + .orion-section {
      padding-top: 40px;
      padding-bottom: 40px;
    }
  
    #ocwXmailGlass + .orion-section .orion-split-image {
      display: none;
    }
  
    #ocwXmailGlass + .orion-section .orion-split {
      gap: 0;
    }
  }