/* Compactere secties */
section.section.modular { padding: 48px 0; }

/* Hero compacter en gecentreerd */
.intro { max-width: 720px; margin: 0 auto; text-align: center; }
.intro__content h1 { margin-bottom: 12px; }

/* Knoppen in de intro-sectie */
.intro__content a.btn {
    display: inline-block;
    margin: 8px 8px 0 0;
    padding: 12px 26px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.intro__content a.btn-primary {
    background: var(--accent, #3085EE);
    color: #fff;
}
.intro__content a.btn-primary:hover {
    background: var(--accent-hover, #126ee0);
    color: #fff;
}
.intro__content a.btn-ghost {
    border: 1px solid var(--accent, #3085EE);
    color: var(--accent, #3085EE);
}
.intro__content a.btn-ghost:hover {
    background: var(--accent, #3085EE);
    color: #fff;
}

/* Foto als ronde avatar — intro__img zit OP de <img> zelf */
.intro__img {
    width: 180px;
    height: 180px;
    max-width: 180px;      /* voorkom dat flex/width 50% hem oprekt */
    flex: 0 0 180px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #e5e5e5;
}

@media (max-width: 600px) {
    .intro__img { width: 120px; height: 120px; max-width: 120px; flex-basis: 120px; }
}

/* Iconen: klein rondje, icoon echt gecentreerd */
.about__detail__icon {
    font-size: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* theme-hack ongedaan maken */
.about__detail__icon i {
    padding: 0;
    font-size: 20px;
    line-height: 1;
}

/* Icoontje iets dichter bij de titel */
.about__detail__icon + h4 {
    margin-top: 8px;
}

/* Blog-teasers op de homepage */
.blog__teaser {
    list-style: none;
    padding: 0;
    max-width: 680px;
    margin: 0 auto 24px;
    text-align: left;
}
.blog__teaser li {
    padding: 14px 0;
    border-bottom: 1px solid #e5e5e5;
}
.blog__teaser li:last-child { border-bottom: none; }
.blog__teaser a { font-weight: 600; text-decoration: none; }
.blog__teaser small { display: block; color: #606060; margin-top: 4px; }