/* ---- Home page layout ---- */
.home-main {
    position: relative;
    z-index: 1;
}

.home-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 80px);
}

/* ---- Section title ---- */
.section-title {
    text-align: center;
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 600;
    color: var(--text);
    margin: 0 0 clamp(24px, 3vw, 48px);
    letter-spacing: -0.02em;
}

/* ---- Hero ---- */
.hero-section {
    padding: clamp(48px, 6vw, 96px) 0 0;
    text-align: center;
}

.hero-title {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 400;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 clamp(20px, 2.5vw, 36px);
}

.intro {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.intro p {
    margin: 0;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.6;
    color: var(--text-soft);
}

/* ---- Products ---- */
.products-section {
    padding: clamp(24px, 5vw, 80px) 0 0;
}

/* ---- Services ---- */
.services-section {
    padding: clamp(24px, 5vw, 80px) 0 0;
}

/* ---- Card grids ---- */
.cards-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(12px, 1.5vw, 20px);
}

/* Последняя одиночная карточка — на всю ширину грида, но в одну колонку */
.cards-2 > :last-child:nth-child(odd) {
    grid-column: 1 / 2;
}

.cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.5vw, 20px);
    margin-bottom: clamp(12px, 1.5vw, 20px);
}

@media (max-width: 900px) {
    .cards-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .cards-2,
    .cards-3 { grid-template-columns: 1fr; }
}

/* ---- Card ---- */
.card {
    --start-angle: 0deg;
    --duration: 8s;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(16px, 2vw, 24px) clamp(20px, 2.5vw, 32px);
    gap: 16px;
    min-height: clamp(160px, 14vw, 220px);
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, rgba(160,164,169,0.08) 0%, rgba(40,42,44,0.08) 100%);
    box-shadow: inset 0 1px 1px rgba(216,236,248,0.12), inset 0 24px 48px rgba(168,216,245,0.05), 0 10px 30px rgba(0,0,0,0.22);
    backdrop-filter: blur(4px);
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .3s ease;
}

.card::before, .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.card::before {
    padding: 1px;
    background: linear-gradient(rgba(29,207,237,0.28) 0%, rgba(29,207,237,0) 100%), rgba(29,207,237,0.10);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
}

.card::after {
    --cta-angle: 0deg;
    padding: 1px;
    background: conic-gradient(
            from calc(var(--cta-angle) + var(--start-angle)),
            transparent 0%, transparent 28%,
            rgba(29,207,237,0.12) 33%, rgba(29,207,237,0.42) 36%,
            rgba(29,207,237,0.95) 39%, rgba(2,146,182,0.98) 43%,
            rgba(2,146,182,0.38) 46%, rgba(2,146,182,0.12) 49%,
            transparent 54%, transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .88;
    filter: drop-shadow(0 0 4px rgba(29,207,237,0.28)) drop-shadow(0 0 10px rgba(29,207,237,0.18));
    animation: card-border var(--duration) linear infinite;
    z-index: 2;
}

.card:nth-child(even) { --start-angle: 180deg; }

.card:hover { box-shadow: inset 0 1px 1px rgba(216,236,248,0.18), inset 0 32px 48px rgba(168,216,245,0.10), 0 12px 36px rgba(0,0,0,0.26); }
.card:hover::after { opacity: 1; animation-duration: 6s; }

.icon {
    flex: none;
    position: relative;
    z-index: 4;
}

.card-icon-img {
    display: block;
    height: clamp(36px, 3.5vw, 50px);
    width: auto;
    max-width: 64px;
    object-fit: contain;
}

.card-text {
    font-size: clamp(16px, 1.5vw, 23px);
    line-height: 1.35;
    font-weight: 500;
    color: #fff;
    position: relative;
    z-index: 4;
    transition: text-shadow .45s cubic-bezier(.6,.6,0,1);
}

.card:hover .card-text { text-shadow: 0 2px 16px rgba(29,207,237,0.42); }

/* ---- Clients ---- */
.clients-section {
    padding: clamp(24px, 5vw, 80px) 0 0;
}

.clients-block {
    position: relative;
    margin-top: clamp(16px, 2vw, 32px);
}

.clients-line {
    width: 100%;
    border-top: 1px solid var(--accent);
}

.clients-slider {
    width: 100%;
    overflow: hidden;
    padding: clamp(20px, 2.5vw, 40px) 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.clients-track {
    display: flex;
    align-items: center;
    gap: clamp(32px, 3.5vw, 56px);
    width: max-content;
    animation: marquee 70s linear infinite;
}

.clients-slider:hover .clients-track { animation-play-state: paused; }

.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: clamp(56px, 6vw, 92px);
    box-sizing: border-box;
}

.client-logo-img {
    display: block;
    height: clamp(40px, 5vw, 64px);
    width: auto;
    object-fit: contain;
}

/* ---- Keyframes ---- */
@property --cta-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes card-border { to { --cta-angle: 360deg; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Reviews slider ---- */
.reviews-section {
    padding: clamp(24px, 5vw, 80px) 0 0;
}

/* Обёртка слайдера: position:relative для абсолютных стрелок
   overflow:hidden — обрезает выходящие за край карточки
*/
.reviews-slider-wrap {
    position: relative;
    overflow: hidden;
    margin-top: clamp(24px, 3vw, 48px);
}

.reviews-viewport {
    width: 100%;
}

/* gap между карточками — Figma промежуток (зона стрелок) = 162px*2/2 доп + сама зона
   В Figma карточка 1 на left:162 в блоке 1274px.
   Карточка 2 на left:1274 (= за правым краем блока).
   Значит gap между карточками = 1274-162-950 = 162px (= левому отступу).
   Стрелка на left:61 в промежутке = (162-40)/2 = 61 от левого края блока.
   Относительно центра активной карточки: стрелка = card/2 - gap/2 + (gap-40)/2 = card_start - gap/2 + gap/2 - 20 = card_start - 20
*/
.reviews-track {
    display: flex;
    align-items: stretch;
    gap: clamp(80px, 12vw, 162px); /* большой gap = зона для стрелок */
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* ---- Review card ----
   Figma: width:950, height:200, border-radius:20
   padding: py-20 px-28 (top/bottom:20px left/right:28px)
*/
.review-card {
    flex: 0 0 min(950px, 100%);
    width: min(950px, 100%);
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(52,58,66,0.10) 0%, rgba(0,0,0,0.10) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.25);
    box-sizing: border-box;
    transition: opacity 0.4s ease;
    opacity: 0.45;
    flex-shrink: 0;
    isolation: isolate;
    border: none;
}

.review-card::before,
.review-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

/* Статичная градиентная рамка */
.review-card::before {
    padding: 1px;
    background: linear-gradient(rgba(29,207,237,0.28) 0%, rgba(29,207,237,0) 100%), rgba(29,207,237,0.10);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
}

/* Вращающаяся светящаяся рамка */
.review-card::after {
    --cta-angle: 0deg;
    padding: 1px;
    background: conic-gradient(
        from var(--cta-angle),
        transparent 0%, transparent 28%,
        rgba(29,207,237,0.12) 33%, rgba(29,207,237,0.42) 36%,
        rgba(29,207,237,0.95) 39%, rgba(2,146,182,0.98) 43%,
        rgba(2,146,182,0.38) 46%, rgba(2,146,182,0.12) 49%,
        transparent 54%, transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .88;
    filter: drop-shadow(0 0 4px rgba(29,207,237,0.28)) drop-shadow(0 0 10px rgba(29,207,237,0.18));
    animation: card-border 12s linear infinite;
    z-index: 1;
}

.review-card:nth-child(even)::after { animation-delay: -4s; }
.review-card:nth-child(3n)::after   { animation-delay: -8s; }

.review-card.is-active { opacity: 1; }

/* Декоративный контейнер — правый угол карточки, overflow:hidden чтобы звезда обрезалась */
.review-card-deco {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 370px; /* достаточно чтобы вместить оба элемента */
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Кавычки: top:0, right:83px, width:120px, height:100px */
.review-deco-quotes {
    position: absolute;
    top: -18px;
    right: 35px;
}

.review-deco-quotes svg {
    display: block;
    width: 192px;
    height: 160px;
    filter: drop-shadow(0 0 50px rgba(81,208,219,0.15));
}

/* Звёздочка: top:60px
   Левый край svg удалён от правого края карточки на 150px влево:
   right = -(svg_width - 150) = -(204.575 - 150) = -54.575px
*/
.review-deco-star {
    position: absolute;
    top: 30px;
    right: -10px;
}

.review-deco-star svg {
    display: block;
    width: 204.575px;
    height: 175.17px;
    filter: drop-shadow(0 0 50px rgba(81,208,219,0.15));
}

/* Контент карточки
   Figma: px-28 py-20 — padding:20px 28px
*/
.review-card-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 20px 28px;
    height: 100%;
    box-sizing: border-box;
    gap: 0;
}

/* Левая колонка
   Figma: avatar left:39→inside padding=39-28=11px from body edge
   ширина: ~280px (до left:322 минус left:28 = 294px)
*/
.review-card-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px; /* Figma: имя на left:139, аватар 80px, значит gap=139-39-80=20px */
    flex: 0 0 auto;
    width: 270px; /* 322-28-pad ≈ 266px, округляем */
}

/* Avatar: Figma size:80, top:59, rounded (круглый, imgEllipse14902) */
.review-avatar-wrap {
    flex-shrink: 0;
}

.review-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Имя и роль */
.review-author {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Figma: имя top:87, роль top:123 → diff=36px; h_name≈20px, gap≈36-20=16 → ~8px visual */
    min-width: 0;
}

/* Figma: Montserrat Regular 20px */
.review-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
}

/* Figma: Segoe UI 12px */
.review-role {
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    line-height: 1.4;
}

/* Разделитель — убран */
.review-card-divider {
    display: none;
}

/* Правая колонка
   Figma: width:599, font:Segoe UI 14px, line-height:20px
*/
.review-card-right {
    flex: 1;
    min-width: 0;
    max-width: 599px;
    margin-left: 50px;
}

.review-text {
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    margin: 0;
}

/* Стрелки — абсолютно внутри .reviews-slider-wrap
   Позиция: в промежутке между активной карточкой и соседней.
   Figma: карточка 950px, gap 162px.
   left стрелки = 50%_viewport - 950/2 - gap/2 - 20 = 50% - 475 - 81 - 20 = 50% - 576px
   right стрелки = зеркально
*/
.reviews-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 24px;
    border: 2px solid rgba(255,255,255,0.85);
    background: rgba(8,10,22,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s, border-color 0.2s, background 0.2s;
    padding: 0;
}

/* Позиция: центр viewport - half_card - half_gap - half_arrow
   = 50% - 475px - (gap/2) - 20px
   gap = clamp(80,12vw,162), берём half_gap через CSS calc
*/
.reviews-nav-prev {
    left: calc(50% - 475px - clamp(40px, 6vw, 81px) - 20px);
}
.reviews-nav-next {
    right: calc(50% - 475px - clamp(40px, 6vw, 81px) - 20px);
}

.reviews-nav:hover {
    opacity: 1;
    border-color: #1dcfed;
    background: rgba(29,207,237,0.15);
}

.reviews-nav svg {
    display: block;
    margin: auto;
}

/* Точки
   Figma: 3 точки, size:8px, gap:22px (between centers, so gap=14px)
*/
.reviews-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
}

.reviews-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666666;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.reviews-dot.is-active {
    background: #ffffff;
    transform: scale(1.3);
}

/* ---- Mobile: reviews ---- */

/* Планшет: карточка уже не 950px, убираем фиксированную высоту */
@media (max-width: 1200px) {
    .review-card {
        height: auto;
        flex: 0 0 calc(100vw - 240px);
        width: calc(100vw - 240px);
    }

    .reviews-nav-prev { left: 20px; }
    .reviews-nav-next { right: 20px; }

    .review-card-left { width: 200px; }
    .review-card-right { margin-left: 32px; }
    .review-card-deco { width: 220px; }
}

@media (max-width: 900px) {
    .review-card {
        flex: 0 0 calc(100vw - 160px);
        width: calc(100vw - 160px);
    }

    .reviews-nav-prev { left: 12px; }
    .reviews-nav-next { right: 12px; }

    .review-card-left { width: 160px; gap: 12px; }
    .review-card-right { margin-left: 16px; }
    .review-card-deco { width: 160px; }
    .review-name { font-size: 16px; white-space: normal; }
    .review-role { font-size: 11px; }
    .review-avatar { width: 64px; height: 64px; }
}

/* Мобилка: вертикальная раскладка карточки */
@media (max-width: 700px) {
    .reviews-track {
        gap: clamp(40px, 8vw, 80px);
    }

    .review-card {
        flex: 0 0 min(480px, 82vw);
        width: min(480px, 82vw);
        height: auto;
    }

    .review-card-body {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
        height: auto;
    }

    .review-card-left {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .review-avatar {
        width: 56px;
        height: 56px;
        padding: 8px;
    }

    .review-name { font-size: 16px; white-space: normal; }
    .review-role { font-size: 11px; }

    .review-card-right {
        margin-left: 0;
        max-width: 100%;
    }

    .review-text { font-size: 13px; line-height: 19px; }

    .review-card-deco { width: 180px; }
    .review-deco-quotes svg { width: 80px; height: 67px; }
    .review-deco-star svg { width: 130px; height: 111px; }
    .review-deco-quotes { right: 20px; }
    .review-deco-star { top: 40px; right: -20px; }

    /* Стрелки скрываем — свайп достаточен */
    .reviews-nav { display: none; }

    .reviews-dots { margin-top: 16px; }
}

/* Очень маленькие экраны */
@media (max-width: 420px) {
    .review-card {
        flex: 0 0 78vw;
        width: 78vw;
    }
}