/* ==========================================================================
   Base Section Styles (used by all sections on homepage)
   ========================================================================== */
.tvg-site .tvg-section {
  position: relative;
  width: 100%;
  background-position: center center;
  background-size: cover;
}

.tvg-site .tvg-section .tvg-container {
  max-width: var(--tvg-section-width);
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin: 0 auto;
  padding: var(--tvg-section-padding-y) var(--tvg-section-padding-x);
}

.tvg-site .tvg-section .section-shape-divider-wrapper {
  position: absolute;
  overflow: hidden;
  top: 0; left: 0; bottom: 0; right: 0;
  pointer-events: none;
}

.tvg-site .tvg-section .section-shape-divider-wrapper .section-shape-divider svg {
  position: absolute;
  color: #000;
  width: 100%;
  height: 320px;
  left: 0; right: 0; top: 0;
}

.tvg-site .tvg-heading { max-width: 100%; margin: 0; }
.tvg-site .tvg-text { max-width: 100%; margin: 0; color: var(--tvg-text-color, var(--tvg-color-text)); }

.tvg-site .tvg-grid {
  --tvg-grid-gap: var(--tvg-column-gap);
  display: grid;
  grid-template-columns: repeat(var(--tvg-grid-items-per-row, 4), minmax(0, 1fr));
  gap: var(--tvg-grid-gap);
  text-align: left;
  max-width: 100%;
  width: 100%;
  position: relative;
  background-size: cover;
  align-items: var(--tvg-grid-align-items, stretch);
  justify-items: var(--tvg-grid-justify-items, stretch);
}

.tvg-site .tvg-grid > * { width: auto !important; height: auto !important; }

/* ==========================================================================
   Hero Section
   ========================================================================== */
.tvg-site .tvg-hero {
  background-color: var(--hcl-logo-blauw-12);
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: scroll;
  margin-top: -80px;
}

.tvg-site .tvg-hero > .tvg-section__overlay {
  background: linear-gradient(135deg, rgba(13,27,62,0.96) 0%, rgba(26,35,126,0.88) 50%, rgba(20,49,88,0.94) 100%);
  opacity: 0.9;
}

.tvg-site .tvg-hero .tvg-container {
  gap: var(--hsp-xxl);
  align-items: center;
  text-align: center;
  min-height: auto;
  padding-top: 140px;
  padding-bottom: 80px;
}

.tvg-site .tvg-hero__content {
  align-items: center;
  text-align: center;
  padding: 0 var(--tvg-section-padding-x, 20px);
}

.tvg-site .tvg-hero__title {
  max-width: 56.25rem;
  width: 100%;
  color: var(--hcl-wit-1);
  margin-top: var(--hsp-xs);
  margin-bottom: var(--hsp-s);
}

.tvg-site .tvg-hero__subtitle {
  max-width: 37.5rem;
  width: 100%;
  text-align: center;
  color: var(--hcl-wit-1);
  margin-bottom: var(--hsp-m);
}

.tvg-site .tvg-hero__buttons {
  gap: 16px;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin-top: 8px;
  align-items: center;
}

.tvg-site .tvg-hero__buttons .tvg-btn-wrapper { display: inline-flex; }

@media (max-width: 1023px) {
  .tvg-site .tvg-hero .tvg-container { min-height: auto; }
}
@media (max-width: 767px) {
  .tvg-site .tvg-hero .tvg-container { min-height: auto; }
}
@media (max-width: 479px) {
  .tvg-site .tvg-hero .tvg-container { gap: var(--hsp-xxl); }
}

/* body margin-top is set by header.css (80px) — do not override here */

/* ==========================================================================
   Marquee Logo Banner
   ========================================================================== */
.marquee-section { padding: 32px 0; background: #f8f9fa; overflow: hidden; }
.marquee-track { display: flex; animation: marquee 30s linear infinite; gap: 80px; align-items: center; }
.marquee-track img { height: 160px; width: auto; object-fit: contain; flex-shrink: 0; }
.marquee-track img[alt="KIN Makelaars"] { height: 80px; }
.marquee-track img[alt="Capgemini"] { position: relative; top: 15px; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (max-width: 767px) {
  .marquee-track img { height: 80px; }
  .marquee-track img[alt="KIN Makelaars"] { height: 40px; }
  .marquee-track { gap: 40px; }
}


/* ==========================================================================
   Value Propositions
   ========================================================================== */
.tvg-value-props {
  padding: 0 0 30px;
  background: var(--hcl-neutral-2);
}

.tvg-value-props .tvg-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.tvg-value-props__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

.tvg-value-props__card {
  padding: 36px 28px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 5px 20px 75px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tvg-value-props__card:hover {
  transform: translateY(-6px);
  box-shadow: 5px 20px 75px rgba(0,0,0,0.14);
}

.tvg-value-props__icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin: 0 auto 20px;
}

.tvg-value-props__icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 2;
  fill: none;
}

/* Icon color variants per card */
.tvg-value-props__card:nth-child(1) .tvg-value-props__icon { background: rgba(20, 49, 88, 0.08); }
.tvg-value-props__card:nth-child(1) .tvg-value-props__icon svg { stroke: var(--hcl-logo-blauw-12); }

.tvg-value-props__card:nth-child(2) .tvg-value-props__icon { background: rgba(191, 65, 146, 0.08); }
.tvg-value-props__card:nth-child(2) .tvg-value-props__icon svg { stroke: var(--hcl-logo-paars-9); }

.tvg-value-props__card:nth-child(3) .tvg-value-props__icon { background: rgba(5, 108, 183, 0.08); }
.tvg-value-props__card:nth-child(3) .tvg-value-props__icon svg { stroke: var(--hcl-logo-blauw-9); }

.tvg-value-props__card:nth-child(4) .tvg-value-props__icon { background: rgba(4, 120, 87, 0.08); }
.tvg-value-props__card:nth-child(4) .tvg-value-props__icon svg { stroke: var(--emerald-700); }

.tvg-value-props__card h3 {
  color: var(--hcl-neutral-12);
  margin-bottom: 12px;
}

.tvg-value-props__card p {
  color: var(--hcl-neutral-11);
}

@media (max-width: 1023px) {
  .tvg-value-props__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .tvg-value-props__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Case Showcase
   ========================================================================== */
.tvg-showcase {
  padding: 80px 0;
  background: #f8f9fa;
}

.tvg-showcase .tvg-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.tvg-showcase__heading {
  text-align: center;
  margin-bottom: 48px !important;
  color: var(--hcl-neutral-12);
}

.tvg-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tvg-showcase__card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}

.tvg-showcase__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  color: inherit;
}

.tvg-showcase__image-wrap {
  position: relative;
  overflow: hidden;
}

.tvg-showcase__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tvg-showcase__card:hover .tvg-showcase__image {
  transform: scale(1.05);
}

.tvg-showcase__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tvg-showcase__tag--onboarding { background: rgba(5, 108, 183, 0.9); color: #fff; }
.tvg-showcase__tag--conversion { background: rgba(191, 65, 146, 0.9); color: #fff; }
.tvg-showcase__tag--engagement { background: rgba(4, 120, 87, 0.9); color: #fff; }

.tvg-showcase__info { padding: 20px 24px; }

.tvg-showcase__info h3 {
  color: var(--hcl-neutral-12);
  margin: 0 0 6px;
}

.tvg-showcase__info p {
  color: var(--hcl-neutral-11);
  margin: 0;
}

@media (max-width: 1023px) {
  .tvg-showcase__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .tvg-showcase__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CTA Section
   ========================================================================== */
.tvg-cta {
  position: relative;
  padding: 80px 0;
  background: #fff;
}

.tvg-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--hcl-logo-paars-9);
}

.tvg-cta .tvg-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}

.tvg-cta__heading {
  margin-bottom: 1rem !important;
  color: var(--hcl-neutral-12);
}

.tvg-cta__text {
  margin-bottom: 2rem;
  color: var(--hcl-neutral-11);
}

.tvg-cta__checks {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.tvg-cta__check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--hcl-neutral-12);
}

.tvg-cta__check svg { flex-shrink: 0; }

/* ==========================================================================
   Videofeiten
   ========================================================================== */
.tvg-videofacts {
  padding: 60px 0;
  background: #f0f4f8;
}

.tvg-videofacts .tvg-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.tvg-videofacts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}

.tvg-videofacts__number {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: var(--hcl-logo-paars-9, #c2185b);
  line-height: 1.1;
  margin-bottom: 8px;
}

.tvg-videofacts__label {
  display: block;
  color: var(--hcl-neutral-11, #555);
}

@media (max-width: 1023px) {
  .tvg-videofacts__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .tvg-videofacts__grid { grid-template-columns: 1fr; }
  .tvg-videofacts__number { font-size: 2.5rem; }
}

/* ==========================================================================
   Hero Tabs
   ========================================================================== */
.tvg-hero__tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tvg-hero__tab {
  padding: 8px 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.tvg-hero__tab:hover {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.tvg-hero__tab.active {
  background: #fff;
  color: var(--hcl-logo-blauw-12, #0d1b3e);
  border-color: #fff;
}

/* ==========================================================================
   The Videogram Difference
   ========================================================================== */
.tvg-difference {
  padding: 80px 0;
  background: #fff;
}

.tvg-difference .tvg-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.tvg-difference__heading {
  text-align: center;
  margin-bottom: 16px !important;
  color: var(--hcl-neutral-12);
}

.tvg-difference__intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px;
  color: var(--hcl-neutral-11, #555);
}

.tvg-difference__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.tvg-difference__card {
  padding: 32px 24px;
  border-radius: 16px;
  background: var(--hcl-neutral-2, #f8f9fa);
  border-left: 4px solid var(--hcl-logo-paars-9, #c2185b);
}

.tvg-difference__card h3 {
  color: var(--hcl-neutral-12);
  margin-bottom: 12px;
}

.tvg-difference__card p {
  color: var(--hcl-neutral-11);
  margin: 0;
}

@media (max-width: 1023px) {
  .tvg-difference__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .tvg-difference__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Global Container Override
   ========================================================================== */
.tvg-container,
section > .tvg-container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}