/* v4.3.255 — twee duidelijke actieniveaus met vaste ademruimte */
@media (min-width:1025px){
  .hero .shell{width:min(1460px,calc(100% - 32px))}
  .hero-copy{max-width:none;width:100%;padding:22px 0 28px!important;box-sizing:border-box}
  .hero-copy>p{max-width:760px}
  .hero .actions{position:relative;display:grid;grid-template-columns:minmax(150px,.86fr) minmax(145px,.82fr) minmax(180px,1fr) minmax(184px,1.04fr) minmax(198px,1.12fr);gap:8px;width:100%;margin:16px 0 0!important;padding:0;transform:none}
  .hero .actions>a{width:100%;min-width:0!important;max-width:none;min-height:50px;margin:0!important;padding-inline:10px;white-space:nowrap}
  .hero .actions .btn{font-size:clamp(.72rem,.78vw,.88rem)}
  .hero .actions .home-svx-live-launch,.hero .actions .home-dpc-launch,.hero .actions .home-workspace-launch{border-radius:12px}
  .hero .actions small{letter-spacing:.08em}
  .home-app-dock>.shell{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;overflow:visible}
  .home-app-dock a,.home-app-dock .workspace{min-width:0;flex:none;padding-inline:8px}
  .home-app-dock a>span{overflow:hidden}
  .home-app-dock strong,.home-app-dock small{overflow:hidden;text-overflow:ellipsis}
}

/* De hoofdacties en de toepassingenbalk blijven altijd visueel gescheiden. */
.hero{z-index:2;overflow:visible}
.hero:after{content:"";position:absolute;left:50%;bottom:-18px;width:min(1100px,76vw);height:42px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse at center,rgba(67,221,255,.18),transparent 68%);filter:blur(10px)}
.hero .actions{isolation:isolate}
.hero .actions>a{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease}
.hero .actions>a:hover,.hero .actions>a:focus-visible{z-index:2;transform:translateY(-2px);filter:brightness(1.08);outline:none}
.home-app-dock{margin-top:22px!important;border-top-color:rgba(86,221,255,.42)!important;background:linear-gradient(180deg,rgba(5,25,38,.98),rgba(2,13,23,.99))!important;box-shadow:0 -12px 34px rgba(1,10,18,.82),0 -1px 0 rgba(86,221,255,.12),0 16px 38px rgba(0,0,0,.3)!important}
.home-app-dock:before{content:"TOEPASSINGEN";position:absolute;left:max(20px,calc((100% - 1460px)/2));top:-12px;padding:3px 11px;border:1px solid rgba(86,221,255,.32);border-radius:999px;background:#051724;color:#79dff4;font-size:.58rem;font-weight:700;letter-spacing:.16em;line-height:1.2}
.home-app-dock a{transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.home-app-dock a:hover,.home-app-dock a:focus-visible{z-index:2;transform:translateY(-2px);box-shadow:inset 0 -3px var(--app),0 9px 22px rgba(0,0,0,.34),0 0 18px color-mix(in srgb,var(--app) 18%,transparent)}
@media (min-width:701px) and (max-width:1024px){
  .hero .actions{row-gap:12px!important;column-gap:10px!important;margin-bottom:12px!important}
  .home-app-dock{margin-top:24px!important}
  .home-app-dock:before{left:18px}
}
@media (max-width:700px){
  .hero:after{bottom:-12px;width:86vw;height:30px}
  .hero .actions{gap:10px!important;margin-bottom:12px!important;padding-bottom:10px!important}
  .home-app-dock{margin-top:20px!important}
  .home-app-dock:before{left:12px;top:-11px}
}
@media(prefers-reduced-motion:reduce){.hero .actions>a,.home-app-dock a{transition:none}}
@media (min-width:1025px) and (max-width:1180px){
  .hero .shell{width:calc(100% - 22px)}
  .hero .actions{grid-template-columns:.82fr .78fr 1fr 1fr 1.08fr;gap:5px}
  .hero .actions>a{padding-inline:7px;gap:6px}
  .hero .actions .home-svx-live-launch>i,.hero .actions .home-dpc-launch>i,.hero .actions .home-workspace-launch>i{width:30px;height:30px}
  .hero .actions small{font-size:.42rem!important}
  .hero .actions strong{font-size:.7rem!important}
  .home-app-dock a{gap:6px;padding-inline:6px}
  .home-app-dock small{display:none}
}