:root{ --gap:30px }

.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:#414141; */
    background: linear-gradient(
  135deg,
  #000000 0%,
  #1a263f 10%,
  #2D3E65 20%,
  #324a85 30%,
  #365AAD 40%,
  #3f6ed1 50%,
  #365AAD 60%,
  #324a85 70%,
  #2D3E65 80%,
  #1a263f 90%,
  #000000 100%
  
);
    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;
    border: 1px solid #636363;
    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)); */
    /* background: linear-gradient(
  180deg,
  #e5e7ea 0%,
  #c0c4c7 25%,
  #a8aaae 50%,
  #c0c4c7 75%,
  #e5e7ea 100%
); */
/* border:10px solid white; */
background: linear-gradient(
  180deg,
  #e5e7ea 0%,
  #6286D8 25%,
  #1844AD 50%,
  #6286D8 75%,
  #e5e7ea 100%
);
    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(307deg,rgba(77, 88, 110, 1) 0%, rgba(139, 152, 171, 1) 50%, rgba(255, 255, 255, 1) 100%); */

    background: linear-gradient(307deg,rgba(77, 88, 110, 1) 0%, rgba(23, 66, 168, 1) 50%, rgba(255, 255, 255, 1) 100%);
    border:12px solid white;
    /* 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.80) translateY(0); } /* прочие немного уменьшаются */
.card:hover{ 
    transform: scale(1.0) 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 5px;
    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 
}

.direction-icon{
    color:white
}
.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;
color:white;
}
.card-desc{ font-size:14px; 
    color:white;
    /* 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:white; 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;
    }
}


/* ── Стрелки навигации ── */
.cards-section {
    display: flex;
    align-items: center;
    gap: 16px;
}
.cards-section .cards-viewport {
    flex: 1;
    min-width: 0; /* не даёт flex-item растягиваться сверх содержимого */
}

.cards-arrow {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .22s ease, opacity .22s ease, border-color .22s ease;
    user-select: none;
}
.cards-arrow:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.45);
}
.cards-arrow:disabled {
    opacity: 0.25;
    cursor: default;
    border-color: rgba(255, 255, 255, 0.08);
}

/* На мобильном (вертикальный режим) — прячем стрелки */
@media (max-width: 1050px) {
    .cards-arrow { display: none; }
    /* cards-section просто становится блоком */
    .cards-section { display: block; }
}