﻿/* Homepage reviews — Kingdom Glass social proof */

.home-rev {
    --hr-ink: #1C1C1A;
    --hr-mute: #6F6E69;
    --hr-brand: #343432;
    --hr-brand-deep: #111111;
    --hr-brand-glow: #A69F91;
    --hr-line: rgba(166, 159, 145, 0.28);
    --hr-soft: #F7F6F2;
    --hr-star: #C6A15B;
    --hr-surface: #ffffff;
    --hr-yandex: #fc3f1d;
    --hr-2gis: #00b341;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 72px 0 88px;
    color: var(--hr-ink);
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    background:
        radial-gradient(900px 420px at 8% -10%, rgba(166, 159, 145, 0.22), transparent 58%),
        radial-gradient(720px 380px at 96% 108%, rgba(28, 28, 26, 0.08), transparent 55%),
        linear-gradient(180deg, #F7F6F2 0%, #ffffff 42%, #F0EEE8 100%);
}

.home-rev__orb { pointer-events: none; position: absolute; border-radius: 50%; z-index: 0; }
.home-rev__orb--a { width: 340px; height: 340px; left: -120px; top: 40px; background: radial-gradient(circle, rgba(198, 161, 91, 0.18), transparent 68%); }
.home-rev__orb--b { width: 260px; height: 260px; right: -80px; top: -40px; background: radial-gradient(circle, rgba(166, 159, 145, 0.2), transparent 70%); }
.home-rev__glow { pointer-events: none; position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.35) 50%, transparent 58%); }
.home-rev__shell { position: relative; z-index: 1; width: min(1360px, calc(100% - 40px)); margin: 0 auto; }
.home-rev__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 36px; }
.home-rev__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hr-brand-glow); }
.home-rev__title-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px; }
.home-rev__title { margin: 0; font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif); font-size: clamp(32px, 4.4vw, 52px); font-weight: 500; letter-spacing: -0.02em; line-height: 0.98; }
.home-rev__sub { margin: 14px 0 0; max-width: 46ch; color: var(--hr-mute); font-size: 16px; line-height: 1.55; }
.home-rev__score { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 14px; border-radius: 22px; border: 1px solid rgba(166, 159, 145, 0.35); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 246, 242, 0.92)); box-shadow: 0 10px 28px rgba(28, 28, 26, 0.08); }
.home-rev__score-num { font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif); font-size: 34px; font-weight: 500; color: var(--hr-brand-deep); letter-spacing: -0.04em; line-height: 1; animation: home-rev-pulse 2.8s ease-in-out infinite; }
.home-rev__score-count { margin: 3px 0 0; font-size: 12px; font-weight: 600; color: var(--hr-mute); }
.home-rev__stars { display: flex; gap: 3px; color: rgba(111, 110, 105, 0.28); margin: 16px 0 0; }
.home-rev__score .home-rev__stars { margin: 0; }
.home-rev__star { fill: currentColor; }
.home-rev__star.is-on { color: var(--hr-star); fill: var(--hr-star); }
.home-rev__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.home-rev__chip { appearance: none; display: inline-flex; align-items: center; gap: 2px; border: 1px solid rgba(28, 28, 26, 0.1); background: rgba(255, 255, 255, 0.78); color: var(--hr-mute); border-radius: 999px; min-height: 44px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; backdrop-filter: blur(8px); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.home-rev__chip span { margin-left: 6px; color: var(--hr-ink); }
.home-rev__chip em { margin-left: 4px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--hr-mute); }
.home-rev__chip:hover { transform: translateY(-1px); color: var(--hr-ink); border-color: rgba(166, 159, 145, 0.55); box-shadow: 0 8px 18px rgba(28, 28, 26, 0.08); }
.home-rev__chip.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #343432 0%, #111111 100%); box-shadow: 0 10px 22px rgba(17, 17, 17, 0.22); }
.home-rev__chip.is-active span, .home-rev__chip.is-active em { color: rgba(255, 255, 255, 0.92); }
.home-rev__chip--2gis.is-active { background: linear-gradient(135deg, #12c24a 0%, #009933 100%); box-shadow: 0 10px 22px rgba(0, 179, 65, 0.28); }
.home-rev__chip--yandex.is-active { background: linear-gradient(135deg, #ff5a3c 0%, #e03616 100%); box-shadow: 0 10px 22px rgba(252, 63, 29, 0.28); }
.home-rev__chip--link { border-style: dashed; }
.home-rev__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 26px; }
.home-rev__arrow { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(28, 28, 26, 0.1); background: rgba(255, 255, 255, 0.9); color: var(--hr-ink); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.home-rev__arrow:hover { transform: translateY(-1px); border-color: rgba(166, 159, 145, 0.55); color: var(--hr-brand-deep); }
.home-rev__arrow--primary { background: linear-gradient(135deg, #343432 0%, #111111 100%); border-color: transparent; color: #fff; box-shadow: 0 10px 22px rgba(17, 17, 17, 0.22); }
.home-rev__arrow--primary:hover { color: #fff; filter: brightness(1.05); }
.home-rev__viewport { margin-top: 18px; overflow: hidden; padding: 8px 2px 18px; }
.home-rev__track { display: flex; gap: 0; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.home-rev__card { position: relative; flex: 0 0 100%; min-width: 0; box-sizing: border-box; margin: 0 10px; padding: 26px 24px 22px; display: flex; flex-direction: column; min-height: 312px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, #ffffff 100%); border: 1px solid rgba(166, 159, 145, 0.28); border-radius: 28px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 18px 40px rgba(28, 28, 26, 0.06); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
.home-rev__card:hover { transform: translateY(-6px); border-color: rgba(166, 159, 145, 0.5); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 48px rgba(28, 28, 26, 0.12); }
.home-rev__quote { position: absolute; top: 18px; right: 22px; font-family: var(--font-serif, "Cormorant Garamond", Georgia, serif); font-size: 64px; line-height: 0.7; font-weight: 500; color: rgba(166, 159, 145, 0.28); pointer-events: none; }
.home-rev__card[data-source="yandex"] .home-rev__quote { color: rgba(252, 63, 29, 0.12); }
.home-rev__card[data-source="2gis"] .home-rev__quote { color: rgba(0, 179, 65, 0.12); }
.home-rev__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home-rev__text { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: rgba(28, 28, 26, 0.9); flex: 1; }
.home-rev__card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.home-rev__author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.home-rev__avatar { width: 52px; height: 52px; border-radius: 999px; overflow: hidden; flex: 0 0 auto; background: linear-gradient(160deg, #E9E8E3, #ffffff); border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(166, 159, 145, 0.35); display: grid; place-items: center; font-weight: 700; font-size: 16px; color: var(--hr-brand-deep); }
.home-rev__card[data-source="yandex"] .home-rev__avatar { box-shadow: 0 0 0 2px rgba(252, 63, 29, 0.22); color: #d9482c; }
.home-rev__card[data-source="2gis"] .home-rev__avatar { box-shadow: 0 0 0 2px rgba(0, 179, 65, 0.22); color: #009933; }
.home-rev__avatar img { width: 100%; height: 100%; object-fit: cover; }
.home-rev__author-meta { min-width: 0; }
.home-rev__author-meta strong { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-rev__author-meta span { display: block; margin-top: 3px; font-size: 13px; color: var(--hr-mute); }
.home-rev__badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.home-rev__badge--yandex { background: rgba(252, 63, 29, 0.12); color: #d9482c; }
.home-rev__badge--2gis { background: rgba(0, 179, 65, 0.12); color: #009933; }
.home-rev__more, .home-rev__ext { font-size: 13px; font-weight: 700; color: var(--hr-brand-deep); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.home-rev__ext { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.home-rev__more:hover, .home-rev__ext:hover { color: #000; }
.home-rev__empty { width: 100%; padding: 48px 28px; text-align: center; border: 1px dashed var(--hr-line); border-radius: 24px; background: rgba(255, 255, 255, 0.7); }
.home-rev__empty strong { display: block; font-size: 18px; }
.home-rev__empty p { margin: 10px auto 0; max-width: 46ch; color: var(--hr-mute); line-height: 1.55; }
.home-rev__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 12px; }
.home-rev__cta { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: linear-gradient(135deg, #343432 0%, #111111 100%); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 14px 30px rgba(17, 17, 17, 0.24); transition: transform 0.2s ease, filter 0.2s ease; }
.home-rev__cta:hover { filter: brightness(1.05); transform: translateY(-2px); color: #fff; }
.home-rev__all { font-size: 14px; font-weight: 700; color: var(--hr-brand-deep); text-decoration: none; }
.home-rev__all:hover { text-decoration: underline; }
@keyframes home-rev-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@media (min-width: 768px) { .home-rev__card { flex-basis: 50%; } }
@media (min-width: 1100px) { .home-rev__card { flex-basis: 33.333%; } }
@media (max-width: 640px) {
  .home-rev { padding: 44px 0 60px; }
  .home-rev__shell { width: calc(100% - 24px); }
  .home-rev__card { margin: 0 4px; padding: 20px 18px 18px; min-height: 280px; }
  .home-rev__title { font-size: 30px; }
  .home-rev__quote { font-size: 48px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-rev__score-num, .home-rev__card, .home-rev__track, .home-rev__chip, .home-rev__arrow, .home-rev__cta { animation: none !important; transition: none !important; }
  .home-rev__card:hover, .home-rev__chip:hover, .home-rev__arrow:hover, .home-rev__cta:hover { transform: none; }
}
