/* ============================================
   3HTS · Service Hero X
   Cinematic hero voor dienst-pagina's
   Donkere achtergrond + foto met overlay + dikke animaties
   ============================================ */

.svc-hero-x{
  position:relative;
  min-height:auto;
  padding:108px 0 32px;
  background:linear-gradient(180deg,#0d1117 0%,#161b22 60%,#0d1117 100%);
  color:#fff;
  overflow:hidden;
}

/* ===== Background animatie lagen ===== */
.svc-hero-x-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.svc-hero-x-bg span{
  position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.45;
  pointer-events:none;
}
.svc-hero-x-bg span:nth-child(1){
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(232,100,26,.55),transparent 70%);
  top:-100px;left:-100px;
  animation:shxFloat1 20s ease-in-out infinite;
}
.svc-hero-x-bg span:nth-child(2){
  width:420px;height:420px;
  background:radial-gradient(circle,rgba(28,79,168,.4),transparent 70%);
  bottom:-120px;right:-100px;
  animation:shxFloat2 24s ease-in-out infinite;
}
.svc-hero-x-bg span:nth-child(3){
  width:340px;height:340px;
  background:radial-gradient(circle,rgba(180,80,200,.35),transparent 70%);
  top:40%;left:50%;
  animation:shxFloat3 18s ease-in-out infinite;
}
@keyframes shxFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(120px,80px) scale(1.2)}
}
@keyframes shxFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-140px,-90px) scale(1.15)}
}
@keyframes shxFloat3{
  0%,100%{transform:translate(0,0) scale(.9)}
  50%{transform:translate(-180px,120px) scale(1.1)}
}

/* Mesh grid drift */
.svc-hero-x-mesh{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/72px 72px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 30%,transparent 90%);
  opacity:.5;
  animation:shxMeshDrift 50s linear infinite;
}
@keyframes shxMeshDrift{
  0%{background-position:0 0,0 0}
  100%{background-position:72px 72px,72px 72px}
}

/* Diagonal beams */
.svc-hero-x-beam{
  position:absolute;width:1px;height:160%;
  background:linear-gradient(180deg,transparent 0%,rgba(232,100,26,.55) 50%,transparent 100%);
  z-index:1;pointer-events:none;
  transform-origin:top center;
}
.svc-hero-x-beam:nth-of-type(1){left:20%;top:-30%;transform:rotate(14deg);animation:shxBeam 7s ease-in-out infinite}
.svc-hero-x-beam:nth-of-type(2){left:78%;top:-30%;transform:rotate(-10deg);animation:shxBeam 9s ease-in-out infinite 2s}
@keyframes shxBeam{
  0%,100%{opacity:.15}
  50%{opacity:.65}
}

/* Twinkle sparkles */
.svc-hero-x-sparkles{
  position:absolute;inset:0;pointer-events:none;z-index:1;
}
.svc-hero-x-sparkles i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.9),0 0 12px rgba(232,100,26,.7);
  opacity:0;
}
.svc-hero-x-sparkles i:nth-child(1){top:18%;left:15%;animation:shxTwinkle 3s ease-in-out infinite}
.svc-hero-x-sparkles i:nth-child(2){top:30%;left:85%;animation:shxTwinkle 4s ease-in-out infinite .8s}
.svc-hero-x-sparkles i:nth-child(3){top:60%;left:8%;animation:shxTwinkle 3.5s ease-in-out infinite 1.6s}
.svc-hero-x-sparkles i:nth-child(4){top:78%;left:92%;animation:shxTwinkle 4.5s ease-in-out infinite 2.4s}
.svc-hero-x-sparkles i:nth-child(5){top:45%;left:55%;animation:shxTwinkle 3.2s ease-in-out infinite 3.2s}
.svc-hero-x-sparkles i:nth-child(6){top:88%;left:30%;animation:shxTwinkle 4s ease-in-out infinite .4s}
@keyframes shxTwinkle{
  0%,100%{opacity:0;transform:scale(.5)}
  50%{opacity:1;transform:scale(1.4)}
}

/* Wireframe shapes */
.svc-hero-x-shapes{position:absolute;inset:0;pointer-events:none;z-index:1}
.svc-hero-x-shapes svg{
  position:absolute;
  stroke:rgba(232,100,26,.22);
  fill:none;stroke-width:1.2;
}
.svc-hero-x-shapes svg:nth-child(1){
  top:12%;left:6%;width:140px;height:140px;
  animation:shxRotate 26s linear infinite;
}
.svc-hero-x-shapes svg:nth-child(2){
  bottom:8%;right:5%;width:120px;height:120px;
  animation:shxRotate 20s linear infinite reverse;
  stroke:rgba(80,160,255,.22);
}
@keyframes shxRotate{
  to{transform:rotate(360deg)}
}

/* ===== Inner content ===== */
.svc-hero-x-inner{
  position:relative;z-index:5;
  max-width:1280px;width:100%;
  margin:0 auto;padding:0 var(--pad-x);
  display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center;
}
@media(max-width:960px){
  .svc-hero-x{padding:90px 0 40px;min-height:auto}
  .svc-hero-x-inner{grid-template-columns:1fr;gap:30px}
}

/* Left content */
.svc-hero-x-left{
  display:flex;flex-direction:column;gap:24px;
  opacity:0;transform:translateY(20px);
  animation:shxFadeUp .9s var(--ease-out) .2s both;
}
@keyframes shxFadeUp{
  to{opacity:1;transform:none}
}

.svc-hero-x-breadcrumb{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;
  background:rgba(232,100,26,.1);
  border:1px solid rgba(232,100,26,.25);
  border-radius:99px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  font-weight:700;color:var(--orange-light);text-transform:uppercase;
  text-decoration:none;
  align-self:flex-start;
}
.svc-hero-x-breadcrumb::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px rgba(232,100,26,.8);
  animation:pxPulse 1.4s ease-in-out infinite;
}
.svc-hero-x-breadcrumb a{color:var(--orange-light);text-decoration:none;transition:color .2s var(--ease-out)}
.svc-hero-x-breadcrumb a:hover{color:#fff}
.svc-hero-x-breadcrumb span{color:rgba(255,176,122,.5)}

.svc-hero-x-left h1{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(30px,3.2vw,48px);line-height:.96;
  letter-spacing:-.02em;color:#fff;
  text-transform:uppercase;margin:0;
}
.svc-hero-x-left h1 em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;letter-spacing:.005em;
}

.svc-hero-x-lead{
  font-size:16px;line-height:1.55;
  color:rgba(255,255,255,.78);
  max-width:50ch;margin:0;
}

.svc-hero-x-actions{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;
}

/* Stat badges */
.svc-hero-x-stats{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
}
.svc-hero-x-stat{
  display:flex;flex-direction:column;gap:4px;
}
.svc-hero-x-stat-num{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(22px,2.2vw,32px);line-height:1;
  color:var(--orange);
}
.svc-hero-x-stat-lbl{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  color:rgba(255,255,255,.55);text-transform:uppercase;
  font-weight:600;
}

/* Right side — Foto met overlay */
.svc-hero-x-right{
  position:relative;
  opacity:0;transform:translateX(30px) scale(.95);
  animation:shxSlideIn 1.1s var(--ease-out) .4s both;
}
@keyframes shxSlideIn{
  to{opacity:1;transform:none}
}

.svc-hero-x-img-wrap{
  position:relative;
  aspect-ratio:4/5;
  width:100%;max-width:520px;
  margin:0 auto;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.5);
}
.svc-hero-x-img-wrap::before{
  content:"";position:absolute;inset:-2px;
  background:linear-gradient(135deg,rgba(232,100,26,.7) 0%,transparent 30%,transparent 70%,rgba(232,100,26,.5) 100%);
  z-index:-1;
  filter:blur(20px);
  opacity:.7;
}
.svc-hero-x-img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:saturate(1.1) contrast(1.05);
}
.svc-hero-x-img-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,transparent 0%,transparent 50%,rgba(13,17,23,.6) 100%),
    linear-gradient(135deg,rgba(232,100,26,.12) 0%,transparent 50%);
  pointer-events:none;
}

/* Corner accent markers op foto */
.svc-hero-x-corner{
  position:absolute;width:32px;height:32px;
  border:2px solid var(--orange);
  z-index:3;pointer-events:none;
}
.svc-hero-x-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.svc-hero-x-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.svc-hero-x-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.svc-hero-x-corner.br{bottom:14px;right:14px;border-left:0;border-top:0}

/* Floating badge op foto */
.svc-hero-x-badge{
  position:absolute;bottom:24px;left:24px;z-index:4;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;
  background:rgba(13,17,23,.85);
  backdrop-filter:blur(14px);
  border:1px solid rgba(232,100,26,.35);
  border-radius:99px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  color:#fff;text-transform:uppercase;font-weight:700;
}
.svc-hero-x-badge::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:#2FB673;
  box-shadow:0 0 0 3px rgba(47,182,115,.25),0 0 12px rgba(47,182,115,.7);
  animation:pxPulse 2s ease-in-out infinite;
}

/* Scroll indicator */
.svc-hero-x-scroll{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  color:rgba(255,255,255,.55);text-transform:uppercase;font-weight:600;
  pointer-events:none;
}
.svc-hero-x-scroll-line{
  width:1px;height:22px;
  background:linear-gradient(180deg,rgba(232,100,26,.7) 0%,transparent 100%);
  animation:shxScrollPulse 2s ease-in-out infinite;
}
@keyframes shxScrollPulse{
  0%,100%{opacity:.4;height:22px}
  50%{opacity:1;height:32px}
}
@media(max-width:960px){
  .svc-hero-x-scroll{display:none}
}

/* Buttons binnen svc-hero-x — op donker */
.svc-hero-x .btn-outline,
.svc-hero-x .btn-outline:not(.nav-cta .btn-outline){
  color:#fff !important;
  border-color:rgba(255,255,255,.3) !important;
  background:rgba(255,255,255,.04) !important;
}
.svc-hero-x .btn-outline:hover,
.svc-hero-x .btn-outline:not(.nav-cta .btn-outline):hover{
  color:#fff !important;
  border-color:var(--orange) !important;
}