/* GOED WEBWERK v3.2 — transitions + interaction language */
:root{
  --v32-ease:cubic-bezier(.2,.8,.2,1);
  --v32-spring:cubic-bezier(.16,1,.3,1);
}

/* Transition bridges */
.v32-bridge{
  position:relative;height:88px;margin:-1px 0;overflow:hidden;z-index:6;
  background:linear-gradient(180deg,var(--v32-from),var(--v32-to));
  pointer-events:none
}
.v32-bridge::before,.v32-bridge::after{
  content:"";position:absolute;border-radius:999px;filter:blur(.2px);
  transform:rotate(-4deg)
}
.v32-bridge::before{
  width:66vw;height:28px;left:-8vw;top:22px;
  background:linear-gradient(90deg,var(--v32-a),var(--v32-b));
  box-shadow:0 0 35px color-mix(in srgb,var(--v32-a) 35%,transparent)
}
.v32-bridge::after{
  width:52vw;height:12px;right:-5vw;bottom:16px;
  background:linear-gradient(90deg,var(--v32-c),var(--v32-d));opacity:.85
}
.v32-bridge[data-type="night-blue"]{--v32-from:#071426;--v32-to:#0a42da;--v32-a:#35d6d0;--v32-b:#2b6cff;--v32-c:#ffc93d;--v32-d:#ff6d36}
.v32-bridge[data-type="paper-night"]{--v32-from:#f4ecdc;--v32-to:#09162a;--v32-a:#ffc93d;--v32-b:#ff6d36;--v32-c:#ef4f9a;--v32-d:#2b6cff}
.v32-bridge[data-type="night-gold"]{--v32-from:#09162a;--v32-to:#ffc93d;--v32-a:#35d6d0;--v32-b:#2b6cff;--v32-c:#ef4f9a;--v32-d:#ff6d36}
.v32-bridge[data-type="paper-night2"]{--v32-from:#fffdf7;--v32-to:#071426;--v32-a:#2b6cff;--v32-b:#35d6d0;--v32-c:#ffc93d;--v32-d:#ef4f9a}
.v32-bridge .v32-brush{
  position:absolute;left:42%;top:11px;width:34vw;height:52px;border-radius:52% 48% 64% 36% / 46% 57% 43% 54%;
  border:1px solid rgba(255,255,255,.13);opacity:.5;transform:rotate(3deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent)
}

/* Shared interaction surface */
.v32-interactive{
  --v32-x:50%;--v32-y:50%;--v32-mx:0px;--v32-my:0px;
  position:relative;
}
.v32-interactive::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(320px circle at var(--v32-x) var(--v32-y),rgba(255,255,255,.18),transparent 43%);
  opacity:0;transition:opacity .28s ease
}
.v32-interactive:hover::after{opacity:1}
.v32-interactive>*{position:relative;z-index:1}

/* Cards: same tactile response everywhere */
body.v3-immersive .case,
body.v3-immersive .own-card,
body.v3-immersive .skills-home-grid>article,
body.v3-immersive .price-card,
.v3-cap{
  transition:
    transform .42s var(--v32-spring),
    box-shadow .42s var(--v32-ease),
    border-color .32s ease,
    background-color .32s ease!important;
}
body.v3-immersive .case:hover,
body.v3-immersive .own-card:hover,
body.v3-immersive .skills-home-grid>article:hover,
body.v3-immersive .price-card:hover{
  box-shadow:0 34px 84px rgba(8,19,35,.16)!important;
}

/* Unified buttons */
body.v3-immersive .header-cta,
body.v3-immersive .primary-link,
body.v3-immersive .process-intro>a,
body.v3-immersive .case-copy>a,
body.v3-immersive .own-copy>a,
body.v3-immersive .contact-links>a,
body.v3-immersive .contact form button,
body.v3-immersive .skills-home-link{
  --v32-mx:0px;--v32-my:0px;
  transform:translate3d(var(--v32-mx),var(--v32-my),0);
  transition:transform .32s var(--v32-spring),box-shadow .3s ease,background-color .3s ease,color .3s ease,border-color .3s ease!important;
  will-change:transform
}
body.v3-immersive .header-cta:hover,
body.v3-immersive .primary-link:hover,
body.v3-immersive .contact form button:hover,
body.v3-immersive .skills-home-link:hover{
  transform:translate3d(var(--v32-mx),calc(var(--v32-my) - 4px),0) scale(1.015)
}
body.v3-immersive .header-cta:active,
body.v3-immersive .primary-link:active,
body.v3-immersive .contact form button:active,
body.v3-immersive .skills-home-link:active{
  transform:translate3d(var(--v32-mx),var(--v32-my),0) scale(.975)!important;
  transition-duration:.09s!important
}
body.v3-immersive a b,
body.v3-immersive button b{
  transition:transform .32s var(--v32-spring)
}
body.v3-immersive a:hover>b,
body.v3-immersive button:hover>b{transform:translate(3px,-2px) rotate(-4deg)}

/* Desktop section navigation */
.v32-section-nav{
  position:fixed;right:18px;top:50%;z-index:49;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:9px;padding:12px 9px;
  border:1px solid rgba(255,255,255,.12);border-radius:999px;
  background:rgba(5,16,31,.54);backdrop-filter:blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.14)
}
.v32-section-nav button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.28);cursor:pointer;position:relative;
  transition:transform .25s var(--v32-spring),background .25s ease,box-shadow .25s ease
}
.v32-section-nav button::before{
  content:attr(aria-label);position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(5px);
  opacity:0;pointer-events:none;white-space:nowrap;padding:6px 9px;border-radius:8px;
  background:#071426;color:#fff;font:600 11px/1 Goed,Arial,sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,.18);transition:.2s ease
}
.v32-section-nav button:hover::before{opacity:1;transform:translateY(-50%) translateX(0)}
.v32-section-nav button:hover{transform:scale(1.35);background:#fff}
.v32-section-nav button.is-active{
  transform:scale(1.45);background:var(--v3-gold);box-shadow:0 0 0 4px rgba(255,201,61,.13)
}

/* Subtle section title drift */
.v32-drift{--v32-drift:0px;transform:translate3d(0,var(--v32-drift),0);will-change:transform}

/* Make the large color transitions feel deliberate */
body.v3-immersive .work,
body.v3-immersive .own-products,
body.v3-immersive .skills-home,
body.v3-immersive .process,
body.v3-immersive .pricing,
body.v3-immersive .contact,
.v3-capabilities{isolation:isolate}

/* Fine hover line for text links */
body.v3-immersive .case-copy>a,
body.v3-immersive .own-copy>a,
body.v3-immersive .process-intro>a{
  position:relative;text-decoration:none;border-bottom:0!important
}
body.v3-immersive .case-copy>a::after,
body.v3-immersive .own-copy>a::after,
body.v3-immersive .process-intro>a::after{
  content:"";position:absolute;left:0;bottom:-5px;width:100%;height:2px;
  transform:scaleX(.32);transform-origin:left;background:currentColor;opacity:.45;
  transition:transform .32s var(--v32-spring),opacity .3s ease
}
body.v3-immersive .case-copy>a:hover::after,
body.v3-immersive .own-copy>a:hover::after,
body.v3-immersive .process-intro>a:hover::after{transform:scaleX(1);opacity:.9}

/* Mobile simplification */
@media(max-width:900px){
  .v32-section-nav{display:none}
  .v32-bridge{height:54px}
  .v32-bridge::before{height:20px;top:15px;width:78vw}
  .v32-bridge::after{height:8px;bottom:10px;width:62vw}
  .v32-bridge .v32-brush{height:34px;top:8px}
}
@media(max-width:640px){
  .v32-interactive::after{display:none}
  .v32-bridge{height:42px}
  body.v3-immersive .header-cta,
  body.v3-immersive .primary-link,
  body.v3-immersive .contact form button,
  body.v3-immersive .skills-home-link{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .v32-section-nav{display:none}
  .v32-drift{transform:none!important}
  .v32-bridge::before,.v32-bridge::after{transform:none!important}
}
/* v3.2 QA: keep angled marquee without widening the document */
body.v3-immersive .v3-marquee{
  width:100%;max-width:100%;transform:none!important;
  clip-path:polygon(0 10%,100% 0,100% 90%,0 100%);
  margin-top:-5px;margin-bottom:-5px;
}
body.v3-immersive .v3-marquee-track{transform-origin:center}