/* ==========================================================================
   SECTION 3: VEHICLE SPECS (vehicle-specs-container)
   ========================================================================== */
.vehicle-specs-container {
  background: var(--specs-bg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.vehicle-specs-container .section-inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* --- Animated wave background (Perlin-noise SVG lines) --- */
a-waves.specs-waves {
  --x: -0.5rem;
  --y: 50%;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
a-waves.specs-waves::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0);
  will-change: transform;
  content: "";
}
a-waves.specs-waves svg {
  display: block;
  width: 100%;
  height: 100%;
}
a-waves.specs-waves svg path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1px;
}
.vehicle-specs-container .specs-title {
  margin-bottom: 0;
  margin-top: 16px;
  color: var(--black);
}
.vehicle-specs-container .section-inner > .body-02 {
  color: var(--mid-gray);
  margin-top: 8px;
  margin-bottom: 48px;
  max-width: 500px;
}
.spec-card .body-03 {
  color: var(--mid-gray);
  margin-top: 4px;
}
.specs-top-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 48px;
  margin-bottom: 0;
}
.spec-card {
  border-top: 2px solid rgba(0,0,0,0.15);
  padding-top: 20px;
  transition: border-color 0.3s ease;
}
.spec-card:hover {
  border-top-color: var(--red-cta);
}
.spec-card__label {
  margin-bottom: 10px;
  color: var(--mid-gray);
}
.spec-card__value {
  color: var(--black);
  font-family: var(--font-display);
}
.vehicle-specs-container .specs-cta {
  margin-top: 8px;
}
.vehicle-specs-container .specs-legal {
  margin-top: 32px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--mid-gray);
  max-width: 900px;
}
.vehicle-specs-container .specs-legal p {
  margin-bottom: 6px;
}
.vehicle-specs-container .specs-legal p:last-child {
  margin-bottom: 0;
}

/* --- Specs Charge Block (integrated battery) --- */
.specs-charge-block {
  margin-top: 40px;
  padding: 32px;
  background: rgba(0,0,0,0.04);
  border-radius: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  margin-bottom: 32px;
}
.scb-battery {
  width: 72px;
  height: 130px;
  position: relative;
  flex-shrink: 0;
}
.scb-body {
  width: 100%;
  height: 100%;
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.6);
}
.scb-cap {
  width: 28px;
  height: 5px;
  background: rgba(0,0,0,0.1);
  border-radius: 3px 3px 0 0;
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
}
/* --- Liquid fill with wave surface --- */
.scb-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: var(--scb-color, #EB0A1E);
  border-radius: 0 0 6px 6px;
  transition: height 1.8s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.6s ease;
}
/* Wave layer 1 — slow sway */
.scb-fill::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -25%;
  width: 150%;
  height: 24px;
  background: var(--scb-color, #EB0A1E);
  border-radius: 43%;
  animation: scbWave1 2.2s ease-in-out infinite;
  transition: background 0.6s ease;
}
/* Wave layer 2 — faster counter-sway */
.scb-fill::after {
  content: "";
  position: absolute;
  top: -8px;
  left: -15%;
  width: 130%;
  height: 18px;
  background: var(--scb-color, #EB0A1E);
  border-radius: 40%;
  animation: scbWave2 1.8s ease-in-out infinite;
  transition: background 0.6s ease;
}
@keyframes scbWave1 {
  0%, 100% { transform: translateX(-8%) rotate(3deg); }
  50%      { transform: translateX(8%) rotate(-3deg); }
}
@keyframes scbWave2 {
  0%, 100% { transform: translateX(6%) rotate(-2deg); }
  50%      { transform: translateX(-6%) rotate(2deg); }
}
.scb-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  z-index: 2;
  color: var(--black);
}
.scb-content {
  min-width: 0;
}
.scb-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--black);
  transition: opacity 0.3s ease;
}
.scb-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-cta);
  margin-bottom: 12px;
  font-weight: 600;
}
.scb-desc {
  font-size: 14px;
  color: var(--mid-gray);
  line-height: 1.6;
  max-width: 340px;
  transition: opacity 0.3s ease;
}
/* Circular timer indicators */
.scb-timers {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.scb-timer {
  width: 36px;
  height: 36px;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.scb-timer svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.scb-timer__bg {
  fill: none;
  stroke: rgba(0,0,0,0.08);
  stroke-width: 2;
}
.scb-timer__fill {
  fill: none;
  stroke: var(--red-cta);
  stroke-width: 2.5;
  stroke-dasharray: 97.4;
  stroke-dashoffset: 97.4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}
.scb-timer.active .scb-timer__fill {
  animation: timerFill 4s linear forwards;
}
.scb-timer.done .scb-timer__fill {
  stroke-dashoffset: 0;
  transition: none;
}
.scb-timer span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--mid-gray);
}
.scb-timer.active span,
.scb-timer.done span {
  color: var(--black);
}
@keyframes timerFill {
  from { stroke-dashoffset: 97.4; }
  to { stroke-dashoffset: 0; }
}
.scb-side-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 40px;
  border-left: 1px solid rgba(0,0,0,0.08);
}
.scb-stat__val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  display: block;
  color: var(--black);
}
.scb-stat__unit {
  font-size: 11px;
  color: var(--mid-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}