.reviews-section-modern {
    padding: var(--site-pad-y) 0 0;
    background-color: #050505;
    background-image: radial-gradient(circle at 15% 50%, rgba(30, 30, 30, 0.4) 0, transparent 50%), radial-gradient(circle at 85% 30%, rgba(50, 50, 50, 0.2) 0, transparent 50%);
    position: relative;
    overflow: hidden;
    color: #fff;
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
}

/* Оптимизация для GPU: убираем статичный will-change, нагружающий память */
.review-card-masonry {
    backface-visibility: hidden;
    transform: translateZ(0);
    /* Включаем аппаратное ускорение более экономным способом */
}

.review-card-masonry.visible {
    will-change: auto;
    /* Сбрасываем после завершения анимации */
}


.reviews-bg-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #000;
    pointer-events: none;
}

/* Ambient Violet Effects */
.reviews-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.rev-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    transform: translateZ(0);
    /* Force GPU Layer */
}

.rev-blob-1 {
    top: 10%;
    left: 10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #6366F1 0%, rgba(99, 102, 241, 0) 70%);
}

.rev-blob-2 {
    top: 50%;
    right: 5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #818CF8 0%, rgba(129, 140, 248, 0) 70%);
}

.rev-blob-3 {
    bottom: 15%;
    left: 30%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, #A5B4FC 0%, rgba(165, 180, 252, 0) 70%);
}

.pattern-container {
    position: absolute;
    width: 100%;
    height: 600px;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    transform: rotate(-8deg) scale(1.5);
    transform-origin: center;
    opacity: .25
}

.reviews-bg-pattern::before,
.reviews-bg-pattern::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 600px;
    left: 0;
    background-image: repeating-linear-gradient(0deg, transparent 0, transparent 150px, rgba(255, 255, 255, 0.01) 150px, rgba(255, 255, 255, 0.01) 151px)
}

.reviews-bg-pattern::before {
    top: -600px
}

.reviews-bg-pattern::after {
    top: 600px
}

.pattern-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 120%;
    margin-left: -10%;
    gap: 8vw
}

.pattern-row-1 {
    margin-left: -5%
}

.pattern-row-2 {
    margin-left: 5%
}

.pattern-row-3 {
    margin-left: -8%
}

.pattern-row-4 {
    margin-left: 2%
}

.pattern-word {
    font-size: 8vw;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-family: var(--font-headings, sans-serif);
    white-space: nowrap;
    user-select: none;
    position: relative
}

.pattern-row-1 .pattern-word {
    color: transparent;
    -webkit-text-stroke: 3px rgba(255, 255, 255, 0.3);
}

.pattern-row-2 .pattern-word {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.pattern-row-3 .pattern-word {
    color: rgba(255, 255, 255, 0.12)
}

.pattern-row-4 .pattern-word {
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.2);
}

.pattern-word:nth-child(2) {
    font-size: 6vw;
    opacity: .6
}

.pattern-word:nth-child(3) {
    font-size: 10vw
}

.pattern-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.pattern-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: .4;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%)
}

.pattern-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.8) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.3) 100%)
}

.pattern-gradient::before,
.pattern-gradient::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.03)
}

.pattern-gradient::before {
    width: 800px;
    height: 800px;
    top: -200px;
    right: -200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.02) 0, transparent 60%)
}

.pattern-gradient::after {
    width: 600px;
    height: 600px;
    bottom: -100px;
    left: 10%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.015) 0, transparent 70%)
}

@media(max-width:1200px) {
    .pattern-container {
        transform: rotate(-10deg) scale(1.7);
        opacity: .06
    }

    .pattern-word {
        font-size: 10vw
    }

    .pattern-word:nth-child(2) {
        font-size: 8vw
    }

    .pattern-word:nth-child(3) {
        font-size: 12vw
    }
}

@media(max-width:768px) {
    .pattern-container {
        transform: rotate(-12deg) scale(2);
        opacity: .05
    }

    .pattern-word {
        font-size: 15vw
    }

    .pattern-word:nth-child(2) {
        font-size: 12vw
    }

    .pattern-word:nth-child(3) {
        font-size: 18vw
    }
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.relative-z {
    position: relative;
    z-index: 1
}

.reviews-header {
    text-align: center;
    margin-bottom: 20px
}

.section-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    letter-spacing: -0.02em
}

.section-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400
}

.reviews-masonry-container {
    position: relative
}

.reviews-masonry-wrapper {
    max-height: 600px;
    overflow: hidden;
    position: relative;
    transition: max-height .5s ease
}

.reviews-masonry-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, #000 0, transparent 100%);
    pointer-events: none;
    z-index: 10
}

.reviews-masonry-wrapper.expanded {
    max-height: none
}

.reviews-masonry-wrapper.expanded::after {
    display: none
}

.reviews-masonry-grid {
    columns: 3;
    column-gap: 30px;
    padding-top: 10px;
}

@media(max-width:1024px) {
    .reviews-masonry-grid {
        columns: 2
    }
}

@media(max-width:640px) {
    .reviews-masonry-grid {
        columns: 1
    }
}

.review-card-masonry {
    break-inside: avoid;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all .4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    transform: translateZ(0);
}

.review-card-masonry::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--lava-gradient);
    background-size: var(--lava-size);
    animation: var(--lava-anim);
    -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: 0;
    transition: opacity 0.4s ease;
    will-change: background-position;
    pointer-events: none;
}

.review-card-masonry:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(99, 102, 241, 0.3);
    background: #1a1a1a;
    border-color: transparent;
}

.review-card-masonry:hover::before {
    opacity: 1;
}

.review-header {
    display: flex;
    gap: 1rem;
    align-items: center
}

.review-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0
}

.review-meta {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.review-author {
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff
}

.review-role {
    font-size: .9rem;
    color: rgba(255, 255, 255, 0.5)
}

.review-rating {
    display: flex;
    gap: .25rem
}

.review-rating svg {
    width: 16px;
    height: 16px;
    color: #6366F1;
}

.review-text {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0
}

.reviews-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    pointer-events: none;
    transition: opacity .5s ease;
    z-index: 2
}

.reviews-control-area {
    width: 100%;
    background: #000;
    padding: var(--site-pad-y) var(--site-pad-x);
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 3;
    margin-top: 0;
}

.show-more-btn {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #000;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.show-more-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2563EB, #A855F7);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.show-more-btn:hover {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

.show-more-btn:hover::before {
    opacity: 1;
}

.show-more-btn svg {
    transition: transform .3s ease
}

.show-more-btn:hover svg {
    transform: translateY(3px)
}

.show-more-btn.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px)
}

.white-text {
    color: white !important;
}