/* ============================================================
   "I CAN DESIGN" — infinite marquee section
   Animation is JS-driven via requestAnimationFrame (no CSS loop reset = no glitch)
============================================================ */

.design {
  width: 100%;
  padding: 4vh 0 5vh;
  background: transparent;
  border-top: 2px solid rgba(8, 38, 110, 0.32);
  overflow: hidden;
}

.design-title {
  font-weight: 900;
  color: #0a1628;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.0;
  letter-spacing: 0.01em;
  font-size: clamp(2rem, 5vw, 4.5rem);
  margin-bottom: clamp(16px, 3vh, 40px);
}

/* ── Row wrapper — clips overflow ── */
.marquee-row {
  width: 100%;
  overflow: hidden;
  margin-bottom: 14px;
}
.marquee-row:last-child { margin-bottom: 0; }

/* ── Scrolling track — GPU layer, JS sets transform each frame ── */
.marquee-track {
  display: flex;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.marquee-track img {
  width: calc(100vw / 4 - 14px);
  height: auto;
  border-radius: 10px;
  flex-shrink: 0;
  margin-right: 14px;
  display: block;
  max-width: none !important;
}

/* ── Tablet (≤ 1024px): 3 visible ── */
@media (max-width: 1024px) {
  .design-title { font-size: clamp(1.9rem, 5.5vw, 3.8rem); }
  .marquee-track img { width: calc(100vw / 3 - 12px); }
}

/* ── Mobile (≤ 640px): 3 visible ── */
@media (max-width: 640px) {
  .design        { padding: 4vh 0 4vh; }
  .design-title  { font-size: clamp(1.75rem, 8.5vw, 2.4rem); }
  .marquee-row   { margin-bottom: 10px; }
  .marquee-track img {
    width: calc(100vw / 3 - 10px);
    border-radius: 8px;
    margin-right: 10px;
  }
}