/* ============================================================
   BEEST ENERGY — SHARED EXTRA SECTIONS
   "Strength" band — showcases the stone.png image ("Crack the
   stone. Unlock the future."). Shared across all three designs;
   consumes colour tokens from themes.css. Linked after each
   design's CSS. Heading font is themed per design (see each
   design-N.css override for .strength__title).
   ============================================================ */

.strength {
  position: relative;
  padding: clamp(70px, 10vw, 140px) 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.strength__inner {
  width: min(1180px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
  position: relative;
  z-index: 2;
}

.strength__kicker {
  display: inline-block;
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin: 0 0 16px;
}
.strength__title {
  /* each design only loads ONE of these display fonts, so the browser
     resolves to that design's own heading font automatically */
  font-family: 'Cinzel', 'Anton', 'Sora', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.06;
  color: var(--text);
  margin: 0 0 18px;
}
.strength__accent { color: var(--accent); }
.strength__lead {
  color: var(--text-muted);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  max-width: 46ch; margin: 0;
}

.strength__media { position: relative; display: grid; place-items: center; min-height: 320px; }
.strength__glow {
  position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 65%);
  filter: blur(22px); pointer-events: none;
  animation: strengthPulse 6s ease-in-out infinite;
}
@keyframes strengthPulse { 0%,100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
.strength__img { width: min(520px, 94%); position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .strength__glow { animation: none; }
}
@media (max-width: 900px) {
  .strength__inner { grid-template-columns: 1fr; }
  .strength__media { order: -1; }
  .strength__img { width: min(440px, 86%); }
}