/* ============================================
   3HTS · Contact X
   Cinematic contact pagina: hero + channels grid + form
   ============================================ */

/* ============================================
   HERO — cinematic donker
   ============================================ */
.contact-hero-x{
  position:relative;
  padding:108px 0 50px;
  background:linear-gradient(180deg,#0d1117 0%,#161b22 60%,#0d1117 100%);
  color:#fff;
  overflow:hidden;
}

.contact-hero-x-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.contact-hero-x-bg span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;pointer-events:none}
.contact-hero-x-bg span:nth-child(1){width:520px;height:520px;background:radial-gradient(circle,rgba(232,100,26,.55),transparent 70%);top:-120px;left:-100px;animation:cxFloat1 22s ease-in-out infinite}
.contact-hero-x-bg span:nth-child(2){width:420px;height:420px;background:radial-gradient(circle,rgba(80,140,200,.4),transparent 70%);top:25%;right:-100px;animation:cxFloat2 26s ease-in-out infinite}
.contact-hero-x-bg span:nth-child(3){width:340px;height:340px;background:radial-gradient(circle,rgba(180,80,200,.32),transparent 70%);bottom:-100px;left:35%;animation:cxFloat3 20s ease-in-out infinite}
@keyframes cxFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(140px,80px) scale(1.2)}}
@keyframes cxFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-120px,-90px) scale(1.15)}}
@keyframes cxFloat3{0%,100%{transform:translate(0,0) scale(.9)}50%{transform:translate(-180px,-100px) scale(1.1)}}

.contact-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:cxMeshDrift 50s linear infinite;
}
@keyframes cxMeshDrift{0%{background-position:0 0,0 0}100%{background-position:72px 72px,72px 72px}}

.contact-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;
}
.contact-hero-x-beam:nth-of-type(1){left:18%;top:-30%;transform:rotate(14deg);animation:cxBeam 8s ease-in-out infinite}
.contact-hero-x-beam:nth-of-type(2){left:82%;top:-30%;transform:rotate(-12deg);animation:cxBeam 10s ease-in-out infinite 1.5s}
@keyframes cxBeam{0%,100%{opacity:.15}50%{opacity:.65}}

.contact-hero-x-sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}
.contact-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}
.contact-hero-x-sparkles i:nth-child(1){top:14%;left:12%;animation:cxTwinkle 3s ease-in-out infinite}
.contact-hero-x-sparkles i:nth-child(2){top:24%;left:88%;animation:cxTwinkle 4s ease-in-out infinite .8s}
.contact-hero-x-sparkles i:nth-child(3){top:60%;left:6%;animation:cxTwinkle 3.5s ease-in-out infinite 1.6s}
.contact-hero-x-sparkles i:nth-child(4){top:72%;left:94%;animation:cxTwinkle 4.5s ease-in-out infinite 2.4s}
.contact-hero-x-sparkles i:nth-child(5){top:42%;left:50%;animation:cxTwinkle 3.2s ease-in-out infinite 3.2s}
.contact-hero-x-sparkles i:nth-child(6){top:84%;left:34%;animation:cxTwinkle 4s ease-in-out infinite .4s}
.contact-hero-x-sparkles i:nth-child(7){top:18%;left:65%;animation:cxTwinkle 3.8s ease-in-out infinite 1.2s}
@keyframes cxTwinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.5)}}

.contact-hero-x-shapes{position:absolute;inset:0;pointer-events:none;z-index:1}
.contact-hero-x-shapes svg{position:absolute;fill:none;stroke-width:1.4}
.contact-hero-x-shapes svg:nth-child(1){top:10%;left:5%;width:130px;height:130px;stroke:rgba(232,100,26,.22);animation:cxRotate 28s linear infinite}
.contact-hero-x-shapes svg:nth-child(2){bottom:8%;right:5%;width:120px;height:120px;stroke:rgba(80,160,255,.22);animation:cxRotate 22s linear infinite reverse}
.contact-hero-x-shapes svg:nth-child(3){top:55%;right:12%;width:90px;height:90px;stroke:rgba(232,100,26,.18);animation:cxRotate 20s linear infinite}
@keyframes cxRotate{to{transform:rotate(360deg)}}

.contact-hero-x-inner{
  position:relative;z-index:5;
  max-width:1100px;width:100%;
  margin:0 auto;padding:0 var(--pad-x);
  display:flex;flex-direction:column;align-items:center;gap:22px;
  text-align:center;
}

.contact-hero-x-kicker{
  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;
  opacity:0;transform:translateY(20px);
  animation:cxFadeUp .9s var(--ease-out) .2s both;
}
.contact-hero-x-kicker::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;
}

.contact-hero-x-inner h1{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(30px,3.2vw,48px);line-height:.92;
  letter-spacing:-.02em;color:#fff;
  text-transform:uppercase;margin:0;
  opacity:0;transform:translateY(20px);
  animation:cxFadeUp .9s var(--ease-out) .35s both;
}
.contact-hero-x-inner h1 em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;letter-spacing:.005em;
}
@keyframes cxFadeUp{to{opacity:1;transform:none}}

.contact-hero-x-lead{
  font-size:16px;line-height:1.55;
  color:rgba(255,255,255,.78);
  max-width:62ch;margin:0;
  opacity:0;transform:translateY(20px);
  animation:cxFadeUp .9s var(--ease-out) .5s both;
}

.contact-hero-x-stats{
  display:flex;gap:32px;flex-wrap:wrap;justify-content:center;margin-top:18px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.1);
  width:100%;max-width:780px;
  opacity:0;transform:translateY(20px);
  animation:cxFadeUp .9s var(--ease-out) .65s both;
}
.contact-hero-x-stat{display:flex;flex-direction:column;gap:4px;align-items:center}
.contact-hero-x-stat-num{font-family:var(--f-display);font-weight:800;font-size:clamp(22px,2.2vw,30px);line-height:1;color:var(--orange)}
.contact-hero-x-stat-lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.6);text-transform:uppercase;font-weight:600}

/* ============================================
   CHANNELS X — lichte sectie met dark cards
   ============================================ */
.contact-channels-x{
  background:var(--paper);
  padding:80px 0;
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.contact-channels-x::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(232,100,26,.05) 0%,transparent 60%);
}
.contact-channels-x-inner{
  position:relative;z-index:1;
  max-width:1280px;margin:0 auto;padding:0 var(--pad-x);
}
.contact-channels-x-head{
  text-align:center;margin-bottom:50px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.contact-channels-x-head .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;
  background:rgba(232,100,26,.08);
  border:1px solid rgba(232,100,26,.2);
  border-radius:99px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  font-weight:700;color:var(--orange);text-transform:uppercase;
}
.contact-channels-x-head .kicker::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 10px rgba(232,100,26,.6);
}
.contact-channels-x-head h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(22px,2.2vw,34px);line-height:1;
  letter-spacing:-.02em;color:var(--ink);
  text-transform:uppercase;margin:0;
}
.contact-channels-x-head h2 em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;
}

.contact-channels-x-grid{
  /* Drie kaarten sinds de LinkedIn-kaart eruit ging. Op vier kolommen
     bleef er rechts een lege plek staan. Toegevoegd 16-09-2026. */
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
@media(max-width:980px){.contact-channels-x-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.contact-channels-x-grid{grid-template-columns:1fr}}

.contact-chn-card{
  position:relative;
  background:linear-gradient(160deg,rgba(22,27,34,.96) 0%,rgba(13,17,23,.98) 100%);
  border:1px solid rgba(255,255,255,.08);
  padding:30px 24px 26px;
  display:flex;flex-direction:column;gap:14px;
  text-decoration:none;color:inherit;cursor:pointer;
  overflow:hidden;
  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% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  box-shadow:0 12px 32px rgba(0,0,0,.4);
}
.contact-chn-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;
}
.contact-chn-card:hover::before{width:100%}
.contact-chn-card::after{
  content:"";position:absolute;bottom:-50%;right:-30%;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,100,26,.18) 0%,transparent 70%);
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease-out);
}
.contact-chn-card:hover::after{opacity:1}
.contact-chn-card:hover{
  transform:translateY(-8px);
  border-color:rgba(232,100,26,.4);
  box-shadow:0 32px 60px rgba(0,0,0,.55),0 0 0 1px rgba(232,100,26,.18),0 0 50px rgba(232,100,26,.15);
}

.contact-chn-icon{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(232,100,26,.12);
  border:1px solid rgba(232,100,26,.35);
  color:var(--orange);
  position:relative;z-index:1;
  transition:transform .8s var(--ease-out),background .35s var(--ease-out);
}
.contact-chn-card:hover .contact-chn-icon{
  transform:rotate(360deg);
  background:rgba(232,100,26,.2);
}
.contact-chn-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact-chn-icon.solid svg{fill:currentColor;stroke:none}

.contact-chn-label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  color:var(--orange-light);text-transform:uppercase;font-weight:700;
  position:relative;z-index:1;
}
.contact-chn-value{
  font-family:var(--f-display);font-weight:700;
  font-size:18px;line-height:1.15;color:#fff;
  letter-spacing:-.005em;
  position:relative;z-index:1;
  word-break:break-word;
}
.contact-chn-sub{
  font-size:15px;line-height:1.5;color:rgba(255,255,255,.6);
  margin:0;position:relative;z-index:1;flex:1;
}
.contact-chn-arrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  color:var(--orange);text-transform:uppercase;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;
  position:relative;z-index:1;
  transition:gap .3s var(--ease-out);
}
.contact-chn-card:hover .contact-chn-arrow{gap:14px}
.contact-chn-arrow span{font-size:14px;line-height:1}

/* ============================================
   FORM X — cinematic donker form sectie
   ============================================ */
.contact-form-x{
  position:relative;
  padding:80px 0;
  background:linear-gradient(180deg,#0d1117 0%,#161b22 50%,#0d1117 100%);
  color:#fff;
  overflow:hidden;
}
.contact-form-x::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 15% 30%,rgba(232,100,26,.1),transparent 50%),
    radial-gradient(circle at 85% 70%,rgba(80,140,200,.08),transparent 50%);
}
.contact-form-x::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px) 0 0/80px 80px,
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px) 0 0/80px 80px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 90%);
  opacity:.6;
}

.contact-form-x-inner{
  position:relative;z-index:1;
  max-width:1280px;margin:0 auto;padding:0 var(--pad-x);
  display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start;
}
@media(max-width:980px){
  .contact-form-x-inner{grid-template-columns:1fr;gap:30px;max-width:780px}
}

/* Left intro */
.contact-form-x-intro{
  display:flex;flex-direction:column;gap:18px;
  position:sticky;top:120px;
}
@media(max-width:780px){.contact-form-x-intro{position:static}}
.contact-form-x-intro .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;
  background:rgba(232,100,26,.1);
  border:1px solid rgba(232,100,26,.28);
  border-radius:99px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  color:var(--orange-light);text-transform:uppercase;font-weight:700;
  align-self:flex-start;
}
.contact-form-x-intro .kicker::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 10px rgba(232,100,26,.6);
  animation:pxPulse 1.6s ease-in-out infinite;
}
.contact-form-x-intro h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(22px,2.2vw,34px);line-height:.95;
  color:#fff;letter-spacing:-.02em;
  text-transform:uppercase;margin:0;
}
.contact-form-x-intro h2 em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;
}
.contact-form-x-intro p{
  font-size:16px;line-height:1.6;color:rgba(255,255,255,.72);
  margin:0;max-width:42ch;
}
.contact-form-x-promises{
  list-style:none;margin:10px 0 0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.contact-form-x-promises li{
  display:flex;gap:10px;
  font-size:15px;line-height:1.45;color:rgba(255,255,255,.78);
  position:relative;
}
.contact-form-x-promises li::before{
  content:"";flex-shrink:0;
  width:16px;height:16px;border-radius:50%;
  background:rgba(232,100,26,.15);
  border:1px solid rgba(232,100,26,.5);
  position:relative;margin-top:1px;
}
.contact-form-x-promises li::after{
  content:"";position:absolute;top:4px;left:4px;
  width:8px;height:5px;
  border-left:1.5px solid var(--orange);
  border-bottom:1.5px solid var(--orange);
  transform:rotate(-45deg);
}

/* Right: form card */
.contact-form-x-card{
  position:relative;
  background:linear-gradient(160deg,rgba(22,27,34,.85) 0%,rgba(13,17,23,.95) 100%);
  border:1px solid rgba(255,255,255,.08);
  padding:44px 42px;
  display:flex;flex-direction:column;gap:22px;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  overflow:hidden;
}
@media(max-width:560px){
  .contact-form-x-card{padding:32px 26px}
}
.contact-form-x-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(232,100,26,.7) 50%,transparent 100%);
  z-index:2;
}

/* Urgentie pills */
.cx-urg-label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  color:rgba(255,255,255,.55);text-transform:uppercase;
  font-weight:600;display:block;margin-bottom:10px;
}
.cx-urg-grp{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
@media(max-width:500px){.cx-urg-grp{grid-template-columns:1fr}}
.cx-urg{
  padding:14px 12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  color:rgba(255,255,255,.7);text-transform:uppercase;
  text-align:center;cursor:pointer;font-weight:600;
  transition:all .3s var(--ease-out);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.cx-urg:hover{
  background:rgba(232,100,26,.08);
  border-color:rgba(232,100,26,.4);
  color:#fff;
}
.cx-urg.active{
  background:linear-gradient(135deg,var(--orange) 0%,#B53F00 100%);
  border-color:var(--orange);color:#fff;
  box-shadow:0 8px 24px rgba(232,100,26,.35);
}

/* Form fields */
.cx-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:500px){.cx-form-row{grid-template-columns:1fr}}
.cx-field{display:flex;flex-direction:column}
.cx-field label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  color:rgba(255,255,255,.55);text-transform:uppercase;margin-bottom:8px;
  font-weight:600;
}
.cx-field input,
.cx-field select,
.cx-field textarea{
  width:100%;padding:13px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;font-family:var(--f-body);font-size:16px;
  border-radius:0;outline:none;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out),box-shadow .2s var(--ease-out);
  box-sizing:border-box;
}
.cx-field input::placeholder,
.cx-field textarea::placeholder{color:rgba(255,255,255,.5)}
.cx-field input:focus,
.cx-field select:focus,
.cx-field textarea:focus{
  border-color:rgba(232,100,26,.7);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(232,100,26,.12);
}
.cx-field textarea{min-height:110px;resize:vertical;font-family:var(--f-body)}
.cx-field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23E8641A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
  padding-right:36px;
}
.cx-field select option{background:#0c0f15;color:#fff}

/* Submit */
.cx-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 32px;margin-top:6px;
  background:linear-gradient(135deg,var(--orange) 0%,#B53F00 100%);
  color:#fff;font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;cursor:pointer;
  border:0;outline:none;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),filter .2s var(--ease-out);
  box-shadow:0 12px 32px rgba(232,100,26,.35);
  align-self:flex-start;
}
.cx-submit:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(232,100,26,.5);filter:brightness(1.08)}
.cx-submit span.arrow{transition:transform .25s var(--ease-out);font-size:16px}
.cx-submit:hover span.arrow{transform:translateX(4px)}
.cx-form-note{
  font-size:12px;line-height:1.55;color:rgba(255,255,255,.45);
  margin:6px 0 0;
}