/* ═══════════════════════════════════════════
   OVER-AUDIOTOURS — pagina-specifieke stijlen
   Werkt bovenop de gedeelde css/style.css
═══════════════════════════════════════════ */

/* Subpagina: nav altijd solid (geen transparant boven hero) */
.nav--subpage {
  position: fixed;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Pagina-titel in het midden van de nav */
.nav__page-title {
  flex: 1;
  text-align: center;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--primary);
  padding: 0 1rem;
}
@media (max-width: 640px) {
  .nav__page-title { display: none; }
}
.nav__links--subpage {
  display: flex !important;
  position: static;
  flex-direction: row;
  padding: 0;
  gap: .25rem;
  background: transparent;
  box-shadow: none;
}
.nav--subpage .nav__link { color: var(--gray) !important; width: auto; padding: .45rem .9rem; }
.nav--subpage .nav__link:hover { color: var(--primary) !important; background: var(--light) !important; }

/* Ghost knop op donkere achtergrond in nav werkt niet hier — CTA blijft accent */
@media (max-width: 480px) {
  .nav__links--subpage li:first-child { display: none; } /* "← Terug" verbergen, logo is al link naar home */
}

/* ═══════════════════════════════════════════
   HERO — audiotours met headerfoto
═══════════════════════════════════════════ */
.at-hero {
  position: relative;
  min-height: clamp(500px, 68vh, 640px);
  /* Ruimte boven en onder teruggebracht (was 4rem / 3rem) nadat er een
     bovenschrift, een knop en een voetnoot bij kwamen. Zonder die correctie
     werd de hero flink hoger en verdween de rest van de pagina onder de vouw. */
  padding: calc(var(--nav-height) + 2.25rem) 1.5rem 2.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  color: var(--white);
}
.at-hero__bg {
  position: absolute;
  inset: 0;
  background: url('assets/header_audiotour.jpg') 65% center/cover no-repeat;
  z-index: 0;
}
.at-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(8,8,94,.65) 0%,
      rgba(8,8,94,.35) 40%,
      rgba(8,8,94,.55) 75%,
      rgba(8,8,94,.85) 100%);
  pointer-events: none;
}
.at-hero__content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  text-align: center;
  margin-top: auto;
}
.at-hero__label {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Wit op een gedempte donkere pil. Stond eerder in accent-paars op een
     bijna doorzichtige achtergrond, en dat viel weg tegen de paarse tinten
     in de headerfoto. */
  color: var(--white);
  margin-bottom: .9rem;
  padding: .4rem 1.1rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50px;
  background: rgba(16,18,48,.45);
}
.at-hero__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.at-hero__title em {
  font-style: normal;
  color: var(--accent-light);
  position: relative;
  white-space: nowrap;
}
.at-hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,.85);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}
.at-hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
/* Regeltje onder de knop: verduidelijkt dat het account voor de máker is en
   niet voor de bezoeker. Bewust kleiner en gedempt — het is een voetnoot bij
   de knop, geen tweede boodschap. */
.at-hero__note {
  margin: .75rem auto 0;
  max-width: 640px;
  font-size: .85rem;
  color: rgba(255,255,255,.7);
}

/* Lead paragraaf onder section-header */
.lead {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 1.1rem;
  color: var(--gray);
  line-height: 1.7;
}
.lead strong { color: var(--dark); font-weight: 600; }

/* ═══════════════════════════════════════════
   USP-KAARTEN — 5-kolom grid dat mooi verdeelt
═══════════════════════════════════════════ */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.usp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.usp-card {
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.usp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.usp-card__icon {
  font-size: 2.25rem;
  margin-bottom: 1rem;
}
.usp-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: .6rem;
}
.usp-card p {
  font-size: .9rem;
  color: var(--gray);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   FEATURE-SPLIT — lijst links, screenshot rechts
═══════════════════════════════════════════ */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: .95rem;
  color: var(--dark);
  line-height: 1.6;
}
.feature-list .check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 4px;
  background: var(--light);
  color: var(--accent);
  border-radius: 50%;
  margin-top: .2rem;
}
.feature-list strong { color: var(--primary); font-weight: 700; }
.feature-list em { color: var(--accent); font-style: normal; font-weight: 600; }

/* Browser-mockup voor beheertool-screenshot */
.browser-mockup {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(13,13,143,.18), 0 8px 20px rgba(13,13,143,.10);
  border: 1px solid var(--gray-light);
}
.browser-mockup__bar {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .7rem .9rem;
  background: #F3F4F8;
  border-bottom: 1px solid var(--gray-light);
}
.browser-mockup__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #D1D5DB;
}
.browser-mockup__dot:nth-child(1) { background: #FF605C; }
.browser-mockup__dot:nth-child(2) { background: #FFBD44; }
.browser-mockup__dot:nth-child(3) { background: #00CA4E; }
.browser-mockup__addr {
  margin-left: 1rem;
  padding: .25rem .9rem;
  background: var(--white);
  border-radius: 20px;
  font-size: .75rem;
  color: var(--gray);
  font-family: 'Courier New', monospace;
  flex: 1;
  max-width: 240px;
}
.browser-mockup img {
  width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════
   PREVIEW — twee telefoons
═══════════════════════════════════════════ */
.preview__intro {
  text-align: center;
  margin-bottom: 3.5rem;
}
.preview__intro .section__label { color: var(--accent); }
.preview__intro .section__title { color: var(--primary); }

.phones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 720px;
  margin-inline: auto;
}
/* Variant met drie schermen naast elkaar */
.phones--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 900px;
}
.phones--3 .phone__frame { max-width: 240px; }
.phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.phone__frame {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 9 / 19;
  background: #1a1a2e;
  border-radius: 32px;
  padding: 10px;
  box-shadow:
    0 30px 60px rgba(13,13,143,.25),
    0 12px 24px rgba(13,13,143,.15),
    inset 0 0 0 1.5px rgba(255,255,255,.10);
  overflow: hidden;
}
.phone__frame::before {
  /* Notch bovenaan */
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 18px;
  background: #1a1a2e;
  border-radius: 0 0 12px 12px;
  z-index: 2;
}
.phone__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 22px;
  display: block;
}
.phone__caption {
  text-align: center;
  font-size: .9rem;
  color: var(--gray);
  font-style: italic;
  max-width: 260px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   CASES-GRID — toepassingsvoorbeelden
═══════════════════════════════════════════ */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.case-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--gray-light);
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}
.case-card__icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.case-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: .6rem;
}
.case-card p {
  font-size: .9rem;
  color: var(--gray);
  line-height: 1.65;
}
.case-card em { font-style: italic; color: var(--dark); font-weight: 500; }

/* Variant: kaart met foto bovenaan */
.case-card--photo {
  padding: 0;
}
.case-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.case-card--photo:hover .case-card__img {
  transform: scale(1.04);
}
.case-card__body {
  padding: 1.5rem 1.75rem 1.75rem;
}

/* Variant: "Meer ideeën" — paars verloop, geen foto */
.case-card--more {
  background: linear-gradient(135deg, var(--primary) 0%, #2D2DB8 100%);
  color: var(--white);
  border-color: transparent;
}
.case-card--more .case-card__title,
.case-card--more p { color: var(--white); }
.case-card--more p { color: rgba(255,255,255,.85); }

/* ═══════════════════════════════════════════
   AUDIENCE-GRID — compacte kaarten met tags
═══════════════════════════════════════════ */
.audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.audience-card {
  background: var(--light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  border: 1px solid transparent;
  transition: border-color .3s ease, transform .3s ease;
}
.audience-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.audience-card__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.audience-card__body { flex: 1; }
.audience-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: .5rem;
}
.audience-card p {
  color: var(--gray);
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.audience-tag {
  padding: .3rem .8rem;
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--primary);
  transition: border-color .2s ease, background .2s ease;
}
.audience-tag:hover {
  border-color: var(--accent);
  background: #F5F5FF;
}

/* ═══════════════════════════════════════════
   WHY-GRID — waarom deze aanpak werkt
═══════════════════════════════════════════ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
.why-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 2rem 5rem;
  position: relative;
  transition: background .3s ease, transform .3s ease;
}
.why-card:hover {
  background: rgba(255,255,255,.10);
  transform: translateY(-4px);
}
.why-card__num {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--white);
  font-weight: 800;
  font-size: 1.2rem;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(123,126,245,.35);
}
.why-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .6rem;
}
.why-card p {
  font-size: .95rem;
  color: rgba(255,255,255,.70);
  line-height: 1.65;
}
.why-card em { color: var(--accent-light); font-style: italic; }

/* ═══════════════════════════════════════════
   STEPS — proces
═══════════════════════════════════════════ */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(to right, var(--accent), var(--accent-light));
  z-index: 0;
  opacity: .35;
}
.step {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem 1.75rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-light);
}
.step__num {
  width: 60px;
  height: 60px;
  margin: -3rem auto 1rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(123,126,245,.35);
  border: 4px solid var(--light);
}
.step__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: .5rem;
}
.step p {
  font-size: .875rem;
  color: var(--gray);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   SHOWCASE — bekijk demo blok
═══════════════════════════════════════════ */
.showcase {
  background: linear-gradient(135deg, var(--light) 0%, #FFFFFF 100%);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2.5rem;
  text-align: center;
  border: 1px solid var(--gray-light);
  box-shadow: var(--shadow-sm);
}
.showcase__logo {
  display: block;
  height: 140px;
  width: auto;
  margin: 0 auto 1.5rem;
}
@media (max-width: 640px) {
  .showcase__logo { height: 100px; }
}
.showcase__label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}
.showcase__title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1.25rem;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.showcase__intro {
  font-size: 1.05rem;
  color: var(--gray);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.65;
}
.showcase__cta {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: 1.1rem 2.2rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
  border-radius: 60px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  box-shadow: 0 10px 30px rgba(123,126,245,.40), 0 4px 10px rgba(13,13,143,.15);
  transition: transform .25s ease, box-shadow .25s ease, gap .25s ease;
}
.showcase__cta-icon { width: 22px; height: 22px; flex-shrink: 0; }
.showcase__cta-arrow { width: 18px; height: 18px; flex-shrink: 0; transition: transform .25s ease; }
.showcase__cta:hover {
  transform: translateY(-3px);
  gap: 1.1rem;
  box-shadow: 0 14px 38px rgba(123,126,245,.50), 0 6px 14px rgba(13,13,143,.20);
}
.showcase__cta:hover .showcase__cta-arrow { transform: translateX(3px); }

/* ═══════════════════════════════════════════
   CONTACT-CTA blok
═══════════════════════════════════════════ */
.contact-cta {
  text-align: center;
  padding: 1rem 0;
}
.contact-cta__title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1.25rem;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.contact-cta__text {
  font-size: 1.05rem;
  color: var(--gray);
  max-width: 560px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}
.contact-cta__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Extra button varianten voor deze pagina */
.btn--large {
  padding: 1.1rem 2.2rem;
  font-size: 1.05rem;
}
.btn--large svg { width: 20px; height: 20px; }
.btn--ghost-dark {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn--ghost-dark:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
  .feature-split      { grid-template-columns: 1fr; gap: 3rem; }
  .cases-grid         { grid-template-columns: 1fr 1fr; }
  .audience-grid      { grid-template-columns: 1fr; gap: 1.25rem; }
  .why-grid           { grid-template-columns: 1fr; }
  .steps              { grid-template-columns: 1fr 1fr; row-gap: 4rem; }
  .steps::before      { display: none; }
  .usp-grid--4        { grid-template-columns: 1fr 1fr; }
  .phones--3          { gap: 1.25rem; max-width: 100%; }
  .phones--3 .phone__frame { max-width: 200px; }
  .phones--3 .phone__caption { font-size: .82rem; }
}

@media (max-width: 768px) {
  .at-hero        { min-height: 460px; padding: calc(var(--nav-height) + 3rem) 1.25rem 4rem; }
  .at-hero__actions { flex-direction: column; align-items: center; width: 100%; max-width: 300px; margin-inline: auto; }
  .at-hero__actions .btn { width: 100%; justify-content: center; }
  .cases-grid     { grid-template-columns: 1fr; }
  .usp-grid, .usp-grid--4 { grid-template-columns: 1fr 1fr; }
  .steps          { grid-template-columns: 1fr; row-gap: 4rem; }
  .showcase       { padding: 2.5rem 1.5rem; }
  .phones, .phones--3 { grid-template-columns: 1fr; gap: 3rem; max-width: 320px; }
  .phones--3 .phone__frame { max-width: 260px; }
  .audience-card  { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; }
  .audience-card__icon { width: 56px; height: 56px; font-size: 1.75rem; }
}

@media (max-width: 480px) {
  .usp-grid, .usp-grid--4 { grid-template-columns: 1fr; }
  .why-card       { padding: 2rem 1.5rem 1.5rem 4.5rem; }
  .why-card__num  { top: 1.25rem; left: 1.25rem; width: 38px; height: 38px; font-size: 1rem; }
}


/* ═══════════════════════════════════════════
   VIDEOBLOK - staande promovideo met tekst ernaast

   De video is 720x900, dus staand. Op een breed scherm zet ik hem links
   met tekst ernaast, anders blijft er een halve schermbreedte leeg.
   Onder 900px komt alles onder elkaar en gecentreerd.
   Staat op een donkere sectie, daarom witte tekst.
═══════════════════════════════════════════ */
.videoblok {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.videoblok__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 900;   /* houdt de plek vrij vóór het laden, zodat de pagina niet verspringt */
  object-fit: cover;         /* poster is een paar pixels smaller dan de video, dit voorkomt zwarte randjes */
  border-radius: var(--radius-lg);
  background: #000;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}
.videoblok__titel {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 1rem;
}
.videoblok__tekst p {
  max-width: 46ch;           /* lange regels lezen slecht, dus afkappen op leesbreedte */
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
}
.videoblok__tekst p + p { margin-top: .9rem; }

@media (max-width: 900px) {
  .videoblok         { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .videoblok__video  { max-width: 320px; }
  .videoblok__tekst  { max-width: 460px; }
}