/* Performance Optimization — SVG hero & strip */

.perf-hero {
  gap: 20px;
}

.perf-visual {
  position: relative;
  width: min(280px, 75vw);
  height: min(280px, 75vw);
  margin: 0 auto;
}

.perf-visual svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.perf-visual .gauge-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 14;
  stroke-linecap: round;
}

.perf-visual .gauge-fill {
  fill: none;
  stroke: url(#gaugeGrad);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 44;
  animation: gaugeFill 2.5s ease-in-out infinite;
  transform-origin: 120px 130px;
}

.perf-visual .gauge-needle {
  stroke: var(--sp-accent);
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 120px 130px;
  animation: needleSwing 2.5s ease-in-out infinite;
}

.perf-visual .speed-text {
  fill: var(--sp-accent);
  font-family: 'Poppins', sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-anchor: middle;
}

.perf-visual .speed-label {
  fill: rgba(255, 255, 255, 0.6);
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  text-anchor: middle;
  letter-spacing: 0.08em;
}

.perf-visual .bolt {
  fill: var(--sp-accent);
  filter: drop-shadow(0 0 12px var(--sp-accent));
  animation: boltFlash 1.5s ease-in-out infinite;
}

.perf-visual .perf-bar {
  fill: url(#barGrad);
  transform-origin: bottom center;
  transform-box: fill-box;
  animation: barRise 1.8s ease-in-out infinite;
}

.perf-visual .perf-bar-2 { animation-delay: 0.2s; }
.perf-visual .perf-bar-3 { animation-delay: 0.4s; }
.perf-visual .perf-bar-4 { animation-delay: 0.6s; }

@keyframes gaugeFill {
  0%, 100% { stroke-dashoffset: 80; }
  50% { stroke-dashoffset: 20; }
}

@keyframes needleSwing {
  0%, 100% { transform: rotate(-55deg); }
  50% { transform: rotate(35deg); }
}

@keyframes boltFlash {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes barRise {
  0%, 100% { transform: scaleY(0.55); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* Mid-page strip */
.perf-strip {
  min-height: 240px;
  padding: 28px 20px;
}

.perf-strip-inner {
  max-width: 520px;
  margin: 0 auto;
}

.perf-strip svg {
  width: 100%;
  height: auto;
  display: block;
}

.perf-strip .metric-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.perf-strip .metric {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid color-mix(in srgb, var(--sp-accent) 25%, transparent);
  border-radius: 12px;
}

.perf-strip .metric strong {
  display: block;
  font-size: 1.2rem;
  color: var(--sp-accent);
  animation: metricPop 2s ease-in-out infinite;
}

.perf-strip .metric:nth-child(2) strong { animation-delay: 0.3s; }
.perf-strip .metric:nth-child(3) strong { animation-delay: 0.6s; }

.perf-strip .metric span {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.perf-strip .chart-bar {
  fill: color-mix(in srgb, var(--sp-accent) 70%, #fff);
  animation: chartGrow 2.2s ease-in-out infinite;
  transform-origin: bottom center;
}

.perf-strip .chart-bar-2 { animation-delay: 0.25s; }
.perf-strip .chart-bar-3 { animation-delay: 0.5s; }
.perf-strip .chart-bar-4 { animation-delay: 0.75s; }
.perf-strip .chart-bar-5 { animation-delay: 1s; }

@keyframes metricPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes chartGrow {
  0%, 100% { transform: scaleY(0.6); opacity: 0.65; }
  50% { transform: scaleY(1); opacity: 1; }
}

@media (min-width: 768px) {
  .perf-visual { width: min(300px, 42vw); height: min(300px, 42vw); }
}