:root {
    --pink: #e84c88; /* */
    --dark: #1a1a1a;
    --border: #e2e8f0;
}

body { font-family: 'Inter', Arial, sans-serif; margin: 0; color: #444; -webkit-font-smoothing: antialiased; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Header - Gecentreerd */
header { padding: 30px 0; border-bottom: 1px solid var(--border); text-align: center; }
.header-logo { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }
.storekeeper-brand { font-size: 16px; font-weight: bold; letter-spacing: 4px; color: #000; text-decoration: none; }
.pipe { color: var(--border); font-size: 24px; }
.logo-img-ccg { height: 50px; width: auto; }

.main-nav ul { list-style: none; padding: 0; display: flex; justify-content: center; gap: 30px; }
.main-nav a { text-decoration: none; color: #000; font-size: 11px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; }
.main-nav a:hover, .main-nav a.active { color: var(--pink); }

/* Hero met donker verloop */
.hero-section { background: linear-gradient(to bottom, #444, #1a1a1a); color: #fff; padding: 90px 0; text-align: center; }
.hero-section h1 { font-size: 34px; margin-bottom: 15px; }

.btn-pink { 
    display: inline-block; background: var(--pink); color: #fff; padding: 15px 40px; 
    border-radius: 30px; text-decoration: none; font-weight: bold; margin-top: 25px; 
}
.btn-pink strong {
    font-size: 18px; color: #000;
}

/* Content Area */
.content-area { padding: 70px 0; text-align: center; }
.integration-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.card { border: 1px solid var(--border); padding: 40px 30px; border-radius: 12px; text-align: left; transition: 0.3s; }
.card:hover { border-color: var(--pink); }
.pink-link { color: var(--pink); text-decoration: none; font-weight: bold; }

/* Footer - Black */
.site-footer { background: #000; color: #fff; padding: 60px 0; text-align: center; }
.footer-info p { color: #888; font-size: 14px; line-height: 1.8; }
.footer-bottom { margin-top: 40px; padding-top: 25px; border-top: 1px solid #222; font-size: 12px; }