:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f8f6ff;
  background: #090a12;
  font-synthesis: none;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 18% 10%, #34205c 0, transparent 38%),
              radial-gradient(ellipse at 90% 75%, #092c49 0, transparent 42%), #090a12;
}
.shell { width: min(100% - 28px, 1020px); margin: auto; padding: 30px 0; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.wordmark { font-size: 17px; font-weight: 900; letter-spacing: .16em; white-space: nowrap; }
.wordmark span { color: #c57bff; }
.eyebrow { font-size: 10px; letter-spacing: .13em; color: #a8a5bc; text-align: right; }
a:focus-visible { outline: 3px solid #5ee7ff; outline-offset: 5px; }
.review-stage {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  padding: 40px 20px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #ffffff16;
  border-radius: 32px;
  background: radial-gradient(circle at 18% 24%, #a328a544, transparent 35%),
              radial-gradient(circle at 83% 80%, #087ba944, transparent 39%),
              linear-gradient(135deg, #100e23, #0a1427 65%, #130c24);
}
.review-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid #ffffff13;
  border-radius: 25px;
  pointer-events: none;
}
.ambient { position: absolute; width: 270px; height: 270px; border: 1px solid #ffffff18; border-radius: 35%; transform: rotate(35deg); pointer-events: none; }
.ambient-left { left: -180px; top: 13%; box-shadow: 0 0 100px #ec39d333; }
.ambient-right { right: -170px; bottom: 10%; box-shadow: 0 0 110px #27c8fa33; }
.stage-heading, .stage-caption { color: #c8b2df; font-size: 10px; font-weight: 750; letter-spacing: .24em; text-align: center; z-index: 1; }
.stage-heading { margin: 0 0 22px; }
.stage-caption { margin: 22px 0 0; color: #8f89ac; }
.panel {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 560px);
  padding: clamp(26px, 6vw, 52px);
  border: 1px solid #e3a7ff4a;
  border-radius: 28px;
  background: linear-gradient(145deg, #231c3af5, #101423fa 65%, #141b2cfa);
  box-shadow: 0 30px 90px #000b, 0 0 50px #a74eff24;
}
.glow { position: absolute; z-index: -1; width: 270px; height: 270px; top: -160px; left: calc(50% - 135px); background: #bb4aff; filter: blur(95px); opacity: .32; pointer-events: none; }
.diamond { text-align: center; font-size: 54px; line-height: 1; color: #ff5fdb; text-shadow: 0 0 25px #c338f7, 0 0 50px #2ac9ff; }
.overline { text-align: center; color: #c5a5ed; letter-spacing: .23em; font-size: 10px; font-weight: 700; margin: 24px 0 10px; }
h1 { text-align: center; font-size: clamp(28px, 6vw, 42px); letter-spacing: -.04em; line-height: 1.15; margin: 0; }
.intro { text-align: center; color: #c7c3d4; line-height: 1.6; max-width: 380px; margin: 16px auto 30px; }
.rating-action { text-align: center; }
.rating-prompt { margin: 0 0 12px; font-size: 15px; font-weight: 650; }
.rating-stars-link { display: inline-block; color: #ffc943; font-size: clamp(36px, 9vw, 52px); letter-spacing: 1px; line-height: 1.2; text-decoration: none; text-shadow: 0 0 18px #ffb22b48; }
.rating-stars-link:hover, .rating-stars-link:focus-visible { color: #ffdb76; }
.rating-help { font-size: 13px; color: #d6c2ee; margin: 12px 0 25px; }
.primary { display: block; width: 100%; background: linear-gradient(100deg, #f448c8, #854cff 58%, #29b7e7); color: white; font: inherit; font-weight: 800; border: 0; border-radius: 13px; padding: 17px 16px; text-decoration: none; cursor: pointer; box-shadow: 0 10px 30px #913cf53b; }
.primary:hover { filter: brightness(1.1); }
.note { font-size: 12px; color: #b6b1c7; line-height: 1.55; margin: 16px 0 0; }
.live-reviews { position: relative; z-index: 2; width: min(100%, 940px); margin: 36px auto 20px; padding: 30px 22px; border: 1px solid rgba(168,113,255,.3); border-radius: 24px; background: rgba(11,12,28,.88); box-shadow: 0 0 40px rgba(159,53,233,.12); text-align: center; }
.live-reviews h2 { font-size: clamp(1.45rem, 3vw, 2rem); margin: 6px 0; }
.live-subtitle, .live-review-status { color: #bdbbd2; font-size: .9rem; line-height: 1.6; }
.google-rating-summary { margin: 18px auto 4px; display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; }
.google-rating-summary[hidden], .google-business-link[hidden] { display: none; }
.rating-average { font-size: 1.35rem; font-weight: 800; color: #ffcb57; }
.rating-total { color: #cac5dc; font-size: .87rem; }
.live-review-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 24px 0 14px; text-align: left; }
.live-review-cards:empty { display: none; }
.live-review-card { display: flex; flex-direction: column; gap: 12px; border: 1px solid rgba(106,206,255,.23); border-radius: 16px; background: linear-gradient(145deg, rgba(23,25,51,.94), rgba(33,15,49,.94)); padding: 20px; overflow-wrap: anywhere; }
.review-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.live-review-author { color: #d7e8ff; font-weight: 750; }
.review-google-source { font-size: .76rem; color: #acdcf5; }
.live-review-stars { color: #ffca55; letter-spacing: 3px; font-size: 1.18rem; }
.live-review-quote { color: #f5f3ff; line-height: 1.55; white-space: pre-wrap; margin: 0; }
.review-card-footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: auto; }
.review-date { font-size: .75rem; color: #aaa6c1; }
.review-author-link, .google-business-link { color: #7adfff; text-decoration: underline; text-underline-offset: 4px; }
.review-author-link { font-size: .78rem; }
.google-business-link { display: inline-block; margin-top: 12px; font-weight: 650; }
.source-note { margin: 16px 0 0; font-size: .72rem; line-height: 1.5; color: #9c96ae; }
footer { text-align: center; color: #8f8ba4; font-size: 10px; letter-spacing: .14em; margin: 27px 0; }
footer strong { color: #d3a5ff; }
@media (max-width: 560px) {
  .review-stage { padding: 24px 12px; }
  .review-stage::before { inset: 8px; }
  .panel { padding: 26px 18px; }
  .stage-heading { letter-spacing: .13em; }
  .top { align-items: flex-start; }
  .eyebrow { max-width: 140px; }
  .live-reviews { padding: 25px 15px; }
}