/* ============================================
   3HTS · Service Cards X
   Cinematic dark cards voor dienst-pagina's
   Alleen actief op body.svc-page
   ============================================ */

/* ===== Section wrapper rond .feat-grid ===== */
.svc-page .sec:has(.feat-grid){
  background:linear-gradient(180deg,#0d1117 0%,#161b22 50%,#0d1117 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.svc-page .sec:has(.feat-grid)::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 15% 20%,rgba(232,100,26,.12),transparent 50%),
    radial-gradient(circle at 85% 80%,rgba(28,79,168,.1),transparent 50%);
  pointer-events:none;
  z-index:0;
}
.svc-page .sec:has(.feat-grid)::after{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/80px 80px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/80px 80px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 90%);
  opacity:.6;
  animation:shcMeshDrift 60s linear infinite;
}
@keyframes shcMeshDrift{
  0%{background-position:0 0,0 0}
  100%{background-position:80px 80px,80px 80px}
}
.svc-page .sec:has(.feat-grid) > .container{
  position:relative;z-index:2;
}

/* Section heading — wit op donker */
.svc-page .sec:has(.feat-grid) .sec-head .h-section,
.svc-page .sec:has(.feat-grid) .sec-head h2{
  color:#fff;
}
.svc-page .sec:has(.feat-grid) .sec-head .lead{
  color:rgba(255,255,255,.7);
}
.svc-page .sec:has(.feat-grid) .sec-head .kicker{
  background:rgba(232,100,26,.1);
  border-color:rgba(232,100,26,.25);
  color:var(--orange-light);
}

/* ===== Grid: meer ademruimte per card ===== */
.svc-page .feat-grid{
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:60px;
}
@media(max-width:1024px){.svc-page .feat-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:640px){.svc-page .feat-grid{grid-template-columns:1fr;gap:18px}}

/* ===== Card: cinematic dark ===== */
.svc-page .feat-card{
  background:linear-gradient(160deg,rgba(22,27,34,.92) 0%,rgba(13,17,23,.95) 100%);
  border:1px solid rgba(255,255,255,.08);
  padding:42px 32px 32px;
  gap:18px;
  box-shadow:0 12px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .55s var(--ease-out),
             border-color .35s var(--ease-out),
             box-shadow .55s var(--ease-out);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}

/* Top gradient line — pulst op hover */
.svc-page .feat-card::before{
  content:"";
  position:absolute;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,transparent 0%,var(--orange) 50%,#ff8a3d 100%);
  box-shadow:0 0 14px rgba(232,100,26,.7);
  transition:width .8s var(--ease-out);
  z-index:2;
}
.svc-page .feat-card:hover::before{width:100%}

/* Decoratieve corner glow rechtsonder */
.svc-page .feat-card::after{
  content:"";
  position:absolute;bottom:-50%;right:-30%;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,100,26,.18) 0%,transparent 70%);
  opacity:0;pointer-events:none;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
  z-index:0;
}
.svc-page .feat-card:hover::after{
  opacity:1;
  transform:translate(-20px,-30px);
}

.svc-page .feat-card:hover{
  transform:translateY(-8px);
  border-color:rgba(232,100,26,.4);
  box-shadow:0 32px 70px rgba(0,0,0,.55),
             0 0 0 1px rgba(232,100,26,.2),
             0 0 60px rgba(232,100,26,.15),
             inset 0 1px 0 rgba(255,255,255,.06);
}

/* ===== Watermark number — groter, oranje gloed ===== */
.svc-page .feat-card-num{
  top:-20px;right:18px;
  font-size:150px;
  color:rgba(232,100,26,.1);
  -webkit-text-stroke:1px rgba(232,100,26,.2);
  transition:color .5s var(--ease-out),transform .6s var(--ease-out),text-shadow .5s var(--ease-out);
}
.svc-page .feat-card:hover .feat-card-num{
  color:rgba(232,100,26,.18);
  text-shadow:0 0 40px rgba(232,100,26,.3);
  transform:translateY(-6px) scale(1.05);
}

/* ===== Tag pill — kleur tweak ===== */
.svc-page .feat-card-tag{
  color:var(--orange-light);
}
.svc-page .feat-card-tag::before{
  background:var(--orange);
  box-shadow:0 0 12px rgba(232,100,26,.7);
}

/* ===== Heading — wit ===== */
.svc-page .feat-card h4{
  color:#fff;
  font-size:clamp(20px,1.6vw,26px);
}
.svc-page .feat-card h4 em{
  color:var(--orange);
}

/* ===== Body text ===== */
.svc-page .feat-card p{
  color:rgba(255,255,255,.65);
  font-size:15px;line-height:1.7;
}

/* ===== Meta row — donkere variant ===== */
.svc-page .feat-card-meta{
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08);
}
.svc-page .feat-card-meta-key{
  color:rgba(255,255,255,.4);
}
.svc-page .feat-card-meta-val{
  color:#fff;
  background:rgba(232,100,26,.12);
  border-color:rgba(232,100,26,.25);
}

/* ===== Subtle icon decoration linksboven ===== */
.svc-page .feat-card .feat-card-tag{
  position:relative;
}

/* Floating geometric accent achter de tekst */
.svc-page .feat-card .feat-deco{
  position:absolute;bottom:14px;right:14px;
  width:60px;height:60px;
  opacity:.1;
  pointer-events:none;
  transition:opacity .5s var(--ease-out),transform .8s var(--ease-out);
  z-index:0;
}
.svc-page .feat-card .feat-deco svg{
  width:100%;height:100%;
  stroke:var(--orange);fill:none;stroke-width:1.5;
}
.svc-page .feat-card:hover .feat-deco{
  opacity:.4;
  transform:rotate(45deg);
}