/* Home solutions showcase */
.solutions-section {
    padding-top: clamp(90px, 8vw, 125px);
    padding-bottom: clamp(95px, 9vw, 145px);
}

.home-solutions-head { margin-bottom: clamp(48px, 5vw, 76px); }
.home-solutions-head h2 { max-width: 760px; font-size: clamp(42px, 4.15vw, 64px); font-weight: 400; line-height: 1.02; }
.home-solutions-head > div:last-child { align-self: center; }
.home-solutions-head > div:last-child p { font-size: 16px; line-height: 1.75; }

.home-solutions-carousel { position: relative; }

.home-solutions-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(390px, 31.5vw, 520px);
    gap: 14px;
    overflow-x: auto;
    margin-right: calc(var(--page-gutter) * -1);
    padding: 0 var(--page-gutter) 10px 0;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.home-solutions-grid::-webkit-scrollbar { display: none; }

.home-solution-card {
    --image-x: 50%;
    --image-y: 50%;
    --image-scale: 1.01;
    --image-hover: 1.055;
    --image-origin: 50% 50%;
    position: relative;
    min-width: 0;
    min-height: 535px;
    display: grid;
    grid-template-rows: 260px 1fr;
    overflow: hidden;
    background: #0a0c0d;
    color: #fff;
    border: 1px solid #171a1b;
    box-shadow: 0 18px 45px rgba(12, 15, 16, .08);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.home-solution-card--dedicated-servers { --image-x: 68%; }
.home-solution-card--cloud-edge { --image-x: 55%; }
.home-solution-card--connectivity { --image-x: 42%; }
.home-solution-card--ddos-protection { --image-x: 58%; }
.home-solution-card--managed-services { --image-x: 54%; }
.home-solution-card--mvx-shield { --image-x: 55%; }
.home-solution-card--software-development { --image-x: 58%; }

.home-solution-card:hover {
    transform: translateY(-7px);
    border-color: #343839;
    box-shadow: 0 28px 70px rgba(12, 15, 16, .2);
}

.home-solution-visual { position: relative; overflow: hidden; background: #101314; border-bottom: 1px solid rgba(255, 255, 255, .09); }
.home-solution-visual::before,
.home-solution-visual::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.home-solution-visual::before { inset: 0; background: linear-gradient(180deg, rgba(5, 7, 8, .08), rgba(5, 7, 8, .82)), linear-gradient(90deg, rgba(255, 30, 44, .12), transparent 45%); }
.home-solution-visual::after { right: 0; bottom: 0; width: 42%; height: 1px; background: linear-gradient(90deg, transparent, #ff2634); box-shadow: 0 0 15px rgba(255, 38, 52, .45); }
.home-solution-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--image-x) var(--image-y); filter: grayscale(1) contrast(1.08) brightness(.62); transform: scale(var(--image-scale)); transform-origin: var(--image-origin); transition: filter .55s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.home-solution-card:hover .home-solution-visual img { filter: grayscale(.25) contrast(1.05) brightness(.72); transform: scale(var(--image-hover)); }

.home-solution-index { position: absolute; z-index: 2; top: 22px; left: 24px; color: rgba(255, 255, 255, .82); font-size: 10px; font-weight: 600; letter-spacing: .15em; }
.home-solution-visual-label { position: absolute; z-index: 2; left: 24px; bottom: 21px; display: flex; align-items: center; gap: 8px; color: #afb4b5; font-size: 8px; font-weight: 600; letter-spacing: .14em; }
.home-solution-visual-label i { width: 6px; height: 6px; border-radius: 50%; background: #39cf71; box-shadow: 0 0 0 4px rgba(57, 207, 113, .1); }
.home-solution-icon { position: absolute; z-index: 2; top: 19px; right: 21px; width: 52px; height: 52px; display: grid; place-items: center; color: #ff2634; background: rgba(5, 7, 8, .68); border: 1px solid rgba(255, 255, 255, .13); backdrop-filter: blur(10px); }
.home-solution-icon .solution-icon-svg { width: 25px; height: 25px; stroke-width: 1.45; }

.home-solution-body { min-width: 0; display: flex; flex-direction: column; padding: 28px 29px 25px; }
.home-solution-title { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.home-solution-title h3 { margin: 0; color: #f5f6f6 !important; font-size: clamp(20px, 1.6vw, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.home-solution-title > span { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; color: #7b8284; border: 1px solid #34393a; font-size: 12px; transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease; }
.home-solution-card:hover .home-solution-title > span { color: #fff; border-color: #ff2634; background: #ff2634; transform: translate(2px, -2px); }
.section-light .home-solution-body > p { margin: 17px 0 27px; color: #aeb3b4; font-size: 13px; line-height: 1.7; }
.home-solution-body footer { display: grid; grid-template-columns: minmax(72px, auto) 1fr; gap: 16px; align-items: center; margin-top: auto; padding-top: 19px; border-top: 1px solid rgba(255, 255, 255, .1); }
.home-solution-body footer strong { color: #ff3340 !important; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.home-solution-body footer span { color: #7e8587; font-size: 10px; line-height: 1.45; }

.home-solutions-controls {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) auto auto;
    align-items: center;
    gap: 22px;
    margin-top: 24px;
}

.home-solutions-progress {
    width: min(100%, 520px);
    height: 2px;
    overflow: hidden;
    background: #d4d2cc;
}

.home-solutions-progress span {
    width: 100%;
    height: 100%;
    display: block;
    background: #ff2634;
    transform: scaleX(var(--carousel-progress, .1667));
    transform-origin: left center;
    transition: transform .28s ease;
}

.home-solutions-count {
    color: #8b8e8e;
    font-size: 10px;
    letter-spacing: .12em;
    white-space: nowrap;
}

.home-solutions-count b { color: #17191a; font-size: 12px; font-weight: 600; }
.home-solutions-arrows { display: flex; gap: 8px; }

.home-solutions-arrows button {
    width: 44px;
    height: 44px;
    border: 0;
    background: #0b0d0e;
    color: #fff;
    font-size: 17px;
    transition: background-color .2s ease, opacity .2s ease;
}

.home-solutions-arrows button:hover:not(:disabled) { background: #ff2634; }
.home-solutions-arrows button:disabled { opacity: .24; cursor: default; }

.home-solutions-grid:focus-visible {
    outline: 2px solid rgba(255, 38, 52, .45);
    outline-offset: 5px;
}

@media (max-width: 700px) {
    .solutions-section { padding-top: 72px; padding-bottom: 78px; overflow: hidden; }
    .home-solutions-head { margin-bottom: 38px; }
    .home-solutions-head h2 { font-size: clamp(36px, 10.5vw, 48px); }
    .home-solutions-grid {
        grid-auto-columns: min(84vw, 350px);
        gap: 12px;
        margin-right: calc(var(--page-gutter) * -1);
        margin-left: calc(var(--page-gutter) * -1);
        padding: 0 var(--page-gutter) 20px;
        scroll-padding-left: var(--page-gutter);
    }
    .home-solution-card { min-height: 500px; grid-template-rows: 235px 1fr; scroll-snap-align: start; }
    .home-solution-body { padding: 25px 24px 23px; }
    .home-solution-title h3 { font-size: 22px; }
    .home-solutions-controls { grid-template-columns: minmax(70px, 1fr) auto auto; gap: 12px; margin-top: 18px; }
    .home-solutions-arrows button { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-solution-card,
    .home-solution-visual img,
    .home-solution-title > span,
    .home-solutions-progress span { transition: none; }
    .home-solutions-grid { scroll-behavior: auto; }
}