/* Shared merged-page reset */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { overflow-x: hidden; background: #020b16; }
.s4x-merged-part { position: relative; width: 100%; }
/* ===== survey4x-00-hero-hover.html ===== */

  #s4x-part-hero-hover *{
    box-sizing: border-box;
  }

  #s4x-part-hero-hover,#s4x-part-hero-hover{
    margin: 0;
    min-height: 100%;
    background: #07101d;
    font-family: Arial, sans-serif;
  }

  #s4x-part-hero-hover .hero{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background: #07101d;
  }

  #s4x-part-hero-hover .hero-image{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition:
      opacity 900ms cubic-bezier(.2,.75,.2,1),
      filter 900ms cubic-bezier(.2,.75,.2,1),
      transform 7s ease;
    will-change: opacity, filter, transform;
  }

  #s4x-part-hero-hover .hero-image.warm{
    opacity: 0;
    filter: brightness(1.03) saturate(1.08);
  }

  #s4x-part-hero-hover .hero-image.cool{
    opacity: 1;
    filter: brightness(.83) saturate(.9);
  }

  #s4x-part-hero-hover .hero:hover .hero-image.warm,#s4x-part-hero-hover .hero.is-warm .hero-image.warm{
    opacity: 1;
    filter: brightness(1.08) saturate(1.14);
  }

  #s4x-part-hero-hover .hero:hover .hero-image.cool,#s4x-part-hero-hover .hero.is-warm .hero-image.cool{
    opacity: 0;
  }

  #s4x-part-hero-hover .hero:hover .hero-image,#s4x-part-hero-hover .hero.is-warm .hero-image{
    transform: scale(1.025);
  }

  #s4x-part-hero-hover .hero::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(
        90deg,
        rgba(4, 12, 24, .88) 0%,
        rgba(4, 12, 24, .69) 31%,
        rgba(4, 12, 24, .22) 56%,
        rgba(4, 12, 24, .04) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,.06),
        rgba(0,0,0,.22)
      );
  }

  #s4x-part-hero-hover .content{
    position: relative;
    z-index: 3;
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

  #s4x-part-hero-hover .copy{
    max-width: 610px;
    color: white;
  }

  #s4x-part-hero-hover .eyebrow{
    margin: 0 0 14px;
    color: #9bc5f5;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  #s4x-part-hero-hover h1{
    margin: 0;
    font-size: clamp(48px, 7vw, 92px);
    line-height: .97;
    letter-spacing: -.045em;
  }

  #s4x-part-hero-hover h1 span{
    color: #f47721;
  }

  #s4x-part-hero-hover .lead{
    max-width: 560px;
    margin: 28px 0 0;
    color: rgba(255,255,255,.86);
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.55;
  }

  #s4x-part-hero-hover .actions{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
  }

  #s4x-part-hero-hover .button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 5px;
    color: white;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .02em;
    backdrop-filter: blur(8px);
    background: rgba(5, 15, 29, .28);
  }

  #s4x-part-hero-hover .button.primary{
    border-color: #f47721;
    background: #f47721;
  }

  #s4x-part-hero-hover .hint{
    position: absolute;
    right: 24px;
    bottom: 20px;
    z-index: 4;
    padding: 10px 14px;
    border-radius: 999px;
    color: rgba(255,255,255,.8);
    background: rgba(4,12,24,.48);
    backdrop-filter: blur(10px);
    font-size: 13px;
  }

  @media (hover: none) {
    #s4x-part-hero-hover .hint{
      display: none;
    }
  }

  @media (max-width: 800px) {
    #s4x-part-hero-hover .hero-image{
      object-position: 66% center;
    }

    #s4x-part-hero-hover .hero::before{
      background:
        linear-gradient(
          90deg,
          rgba(4, 12, 24, .91) 0%,
          rgba(4, 12, 24, .72) 60%,
          rgba(4, 12, 24, .30) 100%
        );
    }

    #s4x-part-hero-hover .content{
      width: min(100% - 32px, 1180px);
      align-items: flex-end;
      padding-bottom: 76px;
    }

    #s4x-part-hero-hover .copy{
      max-width: 100%;
    }
  }

/* ===== survey4x-01-feature-strip.html ===== */

#s4x-part-feature-strip{
    margin:0;
    background:#081627;
    font-family:Inter,Arial,sans-serif;
}
#s4x-part-feature-strip .features{
    background:linear-gradient(180deg,#0c2038,#091627);
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
}
#s4x-part-feature-strip .features .container{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:36px;
    padding:22px 28px;
}
#s4x-part-feature-strip .feature{
    display:flex;
    align-items:flex-start;
    gap:16px;
}
#s4x-part-feature-strip .icon{
    width:54px;
    height:54px;
    flex:none;
    border-radius:50%;
    border:2px solid rgba(103,171,255,.45);
    display:grid;
    place-items:center;
    color:#67abff;
}
#s4x-part-feature-strip .icon svg{
    width:28px;
    height:28px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
#s4x-part-feature-strip h3{
    margin:0 0 8px;
    color:#fff;
    font-size:15px;
    font-weight:800;
    text-transform:uppercase;
}
#s4x-part-feature-strip p{
    margin:0;
    color:#b8c7d8;
    font-size:13px;
    line-height:1.45;
}
#s4x-part-feature-strip .feature:hover .icon{
    box-shadow:0 0 20px rgba(86,170,255,.45);
    transform:scale(1.06);
    transition:.3s;
}
#s4x-part-feature-strip .feature:hover h3{
    color:#f47721;
}
@media(max-width:900px){
#s4x-part-feature-strip .container{grid-template-columns:1fr 1fr;}
}
@media(max-width:600px){
#s4x-part-feature-strip .container{grid-template-columns:1fr;}
}

/* ===== survey4x-03-pyramid-animated-glow.html ===== */

  #s4x-part-pyramid{
    --bg: #ffffff;
    --text: #1f2937;
    --muted: #5f6875;
    --line: #aeb7c2;
  }

  #s4x-part-pyramid *{ box-sizing: border-box; }

  #s4x-part-pyramid,#s4x-part-pyramid{
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
  }

  #s4x-part-pyramid{
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow-x: hidden;
  }

  #s4x-part-pyramid .stage{
    position: relative;
    width: min(1180px, 96vw);
    min-height: 760px;
    display: grid;
    grid-template-columns: minmax(520px, 650px) minmax(360px, 1fr);
    align-items: center;
    gap: 24px;
    padding: 30px 20px;
    isolation: isolate;
  }

  #s4x-part-pyramid .pyramid-wrap{
    position: relative;
    height: 680px;
    z-index: 20;
  }

  #s4x-part-pyramid .pyramid{
    position: absolute;
    inset: 0;
    z-index: 20;
  }

  #s4x-part-pyramid .layer{
    --lift: 0px;
    --scale: 1;
    --width: 600px;
    --top-color: #4b8ed0;
    --left-color: #3471b2;
    --right-color: #255889;

    position: absolute;
    left: 50%;
    width: var(--width);
    transform: translateX(-50%) translateY(var(--lift)) scale(var(--scale));
    transform-origin: center center;
    transition:
      transform 420ms cubic-bezier(.2,.85,.2,1),
      filter 420ms ease,
      opacity 260ms ease;
    cursor: pointer;
    will-change: transform;
  }

  #s4x-part-pyramid .layer svg.shape{
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter:
      drop-shadow(0 10px 10px rgba(15, 23, 42, .16))
      drop-shadow(0 2px 3px rgba(15, 23, 42, .10));
    transition:
      filter 320ms ease,
      transform 420ms cubic-bezier(.2,.85,.2,1);
  }

  #s4x-part-pyramid .layer .top-face{ fill: var(--top-color); }
  #s4x-part-pyramid .layer .left-face{ fill: var(--left-color); }
  #s4x-part-pyramid .layer .right-face{ fill: var(--right-color); }

  #s4x-part-pyramid .layer.is-hovered{
    --scale: 1.045;
    filter:
      drop-shadow(0 20px 18px rgba(15, 23, 42, .24))
      drop-shadow(0 0 16px rgba(55, 149, 255, .34));
  }

  #s4x-part-pyramid .layer.is-hovered svg.shape{
    filter:
      drop-shadow(0 16px 15px rgba(15, 23, 42, .25))
      drop-shadow(0 4px 5px rgba(15, 23, 42, .13));
  }

  #s4x-part-pyramid .layer::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 82%;
    height: 25%;
    transform: translateX(-50%) scaleX(.18) scaleY(.55);
    border-radius: 50%;
    background: radial-gradient(
      ellipse at center,
      rgba(91, 181, 255, .92) 0%,
      rgba(58, 156, 255, .48) 36%,
      rgba(58, 156, 255, .12) 62%,
      rgba(58, 156, 255, 0) 80%
    );
    filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transform-origin: center;
  }

  #s4x-part-pyramid .layer.is-hovered::after{
    animation: glow-arrive 520ms cubic-bezier(.16,.84,.35,1) both;
  }

  @keyframes glow-arrive {
    0% {
      opacity: 0;
      transform: translateX(-50%) scaleX(.12) scaleY(.45);
      filter: blur(24px);
    }
    45% {
      opacity: 1;
      transform: translateX(-50%) scaleX(1.12) scaleY(1.08);
      filter: blur(15px);
    }
    72% {
      opacity: .72;
      transform: translateX(-50%) scaleX(.92) scaleY(.88);
      filter: blur(19px);
    }
    100% {
      opacity: .92;
      transform: translateX(-50%) scaleX(1) scaleY(1);
      filter: blur(18px);
    }
  }

  #s4x-part-pyramid .layer-icon{
    transition:
      transform 320ms cubic-bezier(.2,.85,.2,1),
      filter 300ms ease;
  }

  #s4x-part-pyramid .layer.is-hovered .layer-icon{
    transform: translate(-50%, -50%) scale(1.16);
    filter:
      drop-shadow(0 2px 4px rgba(0,0,0,.25))
      drop-shadow(0 0 9px rgba(117, 194, 255, .95));
  }

  #s4x-part-pyramid .layer.shadow-recipient svg.shape{
    filter:
      brightness(.91)
      drop-shadow(0 -11px 15px rgba(15, 23, 42, .28))
      drop-shadow(0 10px 10px rgba(15, 23, 42, .16));
  }

  #s4x-part-pyramid .layer.shadow-recipient::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 4%;
    width: 76%;
    height: 18%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(
      ellipse at center,
      rgba(8, 18, 34, .32) 0%,
      rgba(8, 18, 34, .16) 44%,
      rgba(8, 18, 34, 0) 78%
    );
    filter: blur(13px);
    pointer-events: none;
    z-index: 2;
    animation: shadow-arrive 360ms ease-out both;
  }

  @keyframes shadow-arrive {
    from {
      opacity: 0;
      transform: translateX(-50%) scaleX(.72);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) scaleX(1);
    }
  }

  #s4x-part-pyramid .layer-icon{
    position: absolute;
    left: 50%;
    top: 43%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    color: white;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  }

  #s4x-part-pyramid .layer-icon svg{
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Compacte stapel; onderste laag onderaan en grootste */
  #s4x-part-pyramid .top{
    top: 22px;
    --width: 154px;
    --top-color: #17243c;
    --left-color: #111b2f;
    --right-color: #0b1424;
    z-index: 80;
  }

  #s4x-part-pyramid .l1{
    top: 93px;
    --width: 245px;
    --top-color: #45484d;
    --left-color: #383b40;
    --right-color: #2e3136;
    z-index: 70;
  }

  #s4x-part-pyramid .l2{
    top: 162px;
    --width: 325px;
    --top-color: #66696d;
    --left-color: #55585c;
    --right-color: #474a4e;
    z-index: 60;
  }

  #s4x-part-pyramid .l3{
    top: 233px;
    --width: 405px;
    --top-color: #83868a;
    --left-color: #727579;
    --right-color: #616468;
    z-index: 50;
  }

  #s4x-part-pyramid .l4{
    top: 306px;
    --width: 485px;
    --top-color: #123b68;
    --left-color: #0d315a;
    --right-color: #092847;
    z-index: 40;
  }

  #s4x-part-pyramid .l5{
    top: 381px;
    --width: 555px;
    --top-color: #1e5e9a;
    --left-color: #174c80;
    --right-color: #103c68;
    z-index: 30;
  }

  #s4x-part-pyramid .l6{
    top: 458px;
    --width: 625px;
    --top-color: #3b82c4;
    --left-color: #2e6fae;
    --right-color: #22588d;
    z-index: 20;
  }

  #s4x-part-pyramid .labels{
    position: relative;
    height: 680px;
    z-index: 5;
  }

  #s4x-part-pyramid .label{
    --row-top: 0px;
    position: absolute;
    top: var(--row-top);
    left: 0;
    width: 100%;
    min-height: 62px;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    padding-left: 28px;
    transition:
      transform 420ms cubic-bezier(.2,.85,.2,1),
      opacity 260ms ease;
  }

  #s4x-part-pyramid .label::before{
    content: "";
    position: absolute;
    right: calc(100% + 8px);
    top: 64%;
    width: 255px;
    height: 1px;
    background: var(--line);
    z-index: -1;
    transition:
      background-color 260ms ease,
      box-shadow 260ms ease,
      transform 420ms cubic-bezier(.2,.85,.2,1);
  }

  #s4x-part-pyramid .label::after{
    content: "";
    position: absolute;
    right: calc(100% + 2px);
    top: calc(64% - 3px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot, #667085);
    transition: transform 260ms ease, box-shadow 260ms ease;
  }

  #s4x-part-pyramid .label h3{
    margin: 0 0 3px;
    font-size: 15px;
    line-height: 1.1;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  #s4x-part-pyramid .label p{
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.35;
  }

  #s4x-part-pyramid .label.active{
    transform: translateX(10px);
  }

  #s4x-part-pyramid .label.active::before{
    background: var(--dot, #2563eb);
    transform: scaleX(1.02);
    transform-origin: right center;
    box-shadow: 0 0 8px color-mix(in srgb, var(--dot) 55%, transparent);
  }

  #s4x-part-pyramid .label.active::after{
    transform: scale(1.22);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 18%, transparent);
  }

  #s4x-part-pyramid .label.active h3{
    color: var(--dot, #2563eb);
  }

  #s4x-part-pyramid .lab0{ --row-top: 47px;  --dot: #17243c; }
  #s4x-part-pyramid .lab1{ --row-top: 117px; --dot: #45484d; }
  #s4x-part-pyramid .lab2{ --row-top: 187px; --dot: #66696d; }
  #s4x-part-pyramid .lab3{ --row-top: 258px; --dot: #83868a; }
  #s4x-part-pyramid .lab4{ --row-top: 331px; --dot: #123b68; }
  #s4x-part-pyramid .lab5{ --row-top: 406px; --dot: #1e5e9a; }
  #s4x-part-pyramid .lab6{ --row-top: 483px; --dot: #3b82c4; }

  @media (max-width: 980px) {
    #s4x-part-pyramid .stage{
      grid-template-columns: 1fr;
      max-width: 760px;
      padding-top: 10px;
    }

    #s4x-part-pyramid .pyramid-wrap{
      height: 610px;
    }

    #s4x-part-pyramid .labels{
      height: auto;
      display: grid;
      gap: 10px;
      padding: 0 12px 28px;
    }

    #s4x-part-pyramid .label{
      position: relative;
      top: auto;
      padding: 10px 14px 10px 18px;
      border-left: 3px solid var(--dot);
      background: #f7f8fa;
      border-radius: 8px;
    }

    #s4x-part-pyramid .label::before,#s4x-part-pyramid .label::after{
      display: none;
    }
  }

  @media (max-width: 650px) {
    #s4x-part-pyramid .pyramid-wrap{
      transform: scale(.76);
      transform-origin: top center;
      margin-bottom: -135px;
    }
  }

/* ===== survey4x-04-value-and-roles.html ===== */

  #s4x-part-value-roles{
    --navy: #0e2b4d;
    --blue: #5d8fc4;
    --light: #f3f6f9;
    --line: #d9e0e8;
    --text: #152033;
    --muted: #566273;
  }

  #s4x-part-value-roles *{ box-sizing: border-box; }

  #s4x-part-value-roles{
    margin: 0;
    background: white;
    font-family: Inter, Arial, sans-serif;
    color: var(--text);
  }

  #s4x-part-value-roles .section{
    padding: 26px 28px 18px;
    background:
      linear-gradient(180deg, rgba(244,247,250,.96), rgba(255,255,255,.98));
  }

  #s4x-part-value-roles .section + .section{
    border-top: 1px solid #e8edf2;
  }

  #s4x-part-value-roles .container{
    max-width: 1320px;
    margin: 0 auto;
  }

  #s4x-part-value-roles .eyebrow{
    margin: 0 0 7px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  #s4x-part-value-roles h2{
    margin: 0 0 16px;
    color: var(--text);
    font-size: clamp(25px, 2.5vw, 36px);
    line-height: 1.05;
    letter-spacing: -.02em;
  }

  #s4x-part-value-roles .value-grid{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  #s4x-part-value-roles .value-card{
    min-height: 176px;
    padding: 22px 16px 18px;
    text-align: center;
    background: rgba(255,255,255,.96);
    border: 1px solid #e2e7ed;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(14, 43, 77, .06);
    transition:
      transform 260ms ease,
      box-shadow 260ms ease,
      border-color 260ms ease;
  }

  #s4x-part-value-roles .value-card:hover{
    transform: translateY(-4px);
    border-color: rgba(93,143,196,.45);
    box-shadow: 0 10px 24px rgba(14, 43, 77, .12);
  }

  #s4x-part-value-roles .icon{
    width: 42px;
    height: 42px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    color: var(--navy);
  }

  #s4x-part-value-roles .icon svg{
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #s4x-part-value-roles .value-card h3,#s4x-part-value-roles .role h3{
    margin: 0 0 8px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.2;
    text-transform: uppercase;
  }

  #s4x-part-value-roles .value-card p,#s4x-part-value-roles .role p{
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
  }

  #s4x-part-value-roles .roles-section{
    padding-top: 20px;
    background: linear-gradient(180deg, #f4f6f8, #eef2f5);
  }

  #s4x-part-value-roles .roles-grid{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  #s4x-part-value-roles .role{
    position: relative;
    min-height: 170px;
    padding: 10px 20px 8px;
    text-align: center;
  }

  #s4x-part-value-roles .role:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 14px;
    right: 0;
    width: 1px;
    height: 112px;
    background: var(--line);
  }

  #s4x-part-value-roles .role .icon{
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
  }

  #s4x-part-value-roles .role:hover .icon{
    color: #f47721;
    transform: translateY(-3px) scale(1.05);
    transition: .25s ease;
  }

  @media (max-width: 1100px) {
    #s4x-part-value-roles .value-grid{
      grid-template-columns: repeat(3, 1fr);
    }

    #s4x-part-value-roles .roles-grid{
      grid-template-columns: repeat(4, 1fr);
      gap: 10px 0;
    }

    #s4x-part-value-roles .role:nth-child(4)::after{
      display: none;
    }
  }

  @media (max-width: 720px) {
    #s4x-part-value-roles .section{
      padding-inline: 18px;
    }

    #s4x-part-value-roles .value-grid{
      grid-template-columns: 1fr 1fr;
    }

    #s4x-part-value-roles .roles-grid{
      grid-template-columns: 1fr 1fr;
    }

    #s4x-part-value-roles .role:nth-child(even)::after{
      display: none;
    }
  }

  @media (max-width: 480px) {
    #s4x-part-value-roles .value-grid,#s4x-part-value-roles .roles-grid{
      grid-template-columns: 1fr;
    }

    #s4x-part-value-roles .role::after{
      display: none !important;
    }
  }

/* ===== survey4x-05-layered-project-hero-v2.html ===== */

#s4x-part-layered-hero{
  --s4x-navy:#020b16;
  --s4x-blue:#168ef2;
  --s4x-blue-light:#66c8ff;
  --s4x-orange:#f47721;
  --s4x-text:#eef7ff;
}

#s4x-part-layered-hero *{ box-sizing:border-box; }
#s4x-part-layered-hero,#s4x-part-layered-hero{
  margin:0;
  min-height:100%;
  background:#020b16;
  font-family:Inter,Arial,sans-serif;
}

#s4x-part-layered-hero .s4x-hero{
  position:relative;
  min-height:760px;
  overflow:hidden;
  isolation:isolate;
  background:#020b16;
}

#s4x-part-layered-hero .s4x-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* 1. Lucht helemaal achteraan */
#s4x-part-layered-hero .s4x-sky{
  z-index:0;
  background:
    linear-gradient(to bottom,rgba(1,8,17,.08),rgba(1,8,17,.28)),
    url("survey4x-bottom-bg-air.jpg") center top / cover no-repeat;
}

#s4x-part-layered-hero .s4x-sky::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 63% 34%,rgba(16,128,232,.16),transparent 34%),
    linear-gradient(to bottom,transparent 56%,rgba(2,11,22,.36) 82%,rgba(2,11,22,.82) 100%);
}

/* 2. Raffinaderij: ongeveer 60% breed, gecentreerd */
#s4x-part-layered-hero .s4x-industry{
  z-index:1;
  inset:auto 0 0;
  height:100%;
  background:
    url("survey4x-industry-night.png") center bottom / min(60vw,980px) auto no-repeat;
  filter:drop-shadow(0 -16px 34px rgba(18,102,184,.16));
}

/* Zijwaartse en onderste maskering zodat de uitsnede nergens zichtbaar is */
#s4x-part-layered-hero .s4x-industry::before{
  content:"";
  position:absolute;
  inset:0;
}

#s4x-part-layered-hero .s4x-industry::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:42%;
}

/* 3. Extra donkerblauwe overgang onder en naast de raffinaderij */
#s4x-part-layered-hero .s4x-refinery-blend{
  z-index:2;
  background:
    radial-gradient(ellipse at 50% 84%,
      rgba(8,35,61,.12) 0%,
      rgba(4,22,42,.34) 34%,
      rgba(2,11,22,.76) 69%,
      #020b16 100%);
  mask-image:linear-gradient(to bottom,transparent 42%,black 72%);
}

/* 4. Wereldkaart en aansluitingen vóór de raffinaderij */
#s4x-part-layered-hero .s4x-network{
  z-index:3;
}

#s4x-part-layered-hero .s4x-world-canvas{
  width:100%;
  height:100%;
  display:block;
}

/* De kaart vervaagt richting onderkant zodat hij niet hard door de horizon loopt */
#s4x-part-layered-hero .s4x-map-fade{
  z-index:4;
  background:
    linear-gradient(to bottom,
      rgba(2,11,22,0) 0%,
      rgba(2,11,22,0) 54%,
      rgba(2,11,22,.16) 67%,
      rgba(2,11,22,.64) 87%,
      rgba(2,11,22,.96) 100%);
}

/* 5. Devices blijven de voorste beeldlaag */
#s4x-part-layered-hero .s4x-devices{
  z-index:5;
  background:
    url("survey4x-devices-cutout.png") right clamp(20px,5vw,90px) bottom 26px /
    min(43vw,700px) auto no-repeat;
  filter:drop-shadow(0 28px 52px rgba(0,0,0,.55));
}

#s4x-part-layered-hero .s4x-copy{
  position:relative;
  z-index:6;
  width:min(660px,56vw);
  padding:clamp(72px,9vw,130px) 0 0 clamp(34px,7vw,126px);
  color:var(--s4x-text);
  text-shadow:0 3px 18px rgba(0,0,0,.38);
}

#s4x-part-layered-hero .s4x-eyebrow{
  color:var(--s4x-orange);
  font-size:13px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
}

#s4x-part-layered-hero .s4x-copy h1{
  margin:16px 0 18px;
  max-width:760px;
  font-size:clamp(48px,6.1vw,92px);
  line-height:.95;
  letter-spacing:-.055em;
}

#s4x-part-layered-hero .s4x-copy p{
  margin:0;
  max-width:48ch;
  color:#b2c6d8;
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.65;
}

#s4x-part-layered-hero .s4x-cta{
  display:flex;
  gap:12px;
  margin-top:30px;
  flex-wrap:wrap;
}

#s4x-part-layered-hero .s4x-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:750;
}

#s4x-part-layered-hero .s4x-cta__primary{
  color:white;
  background:linear-gradient(135deg,#ff8a36,#f47721);
  box-shadow:0 12px 34px rgba(244,119,33,.28);
}

#s4x-part-layered-hero .s4x-cta__secondary{
  color:#e9f5ff;
  border:1px solid rgba(132,194,241,.28);
  background:rgba(2,15,29,.36);
  backdrop-filter:blur(10px);
}

#s4x-part-layered-hero .s4x-project-panel{
  position:absolute;
  right:24px;
  top:24px;
  z-index:20;
  display:none;
  width:min(380px,calc(100vw - 48px));
  border:1px solid rgba(130,194,244,.22);
  border-radius:18px;
  padding:16px;
  color:#eef7ff;
  background:rgba(2,13,26,.82);
  backdrop-filter:blur(18px);
  box-shadow:0 20px 70px rgba(0,0,0,.4);
  pointer-events:auto;
}

#s4x-part-layered-hero .s4x-project-panel.is-visible{
  display:block;
}

#s4x-part-layered-hero .s4x-panel-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:12px;
}

#s4x-part-layered-hero .s4x-panel-head button{
  border:0;
  color:#a9bed1;
  background:transparent;
  cursor:pointer;
  font-size:20px;
}

#s4x-part-layered-hero .s4x-project-list{
  display:grid;
  gap:8px;
  max-height:300px;
  overflow:auto;
}

#s4x-part-layered-hero .s4x-project-button{
  display:grid;
  grid-template-columns:10px 1fr auto;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:12px;
  color:#c9d9e7;
  background:rgba(255,255,255,.035);
  text-align:left;
  cursor:pointer;
}

#s4x-part-layered-hero .s4x-project-button:hover,#s4x-part-layered-hero .s4x-project-button.is-active{
  color:white;
  border-color:rgba(244,119,33,.6);
  background:rgba(244,119,33,.10);
}

#s4x-part-layered-hero .s4x-project-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--s4x-blue-light);
  box-shadow:0 0 10px currentColor;
}

#s4x-part-layered-hero .s4x-project-button.is-active .s4x-project-dot{
  background:var(--s4x-orange);
}

#s4x-part-layered-hero .s4x-project-button small{
  color:#70889d;
}

@media(max-width:900px) {
  #s4x-part-layered-hero .s4x-hero{
    min-height:880px;
  }

  #s4x-part-layered-hero .s4x-copy{
    width:auto;
    padding:52px 24px 0;
    text-align:center;
  }

  #s4x-part-layered-hero .s4x-copy p{
    margin-inline:auto;
  }

  #s4x-part-layered-hero .s4x-cta{
    justify-content:center;
  }

  #s4x-part-layered-hero .s4x-devices{
    background-position:center bottom 18px;
    background-size:min(82vw,680px) auto;
  }

  #s4x-part-layered-hero .s4x-industry{
    height:62%;
    background-position:center bottom;
    background-size:min(88vw,900px) auto;
  }
}

@media(prefers-reduced-motion:reduce) {
  #s4x-part-layered-hero .s4x-hero *{
    animation:none!important;
  }
}


/* ===== Survey4X website topbar ===== */
:root{--s4x-header-height:74px;--s4x-orange:#f47721;--s4x-header-bg:rgba(3,12,24,.72)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.s4x-site-header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--s4x-header-height);border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(2,10,20,.86),rgba(2,10,20,.58));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background .25s ease,box-shadow .25s ease}
.s4x-site-header.is-scrolled{background:rgba(2,10,20,.94);box-shadow:0 12px 35px rgba(0,0,0,.28)}
.s4x-site-header__inner{width:min(1500px,calc(100% - 42px));height:100%;margin:auto;display:flex;align-items:center;gap:26px}
.s4x-brand{display:inline-flex;align-items:baseline;min-width:max-content;color:#fff;text-decoration:none;font:800 25px/1 Inter,Arial,sans-serif;letter-spacing:-.055em}
.s4x-brand__four{color:var(--s4x-orange);font-size:1.18em;margin-left:2px}.s4x-brand__x{color:#fff}.s4x-brand__survey{color:#fff}
.s4x-main-nav{display:flex;align-items:center;justify-content:center;gap:clamp(13px,1.45vw,25px);flex:1}
.s4x-main-nav a{position:relative;color:rgba(235,244,252,.79);text-decoration:none;font:600 13px/1.2 Inter,Arial,sans-serif;white-space:nowrap;transition:color .2s ease}
.s4x-main-nav a:hover,.s4x-main-nav a.is-active{color:#fff}.s4x-main-nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;border-radius:2px;background:var(--s4x-orange)}
.s4x-header-actions{display:flex;align-items:center;gap:13px;min-width:max-content}
.s4x-language{height:36px;padding:0 25px 0 10px;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#eaf5ff;background:#071626;font:700 12px Inter,Arial,sans-serif;cursor:pointer}
.s4x-login{color:#dceafa;text-decoration:none;font:650 13px Inter,Arial,sans-serif}
.s4x-demo{display:inline-flex;align-items:center;min-height:40px;padding:0 17px;border-radius:8px;color:#fff;text-decoration:none;background:var(--s4x-orange);font:750 13px Inter,Arial,sans-serif;box-shadow:0 8px 24px rgba(244,119,33,.24)}
.s4x-nav-toggle{display:none;width:42px;height:42px;padding:10px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:rgba(255,255,255,.04);cursor:pointer}.s4x-nav-toggle span:not(.sr-only){display:block;height:2px;margin:4px 0;background:#fff;border-radius:2px}
@media(max-width:1180px){.s4x-main-nav{gap:12px}.s4x-main-nav a{font-size:12px}.s4x-login{display:none}}
@media(max-width:980px){:root{--s4x-header-height:66px}.s4x-site-header__inner{width:calc(100% - 28px);gap:14px}.s4x-nav-toggle{display:block;margin-left:auto}.s4x-main-nav{position:absolute;top:calc(100% + 1px);left:14px;right:14px;display:none;align-items:stretch;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(3,13,26,.98);box-shadow:0 20px 50px rgba(0,0,0,.4)}.s4x-main-nav.is-open{display:grid}.s4x-main-nav a{padding:12px;border-radius:8px}.s4x-main-nav a:hover,.s4x-main-nav a.is-active{background:rgba(244,119,33,.1)}.s4x-main-nav a.is-active::after{display:none}.s4x-header-actions{margin-left:0}.s4x-demo{display:none}}
@media(max-width:520px){.s4x-language{height:34px}.s4x-brand{font-size:22px}}

/* Deliberate compact section heights */
#s4x-part-hero-hover .hero,
#s4x-part-hero-hover .content{min-height:62vh;height:62vh}
#s4x-part-pyramid{min-height:62vh}
#s4x-part-pyramid .stage{min-height:62vh;height:auto}
#s4x-part-layered-hero .s4x-hero{min-height:62vh;height:62vh}
#s4x-part-hero-hover .content{padding-top:var(--s4x-header-height)}
@media(max-width:800px){#s4x-part-hero-hover .hero,#s4x-part-hero-hover .content,#s4x-part-layered-hero .s4x-hero{min-height:720px;height:auto}#s4x-part-pyramid,#s4x-part-pyramid .stage{min-height:690px}}

/* =========================================================
   Survey4X blue base / orange interaction theme
   Exact overrides for the classes used in index.html
   ========================================================= */
:root {
  --s4x-blue: #168ef2;
  --s4x-blue-dark: #0f6fbe;
  --s4x-blue-light: #66c8ff;
  --s4x-orange: #f47721;
}

/* Original logo treatment: white wordmark, blue 4 */
.s4x-brand {
  font-size: 30px;
  font-weight: 950;
  letter-spacing: -.08em;
  font-style: italic;
  text-shadow: 0 14px 35px rgba(0,0,0,.45);
}
.s4x-brand__four { color: var(--s4x-blue); }

/* Navigation: blue active state, orange interaction */
.s4x-main-nav a {
  transition: color .2s ease, transform .2s ease;
}
.s4x-main-nav a.is-active {
  color: var(--s4x-blue-light);
}
.s4x-main-nav a.is-active::after {
  background: var(--s4x-blue);
  box-shadow: 0 0 12px rgba(22,142,242,.42);
}
.s4x-main-nav a:hover,
.s4x-main-nav a.is-active:hover {
  color: var(--s4x-orange);
  transform: translateY(-1px);
}
.s4x-main-nav a.is-active:hover::after {
  background: var(--s4x-orange);
  box-shadow: 0 0 12px rgba(244,119,33,.42);
}

/* Header demo button: blue base, orange hover */
.s4x-demo {
  background: linear-gradient(135deg, var(--s4x-blue-light), var(--s4x-blue));
  box-shadow: 0 8px 24px rgba(22,142,242,.28);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.s4x-demo:hover {
  background: linear-gradient(135deg, #ff963f, var(--s4x-orange));
  box-shadow: 0 10px 28px rgba(244,119,33,.32);
  transform: translateY(-2px);
}

/* Main hero: blue brand accent instead of orange */
#s4x-part-hero-hover h1 span {
  color: var(--s4x-blue);
}

/* Main hero buttons */
#s4x-part-hero-hover .button {
  transition: color .2s ease, background .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
#s4x-part-hero-hover .button.primary {
  border-color: var(--s4x-blue);
  background: linear-gradient(135deg, var(--s4x-blue-light), var(--s4x-blue));
  box-shadow: 0 12px 30px rgba(22,142,242,.24);
}
#s4x-part-hero-hover .button:hover,
#s4x-part-hero-hover .button.primary:hover {
  color: #fff;
  border-color: var(--s4x-orange);
  background: var(--s4x-orange);
  box-shadow: 0 12px 30px rgba(244,119,33,.28);
  transform: translateY(-2px);
}

/* Lower world/project hero */
#s4x-part-layered-hero .s4x-eyebrow {
  color: var(--s4x-blue-light);
}
#s4x-part-layered-hero .s4x-cta__primary {
  color: #fff;
  background: linear-gradient(135deg, var(--s4x-blue-light), var(--s4x-blue));
  box-shadow: 0 12px 34px rgba(22,142,242,.28);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
#s4x-part-layered-hero .s4x-cta__primary:hover {
  background: linear-gradient(135deg, #ff963f, var(--s4x-orange));
  box-shadow: 0 12px 34px rgba(244,119,33,.3);
  transform: translateY(-2px);
}
#s4x-part-layered-hero .s4x-cta__secondary {
  transition: color .2s ease, background .2s ease, border-color .2s ease,
              transform .2s ease;
}
#s4x-part-layered-hero .s4x-cta__secondary:hover {
  color: #fff;
  border-color: var(--s4x-orange);
  background: rgba(244,119,33,.16);
  transform: translateY(-2px);
}

@media (max-width: 980px) {
  .s4x-main-nav a:hover,
  .s4x-main-nav a.is-active,
  .s4x-main-nav a.is-active:hover {
    background: rgba(22,142,242,.10);
  }
  .s4x-main-nav a:hover,
  .s4x-main-nav a.is-active:hover {
    background: rgba(244,119,33,.12);
  }
}

/* ==========================================================
   Survey4X interaction polish v3
   Blue base, orange interaction, glass header and gentle lift
   ========================================================== */

:root{
  --s4x-blue:#168ef2;
  --s4x-blue-dark:#0f6fbe;
  --s4x-blue-light:#66c8ff;
  --s4x-orange:#f47721;
  --s4x-motion:cubic-bezier(.2,.8,.2,1);
}

/* Dark Apple-style glass topbar */
.s4x-site-header{
  overflow:visible;
  background:linear-gradient(180deg,rgba(7,18,32,.68),rgba(3,13,25,.54));
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 28px rgba(0,0,0,.14);
  backdrop-filter:blur(24px) saturate(165%);
  -webkit-backdrop-filter:blur(24px) saturate(165%);
  transition:background .38s ease,border-color .38s ease,box-shadow .38s ease;
}
.s4x-site-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 58%);
  opacity:.72;
}
.s4x-site-header__inner{position:relative;z-index:1}
.s4x-site-header.is-scrolled{
  background:linear-gradient(180deg,rgba(4,14,27,.88),rgba(2,10,20,.80));
  border-bottom-color:rgba(255,255,255,.13);
  box-shadow:0 14px 42px rgba(0,0,0,.28);
}

/* Keep the original logo feel */
.s4x-brand{
  font-size:30px;
  font-weight:950;
  letter-spacing:-.08em;
  font-style:italic;
  text-shadow:0 14px 35px rgba(0,0,0,.45);
}
.s4x-brand__four{color:var(--s4x-blue)}

/* Smooth navigation states */
.s4x-main-nav a{
  transition:color .28s ease,transform .28s var(--s4x-motion);
}
.s4x-main-nav a.is-active{color:var(--s4x-blue-light)}
.s4x-main-nav a.is-active::after{
  background:var(--s4x-blue);
  box-shadow:0 0 13px rgba(22,142,242,.38);
  transition:background .28s ease,box-shadow .28s ease,transform .28s var(--s4x-motion);
}
.s4x-main-nav a:hover,
.s4x-main-nav a.is-active:hover{
  color:var(--s4x-orange);
  transform:translateY(-1px);
}
.s4x-main-nav a.is-active:hover::after{
  background:var(--s4x-orange);
  box-shadow:0 0 13px rgba(244,119,33,.40);
  transform:scaleX(1.04);
}

/* Buttons: smooth color morph and modest scale.
   Important: target the CTA links, not the flex container itself. */
.s4x-demo,
#s4x-part-hero-hover .button,
#s4x-part-layered-hero .s4x-cta a{
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:transform;
  transition:
    transform .32s var(--s4x-motion),
    color .32s ease,
    background-color .32s ease,
    border-color .32s ease,
    box-shadow .32s ease,
    filter .32s ease !important;
}
.s4x-demo,
#s4x-part-hero-hover .button.primary,
#s4x-part-layered-hero .s4x-cta__primary{
  color:#fff;
  border-color:var(--s4x-blue);
  background-color:var(--s4x-blue);
  background-image:linear-gradient(135deg,var(--s4x-blue-light),var(--s4x-blue));
  box-shadow:0 11px 28px rgba(22,142,242,.25);
}
.s4x-demo:hover,
#s4x-part-hero-hover .button:hover,
#s4x-part-hero-hover .button.primary:hover,
#s4x-part-layered-hero .s4x-cta a:hover,
#s4x-part-layered-hero .s4x-cta__primary:hover,
#s4x-part-layered-hero .s4x-cta__secondary:hover{
  color:#fff;
  border-color:var(--s4x-orange);
  background-color:var(--s4x-orange);
  background-image:linear-gradient(135deg,#ff9844,var(--s4x-orange));
  box-shadow:0 15px 34px rgba(244,119,33,.27);
  transform:translateY(-3px) scale(1.035);
  filter:saturate(1.04);
}

/* Real page cards and feature divisions */
#s4x-part-feature-strip .feature,
#s4x-part-value-roles .value-card,
#s4x-part-value-roles .role{
  transform:translateZ(0);
  backface-visibility:hidden;
  transition:
    transform .36s var(--s4x-motion),
    box-shadow .36s ease,
    border-color .36s ease,
    background-color .36s ease;
}
#s4x-part-feature-strip .feature:hover,
#s4x-part-value-roles .value-card:hover,
#s4x-part-value-roles .role:hover{
  transform:translateY(-6px) scale(1.022);
}
#s4x-part-feature-strip .feature:hover{
  background:rgba(255,255,255,.025);
}
#s4x-part-value-roles .value-card:hover{
  border-color:rgba(22,142,242,.36);
  box-shadow:0 18px 38px rgba(14,43,77,.14);
}
#s4x-part-value-roles .role:hover{
  z-index:2;
}
#s4x-part-feature-strip .icon,
#s4x-part-value-roles .icon,
#s4x-part-feature-strip h3,
#s4x-part-value-roles h3{
  transition:transform .34s var(--s4x-motion),color .30s ease;
}
#s4x-part-feature-strip .feature:hover .icon,
#s4x-part-value-roles .value-card:hover .icon,
#s4x-part-value-roles .role:hover .icon{
  color:var(--s4x-orange);
  transform:translateY(-2px) scale(1.10);
}
#s4x-part-feature-strip .feature:hover h3,
#s4x-part-value-roles .value-card:hover h3,
#s4x-part-value-roles .role:hover h3{
  color:var(--s4x-orange);
}

/* Canvas remains interactive while content above it stays clickable */
#survey4xWorldCanvas{
  pointer-events:auto;
  touch-action:pan-y;
}

@media(max-width:980px){
  .s4x-main-nav a:hover,
  .s4x-main-nav a.is-active,
  .s4x-main-nav a.is-active:hover{
    transform:none;
  }
  .s4x-main-nav a.is-active{background:rgba(22,142,242,.10)}
  .s4x-main-nav a:hover,
  .s4x-main-nav a.is-active:hover{background:rgba(244,119,33,.12)}
}

@media(hover:none){
  #s4x-part-feature-strip .feature:hover,
  #s4x-part-value-roles .value-card:hover,
  #s4x-part-value-roles .role:hover,
  .s4x-demo:hover,
  #s4x-part-hero-hover .button:hover,
  #s4x-part-layered-hero .s4x-cta a:hover{
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .s4x-site-header,
  .s4x-main-nav a,
  .s4x-demo,
  #s4x-part-hero-hover .button,
  #s4x-part-layered-hero .s4x-cta a,
  #s4x-part-feature-strip .feature,
  #s4x-part-value-roles .value-card,
  #s4x-part-value-roles .role{
    transition:none!important;
  }
}


/* ===== Survey4X v4: refinery edge blend + faint polygon particles ===== */

/* Make the refinery cutout dissolve into the surrounding night scene. */
#s4x-part-layered-hero .s4x-industry::before{
  background:
    linear-gradient(90deg,
      #020b16 0%,
      rgba(2,11,22,.97) 8%,
      rgba(2,11,22,.70) 15%,
      rgba(2,11,22,.24) 24%,
      rgba(2,11,22,0) 34%,
      rgba(2,11,22,0) 66%,
      rgba(2,11,22,.24) 76%,
      rgba(2,11,22,.70) 85%,
      rgba(2,11,22,.97) 92%,
      #020b16 100%);
}

#s4x-part-layered-hero .s4x-industry::after{
  height:48%;
  background:
    linear-gradient(to bottom,
      rgba(2,11,22,0) 0%,
      rgba(2,11,22,.08) 34%,
      rgba(2,11,22,.38) 67%,
      rgba(2,11,22,.88) 92%,
      #020b16 100%);
}

/* A second soft veil hides any remaining hard image boundary. */
#s4x-part-layered-hero .s4x-refinery-blend{
  z-index:2;
  background:
    radial-gradient(ellipse 56% 62% at 50% 78%,
      rgba(10,48,82,0) 0%,
      rgba(5,28,52,.16) 45%,
      rgba(2,11,22,.70) 82%,
      #020b16 100%),
    linear-gradient(to bottom,
      transparent 48%,
      rgba(2,11,22,.20) 70%,
      rgba(2,11,22,.76) 94%,
      #020b16 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 28%,black 60%);
  mask-image:linear-gradient(to bottom,transparent 28%,black 60%);
}

/* Faint polygon mesh floating between copy, map and refinery. */
#s4x-part-layered-hero .s4x-particle-canvas{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  opacity:.72;
  mix-blend-mode:screen;
  -webkit-mask-image:
    radial-gradient(ellipse 60% 70% at 50% 34%,black 0%,rgba(0,0,0,.92) 48%,transparent 88%),
    linear-gradient(to bottom,black 0%,black 70%,transparent 100%);
  mask-image:
    radial-gradient(ellipse 60% 70% at 50% 34%,black 0%,rgba(0,0,0,.92) 48%,transparent 88%),
    linear-gradient(to bottom,black 0%,black 70%,transparent 100%);
}

/* Keep the existing world map and foreground layers above the particle mesh. */
#s4x-part-layered-hero .s4x-network{ z-index:4; }
#s4x-part-layered-hero .s4x-map-fade{ z-index:5; }
#s4x-part-layered-hero .s4x-devices{ z-index:6; }
#s4x-part-layered-hero .s4x-copy{ z-index:7; }

@media (max-width:760px){
  #s4x-part-layered-hero .s4x-particle-canvas{
    opacity:.42;
  }

  #s4x-part-layered-hero .s4x-industry::before{
    background:
      linear-gradient(90deg,
        #020b16 0%,
        rgba(2,11,22,.82) 14%,
        transparent 34%,
        transparent 66%,
        rgba(2,11,22,.82) 86%,
        #020b16 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  #s4x-part-layered-hero .s4x-particle-canvas{
    opacity:.30;
  }
}


/* ===== Survey4X v5: CTA container repair ===== */
#s4x-part-layered-hero .s4x-cta{
  background:none !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  will-change:auto !important;
}
#s4x-part-layered-hero .s4x-cta:hover{
  background:none !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
#s4x-part-layered-hero .s4x-cta a{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* ===== Survey4X v6: natural refinery dissolve behind copy ===== */

/*
 * Fade the actual refinery layer itself. This removes the rectangular PNG edge
 * instead of merely placing a dark strip on top of it.
 */
#s4x-part-layered-hero .s4x-industry{
  -webkit-mask-image:radial-gradient(
    ellipse 57% 70% at 52% 72%,
    #000 0%,
    #000 52%,
    rgba(0,0,0,.94) 61%,
    rgba(0,0,0,.68) 73%,
    rgba(0,0,0,.24) 87%,
    transparent 100%
  );
  mask-image:radial-gradient(
    ellipse 57% 70% at 52% 72%,
    #000 0%,
    #000 52%,
    rgba(0,0,0,.94) 61%,
    rgba(0,0,0,.68) 73%,
    rgba(0,0,0,.24) 87%,
    transparent 100%
  );
}

/*
 * A broad atmospheric veil between copy and refinery. It starts fully dark
 * behind the copy and fades gradually through the open middle of the hero.
 */
#s4x-part-layered-hero .s4x-hero::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(2,11,22,.98) 0%,
      rgba(2,11,22,.94) 15%,
      rgba(2,11,22,.82) 27%,
      rgba(2,11,22,.56) 38%,
      rgba(2,11,22,.24) 49%,
      rgba(2,11,22,.07) 59%,
      transparent 70%),
    linear-gradient(to bottom,
      transparent 0%,
      transparent 64%,
      rgba(2,11,22,.12) 75%,
      rgba(2,11,22,.52) 91%,
      #020b16 100%);
}

/* Keep the particle mesh visible in the left atmospheric space. */
#s4x-part-layered-hero .s4x-particle-canvas{
  z-index:3;
  opacity:.82;
  -webkit-mask-image:
    linear-gradient(90deg,
      rgba(0,0,0,.98) 0%,
      rgba(0,0,0,.98) 44%,
      rgba(0,0,0,.78) 61%,
      rgba(0,0,0,.34) 79%,
      transparent 100%),
    linear-gradient(to bottom,black 0%,black 73%,transparent 100%);
  mask-image:
    linear-gradient(90deg,
      rgba(0,0,0,.98) 0%,
      rgba(0,0,0,.98) 44%,
      rgba(0,0,0,.78) 61%,
      rgba(0,0,0,.34) 79%,
      transparent 100%),
    linear-gradient(to bottom,black 0%,black 73%,transparent 100%);
}

/* Re-establish the intended stacking after the new atmospheric veil. */
#s4x-part-layered-hero .s4x-network{ z-index:4; }
#s4x-part-layered-hero .s4x-map-fade{ z-index:5; }
#s4x-part-layered-hero .s4x-devices{ z-index:6; }
#s4x-part-layered-hero .s4x-copy{ z-index:7; }

@media (max-width:900px){
  #s4x-part-layered-hero .s4x-industry{
    -webkit-mask-image:radial-gradient(
      ellipse 72% 68% at 58% 76%,
      #000 0%,
      #000 48%,
      rgba(0,0,0,.66) 76%,
      transparent 100%
    );
    mask-image:radial-gradient(
      ellipse 72% 68% at 58% 76%,
      #000 0%,
      #000 48%,
      rgba(0,0,0,.66) 76%,
      transparent 100%
    );
  }

  #s4x-part-layered-hero .s4x-hero::after{
    background:
      linear-gradient(90deg,
        rgba(2,11,22,.96) 0%,
        rgba(2,11,22,.82) 36%,
        rgba(2,11,22,.30) 65%,
        transparent 86%),
      linear-gradient(to bottom,
        transparent 52%,
        rgba(2,11,22,.28) 74%,
        #020b16 100%);
  }
}

/* ===== Survey4X v7: hero height, CTA visibility and soft device reflection ===== */

/* The previous 62vh rule clipped the copy and CTA on many desktop heights. */
#s4x-part-layered-hero{
  position:relative;
  overflow:hidden;
  padding-bottom:clamp(42px,5vw,86px);
  background:
    linear-gradient(to bottom,#020b16 0%,#020b16 68%,#03101f 100%);
}

#s4x-part-layered-hero .s4x-hero{
  height:auto !important;
  min-height:clamp(780px,78vh,940px) !important;
  overflow:hidden;
}

/* Give the text enough vertical room and keep the buttons inside the hero. */
#s4x-part-layered-hero .s4x-copy{
  padding-top:clamp(82px,9vh,132px);
  padding-bottom:clamp(76px,9vh,126px);
}

/* Fade the complete foreground composition gently into the section background. */
#s4x-part-layered-hero .s4x-devices::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:28%;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(2,11,22,0) 0%,
    rgba(2,11,22,.08) 28%,
    rgba(2,11,22,.32) 58%,
    rgba(2,11,22,.76) 84%,
    #020b16 100%
  );
}

/* A soft continuation below the image prevents the final section from ending abruptly. */
#s4x-part-layered-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:clamp(58px,7vw,110px);
  pointer-events:none;
  background:
    radial-gradient(ellipse 52% 120% at 73% 0%,rgba(25,112,183,.12),transparent 72%),
    linear-gradient(to bottom,rgba(2,11,22,0),#020b16 74%);
}

@media (min-width:1500px){
  #s4x-part-layered-hero .s4x-devices{
    background-position:right clamp(38px,5vw,110px) bottom 38px;
  }
}

@media (max-width:900px){
  #s4x-part-layered-hero{
    padding-bottom:34px;
  }

  #s4x-part-layered-hero .s4x-hero{
    min-height:760px !important;
  }

  #s4x-part-layered-hero .s4x-copy{
    padding-bottom:96px;
  }

  #s4x-part-layered-hero .s4x-devices::after{
    height:34%;
  }
}

/* ===== Survey4X v8: mobile feature strip fix ===== */
@media (max-width: 900px){
  #s4x-part-feature-strip,
  #s4x-part-feature-strip .features{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  #s4x-part-feature-strip .features .container{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    margin:0;
    padding:20px clamp(16px,4vw,28px);
    gap:18px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #s4x-part-feature-strip .feature{
    box-sizing:border-box;
    min-width:0;
    width:100%;
    padding:14px;
    gap:13px;
    border:1px solid rgba(103,171,255,.12);
    border-radius:14px;
    background:rgba(255,255,255,.018);
  }

  #s4x-part-feature-strip .feature > div:last-child{
    min-width:0;
  }

  #s4x-part-feature-strip h3,
  #s4x-part-feature-strip p{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
  }
}

@media (max-width: 620px){
  #s4x-part-feature-strip .features .container{
    grid-template-columns:1fr;
    padding:16px;
    gap:12px;
  }

  #s4x-part-feature-strip .feature{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    align-items:start;
    gap:12px;
    padding:14px 12px;
  }

  #s4x-part-feature-strip .icon{
    width:44px;
    height:44px;
    border-width:1.5px;
  }

  #s4x-part-feature-strip .icon svg{
    width:23px;
    height:23px;
  }

  #s4x-part-feature-strip h3{
    margin:1px 0 5px;
    font-size:13px;
    line-height:1.25;
    letter-spacing:.015em;
  }

  #s4x-part-feature-strip p{
    font-size:12.5px;
    line-height:1.45;
  }

  #s4x-part-feature-strip .feature:hover{
    transform:none;
  }
}

@media (max-width: 380px){
  #s4x-part-feature-strip .features .container{
    padding:12px;
  }

  #s4x-part-feature-strip .feature{
    grid-template-columns:40px minmax(0,1fr);
    padding:12px 10px;
    gap:10px;
  }

  #s4x-part-feature-strip .icon{
    width:40px;
    height:40px;
  }
}

/* ===== Survey4X v9: first hero CTA visibility + atmospheric star mesh ===== */
#s4x-part-hero-hover .hero{
  height:auto !important;
  min-height:clamp(700px, calc(100svh - var(--s4x-header-height, 74px)), 930px) !important;
  overflow:hidden;
}

#s4x-part-hero-hover .content{
  height:auto !important;
  min-height:clamp(700px, calc(100svh - var(--s4x-header-height, 74px)), 930px) !important;
  padding-top:calc(var(--s4x-header-height, 74px) + 34px);
  padding-bottom:clamp(78px, 9vh, 126px);
}

#s4x-part-hero-hover .copy{
  position:relative;
  z-index:5;
}

#s4x-part-hero-hover .actions{
  position:relative;
  z-index:6;
  margin-bottom:8px;
}

#s4x-part-hero-hover .s4x-copy-particle-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
  opacity:.76;
  mix-blend-mode:screen;
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 38%, rgba(0,0,0,.72) 53%, transparent 72%),
    linear-gradient(to bottom, transparent 2%, #000 15%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(90deg, #000 0%, #000 38%, rgba(0,0,0,.72) 53%, transparent 72%),
    linear-gradient(to bottom, transparent 2%, #000 15%, #000 82%, transparent 100%);
}

@media (max-width:800px){
  #s4x-part-hero-hover .hero,
  #s4x-part-hero-hover .content{
    min-height:760px !important;
  }

  #s4x-part-hero-hover .content{
    align-items:flex-end;
    padding-top:calc(var(--s4x-header-height, 68px) + 26px);
    padding-bottom:72px;
  }

  #s4x-part-hero-hover .actions{
    width:100%;
  }

  #s4x-part-hero-hover .button{
    max-width:100%;
  }
}

@media (max-width:520px){
  #s4x-part-hero-hover .hero,
  #s4x-part-hero-hover .content{
    min-height:820px !important;
  }

  #s4x-part-hero-hover .actions{
    display:grid;
    grid-template-columns:1fr;
  }

  #s4x-part-hero-hover .button{
    width:100%;
  }

  #s4x-part-hero-hover .s4x-copy-particle-canvas{
    opacity:.55;
    -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.78) 68%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.78) 68%,transparent 100%);
  }
}

/* ===== Survey4X v10: live product videos inside device mockups ===== */
#s4x-part-layered-hero .s4x-devices{
  z-index:6;
  background:none !important;
  filter:none !important;
  pointer-events:none;
}

#s4x-part-layered-hero .s4x-device-stage{
  position:absolute;
  right:clamp(20px,5vw,90px);
  bottom:26px;
  width:min(43vw,700px);
  aspect-ratio:3 / 2;
  transform:translateZ(0);
  filter:drop-shadow(0 28px 52px rgba(0,0,0,.55));
  animation:s4x-device-float 7s ease-in-out infinite;
}

#s4x-part-layered-hero .s4x-device-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:5;
  pointer-events:none;
}

#s4x-part-layered-hero .s4x-device-screen,
#s4x-part-layered-hero .s4x-device-reflection{
  position:absolute;
  overflow:hidden;
  background:#020b16;
  isolation:isolate;
}

#s4x-part-layered-hero .s4x-device-screen--laptop{
  left:24.9%;
  top:16.2%;
  width:43.7%;
  height:50.3%;
  z-index:3;
  clip-path:polygon(1.4% 0, 96.7% 3.8%, 99.2% 96.3%, 3.2% 100%);
  border-radius:1.2% 2.1% 1.4% 1.7%;
  transform:perspective(1200px) rotateZ(.15deg);
  transform-origin:center;
  box-shadow:0 0 26px rgba(62,168,255,.18);
}

#s4x-part-layered-hero .s4x-device-screen--phone{
  left:14.9%;
  top:36.0%;
  width:13.9%;
  height:45.0%;
  z-index:4;
  clip-path:polygon(7% 1%, 92.5% 2.8%, 96.2% 97.5%, 4.5% 99%);
  border-radius:12% / 5%;
  transform:perspective(900px) rotateZ(-.15deg);
  box-shadow:0 0 18px rgba(62,168,255,.22);
}

#s4x-part-layered-hero .s4x-device-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#020b16;
}

#s4x-part-layered-hero .s4x-device-video--desktop{
  object-position:center top;
}

#s4x-part-layered-hero .s4x-device-video--mobile{
  object-position:center top;
}

#s4x-part-layered-hero .s4x-device-reflection{
  z-index:2;
  opacity:.18;
  filter:blur(1.8px) brightness(.62) saturate(.9);
  transform-origin:center top;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.22) 45%,transparent 92%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.22) 45%,transparent 92%);
}

#s4x-part-layered-hero .s4x-device-reflection--laptop{
  left:27.0%;
  top:81.3%;
  width:41.1%;
  height:23.5%;
  clip-path:polygon(4% 0,96% 0,81% 100%,18% 100%);
  transform:scaleY(-1) perspective(900px) rotateX(18deg);
}

#s4x-part-layered-hero .s4x-device-reflection--phone{
  left:15.2%;
  top:81.4%;
  width:13.1%;
  height:18.2%;
  clip-path:polygon(5% 0,95% 0,84% 100%,16% 100%);
  transform:scaleY(-1) perspective(700px) rotateX(15deg);
}

#s4x-part-layered-hero .s4x-device-glass{
  position:absolute;
  left:24.7%;
  top:15.8%;
  width:44.1%;
  height:50.7%;
  z-index:6;
  pointer-events:none;
  clip-path:polygon(1% 0,97% 4%,99% 96%,3% 100%);
  background:linear-gradient(125deg,rgba(255,255,255,.10),transparent 24%,transparent 66%,rgba(95,190,255,.045));
  mix-blend-mode:screen;
  opacity:.58;
}

@keyframes s4x-device-float{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(0,-4px,0); }
}

@media (min-width:1500px){
  #s4x-part-layered-hero .s4x-device-stage{
    right:clamp(38px,5vw,110px);
    bottom:38px;
  }
}

@media (max-width:1050px){
  #s4x-part-layered-hero .s4x-device-stage{
    width:min(52vw,620px);
    right:-4vw;
    opacity:.84;
  }
}

@media (max-width:760px){
  #s4x-part-layered-hero .s4x-device-stage{
    width:min(92vw,620px);
    right:-20vw;
    bottom:28px;
    opacity:.46;
  }
}

@media (prefers-reduced-motion:reduce){
  #s4x-part-layered-hero .s4x-device-stage{ animation:none; }
}

/* ========================================================================== 
   Survey4X v11 - isolated device videos and live reflections
   Asset files expected beside index.html:
   - survey4x-devices-cutout.png
   - survey4x-desktop-demo.mp4
   - survey4x-mobile-demo.mp4
   ========================================================================== */
#s4x-part-layered-hero .s4x-product-devices{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
}

#s4x-part-layered-hero .s4x-product-devices__stage{
  --device-width:min(43vw,700px);
  position:absolute;
  right:clamp(18px,5vw,90px);
  bottom:clamp(24px,4vh,58px);
  width:var(--device-width);
  aspect-ratio:3 / 2;
  filter:drop-shadow(0 30px 55px rgba(0,0,0,.55));
  animation:s4xProductFloat 7s ease-in-out infinite;
  transform:translateZ(0);
}

#s4x-part-layered-hero .s4x-product-devices__frame{
  position:absolute;
  inset:0;
  z-index:10;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

#s4x-part-layered-hero .s4x-product-screen,
#s4x-part-layered-hero .s4x-product-reflection{
  position:absolute;
  overflow:hidden;
  isolation:isolate;
  background:#03101d;
}

/* Adjust these four values when your transparent laptop opening differs. */
#s4x-part-layered-hero .s4x-product-screen--laptop{
  left: 24.9%;
  top: 16.2%;
  width: 63.7%;
  height: 50.3%;
  z-index:4;
  clip-path: polygon(-188.6% 0,63.7% -51.2%,77% 95%,-11.8% 119%);
  border-radius:2%;
  box-shadow:0 0 28px rgba(64,170,255,.20);
  transform: perspective(900px) rotateX(-6deg) rotateY(15deg);
}

/* Adjust these four values when your transparent phone/tablet opening differs. */
#s4x-part-layered-hero .s4x-product-screen--mobile {
  left: 14.9%;
  top: 35%;
  width: 13.9%;
  height: 49%;
  z-index: 5;
  clip-path: polygon(-19% -8%, 89% 0.8%, 100% 99%, -33.5% 109%);
  border-radius: 12% / 5%;
  box-shadow: 0 0 16px rgba(64, 170, 255, .24);
  transform: perspective(900px) rotateX(-21deg) rotateY(3deg);
}

#s4x-part-layered-hero .s4x-product-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  background:#03101d;
}

/* The reflection is an actual second video, flipped upside down. */
#s4x-part-layered-hero .s4x-product-reflection{
  z-index:2;
  opacity:.49;
  filter:blur(2.2px) brightness(.66) saturate(.82);
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.32) 42%,transparent 94%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.32) 42%,transparent 94%);
}

#s4x-part-layered-hero .s4x-product-reflection--laptop{
  left:26.7%;
  top:80.2%;
  width:41.8%;
  height:25%;
  clip-path:polygon(4% 0,96% 0,80% 100%,19% 100%);
  transform:perspective(950px) rotateX(20deg) scaleY(-1);
}

#s4x-part-layered-hero .s4x-product-reflection--mobile {
  left: 15.2%;
  top: 92.4%;
  width: 13.2%;
  height: 19%;
  clip-path:polygon(1% 0,97% 4%,99% 96%,3% 100%);
  transform: perspective(760px) rotateX(-2deg) scaleY(-1);
}

#s4x-part-layered-hero .s4x-product-devices__glass{
  position:absolute;
  left:24.7%;
  top:15.8%;
  width:44.1%;
  height:50.7%;
  z-index:11;
  pointer-events:none;
  clip-path:polygon(1% 0,97% 4%,99% 96%,3% 100%);
  background:linear-gradient(125deg,rgba(255,255,255,.11),transparent 25%,transparent 67%,rgba(85,185,255,.05));
  mix-blend-mode:screen;
  opacity:.55;
}

@keyframes s4xProductFloat{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(0,-5px,0); }
}

@media (max-width:1100px){
  #s4x-part-layered-hero .s4x-product-devices__stage{
    --device-width:min(55vw,650px);
    right:-3vw;
    bottom:34px;
    opacity:.92;
  }
}

@media (max-width:760px){
  #s4x-part-layered-hero .s4x-product-devices__stage{
    --device-width:min(94vw,620px);
    right:-22vw;
    bottom:20px;
    opacity:.68;
  }
}

@media (prefers-reduced-motion:reduce){
  #s4x-part-layered-hero .s4x-product-devices__stage{
    animation:none;
  }
}