/* Homepage "Reviews" wall (index.html #reviews-section). Everything is prefixed rv- so it can't
   collide with the page's own styles. Behaviour lives in /js/reviews-wall.js. */

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

.rv, .rv-modal { --rv-green: #00D263; --rv-lime: #D8FF4A; --rv-teal: #00E5C3; --rv-gold: #FFC83D; }
.rv [hidden], .rv-modal [hidden] { display: none !important; }
.rv {
  position: relative; isolation: isolate; overflow: hidden;
  margin: clamp(40px, 6vw, 90px) var(--gut, 24px) clamp(24px, 3vw, 44px);
  padding: clamp(64px, 8vw, 118px) 0 clamp(54px, 7vw, 96px);
  border-radius: clamp(28px, 4vw, 56px);
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FFFA 100%); color: #0B0F0C;
  border: 1px solid rgba(11, 15, 12, .08);
  box-shadow: 0 40px 90px -50px rgba(0, 120, 60, .35);
}

/* ---------- atmosphere ---------- */
.rv-aurora, .rv-dots, .rv-spot, .rv-sparks { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.rv-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .32; animation: rvFloat 18s ease-in-out infinite; }
.rv-aurora i:nth-child(1) { width: min(46vw, 680px); height: min(46vw, 680px); left: -8%; top: -22%; background: radial-gradient(circle, var(--rv-green), transparent 65%); }
.rv-aurora i:nth-child(2) { width: min(40vw, 600px); height: min(40vw, 600px); right: -10%; top: 6%; background: radial-gradient(circle, var(--rv-lime), transparent 62%); opacity: .45; animation-delay: -6s; }
.rv-aurora i:nth-child(3) { width: min(44vw, 640px); height: min(44vw, 640px); left: 28%; bottom: -34%; background: radial-gradient(circle, var(--rv-teal), transparent 62%); opacity: .22; animation-delay: -12s; }
@keyframes rvFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(6%, 8%, 0) scale(1.16); }
  66% { transform: translate3d(-5%, 4%, 0) scale(.92); }
}
.rv-dots {
  background-image: radial-gradient(rgba(11, 15, 12, .11) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000 22%, transparent 74%); mask-image: radial-gradient(ellipse at 50% 38%, #000 22%, transparent 74%);
}
.rv-spot { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(0, 210, 99, .13), transparent 62%); transition: opacity .4s; }
.rv-sparks i {
  position: absolute; width: 10px; height: 10px; opacity: 0;
  background: linear-gradient(#00B24A, #00B24A) center/100% 1.5px no-repeat, linear-gradient(#00B24A, #00B24A) center/1.5px 100% no-repeat;
  filter: drop-shadow(0 0 4px rgba(0, 210, 99, .55)); animation: rvTwinkle var(--d, 4s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes rvTwinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: .95; transform: scale(1.25) rotate(90deg); } }

/* ---------- header ---------- */
.rv-head { position: relative; z-index: 1; text-align: center; padding: 0 var(--gut, 24px); }
.rv-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(11, 15, 12, .12); box-shadow: 0 6px 20px -12px rgba(11, 15, 12, .25);
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(11, 15, 12, .8);
}
.rv-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rv-green); animation: rvPing 1.8s infinite; }
@keyframes rvPing { 0% { box-shadow: 0 0 0 0 rgba(0, 210, 99, .7); } 70%, 100% { box-shadow: 0 0 0 11px rgba(0, 210, 99, 0); } }

.rv-title {
  margin: 22px auto 0; max-width: 17ch; font-family: 'DM Sans', Inter, sans-serif; font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 6rem); line-height: 1.1; letter-spacing: -.03em;
}
.rv-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-right: .22em; }
.rv-w > span { display: inline-block; transform: translateY(112%) rotate(4deg); transition: transform 1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i) * 70ms + 120ms); }
.rv.in .rv-w > span { transform: none; }
.rv-grad {
  background: linear-gradient(100deg, #00A651, #00D263, #00B8A9, #00A651); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: rvShine 6s linear infinite;
}
@keyframes rvShine { to { background-position: 300% 0; } }

.rv-core { display: contents; }
.rv-stats {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 34px);
  margin-top: clamp(26px, 3.4vw, 42px); opacity: 0; transform: translateY(24px); transition: opacity .9s .5s, transform .9s .5s cubic-bezier(.16, 1, .3, 1);
}
.rv.in .rv-stats { opacity: 1; transform: none; }
.rv-stat { display: flex; align-items: center; gap: 12px; }
.rv-stat b { font-family: 'Outfit', sans-serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.03em; }
.rv-stat small { display: block; font-size: .78rem; color: rgba(11, 15, 12, .6); line-height: 1.3; text-align: left; }
.rv-stat-sep { width: 1px; height: 38px; background: linear-gradient(transparent, rgba(11, 15, 12, .22), transparent); }
.rv-stars { display: inline-flex; gap: 3px; color: var(--rv-gold); filter: drop-shadow(0 2px 6px rgba(255, 170, 0, .35)); }
.rv-stars svg { width: 17px; height: 17px; }
.rv-stars .off { color: rgba(11, 15, 12, .16); filter: none; }

.rv-write {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; overflow: hidden;
  background: #0B0F0C; color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; border: 0;
  transition: transform .25s, box-shadow .3s;
}
.rv-write::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(216, 255, 74, .55) 50%, transparent 70%); transform: translateX(-120%); animation: rvSweep 3.4s ease-in-out infinite; }
@keyframes rvSweep { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.rv-write:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 40px -14px rgba(11, 15, 12, .6); }
.rv-write svg { width: 17px; height: 17px; position: relative; }
.rv-write span { position: relative; }

/* ---------- the wall ---------- */
.rv-stage { position: relative; z-index: 1; margin-top: clamp(40px, 5.4vw, 74px); display: grid; gap: 20px; transform: rotate(-2deg) scale(1.05); transform-origin: 50% 50%; }
.rv-row {
  position: relative; overflow: hidden; padding: 12px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  opacity: 0; transition: opacity 1.1s .35s, transform 1.4s .35s cubic-bezier(.16, 1, .3, 1);
}
.rv-row[data-dir="left"] { transform: translateX(-9%); }
.rv-row[data-dir="right"] { transform: translateX(9%); }
.rv.in .rv-row { opacity: 1; transform: none; }
.rv-track { display: flex; width: max-content; animation: rvScroll var(--rv-dur, 60s) linear infinite; will-change: transform; }
.rv-row[data-dir="right"] .rv-track { animation-direction: reverse; }
.rv-row:hover .rv-track, .rv.paused .rv-track { animation-play-state: paused; }
@keyframes rvScroll { from { transform: translateX(0); } to { transform: translateX(calc(var(--rv-w, 1000px) * -1)); } }

.rv-card {
  position: relative; flex: 0 0 auto; width: clamp(280px, 27vw, 380px); min-height: 250px; margin-right: 20px; padding: 26px 26px 22px;
  display: flex; flex-direction: column; border-radius: 26px;
  background: #fff; border: 1px solid rgba(11, 15, 12, .09);
  box-shadow: 0 18px 40px -26px rgba(11, 40, 25, .35), 0 2px 6px -2px rgba(11, 40, 25, .08);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .28s ease-out, box-shadow .35s, border-color .35s;
}
.rv-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: conic-gradient(from var(--rv-ang), transparent 0 60%, var(--rv-green) 80%, var(--rv-lime) 92%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rvSpin 3s linear infinite;
}
@keyframes rvSpin { to { --rv-ang: 360deg; } }
.rv-card:hover { border-color: rgba(0, 210, 99, .5); box-shadow: 0 34px 70px -32px rgba(0, 168, 80, .55), 0 2px 8px -2px rgba(11, 40, 25, .1); }
.rv-card:hover::before { opacity: 1; }
.rv-q { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 4.2rem; line-height: .55; height: 30px; background: linear-gradient(135deg, #00B24A, #00D263 55%, #00B8A9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rv-card .rv-stars { margin: 12px 0 12px; }
.rv-card .rv-stars svg { width: 16px; height: 16px; }
.rv-text { font-size: .97rem; line-height: 1.62; color: rgba(11, 15, 12, .8); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.rv-by { display: flex; align-items: center; gap: 13px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(11, 15, 12, .08); }
.rv-av {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1rem; color: #04120a; background: var(--g);
}
.rv-av::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid transparent; background: conic-gradient(from var(--rv-ang), rgba(0,210,99,0) 0 55%, rgba(0,210,99,.95) 85%, rgba(0,210,99,0)) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rvSpin 5s linear infinite; opacity: .75; }
.rv-who { min-width: 0; flex: 1; }
.rv-who b { display: block; font-size: .95rem; font-weight: 700; color: #0B0F0C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-who small { display: block; font-size: .78rem; color: rgba(11, 15, 12, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-role { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(0, 210, 99, .12); color: #00823F; border: 1px solid rgba(0, 210, 99, .3); }

/* ---------- empty state ---------- */
.rv-empty { position: relative; z-index: 1; max-width: 560px; margin: clamp(34px, 4vw, 56px) auto 0; padding: 0 var(--gut, 24px); text-align: center; }
.rv-empty-card { padding: 34px 28px; border-radius: 26px; background: #fff; border: 1px dashed rgba(11,15,12,.22); box-shadow: 0 18px 40px -28px rgba(11,40,25,.3); }
.rv-empty-card p { color: rgba(11,15,12,.7); margin-bottom: 20px; font-size: 1rem; }

/* ---------- write-a-review dialog ---------- */
.rv-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(11, 15, 12, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rv-modal.open { display: flex; animation: rvFade .3s; }
@keyframes rvFade { from { opacity: 0; } }
.rv-dialog {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 36px); overflow: auto; padding: 34px clamp(22px, 4vw, 38px) 30px;
  border-radius: 30px; background: #fff; color: #0B0F0C; box-shadow: 0 60px 140px -30px rgba(0, 0, 0, .8); animation: rvPop .55s cubic-bezier(.16, 1, .3, 1);
}
.rv-dialog::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--rv-green), var(--rv-lime), var(--rv-teal)); background-size: 200% 100%; animation: rvShine 4s linear infinite; }
@keyframes rvPop { from { opacity: 0; transform: translateY(34px) scale(.94); } }
.rv-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(11, 15, 12, .06); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: .2s; }
.rv-x:hover { background: rgba(11, 15, 12, .12); transform: rotate(90deg); }
.rv-dialog h3 { font-family: 'Outfit', sans-serif; font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.rv-dialog .rv-sub { margin: 8px 0 22px; color: rgba(11, 15, 12, .6); font-size: .95rem; }
.rv-field { margin-bottom: 14px; }
.rv-field label, .rv-field .rv-lab { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: rgba(11, 15, 12, .75); }
.rv-field input, .rv-field textarea {
  width: 100%; padding: 13px 15px; border-radius: 14px; border: 1.5px solid rgba(11, 15, 12, .13); background: #fafbfa; font: inherit; font-size: .95rem; color: inherit; transition: border-color .2s, box-shadow .2s, background .2s;
}
.rv-field textarea { resize: vertical; min-height: 112px; }
.rv-field input:focus, .rv-field textarea:focus { outline: 0; border-color: var(--rv-green); background: #fff; box-shadow: 0 0 0 4px rgba(0, 210, 99, .16); }
.rv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rv-seg { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(11, 15, 12, .05); }
.rv-seg button { flex: 1; padding: 10px 6px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: .86rem; font-weight: 600; color: rgba(11, 15, 12, .6); cursor: pointer; transition: .2s; }
.rv-seg button.on { background: #fff; color: #0B0F0C; box-shadow: 0 4px 14px -4px rgba(11, 15, 12, .25); }
.rv-pick { display: flex; align-items: center; gap: 4px; }
.rv-pick button { border: 0; background: none; padding: 2px; cursor: pointer; color: rgba(11, 15, 12, .18); transition: transform .2s, color .2s; }
.rv-pick button svg { width: 34px; height: 34px; display: block; }
.rv-pick button.on { color: var(--rv-gold); filter: drop-shadow(0 4px 8px rgba(255, 200, 61, .5)); }
.rv-pick button:hover { transform: scale(1.22) rotate(-6deg); }
.rv-pick-label { margin-left: 10px; font-size: .86rem; font-weight: 700; color: var(--rv-green); min-width: 90px; }
.rv-count { text-align: right; font-size: .72rem; color: rgba(11, 15, 12, .45); margin-top: 4px; }
.rv-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.rv-err { display: none; margin: 4px 0 12px; padding: 10px 14px; border-radius: 12px; background: #FDECEC; color: #B3261E; font-size: .86rem; font-weight: 600; }
.rv-err.show { display: block; animation: rvShake .4s; }
@keyframes rvShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.rv-send { width: 100%; justify-content: center; margin-top: 4px; padding: 16px; background: #0B0F0C; color: #fff; }
.rv-send::before { display: none; }
.rv-send:hover { box-shadow: 0 18px 40px -14px rgba(11, 15, 12, .6); }
.rv-send[disabled] { opacity: .6; cursor: progress; }
.rv-priv { margin-top: 12px; text-align: center; font-size: .74rem; color: rgba(11, 15, 12, .5); }
.rv-done { display: none; text-align: center; padding: 20px 0 6px; }
.rv-done.show { display: block; }
.rv-done h3 { margin-top: 18px; }
.rv-done p { margin-top: 10px; color: rgba(11, 15, 12, .65); }
.rv-check { width: 92px; height: 92px; margin: 0 auto; }
.rv-check circle { fill: none; stroke: var(--rv-green); stroke-width: 4; stroke-dasharray: 290; stroke-dashoffset: 290; animation: rvDraw .7s .1s forwards; }
.rv-check path { fill: none; stroke: var(--rv-green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: rvDraw .5s .65s forwards; }
@keyframes rvDraw { to { stroke-dashoffset: 0; } }
.rv-confetti { position: fixed; left: 50%; top: 42%; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; z-index: 100010; }
body.rv-lock { overflow: hidden; }

@media (max-width: 640px) {
  .rv { margin-left: 10px; margin-right: 10px; border-radius: 28px; }
  .rv-stage { transform: rotate(-1.5deg) scale(1.08); }
  .rv-stat-sep { display: none; }
  .rv-two { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .rv *, .rv *::before, .rv *::after { animation: none !important; transition: none !important; }
  .rv-w > span, .rv-stats, .rv-row { transform: none !important; opacity: 1 !important; }
  .rv-stage { transform: none; }
  .rv-card[aria-hidden="true"] { display: none; }
  .rv-row { overflow-x: auto; }
  .rv-track { width: auto; }
}