/* XpertLab Our Solutions - frontend */
.xlos-section{
    --xlos-heading:#0b1d3a;
    --xlos-sub:#6b7280;
    --xlos-prod-title:#0b1d3a;
    --xlos-prod-sub:#5b8def;
    --xlos-feature:#374151;
    --xlos-check:#22c55e;
    --xlos-btn-bg:#3db4f2;
    --xlos-btn-color:#ffffff;
    --xlos-section-bg:#ffffff;
    position:relative;
    width:100%;
    padding:64px 20px 80px;
    background:var(--xlos-section-bg);
    box-sizing:border-box;
    font-family:inherit;
    overflow:hidden;
    scroll-margin-top:80px;
}
.xlos-section.xlos-has-gradient{
    background:transparent;
    overflow:visible;
}
.xlos-section *,
.xlos-section *::before,
.xlos-section *::after{ box-sizing:border-box; }

/* ---------- Background blobs ---------- */
.xlos-blob{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    transform:translate(-50%, -50%);
}
.xlos-blob-1{
    width:146px;
    height:146px;
    top:26%;
    left:48%;
    background:#B51B5A;
    filter:blur(185px);
    opacity:1;
}
.xlos-blob-2{
    width:146px;
    height:146px;
    top:55%;
    left:12%;
    background:#35B6FF;
    filter:blur(185px);
    opacity:1;
}
.xlos-blob-3{
    width:226px;
    height:226px;
    top:80%;
    left:78%;
    background:#87D4FF;
    filter:blur(152px);
    opacity:1;
}

.xlos-inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; text-align:center; }

/* ---------- Scroll reveal (premium "unveil") ----------
   Elements start slightly lowered, blurred and scaled-down, then rise into
   focus with a slow, expo-decelerated ease as the section enters the viewport.
   The staggered delays make the section assemble itself piece by piece. */
.xlos-reveal{
    opacity:0;
    transform:translate3d(0, 56px, 0) scale(.965);
    filter:blur(16px);
    will-change:opacity, transform, filter;
    transition:
        opacity 1.6s cubic-bezier(.16, 1, .3, 1),
        transform 1.6s cubic-bezier(.16, 1, .3, 1),
        filter 1.6s cubic-bezier(.16, 1, .3, 1);
}
.xlos-reveal.is-revealed{
    opacity:1;
    transform:translate3d(0, 0, 0) scale(1);
    filter:blur(0);
}
/* Staggered entrance order */
.xlos-title.xlos-reveal  { transition-delay:.05s; }
.xlos-sub.xlos-reveal    { transition-delay:.22s; }
.xlos-slider.xlos-reveal { transition-delay:.40s; }
.xlos-cta.xlos-reveal    { transition-delay:.62s; }

@media (prefers-reduced-motion: reduce){
    .xlos-reveal{
        opacity:1;
        transform:none;
        filter:none;
        transition:none;
    }
}

/* Heading */
.xlos-head{ margin-bottom:51px; }
.xlos-title{
    font-family:'Syne', sans-serif;
    font-size:40px;
    line-height:1.2;
    font-weight:700;
    color:#191919;
    margin:0 0 15px;
}
.xlos-sub{
    font-family:'Google Sans', sans-serif;
    font-size:22px;
    color:#778AA9;
    margin:0;
}

/* ---------- Slider ---------- */
.xlos-slider{ position:relative; max-width:1040px; margin:0 auto; }

.xlos-stage{
    position:relative;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Devices track */
.xlos-devices-track{
    display:grid;
    grid-template-columns:100%;
    width:75%;
    position:relative;
    z-index:3;
    text-align:center;
}
.xlos-devices-img{
    grid-area:1 / 1;
    justify-self:center;
    align-self:end;
    display:block;
    width:min(680px, 88%);
    height:auto;
    margin-left:auto;
    margin-right:auto;
    opacity:0;
    visibility:hidden;
    will-change:opacity, transform;
    transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.xlos-devices-img.is-active{
    opacity:1;
    visibility:visible;
    transition:opacity .5s ease, transform .5s ease, visibility 0s linear 0s;
}

/* Podium wrap */
.xlos-podium-wrap{
    position:relative;
    width:100%;
    margin-top:-100px;
    display:flex;
    justify-content:center;
    z-index:2;
}
.xlos-podium-img{
    display:block;
    /* The podium artwork is ~1069px wide. Without a cap it rendered at its
       natural size on every screen narrower than that — between 601px and the
       desktop layout it ran off both sides of the viewport, so its front face
       (where the product card is anchored) fell outside the visible area and
       the card ended up floating over the cut-off image. Scaling it to the
       slider keeps the whole podium on screen and the card on its face. */
    width:100%;
    max-width:100%;
    height:auto;
    position:relative;
    z-index:1;
    user-select:none;
    pointer-events:none;
}
.xlos-podium-placeholder{
    width:min(880px, 96%);
    height:180px;
}

/* Cards track — overlays the front face of the podium on desktop */
.xlos-cards-track{
    position:absolute;
    left:0; right:0;
    bottom:20%;
    display:grid;
    grid-template-columns:100%;
    z-index:4;
    pointer-events:none;
    text-align:center;
}
.xlos-product{
    grid-area:1 / 1;
    justify-self:center;
    align-self:center;
    width:min(700px, 86%);
    margin-left:auto;
    margin-right:auto;
    padding:12px 18px;
    background:transparent;
    border-radius:14px;
    opacity:0;
    visibility:hidden;
    will-change:opacity, transform;
    transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
    pointer-events:none;
}
.xlos-product.is-active{
    opacity:1;
    visibility:visible;
    transition:opacity .5s ease, transform .5s ease, visibility 0s linear 0s;
    pointer-events:auto;
}

/* ---------- Slide animations ---------- */
.xlos-slider--anim-fade-up .xlos-devices-img,
.xlos-slider--anim-fade-up .xlos-product{
    transform:translateY(14px);
}
.xlos-slider--anim-fade-up .xlos-devices-img.is-active,
.xlos-slider--anim-fade-up .xlos-product.is-active{
    transform:translateY(0);
}
.xlos-slider--anim-zoom .xlos-devices-img,
.xlos-slider--anim-zoom .xlos-product{
    transform:scale(.92);
    transform-origin:center center;
}
.xlos-slider--anim-zoom .xlos-devices-img.is-active,
.xlos-slider--anim-zoom .xlos-product.is-active{
    transform:scale(1);
}
.xlos-slider--anim-slide .xlos-devices-img,
.xlos-slider--anim-slide .xlos-product{
    transform:translateX(48px);
}
.xlos-slider--anim-slide .xlos-devices-img.is-active,
.xlos-slider--anim-slide .xlos-product.is-active{
    transform:translateX(0);
}
.xlos-slider--anim-flip .xlos-devices-img,
.xlos-slider--anim-flip .xlos-product{
    transform:perspective(900px) rotateY(18deg);
    transform-origin:center center;
}
.xlos-slider--anim-flip .xlos-devices-img.is-active,
.xlos-slider--anim-flip .xlos-product.is-active{
    transform:perspective(900px) rotateY(0deg);
}
.xlos-slider--anim-blur .xlos-devices-img,
.xlos-slider--anim-blur .xlos-product{
    filter:blur(8px);
    transform:scale(1.02);
}
.xlos-slider--anim-blur .xlos-devices-img.is-active,
.xlos-slider--anim-blur .xlos-product.is-active{
    filter:blur(0);
    transform:scale(1);
}

/* Product card internals */
.xlos-product__top{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin-bottom:14px;
}
/* Logo sits on the podium with no tile behind it — the blue rounded square and
   its padding are gone. The box is now square and exactly the size of the logo,
   so the mark is centred in it on both axes and the icon+text group stays
   optically centred (the old 44px box holding a 50px image overflowed to one
   side and pulled the group off-centre). */
.xlos-product__icon{
    flex:0 0 auto;
    width:50px;
    height:50px;
    padding:0;
    background:transparent;
    border-radius:0;
    display:inline-flex; align-items:center; justify-content:center;
}
.xlos-product__icon svg,
.xlos-product__icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    display:block;
}
.xlos-product__meta{ text-align:left; }
.xlos-product__title{
    margin:0; font-size:20px; font-weight:700;
    color:var(--xlos-prod-title); line-height:1.2;
}
/* Product subtitle — design spec typography: Google Sans 400, 18px,
   line-height 100%, no letter-spacing, #778AA9. Set directly here (rather than
   through --xlos-prod-sub) for the same reason .xlos-sub above is: these are
   fixed design values, not themeable ones. The 18px is the desktop figure; the
   breakpoints below step it down, since at card scale on a tablet or phone it
   reads far too large next to the title. */
.xlos-product__subtitle{
    margin:2px 0 0;
    font-family:'Google Sans', sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:100%;
    letter-spacing:0;
    color:#778AA9;
}

/* Features */
.xlos-features{
    list-style:none; padding:0; margin:0;
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;
}
.xlos-feature{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--xlos-feature); font-size:14px !important; font-weight:600 !important;
}
.xlos-feature__check{
    width:18px; height:18px;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--xlos-check); flex:0 0 18px;
}
.xlos-feature__check svg{ width:18px; height:18px; display:block; }

/* Arrows */
.xlos-arrow{
    position:absolute;
    top:42%;
    transform:translateY(-50%);
    width:42px; height:42px;
    border-radius:50%;
    border:none;
    background:#fff;
    color:#0b1d3a;
    box-shadow:0 8px 20px rgba(15,23,42,.12);
    cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    z-index:6;
    transition:transform .2s ease, box-shadow .2s ease;
}
.xlos-arrow:hover{ transform:translateY(-50%) scale(1.05); box-shadow:0 12px 24px rgba(15,23,42,.18); }
.xlos-arrow svg{ width:20px; height:20px; }
.xlos-arrow--prev{ left:6px; }
.xlos-arrow--next{ right:6px; }

/* Dots */
.xlos-dots{
    display:flex; justify-content:center; gap:8px;
    margin-top:14px;
}
.xlos-dot{
    width:9px; height:9px; border-radius:50%;
    border:none; padding:0;
    background:rgba(11,29,58,.25);
    cursor:pointer;
    transition:background .2s ease, transform .2s ease, width .2s ease;
}
.xlos-dot.is-active{
    background:var(--xlos-btn-bg);
    width:22px; border-radius:6px;
}

/* CTA */
/* Negative top pulls the button up into the empty podium space below the
   absolutely-positioned card (desktop/tablet), closing the gap to match the
   design. Mobile resets this below since the card flows in normal order. */
.xlos-cta{ margin-top:-50px; text-align:center; }
.xlos-btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 32px; border-radius:999px;
    background:linear-gradient(to right, var(--xlos-btn-bg), color-mix(in srgb, var(--xlos-btn-bg) 30%, #ffffff));
    color:#0b1d3a;
    text-decoration:none; font-weight:700; font-size:15px;
    border:1px solid rgba(255,255,255,0.55);
    box-shadow:0 4px 18px rgba(61,180,242,.18), inset 0 1px 0 rgba(255,255,255,0.45);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    letter-spacing:0.01em;
}
.xlos-btn:hover,
.xlos-btn:focus{
    transform:translateY(-2px);
    filter:brightness(1.05);
    color:#0b1d3a;
    box-shadow:0 8px 24px rgba(61,180,242,.28), inset 0 1px 0 rgba(255,255,255,0.5);
    text-decoration:none;
}
.xlos-btn svg{ width:18px; height:18px; }

/* Up to 1024px - Tablet */
@media (max-width: 1024px) {
    .xlos-head               { margin-bottom: 32px; }
    .xlos-devices-img        { width: min(560px, 86%); }

    /* Overlap fix (iPad Air 820px, Asus Zenbook Fold 853px) — done structurally
       this time. Absolutely positioning the card and anchoring its BOTTOM to the
       podium means the card grows UPWARDS into the device images, and whether it
       reaches them depends on the card's text height versus the rendered podium
       height — two numbers that scale at completely different rates, which is
       why tuning `bottom:%` never held (and the 2-per-row features below make the
       card taller again).
       So on tablets the card leaves absolute positioning and flows underneath the
       podium image, pulled back up onto the podium's front face by a negative
       margin. The card's top edge is now pinned to a fixed point on the podium
       and it grows DOWNWARD, so it can never touch the devices no matter how many
       feature rows it has — and because it is in flow, it pushes the dots and the
       CTA down instead of colliding with them either.
       The pull is a percentage, which resolves against the wrap's WIDTH — the
       podium art scales with width too, so this lifts the card by a constant
       fraction of the podium's height at every tablet size (≈60% of it, landing
       the card at the top of the front face). */
    /* The -60px overlap is what sinks the devices into the podium's top surface
       so they read as standing ON it. It was cut back while the card was still
       bottom-anchored (the card needed the clearance) and the devices ended up
       hovering above the podium — with the card now pinned to the podium image
       and growing downward, the device/podium overlap no longer has any bearing
       on the card, so it goes back to the value the artwork wants. */
    .xlos-podium-wrap {
        margin-top: -60px;
        flex-direction: column;
        align-items: center;
        min-height: 0;
    }
    .xlos-cards-track {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        pointer-events: auto;
        margin-top: -20%;
    }

    /* Tighten the run-up to the "Explore All Solutions" button. No negative
       margin on the CTA: the dots have no bottom margin, so pulling the button up
       would drag it over them. */
    .xlos-dots               { margin-top: 2px; }
    .xlos-cta                { margin-top: 0; }
    .xlos-blob-1 { width: 100px; height: 100px; filter: blur(130px); }
    .xlos-blob-2 { width: 100px; height: 100px; filter: blur(130px); }
    .xlos-blob-3 { width: 160px; height: 160px; filter: blur(110px); }

    .xlos-product            { width: min(700px, 92%); padding: 10px 16px; }
    .xlos-product__top       { gap: 10px; margin-bottom: 10px; }
    .xlos-product__icon      { width: 44px; height: 44px; }
    .xlos-product__title     { font-size: 18px; }
    .xlos-product__subtitle  { font-size: 16px; }

    /* Key features: exactly two per row. Flex-wrap packed them by measured
       width, so a row could hold two long labels or three short ones and the
       block read as ragged — on iPad Air it came out 2 / 3 / 1. A 2-column grid
       makes every row the same, and the columns are left-aligned as a pair
       (centred as a block) so the ticks line up like a table. */
    .xlos-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 20px;
        justify-items: start;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }
    .xlos-feature            { font-size: 13px !important; }
    .xlos-feature__check,
    .xlos-feature__check svg { width: 16px; height: 16px; }
    .xlos-feature__check     { flex: 0 0 16px; }
}

/* Up to 768px - Tablet */
@media (max-width: 768px) {
    .xlos-section            { padding: 56px 16px 56px; }
    .xlos-head               { margin-bottom: 36px; }
    .xlos-devices-img        { width: min(400px, 88%); }
    /* Same as the band above: back to the overlap the artwork is drawn for. */
    .xlos-podium-wrap        { margin-top: -40px; }
    .xlos-podium-placeholder { height: 150px; }
    /* Pulled up a little further than the 1024px band: the podium art gets
       shorter with the viewport while the card's text does not, so the card needs
       to start higher on the face to still finish inside it. */
    .xlos-cards-track        { margin-top: -23%; }
    .xlos-product            { width: min(700px, 94%); padding: 8px 14px; }
    .xlos-product__top       { gap: 8px; margin-bottom: 8px; }
    .xlos-product__icon      { width: 38px; height: 38px; }
    .xlos-product__title     { font-size: 16px; }
    .xlos-product__subtitle  { font-size: 15px; }
    .xlos-features           { gap: 6px 14px; max-width: 400px; }
    .xlos-feature            { font-size: 12px !important; }
    .xlos-feature__check,
    .xlos-feature__check svg { width: 14px; height: 14px; }
    .xlos-feature__check     { flex: 0 0 14px; }
    .xlos-arrow              { width: 36px; height: 36px; }
    .xlos-arrow svg          { width: 16px; height: 16px; }
    .xlos-blob-1 { width: 70px;  height: 70px;  filter: blur(90px); }
    .xlos-blob-2 { width: 70px;  height: 70px;  filter: blur(90px); }
    .xlos-blob-3 { width: 110px; height: 110px; filter: blur(75px); }
}

/* Up to 600px - Mobile */
@media (max-width: 600px) {

    .xlos-section { padding: 32px 14px 44px; }
    .xlos-inner   { max-width: 100%; padding: 0; }
    .xlos-head    { margin-bottom: 28px; }

    /* Keep the devices standing INSIDE the podium at every mobile width.
       The two images used to be measured against different boxes: the podium is
       `min(260px, 88%)` of the full-width wrap, while the devices image was
       `min(280px, 88%)` of the devices-track — and that track is only 75% as
       wide. The percentages therefore crossed over on the wider phones: at
       430px (iPhone 14 Pro Max) the devices came out 265px against a 260px
       podium, and at 540px (Surface Duo) 280px against 260px — so the devices
       hung over both edges. iPhone SE stayed correct only because its narrower
       viewport kept the percentage below the cap.
       Giving the track the same 100% basis as the podium wrap makes both
       widths measure from one box, and the devices are then set to a fixed
       ~77% of the podium (200/260px, 68%/88%) so the ratio holds at any width
       instead of depending on which cap happens to win. */
    .xlos-devices-track { width: 100%; }
    .xlos-devices-img   { width: min(200px, 68%); }

    /* Remove negative overlap — stack vertically */
    .xlos-podium-wrap {
        margin-top: -20px;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-height: 0; /* reset the tablet clearance guard — card flows below */
    }

    .xlos-podium-img         { width: min(260px, 88%); height: auto; }
    .xlos-podium-placeholder { height: 16px; }

    /* Cards flow below the podium in normal document order — clear of it, not
       pulled up onto its face like the tablet band does. */
    .xlos-cards-track {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
        pointer-events: auto;
        margin-top: 10px;
    }

    .xlos-dots { margin-top: 4px; }
    .xlos-cta  { margin-top: 15px; }

    .xlos-product {
        /* Line up with .xlos-podium-img above it instead of stretching edge-to-edge */
        width: min(260px, 88%);
        max-width: min(260px, 88%);
        padding: 16px 14px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 14px;
        box-shadow: 0 4px 20px rgba(11, 29, 58, 0.09);
        text-align: left;
    }

    .xlos-product__top      { justify-content: flex-start; }
    .xlos-product__icon     { width: 34px; height: 34px; }
    .xlos-product__subtitle { font-size: 14px; }

    /* Back to the single-column list — the tablet band above switches
       .xlos-features to a 2-column grid, and `display` is inherited down
       through the narrower media queries, so it has to be reset here or the
       phone card would keep the two columns too. */
    .xlos-features {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        max-width: none;
    }

    .xlos-arrow     { top: 16%; width: 30px; height: 30px; }
    .xlos-arrow svg { width: 12px; height: 12px; }
}

/* Up to 380px - Mobile */
@media (max-width: 380px) {
    /* Same ~77%-of-podium ratio as above, one step smaller. */
    .xlos-devices-img { width: min(180px, 66%); }
    .xlos-product     { padding: 14px 12px; }
}