/* ============================================================
   JERKMATE AI — LANDING PAGE STYLESHEET
   Mobile-first • Pixel-perfect from Figma
   ============================================================ */

/* ────────────────────────────────────────────
   DESIGN TOKENS (from Figma variable_defs)
   ──────────────────────────────────────────── */
:root {
  --c-primary:   #fb4d94;
  --c-secondary: #191862;
  --c-purple:    #692ce0;
  --c-cyan:      #24d2e5;
  --c-white:     #ffffff;
  --c-neutral:   #909090;
  --c-neutral-active: #aaaaaa;
  --c-border:    #dddddd;
  --c-text:      #191862;

  --ff:          'Montserrat', sans-serif;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --ease: 0.25s ease;
}

/* ────────────────────────────────────────────
   RESET & BASE
   ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  width: 100%;
  font-family: var(--ff);
  font-weight: var(--fw-medium);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
  background: #fff;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

/* ────────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff);
  font-size: 16px;
  font-weight: var(--fw-medium);   /* button/a/md/font-weight = 500 */
  line-height: 1;
  padding: 8px 20px;
  border-radius: 9999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity var(--ease), transform var(--ease);
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }

.btn--primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}

@media (max-width: 749px) {
  .btn--primary {
    font-size: 3vw;
  }
}

/* Header button: lg variant — 20px extrabold */
.btn--header {
  font-size: 14px;
  font-weight: var(--fw-extra);
  padding: 10px;
}


@media (min-width: 750px) {
  .btn--header {
    font-size: 20px;
    font-weight: var(--fw-extra);
    padding: 12px 20px;
  }
}

section:not(.hero) {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 1310px;
  padding: 0 25px;
}

/* ────────────────────────────────────────────
   SITE HEADER
   ──────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 66px;
  background: var(--c-white);
  box-shadow: 0 1px 10px rgba(0,0,0,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1310px;
  margin: 0 auto;
  padding: 0 16px;
}

.site-logo img { 
  width: 100%;
  max-width: 210px ;
}

@media (max-width: 749px) {
  .site-logo img {
    max-width: 150px;
  }
}

@media (min-width: 750px) {
  .site-header { height: 88px; }
  .header-inner { padding: 0 64px; }
}

/* ────────────────────────────────────────────
   HERO SECTION
   ──────────────────────────────────────────── */
.hero {
  position: relative;
  height: 60vh;
  min-height: 600px;
  margin-top: 78px;
  overflow: hidden;
  background: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@media (max-width: 749px) {
  .hero {
    height: 50vh;
    min-height: 500px;
  }
}

.scrolling-images-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}

@media (orientation: landscape) and (max-height: 500px) {
  .scrolling-images-bg { 
    height: 175%; 
  }
}

.scrolling-row {
  width: 100%;
  height: 40%;
  overflow: hidden;
  position: relative;

}

@media (max-width: 749px) {
  .scrolling-row {
    height: 50%;
  }
}

.scrolling-row .scroll-content {
  display: flex;
  width: 200%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  height: 100%;
}

.scrolling-row .scroll-content img {
  height: 100%;
  width: auto;
  object-fit: cover;
  display: block;
  margin-left: 10px;
}

.scrolling-row.row-1 .scroll-content {
  animation: scroll-left 50s linear infinite;
}

@media (max-width: 749px) {
  .scrolling-row.row-1 .scroll-content {
    animation: scroll-left 20s linear infinite;
  }
}

.scrolling-row.row-2 .scroll-content {
  animation: scroll-right 60s linear infinite;
}

@media (max-width: 749px) {
  .scrolling-row.row-2 .scroll-content {
    animation: scroll-right 10s linear infinite;
  }
}

.scrolling-row.row-3 .scroll-content {
  animation: scroll-left 70s linear infinite;
}

@media (max-width: 749px) {
  .scrolling-row.row-3 {
    display: none;
  }
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes scroll-right {
  from { transform: translateX(-33%); }
  to   { transform: translateX(0); }
}

/* ── Fade-to-white overlay on top of gallery (transparent → white at bottom) ── */
.gallery-fade-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.9) 70%,
    #ffffff 90%
  );
  z-index: 1;
  pointer-events: none;
}

/* ── Jerky-3D mascot overlapping upper-left of search card (desktop only) ── */
.hero-jerky-mascot {
  position: absolute;
  pointer-events: none;
  left: initial;
  right: -2vw;
  z-index: 4;
  top: -10vw;
  width: 100%;
  max-width: 25vw;
}

@media (min-width: 750px) {
  .hero-jerky-mascot {
    display: block;
    left: calc(50% - 391px);
    top: -65px;
    height: 189px;
    width: 189px;
    object-fit: contain;
    transform: rotate(-1.65deg);
  }
}

/* ── Hero content: search card centered ── */
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0 25px;
}

/* ── Search card ── */
.search-card {
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 5px 10px 0 rgba(25, 24, 98, 0.2);
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

@media (min-width: 750px) {
  .search-card {
    max-width: 807px;
  }
}

.search-card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 15px 24px;
}

@media (min-width: 750px) {
  .search-card-content {
    padding: 28px 40px 0;
    gap: 60px;
  }
}

/* Card header: title + subtitle */
.search-card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding-top: 12px;
}

.search-card-title {
  font-size: 5vw;
  font-weight: var(--fw-extra);
  color: var(--c-secondary);   /* #191862 — NOT gradient */
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
  white-space: nowrap;
}

@media (min-width: 750px) {
  .search-card-title { font-size: 20px; }
}

.search-card-title br {
  display: none;
}

@media (max-width: 749px) {
  .search-card-title br {
    display: block;
  }
}

.search-card-subtitle {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--c-neutral);
  text-align: center;
}

.search-card-subtitle br {
  display: none;
}

@media (max-width: 749px) {
  .search-card-subtitle {
    font-size: 3.5vw;
    white-space: nowrap;
    line-height: 1.2;
  }
  .search-card-subtitle br {
    display: block;
  }
}

/* Input area: form + jerky credit */
.search-card-input-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Search form */
.search-form { width: 100%; }

.search-input-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f6f6f6;
  border-radius: 20px;
  border: none;
  overflow: hidden;
  height: 12vw;
  padding: 0 8px 0 20px;
}

@media (min-width: 750px) {
  .search-input-wrap { height: 65px; }
}

.search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--ff);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

@media (max-width: 749px) {
  .search-input {
    font-size: 3vw;
  }
}

.search-input::placeholder { color: transparent; }

/* Animated placeholder */
.ph-overlay {
  position: absolute;
  left: 20px;
  right: 55px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.ph-inner {
  position: relative;
  height: 1.4em;
  overflow: hidden;
}

.ph-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--ff);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: rgba(0,0,0,0.5);
  line-height: 1.4;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
}

.ph-text.ph-in {
  transform: translateY(0);
  opacity: 1;
}

.ph-text.ph-out {
  transform: translateY(-110%);
  opacity: 0;
}

@media (max-width: 749px) {
  .ph-text { font-size: 3vw; }
  .ph-overlay { right: calc(8vw + 20px); }
}

/* Send button: purple/cyan gradient (from Figma) */
.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  background: linear-gradient(1.633deg, rgba(105, 44, 224, 0.3) 9.663%, rgba(36, 210, 229, 0.3) 114.81%);
  color: var(--c-secondary);
  transition: all 0.25s ease, opacity var(--ease);
}
.search-btn:hover { opacity: 0.75; }
.search-btn--active {
  background: var(--c-primary);
  transition: all 0.25s ease;
}

@media (max-width: 749px) {
  .search-btn {
    width: 8vw;
    height: 8vw;
  }
}

.search-btn img {
  width: 100%;
  max-width: 18px;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 749px) {
  .search-btn img {
    max-width: 4vw;
  }
}

/* Jerky AI credit */
.jerky-credit {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 15px;
}

.jerky-credit img {
  height: auto;
  width: 100%;
  max-width: 36px;
}

@media (max-width: 749px) {
  .jerky-credit img {
    max-width: 6vw;
  }
}

.jerky-credit span {
  font-size: 14px;
  color: var(--c-neutral);
  font-weight: var(--fw-medium);
  background: linear-gradient(90deg, #692ce0 16.827%, #24d2e5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 749px) {
  .jerky-credit span {
    font-size: 3vw;
  }
}

/* Chip tags section */
.chip-tags-section {
  padding: 60px 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

@media (max-width: 749px) {
  .chip-tags-section {
    display: none;
  }
}

.chip-tags-label {
  font-size: 14px;
  color: var(--c-neutral-active); /* #aaaaaa */
  font-weight: var(--fw-medium);
}

.chip-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  scrollbar-width: none;
}
.chip-tags-list::-webkit-scrollbar { display: none; }

@media (min-width: 750px) {
  .chip-tags-list {
    flex-wrap: nowrap; /* all chips on one row at desktop */
  }
}

/* Chip: transparent bg, border #ddd, radius full, 16px Montserrat Medium */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 9999px;
  font-family: var(--ff);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--c-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--ease), color var(--ease);
  text-transform: capitalize;
}

@media (min-width: 750px) {
  .chip { font-size: 16px; }
}

.chip:hover {
  border-color: var(--c-primary);
}

.chip-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ────────────────────────────────────────────
   BANNER — MEET JERKMATE AI
   ── Dark gradient card, white text, Jerky on right
   ──────────────────────────────────────────── */
.banner-section {
  width: 100%;
  background: #fff;
}

.banner-outer {
  width: 100%;
  padding: 32px 0 52px;
}

@media (max-width: 749px) {
  .banner-outer { 
    padding: 0 0 8vw; 
  }
}

.banner-card {
  width: 100%;
  background:
    url('../images/bg-mobile_meet.webp') center/cover no-repeat,
    linear-gradient(90deg, var(--c-purple) 16.827%, var(--c-secondary) 100%);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

@media (min-width: 750px) {
  .banner-card {
    width: 100%;
    background:
      url('../images/bg_meet.webp') center/cover no-repeat,
      linear-gradient(90deg, var(--c-purple) 16.827%, var(--c-secondary) 100%);
    min-height: 167px;
    padding: 20px 24px;
    flex-direction: row;
    position: relative;
    align-items: center;
  }
}

.banner-text-col {
  flex: 1;
  max-width: 64%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
}

@media (max-width: 749px) {
  .banner-text-col {
    max-width: 100%;
  }
}

/* Banner heading: white, uppercase, extrabold */
.banner-heading {
  font-size: 22px;
  font-weight: var(--fw-extra);
  color: var(--c-white);
  text-transform: uppercase;
  line-height: 1.2;
}

@media (max-width: 749px) {
  .banner-heading { font-size: 4.5vw;  }
}

.banner-desc {
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  font-weight: 400;
}

@media (max-width: 749px) {
  .banner-desc {
    font-size: 3.8vw;
    line-height: 1.2;
  }
}

.banner-card .btn--primary {
  align-self: flex-start;
}

/* Stars: inside the card (absolute), clips to card overflow:hidden */
.banner-stars {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10vw;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 750px) {
  .banner-stars { width: 83px; top: 10px; right: 10px; }
}

/* Jerky: OUTSIDE the card (sibling), absolute to .banner-card-wrap */
.banner-jerky-img {
  position: absolute;
  width: 100%;
  max-width: 225px;
  bottom: auto;
  top: -29px;
  right:  150px;
}

@media (max-width: 1200px) {
  .banner-jerky-img {
    right: 100px;
  }
}

@media (max-width: 749px) {
  .banner-jerky-img {
    width: 100%;
    max-width: 20vw;
    bottom: -6vw;
    top: initial;
    right:  0;
    transform: rotate(-13.39deg);
  }
}

/* ────────────────────────────────────────────
   CONTENT SECTIONS (5 alternating)
   ──────────────────────────────────────────── */
.content-sec {
  background: #fff;
}

/* Mobile: stack, image on top via order */
.content-sec-inner {
  display: flex;
  flex-direction: row;
  max-width: 1310px;
  margin: 0 auto;
  gap: 32px;
  align-items: flex-start;
  padding: 0 0 48px;
}

@media (max-width: 749px) {
  .content-sec:nth-child(even) .content-sec-inner {
    flex-direction: column-reverse;
  }
  
  .content-sec-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 8vw;
    gap: 4vw;
  }
}

.content-text {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.content-text > p {
  padding-bottom: 20px;
}

.content-text ul {
  padding-left: 20px;
  padding-bottom: 20px;
}

.content-text ul li {
  font-size: 16px;
  color: var(--c-text);
  line-height: 1.5;
  padding-left: 10px;
}

@media (max-width: 749px) {
  .content-text ul li {
    font-size: 3.5vw;
  }
}

.content-text a:not(.btn) {
  color: var(--c-primary);
}

.content-text a:not(.btn):hover {
  color: #24d2e5;
}

.content-text ul li::marker {
  content: '•';
  color: #191862;
  font-size: 20px;
}

.content-img-wrap { 
  width: 100%;
  max-width: 535px;
  border-radius: 22px;
}

@media (max-width: 749px) {
  .content-img-wrap {
    max-width: 100%;
  }
}

.content-img {
  width: 100%;
  object-fit: cover;
  display: block;
}

.section-label {
  display: block;
  font-size: 20px;
  font-weight: var(--fw-extra);
  color: var(--c-secondary);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  line-height: 1.3;
  margin-bottom: 8px;
}

@media (max-width: 749px) {
  .section-label { 
    font-size: 4vw; 
  }
}

/* Body paragraphs */
.content-text p {
  font-size: 16px;
  color: var(--c-text);
  line-height: 1.5;
}

@media (max-width: 749px) {
  .content-text p { 
    font-size: 3.5vw; 
  }
}

/* Bold keywords within body paragraphs */
.content-text strong {
  font-weight: var(--fw-extra);
  color: var(--c-secondary);
}

/* CTA button spacing */
.content-text .btn { 
  margin-top: 16px; 
  align-self: flex-start; 
}

@media (max-width: 749px) {
  .content-text .btn { 
    width: 100%;
    padding: 2.5vw 0;
  }
}


/* ────────────────────────────────────────────
   FAQ SECTION
   ──────────────────────────────────────────── */
.faq-section {
  background: #fff;
}

.faq-inner {
  width: 100%;
  padding: 64px 0;
  max-width: 1310px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

@media (max-width: 749px) {
  .faq-inner {
    padding: 8vw 0;
    gap: 6vw;
  }
}

/* Title: 24px extrabold uppercase navy, centered */
.faq-title {
  font-size: 24px;
  font-weight: var(--fw-extra);
  color: var(--c-secondary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.3;
  width: 100%;
}

@media (max-width: 749px) {
  .faq-title { 
    font-size: 5vw; 
  }
}

/* 3-column grid on desktop */
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

@media (min-width: 750px) {
  .faq-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
}

.faq-item {
  flex: 1;
  background: #fff;
  border-radius: 25.35px;
  box-shadow: 0 5px 10px 0 rgba(25, 24, 98, 0.2);
  overflow: hidden;
  cursor: pointer;
}

.faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

@media (max-width: 749px) {
  .faq-summary { 
    padding: 6vw;
  }
}

.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { display: none; content: ''; }

.faq-q-text {
  font-family: var(--ff);
  font-size: 20px;
  font-weight: var(--fw-semibold);   /* Figma: 600 */
  color: var(--c-secondary);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

@media (max-width: 749px) {
  .faq-q-text { 
    font-size: 4vw; 
  }
}

/* Arrow: SVG is naturally a downward chevron (∨). No rotation = closed, 180deg = open (∧) */
.faq-chevron {
  flex-shrink: 0;
  transform: rotate(0deg);
  transition: transform var(--ease);
}

@media (max-width: 749px) {
  .faq-chevron {
    width: 4vw;
    height: 4vw;
  }
}

details[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-body {
  padding: 0 32px 24px;
}
@media (max-width: 749px) {
  .faq-body { 
    padding: 0 6vw 6vw;
  }
}

.faq-body p {
  font-size: 16px;
  color: var(--c-neutral);
  line-height: 1.5;
}

@media (max-width: 749px) {
  .faq-body p { 
    font-size: 3.5vw; 
  }
}

/* ────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────── */
.site-footer {
  background: #fff;
  max-width: 1310px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Top row: RTA + copyright */
.footer-top {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 24px 0;
  padding-left: 20px;
  border-bottom: 1px solid #191862;
}

@media (max-width: 749px) {
  .footer-top {
    border-bottom: none;
    border-top: 1px solid #191862;
    flex-direction: column;
    padding: 4vw 0 2vw;
  }
}

.rta-logo { 
  height: auto; 
  width: 100%; 
  max-width: 50px;
}

@media (max-width: 749px) {
  .rta-logo {
    max-width: 12vw;
  }
}

.footer-copyright {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--c-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

@media (max-width: 749px) {
  .footer-copyright {
    color: var(--c-neutral);
    font-size: 3vw;
  }
}

/* Bottom row: disclaimer + links on one line */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 1.5vw;
}

@media (min-width: 750px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 20px;
    padding: 20px 24px 0 24px;
  }
}

.footer-disclaimer {
  font-size: 16px;
  font-weight: var(--fw-regular);
  color: var(--c-secondary);
}

.footer-disclaimer:hover {
  color: var(--c-primary);
}

@media (max-width: 749px) {
  .footer-disclaimer {
    font-size: 3vw;
    color: var(--c-neutral);
    text-align: center;
  }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-link {
  font-size: 16px;
  font-weight: var(--fw-regular);
  color: var(--c-secondary);
  transition: color var(--ease);
  white-space: nowrap;
}

.footer-link:hover { color: var(--c-primary); }

@media (max-width: 749px) {
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 1.5vw;
  }

  .footer-link {
    font-size: 3vw;
    color: var(--c-neutral);
  }
}


/* ────────────────────────────────────────────
   REDUCED MOTION
   ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gallery-track { animation-play-state: paused; }
}