.dufitv-card {
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(100%, 560px) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

.dufitv-card img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: contain !important;
  border-radius: 22px !important;
  filter: drop-shadow(0 24px 42px rgba(0, 0, 0, 0.24)) !important;
}

.sva-grid article::after {
  display: none !important;
}

.sva-filter-tabs {
  position: sticky;
  top: 76px;
  z-index: 12;
  display: flex;
  gap: 10px;
  max-width: 1280px;
  margin: 0 auto 38px;
  padding: 12px;
  overflow-x: auto;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52)),
    linear-gradient(135deg, rgba(8, 182, 214, 0.12), rgba(7, 87, 184, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  box-shadow:
    0 18px 42px rgba(7, 27, 58, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    inset 0 -1px 0 rgba(7, 87, 184, 0.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
  backdrop-filter: blur(22px) saturate(1.45);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

.sva-filter-tabs::-webkit-scrollbar {
  display: none;
}

.sva-filter-tabs::after {
  content: "";
  flex: 0 0 12px;
}

.sva-filter-tabs button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  color: #31435a;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  scroll-snap-align: center;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.sva-filter-tabs button:hover {
  color: var(--blue-700);
  background: rgba(255, 255, 255, 0.5);
}

.sva-filter-tabs button.is-active {
  color: var(--white);
  background: linear-gradient(135deg, var(--blue-700), var(--cyan-500));
  box-shadow:
    0 12px 24px rgba(7, 87, 184, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.sva-hero {
  min-height: calc(100vh - 132px) !important;
  padding-top: clamp(76px, 9vw, 128px) !important;
  padding-bottom: clamp(78px, 9vw, 132px) !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(112, 234, 255, 0.28), transparent 24%),
    radial-gradient(circle at 84% 34%, rgba(33, 196, 93, 0.18), transparent 24%),
    linear-gradient(135deg, #061a3a 0%, #0757b8 58%, #08b6d6 100%) !important;
}

.sva-hero::before {
  inset: clamp(20px, 3vw, 44px) !important;
  border-radius: 34px !important;
}

.sva-hero h1 {
  max-width: 820px !important;
  font-size: clamp(3rem, 6.4vw, 6.35rem) !important;
  line-height: 0.98 !important;
}

.sva-hero p:not(.eyebrow) {
  max-width: 720px !important;
  font-size: clamp(1.08rem, 1.6vw, 1.34rem) !important;
}

.sva-hero-panel {
  gap: 16px !important;
  padding: 18px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  border-radius: 30px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 36px 92px rgba(0, 0, 0, 0.24) !important;
}

.sva-hero-panel span {
  min-height: 98px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07)) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.sva-section {
  padding-top: clamp(72px, 8vw, 116px) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f6fbff 42%, #eef7fc 100%) !important;
}

.sva-section > .section-heading {
  max-width: 940px !important;
  margin-bottom: clamp(38px, 6vw, 74px) !important;
}

.sva-section > .section-heading h2 {
  font-size: clamp(2.35rem, 5vw, 5.4rem) !important;
  line-height: 1 !important;
}

.dufitv-highlight {
  min-height: 480px !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(112, 234, 255, 0.34), transparent 30%),
    radial-gradient(circle at 20% 82%, rgba(33, 196, 93, 0.18), transparent 26%),
    linear-gradient(135deg, #061a3a 0%, #0757b8 56%, #08b6d6 100%) !important;
}

.sva-section .dufitv-highlight {
  position: relative;
  overflow: hidden !important;
}

.sva-section .dufitv-highlight::after {
  content: "Dufibranet TV";
  position: absolute;
  right: clamp(18px, 4vw, 56px);
  bottom: clamp(18px, 4vw, 48px);
  color: rgba(255, 255, 255, 0.08);
  font-size: clamp(3.4rem, 10vw, 9rem);
  font-weight: 950;
  line-height: 0.8;
  pointer-events: none;
  white-space: nowrap;
}

.dufitv-highlight h2 {
  max-width: 720px !important;
  font-size: clamp(2.8rem, 6vw, 6rem) !important;
}

.dufitv-highlight p:not(.eyebrow) {
  max-width: 600px !important;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem) !important;
}

.sva-category {
  scroll-margin-top: 150px;
  margin-bottom: clamp(46px, 7vw, 86px) !important;
}

.sva-category[hidden] {
  display: none !important;
}

.sva-category-header {
  padding: 0 2px !important;
}

.sva-category-header .eyebrow,
.sva-category > .eyebrow {
  color: #0757b8 !important;
  font-size: clamp(1.65rem, 3vw, 3rem) !important;
  line-height: 1 !important;
  text-transform: none !important;
  margin-bottom: 22px !important;
}

.sva-grid article {
  flex: initial !important;
  min-height: 260px !important;
  border-radius: 26px !important;
  box-shadow: 0 28px 72px rgba(7, 27, 58, 0.12) !important;
}

.sva-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  overflow: visible !important;
}

.sva-grid article::before {
  height: 116px !important;
}

.sva-logo-wrap {
  border-radius: 22px !important;
}

.sva-cta {
  scroll-margin-top: 150px;
  border-radius: 34px !important;
}

.sva-grid p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.sva-grid span {
  margin-bottom: 10px !important;
}

.sva-how-it-works {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  padding: 94px clamp(18px, 6vw, 96px);
  background: #ffffff;
}

.sva-how-copy h2 {
  max-width: 620px;
  margin: 0;
  color: var(--blue-900);
  font-size: clamp(2.2rem, 4.6vw, 4.8rem);
  line-height: 1;
}

.sva-how-copy p:not(.eyebrow) {
  max-width: 560px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.sva-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.sva-steps article {
  min-height: 210px;
  padding: 26px;
  background: linear-gradient(150deg, #ffffff 0%, #f4fbff 100%);
  border: 1px solid rgba(7, 87, 184, 0.14);
  border-radius: 26px;
  box-shadow: 0 24px 62px rgba(7, 27, 58, 0.1);
}

.sva-steps span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  color: var(--white);
  background: linear-gradient(135deg, var(--blue-700), var(--cyan-500));
  border-radius: 16px;
  font-weight: 950;
}

.sva-steps h3 {
  margin: 0 0 10px;
  color: var(--blue-900);
  font-size: 1.2rem;
  line-height: 1.15;
}

.sva-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .sva-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 960px) {
  .sva-how-it-works {
    grid-template-columns: 1fr;
  }

  .sva-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .sva-filter-tabs {
    top: 66px;
    margin-bottom: 30px;
    border-radius: 22px;
    padding: 10px;
    scroll-padding-inline: 18px 64px;
  }

  .sva-filter-tabs::after {
    flex-basis: 64px;
  }

  .sva-filter-tabs button {
    min-height: 42px;
    padding: 0 14px;
  }

  .sva-hero {
    min-height: auto !important;
    padding: 58px 18px 64px !important;
  }

  .sva-hero::before {
    inset: 18px 12px !important;
    border-radius: 26px !important;
  }

  .sva-hero h1 {
    font-size: clamp(2.45rem, 12vw, 4.2rem) !important;
    line-height: 1 !important;
  }

  .sva-hero-panel {
    border-radius: 24px !important;
  }

  .sva-hero-panel span {
    min-height: 58px !important;
  }

  .sva-section {
    padding-top: 58px !important;
  }

  .sva-section > .section-heading {
    text-align: left !important;
  }

  .sva-section > .section-heading h2 {
    font-size: clamp(2rem, 10vw, 3.2rem) !important;
  }

  .dufitv-highlight,
  .sva-cta {
    border-radius: 26px !important;
  }

  .sva-category {
    scroll-margin-top: 126px;
  }

  .sva-category-header .eyebrow,
  .sva-category > .eyebrow {
    font-size: clamp(1.55rem, 8vw, 2.25rem) !important;
  }

  .sva-grid article {
    border-radius: 24px !important;
  }

  .sva-grid {
    grid-template-columns: 1fr !important;
  }

  .sva-how-it-works {
    padding: 64px 18px;
  }

  .sva-steps {
    grid-template-columns: 1fr;
  }

  .sva-steps article {
    min-height: auto;
    padding: 24px;
    border-radius: 22px;
  }

  .dufitv-highlight {
    margin-bottom: 44px !important;
    padding: 30px 22px !important;
    border-radius: 24px !important;
  }

  .dufitv-card {
    width: min(100%, 360px) !important;
    margin: 2px auto 0 !important;
  }

  .dufitv-card img {
    border-radius: 18px !important;
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.2)) !important;
  }
}