/* =============================================
   HOME PAGE — SECTION-BY-SECTION STYLES
   Matching the reference design image exactly
   ============================================= */

/* ===================================================
   SECTION 1: HERO
   - Full-viewport height
   - Background photo fills entire section
   - Gradient tint: left darker, right lighter
   - Card floats in the right ~45% of the viewport
   =================================================== */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh; /* mobile: small-viewport height so the card is never clipped by the URL bar */
  overflow: hidden;
}

/* Background photo */
.hero-bg-img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.phase-coming {
  color: #fff;
}
.testimonials-cards.revealed [title="YouTube video player"] .html5-video-player {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}
.testimonials-section {
  padding: 120px 0px;
}

.hero-bg-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Overlay: left side stays visible (photo shows through)
   right side gets a soft lightening for card readability */
.hero-bg-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(200, 235, 235, 0.1) 0%,
    rgba(220, 242, 242, 0.18) 40%,
    rgba(235, 248, 248, 0.6) 65%,
    rgba(235, 248, 248, 0.82) 100%
  );
}

/* Layout: two equal columns, full height */
.hero-layout {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100svh; /* fill the hero and grow (never clip) if content is taller */
  align-items: center;
  max-width: 1200px;
  margin: auto;
}

.hero-left-spacer {
  flex: 1 1 50%;
  /* empty — photo visible here */
}

.hero-right-panel {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 40px 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Slider */
.tsedar-slider {
  width: 100%;
  position: relative;
}

.slide {
  display: none;
}

.slide.active {
  display: block;
  animation: fadeIn 0.55s ease;
}

/* Slider controls */
.slider-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-left: 4px;
}

.slider-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(42, 122, 122, 0.28);
  background: rgba(255, 255, 255, 0.85);
  color: var(--teal-700);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--t);
  flex-shrink: 0;
}

.slider-btn:hover {
  background: #78909c !important;
  color: var(--white);
  border-color: #78909c !important;
}

.slider-dots {
  display: flex;
  gap: 7px;
}

.slider-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--t);
  border: 1px solid #fff;
}

.slider-dot.active {
  background: #fff !important;
  width: 7px;
  border-radius: 4px;
}

/* ===================================================
   SECTION 2: GROUNDED TO NATURE
   - Sky/cloud background image, very light tint
   - Big centered heading, italic second line
   - Decorative olive branch on the right
   =================================================== */
.grounded-section {
  position: relative;
  overflow: hidden;
  min-height: 450px;
  display: flex;
  align-items: center;
}

.grounded-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.grounded-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.grounded-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(235, 250, 250, 0.88) 0%, rgba(218, 244, 244, 0.8) 100%);
}

.grounded-deco-right {
  position: absolute;
  right: -20px;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 220px;
  object-fit: cover;
  border-radius: 0;
  opacity: 0.85;
  z-index: 1;
}

.grounded-inner {
  position: relative;
  z-index: 2;
  padding: 80px 28px;
  width: 100%;
}

.grounded-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  color: var(--teal-900);
  line-height: 1.18;
  letter-spacing: -0.025em;
  /* NOT centered — matches design: left-aligned text */
  text-align: center;
  max-width: 560px;
  margin: auto;
}

/* ===================================================
   SECTION 3: FEATURE PILLS
   - Light misty sky background
   - Stacked teal pill buttons, centered column
   - Each pill slightly wider than the last (accordion fan look)
   =================================================== */
.pills-section {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
}

.pills-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pills-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pills-overlay {
  position: absolute;
  inset: 0;
  /*background: linear-gradient(180deg,
      rgba(228, 246, 246, 0.80) 0%,
      rgba(210, 240, 240, 0.86) 100%);*/
}

.pills-inner {
  position: relative;
  z-index: 2;
  padding: 80px 28px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.pills-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Base pill style */
.feature-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 15px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: default;
  transition: var(--t);
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(13, 59, 59, 0.12);
}

.feature-pill i {
  font-size: 1rem;
}

/* Each pill slightly different shade/width to create stacked fan look */
.fp-1 {
  background: rgba(90, 175, 175, 0.82);
  color: var(--white);
  min-width: 240px;
}

.fp-2 {
  background: rgba(58, 148, 148, 0.88);
  color: var(--white);
  min-width: 280px;
  transform: rotate(-5deg);
}

.fp-3 {
  background: rgba(42, 122, 122, 0.9);
  color: var(--white);
  min-width: 260px;
}

.fp-4 {
  background: rgba(30, 96, 96, 0.92);
  color: var(--white);
  min-width: 320px;
  transform: rotate(-5deg);
}

.fp-5 {
  background: rgba(26, 79, 79, 0.94);
  color: var(--white);
  min-width: 300px;
}

.fp-6 {
  background: rgba(13, 59, 59, 0.96);
  color: var(--teal-200);
  min-width: 340px;
}

.feature-pill:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 28px rgba(13, 59, 59, 0.2);
}

/* ===================================================
   SECTION 4: CLINICAL OUTCOMES
   - White clean background
   - Label "Clinical Outcomes" top center
   - Three big stats in a row with thin dividers
   =================================================== */
.outcomes-section {
  background: var(--white);
  padding: 80px 0;
}

.outcomes-label {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 48px;
}

.outcomes-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}

.outcome-item {
  flex: 1;
  text-align: center;
  padding: 20px 32px;
  max-width: 300px;
}

.outcome-stat {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--teal-900);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.04em;
}

.outcome-stat em {
  font-style: normal;
  font-size: 0.55em;
  vertical-align: super;
  letter-spacing: 0;
}

.outcome-desc {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--gray-500);
  max-width: 220px;
  margin: 0 auto;
}

.outcome-divider {
  width: 1px;
  background: rgba(42, 122, 122, 0.12);
  align-self: stretch;
  margin: 16px 0;
}

/* ===================================================
   SECTION 5: SMARTER WAY
   - Dark food/nature photo fills whole section
   - Strong dark overlay
   - Left: dark teal glass card (text + link)
   - Right: vertical bar chart
   - Decorative plant right edge
   =================================================== */
.smarter-section {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: 80px 0;
}

.smarter-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.smarter-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.smarter-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(8, 40, 40, 0.88) 0%,
    rgba(13, 59, 59, 0.8) 55%,
    rgba(8, 40, 40, 0.6) 100%
  );
}

.smarter-deco-right {
  position: absolute;
  right: -20px;
  top: 0;
  height: 100%;
  width: 180px;
  object-fit: cover;
  opacity: 0.55;
  z-index: 1;
}

.smarter-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.smarter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 40px 36px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  background: #64767a;
  border-radius: 24px;
  opacity: 90%;
}
[data-reveal].revealed.smarter-graph {
  background: #374b4c;
  padding: 40px 0;
  height: 100%;
  border-radius: 24px;
  flex-wrap: wrap;
}
[data-reveal].revealed.smarter-graph p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}
/* Dark card */
.smarter-card {
  /*background: rgba(13, 59, 59, 0.45) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 24px !important;box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);*/
  padding: 40px 36px;
}

.smarter-body {
  font-size: 0.82rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.72);
}

.smarter-heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-top: 20px;
  margin-bottom: 20px;
}

.smarter-link {
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 10px;
  color: #fff !important;
  margin-bottom: 18px;
  border: 1px solid #c6dedb;
  padding: 10px 15px;
  margin-top: 20px;
  display: inline-block;
}

.smarter-link:hover {
  color: var(--white);
}

/* Bar chart */
.smarter-graph {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.bar-wrap {
  width: 100px;
  height: 200px;

  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.bar-fill {
  width: 100%;

  border-radius: 6px 6px 0 0;
  transition: height 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bar-fill.bg-1 {
  background: #7b8f8c;
}
.bar-fill.bg-2 {
  background: #aac7c3;
}
.bar-fill.bg-3 {
  background: #d1e8e5;
}

.bar-label {
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 1.3;
}

/* ==========================================================================
   NEW SWIPER HERO BANNER ELEMENT (MATCHED TO DESIGN PARADIGMS)
   ========================================================================== */
.tsedar-hero-swiper-wrapper {
  padding: 140px 0 60px 0;
  background-color: #fbfcfe;
}

.hero-main-swiper {
  max-width: 1320px;
  width: 100%;
  padding: 0 12px 30px 12px !important;
}

.hero-premium-slide {
  box-sizing: border-box;
}

/* Base Primary Card Layout Frame Container */
.hero-slide-inner {
  background-color: #0e2226; /* Deep signature dark slate forest green */
  border-radius: 24px;
  padding: 45px 55px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(14, 34, 38, 0.25);
}

/* Left Hero Header Layout Typography */
.hero-display-title {
  font-size: 2.85rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}

/* Center Image Formatting Rules */
.hero-image-frame {
  width: 100%;

  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.hero-center-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right Section Metadata Blocks */
.hero-content-right {
  padding-left: 15px;
}

.hero-product-label {
  font-size: 2.25rem;
  font-weight: 500;
  margin-bottom: 25px;
  letter-spacing: -0.01em;
}

/* Pill badge styling matching the screenshot */
.hero-pill-badge {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 0.88rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 12px;
  line-height: 1.4;
  backdrop-filter: blur(5px);
}

/* Solid white premium action click button */
.btn-hero-shop-action {
  background-color: #ffffff;
  color: #0e2226 !important;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: 30px;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-shop-action:hover {
  background-color: #f0f4f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

/* Swiper Pagination Styling Adjustments */
.hero-custom-pagination {
  bottom: 0px !important;
}

.hero-custom-pagination .swiper-pagination-bullet {
  background: #a2bbc3;
  opacity: 0.4;
  width: 8px;
  height: 8px;
  transition: all 0.3s ease;
}

.hero-custom-pagination .swiper-pagination-bullet-active {
  background: #0e2226 !important;
  opacity: 1;
  width: 24px;
  border-radius: 4px;
}

/* Hero prev/next navigation arrows — placed OUTSIDE the card in side lanes.
   The shell reserves horizontal lanes (padding) so the arrows never overlap
   the dark card's content at any screen size, and stays hugging the card
   because the shell is centred and scales with the viewport. */
.hero-swiper-shell {
  position: relative;
  max-width: 1448px; /* 1320 card + 2×64 arrow lanes */
  margin: 0 auto;
  padding: 0 64px;
}
.hero-swiper-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #0e2226;
  background: #0e2226;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(14, 34, 38, 0.12);
  transition: all 0.25s ease;
}
.hero-swiper-arrow:hover {
  background: #ffffff;
  color: #0e2226;
  border-color: rgba(14, 34, 38, 0.15);
  transform: translateY(-50%) scale(1.05);
}
.hero-swiper-prev {
  left: 8px;
}
.hero-swiper-next {
  right: 8px;
}
.hero-swiper-arrow.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 991px) {
  .hero-swiper-shell {
    padding: 0 52px;
  }
  .hero-swiper-arrow {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
  }
}
@media (max-width: 767px) {
  .hero-swiper-shell {
    padding: 0 40px;
  }
  .hero-swiper-arrow {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .hero-swiper-prev {
    left: 4px;
  }
  .hero-swiper-next {
    right: 4px;
  }
}

/* ==========================================================================
   RESPONSIVE SCALING COMPATIBILITY BREAKPOINTS
   ========================================================================== */
@media (max-width: 1199px) {
  .hero-display-title {
    font-size: 2.25rem;
  }
  .hero-product-label {
    font-size: 1.85rem;
  }
  .hero-slide-inner {
    padding: 35px;
  }
}

/* Tablet & below — the Bootstrap grid stacks at lg (992px), so the
   centered image and text must be re-centered and the image capped here,
   not only at the phone breakpoint (was leaving a broken 768–991px band). */
@media (max-width: 991px) {
  .hero-slide-inner {
    padding: 40px;
  }
  .hero-content-left {
    text-align: center;
    margin-top: 24px;
  }
  .hero-content-right {
    text-align: center;
    padding-left: 0;
    margin-top: 28px;
  }
  .hero-image-frame {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-feature-pills {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-pill-badge {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .hero-slide-inner {
    padding: 28px 20px;
  }
  .hero-display-title {
    font-size: 1.85rem;
  }
  .hero-product-label {
    font-size: 1.6rem;
    margin-bottom: 18px;
  }
  .hero-image-frame {
    max-width: 300px;
  }
  .hero-pill-badge {
    font-size: 0.82rem;
  }
  .btn-hero-shop-action {
    width: 100%;
    justify-content: center;
  }
}

/* ===================================================
   SECTION 6: TESTIMONIALS
   - White background
   - Left: heading + sub text
   - Right: two stacked/side-by-side cards
   =================================================== */

/* ===================================================
   

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 991px) {
  /* Hero: stack vertically; card vertically centred and framed by the video/photo */
  .hero-layout {
    flex-direction: column;
    justify-content: center;
  }

  .hero-left-spacer {
    display: none;
  }

  .hero-right-panel {
    flex: none;
    max-width: 100%;
    width: 100%;
    padding: 80px 20px 32px; /* top keeps the card clear of the fixed navbar */
    justify-content: center;
  }

  .hero-card {
    max-width: 540px;
  }

  /* Smarter grid */
  .smarter-grid {
    grid-template-columns: 1fr;
  }

  .smarter-graph {
    margin-top: 32px;
    justify-content: flex-start;
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Roadmap */
  .phase-item {
    flex-direction: row;
  }
}
.testimonials-heading {
  font-size: 45px;
}
.testimonials-cards.revealed {
  border-radius: 24px;
  overflow: hidden;
}

/* Content videos (smarter-section + testimonials-section). .testimonials-cards
   is a 2-column grid (built to hold two cards), so a lone video would land in a
   single column and render tiny — span it across the whole grid, then fill the
   cell fluidly (shrinks on mobile, never overflows). */
.testimonials-cards video {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

@media (max-width: 768px) {
  .testimonials-cards.revealed [title="YouTube video player"] {
    max-width: 100%;
  }
  .phase-item {
    padding: 10px 0;
  }
  .smarter-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 10px;
    gap: 20px;
  }
  .testimonials-section {
    padding: 20px 0;
  }
  .smarter-body,
  .smarter-heading {
    padding: 10px;
    margin: 0 !important;
  }
  /* Clear the ~92px fixed navbar so the first slide isn't hidden behind it */
  .tsedar-hero-swiper-wrapper {
    padding: 100px 0 30px 0;
  }
  .hero-badge {
    font-size: 10px;
  }
  /* .hero-card-heading now scales fluidly via clamp() in style.css */
  .pills-section {
    min-height: 400px;
  }
  .smarter-link {
    margin: 0;
  }
  .outcomes-label {
    margin-bottom: 0px;
  }
  .pills-inner,
  .outcomes-section {
    padding: 10px;
  }
  .feature-pill {
    padding: 10px;
  }

  .bar-chart {
    margin: auto;
  }
  .smarter-card {
    padding: 0;
  }
  .bar-wrap {
    max-width: 60px;
  }
  [data-reveal].revealed.smarter-graph {
    justify-content: center;
    margin-top: 0;
  }
  [data-reveal].revealed.smarter-graph p {
    text-align: center;
  }
  .grounded-heading {
    font-size: 2rem;
  }

  .outcomes-grid {
    flex-direction: column;
    align-items: center;
  }

  .outcome-divider {
    width: 80px;
    height: 1px;
    margin: 8px auto;
  }

  .testimonials-cards {
    grid-template-columns: 1fr;
  }

  .pills-stack {
    width: 100%;
  }

  .feature-pill {
    min-width: unset !important;
    width: 100%;
    max-width: 380px;
    justify-content: flex-start;
  }

  .smarter-deco-right {
    display: none;
  }

  .grounded-deco-right {
    display: none;
  }

  .newsletter-card {
    padding: 32px 24px;
  }
}

.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh; /* accounts for mobile browser UI bars */
  overflow: hidden;
}

.hero-bg-video-wrap {
  position: absolute;
  inset: 0;
  /* Brand-dark backdrop shown briefly while the video fades in. */
  background-color: #0d3b3b;
}

.hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hero video fade-in (progressive enhancement; JS in page-index.js toggles
   these classes). With no JS, or for reduced-motion users, the video has no
   class and stays fully visible. */
.hero-bg-video.fade-in {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero-bg-video.fade-in.is-in {
  opacity: 1;
}

.hero-bg-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Mobile L — ~425px and below */
@media (max-width: 425px) {
  .hero-section {
    min-height: 100svh;
  }
  .hero-bg-video {
    object-position: center;
  }
}

/* Mobile M — ~375px and below */
@media (max-width: 375px) {
  .hero-section {
    min-height: 100svh;
  }
}

/* Mobile S — ~320px and below */
@media (max-width: 320px) {
  .hero-section {
    min-height: 100svh;
  }
}

/* Landscape phones — short viewports */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section {
    min-height: 100svh;
  }
  .hero-bg-video {
    object-position: center;
  }
  /* Short landscape: shrink paddings/heading so the whole card stays visible */
  .hero-right-panel {
    padding: 74px 20px 22px;
  }
  .hero-card {
    padding: 20px 24px 18px;
  }
  .hero-card-heading {
    font-size: clamp(20px, 5vh, 28px);
    margin-bottom: 14px;
  }
  .hero-card-body {
    margin-bottom: 12px;
  }
}

/* Respect reduced-motion: pause autoplay, show poster */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video {
    /* poster stays visible; JS below handles pause */
  }
}

.products-swiper {
  padding-bottom: 3rem;
}

/* equal-height cards */
.products-swiper .swiper-slide {
  height: auto;
}
.products-swiper .product-card-link,
.products-swiper .product-card {
  height: 100%;
}

.products-swiper-nav {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.products-swiper-nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  display: grid;
  place-items: center;
  transition: all 0.25s ease;
}
.products-swiper-nav button:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}
.products-swiper-nav button.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.products-swiper .swiper-pagination-bullet-active {
  background: #111;
}