/* =====================================================
   SIRCLE Pakket — premium custom styling
   Standalone: doesn't depend on pricing.css (removed)
   Layered on top of style.css + nav-bold.css
   ===================================================== */

/* === Shared small helpers === */
.sp-noise { position:absolute; inset:0; opacity:0.04; mix-blend-mode:overlay; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sp-glow { position:absolute; width:600px; height:600px; border-radius:50%; filter:blur(120px); pointer-events:none; }
.sp-glow--gold { background:radial-gradient(circle, rgba(212,175,100,0.2), transparent 70%); }
.sp-glow--green { background:radial-gradient(circle, rgba(72,120,92,0.15), transparent 70%); }

/* =====================================================
   HERO — aligned with site convention (sc-hero)
   Left-aligned, UPPERCASE H1 at 40-88px, 900px content max
   Layered bg: unsplash + abstract spiral + gradient for depth
   ===================================================== */
.sp-hero { position:relative; min-height:90vh; display:flex; align-items:center; overflow:hidden; background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(143,175,138,0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 80% 70%, rgba(143,175,138,0.06) 0%, transparent 50%), #0C180F; color:#fff; padding:140px 0 90px; }
.sp-hero::before { content:""; position:absolute; top:-20%; right:-10%; width:70%; height:90%; background:radial-gradient(ellipse, rgba(212,175,100,0.14), transparent 70%); pointer-events:none; z-index:1; }
.sp-hero::after { content:""; position:absolute; bottom:-20%; left:-10%; width:60%; height:70%; background:radial-gradient(ellipse, rgba(63,111,69,0.25), transparent 70%); pointer-events:none; z-index:1; }
.sp-hero__bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.sp-hero__bg-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(0.15) brightness(0.6) saturate(0.9); opacity:0.85; }
.sp-hero__bg-spiral { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:overlay; opacity:0.35; pointer-events:none; }
.sp-hero__bg::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(12,24,15,0.88) 0%, rgba(12,24,15,0.4) 55%, rgba(12,24,15,0.75) 100%); }
.sp-hero__content { position:relative; z-index:3; width:90%; max-width:1200px; margin:0 auto; }
.sp-hero__content > * { max-width:900px; }
.sp-hero__label { display:inline-block; font-size:13px; letter-spacing:2.4px; text-transform:uppercase; color:#d4af64; padding:8px 18px; border:1px solid rgba(212,175,100,0.4); border-radius:999px; margin-bottom:32px; font-weight:600; background:rgba(212,175,100,0.06); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.sp-hero__title { font-size:clamp(40px, 7vw, 88px); font-weight:700; line-height:0.95; margin-bottom:28px; color:#fff; text-transform:uppercase; letter-spacing:-0.05em; word-spacing:-0.08em; }
.sp-hero__title-accent { display:block; color:#d4af64; margin-top:0.12em; }
.sp-hero__subtitle { font-size:20px; line-height:1.65; color:rgba(255,255,255,0.82); margin:0 0 40px 0; max-width:580px; font-weight:300; }
.sp-hero__cta { display:inline-flex; align-items:center; gap:10px; color:#0C180F; text-decoration:none; font-weight:700; padding:16px 32px; border-radius:999px; background:#d4af64; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.sp-hero__cta:hover { background:#c49a50; transform:translateY(-2px); box-shadow:0 12px 32px rgba(212,175,100,0.28); }
.sp-hero__actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.sp-hero__cta-secondary { display:inline-flex; align-items:center; gap:8px; padding:16px 24px; color:#fff; text-decoration:none; font-weight:500; font-size:0.95rem; opacity:0.75; transition:opacity .2s ease; }
.sp-hero__cta-secondary:hover { opacity:1; }
.sp-hero__stats { display:flex; gap:48px; flex-wrap:wrap; margin-top:56px; padding-top:28px; border-top:1px solid rgba(255,255,255,0.15); max-width:720px; }
.sp-hero__stat { display:flex; flex-direction:column; }
.sp-hero__stat-num { font-size:32px; font-weight:700; color:#d4af64; line-height:1; }
.sp-hero__stat-label { font-size:13px; color:rgba(255,255,255,0.7); margin-top:6px; letter-spacing:0.2px; }

/* =====================================================
   Generic "premium section" wrappers
   ===================================================== */
.sp-section { position:relative; padding:120px 0; overflow:hidden; }
.sp-section--dark { background: radial-gradient(ellipse 60% 50% at 20% 30%, rgba(143,175,138,0.10) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 80% 70%, rgba(143,175,138,0.06) 0%, transparent 50%), #0C180F; color:#fff; }
.sp-section--cream { background:#f4ede1; color:#1a1a1a; }
.sp-section__container { position:relative; z-index:2; max-width:1280px; width:92%; margin:0 auto; }
.sp-section__header { text-align:center; max-width:780px; margin:0 auto 48px auto; }
.sp-section__eyebrow { font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; color:#d4af64; font-weight:600; margin-bottom:14px; display:block; }
.sp-section__title { font-size:clamp(1.8rem, 3.2vw, 2.6rem); font-weight:700; line-height:1.2; margin-bottom:16px; }
.sp-section--dark .sp-section__title { color:#fff; }
.sp-section--cream .sp-section__title { color:#0C180F; }
.sp-section__text { font-size:1.05rem; line-height:1.65; }
.sp-section--dark .sp-section__text { color:rgba(255,255,255,0.78); }
.sp-section--cream .sp-section__text { color:#333; }

/* =====================================================
   VOOR WIE — editorial 2x2 (no card-tray)
   ===================================================== */
.sp-painfor { display:grid; grid-template-columns:repeat(2, 1fr); gap:0; max-width:1100px; margin:64px auto 0 auto; border-top:1px solid rgba(12,24,15,0.1); border-left:1px solid rgba(12,24,15,0.1); }
.sp-painfor__item { background:transparent; padding:52px 48px; border-right:1px solid rgba(12,24,15,0.1); border-bottom:1px solid rgba(12,24,15,0.1); transition:background .3s ease; }
.sp-painfor__item:hover { background:rgba(212,175,100,0.05); }
.sp-painfor__icon { width:44px; height:44px; margin-bottom:22px; color:#0C180F; }
.sp-painfor__icon svg { width:100%; height:100%; }
.sp-painfor__title { font-size:1.15rem; font-weight:700; color:#0C180F; margin-bottom:10px; }
.sp-painfor__text { font-size:0.98rem; color:#1C1E1D; line-height:1.6; }
.sp-painfor__close { text-align:center; margin-top:56px; font-size:1.15rem; font-weight:600; color:#0C180F; }

/* =====================================================
   MOTOR CYCLE intro (gold pill flow)
   ===================================================== */
.sp-motor { max-width:900px; margin:0 auto 56px auto; text-align:center; }
.sp-motor__cycle { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; align-items:center; }
.sp-motor__step { display:inline-flex; align-items:center; gap:10px; padding:10px 22px; border:1px solid rgba(212,175,100,0.4); border-radius:999px; color:#d4af64; font-size:0.9rem; font-weight:600; letter-spacing:0.6px; background:rgba(212,175,100,0.08); }
.sp-motor__step-num { font-size:0.72rem; opacity:0.65; }
.sp-motor__arrow { color:rgba(212,175,100,0.55); display:flex; align-items:center; }

/* =====================================================
   5 PILLARS — 3+2 layout, gold icon badges
   ===================================================== */
.sp-pillars { display:flex; flex-wrap:wrap; justify-content:center; gap:28px; margin:56px auto 0 auto; max-width:1120px; }
.sp-pillar { flex:1 1 320px; max-width:340px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:32px; transition:transform .3s ease, border-color .3s ease, background .3s ease; }
.sp-pillar:hover { transform:translateY(-4px); border-color:rgba(212,175,100,0.4); background:rgba(255,255,255,0.06); }
.sp-pillar__icon { width:48px; height:48px; margin-bottom:20px; color:#d4af64; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(212,175,100,0.12); }
.sp-pillar__icon svg { width:26px; height:26px; }
.sp-pillar__title { font-size:1.25rem; font-weight:700; margin-bottom:6px; color:#fff; }
.sp-pillar__subtitle { font-size:0.78rem; color:rgba(255,255,255,0.5); margin-bottom:18px; font-weight:400; letter-spacing:1.2px; text-transform:uppercase; }
.sp-pillar__list { list-style:none; padding:0; margin:0; }
.sp-pillar__list li { display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:0.95rem; color:rgba(255,255,255,0.85); line-height:1.5; }
.sp-pillar__list li svg { flex-shrink:0; width:18px; height:18px; color:#d4af64; margin-top:2px; }

/* =====================================================
   PRICE CARD — white centered premium
   ===================================================== */
.sp-price { max-width:720px; margin:0 auto; background:#fff; border-radius:24px; padding:56px 48px; text-align:center; box-shadow:0 20px 60px rgba(12,24,15,0.08); position:relative; overflow:hidden; }
.sp-price__badge { display:inline-block; background:linear-gradient(135deg,#d4af64,#b8935a); color:#fff; padding:7px 18px; border-radius:999px; font-size:0.78rem; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:20px; }
.sp-price__amount { font-size:4.5rem; font-weight:700; line-height:1; color:#0C180F; margin:8px 0; }
.sp-price__period { font-size:1.1rem; color:#666; font-weight:400; }
.sp-price__terms { margin-top:20px; color:#666; font-size:0.95rem; line-height:1.6; }
.sp-price__anchor { margin:24px auto 16px auto; max-width:480px; padding:16px 20px; background:rgba(212,175,100,0.08); border:1px dashed rgba(212,175,100,0.4); border-radius:12px; font-size:0.92rem; color:#5a4a28; line-height:1.5; }
.sp-price__anchor strong { color:#8a6a2a; white-space:nowrap; }
.sp-price__anchor--top { margin:0 auto 8px auto; max-width:520px; }
.sp-price__anchor--top strong { font-size:1.05rem; }
.sp-price__savings { margin:8px auto 20px; max-width:480px; font-size:0.95rem; color:#8a6a2a; font-weight:600; }

/* hero alt link */
.sp-hero__alt { margin:20px 0 0; font-size:0.9rem; color:rgba(255,255,255,0.65); max-width:580px; }
.sp-hero__alt a { color:#d4af64; text-decoration:none; border-bottom:1px solid rgba(212,175,100,0.5); padding-bottom:1px; transition:border-color .2s, color .2s; }
.sp-hero__alt a:hover { color:#F2E2A4; border-color:#F2E2A4; }
.sp-price__cta { display:inline-block; background:#0C180F; color:#fff; padding:18px 40px; border-radius:999px; text-decoration:none; font-weight:600; font-size:1.05rem; margin-top:8px; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.sp-price__cta:hover { background:#123820; transform:translateY(-2px); box-shadow:0 12px 28px rgba(12,24,15,0.2); }
.sp-price__note { margin-top:14px; font-size:0.85rem; color:#888; }

/* =====================================================
   EXTRAS / ADD-ONS block
   ===================================================== */
.sp-extras { max-width:860px; margin:48px auto 0 auto; padding:40px 48px; background:#faf6ec; border:1px solid rgba(12,24,15,0.08); border-radius:20px; }
.sp-extras__label { font-size:0.78rem; letter-spacing:1.6px; text-transform:uppercase; color:#8a7a52; margin-bottom:8px; font-weight:600; }
.sp-extras__title { font-size:1.5rem; font-weight:700; color:#0C180F; margin-bottom:10px; }
.sp-extras__intro { font-size:0.98rem; color:#555; line-height:1.6; margin-bottom:24px; }
.sp-extras__list { list-style:none; padding:0; margin:0; }
.sp-extras__list li { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:16px 0; border-bottom:1px solid rgba(12,24,15,0.08); font-size:0.98rem; color:#333; }
.sp-extras__list li:last-child { border-bottom:none; }
.sp-extras__list li strong { color:#0C180F; white-space:nowrap; font-weight:700; }

/* =====================================================
   COMPARE 5 items — 3+2 layout, gold icon badges
   ===================================================== */
.sp-compare { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin:56px auto 0 auto; max-width:940px; }
.sp-compare__item { flex:1 1 260px; max-width:280px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:28px; transition:transform .3s ease, border-color .3s ease; }
.sp-compare__item:hover { transform:translateY(-3px); border-color:rgba(212,175,100,0.35); }
.sp-compare__icon { width:44px; height:44px; margin-bottom:16px; color:#d4af64; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(212,175,100,0.12); }
.sp-compare__icon svg { width:24px; height:24px; }
.sp-compare__title { font-size:1.05rem; font-weight:700; margin-bottom:8px; color:#fff; }
.sp-compare__text { font-size:0.92rem; color:rgba(255,255,255,0.7); line-height:1.55; }

/* =====================================================
   SOCIAL PROOF — case thumbnails + testimonial
   ===================================================== */
.sp-proof { display:grid; grid-template-columns:1fr; gap:48px; margin-top:64px; }
.sp-proof__cases { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; }
.sp-proof__case { position:relative; display:block; aspect-ratio:4/5; border-radius:14px; overflow:hidden; text-decoration:none; color:#fff; transition:transform .35s ease, box-shadow .35s ease; }
.sp-proof__case:hover { transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,0.4); }
.sp-proof__case img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.sp-proof__case:hover img { transform:scale(1.06); }
.sp-proof__case::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(12,24,15,0.92) 100%); }
.sp-proof__case-meta { position:absolute; bottom:0; left:0; right:0; padding:20px; z-index:2; }
.sp-proof__case-label { font-size:0.7rem; letter-spacing:1.6px; text-transform:uppercase; color:#d4af64; font-weight:700; margin-bottom:6px; }
.sp-proof__case-name { font-size:1.05rem; font-weight:700; line-height:1.25; }

.sp-proof__quote { background:linear-gradient(135deg, rgba(212,175,100,0.08) 0%, rgba(255,255,255,0.02) 100%); border:1px solid rgba(212,175,100,0.22); border-radius:20px; padding:44px 48px; max-width:900px; margin:0 auto; position:relative; }
.sp-proof__quote-mark { position:absolute; top:-16px; left:32px; font-size:4rem; line-height:1; color:#d4af64; font-family:Georgia, serif; font-weight:700; background:#0C180F; padding:0 12px; }
.sp-proof__quote-text { font-size:1.25rem; line-height:1.6; color:rgba(255,255,255,0.95); font-weight:300; margin-bottom:24px; font-style:italic; }
.sp-proof__quote-author { display:flex; align-items:center; gap:14px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); }
.sp-proof__quote-avatar { width:44px; height:44px; border-radius:50%; background:#d4af64; color:#0C180F; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.95rem; }
.sp-proof__quote-name { font-size:0.95rem; font-weight:700; color:#fff; }
.sp-proof__quote-role { font-size:0.85rem; color:rgba(255,255,255,0.6); }

@media (max-width:640px) {
  .sp-proof__quote { padding:32px 24px; }
  .sp-proof__quote-text { font-size:1.05rem; }
}

/* =====================================================
   SUCCESS / TRANSFORMATION — before/after
   ===================================================== */
.sp-success { display:grid; grid-template-columns:repeat(2, 1fr); gap:0; max-width:1100px; margin:64px auto 0 auto; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,0.08); }
.sp-success__col { padding:48px 40px; }
.sp-success__col--before { background:rgba(255,255,255,0.02); }
.sp-success__col--after { background:linear-gradient(135deg, rgba(212,175,100,0.1) 0%, rgba(212,175,100,0.03) 100%); border-left:1px solid rgba(212,175,100,0.2); }
.sp-success__label { font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.sp-success__col--before .sp-success__label { color:rgba(255,255,255,0.5); }
.sp-success__col--after .sp-success__label { color:#d4af64; }
.sp-success__list { list-style:none; padding:0; margin:0; }
.sp-success__list li { padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; gap:12px; align-items:flex-start; font-size:0.98rem; line-height:1.55; }
.sp-success__list li:last-child { border-bottom:none; }
.sp-success__list svg { flex-shrink:0; margin-top:3px; width:18px; height:18px; }
.sp-success__col--before .sp-success__list li { color:rgba(255,255,255,0.65); }
.sp-success__col--before .sp-success__list svg { color:rgba(255,255,255,0.35); }
.sp-success__col--after .sp-success__list li { color:rgba(255,255,255,0.95); }
.sp-success__col--after .sp-success__list svg { color:#d4af64; }

@media (max-width:780px) {
  .sp-success { grid-template-columns:1fr; }
  .sp-success__col { padding:36px 28px; }
  .sp-success__col--after { border-left:none; border-top:1px solid rgba(212,175,100,0.2); }
}

/* =====================================================
   FLAGSHIP PROMO — for homepage + diensten overview
   Dark section, gold accents, split layout with price card
   ===================================================== */
.sp-promo { position:relative; padding:120px 0; background: radial-gradient(ellipse 70% 55% at 25% 30%, rgba(212,175,100,0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(143,175,138,0.10) 0%, transparent 55%), #0C180F; color:#fff; overflow:hidden; }
.sp-promo__bg { position:absolute; inset:0; background:radial-gradient(circle at 20% 30%, rgba(212,175,100,0.15), transparent 55%), radial-gradient(circle at 85% 75%, rgba(212,175,100,0.1), transparent 50%); pointer-events:none; }
.sp-promo__container { position:relative; z-index:2; max-width:1280px; width:92%; margin:0 auto; }
.sp-promo__grid { display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:center; }
.sp-promo__eyebrow { display:inline-flex; align-items:center; gap:10px; padding:8px 18px; background:rgba(212,175,100,0.15); border:1px solid rgba(212,175,100,0.4); border-radius:999px; color:#d4af64; font-size:0.78rem; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:28px; }
.sp-promo__eyebrow-dot { width:6px; height:6px; background:#d4af64; border-radius:50%; animation:spPromoDot 1.8s ease-in-out infinite; }
@keyframes spPromoDot { 0%,100% { opacity:0.4; } 50% { opacity:1; } }
.sp-promo__title { font-size:clamp(2rem, 3.6vw, 3.2rem); font-weight:700; line-height:1.15; margin-bottom:22px; color:#fff; }
.sp-promo__title span { color:#d4af64; }
.sp-promo__text { font-size:1.08rem; line-height:1.65; color:rgba(255,255,255,0.78); margin-bottom:32px; max-width:560px; }
.sp-promo__pillars { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.sp-promo__pillar { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:999px; color:#fff; font-size:0.85rem; font-weight:500; }
.sp-promo__pillar svg { color:#d4af64; flex-shrink:0; }
.sp-promo__ctas { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.sp-promo__cta-primary { display:inline-flex; align-items:center; gap:10px; padding:16px 32px; background:#d4af64; color:#0C180F; border-radius:999px; text-decoration:none; font-weight:700; font-size:1rem; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.sp-promo__cta-primary:hover { background:#c49a50; transform:translateY(-2px); box-shadow:0 12px 32px rgba(212,175,100,0.28); }
.sp-promo__cta-secondary { display:inline-flex; align-items:center; gap:8px; padding:16px 24px; color:#fff; text-decoration:none; font-weight:500; font-size:0.95rem; opacity:0.75; transition:opacity .2s ease; }
.sp-promo__cta-secondary:hover { opacity:1; }
.sp-promo__alt { margin:20px 0 0; font-size:0.9rem; color:rgba(255,255,255,0.6); }
.sp-promo__alt a { color:#d4af64; text-decoration:none; border-bottom:1px solid rgba(212,175,100,0.4); padding-bottom:1px; transition:border-color .2s, color .2s; }
.sp-promo__alt a:hover { color:#F2E2A4; border-color:#F2E2A4; }
.sp-promo__alt--top { margin:0 0 32px; padding:12px 16px; background:rgba(212,175,100,0.08); border-left:2px solid rgba(212,175,100,0.5); border-radius:0 8px 8px 0; font-size:0.88rem; color:rgba(255,255,255,0.75); }

.sp-promo__card { background:linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%); border:1px solid rgba(255,255,255,0.12); border-radius:24px; padding:48px; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.sp-promo__card-label { font-size:0.78rem; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:10px; }
.sp-promo__card-price { display:flex; align-items:baseline; gap:10px; margin-bottom:24px; }
.sp-promo__card-amount { font-size:3.4rem; font-weight:700; color:#fff; line-height:1; }
.sp-promo__card-period { font-size:1rem; color:rgba(255,255,255,0.6); }
.sp-promo__card-list { list-style:none; padding:0; margin:0; border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; }
.sp-promo__card-list li { display:flex; align-items:flex-start; gap:12px; padding:10px 0; color:rgba(255,255,255,0.88); font-size:0.95rem; line-height:1.5; }
.sp-promo__card-list li svg { color:#d4af64; flex-shrink:0; margin-top:3px; }
.sp-promo__card-note { margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,0.1); font-size:0.85rem; color:rgba(255,255,255,0.55); text-align:center; }

@media (max-width:980px) {
  .sp-promo { padding:80px 0; }
  .sp-promo__grid { grid-template-columns:1fr; gap:48px; }
  .sp-promo__card { padding:36px 28px; }
  .sp-promo__card-amount { font-size:2.6rem; }
}

/* =====================================================
   COMPACT UPSELL BAND — for individual service pages
   Single-row pill inviting to full package
   ===================================================== */
.sp-upsell { position:relative; padding:56px 0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212,175,100,0.08) 0%, transparent 60%), #0C180F; color:#fff; overflow:hidden; }
.sp-upsell::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 50%, rgba(212,175,100,0.12), transparent 60%); pointer-events:none; }
.sp-upsell__container { position:relative; z-index:2; max-width:1180px; width:92%; margin:0 auto; }
.sp-upsell__inner { display:flex; align-items:center; gap:40px; padding:32px 44px; background:rgba(255,255,255,0.04); border:1px solid rgba(212,175,100,0.25); border-radius:20px; flex-wrap:wrap; }
.sp-upsell__body { flex:1 1 420px; }
.sp-upsell__eyebrow { font-size:0.72rem; letter-spacing:1.8px; text-transform:uppercase; color:#d4af64; font-weight:700; margin-bottom:8px; }
.sp-upsell__title { font-size:1.45rem; font-weight:700; color:#fff; line-height:1.25; margin-bottom:8px; }
.sp-upsell__text { font-size:0.95rem; color:rgba(255,255,255,0.75); line-height:1.55; margin:0; }
.sp-upsell__text strong { color:#d4af64; }
.sp-upsell__cta { display:inline-flex; align-items:center; gap:10px; padding:14px 26px; background:#d4af64; color:#0C180F; border-radius:999px; text-decoration:none; font-weight:700; font-size:0.95rem; white-space:nowrap; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.sp-upsell__cta:hover { background:#c49a50; transform:translateY(-2px); box-shadow:0 10px 24px rgba(212,175,100,0.28); }

@media (max-width:640px) {
  .sp-upsell { padding:40px 0; }
  .sp-upsell__inner { padding:24px; gap:20px; }
  .sp-upsell__title { font-size:1.2rem; }
}

/* =====================================================
   PROJECTEN/MAATWERK NOTE — for service pages
   Soft text-only block before sp-upsell band
   ===================================================== */
.sc-projects-note { padding:80px 0 96px; background:#F4ECD8; }
.sc-projects-note__container { max-width:760px; width:92%; margin:0 auto; text-align:center; padding:56px 48px; background:rgba(255,255,255,0.5); border:1px solid rgba(12,24,15,0.08); border-radius:20px; }
.sc-projects-note__eyebrow { font-size:0.72rem; letter-spacing:1.8px; text-transform:uppercase; color:#b8923f; font-weight:700; margin:0 0 12px; }
.sc-projects-note__title { font-size:1.5rem; font-weight:700; color:#0C180F; line-height:1.3; margin:0 0 14px; }
.sc-projects-note__text { font-size:0.98rem; color:rgba(12,24,15,0.72); line-height:1.65; margin:0 0 28px; max-width:560px; margin-left:auto; margin-right:auto; }
.sc-projects-note__cta { display:inline-flex; align-items:center; gap:10px; color:#0C180F; text-decoration:none; font-weight:600; font-size:0.95rem; padding:14px 28px; border:1.5px solid rgba(12,24,15,0.4); border-radius:100px; background:transparent; transition:background .25s ease, border-color .25s ease, color .25s ease; }
.sc-projects-note__cta:hover { background:#0C180F; border-color:#0C180F; color:#F2E2A4; }
.sc-projects-note__cta svg { transition:transform .2s; }
.sc-projects-note__cta:hover svg { transform:translateX(3px); }

@media (max-width:640px) {
  .sc-projects-note { padding:56px 0 64px; }
  .sc-projects-note__container { padding:40px 24px; }
  .sc-projects-note__title { font-size:1.2rem; }
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width:900px) {
  .sp-section { padding:80px 0; }
  .sp-hero { min-height:auto; padding:100px 0 70px; }
  .sp-painfor { grid-template-columns:1fr; }
  .sp-painfor__item { padding:40px 28px; }
}
@media (max-width:640px) {
  .sp-price { padding:40px 24px; }
  .sp-price__amount { font-size:3.2rem; }
  .sp-pillar { padding:24px; }
  .sp-extras { padding:28px 24px; }
  .sp-extras__list li { flex-direction:column; align-items:flex-start; gap:4px; }
}

/* ============================================ */
/* LEAD MAGNET SECTION (Zorg + Horeca)          */
/* ============================================ */
.lm-section {
  position: relative;
  padding: clamp(90px, 11vw, 140px) 0;
  background: radial-gradient(ellipse at top left, #1F3A26 0%, #0C180F 65%);
  overflow: hidden;
}
.lm-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(212,175,100,0.25), transparent 45%),
    radial-gradient(circle at 15% 90%, rgba(31,58,38,0.7), transparent 60%);
  pointer-events: none;
}
.lm-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.1;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.lm-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.lm-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
}
@media (max-width: 900px) {
  .lm-grid { grid-template-columns: 1fr; gap: 80px; }
}

/* ===== 3D PDF STACK ===== */
.lm-stack {
  position: relative;
  perspective: 1800px;
  max-width: 360px;
  margin: 0 auto;
}
.lm-stack__scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.414;
  transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateX(6deg) rotateZ(-2deg);
  transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
  animation: lm-float 6s ease-in-out infinite;
}
.lm-stack:hover .lm-stack__scene {
  transform: rotateY(-6deg) rotateX(2deg) rotateZ(0deg) scale(1.03);
}
@keyframes lm-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

.lm-stack__sheet {
  position: absolute;
  inset: 0;
  border-radius: 6px;
}
.lm-stack__sheet--3 {
  transform: translate(22px, 18px) rotate(4deg);
  background: #b9b09c;
  opacity: 0.45;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.lm-stack__sheet--2 {
  transform: translate(12px, 9px) rotate(2deg);
  background: #d4cab2;
  opacity: 0.7;
  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.lm-stack__cover {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.3),
    0 35px 70px -12px rgba(0,0,0,0.65),
    0 70px 140px -25px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(212,175,100,0.3);
  background: #0C180F;
}
.lm-stack__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.lm-stack__cover::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,0.5), transparent);
  pointer-events: none;
}
.lm-stack__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.1) 50%, transparent 62%);
  pointer-events: none;
}

.lm-stack__badge {
  position: absolute;
  top: -22px;
  right: -22px;
  z-index: 5;
  background: #D4AF64;
  color: #0C180F;
  padding: 14px 18px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 14px 32px rgba(212,175,100,0.4), 0 0 0 6px rgba(212,175,100,0.12);
  transform: rotate(6deg);
  white-space: nowrap;
  animation: lm-badge-pop 3s ease-in-out infinite;
}
@keyframes lm-badge-pop {
  0%, 100% { transform: rotate(6deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.06); }
}

.lm-stack__meta {
  margin-top: 50px;
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(216,228,218,0.65);
  font-weight: 600;
}
.lm-stack__meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lm-stack__meta span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #D4AF64;
}

/* ===== Right column ===== */
.lm-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D4AF64;
  padding: 6px 14px;
  background: rgba(212,175,100,0.12);
  border: 1px solid rgba(212,175,100,0.35);
  border-radius: 100px;
  margin-bottom: 18px;
}
.lm-title {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.08;
  margin: 0 0 16px;
}
.lm-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(216, 228, 218, 0.85);
  margin: 0 0 22px;
  max-width: 540px;
}
.lm-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  max-width: 540px;
}
.lm-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: rgba(216, 228, 218, 0.9);
  font-size: 0.92rem;
  line-height: 1.45;
}
.lm-features li::before {
  content: "✓";
  color: #D4AF64;
  font-weight: 700;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  .lm-features { grid-template-columns: 1fr; }
}

/* Form */
.lm-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 540px;
  padding: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,100,0.25);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}
.lm-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .lm-form__row { grid-template-columns: 1fr; }
}
.lm-form input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(216, 228, 218, 0.25);
  background: rgba(12, 24, 15, 0.45);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  border-radius: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lm-form input::placeholder { color: rgba(216,228,218,0.5); }
.lm-form input:focus {
  outline: none;
  border-color: #D4AF64;
  background: rgba(12, 24, 15, 0.6);
}
.lm-form button {
  padding: 14px 22px;
  background: #D4AF64;
  color: #0C180F;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.lm-form button:hover {
  background: #e3bf76;
  transform: translateY(-1px);
}
.lm-form button span { transition: transform 0.3s ease; }
.lm-form button:hover span { transform: translateX(3px); }
.lm-form__legal {
  font-size: 11px;
  color: rgba(216,228,218,0.55);
  line-height: 1.5;
  margin-top: 4px;
}
.lm-form__legal a { color: #D4AF64; text-decoration: none; }

/* Loading + states */
.lm-form button:disabled { opacity: 0.6; cursor: wait; }
.lm-form__msg {
  font-size: 0.9rem;
  padding: 12px 14px;
  border-radius: 8px;
  margin-top: 4px;
  display: none;
}
.lm-form__msg--ok {
  background: rgba(212,175,100,0.15);
  border: 1px solid rgba(212,175,100,0.4);
  color: #f3e2b8;
}
.lm-form__msg--err {
  background: rgba(220, 90, 70, 0.15);
  border: 1px solid rgba(220, 90, 70, 0.45);
  color: #ffc9bd;
}
.lm-form.is-success .lm-form__msg--ok { display: block; }
.lm-form.is-error .lm-form__msg--err { display: block; }
.lm-form.is-success .lm-form__row,
.lm-form.is-success input[type="email"],
.lm-form.is-success button,
.lm-form.is-success .lm-form__legal { opacity: 0.35; pointer-events: none; }