/* =============================================

   MPS Projecten — diensten.css

   ============================================= */

 

/* ── HERO ── */

.dn-hero {

  background: var(--dark-2);

  padding: 4.5rem 0 0;

  border-bottom: 1px solid rgba(255,255,255,.06);

  position: relative;

  overflow: hidden;

}

 

.dn-hero::before {

  content: '';

  position: absolute;

  width: 500px; height: 500px;

  border-radius: 50%;

  border: 100px solid rgba(192,23,26,.06);

  top: -150px; right: -150px;

  pointer-events: none;

}

 

.dn-hero-inner {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

  align-items: flex-start;

}

 

.dn-hero-left {

  padding-bottom: 4rem;
  padding-left: 0.1em;

}

 

.dn-hero-right {

  display: flex;

  align-items: flex-start;

  justify-content: center;

   padding-top: 7rem;

}

 

.dn-hero-foto-wrap {

  width: 100%;

  border-radius: 20px 20px 0 0;

  overflow: hidden;

  aspect-ratio: 4 / 3;

  box-shadow: 0 -12px 60px rgba(0,0,0,.3);

}

 

.dn-hero-foto {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

  display: block;

}

 

.dn-hero-eyebrow {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 1.5rem;

}

 

.dn-hero-dot {

  width: 8px; height: 8px;

  border-radius: 50%;

  background: var(--red);

}

 

.dn-hero-eyebrow span {

  font-size: 11px;

  color: rgba(255,255,255,.4);

  text-transform: uppercase;

  letter-spacing: .12em;

}

 

.dn-h1 {

  font-size: clamp(2.6rem, 5.5vw, 4rem);

  font-weight: 900;

  color: #fff;

  line-height: 1;

  letter-spacing: -.04em;

  margin-bottom: 1.5rem;


}

 

.dn-h1 em { font-style: italic; color: var(--red); }

 

.dn-sub {

  font-size: 15px;

  color: rgba(255,255,255,.5);

  line-height: 1.8;

  max-width: 580px;

  margin-bottom: 2.5rem;

}

 

.dn-tabs {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}

 

.dn-tab {

  display: inline-block;

  padding: 9px 18px;

  border-radius: var(--r-pill);

  font-size: 12px;

  font-weight: 700;

  background: rgba(255,255,255,.07);

  color: rgba(255,255,255,.5);

  border: 1px solid rgba(255,255,255,.1);

  transition: background .2s, color .2s;

}

 

.dn-tab:hover {

  background: var(--red);

  color: #fff;

  border-color: var(--red);

}

 

/* ── DIENST SECTIES ── */

.dienst { padding: 5rem 0; border-bottom: 1px solid var(--border); }

.dienst-light { background: var(--white); }

.dienst-gray  { background: var(--gray); }

 

.dienst-inner {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

  align-items: center;

}

 

.dienst-inner-flip {

  direction: rtl;

}

.dienst-inner-flip > * { direction: ltr; }

 

.dienst-num-big {

  font-size: 6rem;

  font-weight: 900;

  color: rgba(0,0,0,.05);

  letter-spacing: -.06em;

  line-height: 1;

  user-select: none;

}

 

.dienst-h2 {

  font-size: clamp(1.7rem, 3vw, 2.2rem);

  font-weight: 900;

  color: var(--dark);

  letter-spacing: -.03em;

  line-height: 1.1;

  margin: .5rem 0 1rem;

}

 

.dienst-h2 em { font-style: italic; color: var(--red); }

 

.dienst-content p {

  font-size: 14px;

  color: var(--muted);

  line-height: 1.8;

  margin-bottom: .75rem;

}

 

.dienst-tag {

  display: inline-block;

  background: var(--red-bg);

  border: 1px solid var(--red-border);

  color: var(--red);

  border-radius: var(--r-pill);

  padding: 6px 16px;

  font-size: 11px;

  font-weight: 700;

  margin-top: 1rem;

}

 

.dienst-tag-dark {

  background: var(--dark);

  border-color: var(--dark);

  color: #fff;

}

 

/* FEATURES */

.dienst-feats {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 1rem;

}

 

.dienst-feat {

  display: flex;

  align-items: flex-start;

  gap: 10px;

}

 

.dfeat-ico {

  width: 22px; height: 22px;

  border-radius: 50%;

  background: var(--red);

  display: flex; align-items: center; justify-content: center;

  flex-shrink: 0; margin-top: 2px;

}

 

.dfeat-ico svg { width: 10px; height: 10px; }

 

.dfeat-title {

  font-size: 13px;

  font-weight: 700;

  color: var(--dark);

  margin-bottom: 2px;

}

 

.dfeat-sub {

  font-size: 12px;

  color: var(--muted);

  line-height: 1.5;

}

 

/* ── WEBSITE VISUAL ── */

.wv-browser {

  background: var(--dark);

  border-radius: var(--r-lg);

  overflow: hidden;

  box-shadow: 0 8px 32px rgba(0,0,0,.1);

}

 

.wv-bar {

  background: #1e1e1e;

  padding: 9px 14px;

  display: flex;

  align-items: center;

  gap: 6px;

}

 

.wv-dots { display: flex; gap: 5px; }

.wv-dot { width: 9px; height: 9px; border-radius: 50%; }

.wv-d1{background:#ff5f57} .wv-d2{background:#febc2e} .wv-d3{background:#28c840}

 

.wv-url {

  flex: 1; background: #2a2a2a;

  border-radius: 5px; padding: 4px 10px;

  font-size: 10px; color: #666; margin: 0 10px;

}

 

.wv-screen { background: var(--gray); padding: 12px; }

 

.wv-hero-block {

  background: #fff;

  border-radius: var(--r-md);

  padding: 10px;

  margin-bottom: 8px;

  display: flex;

  gap: 8px;

  align-items: center;

}

 

.wv-hero-txt { flex: 1; }

.wv-h { font-size: 11px; font-weight: 700; color: var(--dark); margin-bottom: 3px; }

.wv-h em { font-style: italic; color: var(--red); }

.wv-p { font-size: 8px; color: #aaa; line-height: 1.4; }

.wv-btn-s {

  background: var(--red); color: #fff;

  border-radius: 100px; padding: 3px 9px;

  font-size: 8px; font-weight: 700;

  display: inline-block; margin-top: 4px;

}

 

.wv-img {

  width: 50px; height: 50px;

  background: var(--gray);

  border-radius: var(--r-sm);

  flex-shrink: 0;

}

 

.wv-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }

 

.wv-card-s {

  background: #fff; border-radius: 6px;

  padding: 7px; border: 1px solid #eee;

}

 

.wv-card-red { background: var(--red); border-color: var(--red); }

 

.wv-snum { font-size: 10px; font-weight: 700; color: var(--dark); }

.wv-card-red .wv-snum { color: #fff; }

.wv-slbl { font-size: 7px; color: #aaa; }

.wv-card-red .wv-slbl { color: rgba(255,255,255,.6); }

 

/* ── KOPPELING VISUAL ── */

.kv-nodes { display: flex; flex-direction: column; gap: 8px; }

 

.kv-row {

  display: flex;

  align-items: center;

  gap: 10px;

}

 

.kv-node {

  flex: 1; background: #fff;

  border: 1px solid var(--border);

  border-radius: var(--r-md);

  padding: 10px 14px;

  font-size: 12px; font-weight: 700;

  color: var(--dark); text-align: center;

}

 

.kv-red  { background: var(--red); border-color: var(--red); color: #fff; }

.kv-dark { background: var(--dark); border-color: var(--dark); color: #fff; }

.kv-outline { border-color: var(--red); color: var(--red); }

 

.kv-arrow { font-size: 18px; color: var(--red); font-weight: 700; flex-shrink: 0; }

.kv-line  { width: 2px; height: 16px; background: var(--border); margin: 0 auto; }

 

/* ── DASHBOARD VISUAL ── */

.dv-wrap {

  background: #fff;

  border: 1px solid var(--border);

  border-radius: var(--r-lg);

  padding: 1.25rem;

  box-shadow: 0 4px 24px rgba(0,0,0,.05);

}

 

.dv-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 1rem;

}

 

.dv-title { font-size: 13px; font-weight: 700; color: var(--dark); }

.dv-date {

  font-size: 11px; color: var(--dim);

  background: var(--gray);

  padding: 3px 10px; border-radius: var(--r-pill);

}

 

.dv-stats {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  margin-bottom: 1rem;

}

 

.dv-stat { background: var(--gray); border-radius: var(--r-md); padding: 10px 12px; }

.dv-stat-red { background: var(--red); }

.dv-num { font-size: 16px; font-weight: 900; color: var(--dark); letter-spacing: -.02em; }

.dv-stat-red .dv-num { color: #fff; }

.dv-lbl { font-size: 10px; color: var(--dim); margin-top: 2px; }

.dv-stat-red .dv-lbl { color: rgba(255,255,255,.65); }

 

.dv-bar-title {

  font-size: 10px; font-weight: 700;

  color: var(--dim); text-transform: uppercase;

  letter-spacing: .08em; margin-bottom: .6rem;

}

 

.dv-bars {

  display: flex; gap: 5px;

  align-items: flex-end; height: 60px;

}

 

.dv-bw {

  flex: 1; display: flex;

  flex-direction: column; align-items: center;

  gap: 4px; height: 100%; justify-content: flex-end;

}

 

.dv-b { width: 100%; background: var(--gray); border-radius: 4px 4px 0 0; border: 1px solid var(--border); }

.dv-b-red { background: var(--red) !important; border-color: var(--red) !important; }

.dv-bl { font-size: 9px; color: var(--dim); }

 

/* ── CMS VISUAL ── */

.cms-preview {

  background: #fff;

  border-radius: var(--r-lg);

  border: 1px solid var(--border);

  overflow: hidden;

  box-shadow: 0 4px 24px rgba(0,0,0,.06);

}

 

.cms-topbar {

  background: var(--dark);

  padding: 10px 14px;

  display: flex;

  align-items: center;

  gap: 10px;

}

 

.cms-topbar-title {

  flex: 1;

  font-size: 11px;

  font-weight: 700;

  color: rgba(255,255,255,.7);

}

 

.cms-save-btn {

  background: var(--red);

  color: #fff;

  border-radius: var(--r-sm);

  padding: 4px 12px;

  font-size: 10px;

  font-weight: 700;

}

 

.cms-body {

  display: grid;

  grid-template-columns: 110px 1fr;

  min-height: 200px;

}

 

.cms-sidebar {

  background: #1a1a1a;

  padding: 12px 8px;

  display: flex;

  flex-direction: column;

  gap: 4px;

}

 

.cms-item {

  padding: 7px 10px;

  border-radius: var(--r-sm);

  font-size: 10px;

  font-weight: 700;

  color: rgba(255,255,255,.4);

  cursor: default;

}

 

.cms-item-active {

  background: var(--red);

  color: #fff;

}

 

.cms-content { padding: 14px; }

 

.cms-sec-title {

  font-size: 9px;

  font-weight: 700;

  color: var(--dim);

  text-transform: uppercase;

  letter-spacing: .08em;

  margin-bottom: 8px;

}

 

.cms-order {

  background: var(--gray);

  border-radius: var(--r-sm);

  padding: 7px 10px;

  margin-bottom: 5px;

  display: flex;

  align-items: center;

  gap: 8px;

}

 

.cms-order-name { font-size: 10px; font-weight: 700; color: var(--dark); flex: 1; }

 

.cms-badge {

  border-radius: var(--r-pill);

  padding: 2px 8px;

  font-size: 8px;

  font-weight: 700;

  color: #fff;

  white-space: nowrap;

}

 

.cms-badge-green  { background: #22c55e; }

.cms-badge-orange { background: #f59e0b; }

 

.cms-img-grid {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 5px;

}

 

.cms-thumb {

  background: var(--gray);

  border-radius: var(--r-sm);

  aspect-ratio: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

}

 

.cms-thumb-add {

  background: var(--red-bg);

  border: 2px dashed var(--red-border);

  border-radius: var(--r-sm);

  aspect-ratio: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  color: var(--red);

  font-weight: 700;

}

 

/* ── PROCESS ── */

.dn-process-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

  margin-top: 2.5rem;

}

 

.dn-pstep {

  background: rgba(255,255,255,.05);

  border: 1px solid rgba(255,255,255,.08);

  border-radius: var(--r-lg);

  padding: 1.75rem;

  transition: background .2s;

}

 

.dn-pstep:hover { background: rgba(255,255,255,.08); }

 

.dn-pstep-red {

  background: var(--red) !important;

  border-color: var(--red) !important;

}

 

.dn-pnum {

  font-size: 2rem;

  font-weight: 900;

  color: rgba(192,23,26,.25);

  letter-spacing: -.04em;

  line-height: 1;

  margin-bottom: .75rem;

}

 

.dn-pnum-light { color: rgba(255,255,255,.3); }

 

.dn-pstep h3 {

  font-size: 15px;

  font-weight: 700;

  color: #fff;

  margin-bottom: .5rem;

}

 

.dn-pstep p {

  font-size: 13px;

  color: rgba(255,255,255,.5);

  line-height: 1.65;

}

 

.dn-pstep-red p { color: rgba(255,255,255,.75); }

 

/* ── RESPONSIVE ── */

@media (max-width: 960px) {

  .dn-hero-inner {

    grid-template-columns: 1fr;

  }

  .dn-hero-left {

    padding-bottom: 1.5rem;

  }

  .dn-hero-foto-wrap {

    border-radius: 0;

    aspect-ratio: 4 / 3;

    margin: 0 -2rem;

    width: calc(100% + 4rem);

  }

  .dienst-inner {

    grid-template-columns: 1fr;

    gap: 2rem;

  }

  .dienst-num-big { display: none; }

  .dienst-inner-flip { direction: ltr; }

  .dn-process-grid { grid-template-columns: 1fr; }

}

 

@media (max-width: 600px) {

  .dn-tabs { gap: 8px; }

  .dn-tab  { font-size: 11px; padding: 7px 14px; }

  .dv-stats { grid-template-columns: 1fr 1fr; }

  .cms-body { grid-template-columns: 90px 1fr; 



}
}
.website-preview-img{
    width: 70%;
    max-width: 450px;
    height: auto;
    display: block;
    margin: 0 auto;
    display: block;
    margin-left: auto;
}