/* perpon.nl – kleuren afgestemd op het Bankboek-startscherm */
:root {
    --pp-navy: #12305a;
    --pp-navy-2: #1d4e8f;
    --pp-gold: #f2b51f;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

.bg-navy {
    background-color: var(--pp-navy);
}

.hero {
    background: linear-gradient(135deg, var(--pp-navy) 0%, var(--pp-navy-2) 100%);
}

.intro {
    max-width: 640px;
}

/* Banklabels in huisstijlkleuren, zoals op het startscherm */
.bank-label {
    display: inline-block;
    padding: .35rem 1rem;
    border-radius: 2rem;
    font-weight: 700;
    font-size: .95rem;
}

.bank-ing {
    background: #ff6200;
    color: #fff;
}

.bank-asn {
    background: #fada87;
    color: #c23e1c;
    border: 2px solid #db4e29;
}

.bank-abn {
    background: #00a296;
    color: #fff;
    border: 2px solid #f3c000;
}

.bank-other {
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
    font-weight: 400;
}

.feature-icon {
    font-size: 2rem;
    color: var(--pp-navy-2);
}

.feature {
    transition: transform .15s ease;
}

.feature:hover {
    transform: translateY(-3px);
}

.step-nr {
    width: 3rem;
    height: 3rem;
    line-height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--pp-gold);
    color: var(--pp-navy);
    font-weight: 700;
    font-size: 1.25rem;
}

.check-list li {
    padding: .35rem 0;
}

.check-list i {
    color: #198754;
    margin-right: .6rem;
}

.download {
    background: linear-gradient(135deg, var(--pp-navy-2) 0%, var(--pp-navy) 100%);
}