/* Delta Six SEO- en portfoliopagina's. Bouwt op styles.css (tokens, header,
   knoppen, footer). Zelfde huisstijl als de homepage, andere ritmes. */
:root,.sp,.sp-home-portfolio{--sp-card:#110d17;--sp-line:#2d2437;--sp-soft:#1a1322}
.sp .site-header{border-bottom:1px solid rgba(255,255,255,.07)}
.sp .main-nav a[aria-current=page]{color:var(--text)}
.sp-crumbs{font-size:12px;color:#9b8ca9;padding-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.sp-crumbs a{color:#c7b3d6;text-decoration:underline;text-underline-offset:3px}
.sp-crumbs span[aria-hidden]{color:#5f4d6c}

/* Hero: kop eerst, beeld laag en klein */
.sp-hero{position:relative;padding:56px 0 20px;isolation:isolate}
.sp-hero::before{content:"";position:absolute;inset:-120px 0 auto;height:520px;z-index:-1;background:radial-gradient(ellipse 50% 60% at 28% 30%,#6b15a52e,transparent 70%)}
.sp-hero h1{font-size:64px;line-height:1.06;letter-spacing:-.05em;margin:0;max-width:980px;text-wrap:balance}
.sp-hero h1 em{font-style:normal;display:block;background:linear-gradient(110deg,#e8d9f4 6%,#dcb8f6 52%,#a082b5 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em;margin-bottom:-.12em}
.sp-hero h1 .sp-hl{font-style:italic;background:linear-gradient(100deg,#c77dff 0%,#ba4cff 45%,#f0c6ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.sp-lead{font-size:18px;line-height:1.7;color:#c5bbd1;max-width:640px;margin:24px 0 0}
.sp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.button-ghost{color:#efe4f8;background:transparent;border:1px solid #4a3656}
.button-ghost:hover{border-color:#9562b4;background:#1c1324;transform:translateY(-2px)}
.sp-trust{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13px;color:#b9abc7}
.sp-trust li{display:flex;align-items:center;gap:8px}
.sp-trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:#ba4cff;box-shadow:0 0 10px #ba4cffa3}
.sp-trust strong{color:#f1e6fa;font-weight:600}

/* Driftende rij met gebouwde websites: de camera beweegt, de sites staan stil */
.sp-strip{margin:44px 0 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.sp-strip-track{display:flex;gap:16px;width:max-content;animation:sp-drift 70s linear infinite}
.sp-strip:hover .sp-strip-track{animation-play-state:paused}
.sp-strip a{display:block;width:300px;flex:0 0 300px;border-radius:12px;overflow:hidden;border:1px solid var(--sp-line);background:var(--sp-card);position:relative}
.sp-strip img{width:100%;height:188px;object-fit:cover;object-position:top;display:block;transition:transform .5s}
.sp-strip a:hover img{transform:scale(1.03)}
.sp-strip span{position:absolute;left:10px;bottom:10px;font-size:11px;padding:5px 9px;border-radius:7px;background:#0b0810d9;border:1px solid #3d2c4a;color:#e9dcf4}
@keyframes sp-drift{to{transform:translateX(-50%)}}

/* Secties */
.sp-section{padding:96px 0;border-top:1px solid var(--line)}
.sp-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:72px;align-items:start}
.sp-grid>header{position:sticky;top:30px}
.sp-section h2{font-size:44px;line-height:1.14;letter-spacing:-.045em}
.sp-section h2 .text-muted{display:block}
.sp-section .eyebrow{margin-bottom:18px}
.sp-body>p{font-size:17px;line-height:1.75;color:#c2b7ce;margin:0 0 18px;max-width:680px}
.sp-body h3{font-size:22px;letter-spacing:-.02em;margin:34px 0 10px}
.sp-body a{color:#e2c3fa;text-decoration:underline;text-underline-offset:3px}

/* Het aanbod */
.sp-offer{border:1px solid #4b3359;border-radius:18px;padding:44px;background:radial-gradient(ellipse at 88% 0%,#6d1ea040,transparent 60%),linear-gradient(135deg,#150e1c,#0b080f);position:relative;overflow:hidden}
.sp-offer h2{font-size:40px;letter-spacing:-.045em;line-height:1.14;margin:0;max-width:760px}
.sp-offer-list{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.sp-offer-list li{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:22px 0;border-top:1px solid #34253f}
.sp-offer-list b{grid-row:span 2;font-family:var(--heading);font-weight:500;font-size:13px;color:#c38ceb;padding-top:4px}
.sp-offer-list strong{font-family:var(--heading);font-weight:600;font-size:19px;letter-spacing:-.02em;color:#f7f0fc}
.sp-offer-list span{font-size:15px;line-height:1.65;color:#b8a9c6}
.sp-offer .sp-actions{margin-top:30px}

/* Genummerde lijst */
.sp-list{list-style:none;padding:0;margin:0;counter-reset:sp}
.sp-list li{counter-increment:sp;display:grid;grid-template-columns:52px 1fr;gap:4px 16px;padding:22px 0;border-bottom:1px solid var(--line)}
.sp-list li:first-child{padding-top:4px}
.sp-list li::before{content:counter(sp,decimal-leading-zero);grid-row:span 2;font-size:12px;color:#b886dc;padding-top:6px}
.sp-list strong{font-family:var(--heading);font-weight:600;font-size:19px;letter-spacing:-.02em}
.sp-list span{font-size:16px;line-height:1.7;color:#b8abc6}

/* Vergelijking */
.sp-compare{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;border:1px solid var(--sp-line);border-radius:14px;overflow:hidden}
.sp-compare th,.sp-compare td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--sp-line);vertical-align:top;line-height:1.55}
.sp-compare thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#a797b6;background:#0e0b13;font-weight:500}
.sp-compare thead th:last-child{color:#e2c3fa}
.sp-compare td:first-child{color:#9c8eaa;width:30%}
.sp-compare td:nth-child(2){color:#a89ab6}
.sp-compare td:last-child{color:#f3eaf9;background:#1a1123}
.sp-compare tr:last-child td{border-bottom:0}

/* Portfolio */
.sp-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.sp-filter button{font:500 13px var(--body);color:#d6c8e2;background:#120d18;border:1px solid #3b2c46;border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer;transition:border-color .2s,background .2s}
.sp-filter button:hover{border-color:#9562b4}
.sp-filter button[aria-pressed=true]{background:#3b1856;border-color:#b77be4;color:#fff}
.sp-filter button small{color:#a893b8;margin-left:6px;font-size:12px}
.sp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sp-card{display:flex;flex-direction:column;border:1px solid var(--sp-line);border-radius:14px;overflow:hidden;background:var(--sp-card);transition:border-color .25s,transform .25s}
.sp-card:hover{border-color:#8756a6;transform:translateY(-3px)}
.sp-card-img{aspect-ratio:16/10;overflow:hidden;background:#0c0910}
.sp-card-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.sp-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px}
.sp-card-body small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#b38bd1}
.sp-card-body strong{font-family:var(--heading);font-weight:600;font-size:20px;letter-spacing:-.02em}
.sp-card-body span{font-size:14px;line-height:1.6;color:#aa9cb8}
.sp-card[hidden]{display:none}
/* Portfoliopagina: grotere schermen om doorheen te scrollen */
.sp-portfolio .sp-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.sp-portfolio .sp-card-img{aspect-ratio:16/10}
.sp-portfolio .sp-card-img img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sp-portfolio .sp-card:hover .sp-card-img img{transform:scale(1.03)}
.sp-portfolio .sp-card-body{padding:22px 24px 26px}
.sp-portfolio .sp-card-body strong{font-size:24px}
.sp-reveal .sp-portfolio .sp-card{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),border-color .25s}
.sp-reveal .sp-portfolio .sp-card.is-in{opacity:1;transform:none}
.sp-live{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sp-live a{display:flex;align-items:center;gap:16px;border:1px solid var(--sp-line);border-radius:12px;padding:16px;background:var(--sp-card)}
.sp-live a:hover{border-color:#8756a6}
.sp-live img{width:84px;height:48px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
.sp-live strong{display:block;font-family:var(--heading);font-weight:600;font-size:16px}
.sp-live span{font-size:12px;color:#a997b6}
.sp-more{margin-top:28px}

/* Case */
.sp-case-shot{margin:40px 0 0;border-radius:16px;overflow:hidden;border:1px solid #3e2d4a;box-shadow:0 30px 80px #0009}
.sp-case-shot img{width:100%;display:block}
.sp-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--sp-line);border-radius:14px;overflow:hidden;margin-top:30px}
.sp-facts div{padding:18px 20px;border-right:1px solid var(--sp-line)}
.sp-facts div:last-child{border-right:0}
.sp-facts small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a38fb3;margin-bottom:6px}
.sp-facts strong{font-family:var(--heading);font-weight:600;font-size:17px}

/* Interne links */
.sp-links{display:flex;flex-wrap:wrap;gap:10px}
.sp-links a{font-size:14px;color:#dccbe9;border:1px solid #3b2c46;border-radius:999px;padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;background:#110d17}
.sp-links a:hover{border-color:#9562b4;color:#fff}
.sp-linkgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.sp-linkgroups h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#a38fb3;font-family:var(--body);font-weight:500;margin:0 0 14px}
.sp-linkgroups ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.sp-linkgroups a{font-size:15px;color:#d8c8e5}
.sp-linkgroups a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Slot */
.sp-final{text-align:left;padding:100px 0;border-top:1px solid var(--line);background:linear-gradient(0deg,#110b19,var(--bg))}
.sp-final h2{font-size:54px;letter-spacing:-.05em;line-height:1.1;max-width:820px}
.sp-final h2 span{color:#cab2dc}
.sp-final p{font-size:17px;color:#b9abc7;max-width:560px;line-height:1.7;margin:20px 0 0}

.site-footer>div{flex-wrap:wrap;row-gap:10px}
.site-footer .sp-nap{font-size:13px;opacity:.75}.site-footer .sp-nap a{color:inherit;text-decoration:none}.site-footer .sp-nap a:hover{text-decoration:underline}
.sp .faq-list summary{font-size:17px}
.sp .reviews-grid{margin-top:0}

@media(max-width:1100px){
  .sp-hero h1{font-size:54px}
  .sp-grid{gap:44px}
  .sp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-live{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .sp-hero{padding:34px 0 10px}
  .sp-hero h1{font-size:40px;line-height:1.08}
  .sp-lead{font-size:16px}
  .sp-actions .button{width:100%;justify-content:space-between}
  .sp-strip a{width:230px;flex-basis:230px}
  .sp-strip img{height:144px}
  .sp-section{padding:64px 0}
  .sp-grid{grid-template-columns:1fr;gap:26px}
  .sp-grid>header{position:static}
  .sp-section h2{font-size:32px}
  .sp-offer{padding:28px 20px}
  .sp-offer h2{font-size:30px}
  .sp-offer-list{grid-template-columns:1fr}
  .sp-cards,.sp-live,.sp-linkgroups,.sp-portfolio .sp-cards{grid-template-columns:1fr}
  .sp-portfolio .sp-card-body strong{font-size:21px}
  .sp-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sp-filter button{flex:0 0 auto}
  .sp-facts{grid-template-columns:1fr}
  .sp-facts div{border-right:0;border-bottom:1px solid var(--sp-line)}
  .sp-facts div:last-child{border-bottom:0}
  .sp-compare{font-size:14px}
  .sp-compare th,.sp-compare td{padding:12px}
  .sp-final{padding:70px 0}
  .sp-final h2{font-size:36px}
}
@media(prefers-reduced-motion:reduce){.sp-strip-track{animation:none}.sp-card,.sp-strip img{transition:none}}

/* Kennisbank */
.sp-h1-kennis{font-size:52px!important;max-width:900px}
.sp-toc{margin:30px 0 0;border:1px solid var(--sp-line);border-radius:14px;padding:20px 24px;background:var(--sp-card);max-width:680px}
.sp-toc p{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#a38fb3;margin:0 0 10px}
.sp-toc ol{margin:0;padding-left:20px;display:grid;gap:8px}
.sp-toc a{color:#e2c3fa;font-size:15px;text-decoration:underline;text-underline-offset:3px}
.sp-arts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sp-art{display:flex;flex-direction:column;gap:8px;border:1px solid var(--sp-line);border-radius:14px;padding:22px;background:var(--sp-card);transition:border-color .25s,transform .25s}
.sp-art:hover{border-color:#8756a6;transform:translateY(-3px)}
.sp-art small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#b38bd1}
.sp-art strong{font-family:var(--heading);font-weight:600;font-size:20px;letter-spacing:-.02em;line-height:1.25}
.sp-art span{font-size:14px;line-height:1.6;color:#aa9cb8}

/* Plaatsen */
.sp-plaatsen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sp-plaats{border:1px solid var(--sp-line);border-radius:12px;padding:18px 20px;background:var(--sp-card)}
.sp-plaats h3{font-size:17px;letter-spacing:-.01em;margin:0 0 8px}
.sp-plaats p{font-size:14px;line-height:1.6;color:#b8abc6;margin:0}
.sp-linkgroups{grid-template-columns:repeat(4,minmax(0,1fr))}
.sp-provincies{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:44px}
@media(max-width:1100px){.sp-linkgroups,.sp-provincies,.sp-arts,.sp-plaatsen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.sp-h1-kennis{font-size:34px!important}.sp-linkgroups,.sp-provincies,.sp-arts,.sp-plaatsen{grid-template-columns:1fr}}

/* Delta Six in het kort */
.sp-kort{margin:0;display:grid;gap:0;border:1px solid var(--sp-line);border-radius:14px;overflow:hidden}
.sp-kort div{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:16px 20px;border-bottom:1px solid var(--sp-line);background:var(--sp-card)}
.sp-kort div:last-child{border-bottom:0}
.sp-kort dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#b38bd1;padding-top:3px}
.sp-kort dd{margin:0;font-size:16px;line-height:1.6;color:#e6daf0}
.sp-kort a{color:#e2c3fa;text-decoration:underline;text-underline-offset:3px}
.sp-home-portfolio + .sp-section{border-top:0}
@media(max-width:760px){.sp-kort div{grid-template-columns:1fr;gap:4px}}