/* ============================================================
   Delta AI — layout voor de toepassingspagina's (cluster 1)
   Gedeeld door /ai-offertes-automatiseren, /ai-klantenservice,
   /ai-social-media, /ai-boekhouding, /ai-leadgeneratie,
   /ai-chatbot-website
   ============================================================ */

.tp-hero{
  position:relative;color:#fff;padding:60px 0 68px;
  background:
    radial-gradient(680px 360px at 88% -12%,rgba(0,164,227,.38),transparent 62%),
    linear-gradient(160deg,var(--navy),var(--navy-deep));
}
.tp-hero h1{color:#fff;font-size:clamp(29px,4.2vw,46px);margin-bottom:16px;letter-spacing:-.02em;max-width:17em}
.tp-hero h1 .accent{color:var(--cyan)}
.tp-hero .lead{color:#b9c6e2;max-width:660px;font-size:18.5px;margin-bottom:8px}
.tp-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;padding:0;list-style:none}
.tp-meta li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:#cdd8ee;font-weight:500}
.tp-meta .tick{color:var(--cyan);font-weight:900}

.tp-shell{max-width:840px;margin:0 auto;padding:0 24px}
.tp-shell h2{font-size:clamp(23px,2.6vw,31px);margin:46px 0 14px;letter-spacing:-.01em;color:var(--navy)}
.tp-shell h3{font-size:clamp(18px,1.8vw,21px);margin:26px 0 10px;color:var(--navy)}
.tp-shell p,.tp-shell li{font-size:16.5px;line-height:1.7;color:var(--ink)}
.tp-shell p{margin-bottom:14px}
.tp-shell ul,.tp-shell ol{margin:6px 0 18px 22px}
.tp-shell ul li,.tp-shell ol li{margin-bottom:8px}
.tp-shell ul li::marker{color:var(--cyan-deep)}
.tp-shell>section{scroll-margin-top:90px}

/* voor / na */
.tp-ba{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0 26px}
.tp-ba .col{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:#fff}
.tp-ba .col.na{border-color:var(--cyan);background:var(--pale)}
.tp-ba h3{margin:0 0 10px;font-size:15px;letter-spacing:.09em;text-transform:uppercase}
.tp-ba .col.voor h3{color:#94a0b8}
.tp-ba .col.na h3{color:var(--cyan-deep)}
.tp-ba ul{margin:0;padding-left:20px}
.tp-ba li{font-size:15.5px;line-height:1.6;margin-bottom:9px}
.tp-ba .col.voor li::marker{color:#c3ccdb}
@media(max-width:680px){.tp-ba{grid-template-columns:1fr}}

/* stappen */
.tp-steps{counter-reset:tpstep;margin:18px 0 26px;padding:0;list-style:none}
.tp-steps li{
  position:relative;padding:16px 18px 16px 62px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:12px;background:#fff;font-size:16px;line-height:1.6;
}
.tp-steps li::before{
  counter-increment:tpstep;content:counter(tpstep);
  position:absolute;left:16px;top:15px;
  width:32px;height:32px;border-radius:9px;
  background:var(--navy);color:var(--cyan);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:15px;
}
.tp-steps b{color:var(--navy);display:block;margin-bottom:2px}

/* cijferstrip */
.tp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0 26px}
.tp-stat{border:1px solid var(--line);border-radius:12px;padding:20px 16px;text-align:center;background:#fff}
.tp-stat .num{font-size:28px;font-weight:900;color:var(--navy);line-height:1.1;letter-spacing:-.02em}
.tp-stat .num em{font-style:normal;color:var(--cyan-deep)}
.tp-stat .lab{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.4}
@media(max-width:680px){.tp-stats{grid-template-columns:1fr}}

/* prijsblok */
.tp-price{
  background:linear-gradient(150deg,var(--navy),var(--navy-deep));color:#fff;
  border-radius:16px;padding:28px 30px;margin:22px 0 28px;
}
.tp-price h3{color:#fff;margin:0 0 12px;font-size:20px}
.tp-price p{color:#c6d2ea;font-size:16px;margin-bottom:12px}
.tp-price p:last-child{margin-bottom:0}
.tp-price b{color:var(--cyan)}
.tp-price .band{
  display:inline-block;background:rgba(0,164,227,.16);border:1px solid rgba(0,164,227,.5);
  color:#fff;border-radius:9px;padding:8px 14px;font-weight:700;font-size:16px;margin:2px 0 12px;
}

/* callout */
.tp-note{
  background:var(--pale);border-left:4px solid var(--cyan);border-radius:8px;
  padding:14px 18px;margin:16px 0 24px;font-size:15.5px;color:var(--ink);
}
.tp-note b{color:var(--navy)}

/* voor wie */
.tp-fit{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 26px}
.tp-fit .col{border:1px solid var(--line);border-radius:14px;padding:18px 22px;background:#fff}
.tp-fit h3{margin:0 0 8px;font-size:16px}
.tp-fit .yes h3{color:var(--cyan-deep)}
.tp-fit .no h3{color:#94a0b8}
.tp-fit ul{margin:0;padding-left:20px}
.tp-fit li{font-size:15.5px;margin-bottom:7px;line-height:1.55}
@media(max-width:680px){.tp-fit{grid-template-columns:1fr}}

/* CTA */
.tp-cta{
  background:linear-gradient(150deg,var(--navy),var(--navy-deep));color:#fff;
  border-radius:16px;padding:36px 32px;margin:36px 0 0;text-align:center;
}
.tp-cta h2{color:#fff;font-size:24px;margin:0 0 10px}
.tp-cta p{color:#b9c6e2;max-width:560px;margin:0 auto 20px;font-size:16px}

/* verwante toepassingen */
.tp-related{margin:48px 0 0;padding-top:34px;border-top:1px solid var(--line)}
.tp-related h2{margin-top:0;font-size:21px}
.tp-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:16px}
.tp-rel-grid a{
  display:block;border:1px solid var(--line);border-radius:11px;padding:14px 16px;
  text-decoration:none;background:#fff;transition:border-color .15s,transform .15s;
}
.tp-rel-grid a:hover{border-color:var(--cyan);transform:translateY(-2px)}
.tp-rel-grid b{display:block;color:var(--navy);font-size:15.5px;margin-bottom:3px}
.tp-rel-grid span{display:block;color:var(--muted);font-size:13.5px;line-height:1.45}

/* breadcrumb */
.tp-crumb{font-size:13.5px;color:#9fb0d8;margin-bottom:14px}
.tp-crumb a{color:#cdd8ee;text-decoration:none;border-bottom:1px solid rgba(205,216,238,.35)}
.tp-crumb a:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.tp-crumb span{color:#7f90b8}

@media(max-width:620px){
  .tp-hero{padding:44px 0 52px}
  .tp-price{padding:22px 20px}
  .tp-cta{padding:28px 20px}
}