/* ==========================================================
   VersaForge - SEO Landing Pages : ANIMATED VISUAL KIT
   ----------------------------------------------------------
   Shared by national-seo.php, global-seo.php and
   city-based-seo.php. No existing page loads this file, so it
   cannot affect anything already live.

   Namespaced .vx-* throughout, so it cannot collide with the
   .grs-*, .grx-*, .imx-* or Tailwind classes used elsewhere.

   HEIGHT CONTRACT
   .vx-scene is height:100%. Inside it the frame is a flex
   column and .vx-body is flex:1, with the main stage also
   flex:1. That means the visual always matches the text
   column exactly and absorbs any spare height instead of
   leaving a gap at the bottom.

   PERFORMANCE
   Every looping animation moves only transform and opacity
   (plus stroke-dashoffset, which stays on the SVG layer), so
   there is no layout thrash and no CLS.
   ========================================================== */

.vx {
  --vx-violet: #6A58E4;
  --vx-blue:   #4A86F5;
  --vx-cyan:   #28A8D9;
  --vx-green:  #10B981;
  --vx-amber:  #F59E0B;
  --vx-ink:    #111827;
  --vx-slate:  #475569;
  --vx-mute:   #5B6475;
  --vx-line:   #E6ECF5;
  --vx-tint:   #F8FAFF;
  --vx-mono:   'Inter', ui-monospace, monospace;
}

/* ==========================================================
   1. SHELL - used by every visual
   ========================================================== */
.vx-scene {
  position: relative;
  width: 100%;
  min-height: clamp(400px, 52vw, 500px);
  max-width: 580px;
  margin-inline: auto;
  /* CSS Grid, not flex: a single-cell grid gives .vx-frame an
     unambiguous 100%-height cell with no flex-basis resolution
     involved. flex:1 1 0% was found to still collapse
     unpredictably several levels deep in nested flex chains;
     grid removes that entire class of bug. */
  display: grid;
  grid-template-rows: 1fr;
  align-self: stretch;
  contain: layout paint;
  isolation: isolate;
}

.vx-scene::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(45% 45% at 32% 30%, rgba(106, 88, 228, .16), transparent 70%),
    radial-gradient(45% 45% at 70% 68%, rgba(40, 168, 217, .14), transparent 70%);
  filter: blur(30px);
  animation: vx-aurora 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes vx-aurora {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: .85; }
  33%      { transform: scale(1.12) rotate(7deg);  opacity: 1;   }
  66%      { transform: scale(.94)  rotate(-6deg); opacity: .7;  }
}

.vx-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 1.15rem;
  background: #fff;
  border: 1px solid var(--vx-line);
  box-shadow: 0 18px 44px -20px rgba(106, 88, 228, .30);
  overflow: hidden;
  animation: vx-float 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes vx-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

.vx-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.05rem;
  background: #F7F8FC;
  border-bottom: 1px solid #ECEFF6;
  min-width: 0;
}

.vx-dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
.vx-dot.r { background: #EF4444; }
.vx-dot.y { background: #F59E0B; }
.vx-dot.g { background: #10B981; }

.vx-url {
  flex: 1 1 0%;
  min-width: 0;
  margin-left: .45rem;
  height: 24px;
  border-radius: 999px;
  background: #EEF1F8;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .7rem;
  font: 600 11px/1 var(--vx-mono);
  color: var(--vx-slate);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vx-live {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 800 10px/1 var(--vx-mono);
  letter-spacing: .06em;
  color: var(--vx-violet);
}

.vx-blip {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  animation: vx-blip 1.5s ease-in-out infinite;
}

@keyframes vx-blip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .25; transform: scale(.7); }
}

.vx-body {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(.7rem, 1.8vw, 1rem);
  padding: clamp(.95rem, 2.4vw, 1.3rem);
}

/* The element that absorbs spare height */
.vx-stage {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vx-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .7rem .85rem;
  border-radius: .75rem;
  background: var(--vx-tint);
  border: 1px solid var(--vx-line);
  font: 700 14px/1 'Inter', sans-serif;
  color: var(--vx-ink);
  min-width: 0;
}

.vx-foot > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-pill {
  flex: 0 0 auto;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--vx-violet), var(--vx-blue));
  color: #fff;
  font: 800 10px/1 var(--vx-mono);
  letter-spacing: .05em;
  white-space: nowrap;
  animation: vx-glow 3s ease-in-out infinite;
}

@keyframes vx-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(106, 88, 228, 0); }
  50%      { box-shadow: 0 0 18px 0 rgba(106, 88, 228, .55); }
}

/* Ambient scan pass */
.vx-beam {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.vx-beam::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(180deg, transparent, rgba(106, 88, 228, .11), transparent);
  animation: vx-sweep 6s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform;
}

@keyframes vx-sweep {
  0%   { transform: translate3d(0, 0, 0);    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate3d(0, 280%, 0); opacity: 0; }
}

/* Shared entrance */
@keyframes vx-rise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ==========================================================
   2. STAT STRIP - reusable footer metrics
   ========================================================== */
.vx-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.vx-stat {
  padding: .6rem .4rem;
  border-radius: .7rem;
  background: var(--vx-tint);
  border: 1px solid var(--vx-line);
  text-align: center;
  animation: vx-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}

.vx-stat:nth-child(2) { animation-delay: .1s; }
.vx-stat:nth-child(3) { animation-delay: .2s; }

.vx-stat b {
  display: block;
  font: 800 clamp(14px, 2.6vw, 18px)/1 'Inter', sans-serif;
  color: var(--vx-violet);
}

.vx-stat:nth-child(2) b { color: var(--vx-blue); }
.vx-stat:nth-child(3) b { color: #059669; }

.vx-stat span {
  display: block;
  margin-top: .3rem;
  font: 700 12px/1.2 var(--vx-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--vx-mute);
}

/* ==========================================================
   3. MAP - nationwide / city coverage
   ========================================================== */
.vx-map {
  position: relative;
  flex: 1 1 0%;
  min-height: 150px;
  border-radius: .8rem;
  overflow: hidden;
  background: linear-gradient(160deg, #F2F6FF, #EDF4FB);
  border: 1px solid var(--vx-line);
}

.vx-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.vx-map-grid line { stroke: rgba(106, 88, 228, .10); stroke-width: 1; }

.vx-node {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--vx-violet);
  box-shadow: 0 0 0 3px rgba(106, 88, 228, .16);
  animation: vx-node 4s ease-in-out infinite;
  will-change: transform;
}

.vx-node::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--vx-violet);
  opacity: 0;
  animation: vx-ping 4s cubic-bezier(.2, .7, .3, 1) infinite;
  animation-delay: inherit;
}

@keyframes vx-node {
  0%, 100% { transform: scale(1); }
  10%      { transform: scale(1.5); }
  25%      { transform: scale(1); }
}

@keyframes vx-ping {
  0%   { transform: scale(.6); opacity: .8; }
  30%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

.vx-node.n2 { animation-delay: .5s;  background: var(--vx-blue); box-shadow: 0 0 0 3px rgba(74,134,245,.16); }
.vx-node.n3 { animation-delay: 1s;   background: var(--vx-cyan); box-shadow: 0 0 0 3px rgba(40,168,217,.16); }
.vx-node.n4 { animation-delay: 1.5s; background: var(--vx-green); box-shadow: 0 0 0 3px rgba(16,185,129,.16); }
.vx-node.n5 { animation-delay: 2s;   background: var(--vx-amber); box-shadow: 0 0 0 3px rgba(245,158,11,.16); }
.vx-node.n6 { animation-delay: 2.5s; }

.vx-node.n2::after { border-color: var(--vx-blue); }
.vx-node.n3::after { border-color: var(--vx-cyan); }
.vx-node.n4::after { border-color: var(--vx-green); }
.vx-node.n5::after { border-color: var(--vx-amber); }

/* Connecting arcs that draw themselves */
.vx-arc {
  fill: none;
  stroke: rgba(106, 88, 228, .45);
  stroke-width: 1.5;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: vx-arc 4s ease-in-out infinite;
}

.vx-arc:nth-of-type(2) { animation-delay: .5s; }
.vx-arc:nth-of-type(3) { animation-delay: 1s; }
.vx-arc:nth-of-type(4) { animation-delay: 1.5s; }
.vx-arc:nth-of-type(5) { animation-delay: 2s; }

@keyframes vx-arc {
  0%       { stroke-dashoffset: 200; opacity: 0; }
  15%      { opacity: 1; }
  50%, 80% { stroke-dashoffset: 0; opacity: 1; }
  100%     { stroke-dashoffset: 0; opacity: 0; }
}

.vx-map-chip {
  position: absolute;
  z-index: 2;
  top: .6rem;
  left: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--vx-line);
  font: 700 10px/1 var(--vx-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vx-mute);
}

/* ==========================================================
   4. RANK ROWS - keyword / city ranking list
   ========================================================== */
.vx-rows { display: grid; gap: .42rem; flex: 0 0 auto; }

.vx-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .65rem;
  border-radius: .65rem;
  border: 1px solid var(--vx-line);
  background: #fff;
  min-width: 0;
  animation: vx-rise .7s cubic-bezier(.2, .8, .2, 1) both;
}

.vx-row:nth-child(2) { animation-delay: .1s; }
.vx-row:nth-child(3) { animation-delay: .2s; }
.vx-row:nth-child(4) { animation-delay: .3s; }
.vx-row:nth-child(5) { animation-delay: .4s; }

.vx-row-n {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: .4rem;
  background: linear-gradient(135deg, var(--vx-violet), var(--vx-blue));
  color: #fff;
  font: 800 10px/1 var(--vx-mono);
}

.vx-row-t {
  flex: 1 1 0%;
  min-width: 0;
  font: 600 14px/1.3 'Inter', sans-serif;
  color: var(--vx-slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-row-v {
  flex: 0 0 auto;
  font: 800 11px/1 var(--vx-mono);
  color: #059669;
}

/* Signal equaliser */
.vx-sig { display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: 0 0 auto; }

.vx-sig i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--vx-green);
  transform-origin: bottom;
  animation: vx-eq 1.4s ease-in-out infinite;
}

.vx-sig i:nth-child(2) { animation-delay: .18s; }
.vx-sig i:nth-child(3) { animation-delay: .36s; }
.vx-sig i:nth-child(4) { animation-delay: .54s; }

@keyframes vx-eq {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}

/* ==========================================================
   5. CHART - self-drawing growth curve
   ========================================================== */
.vx-plot { position: relative; flex: 1 1 0%; min-height: 120px; display: flex; }
.vx-plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vx-plot-grid line { stroke: var(--vx-line); stroke-width: 1; }

.vx-line {
  fill: none;
  stroke: url(#vxStroke);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation: vx-draw 6s cubic-bezier(.5, 0, .2, 1) infinite;
}

@keyframes vx-draw {
  0%       { stroke-dashoffset: 640; }
  55%, 88% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 0; opacity: 0; }
}

.vx-area {
  fill: url(#vxFill);
  opacity: 0;
  transform-origin: bottom;
  animation: vx-areain 6s ease-out infinite;
}

@keyframes vx-areain {
  0%, 18%  { opacity: 0; transform: scaleY(.4); }
  60%, 88% { opacity: 1; transform: scaleY(1); }
  100%     { opacity: 0; transform: scaleY(1); }
}

.vx-runner {
  fill: #fff;
  stroke: var(--vx-violet);
  stroke-width: 3;
  offset-path: var(--vx-path);
  offset-rotate: 0deg;
  animation: vx-run 6s cubic-bezier(.5, 0, .2, 1) infinite;
}

@keyframes vx-run {
  0%       { offset-distance: 0%;   opacity: 0; }
  8%       { opacity: 1; }
  55%, 88% { offset-distance: 100%; opacity: 1; }
  100%     { offset-distance: 100%; opacity: 0; }
}

.vx-plot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex: 0 0 auto;
  margin-bottom: .5rem;
}

.vx-plot-k {
  font: 700 12px/1 var(--vx-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vx-mute);
}

.vx-plot-v {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font: 800 12.5px/1 'Inter', sans-serif;
  color: #059669;
}

/* ==========================================================
   6. GAUGE - ROI / score dial
   ========================================================== */
.vx-gauge {
  flex: 1 1 0%;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
}

.vx-gauge svg { width: min(100%, clamp(150px, 34vw, 200px)); height: auto; display: block; }

.vx-gauge-track { fill: none; stroke: #E9EDF6; stroke-width: 11; stroke-linecap: round; }

.vx-gauge-arc {
  fill: none;
  stroke: url(#vxStroke);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 251;
  stroke-dashoffset: 251;
  animation: vx-gauge 5s cubic-bezier(.3, .8, .2, 1) infinite;
}

@keyframes vx-gauge {
  0%       { stroke-dashoffset: 251; }
  45%, 85% { stroke-dashoffset: var(--vx-off, 60); }
  100%     { stroke-dashoffset: 251; }
}

.vx-gauge-label {
  position: absolute;
  inset: auto 0 18%;
  text-align: center;
  pointer-events: none;
}

.vx-gauge-v {
  font: 800 clamp(24px, 5vw, 34px)/1 'Inter', sans-serif;
  color: var(--vx-violet);
}

.vx-gauge-k {
  margin-top: .3rem;
  font: 700 10px/1.2 var(--vx-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vx-mute);
}

/* ==========================================================
   7. CHECKLIST - self-ticking capability list
   ========================================================== */
.vx-check { display: grid; gap: .5rem; flex: 1 1 0%; align-content: center; }

.vx-check-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem;
  border-radius: .6rem;
  background: var(--vx-tint);
  border: 1px solid var(--vx-line);
  font: 600 14.5px/1.35 'Inter', sans-serif;
  color: var(--vx-slate);
  min-width: 0;
}

.vx-tick {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--vx-green);
  color: #fff;
  font: 700 10px/16px 'Inter', sans-serif;
  text-align: center;
  transform: scale(0);
  animation: vx-tickin 6s cubic-bezier(.3, 1.6, .5, 1) infinite;
}

.vx-check-row:nth-child(1) .vx-tick { animation-delay: .1s; }
.vx-check-row:nth-child(2) .vx-tick { animation-delay: .45s; }
.vx-check-row:nth-child(3) .vx-tick { animation-delay: .8s; }
.vx-check-row:nth-child(4) .vx-tick { animation-delay: 1.15s; }
.vx-check-row:nth-child(5) .vx-tick { animation-delay: 1.5s; }
.vx-check-row:nth-child(6) .vx-tick { animation-delay: 1.85s; }

@keyframes vx-tickin {
  0%       { transform: scale(0); }
  10%, 86% { transform: scale(1); }
  100%     { transform: scale(0); }
}

.vx-check-t {
  flex: 1 1 0%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================
   8. NETWORK - backlink / authority graph
   ========================================================== */
.vx-net {
  position: relative;
  flex: 1 1 0%;
  min-height: 160px;
  display: grid;
  place-items: center;
}

.vx-net-core {
  position: relative;
  z-index: 2;
  width: clamp(52px, 12vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--vx-violet), var(--vx-blue));
  box-shadow: 0 10px 26px -10px rgba(106, 88, 228, .7);
  animation: vx-corebeat 3.6s ease-in-out infinite;
}

@keyframes vx-corebeat {
  0%, 100% { transform: scale(1); }
  10%      { transform: scale(1.07); }
  24%      { transform: scale(1); }
}

.vx-net-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.vx-net-link {
  stroke: rgba(106, 88, 228, .35);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  animation: vx-flow 2.4s linear infinite;
}

@keyframes vx-flow { to { stroke-dashoffset: -22; } }

.vx-net-pip {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--vx-line);
  box-shadow: 0 5px 14px -6px rgba(17, 24, 39, .28);
  color: var(--vx-violet);
  z-index: 3;
  animation: vx-pip 3.6s ease-in-out infinite;
}

@keyframes vx-pip {
  0%, 62%, 100% { transform: scale(1); }
  12%           { transform: scale(1.22); }
  30%           { transform: scale(1); }
}

/* ==========================================================
   9. SERP - search result preview
   ========================================================== */
.vx-serp { display: grid; gap: .45rem; flex: 1 1 0%; align-content: center; }

.vx-serp-search {
  display: flex;
  align-items: center;
  gap: .45rem;
  height: 34px;
  padding: 0 .75rem;
  border-radius: 999px;
  background: var(--vx-tint);
  border: 1px solid var(--vx-line);
  font: 600 14px/1 'Inter', sans-serif;
  color: var(--vx-ink);
  margin-bottom: .3rem;
}

.vx-caret {
  display: inline-block;
  width: 2px;
  height: 12px;
  background: var(--vx-violet);
  animation: vx-caret 1.05s steps(1) infinite;
}

@keyframes vx-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.vx-serp-item {
  padding: .5rem .65rem;
  border-radius: .6rem;
  border: 1px solid var(--vx-line);
  background: #fff;
  min-width: 0;
}

.vx-serp-item.is-top {
  border-color: rgba(106, 88, 228, .38);
  background: linear-gradient(135deg, rgba(106, 88, 228, .07), rgba(74, 134, 245, .04));
}

.vx-serp-u {
  font: 600 12px/1.3 var(--vx-mono);
  color: #4B8A5C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-serp-t {
  margin-top: .12rem;
  font: 700 14px/1.3 'Inter', sans-serif;
  color: var(--vx-violet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-serp-item:not(.is-top) .vx-serp-t { color: var(--vx-slate); font-weight: 600; }
.vx-serp-item:not(.is-top) .vx-serp-u { color: #A3ABBA; }

/* ==========================================================
   12. CITY COVERAGE GRID - nationwide reach without a map
   A wave of city chips lighting up in sequence. Only opacity
   and transform animate, so it stays on the compositor.
   ========================================================== */
.vx-cov-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding-bottom: .7rem;
  border-bottom: 1px dashed var(--vx-line);
}

.vx-cov-k {
  font: 700 10px/1.3 var(--vx-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vx-mute);
}

.vx-cov-v {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  font: 800 clamp(22px, 4.4vw, 30px)/1 'Inter', sans-serif;
  background: linear-gradient(135deg, var(--vx-violet), var(--vx-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vx-cov-v small {
  font: 700 10px/1 var(--vx-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vx-mute);
  -webkit-text-fill-color: var(--vx-mute);
}

.vx-cities {
  flex: 1 1 0%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  align-content: center;
}

.vx-city {
  position: relative;
  padding: .5rem .35rem;
  border-radius: .6rem;
  border: 1px solid var(--vx-line);
  background: #fff;
  text-align: center;
  overflow: hidden;
  min-width: 0;
}

/* The wave that sweeps the grid */
.vx-city::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(106, 88, 228, .16), rgba(74, 134, 245, .07));
  opacity: 0;
  animation: vx-citylit 6s ease-in-out infinite;
  pointer-events: none;
}

.vx-city:nth-child(1)::after  { animation-delay: 0s;    }
.vx-city:nth-child(2)::after  { animation-delay: .18s;  }
.vx-city:nth-child(3)::after  { animation-delay: .36s;  }
.vx-city:nth-child(4)::after  { animation-delay: .54s;  }
.vx-city:nth-child(5)::after  { animation-delay: .72s;  }
.vx-city:nth-child(6)::after  { animation-delay: .90s;  }
.vx-city:nth-child(7)::after  { animation-delay: 1.08s; }
.vx-city:nth-child(8)::after  { animation-delay: 1.26s; }
.vx-city:nth-child(9)::after  { animation-delay: 1.44s; }
.vx-city:nth-child(10)::after { animation-delay: 1.62s; }
.vx-city:nth-child(11)::after { animation-delay: 1.80s; }
.vx-city:nth-child(12)::after { animation-delay: 1.98s; }

@keyframes vx-citylit {
  0%, 62%, 100% { opacity: 0; }
  8%            { opacity: 1; }
  34%           { opacity: 0; }
}

.vx-city-n {
  position: relative;
  z-index: 1;
  display: block;
  font: 700 10.5px/1.2 'Inter', sans-serif;
  color: var(--vx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-city-r {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-top: .3rem;
  padding: .1rem .34rem;
  border-radius: 999px;
  background: rgba(106, 88, 228, .10);
  color: var(--vx-violet);
  font: 800 10px/1.4 var(--vx-mono);
  letter-spacing: .04em;
  transform: scale(.82);
  animation: vx-citybadge 6s cubic-bezier(.3, 1.5, .5, 1) infinite;
}

.vx-city:nth-child(1) .vx-city-r  { animation-delay: 0s;    }
.vx-city:nth-child(2) .vx-city-r  { animation-delay: .18s;  }
.vx-city:nth-child(3) .vx-city-r  { animation-delay: .36s;  }
.vx-city:nth-child(4) .vx-city-r  { animation-delay: .54s;  }
.vx-city:nth-child(5) .vx-city-r  { animation-delay: .72s;  }
.vx-city:nth-child(6) .vx-city-r  { animation-delay: .90s;  }
.vx-city:nth-child(7) .vx-city-r  { animation-delay: 1.08s; }
.vx-city:nth-child(8) .vx-city-r  { animation-delay: 1.26s; }
.vx-city:nth-child(9) .vx-city-r  { animation-delay: 1.44s; }
.vx-city:nth-child(10) .vx-city-r { animation-delay: 1.62s; }
.vx-city:nth-child(11) .vx-city-r { animation-delay: 1.80s; }
.vx-city:nth-child(12) .vx-city-r { animation-delay: 1.98s; }

@keyframes vx-citybadge {
  0%, 62%, 100% { transform: scale(.82); }
  10%           { transform: scale(1.06); }
  34%           { transform: scale(1); }
}

@media (max-width: 400px) {
  .vx-cities  { gap: .35rem; }
  .vx-city-n  { font-size: 10px; }
  .vx-city-r  { font-size: 10px; }
}

/* ==========================================================
   13. GLOBE - worldwide reach (global-seo hero)
   ========================================================== */
.vx-globe {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  display: grid;
  place-items: center;
}

.vx-globe-wrap {
  position: relative;
  width: min(100%, clamp(170px, 38vw, 225px));
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.vx-globe-ball {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), transparent 55%),
    linear-gradient(150deg, var(--vx-violet), var(--vx-blue) 55%, var(--vx-cyan));
  box-shadow: 0 16px 38px -14px rgba(106, 88, 228, .7);
  overflow: hidden;
}

/* Meridians drifting across the sphere */
.vx-globe-ball::before,
.vx-globe-ball::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .38);
  animation: vx-spin 9s linear infinite;
}

.vx-globe-ball::before { transform: scaleX(.42); }
.vx-globe-ball::after  { transform: scaleX(.78); animation-duration: 13s; animation-direction: reverse; }

@keyframes vx-spin {
  0%   { transform: scaleX(.15) rotate(0deg); }
  50%  { transform: scaleX(.9)  rotate(0deg); }
  100% { transform: scaleX(.15) rotate(0deg); }
}

.vx-globe-eq {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .5);
  transform: scaleY(.28);
  pointer-events: none;
}

/* Orbit ring with markers */
.vx-orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(106, 88, 228, .3);
  animation: vx-orbit 18s linear infinite;
  will-change: transform;
}

@keyframes vx-orbit { to { transform: rotate(360deg); } }

.vx-orbit-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--vx-line);
  box-shadow: 0 5px 14px -6px rgba(17, 24, 39, .3);
  color: var(--vx-violet);
  font: 800 10px/1 var(--vx-mono);
  animation: vx-counterspin 18s linear infinite;
}

@keyframes vx-counterspin { to { transform: rotate(-360deg); } }

.vx-orbit-pin.p1 { top: 0;    left: 50%; }
.vx-orbit-pin.p2 { top: 50%;  left: 100%; }
.vx-orbit-pin.p3 { top: 100%; left: 50%; }
.vx-orbit-pin.p4 { top: 50%;  left: 0; }

/* Region badges around the globe */
.vx-globe-tag {
  position: absolute;
  padding: .26rem .5rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--vx-line);
  box-shadow: 0 5px 14px -8px rgba(17, 24, 39, .28);
  font: 800 10px/1 var(--vx-mono);
  letter-spacing: .06em;
  color: var(--vx-mute);
  white-space: nowrap;
  opacity: 0;
  animation: vx-tagpop 5.6s ease-in-out infinite;
}

.vx-globe-tag.t1 { top: 4%;  left: -2%;  animation-delay: 0s;   }
.vx-globe-tag.t2 { top: 22%; right: -4%; animation-delay: .7s;  }
.vx-globe-tag.t3 { bottom: 20%; left: -6%; animation-delay: 1.4s; }
.vx-globe-tag.t4 { bottom: 2%; right: -2%; animation-delay: 2.1s; }

@keyframes vx-tagpop {
  0%, 58%, 100% { opacity: 0; transform: translate3d(0, 6px, 0); }
  10%, 44%      { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ==========================================================
   14. LANGUAGE SWITCHER - multilingual / hreflang
   ========================================================== */
.vx-lang { display: grid; gap: .45rem; flex: 1 1 0%; align-content: center; }

.vx-lang-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .65rem;
  border-radius: .65rem;
  border: 1px solid var(--vx-line);
  background: #fff;
  overflow: hidden;
  min-width: 0;
}

.vx-lang-row::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(106, 88, 228, .14), rgba(40, 168, 217, .06));
  opacity: 0;
  animation: vx-langlit 5.5s ease-in-out infinite;
  pointer-events: none;
}

.vx-lang-row:nth-child(2)::after { animation-delay: .55s; }
.vx-lang-row:nth-child(3)::after { animation-delay: 1.1s; }
.vx-lang-row:nth-child(4)::after { animation-delay: 1.65s; }
.vx-lang-row:nth-child(5)::after { animation-delay: 2.2s; }

@keyframes vx-langlit {
  0%, 55%, 100% { opacity: 0; }
  9%            { opacity: 1; }
  32%           { opacity: 0; }
}

.vx-lang-code {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 38px;
  padding: .2rem .35rem;
  border-radius: .4rem;
  background: linear-gradient(135deg, var(--vx-violet), var(--vx-blue));
  color: #fff;
  text-align: center;
  font: 800 12px/1.4 var(--vx-mono);
  letter-spacing: .04em;
}

.vx-lang-t {
  position: relative;
  z-index: 1;
  flex: 1 1 0%;
  min-width: 0;
  font: 600 14px/1.35 'Inter', sans-serif;
  color: var(--vx-slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-lang-ok {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  font: 700 12px/1 var(--vx-mono);
  letter-spacing: .05em;
  color: #059669;
}

/* ==========================================================
   15. BUSINESS PROFILE - Google Business card (city page)
   ========================================================== */
.vx-gmb {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: .8rem;
  border-radius: .8rem;
  border: 1px solid var(--vx-line);
  background: linear-gradient(160deg, #FFFFFF, #F7F9FF);
}

.vx-gmb-top { display: flex; align-items: center; gap: .6rem; min-width: 0; }

.vx-gmb-logo {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: .6rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--vx-violet), var(--vx-blue));
  font: 800 15px/1 'Inter', sans-serif;
}

.vx-gmb-name {
  font: 800 14px/1.25 'Inter', sans-serif;
  color: var(--vx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-gmb-meta {
  margin-top: .18rem;
  font: 600 12px/1.3 var(--vx-mono);
  color: var(--vx-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-gmb-stars { color: var(--vx-amber); font-size: 11px; letter-spacing: 1px; }

.vx-gmb-verify {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .22rem .45rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, .12);
  color: #059669;
  font: 800 10px/1.4 var(--vx-mono);
  letter-spacing: .05em;
  animation: vx-verify 3s ease-in-out infinite;
}

@keyframes vx-verify {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

.vx-gmb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}

.vx-gmb-cell {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .5rem;
  border-radius: .5rem;
  background: #fff;
  border: 1px solid var(--vx-line);
  font: 600 14px/1.3 var(--vx-mono);
  color: var(--vx-mute);
  min-width: 0;
}

.vx-gmb-cell i { color: var(--vx-violet); flex: 0 0 auto; }
.vx-gmb-cell span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================
   16. RICH SNIPPET - schema markup preview
   ========================================================== */
.vx-snippet {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
}

.vx-snip-card {
  padding: .7rem .75rem;
  border-radius: .7rem;
  border: 1px solid rgba(106, 88, 228, .28);
  background: #fff;
  box-shadow: 0 10px 26px -18px rgba(106, 88, 228, .5);
  min-width: 0;
}

.vx-snip-u {
  font: 600 12px/1.3 var(--vx-mono);
  color: #4B8A5C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-snip-t {
  margin-top: .15rem;
  font: 700 14px/1.3 'Inter', sans-serif;
  color: var(--vx-violet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-snip-rate {
  margin-top: .32rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  font: 600 12px/1 var(--vx-mono);
  color: var(--vx-mute);
}

.vx-snip-rate b { color: var(--vx-amber); letter-spacing: 1px; font-size: 11px; }

.vx-snip-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }

.vx-snip-badge {
  padding: .2rem .45rem;
  border-radius: 999px;
  background: rgba(106, 88, 228, .08);
  color: var(--vx-violet);
  font: 800 10px/1.5 var(--vx-mono);
  letter-spacing: .05em;
  transform: scale(.85);
  opacity: 0;
  animation: vx-badgein 5s cubic-bezier(.3, 1.5, .5, 1) infinite;
}

.vx-snip-badge:nth-child(2) { animation-delay: .35s; }
.vx-snip-badge:nth-child(3) { animation-delay: .7s;  }
.vx-snip-badge:nth-child(4) { animation-delay: 1.05s; }

@keyframes vx-badgein {
  0%       { opacity: 0; transform: scale(.85); }
  12%, 84% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(.85); }
}

.vx-snip-code {
  padding: .55rem .65rem;
  border-radius: .6rem;
  background: #0B0F19;
  color: #A5B4FC;
  font: 600 12px/2.6 var(--vx-mono);
  overflow: hidden;
}

.vx-snip-code em { color: #6A58E4; font-style: normal; }
.vx-snip-code b  { color: #F9A8D4; font-weight: 600; }

@media (max-width: 400px) {
  .vx-snip-code  { font-size: 10px; }
  .vx-gmb-cell   { font-size: 10px; }
}

/* ==========================================================
   17. REGION COVERAGE BARS - statewide reach by region
   Tracks fill with scaleX only, so nothing reflows.
   ========================================================== */
.vx-cov {
  flex: 1 1 0%;
  min-height: 0;
  display: grid;
  gap: .7rem;
  align-content: center;
}

.vx-cov-row { display: grid; gap: .3rem; min-width: 0; }

.vx-cov-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
}

.vx-cov-name {
  font: 700 11px/1.3 'Inter', sans-serif;
  color: var(--vx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-cov-val {
  flex: 0 0 auto;
  font: 800 10.5px/1 var(--vx-mono);
  color: var(--vx-violet);
}

.vx-cov-row:nth-child(3) .vx-cov-val { color: var(--vx-blue); }
.vx-cov-row:nth-child(4) .vx-cov-val { color: var(--vx-cyan); }
.vx-cov-row:nth-child(5) .vx-cov-val { color: #059669; }

.vx-cov-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #EDF0F7;
  overflow: hidden;
}

.vx-cov-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vx-violet), var(--vx-blue));
  transform-origin: left;
  transform: scaleX(0);
  animation: vx-covfill 6s cubic-bezier(.4, 0, .2, 1) infinite;
  will-change: transform;
}

.vx-cov-row:nth-child(2) .vx-cov-fill { animation-delay: .15s; }
.vx-cov-row:nth-child(3) .vx-cov-fill { animation-delay: .3s;  background: linear-gradient(90deg, var(--vx-violet), var(--vx-cyan)); }
.vx-cov-row:nth-child(4) .vx-cov-fill { animation-delay: .45s; background: linear-gradient(90deg, var(--vx-blue), var(--vx-cyan)); }
.vx-cov-row:nth-child(5) .vx-cov-fill { animation-delay: .6s;  background: linear-gradient(90deg, var(--vx-cyan), var(--vx-green)); }

@keyframes vx-covfill {
  0%       { transform: scaleX(0); }
  42%, 84% { transform: scaleX(var(--vx-w, .9)); }
  100%     { transform: scaleX(0); }
}

/* Travelling highlight along the filled track */
.vx-cov-track::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -35%;
  width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: vx-covshine 6s ease-in-out infinite;
  pointer-events: none;
}

.vx-cov-row:nth-child(2) .vx-cov-track::after { animation-delay: .15s; }
.vx-cov-row:nth-child(3) .vx-cov-track::after { animation-delay: .3s;  }
.vx-cov-row:nth-child(4) .vx-cov-track::after { animation-delay: .45s; }
.vx-cov-row:nth-child(5) .vx-cov-track::after { animation-delay: .6s;  }

@keyframes vx-covshine {
  0%, 45% { transform: translate3d(0, 0, 0); }
  80%     { transform: translate3d(400%, 0, 0); }
  100%    { transform: translate3d(400%, 0, 0); }
}

/* ==========================================================
   18. DEVICE PREVIEW - desktop card + overlapping phone,
   used by the Content & Mobile Optimization visual.
   ========================================================== */
.vx-dev {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem 0 .5rem;
}

.vx-dev-group {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / .88;
  margin-inline: auto;
}

/* -- desktop card -- */
.vx-dev-desk {
  position: absolute;
  inset: 4% 14% auto 0;
  width: 76%;
  border-radius: .65rem;
  background: #fff;
  border: 1px solid var(--vx-line);
  box-shadow: 0 16px 32px -18px rgba(106, 88, 228, .38);
  overflow: hidden;
  animation: vx-dev-desk-float 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes vx-dev-desk-float {
  0%, 100% { transform: translate3d(0, 0, 0)   rotate(-1.4deg); }
  50%      { transform: translate3d(0, -7px, 0) rotate(-1.4deg); }
}

.vx-dev-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: .4rem .55rem;
  background: #F7F8FC;
  border-bottom: 1px solid #ECEFF6;
}

.vx-dev-bar i { width: 6px; height: 6px; border-radius: 999px; flex: 0 0 auto; background: #D7DCEA; }
.vx-dev-bar i:nth-child(1) { background: #EF4444; }
.vx-dev-bar i:nth-child(2) { background: #F59E0B; }
.vx-dev-bar i:nth-child(3) { background: #10B981; }

.vx-dev-page {
  display: grid;
  gap: 5px;
  padding: .55rem .6rem .7rem;
  animation: vx-rise .6s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: .15s;
}

/* thumbnail swatch - stands in for the optimised hero image */
.vx-dev-thumb {
  height: 30px;
  border-radius: .45rem;
  background: linear-gradient(135deg, var(--vx-violet), var(--vx-cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .9);
  position: relative;
  overflow: hidden;
}

.vx-dev-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translate3d(-140%, 0, 0);
  animation: vx-dev-shimmer 3.2s ease-in-out infinite 1s;
}

@keyframes vx-dev-shimmer {
  0%        { transform: translate3d(-140%, 0, 0); }
  55%, 100% { transform: translate3d(140%, 0, 0); }
}

.vx-dev-title {
  font: 800 10px/1.2 'Inter', sans-serif;
  color: var(--vx-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-dev-text {
  font: 600 13px/1.4 'Inter', sans-serif;
  color: var(--vx-mute);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.vx-dev-tags {
  display: flex;
  gap: 4px;
  margin-top: 1px;
}

.vx-dev-tags span {
  font: 800 10px/1 var(--vx-mono);
  letter-spacing: .04em;
  color: var(--vx-violet);
  background: rgba(106, 88, 228, .1);
  border-radius: 999px;
  padding: .22rem .4rem;
}

.vx-dev-tags span:nth-child(2) { color: #059669; background: rgba(16, 185, 129, .1); }

/* -- phone card, overlapping the desktop card -- */
.vx-dev-phone {
  position: absolute;
  right: 0;
  bottom: 2%;
  width: 40%;
  aspect-ratio: 9 / 18;
  border-radius: 1.05rem;
  background: linear-gradient(160deg, #1B1E29, #2E3244);
  border: 3px solid #12141C;
  box-shadow: 0 18px 34px -14px rgba(17, 24, 39, .5), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  z-index: 2;
  animation: vx-dev-phone-float 6s ease-in-out infinite;
  animation-delay: .35s;
  will-change: transform;
}

@keyframes vx-dev-phone-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}

.vx-dev-notch {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
}

.vx-dev-screen {
  margin-top: 8px;
  flex: 1 1 0%;
  border-radius: .55rem;
  background: linear-gradient(165deg, #F8FAFF, #ECF0FE);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  text-align: center;
  animation: vx-rise .6s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: .3s;
}

.vx-dev-m-label {
  font: 800 6.5px/1 var(--vx-mono);
  letter-spacing: .08em;
  color: var(--vx-mute);
}

.vx-dev-m-title {
  font: 800 16px/1 'Inter', sans-serif;
  color: var(--vx-violet);
  animation: vx-dev-glow-text 3s ease-in-out infinite 1s;
}

.vx-dev-m-title small { font: 700 10px/1 'Inter', sans-serif; color: var(--vx-mute); }

@keyframes vx-dev-glow-text {
  0%, 100% { text-shadow: 0 0 0 rgba(106, 88, 228, 0); }
  50%      { text-shadow: 0 0 10px rgba(106, 88, 228, .45); }
}

.vx-dev-m-sub {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
  font: 800 6.5px/1 var(--vx-mono);
  letter-spacing: .03em;
  color: #059669;
}

.vx-dev-m-sub i { width: 8px; height: 8px; flex: 0 0 auto; }

/* -- floating mobile-score badge -- */
.vx-dev-score {
  position: absolute;
  left: -4%;
  top: 2%;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: .38rem .6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--vx-violet), var(--vx-blue));
  color: #fff;
  box-shadow: 0 10px 22px -8px rgba(106, 88, 228, .55);
  font: 800 10px/1 var(--vx-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: vx-dev-score-pop .7s cubic-bezier(.2, .8, .2, 1) both,
             vx-dev-score-glow 3s ease-in-out infinite 1s;
}

.vx-dev-score b {
  font: 800 15px/1 'Inter', sans-serif;
  color: #fff;
}

@keyframes vx-dev-score-pop {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.85); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes vx-dev-score-glow {
  0%, 100% { box-shadow: 0 10px 22px -8px rgba(106, 88, 228, .55); }
  50%      { box-shadow: 0 10px 30px -2px rgba(106, 88, 228, .85); }
}

/* ==========================================================
   10. RESPONSIVE
   ========================================================== */
@media (max-width: 1023px) {
  .vx-scene { max-width: 520px; }
}

@media (max-width: 639px) {
  .vx-scene      { max-width: 100%; min-height: clamp(360px, 92vw, 460px); }
  .vx-body       { padding: .9rem; gap: .65rem; }
  .vx-url        { font-size: 10px; }
  .vx-stat b     { font-size: 14px; }
  .vx-stat span  { font-size: 10px; letter-spacing: .04em; }
  .vx-row-t      { font-size: 12px; }
  .vx-check-row  { font-size: 12.5px; padding: .45rem .5rem; }
  .vx-cov        { gap: .55rem; }
  .vx-cov-name   { font-size: 10px; }
  .vx-foot       { font-size: 12px; padding: .6rem .65rem; }
  .vx-pill       { font-size: 10px; padding: .32rem .55rem; }
  .vx-net-pip    { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .vx-serp-t     { font-size: 11px; }
  .vx-dev-group  { max-width: 220px; }
  .vx-dev-score  { font-size: 10px; padding: .36rem .6rem; }
  .vx-dev-score b{ font-size: 13px; }
}

@media (max-width: 400px) {
  .vx-url       { font-size: 10px; padding: 0 .6rem; }
  .vx-live      { font-size: 10px; }
  .vx-stats     { gap: .35rem; }
  .vx-check-row { font-size: 10px; }
  .vx-row-v     { font-size: 10px; }
  .vx-dev-group { max-width: 190px; }
  .vx-dev-score { left: -2%; font-size: 10px; }
  .vx-dev-score b { font-size: 12px; }
}

/* ==========================================================
   11. MOTION SAFETY
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .vx *,
  .vx *::before,
  .vx *::after {
    animation: none !important;
    transition: none !important;
  }

  .vx-line       { stroke-dashoffset: 0; }
  .vx-area       { opacity: 1; transform: none; }
  .vx-runner     { opacity: 1; offset-distance: 100%; }
  .vx-arc        { stroke-dashoffset: 0; opacity: 1; }
  .vx-gauge-arc  { stroke-dashoffset: var(--vx-off, 60); }
  .vx-tick       { transform: scale(1); }
  .vx-node::after{ opacity: 0; }
  .vx-stat,
  .vx-row        { opacity: 1; transform: none; }
  .vx-city::after{ opacity: 0; }
  .vx-city-r     { transform: scale(1); }
  .vx-globe-tag  { opacity: 1; transform: none; }
  .vx-cov-fill   { transform: scaleX(var(--vx-w, .9)); }
  .vx-lang-row::after { opacity: 0; }
  .vx-snip-badge { opacity: 1; transform: none; }
  .vx-globe-ball::before { transform: scaleX(.42); }
  .vx-globe-ball::after  { transform: scaleX(.78); }
  .vx-dev-score,
  .vx-dev-page,
  .vx-dev-screen { opacity: 1; transform: none; }
  .vx-dev-thumb::after { opacity: 0; }
}

@supports (content-visibility: auto) {
  .vx-scene { content-visibility: auto; contain-intrinsic-size: 480px; }
}

/* ==========================================================
   MOBILE 2-UP FIX -- fixed 3-item metric/stat strips show only
   2 tiles per row on small phones (3 tiles in a row was either
   cramped/clipped, or stacking all 3 full-width made the card
   too tall). The 3rd tile is hidden rather than wrapped to its
   own half-empty row, and the CTA nothing else references it.
   ========================================================== */
@media (max-width: 480px) {
  .vx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
  .vx-stats > *:nth-child(3) { display: none !important; }
  .vx-cities { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
}