:root{ --gap:30px }
    /* *{box-sizing:border-box;margin:0;padding:0} */
    /* html,body{height:100%} */
    /* body{
        background:#0b0b0b;color:#fff;
        font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif;
        display:flex;align-items:center;justify-content:center;padding:36px;
    }
    .container{width:100%;max-width:1200px}
    h1{text-align:center;font-size:34px;margin-bottom:28px;font-weight:600} */ */


.container{width:100%;max-width:1200px}

/* viewport + wrapper: ровно 3 карточки видны */
.cards-viewport{position:relative;overflow:hidden;padding:10px 0}
.cards-wrapper{
    display:flex;gap:var(--gap);
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;scrollbar-width:none;padding:0 10px;
    user-select:none;cursor:grab;
}
.cards-wrapper::-webkit-scrollbar{display:none}

.card{
    flex:0 0 calc((100% - (var(--gap) * 2)) / 3); /* ровно 3 в окне */
    min-height:380px;border-radius:20px;padding:44px 30px;
    background:linear-gradient(135deg,#111,#0c0c0c);
    border:1px solid rgba(255,255,255,0.04);
    position:relative;overflow:hidden;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;
    transition:transform .96s cubic-bezier(.2,.9,.3,1), box-shadow .36s ease, border-color .36s ease;
    z-index:1; transform-origin:center center;
    transform: scale(0.96)
}

/* decorative */
.card::after{ content:''; position:absolute; inset:-40%;
    background:conic-gradient(from 0deg, rgba(33,150,243,0.06), rgba(156,39,176,0.06), rgba(233,30,99,0.06));
    opacity:0; transform:scale(1); transition:opacity .6s ease; z-index:0; pointer-events:none }
.card::before{ content:''; position:absolute; inset:0;
    background: linear-gradient(90deg, #45258B, #5F33BE, #703CE1);
    /* background:linear-gradient(135deg, rgba(33,150,243,0) 0%, rgba(33,150,243,0.06) 50%, rgba(156,39,176,0.06) 70%, rgba(233,30,99,0) 100%); */
    opacity:0; transition:opacity .6s ease; z-index:0; pointer-events:none }

/* Hover: сильно увеличиваем наведённую, остальные видимые немного уменьшаются */
.cards-wrapper:hover .card{ /* при наведении на область - базовая подготовка */ transition:transform .66s ease }
.cards-wrapper:hover .card:not(:hover){ transform: scale(0.76) translateY(0); } /* прочие немного уменьшаются */
.card:hover{ 
    transform: scale(1.15) translateY(-12px);
    /* background-color:white; */
    /* border-color:red;  */
    border-color:rgba(255,255,255,0.12);
    box-shadow:0 30px 80px rgba(0,0,0,0.6); 
    z-index:3 
}
.card:hover::after{ opacity:1 } .card:hover::before{ opacity:1 }

.card-content{ position:relative; z-index:2; width:100% }
.card-icon{ 
    width:78px;
    height:78px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-size:36px;
    /* background:linear-gradient(135deg, rgba(33,150,243,0.12), rgba(156,39,176,0.12)); */
    transition:transform .36s ease, box-shadow .36s ease }
.card:hover .card-icon{ transform:scale(1.08) rotate(4deg); box-shadow:0 10px 30px rgba(33,150,243,0.12) }

.card-title{ font-size:20px; font-weight:600; margin-bottom:12px; line-height:1.25 }
.card-desc{ font-size:14px; color:rgba(255,255,255,0.66); line-height:1.5 }

.controls{ margin-top:22px; display:flex; align-items:center; justify-content:center; gap:12px }
.scroll-indicators{ display:flex; gap:10px; align-items:center }
.indicator{ height:6px; width:40px; background:rgba(255,255,255,0.12); border-radius:6px; transition:all .28s ease; cursor:pointer }
.indicator.active{ background:linear-gradient(90deg,#2196F3,#9C27B0); width:64px }
.meta{ color:rgba(255,255,255,0.6); font-size:13px; margin-left:14px }

@media (max-width:520px){
    body{padding:18px}
    .card{ padding:20px; min-height:220px }
    .card-title{ font-size:14px } .card-desc{ font-size:12px }
    .card-icon{ width:44px;height:44px;font-size:20px;border-radius:10px;margin-bottom:12px }
}


@media (max-width: 1050px) {

    /* отключаем горизонтальный режим */
    .cards-viewport {
        overflow: visible;
    }

    .cards-wrapper {
        display: flex;
        flex-direction: column;
        overflow: visible;
        padding: 0;
        cursor: default;
    }

    /* каждая карточка — на всю ширину */
    .card {
        flex: none;
        width: 100%;
        min-height: auto;

        margin-bottom: 24px;
        transform: none;
    }

    /* отключаем эффекты "раздвигания" соседей */
    .cards-wrapper:hover .card:not(:hover) {
        transform: none;
    }

    /* hover — только лёгкий акцент */
    .card:hover {
        transform: scale(1.02);
        box-shadow: 0 16px 40px rgba(0,0,0,0.45);
    }

    /* индикаторы и мета больше не нужны */
    .controls,
    .scroll-indicators {
        display: none;
    }
}