@property --rv-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.reviews-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px 10px 14px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    isolation: isolate;
    background: rgba(10, 10, 20, 0.85);
    box-shadow: 0 0 0 0 rgba(255, 197, 49, 0.45);
    animation: rv-pulse 2.6s ease-out infinite;
    transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
    overflow: hidden;
}

.reviews-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from var(--rv-angle), #ffc531, #ff00ea, #00d9ff, #00ffcc, #ffc531);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rv-spin 3.2s linear infinite;
}

.reviews-link::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 50%;
    z-index: -1;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg);
    animation: rv-shine 3.6s ease-in-out infinite;
}

.reviews-link:hover { transform: translateY(-2px) scale(1.04); }
.reviews-link:hover .reviews-link-star { animation-duration: 0.9s; }

.reviews-link-star,
.rv-star {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: none;
    background: url('/reviews-star.png?v=1') center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(255, 197, 49, 0.7));
}

.reviews-link-star { animation: rv-twinkle 2.4s ease-in-out infinite; }

@keyframes rv-spin { to { --rv-angle: 360deg; } }

@keyframes rv-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 197, 49, 0.45); }
    70% { box-shadow: 0 0 0 12px rgba(255, 197, 49, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 197, 49, 0); }
}

@keyframes rv-shine {
    0%, 55% { left: -60%; }
    85%, 100% { left: 130%; }
}

@keyframes rv-twinkle {
    0%, 100% { transform: scale(1) rotate(0); }
    20% { transform: scale(1.25) rotate(-12deg); }
    40% { transform: scale(0.95) rotate(8deg); }
    60% { transform: scale(1.08) rotate(0); }
}

#reviews { overflow: hidden; }
#reviews [hidden] { display: none !important; }
#reviews .container { overflow: visible; }

.rv-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 10px auto 34px;
}

.rv-trust-item {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 220px;
    padding: 18px 26px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(0, 217, 255, 0.08), rgba(255, 0, 234, 0.06)), rgba(18, 18, 30, 0.72);
    border: 1px solid rgba(0, 217, 255, 0.22);
}

.rv-trust-item b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.1;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rv-trust-item b .rv-star { width: 30px; height: 30px; }
.rv-trust-item > span { color: rgba(255, 255, 255, 0.7); font-size: 15px; }

.rv-marquee {
    position: relative;
    overflow: hidden;
    margin: 0 calc(50% - 50vw);
    padding: 8px 0 18px;
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.rv-track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: rv-scroll var(--rv-duration, 40s) linear infinite;
}

.rv-marquee:hover .rv-track,
.rv-marquee.paused .rv-track { animation-play-state: paused; }

.rv-marquee.static { margin: 0; -webkit-mask: none; mask: none; }
.rv-marquee.static .rv-track { animation: none; width: auto; justify-content: center; flex-wrap: wrap; }

@keyframes rv-scroll { to { transform: translateX(calc(-50% - 9px)); } }

.rv-card {
    display: block;
    width: 340px;
    flex: none;
    color: inherit;
    text-decoration: none;
    padding: 20px;
    border-radius: 20px;
    background: rgba(14, 14, 26, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.09);
    text-align: left;
    transition: border-color 0.25s, transform 0.25s;
}

.rv-card:hover { border-color: rgba(0, 217, 255, 0.45); transform: translateY(-4px); }

.rv-head { display: flex; gap: 12px; align-items: center; }

.rv-ava {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.rv-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-who { min-width: 0; }
.rv-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.rv-sub { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }
.rv-sub em { font-style: normal; color: rgba(0, 255, 204, 0.8); }

.rv-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

.rv-stars { display: inline-flex; gap: 2px; }
.rv-stars i { width: 16px; height: 16px; background: url('/reviews-star.png?v=1') center / contain no-repeat; }
.rv-stars i.off { filter: grayscale(1) brightness(1.5); opacity: 0.18; }

.rv-topic {
    font-size: 12px;
    font-family: var(--font-heading);
    padding: 3px 10px;
    border-radius: 999px;
    color: #00ffcc;
    border: 1px solid rgba(0, 255, 204, 0.35);
    background: rgba(0, 255, 204, 0.06);
}

.rv-text {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.rv-empty {
    max-width: 560px;
    margin: 0 auto;
    padding: 26px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 20px;
}

.rv-actions { display: flex; justify-content: center; margin-top: 28px; }

.rv-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    animation: rv-pulse 2.6s ease-out infinite;
}

.rv-cta .rv-star { animation: rv-twinkle 2.4s ease-in-out infinite; }

@media (max-width: 768px) {
    .reviews-link { min-height: 38px; padding: 8px 14px 8px 11px; font-size: 14px; }
    .reviews-link-star { width: 17px; height: 17px; }
    .rv-card { width: 280px; padding: 16px; }
    .rv-trust-item { min-width: 0; flex: 1 1 140px; padding: 14px 12px; }
    .rv-trust-item > span { font-size: 13px; text-align: center; }
    .rv-cta { width: 100%; max-width: 360px; justify-content: center; font-size: 15px; padding: 15px 18px; white-space: nowrap; }
}

@media (max-width: 480px) {
    .reviews-link { width: 42px; height: 42px; min-height: 0; padding: 0; justify-content: center; }
    .reviews-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .reviews-link-star { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-link, .reviews-link::before, .reviews-link::after, .reviews-link-star, .rv-cta, .rv-cta .rv-star { animation: none; }
    .rv-track { animation-duration: 120s; }
}