:root {
       --ink: #12233B;
       --sub: #5B6B80;
       --ease: cubic-bezier(.22, .68, 0, 1);
   }


   /* ---------- Reveal animation ---------- */
   .reveal {
       opacity: 0;
       transform: translateY(22px);
       transition: opacity .6s ease, transform .6s ease;
       transition-delay: var(--d, 0s);
   }

   .reveal.is-visible {
       opacity: 1;
       transform: none;
   }

   .reveal-left {
       transform: translateX(-30px);
   }

   .reveal-right {
       transform: translateX(30px);
   }

   .reveal-zoom {
       transform: scale(.92);
   }

   .reveal-left.is-visible,
   .reveal-right.is-visible,
   .reveal-zoom.is-visible {
       transform: none;
   }


   .badges {
       max-width: 1080px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 48px;
       text-align: center;
   }

   .badge {
       opacity: 0;
       transform: translateY(26px);
       transition: opacity .7s var(--ease), transform .7s var(--ease);
   }

   .badge.show {
       opacity: 1;
       transform: translateY(0);
   }

   .badge:nth-child(1) {
       transition-delay: .05s;
   }

   .badge:nth-child(2) {
       transition-delay: .2s;
   }

   .badge:nth-child(3) {
       transition-delay: .35s;
   }

   .ring {
       position: relative;
       width: 190px;
       height: 190px;
       margin: 0 auto 28px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: transform .4s var(--ease);
   }

   .ring::before {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: 50%;
       border: 2px solid var(--ring-color);
       opacity: .55;
   }

   .ring::after {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: 50%;
       border: 2px solid var(--ring-color);
       transform: scale(1);
       opacity: 0;
   }

   .badge:hover .ring {
       transform: translateY(-6px);
   }

   .badge:hover .ring::after {
       animation: pulse-ring 1.1s var(--ease);
   }

   @keyframes pulse-ring {
       0% {
           transform: scale(1);
           opacity: .5;
       }

       100% {
           transform: scale(1.35);
           opacity: 0;
       }
   }

   .ring-blue {
       --ring-color: #8FBBE8;
       background: #EFF6FD;
   }

   .ring-amber {
       --ring-color: #E8C77E;
       background: #FDF6E8;
   }

   .ring-green {
       --ring-color: #8FD6AC;
       background: #EAFAF0;
   }

   .card {
       width: 128px;
       height: 128px;
       border-radius: 16px;
       background: #fff;
       box-shadow: 0 10px 24px rgba(18, 35, 59, 0.08);
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 6px;
       padding: 10px;
   }

   /* --- Google Search card --- */
   .search-row {
       width: 100%;
       display: flex;
       align-items: center;
       gap: 4px;
       background: #F1F3F4;
       border-radius: 20px;
       padding: 4px 8px;
   }

   .search-row svg {
       width: 12px;
       height: 12px;
       flex-shrink: 0;
   }

   .search-row span {
       font-size: 8px;
       color: #6B7280;
       font-weight: 600;
   }

   .rank-pill {
       width: 100%;
       display: flex;
       align-items: center;
       gap: 5px;
       margin-top: 6px;
       background: #E3F7EA;
       border-radius: 12px;
       padding: 3px 6px;
   }

   .rank-pill b {
       font-size: 10px;
       color: #1E9E52;
   }

   .rank-pill .bar {
       flex: 1;
       height: 4px;
       background: #B9E6C8;
       border-radius: 2px;
       overflow: hidden;
   }

   .rank-pill .bar i {
       display: block;
       height: 100%;
       width: 30%;
       background: #1E9E52;
       border-radius: 2px;
       transition: width .8s var(--ease) .1s;
   }

   .badge.show .rank-pill .bar i {
       width: 78%;
   }

   .rank-pill svg {
       width: 12px;
       height: 12px;
       transition: transform .8s var(--ease) .1s;
   }

   .badge.show .rank-pill svg {
       transform: translateX(3px) translateY(-2px);
   }

   /* --- Rating card --- */
   .avatars {
       display: flex;
       margin-bottom: 2px;
   }

   .avatars svg {
       width: 22px;
       height: 22px;
       margin-left: -6px;
   }

   .avatars svg:first-child {
       margin-left: 0;
   }

   .score {
       font-size: 22px;
       font-weight: 800;
       color: var(--ink);
       line-height: 1;
   }

   /* .stars {
       display: flex;
       gap: 1px;
       margin: 2px 0;
   } */

   .stars svg {
       width: 11px;
       height: 11px;
   }

   .card-label {
       font-size: 8px;
       color: var(--sub);
       font-weight: 600;
   }

   /* --- Local search card --- */
   .map {
       position: relative;
       width: 92px;
       height: 58px;
       border-radius: 8px;
       overflow: hidden;
       background: linear-gradient(135deg, #DCE9F6, #EAF1E2 60%, #E9E4D3);
   }

   .map .road {
       position: absolute;
       background: #fff;
   }

   .map .road.h {
       width: 100%;
       height: 4px;
       top: 24px;
   }

   .map .road.v {
       width: 4px;
       height: 100%;
       left: 40px;
   }

   .pin {
       position: absolute;
       top: -14px;
       left: 50%;
       transform: translateX(-50%);
       width: 22px;
       height: 22px;
       transition: top .5s var(--ease) .1s;
   }

   .badge.show .pin {
       top: 8px;
   }

   .top-pill {
       display: flex;
       align-items: center;
       gap: 4px;
       background: #fff;
       border-radius: 10px;
       padding: 3px 7px;
       margin-top: 6px;
       box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
   }

   .top-pill svg {
       width: 12px;
       height: 12px;
   }

   .top-pill span {
       font-size: 9px;
       font-weight: 800;
       color: var(--ink);
   }

   h3 {
       margin: 0 0 6px;
       font-size: 19px;
       font-weight: 800;
       color: var(--ink);
   }

   .badge p {
       margin: 0;
       font-size: 14px;
       color: var(--sub);
   }

   @media (max-width: 760px) {
       .badges {
           grid-template-columns: 1fr;
           gap: 56px;
       }
   }

   @media (prefers-reduced-motion: reduce) {

       .badge,
       .ring,
       .pin,
       .rank-pill .bar i,
       .rank-pill svg {
           transition: none !important;
           animation: none !important;
       }

       .badge {
           opacity: 1;
           transform: none;
       }
   }